webpack+js+tailwindcss配置方案

之前安装 tailwindcss 的时候是结合 vite 打包工具进行配置的，但是最近接到了一个新的需求是将原 tailwindcss 配置到原来使用 webpack 的项目中，相比较 vite + tailwindcss ，webpack + tailwindcss 更加复杂一些，故在此进行记录。

一、tailwindcss是什么

想要使用 tailwindcss 首先要了解其安装作用，这里提供官方网站供参考
中文文档 - Tailwind CSS 中文文档

二、配置

1. 通过 npm 安装 Tailwind 及其依赖项

   npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
   

   由于 Tailwind 不会自动添加浏览器引擎前缀到生成的 CSS 中，建议安装 autoprefixer 去处理这个问题，就像上面的代码片段所展示的那样。

2. 作为 PostCSS 插件来添加 Tailwind

   将 tailwindcss和 autoprefixer 添加到你的 PostCSS 配置中。 多数情况下，这是项目根目录下的 postcss.config.js 文件，但也可能是 .postcssrc 文件或是由 package.json 文件中的 postcss 键所指定。

   // postcss.config.js
   module.exports = {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     }
   }
   

3. 创建配置文件

   npx tailwindcss init
   

   此时会生成一个 tailwindcss.config.js 文件，文件内容根据自己项目来定，需要自己添加purge，大致如下

   /** @type {import('tailwindcss').Config} */
   module.exports = {
   //文件路径根据自己项目来定，可能是 ./src/**/*.{js,ts,jsx,tsx}
     purge: [ "./app/**/*.{js,jsx}", "./app/index.html" ],
     darkMode: false, // or 'media' or 'class'
     theme: {
       extend: {}
     },
     variants: {},
     plugins: []
   };
   

4. 包含 Tailwind 到你的 CSS 中
   创建一个文件，或者你的项目 css 样式文件中，添加如下代码

   /* ./your-css-folder/styles.css */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

5. 引入
   在 app.js 中引入刚刚的样式

   //app.js
   import 'containers/App/styles/tailwind.css';
   

   如果是 vite 打包工具此时已经可以使用了，但是使用 webpack 打包工具需要再配置 style-loader、css-loader、postcss-loader

6. 安装配置项 注意版本问题！！，版本过高会报错

   "devDependencies" : {
   	"style-loader": "0.23.1",
   	"css-loader": "2.1.1",
   	"postcss-loader": "^4.3.0",
   }
   

7. webpack.base.babel.js
   找到该文件，在 module 中添加 css 样式的 rules

   module.exports = (options) => ({
   	module: {
   		rules: [
   			{
       		test: /\.css$/,
       		exclude: /node_modules/,
       		use: [ 'style-loader', 'css-loader', 'postcss-loader' ]
    	 		},
   		]
   	}
   })
   

   另外在 /\.less$/ 中也将 postcss-loader 添加在 use 中。

三、结尾

这时重新启动项目应该就没问题了，尝试在项目中使用如下代码验证是否配置成功。

<div className="text-[50px]">111</div>