Intro to Tailwind CSS

Course: React JS & Tailwind CSS - Full Course

Introduction

This is an optional introductory course to Tailwind CSS. Tailwind CSS is a popular framework amongst developers for styling. However, what you decide to use, whether it's Bootstrap, SASS or just regular CSS, is completely up to you. Feel free to skip ahead to the next section if you prefer another framework or if you are already familiar with Tailwind CSS.

What is Tailwind CSS

Tailwind CSS is a utility-first CSS framework. Unlike traditional frameworks (like Bootstrap) that give you pre-built components, Tailwind gives you small, single-purpose classes you can combine to style your elements.

For example, instead of writing your own CSS like this:

.submit-button {
  background-color: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
}

And then applying it (React):

<button className="submit-button">Submit</button>

With Tailwind, you can do everything directly in your HTML (or JSX in React):

<button className="bg-blue-500 text-white px-4 py-2 rounded-lg">
  Submit
</button>

Each class (bg-blue-500, text-white, px-4, etc.) handles a single piece of styling. We'll discuss this further later.

Why Use Tailwind CSS

  • Speed of Development - No switching back and forth between HTML/JSX and CSS files.
  • Consistency - Utility classes come from a design system, so your project stays consistent in spacing, colors, and typography.
  • Customization - Tailwind can be extended to match your project’s brand with custom colors, fonts, and themes.
  • No Naming Stress - You don’t need to think of new class names like button-primary or header-title.

Setting Up Tailwind CSS in React (Vite)

Tailwind CSS does a great job of documenting the set up here. However, we'll go over it in this article as well.

Step 1: Install Tailwind Go into the directory where your app is and open up your terminal. Input the following:

npm install tailwindcss @tailwindcss/vite

Step 2: Configure the Vite Plugin Go into the vite.config.js file and add the following:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Step 3: Import Tailwind CSS Add an @import to your index.css file that imports Tailwind CSS:

@import "tailwindcss";

And that'll do it! Tailwind CSS is all set up to use!

Core Features of Tailwind CSS

Tailwind CSS is not limited to these features, however, this will cover the most commonly used features of Tailwind CSS. Tailwind documentation also does a great job detailing what each class represents.

Spacing (Margin and Padding)

<div className="p-4 m-2 bg-gray-200">
  Box with padding and margin
</div>

p-4 indicates a padding of 1 rem, while m-2 is a margin of .5 rem. You can also specify which side the padding is on by using pl-4 which is padding-left: 1rem.

Colors

<p className="text-blue-600">Blue text</p>
<p className="bg-green-200 p-2">Green background</p>

Tailwind has a built-in color palette. Lower numbers mean a lighter shade while higher numbers mean a darker shade. This can be customized, which we will discuss later.

Typography

<h1 className="text-3xl font-bold">Big Bold Text</h1>
<p className="text-sm text-gray-600">Small gray text</p>

Font size can be modified with classes like text-lg, text-xl, text-2xl, etc. The weight can be modified with classes like font-medium, font-semibold, etc

Flexbox Layout

<div className="flex gap-4">
  <div className="bg-red-300 p-4">1</div>
  <div className="bg-blue-300 p-4">2</div>
  <div className="bg-green-300 p-4">3</div>
</div>

flex makes a flex container. You can change the flex direction to column by inputting flex-col and row by flex-row. Similarly, grid will change the display to "grid", and you can use grid-cols-3 which represents repeat(3, minmax(0, 1fr)).

Responsive Design

Tailwind has built in breakpoints like sm:, md: and lg::

<p className="text-sm md:text-lg lg:text-2xl">
  Resize the screen to see me change size!
</p>

Essentially the breakpoints define the minimum width of the screen.

Hover and State Variants

<button className="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
  Hover Me
</button>

You can indicate what an element does on hover, or if it is active by using hover: and active:.

Using Custom Sizes with Arbitrary Values

Tailwind comes with a lot of built-in size utilities like w-4, w-10, or w-1/2. But sometimes you need something more specific, like 100px width.

Instead of writing custom CSS, Tailwind allows you to use arbitrary values inside square brackets:

<div className="w-[100px] h-[50px] bg-blue-500">
  I’m exactly 100px wide and 50px tall
</div>

You can do this with almost any utility (w-[75%], p-[12px], text-[22px], etc.). In addition to size, you can use it with colors as well. For example:

<div className="bg-[#ff5733] text-white p-4 rounded">
  Custom color background
</div>

This feature is really useful when Tailwind’s spacing scale doesn’t quite fit your design.

There's more that Tailwind CSS can do, however, this should cover a majority of what you'll be using Tailwind CSS for early on, especially for this course. The most time consuming part of learning Tailwind CSS early on is getting familiar with the classes. Fortunately, Tailwind has fantastic documentation! Now that we've gotten the fundamentals of Tailwind CSS down, let's integrate it into our React app.

Back to Course