tailwind-schemes v1.7.3
Tailwind Color Schemes Plugin
This Tailwind CSS plugin provides a flexible way to define and use color schemes in your Tailwind CSS project. It allows you to configure global colors, scheme-specific colors, and use these colors throughout your project with optional opacity.
Installation
Install Tailwind CSS if you haven't already:
npm install tailwindcss -D
Install the plugin:
npm install tailwind-schemes -D
Usage
Configuration
Add the plugin to your
tailwind.config.js
:// tailwind.config.js const { schemes, resetCSS } = require('tailwind-schemes') module.exports = { // ... other configurations plugins: [ schemes({ selector: 'data-theme', // Optional: "class" or any selector (default is 'data-theme' => [data-theme="dark/light/custom..."]) prefix: 'tw-schemes', // Optional: default is 'tw-schemes' schemes: { root: { primary: '#3490dc', secondary: '#ffed4a', // More root colors... }, light: { primary: '#ffffff', secondary: '#000000', // More colors for the light theme... }, dark: { primary: '#000000', secondary: '#ffffff', // More colors for the dark theme... }, customTheme: { primary: '#00ff00', secondary: '#ffff00', // More colors for the custom theme... }, }, }), resetCSS({ html: 'text-primary', // Defined in schemes body: { padding: 0, }, // More options... }), ], }
Using the Colors
CSS Variables
The plugin generates CSS variables for your color schemes. You can use these variables in your CSS files:
.example-class { color: var(--tw-schemes-primary); background-color: var(--tw-schemes-secondary); }
Tailwind Classes
Tailwind classes will be extended with your custom colors. You can use them directly in your HTML:
<div class="text-primary bg-secondary"> This text uses custom colors defined in the color schemes. </div>
API
schemes
The main function to configure your color schemes.
- Parameters:
config
(optional): An object with the following properties:selector
(string): The CSS selector for the theme. Default is'data-theme'
.prefix
(string): The prefix for the CSS variables. Default is'tw-schemes'
.schemes
(object): An object where keys are theme names and values are color schemes.
colorize
A helper function to manage color objects.
Parameters:
color
(object|string): A color object or a string.key
(optional, string): The key for the color. Default is500
.
Returns: A color object with the default and foreground colors set if they are not already defined.
shades
A helper function to generate a color shades.
Parameters:
baseColor
(string): A hex string color.
Returns: A color object with shades generated from 50-950
resetCSS
A helper plugin to add global css
Parameters:
options
(object): define any base options (using tailwind classnames or css-properties).
Recommended setting
"tailwindCSS.experimental.classRegex": [ ["resetCSS\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], ]
Contributing
Explain how others can contribute to the development of the plugin.
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago