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-/:]+(?

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

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

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