Skip to content

Tailwind Anywhere!

The tl;dr is the tutoral. If you wanna know why you would want to do something like this, read Why would you wanna use this? section below.

tl;dr

Source

Follow this guide and select the "Tailwind CLI" method

First up. Install the tailwindcss CLI.

pnpm install tailwindcss @tailwindcss/cli

Then create a file called input.css. Here, you will define the config as you do in a normal CSS file that is going to be using tailwindcss (e.g. think of it as the global.css in a Next.js project)

src/input.css
@import "tailwindcss";

Run the cli with the --watch mode

pnpx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch #(1)
  1. The --watch mode ensures that whenever you make any edits to any of the html files in the directory which mention a tailwind compatible class name, that class and its css will be added to the output.css file.

Then, import the output.css file in the <head/> of the html document being sourced.

3
4
5
6
7
<head>
  <!-- ... -->
  <link href="./output.css" rel="stylesheet">
  <!-- ... -->
</head>

As you keep updating the html file. @tailwindcss/cli will update the output.css file based on your configurations set in input.css. That's how God intended tailwindcss to work from the beginning.

Why would you wanna use this?

Ever thought of spinning up a quick static webpage that doesn't need those flashy features of the cutting-edge frameworks that are being used literally everywhere? Well, I don't think so. But, if you are not a native-css person and tend to use tailwindcss just because its very convenient, I have good news for you.

You can think of designing the page like how tailwind allows you to do (quickly and efficiently) without worrying about the native css styles. And the best part is that you don't need to think about installing tailwind as a dependency or bundling it or any of that crap (though if its a big project, its recommended, you learn how to do that to save time in the long run). But this isn't what this guide is talking about.

We need to do some quick and dirty css work and fast. We don't need to do it the "right" or left way. We just want it to work!

Comments