Skip to content

Latest commit

 

History

History
114 lines (92 loc) · 2.74 KB

index.md

File metadata and controls

114 lines (92 loc) · 2.74 KB

Tailwind CSS

Introduction

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.

Basic Syntax

<!-- Basic Tailwind CSS example -->
<div class="bg-blue-500 text-white font-bold p-4">
    Hello, Tailwind CSS!
</div>

Common Use Cases

  • Rapid prototyping
  • Building responsive designs
  • Creating custom UI components
  • Utility-based styling

Advanced Features

  • Responsive Design: Tailwind provides utilities for responsive design using breakpoints.
  • State Variants: Utilities for hover, focus, and other states.
  • Dark Mode: Built-in support for dark mode.
  • Customization: Easily customize the design system using the tailwind.config.js file.

Code Snippets

Responsive Design

<div class="bg-blue-500 text-white p-4 md:bg-green-500 lg:bg-red-500">
    Responsive Background Color
</div>

State Variants

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Hover me
</button>

Dark Mode

<div class="bg-white dark:bg-gray-800 text-black dark:text-white p-4">
    Dark Mode Example
</div>

Customization

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1c92d2',
      },
    },
  },
  variants: {},
  plugins: [],
}

Regular CSS3 Concepts

Basic Syntax

/* Basic CSS example */
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
}

Flexbox

<div class="flex justify-center items-center h-screen">
    <div class="bg-blue-500 text-white p-4">
        Centered Content
    </div>
</div>

Grid

<div class="grid grid-cols-3 gap-4">
    <div class="bg-blue-500 p-4">1</div>
    <div class="bg-green-500 p-4">2</div>
    <div class="bg-red-500 p-4">3</div>
</div>

Tips & Best Practices

  • Utility-First Approach: Embrace the utility-first approach to build custom designs quickly.
  • Responsive Design: Use Tailwind's responsive utilities to create designs that work on all devices.
  • Customization: Customize Tailwind to fit your design system using the configuration file.
  • Performance: Use PurgeCSS to remove unused CSS and keep your stylesheets small.

External Resources