khalido.org

every blog needs subheader text

TailwindCSS

CSS makes sense, I mean, who doesn’t want to seperate styling from code? Semantic html has been the web’s dream for a long time, but over time as web browsers became operating systems css has grown into a hugely complex kludge of a tool.

🏇 This is where tailwindcss rode to the rescue, by doing the rocket science css behind the scenes and presenting a toolbox full of utilities to use directly in html. The beauty of tailwind, which took me a while to figure out, is that everything beautifully works together and scales with size in a way which is very hard to do directly in css without having to work through browser quirks and conflicting css styles.

This is a guide how to simply use tailwind in a simple html project from scratch.

Install and setup tailwind

Install tailwindcss and typography in the root project folder:

npm install -D tailwindcss@latest
npm install -D @tailwindcss/typography
npx tailwindcss init # creates a basic tw config file

The -D flag makes and adds these two packages to the package.json file in the root folder. Once this file exists, running npm install will install all the packages listed in package.json.

This install also makes a tailwind configuration file tailwinds.config.js. The tailwind typography plugin needs to be manually added to it in the plugins section, and all the html files using tailwindcss need to be pointed to in the purge section like so:

purge: ["./templates/*.html"],
plugins: [
    require('@tailwindcss/typography'),
  ],

Add all the extra node stuff to .gitignore:

# node stuff
node_modules
build
npm-debug.log
package-lock.json

Finally, create a basic css file, initially just containing the tailwind basics - I made a ko.css file in my templates folder:

/* basic tailwindcss file */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* example component */
@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-600 text-white rounded;
  }
}

This file is needed for putting common patterns, i.e a bunch of tailwind styles used often like a button into a .btn component. This is useful to unclutter the html file and make it clearer you are looking at a .btn instead of having to figure it out from the various utility class names.

Finally, we get to the actual css file, which is generated by:

npx tailwindcss -i ./templates/ko.css -o ./static/tailwind.css

The above command reads my custom css file and create a gigantic css file including all of tailwind and my custom components. This is way too big for actual usage, so once happy with how everything looks, create the final production css file by:

NODE_ENV=production npx tailwindcss -i ./templates/ko.css -o ./static/tailwind.css

Also consider adding the flag --minify to further compress the production css if needed.

Usage

First up, add the tailwindcss extension to vs code, otherwise its a pain to use.

Add the tailwindcss to every html page. I have a header template which gets added to every page, so I just need to update that:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/tailwind.css" rel="stylesheet" />
</head>

Misc

icons, styled with css, oh my!

tailwind has made svg icons which can be styled with css directly.

<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>

Tools

posted
tagged: webdev