Language: EN
LuisLlamas Logo
Search
⏲️ ~ 8 minutes Beginner
cheatsheet-tailwind-css

Tailwind CSS CheatSheet

Tailwind CSS is a CSS framework that makes it easy to design interfaces using utility classes.

Installation and Setup

Install Tailwind CSS

To get started with Tailwind CSS, you need to install it via npm.

npm install tailwindcss

npx tailwindcss init

Generate the Configuration File

npx tailwindcss init

Configure the tailwind.config.js File

The tailwind.config.js file allows you to customize the framework to your needs, such as colors, fonts, and extensions.

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

Visual Studio Code

Install the Tailwind CSS IntelliSense extension for autocompletion and documentation.

Tailwind CLI

Use the CLI to compile CSS, check classes, and manage configurations. It’s useful for rapid development and simplifying workflow.

Configuration

Basic Configuration

Modify the tailwind.config.js file to customize your setup:

module.exports = {
  content: [
    "./src/**/*.{html,js}", // Specify the paths to your files
  ],
  theme: {
    extend: {
      colors: {
        'custom-color': '#123456', // Add custom color
      },
    },
  },
  plugins: [],
}

Import Tailwind into Your CSS

Create a CSS file and add the Tailwind directives:

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

Build Final CSS

To compile your final CSS, you can use the following command:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Layout

Flexbox

Classes to implement flexbox.

<div class="flex justify-center items-center">
  <div class="flex-1">Item 1</div>
  <div class="flex-1">Item 2</div>
</div>
  • flex: Activates flexbox on a container.
  • justify-center: Centers the content horizontally.
  • items-center: Centers the content vertically.

Grid

To create a layout based on CSS Grid.

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Element spanning two columns</div>
  <div>2</div>
  <div>3</div>
</div>
  • grid-cols-3: Defines a grid with 3 columns.
  • gap-4: Applies a space of 1rem between elements.

Spacing

Tailwind uses a spacing system based on a scale. The classes for margin and padding follow this convention.

Margin

<div class="m-4">Margin on all sides</div>

<div class="mt-4">Top margin</div>

<div class="my-4">Vertical margin</div>
<div class="mx-4">Horizontal margin</div>

Padding

<div class="p-4">Padding on all sides</div>

<div class="pt-4">Top padding</div>

<div class="py-4">Vertical padding</div>
<div class="px-4">Horizontal padding</div>

Size and Dimensions

Width and Height

Control the size of elements with classes for width and height.

<div class="w-1/2">Width 50%</div>
<div class="h-64">Height of 16rem</div>
<div class="h-screen">Height of 100% of the viewport</div>

Max Width

To limit the maximum size of a container.

  • max-w-sm: Limits the maximum width to 24rem.
  • max-w-full: Maximum width of 100%.

Positioning

Absolute and Relative Positioning

Classes for positioning elements.

<div class="relative">
  <div class="absolute top-0 left-0">Positioned element</div>
</div>
  • relative: The container becomes a reference context.
  • absolute: Positions an element absolutely.
  • top-0, left-0: Moves the element to the top left corner.

Z-Index

<div class="relative z-10">Element with z-index 10</div>

Colors and Background

Basic and Custom Text

<p class="text-gray-800">Dark text</p>
<p class="text-red-500">Red text</p>
  • text-white: White text.
  • text-gray-800: Dark gray text.
  • text-red-500: Medium intensity red text.

Background Colors

<div class="bg-blue-500">Blue background</div>
  • bg-blue-500: Medium intensity blue background.

Gradients

To apply background gradients.

<div class="bg-gradient-to-r from-green-400 via-blue-500 to-purple-600">
  Color gradient
</div>
  • bg-gradient-to-r: Gradient from left to right.
  • from-green-400, via-blue-500, to-purple-600: Definition of gradient colors.

Custom Colors

If you have defined colors in your configuration, you can use them like this:

<div class="bg-custom-color">Background with custom color</div>

Typography

Text Sizes

Control the text size with predefined classes.

<p class="text-sm">Small text</p>
<p class="text-lg">Large text</p>
<p class="text-xl">Extra large text</p>
<p class="text-2xl">Large text</p>

Text Alignment

To align text in different ways.

  • text-center: Centers the text.
  • text-right: Aligns the text to the right.
  • text-justify: Justifies the text.

Font Weight

Control the thickness of the text.

<p class="font-bold">Bold text</p>
<p class="font-light">Light text</p>

Text Styles

<p class="italic">Italic text</p>
<p class="underline">Underlined text</p>

Borders and Shadows

Borders

Control the thickness and style of an element’s border.

<div class="border border-gray-300 rounded-lg p-4">
  Box with border and rounded corners
</div>
  • border: Applies a standard border.
  • border-gray-300: Gray border.

Rounded Borders

<div class="rounded">Rounded border</div>
<div class="rounded-lg">Very rounded border</div>
  • rounded-lg: Large rounded borders.

Border Styles

<div class="border-dashed">Dashed border</div>
<div class="border-double">Double border</div>

Shadow

Adds shadows to elements.

<div class="shadow-lg">
  Box with shadow
</div>
  • shadow-xl: Intense shadow.
  • shadow-lg: Large shadow.
  • shadow-sm: Small shadow.

Pseudo-classes

Hover

Apply styles when a user hovers over the element.

<button class="bg-blue-500 hover:bg-blue-700 text-white">Button</button>
  • hover:bg-blue-700: Changes the background color on hover.

Focus State

<input type="text" class="border border-gray-300 focus:border-blue-500 rounded p-2">

Active State

<button class="bg-blue-500 active:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Active Button
</button>

Responsive Classes

Media Queries

Tailwind provides utility classes that can be applied only on certain screens. Prefixes like sm:, md:, lg:, xl: are used.

  • sm:: For small screens (min-width: 640px).
  • md:: For medium screens (min-width: 768px).
  • lg:: For large screens (min-width: 1024px).
<div class="text-sm md:text-lg lg:text-2xl">
  Text with adaptive size
</div>

Animations

Transitions

To apply transitions between style states.

<button class="bg-red-500 hover:bg-red-700 transition duration-500">
  Button with transition
</button>
  • transition: Applies a smooth transition between state changes.
  • duration-500: Duration of the transition (500ms).

Transformations

To rotate, scale, and modify elements.

<div class="transform hover:scale-110">
  Scale on hover
</div>
  • transform: Enables transformations.
  • hover:scale-110: Scales to 110% on hover.

Custom Directives

@Apply

@apply allows you to apply multiple classes to a single element within a CSS file.

/* styles.css */
.btn {
  @apply px-4 py-2 bg-blue-500 text-white font-bold rounded;
}

@variants

@variants to generate variants of CSS classes (for example, for different states like hover or focus).

/* styles.css */
@variants hover {
  .btn {
    @apply bg-blue-700;
  }
}

Common Components

Basic Button

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Button with Hover Effects

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

Basic Card

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="imagen.jpg" alt="Image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Card Title</div>
    <p class="text-gray-700 text-base">Card description.</p>
  </div>
</div>

Forms

Text Input

<input type="text" class="border border-gray-300 rounded p-2 w-full" placeholder="Enter text">

Submit Button

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

Advanced Customization

Creating Custom Themes

You can create different themes by changing the configuration in tailwind.config.js. For example, you can define different color palettes or fonts for various contexts.

Using Plugins

Tailwind has an ecosystem of plugins. You can install additional plugins to extend functionality. For example, the @tailwindcss/forms plugin for form styles:

npm install @tailwindcss/forms

And add it to your configuration:

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

On this page