如何在 Tailwind CSS 中使用 CSS 变量答案

【问题标题】：How to use CSS variables with Tailwind CSS如何在 Tailwind CSS 中使用 CSS 变量
【发布时间】：2021-02-28 12:39:59
【问题描述】：

是否可以在 Tailwind CSS 中使用 CSS 变量？例如，假设我有这些变量：

--primary-color: #fff;
--secondary-color: #000;

我想像这样在 Tailwind 中使用它们：

<div class="bg-primary-color">
  <h1>Hello World</h1>
</div>

我怎样才能做到这一点？

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

假设您已经将 TailwindCSS 添加到您的项目中，并且您的 CSS 文件名为 global.css。

首先，您需要将global.css 编辑为如下所示：

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

.root,
#root,
#docs-root {
  --primary-color: #fff;
  --secondary-color: #000;
}

然后，为了能够使用它们，您需要使用新的 CSS 变量更新 tailwind.config.js，如下所示：

module.exports = {
  theme: {
    extend: {
      colors: {
        "primary-color": "var(--primary-color)",
        "secondary-color": "var(--secondary-color)"
      },
    },
  },
};

您现在可以根据需要使用这些变量：

<div class="bg-primary-color">
  <h1>Hello World</h1>
</div>

【讨论】：

【解决方案2】：

Armando 的回答对我不起作用，但有了这个改变，它确实起作用了。

global.css:

无需定位类或 id。您可以使用伪选择器定位根本身 https://www.w3schools.com/cssref/sel_root.asp

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

:root {
  --primary-color: #fff;
  --secondary-color: #000;
}

至于tailwind.config.js：

module.exports = {
  theme: {
    extend: {
      colors: {
        "primary-color": "var(--primary-color)",
        "secondary-color": "var(--secondary-color)"
      },
    },
  },
};

【讨论】：

我花了一分钟才意识到var也在字符串中。

【解决方案3】：

您可以使用此插件轻松配置它。（支持暗模式）https://github.com/mertasan/tailwindcss-variables

npm install -D @mertasan/tailwindcss-variables

用法：

// tailwind.config.js

module.exports = {
  theme: {
    colors: {
        red: {
            50: 'var(--colors-red-50)'
        }
    }
    variables: {
      DEFAULT: {
        sizes: {
          small: '1rem',
          button: {
            size: '2rem'
          }
        },
        colors: {
          red: {
            50: '#ff3232',
          },
        },
      },
      '.container': {
        sizes: {
          medium: '1.5rem',
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')
  ]
}

输出：

:root {
  --sizes-small: 1rem;
  --sizes-button-size: 2rem;
  --colors-red-50: #ff3232
}

.container {
  --sizes-medium: 1.5rem
}

【讨论】：

我猜 css 变量在某些时候没有内置到顺风中。我使用的是tailwindcss@2.2.4，没有这个插件我可以引用css变量。

【解决方案4】：

现在 Tailwind 从 v3.0 开始支持 CSS 自定义属性为 arbitrary values。

:root {
  --text-color: red;
  --text-size: 5rem;
}

<script src="https://cdn.tailwindcss.com"></script>

<span class="text-[color:var(--text-color)] text-[length:var(--text-size)] font-bold">
  Hello world!
</span>

【讨论】：

【解决方案5】：

来自官方 Tailwind 文档：

:root {
  --theme-color: #52b3d0;
}

/* ... */

.btn {
  background-color: var(--theme-color);
  /* ... */
}

【讨论】：