webpack+js+tailwindcss配置方案
之前安装 tailwindcss 的时候是结合 vite 打包工具进行配置的，但是最近接到了一个新的需求是将原 tailwindcss 配置到原来使用 webpack 的项目中，相比较 vite + tailwindcss ，webpack + tailwindcss 更加复杂一些，故在此进行记录。
一、tailwindcss是什么
想要使用 tailwindcss 首先要了解其安装作用，这里提供官方网站供参考
二、配置
- 通过 npm 安装 Tailwind 及其依赖项 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 由于 Tailwind 不会自动添加浏览器引擎前缀到生成的 CSS 中，建议安装 autoprefixer 去处理这个问题，就像上面的代码片段所展示的那样。
- 作为 PostCSS 插件来添加 Tailwind 将 tailwindcss和 autoprefixer 添加到你的 PostCSS 配置中。 多数情况下，这是项目根目录下的 postcss.config.js 文件，但也可能是 .postcssrc 文件或是由 package.json 文件中的 postcss 键所指定。 // postcss.config.js module.exports = { plugins: { tailwindcss: { }, autoprefixer: { }, } }
- 创建配置文件 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: [] };
- 包含 Tailwind 到你的 CSS 中 创建一个文件，或者你的项目 css 样式文件中，添加如下代码 /* ./your-css-folder/styles.css */ @tailwind base; @tailwind components; @tailwind utilities;
- 引入 在 app.js 中引入刚刚的样式 //app.js import containers/App/styles/tailwind.css; 如果是 vite 打包工具此时已经可以使用了，但是使用 webpack 打包工具需要再配置 style-loader、css-loader、postcss-loader
- 安装配置项 注意版本问题！！，版本过高会报错 "devDependencies" : { "style-loader": "0.23.1", "css-loader": "2.1.1", "postcss-loader": "^4.3.0", }
- 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>
