TailwindCSS

What is TailwindCSS

TailwindCSS is a 'utility-first CSS framework' which provides opinionated, single-purpose utility classes that you can use directly inside your markup to design an element.
Utility classes are things like:
- flex - used to apply Flexbox to a div
- items-center - used to apply the css property of align-items: center; to a div
- rounded-full - to make an image circular
TailwindCSS allows you to build pages without the need for touching your CSS file, it can mainly be done inside your HTML file(with the exception of grouping(covered later)), the Tailwind library is extensive so you don't want to include it in a real website build(for this use the Tailwind CLI option below), for testing it out in code sandbox for example you can use the Play CDN below.

Using TailwindCSS

Tailwinds utility classes more or less have a language of their own based on each property/value pair they represent in natural CSS
Some common patterns found in utility class syntax include:
- Abbreviations like w, h, sm, md, and lg for sizing
- Vertical and horizontal indicators using x and y
- Min/max sizing indicators like min-w and max-h
You can group together styles that you are using for an element throughout your project eg if you had a button with a colour, a hover colour, padding, text colour, and rounded edges, and you had 7 buttons through the project that you wanted to have exactly the same you wouldnt have to write them all out like this each time:

<button class="bg-sky-600 hover:bg-sky-700 px-5 py-3
 text-white rounded-lg">...</button>

You use the Tailwind directives @tailwind, @layer, and @apply which allow you to make smaller, reusable collections of utility classes.
We would convert the above button example in the CSS file like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-main {
    @apply bg-sky-600 hover:bg-sky-700 px-5 py-3
 text-white rounded-lg;
  }
}

Then you would just use this in your HTML:

<button class="btn-main">...</button>

Making it quicker and easier to use to style the same elements.

How to install TailwindCSS

Play CDN

This is used only for development purposes, it should not be used for production, you can use this straight in your browser with no build step,
You install the play CDN script in your <head> of your HTML file.

<script src="https://cdn.tailwindcss.com"></script>

Tailwind CLI

The fastest and easiest way to get up and running with TailwindCSS is using the CLI tool.

Install tailwindcss via npm, and create the tailwind.config.js file

npm install -D tailwindcss

npx tailwindcss init

Configure your template paths, by adding your template files in your tailwind.config.js file

content: ["./src/**/*.{html,js}"],

your tailwind.config.js file will now look like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the tailwind directives to your main CSS file

@tailwind base;
@tailwind components;
@tailwind utilities;

In your terminal start the Tailwind CLI build process

npx tailwindcss -i ./src/input.css -o ./dist/output.css
--watch

N.B the --watch is on the same line I've had to write it like this so you can see the whole line.

Add the compiled CSS file to the <head> of your HTML file and then you are ready to start using the utility classes to style the content.

<link href="/dist/output.css" rel="stylesheet">

Example of the index.html page would be:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

These steps can all be found on the documentation for TailwindCSS here

Final word

There are so many different class names for everything you need to style your webpages using TailwindCSS, no-one can remember them all so here are 2 handy resources: cheatsheet for TailwindCSS Tailwind components cheatsheet
I am planning to do some articles around TailwindCSS classes if anyone is interested.
I hope everyone found this useful, Tailwind is certainly something I have found interesting due to its customisability.
Thanks for reading !