## (OUTDATED: Fresh 1.6 now has inbuilt Tailwind support.) ### What we'll do: Add Tailwind (not Twind) to Fresh JS, with fully operational intellisense that includes autocomplete, syntax highlighting, and linting. Tailwind CSS plugins like Typography and Daisy UI can also be used with this setup. Optionally we will add Tailwind Auto Class Sorting with Prettier. ### Why: Fresh doesn't have a build step, but Tailwind CSS requires a build step to generate the necessary CSS from its utility classes. That is why Fresh uses Twind, a CSS in JS solution based on Tailwind that gets sent to the client and generates CSS at runtime. It is a bit different in syntax and currently lacks some features as compared to Tailwind. That's why I decided to try use Tailwind with Fresh. If you are familiar with the existing Tailwind ecosystem and want to use regular, familiar Tailwind in your Fresh projects, this guide is for you. ### Steps: Create a new Fresh project by running: ~~~ powershell deno run -A -r https://fresh.deno.dev ~~~ Give it a name. Select "Yes" when it asks if you would like to use Tailwind CSS. (Even though it is actually Twind being installed). This step is to show you how to replace Twind if your project already uses it. Yes for VS code, that's the editor I am using. (This tutorial has not been tested with other editors) Open your Fresh project folder in VS Code. Go to View > Command Palette and run "Deno Initialize Workspace Configuration". Select Yes for linting (we will change this later). Unstable APIs are up to you. Open "deno.json" and remove the lines: ~~~ json //deno.json { "twind": "https://esm.sh/twind@0.16.19", "twind/": "https://esm.sh/twind@0.16.19/", } ~~~ Next open "main.ts" and do the following: ~~~ ts // delete below two lines import twindPlugin from "$fresh/plugins/twind.ts"; import twindConfig from "./twind.config.ts"; //change this: await start(manifest, { plugins: [twindPlugin(twindConfig)] }); //to this: await start(manifest); ~~~ Finally delete "twind.config.ts". Create a "tailwind.config.js" file in the root and copy the below into it: ~~~ js /** @type {import('./node_modules/tailwindcss/types/config.d.ts').Config} */ module.exports = { content: ["./routes/**/*.tsx", "./islands/**/*.tsx", "./components/**/*.tsx"], theme: { extend: {}, }, plugins: [require("@tailwindcss/typography")], }; ~~~ You can remove the typography plugin if you don't want to use it. The type import line will give you a error. We'll fix that in the next step. Run "npm init", give it any name and keep on pressing enter till the end. Run the following command: ~~~ powershell npm i -D tailwindcss @tailwindcss/typography prettier @types/prettier prettier-plugin-tailwindcss ~~~ note: update .gitignore to exclude node_modules Assuming you have the Tailwind CSS IntelliSense plugin installed you can already see the Intellisense working if you hover over a Tailwind class in "index.tsx". But Tailwind itself isn't working yet, we will do that next. Create a "css" folder in the "static" folder of Fresh. In "css", create 2 files, "index.css" and "tailwind.css". Open "index.css" and paste the following inside: ~~~ css /* index.css */ @tailwind base; @tailwind components; @tailwind utilities; ~~~ In the "routes" folder create a file called "_app.tsx". Copy the below content into it: ~~~ tsx // _app.tsx import { AppProps } from "$fresh/server.ts"; import { Head, asset } from "$fresh/runtime.ts"; export default function App({ Component }: AppProps) { return( ); } ~~~ Open "deno.json". Modify the start task so it looks like: ~~~ json // deno.json { "start": "npx tailwindcss -i ./static/css/index.css -o ./static/css/tailwind.css --watch & deno run -A --watch=static/,routes/ dev.ts", } ~~~ Run your fresh Project with "deno task start". Tailwind should now be fully functional. Change or add a Tailwind class in "index.tsx" to see if it works. {/* If you installed the typography plugin test it by modifying "index.tsx" like so: ~~~ tsx //index.tsx //test if the typography plugin is working export default function Home() { return ( <> Fresh App

This should be really big with prose

This should have a nice space above it

This should also have a nice space above it

); } ~~~ */} ## Auto Class Sorting with Prettier This part is optional, unless you want to auto sort Tailwind classes with prettier. Install the VS Code Prettier Extension as well as the Prettier node module if you have not done so already in a previous step: ~~~ powershell npm i -D prettier prettier-plugin-tailwindcss ~~~ Create two files in the root of your project: ".prettierrc.js" and ".prettierignore" tip: remember the "rc" part in .prettier***rc***.js Paste the following in ".prettierrc.cjs": ~~~ js //prettierrc.js /** @type {import("./node_modules/@types/prettier/index.d.ts").Options} */ module.exports = { tabWidth: 2, useTabs: false, plugins: ["./node_modules/prettier-plugin-tailwindcss/dist/index.js"], }; ~~~ To make Prettier and auto sorting take effect, go to File>Preferences>Settings. I recommend you change from "User" to "Workspace" settings as to not apply the following changes globally. Search for "default formatter" and select "Prettier - Code Formatter" in the dropdown. Then search for "Format On Save" and check it. Close and restart VS Code, and run Fresh. Auto Class Sorting should now be in effect. If auto sorting does not seem to work, try the following: Open any ".tsx" file. Then do "ctrl+shift+p", select "Format Document With..." At the bottom select "Default Formatter..." It should then say: "Select a default formatter for Typescript JSX files" Select Prettier. I hope this tutorial helped you. Please leave a hand clap if it did.

Reghardt's Blog

Tutorial: Tailwind with full intellisense support in Fresh JS (OUTDATED)