JSPM

  • Created
  • Published
  • Downloads 46
  • Score
    100M100P100Q42597F
  • License MIT

Package Exports

  • tailwind-schemes
  • tailwind-schemes/src/index.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwind-schemes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tailwind colors

Here is a plugin that can help you configure colors for both lightmode and darkmode if you have too many colors but don't want to use tailwind's built-in "dark:" keyword.

Usage

module.exports = {
  ...
  darkMode: ["class", '[data-theme="dark"]'],
  ...
}
module.exports = {
  ...
  plugins: [
    require("tailwind-colors")({
      light: {
        selector: "[data-theme='light']", // specify your css light selector
        color1: "red",
        color2: {
          100: "#00ff00",
          200: "#0000ff",
          DEFAULT: "#ff0000",
        },
        rgbColor: "rgb(0, 0, 255)",
        rgbaColor: "rgba(255, 255, 255, 0.5)"
      },
      dark: {
        selector: "[data-theme='dark']", // specify your css dark selector
        color1: "blue",
        color2: {
          100: "#00ff00",
          200: "#0000ff",
          DEFAULT: "#ff0000",
        },
          rgbColor: "rgb(255, 0, 255)",
          rgbaColor: "rgba(255, 255, 255, 0.5)"
      },
    }),

  ],
}
<p className="text-color1">Hello</p>
<p className="text-color2">Hello</p>
<p className="text-color2-100">Hello</p>
<p className="text-color2-200">Hello</p>
<p className="text-rgbColor">Hello</p>
<p className="text-rgbaColor">Hello</p>