Unicorn Platform

World's best and simplest website builder powered by AI

Build your website
Back to Blog
Saturday, October 28, 2023

Craft Beautiful Sites for Free With Tailwind CSS

Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework that has exploded in popularity over the last few years. It provides developers with low-level utility classes for layout, styling, and responsive design instead of opinionated, pre-designed components. This allows for rapid development and complete customization as you build beautiful websites without advanced design skills. Some of the key benefits of Tailwind CSS include:

  • Rapid Styling: With utility classes for every property, you can style elements directly in your HTML without writing custom CSS. This speeds up development significantly.
  • Responsive Design: Tailwind includes excellent responsive design utilities for building mobile-first websites.
  • Customization: Tailwind doesn't impose design decisions. You get complete control to customize the styling as needed.
  • PurgeCSS: Remove unused CSS with PurgeCSS for an extremely lightweight production build.
  • Framework Agnostic: Tailwind works with any frontend framework like React, Vue, Angular etc. Or use it vanilla!

In this post, we'll cover the basics of using Tailwind CSS for free through CDN links, templates, and open source starters. We'll look at core concepts like utility classes, customization, responsive design, and integrating Tailwind with popular frameworks. You'll learn how to build modern, elegant websites with Tailwind CSS even if you don't have advanced CSS skills.

Getting Started with Tailwind CSS

To start using Tailwind CSS, you have a couple quick options that don't require installing or configuring anything.

Installing Tailwind CSS

Add CDN Links

The simplest way to use Tailwind is by adding the CDN links directly in your HTML file. This gives you access to the entire framework instantly for free:

<!-- Tailwind CSS -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Use Package Managers

For more customization and advanced features, install Tailwind via NPM or Yarn:

# Using NPM
npm install tailwindcss postcss postcss-cli

# Using Yarn
yarn add tailwindcss postcss postcss-cli

This allows you to configure Tailwind CSS and integrate plugins.

Folder Structure

Set up your folder structure with an HTML file, CSS file that imports Tailwind, and a config file:

/project
  index.html
  /css
    styles.css
  tailwind.config.js

Import Tailwind in your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Configure and Optimize

Configure Tailwind with PostCSS and PurgeCSS by setting up postcss.config.js and tailwind.config.js files. This gives you a tailored version with only the CSS you need for your site.

For the easiest setup, use the Tailwind CLI which scaffolds the configuration for you.

Using Utility Classes

Tailwind CSS is made up of many utility classes that you use to style your HTML directly:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <!-- Image here -->
  </div>

  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

Classes use a consistent property:value naming scheme like text-lg for text size, bg-blue-500 for background color, etc.

Review the full class reference in the Tailwind docs.

Some key tips:

  • Use @apply to extract repeating classes into reusable components
  • Take it one utility at a time rather than big custom CSS
  • Build up styles gradually using composable utilities

Customizing and Configuring Tailwind CSS

A huge advantage of Tailwind is being able to customize everything for your brand. Modify colors, fonts, margins, and much more using the Tailwind config file.

Colors

Override default colors or add new ones:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#3fbaeb',
          DEFAULT: '#0fa9e6',
          dark: '#0c87b8',
        },
      }
    }
  }  
}

Now use bg-brand-dark for example.

Fonts

Add custom fonts or adjust sizing:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        headline: ['Oswald', ...defaultTheme.fontFamily.sans],
      },
      fontSize: {
        xxl: '1.5rem', 
      }
    }
  }
}

Spacing

Control spacing utilities like padding and margin:

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      sm: '12px',
      md: '24px',
      lg: '48px',  
    }
  }
}

You can also add custom CSS, plugins, and component classes. This allows you to theme Tailwind CSS to match your brand.

Responsive Web Design with Tailwind

Tailwind CSS is mobile-first and includes excellent responsive design utilities:

Float UI's components are designed mobile-first for seamless responsiveness.

Best practices:

  • Mobile styling first, then enhance layouts for larger screens
  • Test across device sizes during development
  • Responsive images and typography for performance
  • Consistent spacing for UI elements across views

With a mobile-first workflow and utility classes for responsive styles, Tailwind makes adaptive sites easy.

Creating Reusable Components

For reusable UI elements like buttons, cards, navbars etc., you can extract repeating utility classes into new components:

// Example button

const Button = ({children}) => {
  return (
    <button className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
      {children}
    </button>
  ) 
}

Then reuse it:

<Button>
  Click here
</Button>

Strategies:

  • Build up styles from utility classes first
  • Extract common utilities into components with @apply
  • Create a component library for your project
  • Check out open source examples like Tailwind UI

Tailwind works seamlessly with React, Vue, Angular and more. There are also integration libraries like Twin for using Tailwind with CSS-in-JS.

Ways to integrate Tailwind:

  • Add Tailwind CSS files to your project
  • Use CLI tool to scaffold a Tailwind project for frameworks like Create React App
  • Configure PostCSS and other pipeline tools
  • Import and use Tailwind classes in framework components

File structure best practices:

  • Maintain separation of concerns with CSS files separate from JavaScript
  • Create shared component libraries
  • Add Tailwind configuration at root level

Templates and Themes for Tailwind CSS

Here are some excellent starter kits and themes for Tailwind CSS:

  • Tailwind Starter Kit - Free site template by Creative Tim
  • Float UI - Beautiful Tailwind UI components and templates
  • Tailwind Made - Paid starter projects and UI kits
  • Tailwind UI - Paid library of components and screens

For more, search “tailwind css templates” on GitHub or your favorite search engine. Look for templates that match your use case and customize as needed. The Tailwind Showcase also lists sites built with Tailwind CSS.

Optimizing for Production with Tailwind

For best performance, optimize your Tailwind CSS for production builds:

  • Purge Unused CSS - Use PurgeCSS to remove any unused CSS, shrinking your files dramatically. Easily configured with the Tailwind CLI.
  • Extract Critical CSS - Generate just the CSS needed to render the initial view. Load the rest asynchronously.
  • Minify and Compress - Use CSS and JS minification along with gzip compression.
  • Optimize Images - Compress, lazy load, and serve images responsively.
  • Font Optimization - Subset fonts, use variable fonts, and lazy load non-critical icons.

Following performance best practices allows your site to load lightning fast, even with a utility-first framework.

Conclusion and Next Steps

Tailwind CSS provides a utility-first workflow that can greatly improve development speed while offering extensive customization. With its responsive design features, deep customization options, and seamless integration with popular frameworks, Tailwind removes limitations and gives you flexibility to build modern, elegant websites without advanced design skills.

In this post, we covered:

  • Installing Tailwind CSS using CDNs or a package manager
  • Leveraging utility classes for rapid styling
  • Customizing colors, fonts, and more for your brand
  • Building responsive layouts optimized for mobile
  • Creating reusable components with CSS extraction
  • Integrating Tailwind seamlessly with JavaScript frameworks
  • Finding starter templates and themes like Float UI
  • Optimizing your production build for speed

To go further with Tailwind CSS, refer to the official Tailwind documentation for detailed guides and examples. The active community also creates useful resources like plugins and tools.

With these fundamentals, you can now use Tailwind CSS to rapidly build custom sites. Give it a try on your next project and explore Float UI for beautiful Tailwind components!