什么是 CSS 变量？
CSS 变量又被称作自定义属性（Custom Properties），是一种存储在 CSS 中的值，通过类似于变量的方式使用。使用 CSS 变量的好处在于可以使 CSS 更具有可维护性、扩展性和灵活性，同时也可以提高代码的重用率。CSS 变量的语法如下：
--variable-name: value;
其中，variable-name 是自定义的变量名称，value 是变量的值。
TailwindCSS 中的 CSS 变量
TailwindCSS 是一个流行的 CSS 框架，它提供了大量的 CSS 类（Utility classes），可以快速地构建页面。TailwindCSS 也支持使用 CSS 变量，允许用户自定义自己的样式。
TailwindCSS 中的 CSS 变量分为两种类型：全局变量和局部变量。全局变量可以在整个应用程序中使用，而局部变量只能在特定的组件中使用。为了避免变量名称的冲突，建议使用命名空间（Namespace）。
全局变量
全局变量可以通过在根选择器（:root）中定义变量来创建。例如：
:root {
--color-primary: #4285f4;
--color-secondary: #34a853;
}然后，可以在任何地方使用这些变量，例如在样式中：
.header {
background-color: var(--color-primary);
}局部变量
局部变量可以通过在组件级别中定义变量来创建。例如：
.card {
--color-primary: #4285f4;
--color-secondary: #34a853;
}然后，可以在任何与这个组件相关的样式中使用这些变量，例如在样式中：
.card .title {
color: var(--color-primary);
}在 TailwindCSS 中定义自定义类
除了使用 CSS 变量，TailwindCSS 还支持自定义类（Custom classes），允许用户将常用的样式提取出来，并以类的方式进行重用。自定义类的语法如下：
.my-custom-class {
/* 自定义样式 */
}然后，在 HTML 中使用该类，例如：
<div class="my-custom-class">Hello, TailwindCSS!</div>
按照这种方式，可以创建许多自定义类，以便在整个应用程序中重用。
示例代码
全局变量
-- -------------------- ---- ------- ----- - ---------------- -------- ------------------ -------- - ------- - ----------------- --------------------- ------ ------ -------- ----- - ------- - ----------------- ----------------------- ------ ------ -------- ----- -
局部变量
-- -------------------- ---- ------- ----- - ---------------- -------- ------------------ -------- - ----- ------ - ------ --------------------- ---------- ------- - ----- -------- - ------ ----------------------- ---------- ----- -
自定义类
-- -------------------- ---- ------- ------------ - ----------------- -------- ------- --- ----- ----- -------------- ---- -------- ----- - ------------ ------ - ------ ----- ---------- ------- - ------------ -------- - ------ ----- ---------- ----- -
结论
使用 CSS 变量和自定义类可以使 TailwindCSS 应用程序更具有可维护性、扩展性和灵活性，同时也可以提高代码的重用率。通过在根选择器中定义全局变量来创建全局变量，在组件级别中定义局部变量来创建局部变量，以及使用自定义类来重用常用的样式，可以使 TailwindCSS 更加强大和易于使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7d77cc5c563ced5adbdd5