Unicorn Platform

World's best and simplest website builder powered by AI

Build your website
Back to Blog
Friday, October 27, 2023

Master tailwind css basics for modern web design

Introduction to Tailwind CSS

Tailwind CSS is a highly customizable utility-first CSS framework that has exploded in popularity over the last few years. With its utility-first approach, Tailwind focuses on generating utility classes for every CSS property rather than predefined components. This gives developers greater flexibility and control in styling their user interfaces. Some of the key benefits of Tailwind CSS include:

  • Speeds up development - You can build UIs faster by applying pre-designed utility classes instead of writing custom CSS from scratch. Prototyping is especially fast in Tailwind.
  • Intuitive customization - Tailwind's configuration file allows extensive customization of colors, fonts, spacing, breakpoints, and more. You can easily tweak Tailwind to match your design needs.
  • Responsive by default - Classes come with variants for different breakpoints, making responsive design simple. No need to write custom media queries.
  • Convenient consistency - Utility classes provide consistency in padding, margin, font sizes, etc across components. This helps maintain UI coherence.
  • Accessible components - Many utilities provide accessible variations, like reduced motion and screen reader visibility.

With Tailwind CSS, developers without advanced design skills can build aesthetically pleasing websites. Sites like GitHub, Shopify, and Coinbase have been built with Tailwind CSS. In this beginner's guide, we'll cover the basics you need to start building sites in Tailwind too.

Getting Started with Tailwind CSS

Tailwind CSS can be installed and configured in several ways. Let's look at some options for adding Tailwind to a project.

Installing Tailwind CSS

A few approaches for getting started:

  • CDN - For quick prototyping, include Tailwind via a CDN like jsDelivr in your HTML file. Easy to try out Tailwind.
  • npm - For apps and larger projects, install Tailwind and its peer dependencies via npm. Lets you customize configs.
  • CLI tool - Use the Tailwind CLI tool to generate a config file and scaffolds new projects. Great for integrating Tailwind into many frameworks.
  • Frameworks - Integrate Tailwind into React, Vue, and other frameworks seamlessly with CLI tool or manual setup.
  • Templates - Float UI offers open source Tailwind CSS templates to easily start new projects.

Configuring Tailwind CSS

The Tailwind config file tailwind.config.js controls all customization:

  • Colors - Extend the default color palette with your own custom colors.
  • Font families - Specify which font families to generate classes for.
  • Spacing - Customize spacing/sizing utilities like padding and margins.
  • Variants - Add hover, focus, responsive variants for utilities.
  • Plugins - Import community plugins to extend class names.
  • Purging - Purge unused classes in production for smaller CSS file size.
  • Dark mode - Add dark mode variants by enabling the darkMode option.

Setting Up PostCSS and Autoprefixer

Tailwind CSS requires PostCSS to work properly. PostCSS plugins are configured in postcss.config.js:

  • Autoprefixer - Automatically adds vendor prefixes to standard CSS properties.
  • cssnano - Minifies CSS in production builds for performance.
  • Integrations - Set up PostCSS with webpack, Parcel, Laravel Mix, and more.
  • tailwindcss - Include tailwindcss plugin with custom config path.

Utility-First Workflow

The utility-first approach is a shift from traditional CSS workflows. Instead of writing custom CSS, you apply pre-designed utility classes to add styles. For example, use text-center instead of writing custom centering code.

Benefits include:

  • Rapid prototyping - Build UIs and make changes instantly with utility classes. Tailwind makes it easy to try different designs.
  • Consistency - Utilities like py-4 and text-lg ensure consistent padding and text sizes across components.
  • Responsive design - Adding breakpoint prefixes like lg: makes utilities responsive.
  • Reusability - Utilities can be reused across components instead of duplicated CSS.

Some common utilities:

  • text-{size,color,align} - Text styles like size and alignment
  • p/m/mx-{size} - Padding and margin utilities
  • w/h-{size} - Width and height sizing
  • flex, grid - Layout utilities like flex and grid
  • bg-{color} - Background color and gradient utilities

Custom CSS vs Utility Classes

Utilities speed up general styling, but custom CSS still has its place:

  • Use utilities for one-off styles and prototyping.
  • Write custom CSS for complex styling difficult with utilities alone.
  • Extract components to reuse CSS instead of duplicating utility classes.
  • Start with utilities, then move to custom CSS as needed over time.
  • Find a balance between utilities for rapid building and custom CSS for finer control.

Responsive Design with Tailwind CSS

Tailwind includes responsive design utilities powered by mobile-first breakpoint prefixes.

Breakpoints Usage

  • sm, md, lg, xl - Default breakpoints for min-width media queries.
  • Prefix classes - Add breakpoint prefixes like md:text-center to modify styles.
  • Customize breakpoints - Add or modify breakpoints in the Tailwind config file.
  • -breakpoint notation - Use -md instead of md: for adjacent breakpoint.

Responsive Patterns

  • Hide elements - Use hidden md:block to hide navigation on mobile and show on desktop.
  • Resize text/padding - Scale text and spacing with something like text-sm md:text-lg.
  • Collapsing navigation - Make nav bars collapse on mobile with flex utilities.
  • Responsive images - Scale images with w-full and max-w-{size} classes.
  • Reordered grids - Change grid column order across breakpoints.

Reusable Components with Tailwind CSS

Tailwind promotes building reusable components using utility classes for common UI elements.

Component Structures

  • @apply directive - Extract repeated utilities into custom classes with @apply.
  • Variants - Create variants like button-primary or card-active using @apply.
  • States - Style hover, focus, active states through variants.
  • Theming - Customize component defaults and variations through theme tokens.
  • Organization - Structure components into separate folders and files.

Common Components

Some examples of reusable components built with Tailwind CSS:

  • Buttons - Float UI offers button styles for all sizes, variants, and states.
  • Cards - Float UI provides content containers like cards, panels, and widgets.
  • Modals - Float UI includes reusable modal and dialog window components.
  • Navigation - Nav bars, menus, side navigations, and breadcrumbs.
  • Forms - Custom inputs, labels, toggles, and selects.

Advanced Features

Tailwind provides many ways to extend and customize your setup through plugins, variants, theming, and optimization.

Plugins

  • Community plugins - Extend utility classes through plugins like Typography.
  • Custom plugins - Create custom plugins to add component classes.
  • Configuring plugins - Import and configure plugins in tailwind.config.js.
  • Sharing plugins - Publish and distribute plugins through npm.
  • Find plugins for animations, grids, transitions, and more.

Optimization

  • Purging CSS - Purge unused classes in production for smaller file size.
  • cssnano - Minify and optimize final CSS through PostCSS.
  • Tree shaking - Leverage Parcel 2 or webpack 5 for unused CSS removal.
  • On-demand loading - Dynamically import components to lazy load CSS.

Resources for Learning Tailwind CSS Basics

Some recommended resources for mastering the basics of Tailwind CSS:

  • Official Tailwind CSS docs provide examples and API documentation.
  • Online video courses from sites like Udemy and Frontend Masters.
  • Tailwind CSS Discord community to get help from other users.
  • Templates, plugins, and tools from 3rd party developers like Float UI.
  • Other great blogs and YouTube channels publishing Tailwind content.
  • Most importantly, build real projects with Tailwind CSS!

Summary of Tailwind CSS Basics

The utility-first approach of Tailwind CSS radically improves frontend styling workflows. With an intuitive API and extensive customization options, Tailwind makes it easy to build modern, responsive interfaces without advanced design skills.

The basics we covered:

  • Speeding up development through utility classes.
  • Installation via CDNs or CLI tool.
  • Utility-first workflow provides consistency and flexibility.
  • Highly customizable colors, spacing, variants, and more.
  • Responsive by default using breakpoint prefixes.
  • Extracting reusable components from utility patterns.
  • Rich ecosystem of plugins and 3rd party resources.

With these fundamentals, you can start building beautiful, functional sites using the utility-first approach of Tailwind CSS. The intuitive API and customization options provide endless possibilities.