CODEWITHSUNDEEP
tailwind-css
Matt
Matt

Reputation: 1570

Is there a proper place to put tailwindcss classes that you explicitly need loaded (besides inline comments)?

I have an array of colors gray-200, red-200, blue-200, green-200 that I also need hover: and border- variants (e.g. hover:gray-200).

If I explicitly add a comment (/* ... */) explicating the exhaustive list of permutations (hover:gray-200, border-blue-200, etc.), the styles load properly. Presumably because of (purgeable html?), I can't just dynmically create these on the fly (when I do, the CSS doesn't load).

The inline comment feels like an understandable location, but not the ideal spot to put all that. Is there a "proper" place to do this (like in the config file or something), and if so, how/where?

Forgive the ignorance if this is obvious, I'm new to tailwind.

EDIT: If it matters, I'm using React and NodeJS and yarn.

Upvotes: 1

Views: 847

Answers (1)

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14333

As you mentioned you cannot build dynamic CSS classes on the fly. In order to work you need to mention somewhere in your app full class name or safelist it. It can be other file, comment or safelist section in Tailwind configuration file

Please note there are no such utility as hover:gray-200 etc as you need to be specific what do you colorize (like text - hover:text-gray-200, background - hover:bg-gray-200 etc)

1. Pass an array of strings

Every part will be compiled as it is

// tailwind.config.js

module.exports = {
    safelist: [
        'text-gray-200',
        'bg-gray-200',
        'border-gray-200',
        'hover:text-gray-200',
        'hover:bg-gray-200',
        'hover:border-gray-200',
        // ....
    ],
}

2. In a specific file

Common pattern to create and name file safelist.txt, put in a root of your project and watch its content. The content of the file could be any, extension could be any, name could be any, there are only two rules - it should contain full names of required classes (like in example 1) and this file should be included in content section

// tailwind.config.js

module.exports = {
    content: [
        // source files,
        './safelist.txt'
    ]
}

These both methods not ideal as you need to write a lot of classes on your own. However tailwind.config.js is still JS file so you can do something like this

3. Using mapping

Create an array of required color utilities and map them to generate required class names. This way it can be dynamic

// tailwind.config.js

const colors = ['gray-200', 'red-200']

const safelist = colors.map(color => `text-${color} bg-${color} border-${color} hover:text-${color} hover:bg-${color} hover:border-${color}`)

module.exports = {
  safelist:,
}

Still not perfect - sometimes thing can be messy and hard to read but it is simple

4. Regular expressions

Finally Tailwind provides you a way to use patterns for safelisting

// tailwind.config.js

module.exports = {
    // an array of multiple patterns
    safelist: [
        {
            pattern: /(bg|text|border)-(red|gray)-200/,
            variants: ['hover'],
        },
    ],
}

Here we're saying safelist combination of background, color, border-color properties with red-200 and grey-200 utilities plus hover variant for all of them. Variants could be any, if you need you should pass breakpoint variants also and combination of them. Take a look

// tailwind.config.js

module.exports = {
    // just as example you can specify multiple patterns for each utility/variant combination
    safelist: [
        {
            pattern: /(bg|text)-(red|gray)-200/,
            variants: ['hover'],
        },
        {
            pattern: /border-(red|gray)-500/, // another color
            variants: ['hover', 'lg', 'lg:hover']
        }
    ],
}

One last thing about safelisting colors - if you left pattern like this /(bg|text|border)-(red|gray)-200/ it would safelist all color utilities opacity included (bg-gray-200/0, bg-gray-200/5, bg-gray-200/10 and so on).

/** part of compiled CSS file */
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity))
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity))
}

.border-gray-200\/0 {
  border-color: rgb(229 231 235 / 0)
}

.border-gray-200\/5 {
  border-color: rgb(229 231 235 / 0.05)
}

/** and so on - many-many classes */

If you are planning not to use opacity variants, finish your pattern with $ dollar sign

// tailwind.config.js

module.exports = {
    // an array of multiple patterns
    safelist: [
        {
            pattern: /(bg|text|border)-(red|gray)-200$/, // here is $ - no opacity utilities
            variants: ['hover'],
        },
    ],
}

Here - check different types of safelist config and Generated CSS (tab at the bottom - it will show all compiled classes)

Upvotes: 1

Related Questions