How to configure tailwindcss with vite plugin?

[lukedukeus]

The docs here say that javascript config files are depricated. For now, I am using @config "../../tailwind.config.js"; as a workaround, but how are you supposed to configure tailwindcss if not through a file? I am using the vite plugin, but it doesn't take in any config options.

[wongjn]

You configure Tailwind CSS through a CSS file, see the documentation for details.

[lukedukeus]

Thanks for the response. I don't see anything in the docs that mention how to add a plugin via CSS file. Normally, I'd do something like this:

import type { Config } from "tailwindcss";

const config = {
	plugins: [require("tailwindcss-animate")],
} satisfies Config;

export default config;

But I can't find in docs what the equivalant CSS file config would be?

[wongjn]

You'd use @plugin like:

@plugin "tailwindcss-animate";

[lukedukeus]

Ah, thanks, I thought I tried that before, but it seems to be working now!