tailwindcss-constants
Applying utility classes provided by TailwindCSS (like bg-white
) conditionally doesn't require a lot of effort, because it's only a matter of enabling strings conditionally.
For simple apps, that's usually enough. For more advanced ones, however, you might find yourself wanting to do one of the following things:
- Share utility classes between multiple places in your code
- Construct a utility class from a constant
This package lets you accomplish all of those things with ease.
Setup
First, install the package:
npm install tailwindcss-constants
Then invoke it from your application code:
import TailwindConstant from 'tailwindcss-constants';
const transitionDuration == new TailwindConstant(300);
// This is non-working pseudo-code and only supposed to show off the usage.
const Component = () => {
useEffect(() => {
setTimeout(() => {
console.log('Test');
}, transitionDuration.value);
});
return <span class={transitionDuration.util('transition-colors duration-300')}>Test</span>;
};
This will ensure that the applied duration
utility class always uses a value of 300
, otherwise an error will be thrown — effectively preventing values from diverging in multiple places, just like a constant would.
NOTE: It is highly recommended to use this package in combition with clsx if you're applying lots of utility classes.
Why is this needed?
When using TailwindCSS' Just-in-Time Mode, it will scan your template files and automatically only generate the CSS that is needed for the utility classes it finds.
If it doesn't find a particular utility class (like bg-black
), it won't generate CSS for it.
That's one of the main purposes of this mode (generating as little CSS as possible), and it's amazing. However, that also means that TailwindCSS has to be able to see all of your utility classes upfront in your code, otherwise it will consider them non-existent.
If you're applying a class name conditionally like so...
const Component = () => {
return <span class={someVariable && "bg-black"}>Test</span>;
};
...then TailwindCSS would still be able to generate the CSS, because it can see the utility class.
Once you start doing something like this, however...
const Component = () => {
return <span class={`bg-${someVariable}`}>Test</span>;
};
...TailwindCSS won't be able to detect it, because the actual name of the class is only known at runtime.
The package right here lets you accomplish the things mentioned in the intro, while still letting TailwindCSS detect the utility classes upfront.
Additional Options
By default, .util
matches utility classes against your defined constant by checking if one of them ends in the suffix -[your-constant]
, where [your-constant]
is the constant value you've passed as the first argument to new TailwindConstant
.
If you'd like to assert with a custom suffix, you can pass it like this:
const darkBackground = new TailwindConstant(500, "-dark");
Now the second argument you've passed will be used instead of -[your-constant]
.
Additionally, .util
also allows for passing extra conditions as a second argument:
const Component = () => {
const [state, setState] = useState(null);
return (
<span
class={transitionDuration.util("transition-colors duration-300", state)}
>
Test
</span>
);
};
As you can see, this especially comes in handy when applying a utility class depending on some state.
Author
Created by Leo Lamprecht (@leo)