Блог

Возможно ли использовать переменные CSS с Tailwind CSS? Например, допустим, у меня есть эти переменные:

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

И я хотел бы использовать их в Tailwind следующим образом:

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

Как я могу этого добиться?

Теперь Tailwind поддерживает пользовательские свойства CSS в виде произвольных значений начиная с версии v3.0.

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

Ответ Армандо не сработал для меня, но с этим изменением он сработал.

global.css :

нет необходимости настраивать класс или идентификатор. вы можете настроить таргетинг на сам корень, используя псевдоселектор 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)"
      },
    },
  },
};
  

Предполагая, что вы уже добавили 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>
  

Вы можете легко настроить его с помощью этого плагина. (поддерживает darkMode) 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
}
  

Когда я впервые работал с 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 этого не делает.
Если вы хотите использовать Tailwind с HTML, вы должны написать всю строку целиком:

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

В заключение, вам не нужна другая библиотека, чтобы заставить Tailwind использовать переменные CSS, достаточно Javascript и даже HTML.