Tailwind CSS basics 🌊

If you’re new to coding, you might have heard of Tailwind CSS. It’s a CSS framework that helps you build websites faster by providing you with a set of pre-saved classes that you can use to style your elements; a dream come true for backend developers who don’t want to spend time thinking about styling. This article will be a simple getting started guide to Tailwind CSS.

First, a little history on Tailwind. It was created by Adam Wathan, Steve Schoger, and Jonathan Reinink. They were working on a project and realized that they were writing the same CSS over and over again. They decided to create a framework that would help them write CSS faster which in turn made every developers life easier.

Here’s a keynote by Adam Wathan that got me inspired to start using it: Tailwind Connect 2023 — Keynote

Pros

You don’t have to write CSS from scratch
You can build faster
You can customize the framework to your liking
You can use it with any framework (React, Vue, Angular, etc.)
It’s easy to learn - Tailwind has great docs!
It’s easy to debug because you can see the classes in the HTML

Cons

The code can look messy because you have a lot of classes in the HTML
You may still need to use CSS for some things

Option 1: Download

Install Tailwind CSS here
Follow each step to get started

Option two: CDN link

If you prefer not to download Tailwind, another option is copying the CDN link and pasting it into the head of your html file.
<script src="https://cdn.tailwindcss.com"></script>
which you can always find here.

Styling

After completing the above steps, you can start using Tailwind classes in your HTML file.
Example:
<div class="bg-slate-500 text-white">Hello World</div>

Notes

All you do is add a class to your element and follow the Tailwind naming convention. 💡You can find all the classes here.
Use the search bar to find the class you need in their docs.
When using numbers in the class name for colors, sizing, etc. Not all numbers are available. For example, you may try setting the width to w-15 and it won’t work. You can only use the numbers that are available in the docs. In this case the closest number is w-14 or w-16. 💡 You can find all the numbers here.
OR, if you want to use a number that’s not available, you can add it to the config file.

Build your first project

Below is an example of a nav bar built with Tailwind. Feel free to copy the code below (hover over the code and click copy) and try it out yourself.