我能否在Tailwind CSS中使用CSS变量呢?例如,假设我有以下这些变量:
--primary-color: #fff;
--secondary-color: #000;
我想在Tailwind中这样使用它们:
<div class="bg-primary-color">
<h1>Hello World</h1>
</div>
我应该如何实现这个目标?
我能否在Tailwind CSS中使用CSS变量呢?例如,假设我有以下这些变量:
--primary-color: #fff;
--secondary-color: #000;
我想在Tailwind中这样使用它们:
<div class="bg-primary-color">
<h1>Hello World</h1>
</div>
我应该如何实现这个目标?
阿曼多的答案对我没有用,但是经过这个更改,它确实有效。
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)"
},
},
},
};
: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;
}
然后,为了能够使用它们,您需要像这样在 tailwind.config.js
中更新新的CSS变量:
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>
root
规则周围添加媒体查询(或类,如果您正在使用基于类的暗模式)才能实现该功能。 - James A. Rosen:root {
--color-primary: 255 115 179;
--color-secondary: 111 114 185;
}
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// Using modern `rgb`
primary: 'rgb(var(--color-primary) / <alpha-value>)',
secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
// Using modern `hsl`
primary: 'hsl(var(--color-primary) / <alpha-value>)',
secondary: 'hsl(var(--color-secondary) / <alpha-value>)',
}
}
}
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>
<p style="--primary-color:#ffffff;--secondary-color:#000"
class="text-[4vmax] text-center text-[color:var(--primary-color)]">
Hello World
</p>
因此,我建议您使用一个帮助您使用数据绑定的框架。此外,还有其他一些可以使用此技巧完成的事情,例如响应式CSS(以下是Svelte方式):
<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>
var
。 - bholbenbg-primary/50
。 - Renan Coelho