Skip to main content
← Back to blog

Introduction to Tailwind CSS

Introduction to Tailwind CSS
Deepak Kamboj
Deepak Kamboj
Senior Software Engineer
4 min read
Frontend

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup.

Key Features:

  • Utility-First: Build custom designs without writing CSS.
  • Responsive Design: Mobile-first approach with responsive utilities.
  • Customization: Easily customize your design system with Tailwind's configuration file.
  • Performance: Tailwind removes unused CSS in production, optimizing load times.

2. Setting Up Tailwind CSS​

To get started, you need to set up Tailwind CSS in your project. You can use Tailwind CSS via CDN for quick prototyping, or install it via npm for more control.

Using CDN​

Add the following lines in the <head> of your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Tutorial</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mx-auto">
    <h1 class="text-3xl font-bold underline">Hello, Tailwind CSS!</h1>
  </div>
</body>
</html>

Using npm​

  1. Install Tailwind CSS:

    npm install -D tailwindcss
    npx tailwindcss init

  2. Configure Tailwind: tailwind.config.js:

    module.exports = {
      content: ['./src/**/*.{html,js}'],
      theme: {
        extend: {},
      },
      plugins: [],
    };

  3. Create CSS file: src/styles/tailwind.css:

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

  4. Build Tailwind: Add the following script in package.json:

    "scripts": {
      "build:css": "tailwindcss -i ./src/styles/tailwind.css -o ./dist/styles.css --watch"
    }

    Then run:

    npm run build:css

  5. Include in HTML:

    <link href="/dist/styles.css" rel="stylesheet">

3. Utility-First Fundamentals​

Tailwind's utility-first approach means you can build complex designs using low-level utility classes.

Layout​

  • Container:

    <div class="container mx-auto">
      <!-- Content here -->
    </div>

  • Flexbox:

    <div class="flex">
      <div class="flex-1">Flex 1</div>
      <div class="flex-1">Flex 2</div>
    </div>

  • Grid:

    <div class="grid grid-cols-3 gap-4">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

Spacing​

  • Margin and Padding: 
    <div class="m-4 p-4">
      Margin and Padding
    </div>

Typography​

  • Text and Font: 
    <h1 class="text-3xl font-bold">Hello, World!</h1>

Backgrounds​

  • Colors and Gradients: 
    <div class="bg-blue-500 text-white p-4">
      Background Color
    </div>
    <div class="bg-gradient-to-r from-green-400 via-blue-500 to-purple-600 p-4">
      Gradient Background
    </div>

4. Responsive Design​

Tailwind CSS makes responsive design simple with mobile-first responsive utilities.

Breakpoints​

  • Small (sm): 640px
  • Medium (md): 768px
  • Large (lg): 1024px
  • Extra Large (xl): 1280px
  • 2XL (2xl): 1536px

Usage​

<div class="text-sm md:text-lg lg:text-2xl">
  Responsive Text
</div>

This changes the text size at different screen widths.

5. Customizing Tailwind​

You can customize the default configuration to match your design system.

Colors​

tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        customColor: '#aabbcc',
      },
    },
  },
};

Fonts​

tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        custom: ['CustomFont', 'sans-serif'],
      },
    },
  },
};

6. Using Plugins​

Tailwind CSS has a rich ecosystem of plugins for additional functionality.

Example Plugin Installation​

npm install @tailwindcss/typography

Configuration​

tailwind.config.js:

module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
};

Usage​

<article class="prose">
  <h1>Title</h1>
  <p>Content with optimized typography.</p>
</article>

7. Advanced Concepts​

JIT Mode (Just-In-Time)​

JIT mode generates your styles on-demand as you author your templates.

Enable JIT mode: tailwind.config.js:

module.exports = {
  mode: 'jit',
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Purging Unused CSS​

Purging unused CSS helps in keeping your stylesheets small.

tailwind.config.js:

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

8. Best Practices​

Component Extraction​

Extract commonly used groups of classes into reusable components.

<div class="btn btn-primary">Button</div>

<style>
.btn {
  @apply px-4 py-2 rounded;
}
.btn-primary {
  @apply bg-blue-500 text-white;
}
</style>

Naming Conventions​

Use clear and consistent naming conventions for classes and components to improve readability and maintainability.

9. Conclusion​

Tailwind CSS is a powerful utility-first framework that enables you to build responsive and modern designs with ease. By mastering Tailwind's utilities, configuration, and plugins, you can significantly speed up your development workflow and maintain a clean codebase.

Tags:
MCPDistributed SystemsScalabilityMicroservices
Share:
TwitterLinkedInFacebook