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

6. webstorm 代碼提示支持
   教程