Tailwind CSS Cheat Sheet

CodeChronicle
2 min readNov 30, 2023

--

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!

--

--

CodeChronicle

Exploring the digital frontier one byte at a time. Tech writer weaving tales of innovation, decoding the algorithms. 🚀✍️ #TechWordsmith #InnovationExplorer