A Deno Fresh plugin for TailwindCSS.
Note: This plugin is still in development and is not yet ready for production use.
Note: This plugin supports only some basic TailwindCSS configuration.
Without question, one of the key advantage of utilizing Deno and Fresh lies in their sheer simplicity: no BUILD STEP is required. Simply execute the application and watch it operate as intended. Yet, the introduction of TailwindCSS presents a unique hurdle as it mandates a build step.
To overcome this impediment, this plugin takes advantage of the TailwindCSS CLI to efficiently construct your CSS.
In a production mode, the CSS is constructed and cached the very first time a page is loaded by any user. From then on, subsequent page visits will seamlessly leverage the cached CSS, ensuring quick loading times.
Meanwhile, in a development mode, the plugin rebuilds your CSS during every page load. This guarantees the most recent styles changes.
In your main.ts file, import the plugin and add it to the plugins array.
import tailwindPlugin from "https://deno.land/x/fresh_tailwindcss/mod.ts";
import tailwindConfig from "./tailwind.config.ts"; // Your tailwind config
await start(manifest, {
plugins: [
tailwindPlugin({
mode: "development", // or 'production'
input: "./style.css", // Relative path to the running script
verbose: false,
tailwindConfig,
}),
],
});Your tailwind.config.js file should export a valid TailwindCSS configuration object. For more information, see the TailwindCSS documentation.
export default {
content: [
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./islands/**/*.{js,ts,jsx,tsx,mdx}",
"./routes/**/*.{js,ts,jsx,tsx,mdx}",
],
};Your style.css file should import TailwindCSS.
@tailwind base;
@tailwind components;
@tailwind utilities;