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>