如何在 TailwindCSS 中使用 CSS 变量？

Tailwind CSS 允许用户预定义类，而不是使用纯 CSS 属性。

我们必须安装 Tailwind CSS。创建主 CSS 文件 (Global.css)，它看起来像下面的代码。

Global.css：在下面的代码中，整个 body 被包裹在一个选择器中。整个 body 是通过使用 class root 或 id root 来选择的。

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

.root,
#root,
#docs-root {
  --primary-color: green;
  --secondary-color: blue;
}

tailwind.config.js：以下代码内容为 这 带有新 CSS 变量的 tailwind 配置文件。我们只是想扩展配置以添加新值。

Javascript

module.exports = {
  theme: {
    extend: {
      colors: {
        header: "var(--header)",
        primary: "var(--primary)",
        secondary: "var(--secondary)",
        main: "var(--main)",
        background: "var(--background)",
        accent: "var(--accent)",
        footer: "var(--footer)"
      },
    },
  },
};

HTML代码：完成上述步骤后，我们就可以在下面的HTML代码中使用CSS变量了。

HTML

      
    
    
    
   

  


    
        GeeksforGeeks
    
    Tailwind CSS flex Class
    
        1
        2
        3
    


  

输出：