Smart multi-theme tool for better semantic Design Systems
- ✅ Multiple themes support
- 🔥 Auto-generate darker and contrast colors (better readability)
- 📦 All official tailwind plugins included by default
- 🚀 Custom addons to make your life easier:
-
theme name variantsto set classes only for a specific theme -
whutility to set width and height at the same time -
circleto set same width and height with border-radius -
hocusto set hover and focus at the same time - ...
-
# NPM
npm install -D tailwind-semantic-setup
# PNPM
pnpm add -D tailwind-semantic-setupIn your tailwind config file, wrap your tailwind config with the withSemanticSetup function.
With the semanticSetup property you can setup your themes to be handled automatically.
// tailwind.config.js
const { withSemanticSetup } = require('tailwind-semantic-setup')
module.exports = withSemanticSetup({
/* ... your tailwind config */
semanticSetup: {
themes: [
{
name: 'my-brand',
colors: {
primary: '#e0a82e',
secondary: '#f9d72f',
accent: '#00ffff',
neutral: '#181830',
root: '#ffffff',
},
},
// ... other themes
],
},
})You can put it where you want, but it's recommended to put it in the html tag to make it global accessible for the entire application.
<html data-theme="my-brand">
<!-- ... -->
</html><div class="bg-primary text-primary-content">
<!-- ... -->
</div>You can define multiple themes in the semanticSetup property of your tailwind config.
Each theme must have a name and a colors object.
// tailwind.config.js
const { withSemanticSetup } = require('tailwind-semantic-setup')
module.exports = withSemanticSetup({
// ... your tailwind config
semanticSetup: {
themes: [
{
name: 'my-brand',
preferredColorScheme: ['dark', 'light'],
colors: {
primary: '#e0a82e',
secondary: '#f9d72f',
accent: '#00ffff',
neutral: '#181830',
root: '#ffffff',
},
},
// ... other themes
],
},
})The name of the theme. It will be used to generate the classes and the data-theme attribute value.
You can set your preferences for the color scheme to be used in the user's browser. It will set color-scheme css property
Semantic Setup provides you a semantic default setup but you can add your custom colors.
Here you can see the default colors and the ones that are auto-generated for you:
▪️ primary: The main color of your brand
▪️ secondary: The secondary color of your brand
▪️ accent: Color to have high color contrasts and highlight.
▪️ neutral: The neutral color of your brand
▪️ root: The base color of your brand (background color)
▪️ info: The info color of your brand
▪️ warning: The warning color of your brand
▪️ error: The error color of your brand
-
(colorName)-dark: The darker version of the (colorName) color (i.e.primary-dark) -
(colorName)-content: The readable color to use for text and icons on top of the (colorName) color (i.e.primary-content) -
root-darkest(just for base color): The darkest version of therootcolor
This approach allows you to have a consistent color palette for your brand with different themes in a very simple way.
The default colors approach is mainly based on daisyui colors palette but adding some other nice features to make it more customizable/extendable for your brand.
By default, all official tailwind plugins are activated.
You can deactivate them individually using the plugins property of the semanticSetup object in your tailwind config file.
Here you can see the default plugins configuration:
// tailwind.config.js
const { withSemanticSetup } = require('tailwind-semantic-setup')
module.exports = withSemanticSetup({
// ... your tailwind config
semanticSetup: {
plugins: {
// @tailwindcss/typography
'typography': true,
// @tailwindcss/forms
'forms': true,
// @tailwindcss/line-clamp
// Deactivated by default because it's part of tailwindcss v3.3.0
'line-clamp': false,
// @tailwindcss/aspect-ratio
'aspect-ratio': true,
},
},
})You can set classes only for a specific theme using the theme name variants.
The variant has the following format: theme-(your-theme-name):class
<div class="p-4 theme-my-brand:p-8">
<!-- ... -->
</div>You can set width and height at the same time.
<div class="wh-10">
<!-- ... -->
</div>You can set a circle shape setting same width and height.
<div class="circle-8">
<!-- ... -->
</div>You can set a hover and focus state using the hocus utility.
<div class="bg-primary hocus:bg-primary-dark">
<!-- ... -->
</div>Created with JavaScript! ⚡ and latin music 🎺🎵