Unicorn Platform

World's best and simplest website builder powered by AI

Build your website
Back to Blog
Thursday, October 19, 2023

New to Tailwind CSS? Start here with this beginner's tutorial

Introduction

Tailwind CSS is a utility-first CSS framework that has exploded in popularity over the past few years. With its focus on rapid development through utility classes, Tailwind provides a streamlined way to build custom user interfaces without writing custom CSS.

The main benefit of using Tailwind is that it allows you to build responsive, modern designs incredibly quickly. By using pre-designed utility classes like text-center or bg-blue-500, you can style elements on a page without ever leaving your HTML. This saves tons of time compared to writing one-off CSS styles.

Since Tailwind CSS is optimized for on-demand styling right in your markup, it's perfect for situations where you need to iterate quickly or build pages as a team. The utility classes act as design tokens, making it easy to enforce consistency across projects. The framework also integrates well with popular tools like Next.js and Vue.js.

In this beginner's tutorial, we'll start from square one and cover all the core concepts you need to start building with Tailwind CSS. By the end, you'll have the skills to create your first Tailwind website. We'll look at topics like:

  • Installing and configuring Tailwind
  • Using utility classes to style elements
  • Building fully responsive designs
  • Hover, focus, and state classes
  • Creating a real website with Tailwind
  • Integrating Tailwind with JavaScript frameworks

Let's dive in and learn how you can use Tailwind CSS to design beautiful, responsive sites without becoming a CSS expert!

Getting Started with Tailwind CSS

To use Tailwind CSS, you'll first need to install and configure it for your project. There are a few different ways to add Tailwind - let's look at some of the most common approaches.

Installing Tailwind CLI

The official Tailwind CLI provides everything you need to get up and running. To install:

  • Run npm install tailwindcss to install Tailwind and its dependencies.
  • Generate a Tailwind config file using npx tailwindcss init. This creates a tailwind.config.js file.
  • Customize your Tailwind installation by modifying tailwind.config.js. Here you can change settings like colors, fonts, responsive breakpoints and more.
  • For example, you could add a new blue color variant like lightBlue: '#85d7ff'.
  • Run npx tailwindcss build to generate your final CSS stylesheet using your configuration.
  • Consider adding a build tool like PostCSS to automate generating your Tailwind CSS.

Using the CLI gives you maximum control and customization for your Tailwind project. It does require some initial setup, but then you can tweak Tailwind exactly how you want it.

Using Tailwind via CDN

For quick examples or prototypes, you may want to use Tailwind right in your HTML using CDN links. Here's how that works:

  • Add the Tailwind CSS CDN link in the <head> of your HTML. This provides the core Tailwind styles.
  • Include the Tailwind configuration file from a CDN too. This allows customizing Tailwind without needing the CLI.
  • For example, the config file CDN link would be: https://cdn.tailwindcss.com?plugins=[...]
  • Simply update the config CDN link's query params to tailor Tailwind to your needs.
  • You can now add Tailwind utility classes directly in your HTML without running any build steps.

This CDN approach is great for putting together quick demos or pages. But for larger projects, the CLI gives you more control and performance tuning.

Tailwind in Frameworks like Next.js

Many popular frameworks like Next.js have built-in support for Tailwind CSS. Here's how it works:

  • Install Tailwind and its peer dependencies using npm install tailwindcss.
  • Generate a tailwind.config.js file to configure Tailwind as needed.
  • Import the Tailwind directives like @tailwind in your JS framework pages and components.
  • Enable PurgeCSS or Just-in-Time mode in Tailwind config for best performance.
  • Take advantage of code splitting and styling at the component level.

Integrating Tailwind CSS into Next.js and other frameworks is straightforward and gives you all the benefits of utility classes right within your components.

Tailwind UI Component Libraries

While you can build complete interfaces using only Tailwind's utility classes, component libraries provide ready-made UI elements that make development even faster.

Here are some of the most popular Tailwind component libraries:

  • Tailwind UI - Official Tailwind component library with fully designed components for dashboards, marketing sites, and apps.
  • Float UI - Offers over 50 responsive components like navigation, cards, modals, and more. Designed specifically for Tailwind CSS.
  • Meraki UI - Beautiful components including tabs, dropdowns, toggles, and popups. Lots of variety.
  • Daisy UI - Collection of over 50 accessible and customizable components. Super lightweight.
  • Flowbite - Library focused on UI and dark mode themes for Tailwind CSS.

The best part about these libraries is they save you even more time by letting you craft complete interfaces faster using their pre-made components. Many also offer templates and themes to get your project off the ground quickly.

Tailwind CSS Fundamentals

Now that we've installed Tailwind and seen some of its ecosystem, let's look at how Tailwind works under the hood.

Tailwind provides utility classes that let you style elements directly in your HTML markup. By combining utility classes, you can rapidly build custom designs without writing any CSS.

Some key concepts include:

Utility Classes

At its core, Tailwind generates a bunch of utility classes you apply to style elements. These follow a common naming convention like:

  • text-lg - Text size large
  • px-4 - Padding horizontal 4
  • rounded-full - Fully rounded corners

The classes handle different CSS properties like text styling, spacing, display, flexbox, and more. You customize the available utilities via the Tailwind config file.

For example, you could add new margin spacings like mt-14 for massive vertical margins.

Tailwind avoids repetitive CSS declarations by allowing highly customizable utilities through the config. For example, you can configure multiple font size, color, or spacing options rather than being limited to a fixed set.

Responsive Design

A huge part of Tailwind is its responsive design features. Every utility comes in responsive variants like md:text-center for medium screens and up.

You can control the breakpoint configuration to determine exactly when utilities take effect. For example, sm: could apply for 640px widths, while md: kicks in at 768px.

This allows creating fully responsive interfaces without ever writing media queries! Learning the different breakpoint prefixes like sm, md, lg and how they map to device sizes is key for responsive development in Tailwind.

Hover, Focus and State

Tailwind provides useful classes for styling elements on hover, focus, and other states:

For example:

  • hover:bg-blue-500 - Blue background on hover
  • focus:outline-none - Remove outline on focus
  • active:shadow-lg - Large shadow on active

These state helpers save you from constantly writing custom CSS to handle interactivity and different states.

Building Your First Tailwind Website

Now that we've covered the basics, let's put Tailwind into action by building a simple homepage. We'll use many of the utilities we just learned about to create responsive designs quickly.

Page Layout

For the overall page structure, we can:

  • Use Flexbox utilities like flex and justify-center to easily center align sections.
  • Space elements consistently with mt-4 for margins or p-8 for padding utilities.
  • Make the site fully responsive by adding responsive variants like md:text-left for medium screens and up.
  • Position elements accurately using absolute, relative and other positioning utilities.

To create a clean navigation bar, we could:

  • Style the background color with bg-white and add shadow to create depth.
  • Make the navbar stay fixed at the top on scroll using fixed and top-0.
  • Use flex utilities to align the nav links horizontally.
  • Add hover:underline to have links underline interactively on hover.
  • Toggle a collapsed mobile menu with block and hidden responsive utilities.

Hero Section

The homepage hero could include:

  • An eye-catching background image with tinted overlay using bg-cover and bg-black/50.
  • Centered text content vertically and horizontally with flex and text utilities.
  • A call to action button with rounded-full and transition for smooth hovering.
  • Responsive utilities to stack elements for small screens.

Throughout the site, we can reuse components from libraries like Float UI to add navbars, footers, cards and more with just a few classes. This allows us to build complete, custom pages faster than ever.

Advanced Tailwind Features

We've really just scratched the surface of Tailwind CSS. Here are a few more advanced features to level up your Tailwind skills:

Custom Plugins

For advanced customization, Tailwind lets you create custom plugins that add new utilities or variants.

Plugins are a great way to extend Tailwind's default styles with project-specific design tokens and rules without having to escape the utility ecosystem.

For example, you could build a custom plugin for unique border radius utilities like round-left and round-right.

@apply Directive

The @apply directive allows you to extract repeated utility patterns into reusable component classes:

.btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

Now you can update all button styles in one place instead of repeating utilities.

@layer Directive

Use @layer to inject custom CSS that builds on top of Tailwind's defaults:

@layer components {
  .fancy-animation {  
    /* Custom animation styles */
  }
}

This keeps your project-specific CSS nicely separated from Tailwind's generated utilities.

Integrating with JavaScript Frameworks

Tailwind plays nicely with popular JS frameworks like React, Vue, and Angular.

You can build entire applications with utility classes inside framework components. Tailwind's responsive and state helpers work great with declarative frameworks.

Frameworks like Next.js have out-of-the-box support for Tailwind. But it can be added to virtually any modern web framework.

Conclusion

Hopefully you now have a solid understanding of how to build websites using the utility-first approach of Tailwind CSS!

The key concepts we covered like responsive classes, hover states, CSS layers, and component libraries provide powerful tools to customize designs without fighting CSS.

Tailwind's main benefits are rapid development speed, responsive handling, and team consistency. With Tailwind, you can build custom UIs faster than ever while maintaining a cohesive design system.

To take your Tailwind skills even further, be sure to check out the official docs and third party learning resources like video courses and tutorials. The Float UI component library can also help accelerate your development with ready-made components designed for Tailwind CSS.

Happy coding and let me know if you have any other questions about getting started with Tailwind! It's a great tool to add to your web development toolkit.