Tailwindcss semantic colors plugin


A Tailwind css plugin to generate semantic color utilities with dark mode support

Install

``bash
npm install -D tailwindcss-semantic-colors


or


yarn add -D tailwindcss-semantic-colors
`

Enable the plugin in tailwind.config.js:

`javascript
module.exports = {
// ...
plugins: [
// ...
require('tailwindcss-semantic-colors'),
],
}
`

Usage

Define your semantic colors in the theme in tailwind.config.js.

`javascript
const colors = require('tailwindcss/colors')

module.exports = {
// ...
darkMode: 'class',
theme: {
semanticColors: {
primary: {
light: {
bg: colors.cyan[700],
txt: colors.white
},
dark: {
bg: colors.cyan[800],
txt: colors.neutral[100]
}
},
// ...
}
},
}
`

$3

All the color utilities generated support the dark mode. Example: writing:

`html



`

will do the same as:

`html



`

$3

`html



`

will do the same as:

`html



`

$3

`html



`

will do the same as:

`html



`

$3

`html



`

will do the same as:

`html



`

$3

To apply variants on a color. If we have defined another semantic color:

`javascript
semanticColors: {
warning: {
light: {
bg: colors.amber[500],
txt: colors.white
},
dark: {
bg: colors.amber[600],
txt: colors.neutral[100]
}
},
// ...
}
`

Example of the hover variant:

`html



`

will do the same as:

`html



`

Many variants are enabled by default but you can configure your variants in tailwind.config.js.

`javascript
module.exports = {
// ...
variants: {
semanticColors: ['focus', 'hover']
}
}
``