1.7.3 • Published 10 months ago

tailwind-schemes v1.7.3

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

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

  1. Install Tailwind CSS if you haven't already:

    npm install tailwindcss -D
  2. Install the plugin:

    npm install tailwind-schemes -D

Usage

  1. 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...
        }),
      ],
    }
  2. 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 is 500.
  • 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.

1.7.3

10 months ago

1.7.2

10 months ago

1.6.4

10 months ago

1.6.3

10 months ago

1.7.1

10 months ago

1.6.2

10 months ago

1.7.0

10 months ago

1.6.6

10 months ago

1.6.5

10 months ago

1.6.1

11 months ago

1.2.0

1 year ago

1.1.1

1 year ago

1.0.2

1 year ago

1.1.0

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago

1.5.4

1 year ago

1.5.3

1 year ago

1.2.6

1 year ago

1.5.2

1 year ago

1.4.3

1 year ago

1.2.5

1 year ago

1.6.0

1 year ago

1.5.1

1 year ago

1.4.2

1 year ago

1.2.4

1 year ago

1.5.0

1 year ago

1.4.1

1 year ago

1.2.3

1 year ago

1.0.5

1 year ago

1.4.0

1 year ago

1.3.1

1 year ago

1.2.2

1 year ago

1.0.4

1 year ago

1.3.0

1 year ago

1.2.1

1 year ago

1.1.2

1 year ago

1.0.3

1 year ago

0.1.0

1 year ago

0.0.2

2 years ago

0.0.1

2 years ago