有沒有可能在Tailwind CSS中使用CSS變量？ 例如，假設我有這些變量:

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

我想在順風時使用它們，就像這樣:

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

我怎樣才能做到這一點？

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)"
      },
    },
  },
};

現在Tailwind從3.0版開始支持CSS自定義屬性為任意值。

: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>

假設您已經將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>

你可以使用這個插件很容易地配置它。(支持黑暗模式)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
}

You can use font family CSS variables with Tailwind CSS by following these steps:

Define your font family CSS variables in a global CSS file, such as global.css, and target the root element or a custom selector. For example:
:root {
  --font-sans: "Helvetica", "Arial", sans-serif;
  --font-serif: "Georgia", "Times New Roman", serif;
}
Update your tailwind.config.js file to include the font family CSS variables under the theme.fontFamily property. For example:
module.exports = {
  theme: {
    fontFamily: {
      sans: "var(--font-sans)",
      serif: "var(--font-serif)",
    },
  },
};
Use the font family CSS variables as desired in your HTML elements with Tailwind classes. For example:
<div className="font-sans">
  <h1>Hello World</h1>
</div>

或者，在JS框架中使用CSS變量:

當我第一次使用Tailwind和Svelte時，我正在尋找解決這個問題的方法，我發現您可以使用style屬性:

<script>
let cssVariables = {
  'primary-color': "#ffffff", 
  'secondary-color': "#000"
}

let styleValues = Object.entries(cssVariables)
.map(([key, value]) => `--${key}:${value}`)
.join(';')
</script>

<p style={styleValues} 
class="text-center text-[4vmax] text-[color:var(--primary-color)]">
  Hello World
</p>

上面的代碼創建了一個對象，這個對象被轉換成一個字符串，就像純CSS一樣，每個屬性都被連接到這個字符串。 這是可行的，假設你是苗條的，雖然，在HTML中不是。 如果你想在HTML中使用Tailwind，你必須寫出整個字符串:

<p style="--primary-color:#ffffff;--secondary-color:#000"
class="text-[4vmax] text-center text-[color:var(--primary-color)]">
  Hello World
</p>

因此，我建議您使用一個框架來幫助您使用數據綁定。此外，你還可以用這個技巧做其他事情，比如反應式CSS(如下，以苗條的方式):

<script>
$: changingHue = 0
setInterval(() => changing_hue++, 250)
$: cssVariables = {
  'primary-color': `hsl(${changingHue} 100% 70%)`, 
  'secondary-color': "#000"
}

$: styleValues = Object.entries(cssVariables)
.map(([key, value]) => `--${key}:${value}`)
.join(';')
</script>

<p style={styleValues} 
class="text-center text-[4vmax] text-[color:var(--primary-color)]">
  Hello World
</p>

總之，你不需要另一個庫來讓Tailwind使用CSS變量，只需要Javascript甚至HTML就夠了。