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, }), ]), : [] )