On this page
🚧 This documentation is work in progress and for an unreleased version of Fresh.
tailwindcss
Tailwindcss is a utility-first CSS framework that generates CSS out of the class names that are used in JSX. Since we use Tailwindcss ourselves here at Deno, Fresh ships with an official plugin for that.
Usage
- Set
nodeModulesDir
indeno.json
to"auto"
or"manual"
{
"name": "@example/my-cool-project"
+ "nodeModulesDir": "auto",
"imports": {
...
}
}
- Run
deno install jsr:@fresh/plugin-tailwind
- Update
dev.ts
:
import { Builder } from "fresh/dev";
+ import { tailwind } from "@fresh/plugin-tailwind";
const builder = new Builder();
+ tailwind(builder);
- Add
@import "tailwindcss";
at the top of your main stylesheet.
For more information on how to use tailwindcss, check out their documentation.
Options
You can customize the tailwind plugin via the following options:
tailwind(builder, app, {
// Exclude certain files from processing
exclude: ["/admin/**", "*.temp.css"],
// Force optimization (defaults to production mode)
optimize: true,
// Exclude base styles
base: null,
});
Tailwindcss v3
If can’t update to the current version of tailwindcss we have a dedicated
@fresh/plugin-tailwindcss-v3
plugin that uses tailwindcss v3. That way you can
decided on your own when it’s best to update to v4.
import { Builder } from "fresh/dev";
import { tailwind } from "@fresh/plugin-tailwindcss-v3";
tailwind(builder, {});