Tailwind CSS Cheat Sheet

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build designs directly in your markup. It’s customizable and helps streamline the development process by offering a set of pre-defined classes for common styling tasks.

Installation

Install via npm:

npm install tailwindcss

Create Tailwind CSS configuration file:

npx tailwindcss init

Include Tailwind CSS in your project:

<!-- In your CSS file -->
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Basic Usage

Applying Classes:

<div class="text-center bg-blue-500 text-white p-4">Hello, Tailwind!</div>

Typography

Text Alignment:

• .text-left
• .text-center
• .text-right
• .text-justify

Font Weight:

• .font-thin
• .font-normal
• .font-semibold
• .font-bold
• .font-extrabold

Text Color:

• .text-gray-500
• .text-red-600
• .text-blue-700

Layout

Container:

• .container
• .mx-auto (centered)

Width and Height:

• .w-1/2
• .h-64
• .min-w-full

Padding and Margin:

• .p-4
• .m-2

Flexbox:

• .flex
• .flex-row
• .justify-between
• .items-center

Backgrounds

Background Color:

• .bg-gray-200
• .bg-indigo-700
• .bg-gradient-to-r

Background Image:

• .bg-cover
• .bg-center

Borders

Border Styles:

• .border
• .border-t
• .border-l
• .rounded

Border Color:

• .border-gray-400
• .border-red-500

Hover and Focus States

Hover Effect:

• .hover:bg-gray-300
• .hover:text-blue-600

Focus Effect:

• .focus:outline-none
• .focus:border-blue-500

Responsive Design

Responsive Classes:

• .sm: (small screens)
• .md: (medium screens)
• .lg: (large screens)
• .xl: (extra-large screens)

Responsive Visibility:

• .hidden
• .sm:block
• .lg:inline

Animations

Transition Duration:

• .transition
• .ease-in
• .duration-300

Customization

Extend Tailwind CSS:

// In tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'cyan': '#00FFFF',
      },
    },
  },
  variants: {},
  plugins: [],
}

So here our Tailwind CSS cheat sheet covers essential classes for various styling needs. For a comprehensive list and in-depth documentation, refer to the official Tailwind CSS documentation. Happy coding with Tailwind CSS!