https://github.com/synw/tailwindcss-semantic-colors
A Tailwind css plugin to generate semantic color utilities
https://github.com/synw/tailwindcss-semantic-colors
Last synced: about 2 months ago
JSON representation
A Tailwind css plugin to generate semantic color utilities
- Host: GitHub
- URL: https://github.com/synw/tailwindcss-semantic-colors
- Owner: synw
- License: mit
- Created: 2022-02-06T15:25:51.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-03-19T10:39:49.000Z (about 3 years ago)
- Last Synced: 2025-03-28T07:34:12.753Z (2 months ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 14
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwindcss semantic colors plugin
[](https://www.npmjs.com/package/tailwindcss-semantic-colors)
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]
}
},
// ...
}
},
}
```
### Background and text utilities
All the color utilities generated support the dark mode. Example: writing:
```html
Primary block
```
will do the same as:
```html
Primary block
```
### Background only utilities
```html
Primary background block
```
will do the same as:
```html
Primary background block
```
### Text only utilities
```html
Primary text block
```
will do the same as:
```html
Primary text block
```
### Border utilities
```html
Block with border
```
will do the same as:
```html
Block with border
```
### Variants
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
Primary hover block
```
will do the same as:
```html
Primary hover block
```
Many variants are enabled by default but you can configure your variants in `tailwind.config.js`.
```javascript
module.exports = {
// ...
variants: {
semanticColors: ['focus', 'hover']
}
}
```