前端项目支持tailwindcss写样式

Smileyqp沛沛2024-11-21 12:15

安装

shell 复制代码

npm install -D tailwindcss
npx tailwindcss init

配置 tailwind.config.js

shell 复制代码

//根据个人需求填写，比如vue简单配置
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  corePlugins: {
    preflight: false
  },
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        bg_color: "var(--el-bg-color)",
        primary: "var(--el-color-primary)",
        primary_light_9: "var(--el-color-primary-light-9)",
        text_color_primary: "var(--el-text-color-primary)",
        text_color_regular: "var(--el-text-color-regular)",
        text_color_disabled: "var(--el-text-color-disabled)"
      }
    }
  }
};

Tailwind 的指令添加到你的 CSS 文件中，可以新建css文件并贴入以下代码，并且在main文件种引入该css

shell 复制代码

@tailwind base;
@tailwind components;
@tailwind utilities;

postcss.config.js 调整

shell 复制代码

export default {
	plugins: {
		tailwindcss: {},
		autoprefixer: {}
	}
};

现在就可以在你的项目种直接使用tailwindcss，附上官网链接：tailwindcss