Maison > Questions et réponses > le corps du texte
P粉2121146612023-08-27 00:20:24
Les configurations Tailwind sont des fichiers CommonJS (pas des modules), vous ne pouvez donc pas utiliser les fonctionnalités ES6 comme import
Vous pouvez installer un package appelé dotenv
npm i dotenv
Doit être placé au-dessus du fichier de configuration tailwind, par exemple
require('dotenv').config()
module.exports = {/** */}
在.env
中创建颜色变量。请注意,由于我们要求它超出了 Vite 的范围,因此它可能不会带有 VITE_
ANY_COLOR='#ffc8dd'
Vous pouvez désormais y accéder en configuration vent arrière
theme: {
colors: {
primary: process.env.ANY_COLOR
}
}
Cela fonctionnera mais si vous modifiez .env
les couleurs dans le fichier, vous devrez reconstruire à nouveau le style. Si cela fonctionne pour vous (un déploiement – une couleur de toute façon) – parfait. Je suggérerais personnellement une autre solution basée sur des variables CSS - CanIUse link
Définir des variables dans des fichiers CSS ou dans des index.html
中的标签内创建
style
tags
:root {
--theme-color: #ffc8dd;
}
et en configuration
theme: {
colors: {
primary: 'var(--theme-color)'
}
}
C'est tout - pas de packages supplémentaires, de travail supplémentaire, si vous modifiez une variable CSS, les modifications seront appliquées instantanément - même en production car nous utilisons la fonctionnalité CSS