Tailwind CSS Tutorial

In this guide, we will cover everything you need to get started with Tailwind CSS, from installation methods—whether using a CDN for quick prototyping or integrating with frameworks like Next.js and Angular—to building real-world UI components.

You'll learn how to create a responsive blog card in React, explore essential utilities for typography, spacing, and layout, and leverage tools like IntelliSense and component libraries to streamline development. Whether you're new to Tailwind or looking to refine your workflow, this tutorial provides a solid foundation for mastering its utility-driven approach.

Get Started with Tailwind CSS

Prerequisites

To get the maximum benefit from this article, ensure you have the following:

A basic understanding of HTML, CSS, JavaScript, and React.
A text editor or an IDE (e.g., VS Code, Cursor, WebStorm).
Node.js and npm/yarn installed (required for local setup and package management).

Install Tailwind with CDN

Follow the steps below to install Tailwind CSS via CDN:

Step 1: Add the Play CDN script inside the <head> section of your HTML document. This will allow you to use Tailwind's utility classes directly.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <h1 class="text-2xl font-bold underline">Welcome to Tailwind!</h1>
  </body>
</html>

Step 2: To define custom styles, use a <style> tag with the type="text/tailwindcss" attribute.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <style type="text/tailwindcss">
      @theme {
        --color-custom: #36c4c5;
      }
    </style>
  </head>
  <body>
    <h1 class="text-2xl font-bold underline text-custom">Welcome to Tailwind!</h1>
  </body>
</html>

Install Tailwind with CLI

Follow the steps below to install Tailwind CSS via CLI:

Step 1: Begin by installing tailwindcss and @tailwindcss/cli via npm:

npm install tailwindcss @tailwindcss/cli

Step 2: In your main CSS file (e.g., src/input.css), add the following import statement:

@import "tailwindcss";

Step 3: Use the CLI tool to scan your source files for Tailwind classes and generate your CSS. The --watch flag allows the CLI to monitor your files for changes and rebuild your CSS automatically.

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

Step 4: Link the compiled CSS file (output.css) in the <head> section of your HTML document and start applying Tailwind's utility classes:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./output.css" rel="stylesheet">
  </head>
  <body>
    <h1 class="text-2xl font-bold underline">Welcome to Tailwind!</h1>
  </body>
</html>

Other Installation Methods

Visit Tailwind CSS' installation guide to check other installation methods.

Framework-Specific Installation

We have covered the Tailwind CSS' installation for the top three most popular frameworks below. Visit Tailwind's framework installation guide to check the installation methods of all the frameworks.

Next.js

Follow the steps below to install Tailwind CSS in a Next.js app:

Step 1: If you haven't already, set up a new Next.js application using Create Next App.

npx create-next-app@latest my-project --typescript --eslint --app
cd my-project

Step 2: Add Tailwind CSS and its peer dependencies to your project via npm:

npm install tailwindcss @tailwindcss/postcss postcss

Step 3: Create a postcss.config.mjs file in the root directory and include the @tailwindcss/postcss plugin to your PostCSS configuration:

// postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

Step 4: In your main CSS file (commonly ./src/app/globals.css), import the Tailwind CSS.

@import "tailwindcss";

Step 5: Run the following command to start the dev server:

npm run dev

Step 6: You can now apply Tailwind's utility classes within your components.

export default function Home() {
  return (
    <h1 className="text-2xl font-bold underline">
      Welcome to Tailwind!
    </h1>
  )
}

Nuxt

Follow the steps below to install Tailwind CSS in a Nuxt app:

Step 1: If you haven't already, set up a new Nuxt application using the Nuxt Command Line Interface:

npx nuxi init my-nuxt-app
cd my-nuxt-app

Step 2: Add tailwindcss and @tailwindcss/vite dependencies:

npm install tailwindcss @tailwindcss/vite

Step 3: In your config file, import the @tailwindcss/vite plugin and add it to the Vite plugins array:

import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
});

Step 4: Create an ./assets/css/main.css file and add the following import statement:

@import "tailwindcss";

Step 5: In your nuxt.config.ts file, include the newly created CSS file in the css array:

import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
});

Step 6: Run the development server to see Tailwind CSS in action:

npm run dev

Step 7: You can now apply Tailwind's utility classes in your components. For example, in app.vue:

<template>
  <h1 class="text-2xl font-bold underline">
    Welcome to Tailwind!
  </h1>
</template>

Angular

Follow the steps below to install Tailwind CSS in an Angular app:

Step 1: If you don't have an Angular project set up yet, you can create one using the Angular CLI:

ng new my-project --style css
cd my-project

Step 2: Add tailwindcss, @tailwindcss/postcss, and postcss dependencies:

npm install tailwindcss @tailwindcss/postcss postcss --force

Step 3: Create a .postcssrc.json file in the root of your project and add the @tailwindcss/postcss plugin to your PostCSS configuration:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Step 4: In your main CSS file src/styles.css, add the following import statement to inject Tailwind's styles:

@import "tailwindcss";

Step 5: Launch your Angular development server to see Tailwind in action:

ng serve

Step 6: You can now apply Tailwind's utility classes within your components.

<h1 class="text-2xl font-bold underline">
  Welcome to Tailwind!
</h1>

Build an Ecommerce Card UI

In this section, we'll learn how to style a product card using Tailwind CSS's utility classes, focusing on creating a responsive and state-aware component that adapts to various user interactions.

This is a live editor. Play around with it!

import React, { useState } from 'react';

const ProductCard = () => {
  const [currentProductIndex, setCurrentProductIndex] = useState(0);
  const [cartItems, setCartItems] = useState(new Set());
  const [wishlistItems, setWishlistItems] = useState(new Set());
  
  const products = [
    {
      id: 1,
      name: "Minimalist Watch",
      collection: "Classic Collection",
      price: 199.99,
      shipping: "Free Shipping",
      rating: 4.2,
      reviews: 4200,
      image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=365&h=192&fit=crop",
      color: "Silver",
      brand: "Timeless",
      availability: true
    },
    {
      id: 2,
      name: "Wireless Earbuds",
      collection: "Pro Audio Series",
      price: 149.99,
      shipping: "Free Shipping",
      rating: 4.7,
      reviews: 3800,
      image: "https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?w=365&h=192&fit=crop",
      color: "White",
      brand: "SoundCore",
      availability: true
    },
    {
      id: 3,
      name: "Leather Backpack",
      collection: "Urban Travel",
      price: 89.99,
      shipping: "$4.99 Shipping",
      rating: 4.4,
      reviews: 2100,
      image: "https://images.unsplash.com/photo-1622560480605-d83c853bc5c3?w=365&h=192&fit=crop",
      color: "Brown",
      brand: "WanderLust",
      availability: true
    },
    {
      id: 4,
      name: "Smart Coffee Maker",
      collection: "Home Smart",
      price: 179.99,
      shipping: "Free Shipping",
      rating: 4.1,
      reviews: 1500,
      image: "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=365&h=192&fit=crop",
      color: "Black",
      brand: "BrewTech",
      availability: false
    },
    {
      id: 5,
      name: "Fitness Tracker",
      collection: "Health Tech",
      price: 129.99,
      shipping: "Free Shipping",
      rating: 4.5,
      reviews: 5600,
      image: "https://images.unsplash.com/photo-1557438159-51eec7a6c9e8?w=365&h=192&fit=crop",
      color: "Black",
      brand: "FitLife",
      availability: true
    },
    {
      id: 6,
      name: "Mechanical Keyboard",
      collection: "Gaming Pro",
      price: 159.99,
      shipping: "Free Shipping",
      rating: 4.8,
      reviews: 2800,
      image: "https://images.unsplash.com/photo-1595225476474-87563907a212?w=365&h=192&fit=crop",
      color: "RGB",
      brand: "TypeMaster",
      availability: true
    }
  ];

  // Format price with proper currency formatting
  const formatPrice = (price) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(price);
  };

  // Generate rating stars based on rating value
  const generateStars = (rating) => {
    const fullStars = Math.floor(rating);
    const remaining = rating - fullStars;
    let stars = '★'.repeat(fullStars);
    if (remaining > 0) stars += '☆';
    stars += '☆'.repeat(5 - Math.ceil(rating));
    return stars;
  };

  // Format review count in K format
  const formatReviews = (count) => {
    return count >= 1000 ? `${(count / 1000).toFixed(1)}k` : count;
  };

  const currentProduct = products[currentProductIndex];
  const isCurrentProductInCart = cartItems.has(currentProduct.id);
  const isCurrentProductWishlisted = wishlistItems.has(currentProduct.id);

  const nextProduct = () => {
    setCurrentProductIndex((prev) => (prev + 1) % products.length);
  };

  const previousProduct = () => {
    setCurrentProductIndex((prev) => (prev - 1 + products.length) % products.length);
  };

  const toggleCart = (productId) => {
    setCartItems(prev => {
      const newCart = new Set(prev);
      if (newCart.has(productId)) {
        newCart.delete(productId);
      } else {
        newCart.add(productId);
      }
      return newCart;
    });
  };

  return (
    <div className="w-[365px] h-[400px] bg-white rounded-xl shadow-lg overflow-hidden">
      {/* Product Image Container */}
      <div className="relative h-48 bg-gray-100">
        <img
          src={currentProduct.image}
          alt={currentProduct.name}
          className="w-full h-full object-cover"
        />
        {/* Navigation Buttons */}
        <button
          onClick={previousProduct}
          className="absolute left-2 top-1/2 -translate-y-1/2 p-1 rounded-full bg-white/80 shadow-md"
        >
          ←
        </button>
        <button
          onClick={nextProduct}
          className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-full bg-white/80 shadow-md"
        >
          →
        </button>
        {/* Wishlist Button */}
        <button
          onClick={() => {
            setWishlistItems(prev => {
              const newWishlist = new Set(prev);
              if (newWishlist.has(currentProduct.id)) {
                newWishlist.delete(currentProduct.id);
              } else {
                newWishlist.add(currentProduct.id);
              }
              return newWishlist;
            });
          }}
          className="absolute top-3 right-3 p-2 rounded-full bg-white shadow-md"
        >
          <svg
            className={`w-5 h-5 ${isCurrentProductWishlisted ? 'text-red-500' : 'text-gray-400'}`}
            fill={isCurrentProductWishlisted ? 'currentColor' : 'none'}
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
            />
          </svg>
        </button>
      </div>

      {/* Product Details */}
      <div className="p-4">
        <div className="flex justify-between items-start mb-2">
          <div>
            <h2 className="text-lg font-semibold text-gray-800">{currentProduct.name}</h2>
            <p className="text-sm text-gray-500">{currentProduct.collection}</p>
          </div>
          <div className="text-right">
            <p className="text-lg font-bold text-gray-800">{formatPrice(currentProduct.price)}</p>
            <p className="text-xs text-green-600">{currentProduct.shipping}</p>
          </div>
        </div>

        {/* Rating */}
        <div className="flex items-center mb-4">
          <div className="flex text-yellow-400">
            {generateStars(currentProduct.rating).split('').map((star, index) => (
              <span key={index}>{star}</span>
            ))}
          </div>
          <span className="text-xs text-gray-500 ml-2">
            ({formatReviews(currentProduct.reviews)} reviews)
          </span>
        </div>

        {/* Additional Details */}
        <div className="flex justify-between text-xs text-gray-500 mb-4">
          <span>Brand: {currentProduct.brand}</span>
          <span>Color: {currentProduct.color}</span>
        </div>

        {/* Add to Cart Button */}
        <button 
          onClick={() => currentProduct.availability && toggleCart(currentProduct.id)}
          className={`w-full py-2 rounded-lg transition-all duration-200 text-sm font-medium ${
            !currentProduct.availability 
              ? 'bg-gray-200 text-gray-500 cursor-not-allowed'
              : isCurrentProductInCart
              ? 'bg-gray-50 text-gray-700 hover:bg-gray-100 border border-gray-200'
              : 'bg-blue-600 hover:bg-blue-700 text-white'
          }`}
          disabled={!currentProduct.availability}
        >
          {!currentProduct.availability 
            ? 'Out of Stock' 
            : isCurrentProductInCart 
            ? '✓ Added to Cart' 
            : 'Add to Cart'}
        </button>
      </div>
    </div>
  );
};

export default ProductCard;

Core Structure and Layout

This card consists of a fixed-dimension container that holds both the product image and the details section. The container is designed with specific width and height constraints to maintain uniformity across different product displays. Additionally, it incorporates rounded corners and subtle shadows to enhance depth and provide a polished look.

The layout follows a widely adopted e-commerce design pattern where the image occupies the upper section of the card, with product information positioned below. The relative utility on the image container provides a positioning context for overlay elements, while overflow-hidden ensures that all content remains within the rounded boundaries of the card.

<div className="w-[365px] h-[400px] bg-white rounded-xl shadow-lg overflow-hidden">
  <div className="relative h-48 bg-gray-100">
    <img className="w-full h-full object-cover" />
  </div>
  <div className="p-4">
    {/* Product content */}
  </div>
</div>

Image and Overlay Elements

The image section plays a crucial role in the card’s visual appeal and interactivity. It not only displays the product but also serves as a backdrop for overlay elements such as wishlist buttons and navigation controls.

Here, the bg-white/80 utility creates a subtle, semi-transparent background for overlay elements, ensuring they remain visible without overwhelming the product image. Using absolute positioning, elements like the wishlist button and navigation controls are precisely placed, maintaining a clean and structured layout. Additionally, top-1/2 -translate-y-1/2 ensures perfect vertical centering for navigation buttons, enhancing both usability and visual balance.

<div className="relative h-48">
  <button className="absolute top-3 right-3 p-2 rounded-full bg-white/80 shadow-md hover:bg-white">
    {/* Wishlist Icon */}
  </button>
  <button className="absolute left-2 top-1/2 -translate-y-1/2 p-1 rounded-full bg-white/80">
    {/* Navigation Arrow */}
  </button>
</div>

Product Information

The product information section needs clear typography and structured spacing to establish a logical hierarchy. We have used Tailwind’s flexbox utilities to organize the layout and separate essential details such as product name, collection, price, and shipping information.

The font hierarchy is carefully maintained using text-lg font-semibold for product names, while supporting details such as the collection name and shipping information use smaller font sizes for a balanced presentation. Additionally, the pricing details are right-aligned, improving readability and ensuring a structured layout.

<div className="flex justify-between items-start mb-2">
  <div>
    <h2 className="text-lg font-semibold text-gray-800">{name}</h2>
    <p className="text-sm text-gray-500">{collection}</p>
  </div>
  <div className="text-right">
    <p className="text-lg font-bold text-gray-800">{price}</p>
    <p className="text-xs text-green-600">{shipping}</p>
  </div>
</div>

Interactive States

Interactivity is a critical component of a product card, especially for action-driven elements like the "Add to Cart" button. We have dynamically applied utility classes based on the button’s state. The button needs to visually communicate different interaction states, ensuring users receive clear feedback.

In its default state, the button appears as a solid blue element, making it stand out as the primary call to action. When an item is added to the cart, the button adopts a subdued gray appearance, differentiating it from its default state while maintaining accessibility. If the item is unavailable, the button is styled with bg-gray-200 text-gray-500 cursor-not-allowed, ensuring users immediately recognize its inactive status. To create a smooth and visually appealing interaction, the transition-all duration-200 utility is used, allowing seamless state changes without abrupt shifts in appearance.

<button 
  className={`
    w-full py-2 rounded-lg transition-all duration-200 text-sm font-medium
    ${!availability 
      ? 'bg-gray-200 text-gray-500 cursor-not-allowed'
      : isInCart
      ? 'bg-gray-50 text-gray-700 hover:bg-gray-100 border border-gray-200'
      : 'bg-blue-600 hover:bg-blue-700 text-white'
    }
  `}
>
  {buttonText}
</button>

Project Summary

This product card is designed for consistency, readability, and scalability using Tailwind CSS. The layout maintains fixed dimensions, rounded corners, and shadows for depth, while relative positioning enables overlay elements like wishlist buttons. The overflow-hidden utility ensures content stays within rounded boundaries.

Typography follows a clear hierarchy, with right-aligned pricing for distinction and color utilities enhancing contrast. The "Add to Cart" button dynamically adjusts states using conditional classes, providing smooth transitions and clear feedback.

By leveraging Tailwind’s utility-first approach, this component remains flexible, reusable, and easy to maintain, ensuring consistency across the e-commerce interface.

Custom Fonts

In Tailwind CSS v4, custom fonts can be added using @theme, @font-face, or @import. These directives provide flexibility in defining and using custom fonts in a Tailwind-based project without modifying the configuration file.

Use `@theme` directive

Tailwind v4 introduces @theme, which allows you to use custom fonts directly within CSS without modifying the Tailwind configuration file. This method simplifies font customization and ensures maintainability by letting developers manage font families within their stylesheets rather than relying on JavaScript-based configurations.

Another key advantage of using @theme is improved performance. Since font definitions are handled within the CSS layer, browsers can render pages faster, reducing the likelihood of content reflows and layout shifts. This is especially important for applications with dynamic content, ensuring that text remains visually stable as pages load.

Additionally, using custom fonts in conjunction with Tailwind’s responsive variants allow for a more flexible approach to font scaling. You can easily adapt font sizes based on screen sizes while maintaining readability, ensuring a seamless UX across devices. This is especially useful in applications that require precise typography control, such as editorial platforms, documentation sites, and e-commerce stores.

@theme {
  font-family: {
    sans: 'Inter, sans-serif',
    heading: 'Poppins, sans-serif',
  };
}

By using @theme, you can reference the fonts throughout your Tailwind project using utility classes like:

<h1 className="font-heading text-4xl font-bold">Welcome to Tailwind</h1>
<p className="font-sans text-lg">This is a paragraph with a custom font.</p>

Use `@font-face`

For full control over font loading, use @font-face. This allows you to define and load custom fonts stored locally or hosted externally. Using @font-face gives complete flexibility over how fonts are handled, ensuring they are optimized for performance and accessibility. Unlike external font services, self-hosted fonts offer greater control over font display settings, load prioritization, and caching strategies.

Another major benefit of using @font-face is better site performance and reduced dependency on third-party services. While using Google Fonts or similar services can be convenient, they introduce external network requests that may impact load speeds. By self-hosting fonts and defining them with @font-face, you can reduce these dependencies and ensure fonts load as quickly as possible without delays caused by external requests.

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Use `@import` for Google Fonts

Google Fonts provides a convenient way to integrate custom typography into Tailwind CSS projects without modifying configuration files. By using @import, you can include external fonts directly in the stylesheets, making font management simple and scalable.

To include a Google Font, use @import at the beginning of your CSS file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

@theme {
  font-family: {
    sans: 'Inter, sans-serif',
    heading: 'Poppins, sans-serif',
  };
}

Once the font is imported, add it to your theme. Now, you can use the defined font in your markup via Tailwind utilities:

<h1 className="font-heading text-4xl font-bold">Tailwind with Google Fonts</h1>
<p className="font-sans text-lg">Using an imported font from Google Fonts.</p>

Custom Colors

Use @theme directive

Tailwind CSS v4 supports @theme directive to define custom colors directly in the CSS instead of modifying the Tailwind configuration file. This method provides a more flexible and maintainable approach to defining project-specific color schemes without requiring additional JavaScript-based processing. With @theme, you can create a centralized color system that can be easily updated and reused across different components and pages.

Another significant advantage of using @theme for color customization is the ability to extend Tailwind’s built-in color utilities. Rather than being limited to predefined values, you can define brand-specific hues, tints, and shades. This method provides better control over UI consistency while reducing the reliance on arbitrary hex codes spread throughout the codebase.

To define custom colors in your CSS file:

@theme {
  colors: {
    primary: #1E3A8A;
    secondary: #9333EA;
    accent: #FACC15;
  };
}

These colors can then be applied using the bg-*, text-*, and border-* utilities:

<div className="bg-primary text-white p-4 rounded-lg">Primary Background</div>
<p className="text-secondary font-bold">This is a secondary color.</p>

Tailwind Development Tools

Tailwind IntelliSense

Tailwind IntelliSense is a VS Code extension for Tailwind CSS. It enhances the developer experience by providing real-time auto-completion for utility classes, making it easier to find and apply the right styles. Additionally, IntelliSense offers syntax highlighting, hover previews, and class validation, ensuring that you use valid Tailwind utilities while coding.

It helps to avoid typos and redundant classes by relying on the extension’s smart suggestions, leading to a more optimized and structured approach to styling. Furthermore, when working in large projects, IntelliSense reduces the time spent searching for the correct class names, making development more seamless. With Tailwind’s extensive class set, having IntelliSense ensures you don’t have to memorize every class, and focus on building UI components efficiently.

Tailwind Prettier Plugin

Tailwind Prettier Plugin is designed to enforce consistent formatting of Tailwind classes, ensuring that utility classes follow an optimized order. This plugin is particularly useful in large-scale projects where maintaining class structure can become challenging. Installing the Prettier plugin alongside Tailwind helps keep codebases tidy, standardized, and easier to manage, allowing teams to work more efficiently across shared components.

One of the major advantages of the Prettier plugin is that it reduces style inconsistency among team members, enforcing a uniform way of writing Tailwind utility classes. It ensures that no matter who writes the code, the styling order remains consistent, making debugging and collaboration much smoother. Additionally, since the plugin automatically formats Tailwind classes upon saving a file, it minimizes manual intervention, allowing developers to concentrate on building features rather than fixing messy class orders.

Component Libraries

Flowbite

Flowbite is a comprehensive UI kit built on top of Tailwind CSS. It provides a collection of pre-designed components such as buttons, modals, navigation bars, and form elements. Flowbite enables developers to build modern, responsive applications without having to create components from scratch. By using Flowbite, you can significantly reduce the time spent on building common UI elements while ensuring consistency across their applications.

Beyond saving development time, Flowbite is also highly extensible, allowing you to modify components to better fit the design systems. It provides a balance between pre-styled components and customization flexibility, making it ideal for both rapid prototyping and full-scale production applications.

Material Tailwind

Material Tailwind is a Material Design-inspired component library for Tailwind CSS. It brings Google's Material Design principles into the Tailwind ecosystem, allowing you to create polished, visually appealing interfaces while maintaining the flexibility of Tailwind’s utility-first workflow. Material Tailwind includes components like cards, inputs, buttons, and navigation bars, all adhering to Material Design specifications.

This makes it an excellent choice for projects that require a modern and structured UI experience, blending Tailwind’s speed with Material Design's aesthetic consistency. Whether building enterprise dashboards or mobile-first applications, Material Tailwind ensures that applications maintain a clean and structured design while still allowing flexibility in branding and theming.

Mobile Specific Library

NativeWind

NativeWind is a React Native adaptation of Tailwind CSS, enabling you to use Tailwind’s utility classes within native applications. It allows developers to use Tailwind utility classes to style components instead of traditional StyleSheet.create().

During the build process, it converts Tailwind CSS styles into StyleSheet.create objects and processes the conditional styles like hover, focus, and active states. At runtime, it applies these styles to components. This allows you to use Tailwind features like variants, custom values, etc. while keeping the performance optimized for native apps.

Beyond simplifying mobile styling, NativeWind also enhances code reusability and consistency between web and mobile applications. Since you can share styling logic between React and React Native projects, maintaining a uniform design system becomes easier.

import { useState } from "react";
import { Pressable, Text } from "react-native";

export default function App() {
  const [selected, setSelected] = useState(false);

  return (
    <Pressable
      className={`p-4 rounded-lg ${
        selected ? "bg-blue-500" : "bg-gray-300"
      }`}
      onPress={() => setSelected(!selected)}
    >
      <Text className="text-white font-bold">
        {selected ? "Selected" : "Press Me"}
      </Text>
    </Pressable>
  );
}

Tailwind Utility-Specific Guides

Layout

The Layout category in Tailwind CSS includes utilities for defining box dimensions, flow, and stacking behavior.

Flexbox & Grid

The Flexbox and Grid utilities in Tailwind CSS help you build responsive and structured layouts.

Spacing

The Spacing utilities in Tailwind CSS provide essential control over element padding and margins.

Sizing

The Sizing utilities in Tailwind CSS provide precise control over the width and height of elements, ensuring flexibility in responsive layouts.

Typography

The Typography utilities in Tailwind CSS provide control over text presentation, ensuring readability, accessibility, and aesthetic appeal across different screen sizes.

Backgrounds

The Background utilities in Tailwind CSS provide powerful styling options for creating visually engaging UI elements.

Borders

Border utilities in Tailwind CSS provide precise control over the appearance of element borders, outlines, and decorative rings.

Effects

The Effect utilities in Tailwind CSS enhance visual depth, transparency, and blending to create engaging UI elements.

Filters

The Filter utilities in Tailwind CSS provide powerful ways to manipulate the appearance of elements by applying visual effects such as blurring, brightness adjustments, color transformations, and drop shadows.

Tables

The Table utilities in Tailwind CSS are used to structure and style tables effectively.

Transitions & Animation

The Transition Timing Functions in CSS allow developers to define how an animation progresses over time.

Transforms

The Transform utilities in Tailwind CSS enable element modifications, such as scaling, rotating, translating, and skewing.

Interactivity

Interactivity utilities in Tailwind CSS enable fine control over user interactions, enhancing accessibility and usability across different devices.

SVG

The SVG utilities control the appearance of SVG elements, ensuring consistency and ease of customization.

Accessibility

The Accessibility utilities in Tailwind CSS enhance usability by ensuring compatibility with assistive technologies like screen readers and high-contrast modes.

Introduction Browser Support

Tailwind CSS Tutorial

Get Started with Tailwind CSS

Prerequisites

Install Tailwind with CDN

Install Tailwind with CLI

Other Installation Methods

Framework-Specific Installation

Next.js

Nuxt

Angular

Build an Ecommerce Card UI

Core Structure and Layout

Image and Overlay Elements

Product Information

Interactive States

Project Summary

Custom Fonts

Use @theme directive

Use @font-face

Use @import for Google Fonts

Custom Colors

Use @theme directive

Tailwind Development Tools

Tailwind IntelliSense

Tailwind Prettier Plugin

Component Libraries

Flowbite

Material Tailwind

Mobile Specific Library

NativeWind

Tailwind Utility-Specific Guides

Use `@theme` directive

Use `@font-face`

Use `@import` for Google Fonts