Tailwind CSS basics 🌊
By Sulamita Ivanov

Posted on 1/9/2024

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



Option 1: Download

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.


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


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.