Can I generate tailwind css in another way?

Question

I would like to generate all the grid related css to a file with a few modifications like prefix and media queries using the tailwind.config.js file, without having to have them specified in a html,js,framework file?

Is that possible?

As I can see it now purge/safelist with a regex is the option?

like

module.exports = {
  purge: {
    enabled: true,
    options: {
      safelist: ['/place-/g', '/justify-/g']
    }
  }
}

Thankful for any help on this.

Please note, I'm not into in setting up a "fake html page" with classes, as my use case might grow overtime.

user_4582132 · Answer

If I understand your question correctly, think you're just missing the content criteria & the standard key for the safelist object?

  purge: {
        content: ["./src/**/*.{html,js,svelte,ts}",],
        enabled: true,
        options: {
            safelist: {
                standard: [/^grid-col/, /^grid-row/]
            }
        }
    },

This may be useful to you: https://purgecss.com/safelisting.html#in-the-css-directly

--

If you just need tailwind grids, perhaps an alternative like this may help: https://github.com/VeronQ/tailwind-grid

Can I generate tailwind css in another way?

1 Answers