tailwindcss使用步骤

安装tailwindcss

1. 安装

npm install tailwindcss

2. 引入
   在scss文件引入，并导入main.js生效

引入如下:

// 注入 @tailwind base; @tailwind components; @tailwind utilities; // 正常导入 @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; 

3. 初始化tailwindcss配置文件

npx tailwindcss init

4. 裁剪尺寸
   使用purgecss进行裁剪

const path = require("path"); // Purgecss 编译时裁剪css样式大小 const purgecss = require("@fullhuman/postcss-purgecss")({ // Specify the paths to all of the template files in your project content: [ "./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx", // etc. ], // Include any special characters you're using in this regular expression defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [], }); module.exports = { parser: require("postcss-comment"), plugins: [ // 将tailwindcss作为postcss 插件引入 require("tailwindcss"), require("postcss-import")({ resolve(id, basedir, importOptions) { if (id.startsWith("~@/")) { return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3)); } else if (id.startsWith("@/")) { return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2)); } else if (id.startsWith("/") && !id.startsWith("//")) { return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1)); } return id; }, }), // 根据平台差异进行不同的样式处理 ...(process.env.UNI_PLATFORM !== "h5" ? [ // 使用postcss-class-name 包将小程序不支持的类名转换为支持的类名 require("postcss-class-rename")({ "\\\\:": "--", "\\\\/": "--", }), ] : [ require("autoprefixer")({ remove: true, }), ]), require("@dcloudio/vue-cli-plugin-uni/packages/postcss"), // 添加purgecss处理 ...(process.env.NODE_ENV === "production" ? [purgecss] : []), // purgecss, ], }; 

上面可以用于uniapp 小程序开发

5. 针对小程序支持的样式进行样式别名

...(process.env.UNI_PLATFORM !== "h5" ? [ // 使用postcss-class-name 包将小程序不支持的类名转换为支持的类名 require("postcss-class-rename")({ "\\\\:": "--", "\\\\/": "--", }), ] : [ require("autoprefixer")({ remove: true, }), ]), : [] )