Fresh has its own Tailwind plugin now.
Ready, set, copy/paste:
import { defineConfig } from "$fresh/server.ts";
import tailwindPlugin from "https://deno.land/x/fresh_tailwind/mod.ts";
export default defineConfig({
plugins: [
tailwindPlugin(),
],
});
Try it on CodeSandbox to see a demo and example configuration.
Clone the starter template for a pre-configured Tailwind + Fresh environment.
The following properties are recommended, but not required:
css
- File path to CSS source, or a CSS string, to process.
dest
- Output file path. Requires deno task build
first!
plugins
- Array of PostCSS plugins to use during compilation.
See ./types.ts
for more options.
You can alternatively use Tailwind's standalone CLI to compile your CSS. In your
Fresh project directory (change deno.json
to deno.jsonc
if needed):
deno run -c deno.json https://deno.land/x/fresh_tailwind/main.ts --install
This will download a binary of the
Tailwind standalone CLI build
from GitHub, according to your Deno environment's OS. The binary hash is
compared to the
published list of checksums
before it is saved to disk. It will amend Tailwind build tasks to the project's
deno.json
or deno.jsonc
file, and will create tailwind.config.ts
and
src/style.css
files if they do not already exist.
Compile Tailwind CSS independently.
deno task tailwind:build
or
Watch project directory to compile Tailwind CSS independently.
deno task tailwind:watch
You may need to update the tasks in
deno.json
ordeno.jsonc
to omit the CSS destination from the list of watched directories.
or
Include the build plugin to compile Tailwind CSS during Fresh's build process.
import { defineConfig } from "$fresh/server.ts";
import tailwindBuildPlugin from "fresh_tailwind/build.ts";
export default defineConfig({
plugins: [
tailwindBuildPlugin(),
],
});
Running deno task build
will now include the Tailwind build step.
- Add
bin/tailwindcss
to your.gitignore
file.
The following example shows how to enable Tailwind plugins in
Tailwind CSS IntelliSense.
IntelliSense requires a tailwind.config.ts
file in the project directory.
The Tailwind IntelliSense extension is powered by a Vite language server.
IntelliSense hints will not work if Vite is unable to process the
tailwind.config.ts
file.
You can optionally create a Deno-specific Tailwind configuration file for your Fresh deployment. The Tailwind configuration intended for Deno can simply extend the one used for Vite.
Run
npm install
for the Tailwind IntelliSense language server.npm install tailwindcss-animate --save-dev.gitignore
# Node nonsense node_modules/ package-lock.json package.json
import type { Config } from "tailwindcss";
import animate from "tailwindcss-animate";
export default {
theme: {
extend: {},
},
plugins: [animate],
} satisfies Config;
import animate from "https://esm.sh/tailwindcss-animate@1.0.7";
import config from "./tailwind.config.ts";
export default {
...config,
plugins: [
...config.plugins,
animate,
],
};
{
"deno.enable": true,
"deno.lint": true,
"editor.defaultFormatter": "denoland.vscode-deno",
"[typescriptreact]": {
"editor.defaultFormatter": "denoland.vscode-deno"
},
"[typescript]": {
"editor.defaultFormatter": "denoland.vscode-deno"
},
"[javascriptreact]": {
"editor.defaultFormatter": "denoland.vscode-deno"
},
"[javascript]": {
"editor.defaultFormatter": "denoland.vscode-deno"
},
"tailwindCSS.includeLanguages": {
"plaintext": "html",
"jsx": "html"
},
"files.associations": {
"*.css": "tailwindcss"
},
"[tailwindcss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
import { pattern } from "fresh_tailwind/hero.ts";
const dotPattern =
'<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"><path fill="#000000" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"></path></svg>';
export default function HeroBanner() {
return (
<div
class="bg-[#86efb5]"
style={pattern("#7ec19c", dotPattern)}
>
</div>
);
}
Extend your import map, or deno.json
/ deno.jsonc
imports property, with the
following items:
{
"react": "https://esm.sh/preact@10.18.1/compat",
"react/": "https://esm.sh/preact@10.18.1/preact/compat/",
"react-dom": "https://esm.sh/preact@10.18.1/compat",
"@heroicons/24/outline/": "https://unpkg.com/@heroicons/react@2.0.18/24/outline/esm/",
"@heroicons/24/solid/": "https://unpkg.com/@heroicons/react@2.0.18/24/solid/esm/",
"@heroicons/20/solid/": "https://unpkg.com/@heroicons/react@2.0.18/20/solid/esm/"
}
import BeakerIcon from "@heroicons/24/solid/BeakerIcon.js";
<BeakerIcon />;
Tailwind can work independently from Fresh given the correct content
paths.
You're still able to use npx tailwindcss
to initialize and compile Tailwind
CSS in your Fresh project directory. If that works for you,
go for it.
If you'd prefer to stray further away from Node.js, you can use this plugin to better integrate Tailwind CSS in your Fresh project.
MIT