在 Webpack 中使用 TailwindCSS 的最佳实践
TailwindCSS 是一个非常流行的 CSS 框架，旨在提供直接绑定到 HTML 元素的原子类，以实现更快、更轻松的样式开发。Webpack 是一个流行的构建工具，用于编译和打包应用程序。在此文章中，我们将会讨论如何将 TailwindCSS 集成到 Webpack 中，以及最佳实践。
安装依赖
首先，我们需要安装 webpack 和 webpack-cli ：
npm install webpack webpack-cli --save-dev
接下来，我们需要安装 TailwindCSS 和 PostCSS 及其相关插件：
npm install tailwindcss postcss postcss-cli autoprefixer --save-dev
注意：TailwindCSS 需要 Node.js 在 v14.4.0 或更高版本，并需要在项目根目录下的 tailwind.config.js 文件中配置。有关更多信息，请参阅 TailwindCSS 文档。
配置 PostCSS
在项目根目录下创建一个新文件 postcss.config.js，并添加以下内容：
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
};这将启用 PostCSS 并添加 TailwindCSS 和 Autoprefixer 插件。我们可以在 webpack 配置文件中配置这个文件来使用它。
配置 webpack
我们需要在 webpack 配置文件中添加相应的配置。在此例中，我们将使用 webpack 5 及其新的模块联邦功能。
首先，我们需要导入所需的插件：
const { ModuleFederationPlugin } = require('webpack').container;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const PostCSSAssetsPlugin = require('postcss-assets-webpack-plugin');
const Critters = require('critters-webpack-plugin');接下来，我们需要配置 webpack：
-- -------------------- ---- -------
-------------- - -
----- -------------
------ -----------------
------- -
----------- -------------------------
-------------- ------------------------
----------------- --
--
------------- -
--------- -----
------------ -
------- ------
------------------- ---------
-------- --
------------ -
------- -
----- -------------------------
------------ -
----- ----------- - ----------------------------------------------------------------
------ ------------------------------- ------
--
--
--
--
--
-------- -
--- ------------------------
----- --------
--------- -----------------
-------- -
--------------- ----------------------------------
--
------- -
---- - ---------- ---- --
------------- - ---------- ---- --
--
---
--- -------------------
--------- -------------
---
--- -------------------
--------- -- ----- -------- ---
---
--- ---------------------
----- ----------------
---- -----
-------- -
--------------------------
-------------------- ------- --------- ---
--
---
--- ----------
-------- --------
--------- -----
------- -----
---
--
------- -
------ -
-
----- ---------
---- -
-
------- ---------------
--
-
------- -------------
--
-
------- -----------------
-------- -
--------------- -
------- ----------------------
--
--
--
--
--
-
----- ---------------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ----------------
----------- ----------------
--
--
--
--
--
--
--这个配置文件将使用 TailwindCSS 和 PostCSS 配置，同时支持图片文件和状态分割。
添加示例代码
在 src/index.js 文件中，我们可以添加一个示例样式，以测试 TailwindCSS 是否正常工作：
import './index.css';
console.log('Hello World');在 src/index.css 文件中，我们可以添加 TailwindCSS 的示例样式：
-- -------------------- ---- ------- -- --------------- -- ----- ---- - ------- -- -------- -- - ----------- - ----------------- -------- - ----------- - ------ ----- -
现在，我们可以运行以下命令启动本地服务器来查看样式是否生效：
npm run dev
如果一切正常，您应该可以在浏览器中看到一个红色背景和白色文本。您还可以自由添加自己的样式来测试应用程序是否正常工作。
结论
在 Webpack 中使用 TailwindCSS 的最佳实践是创建自己的 postcss.config.js 文件，并在 webpack 配置中使用。这可以确保 TailwindCSS 正确工作，并允许您为您的应用程序添加自定义样式。总之，集成 TailwindCSS 和 PostCSS 到 Webpack 中可以提高开发效率和构建速度，同时使应用程序更易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fcd1004471362601737667