109 | Hello world 110 |
111 |114 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales 115 | porta diam. 116 |
117 | 122 |
8 |
9 | ### Why does this exist?
10 |
11 | On occasion I've need to build components which can be tinted any color in a website's pallete. Due to the how Tailwind's class extraction works, existing ways to do this have ended up being quite verbose. This plugin aims to solve that.
12 |
13 | Instead of:
14 |
15 | ```html
16 | Badge
19 | ```
20 |
21 | We have:
22 |
23 | ```html
24 | Badge
28 | ```
29 |
30 | This lets us build components that don't need knowledge of all the possible hues, just that they work with whatever hue is currently set. Think of it a bit like CSS' `current-color` but for an entire range of tones.
31 |
32 | ### Installation
33 |
34 | Install from npm using your package manager of choice
35 |
36 | ```sh
37 | $ npm install tailwind-current-hue
38 | // or
39 | $ yarn add tailwind-current-hue
40 | // Or
41 | $ pnpm tailwind-current-hue
42 | ```
43 |
44 | Then add the plugin to your `tailwind.config.js` file:
45 |
46 | ```js
47 | // tailwind.config.js
48 | module.exports = {
49 | plugins: [require('tailwind-current-hue')],
50 | };
51 | ```
52 |
53 | This will install the plugin with the default hue of "indigo". You can configure the default with an option:
54 |
55 | ```js
56 | // tailwind.config.js
57 | module.exports = {
58 | plugins: [require('tailwind-current-hue')]({ defaultHue: 'blue' })],
59 | };
60 | ```
61 |
62 | ### Usage
63 |
64 | The plugin adds a new hue to the palette (blue, indigo, red, orange, etc) called `current-hue`. This can be used anywhere you would otherwise use color utility styles.
65 |
66 | | Utility class | current-hue equivalent |
67 | | ---------------------------- | ---------------------------------- |
68 | | `bg-red-100` | `bg-current-hue-50` |
69 | | `text-blue-800` | `text-current-hue-800` |
70 | | `shadow-blue-200` | `shadow-current-hue-200` |
71 | | `group-hover:text-green-200` | `group-hover:text-current-hue-200` |
72 |
73 | The default hue is indigo (this can be configured to be a different one from the pallete via the plugin's configuration, see above); you can set the current hue by using one of the `hue-*` utility styles on the specific element or an ancestor element in the DOM.
74 |
75 | ```html
76 |
77 |
78 |
79 | ```
80 |
81 | The hue can be any value in your Tailwind theme's colors.
82 |
83 | Both the following are visually equivalent, whether you have a wrapper element or not is up to you:
84 |
85 | ```html
86 |
87 | Badge
91 |
92 |
93 | Badge
97 | ```
98 |
99 | You can be as elaborate as you want with:
100 |
101 | ```html
102 | 114 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales 115 | porta diam. 116 |
117 | 122 |