Learn Tailwind CSS in One Day: Basic to Advanced

Introduction

Tailwind CSS is different from traditional CSS frameworks. It doesn't come with predefined components. Instead, it provides low-level utility classes. These classes let you build custom designs without writing CSS. Tailwind CSS is very flexible and fast.

Getting Started

Installation

To use Tailwind CSS, you need to install it. There are several ways to do this. You can use npm, Yarn, or a CDN.

Using npm

First, make sure you have Node.js and npm installed.
Open your terminal.
Run the following command:

npm install tailwindcss

Next, create a configuration file:

npx tailwindcss init

Using Yarn

Open your terminal.
Run the following command:

yarn add tailwindcss

Create a configuration file:

npx tailwindcss init

Using CDN

If you prefer not to use npm or Yarn, you can use a CDN. Add the following link to your HTML file:

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

Setting Up Your Project

Create a new HTML file.
Link your Tailwind CSS file.

Your HTML file should look like this:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My Tailwind CSS Project</title>

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

</head>

<body>

    <h1 class="text-4xl font-bold">Hello, Tailwind CSS!</h1>

</body>

</html>

Basic Concepts

Utility-First Classes

Tailwind CSS uses utility-first classes. These are single-purpose classes. They do one thing well.

For example, to change text color, use the text-color class:

<p class="text-blue-500">This is blue text.</p>

To add padding, use the p- class:

<div class="p-4">This has padding.</div>

Responsive Design

Tailwind CSS makes responsive design easy. It has built-in responsive utilities.

To make text larger on larger screens, use the md: prefix:

<p class="text-sm md:text-lg">Responsive text.</p>

Hover States

You can style elements on hover using the hover: prefix:

<button class="bg-blue-500 hover:bg-blue-700">Hover me!</button>

Dark Mode

Tailwind CSS supports dark mode. Add the dark: prefix to apply styles in dark mode:

<div class="bg-white dark:bg-gray-800">Dark mode support.</div>

Intermediate Concepts

Customizing Tailwind CSS

You can customize Tailwind CSS using the configuration file. Open tailwind.config.js. Here, you can extend the default configuration.

Extending Colors

To add custom colors:

module.exports = {

  theme: {

    extend: {

      colors: {

        'custom-blue': '#1c92d2',

      },

    },

  },

}

Use your custom color like this:

<p class="text-custom-blue">Custom blue text.</p>

Adding Custom Fonts

To add custom fonts:

Add the font to your CSS file:

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

Extend the font family in tailwind.config.js:

module.exports = {

  theme: {

    extend: {

      fontFamily: {

        'roboto': ['Roboto', 'sans-serif'],

      },

    },

  },

}

Use your custom font:

<p class="font-roboto">This is Roboto font.</p>

Plugins

Tailwind CSS has a rich ecosystem of plugins. Plugins add extra functionality.

Using Plugins

Install the plugin via npm or Yarn:

npm install @tailwindcss/forms

Add the plugin to your configuration file:

module.exports = {

  plugins: [

    require('@tailwindcss/forms'),

  ],

}

Use the plugin's utilities in your HTML:

<input type="text" class="form-input">

Purging Unused CSS

To optimize your production build, purge unused CSS. Add the purge option to your configuration file:

module.exports = {

  purge: ['./src/**/*.html', './src/**/*.js'],

  // other options.
  ..

}

Advanced Concepts

Creating Components

Tailwind CSS allows you to create reusable components.

Example: Button

Create a button.css file:

@layer components {

  .btn {

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

  }

  .btn-primary {

    @apply bg-blue-700;

  }

}

Import the file in your main CSS file:

@import 'button.css';

Use the button component in your HTML:

<button class="btn">Button</button>

<button class="btn btn-primary">Primary Button</button>

Custom Directives

You can create custom directives using Tailwind CSS.

Example: Card Directive

Create a card.css file:

@layer components {

  .card {

    @apply bg-white shadow-lg rounded-lg p-6;

  }

  .card-header {

    @apply text-2xl font-bold;

  }

  .card-body {

    @apply mt-4;

  }

}

Import the file in your main CSS file:

@import 'card.css';

Use the card directive in your HTML:

<div class="card">

  <div class="card-header">Card Header</div>

  <div class="card-body">Card Body</div>

</div>

JIT Mode

Tailwind CSS has a Just-In-Time (JIT) mode. It generates styles on-demand.

Enabling JIT Mode

To enable JIT mode, add the mode option to your configuration file:

module.exports = {

  mode: 'jit',

  purge: ['./src/**/*.html', './src/**/*.js'],

  // other options...

}

Advanced Customization

Tailwind CSS allows for advanced customization.

Custom Variants

To add custom variants, use the addVariant function:

module.exports = {

  plugins: [

    function({ addVariant }) {

      addVariant('child', '> *')

    },

  ],

}

Use your custom variant:

<div class="child:text-blue-500">

  <p>Child text is blue.</p>

</div>

FAQ

What is Tailwind CSS?: Tailwind CSS is a utility-first CSS framework. It helps you build custom designs without writing CSS.
How is Tailwind CSS different from other frameworks?: Tailwind CSS provides low-level utility classes. Other frameworks provide predefined components.
Can I customize Tailwind CSS?: Yes, Tailwind CSS is highly customizable. You can extend it using the configuration file.
Is Tailwind CSS good for responsive design?: Yes, Tailwind CSS has built-in responsive utilities. They make it easy to create responsive designs.
How do I purge unused CSS?: Add the purge option to your configuration file. This removes unused CSS in production.

Conclusion

Tailwind CSS is a powerful framework. It offers flexibility and speed. You can go from basic to advanced in one day. Start by installing Tailwind CSS. Learn the utility-first classes. Move on to responsive design and hover states. Customize Tailwind CSS using the configuration file. Use plugins to add extra functionality. Purge unused CSS to optimize your build. Create reusable components. Explore advanced customization options. With practice, you'll become proficient in Tailwind CSS.