Add CSS class that's not used in content with TailwindCSS

Viewed 84

This is my tailwind.config.js:

module.exports = {
  content: ["./Views/**/*.{cshtml,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms")({
      strategy: "class",
    }),
  ],
}

Now I have a class input-validation-error which gets added dynamically at runtime, thus not being available in the files listed in the content section of the TailwindCSS config file.

How can I add this class to the JIT generated CSS file anyway as JIT is the default in TailwindCSS 3?

1 Answers

You can add the class(es) to a savelist.

module.exports = {
  content: ["./Views/**/*.{cshtml,js}"],
  safelist: [
    'your-class',
    'your-class', 
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms")({
      strategy: "class",
    }),
  ],
}
Related