You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+2-28
Original file line number
Diff line number
Diff line change
@@ -504,8 +504,6 @@ module.exports = {
504
504
```
505
505
506
506
> Notice how we needed to set `color.primary` to a callback function. This is to properly handle opacity. See [Opacity](docs/themingColors.md#opacity) for more details.
507
-
> \
508
-
> Because it creates a theme extension for you, this is why it overwrites whatever is in the normal theme extension upon collision. See [This plugin's config overwrites what is in the normal tailwind config n collision](docs/config.md#this-plugins-config-overwrites-what-is-in-the-normal-tailwind-config-n-collision) for more details.
509
507
510
508
It also injects css variables with proper scoping into tailwind's [base layer](https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer).
The above config would generate a css variable of the name `--colors-myBrand-primary-500`. If for some reason, [camelCasing](https://en.wikipedia.org/wiki/Camel_case) is converted to [kebab-casing](https://www.theserverside.com/definition/Kebab-case), make sure you have tailwind `v3.0.12` or later installed as that version fixed that bug.
722
720
723
-
If you use `DEFAULT`anywhere on a path to a variable, it is dropped off of the generated css variable name.
721
+
If you use `DEFAULT`as a leaf value, it is dropped off of the generated css variable name.
The above config would generate a css variable of the name `--colors-brand1-primary`.
745
-
746
-
Because of the way `DEFAULT` works, it is possible to have naming collisions. It is on the user of this plugin to ensure that none happen.
747
-
748
-
```js
749
-
require('tailwindcss-themer')({
750
-
defaultTheme: {
751
-
extend: {
752
-
colors: {
753
-
brand1: {
754
-
DEFAULT: {
755
-
primary: {
756
-
DEFAULT:'red'
757
-
}
758
-
},
759
-
primary:'blue'
760
-
}
761
-
}
762
-
}
763
-
}
764
-
// ...
765
-
})
766
-
```
767
-
768
-
`colors.brand1.DEFAULT.primary.DEFAULT` and `colors.brand1.primary` both would generate a css variable named `--colors-brand1-primary`. See [Default key](docs/config.md#default-key) for more details.
742
+
The above config would generate a css variable of the name `--colors-brand1-DEFAULT-primary`. See [Default key](docs/config.md#default-key) for more details.
769
743
770
744
If anywhere in the path, an array is encountered, the index is used in the generated css variable name.
Copy file name to clipboardExpand all lines: docs/config.md
+68-109
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,13 @@
1
1
# Config <!-- omit in toc -->
2
2
3
3
-[Themes named `"dark"`](#themes-named-dark)
4
-
-[This plugin's config overwrites what is in the normal tailwind config on collision](#this-plugins-config-overwrites-what-is-in-the-normal-tailwind-config-on-collision)
4
+
-[Collisions with the normal tailwind config](#collisions-with-the-normal-tailwind-config)
5
+
-[This plugin's config overwrites what is in the normal tailwind config on collision](#this-plugins-config-overwrites-what-is-in-the-normal-tailwind-config-on-collision)
6
+
-[This plugin's config is overwritten by what is in the normal tailwind extension config on collison](#this-plugins-config-is-overwritten-by-what-is-in-the-normal-tailwind-extension-config-on-collison)
@@ -77,21 +78,21 @@ Because tailwind automatically adds the `dark` variant for users, defining a the
77
78
78
79
Therefore, attempting to use `selectors` or `mediaQuery` for a theme named `dark` won't work at all. To prevent users of this plugin from encountering these silent bugs, this plugin crashes when that happens.
79
80
80
-
## This plugin's config overwrites what is in the normal tailwind config on collision
81
+
## Collisions with the normal tailwind config
82
+
83
+
### This plugin's config overwrites what is in the normal tailwind config on collision
81
84
82
85
Any config specified in this plugin's config, overwrites what is in the normal tailwind config if there is a collision.
83
86
84
87
```js
85
88
// tailwind.config.js
86
89
module.exports= {
87
90
theme: {
88
-
extend: {
89
-
colors: {
90
-
// clobbered
91
-
primary:'blue',
92
-
// not clobbered
93
-
secondary:'green'
94
-
}
91
+
colors: {
92
+
// clobbered
93
+
primary:'blue',
94
+
// not clobbered
95
+
secondary:'green'
95
96
}
96
97
},
97
98
plugins: [
@@ -114,6 +115,53 @@ module.exports = {
114
115
115
116
If you want to use the default tailwind config in your theme configuration, see [Overwriting tailwind defaults](#overwriting-tailwind-defaults) and [Referencing tailwind's default theme](#referencing-tailwinds-default-theme).
116
117
118
+
### This plugin's config is overwritten by what is in the normal tailwind extension config on collison
119
+
120
+
In contrast to the normal tailwind config values as specified above, anything in the `theme.extend` value takes precendence over anything this plugin outputs.
121
+
122
+
```js
123
+
// tailwind.config.js
124
+
module.exports= {
125
+
theme: {
126
+
extend: {
127
+
// nothing in here is clobbered
128
+
colors: {
129
+
primary:'blue',
130
+
secondary:'green'
131
+
}
132
+
}
133
+
},
134
+
plugins: [
135
+
require('tailwindcss-themer')({
136
+
defaultTheme: {
137
+
extend: {
138
+
colors: {
139
+
// clobbered
140
+
primary:'red',
141
+
// clobbered
142
+
secondary:'yellow'
143
+
}
144
+
}
145
+
},
146
+
themes: [
147
+
{
148
+
name:'my-theme',
149
+
extend: {
150
+
colors: {
151
+
// clobbered
152
+
primary:'brown',
153
+
// clobbered
154
+
secondary:'orange'
155
+
}
156
+
}
157
+
}
158
+
]
159
+
})
160
+
// ...
161
+
]
162
+
}
163
+
```
164
+
117
165
## Extend
118
166
119
167
- This takes an object representing a [tailwind extension](https://tailwindcss.com/docs/theme#extending-the-default-theme)
Because of how `DEFAULT` works, it is possible to have naming collisions.
548
-
549
-
Take the following for an example.
550
-
551
-
```js
552
-
require('tailwindcss-themer')({
553
-
// ...
554
-
themes: [
555
-
{
556
-
name:'my-theme',
557
-
extend: {
558
-
colors: {
559
-
primary: {
560
-
DEFAULT: {
561
-
fontColor:'red'
562
-
},
563
-
fontColor: {
564
-
DEFAULT:'red'
565
-
}
566
-
}
567
-
}
568
-
}
569
-
}
570
-
// ...
571
-
]
572
-
})
573
-
```
574
-
575
-
`colors.primary.DEFAULT.fontColor` and `colors.primary.fontColor.DEFAULT` both create classes like `text-primary-fontColor`. It is on the consumer of this plugin to make sure these naming collisions don't happen.
576
-
577
536
### Callbacks
578
537
579
538
Tailwind [supports top level callbacks](https://tailwindcss.com/docs/theme#referencing-other-values) for referrencing other values in your config. This plugin supports that too.
0 commit comments