前端工程化 -- 配置TailwindCss

本文提供两种在前端项目中配置TailwindCss的方法，希望能够帮助到被配置烦扰的同学。

1. 在CRA项目中配置tailwindcss

eject前准备

csharp 复制代码

git init && git add . && git commit -m "init"

释放配置

yarn eject
初始化tailwindcss的配置

csharp 复制代码

npx tailwindcss init

修改其中的配置

css 复制代码

content: ["./src/**/*.{ts,tsx,js,jsx}", "./public/index.html"],

引入tailwindcss的预置样式 在src/index.css文件头部增加：

less 复制代码

@tailwind base;
@taiwind components;
@tailwind utilities;

使用index.css 在src/index.tsx中引入index.css：

arduino 复制代码

import "./index.css";

测试使用下面的代码测试是否配置成功：

css 复制代码

<div className="bg-blue-300 text-white p-4">Hello, Tailwind Css !</div>

运行项目

sql 复制代码

yarn start

2. 在非CRA项目中配置tailwindcss

使用webpack-cli快速生成基础配置

csharp 复制代码

yarn init -y
npx webpack init

选择"y"，然后再次运行该命令。 2. 卸载自动安装的postcss和loader

arduino 复制代码

yarn remove postcss postcss-loader

安装tailwindcss及配套的postcss

sql 复制代码

yarn add postcss@8.4.4 postcss-flexbugs-fixes@5.0.2 postcss-loader@6.2.1 postcss-normalize@10.0.1 postcss-preset-env@7.0.1 tailwindcss@3.0.2

初始化tailwindcss配置项

csharp 复制代码

npx tailwindcss init

修改其中的配置

css 复制代码

content: ["./src/**/*.{ts,tsx,js,jsx}", "./index.html"],

创建样式文件

bash 复制代码

touch src/index.css

在样式文件中引入tailwindcss

less 复制代码

@tailwind base;
@taiwind components;
@tailwind utilities;

在src/index.ts中使用index.css

arduino 复制代码

import "./index.css";

在index.html中使用样式

css 复制代码

<div class="bg-blue-300 text-white p-4">Hello, Tailwind Css !</div>

修改webpack.config.js中的配置 替换postcss-loader的配置为：

javascript 复制代码

{
  loader: require.resolve('postcss-loader'),
  options:{
    postcssOptions:{
      ident: "postcss",
      config: false,
      plugins: !useTailWind ? [
        "postcss-flexbugs-fixes",
        ["postcss-preset-env", {
          autoprefixer: {flexbox: "no-2019"},
          stage: 3,
        }],
        "postcss-normalize",
      ]:[
        "tailwindcss",
        "postcss-flexbugs-fixes",
        ["postcss-preset-env", {
          autoprefixer: {flexbox: "no-2019"},
          stage: 3,
        }],
      ]
    }
  }
}

其中，const useTailWind = fs.existsSync(path.join("./", "tailwind.config.js")); 用于检查是否存在tailwind.config.js文件，以确定是否使用tailwindcss。 11. 测试

r 复制代码

yarn serve
yarn build:prod

以上是在CRA项目和非CRA项目中配置tailwindcss的步骤和代码示例。