- 安装
npm install -D tailwindcss
npx tailwindcss init
- 配置 tailwind.config.js
//根据个人需求填写，比如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
@tailwind base;
@tailwind components;
@tailwind utilities;
- postcss.config.js 调整
export default {plugins: {tailwindcss: {},autoprefixer: {}}
};
现在就可以在你的项目种直接使用tailwindcss，附上官网链接：tailwindcss
