Tailwind

Posted on In

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML. It allows for rapid UI development by composing utilities directly in your markup.

Installation

To install Tailwind CSS, see
Tailwind CSS installation guide. It supports various build tools like PostCSS, Webpack, and Vite.

If you are using VS Code, you can install Tailwind CSS IntelliSense extension for better autocompletion and syntax highlighting.

Add an @import to your CSS file that imports Tailwind CSS.

1
@import "tailwindcss";

Styling with utility classes

After the setup is completed. start using Tailwind’s utility classes to style your content

Button example:

1
2
<button type="button"
  class="px-4 py-2 rounded-lg cursor-pointer text-white text-sm tracking-wider font-medium border border-current outline-none bg-blue-700 hover:bg-blue-800 active:bg-blue-700">Blue Button</button>

Input example:

1
2
3
4
5
<input
  type="text"
  placeholder="Type something here..."
  class="w-full max-w-xs px-4 py-2 text-lg border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition placeholder-gray-500"
/>

Background Color

To set the background color of an element, use the bg-{color} utility class. For example, to set a blue background:

1
2
3
<div class="p-4 bg-blue-500 text-white">
  This div has a blue background.
</div>

Text Color

To set the text color, use the text-{color} utility class. For example, to set white text:

1
2
3
<div class="p-4 bg-amber-300 text-white">
    This div has white text on a gray background.
</div>

Margin and Padding

To add margin or padding, use the m-{size} and p-{size} utility classes. For example:

1
2
3
<div class="m-4 p-6 bg-gray-200">
  This div has a margin of 4 and padding of 6.
</div>

With direction utilities, you can specify margin or padding for specific sides:

1
2
3
<div class="ml-4 mt-4 px-5 py-2 bg-gray-200 rounded-md">
  This div has a left margin of 4, top margin of 2, left and right padding of 5, and top and bottom padding of 2.
</div>

Border

To add borders, use the border utility class along with color and width utilities. For example:

1
2
3
<div class="border border-gray-300 p-4">
  This div has a gray border.
</div>

Width and Height

To set the width and height of an element, use the w-{size} and h-{size} utility classes. For example:

1
2
3
4
5
6
7
8
9
<div class="w-64 h-32 bg-green-500">
  This div has a width of 64 and height of 32.
</div>

You can also set min-width and min-height using `min-w-{size}` and `min-h-{size}`:
```html
<div class="min-w-64 min-h-32 bg-red-500">
  This div has a minimum width of 64 and minimum height of 32.
</div>

Font Size and Weight

To set the font size, use the text-{size} utility class. For example:

1
2
3
<div class="text-lg font-bold text-gray-800">
  This text is large and bold.
</div>

To set the font weight, use the font-{weight} utility class. For example:

1
2
3
<div class="text-base font-semibold">
  This text is base size and semi-bold.
</div>

Font Family

To set the font family, use the font-{family} utility class. For example:

1
2
3
<div class="font-sans text-gray-700">
  This text uses the sans-serif font family.
</div>

Example values are font-sans, font-serif, and font-mono. You can also use custom fonts by adding them to your Tailwind configuration.

Flexbox

To create a flex container, use the flex utility class. You can also use flex-row or flex-col to set the direction of the flex items. For example:

1
2
3
4
5
<div class="flex flex-row space-x-4">
  <div class="flex-1 bg-blue-500 p-4">Item 1</div>
  <div class="flex-1 bg-green-500 p-4">Item 2</div>
  <div class="flex-1 bg-red-500 p-4">Item 3</div>
</div>

ALign items along the main axis using justify-{content} utility class:

1
2
3
4
5
<div class="flex justify-between items-center p-4 bg-gray-200">
  <div class="text-lg">Left</div>
  <div class="text-lg">Center</div>
  <div class="text-lg">Right</div>
</div>

Align items along the cross axis using items-{alignment} utility class:

1
2
3
<div class="flex items-center h-32 bg-gray-300">
  <div class="bg-blue-500 p-4">Centered Item</div>
</div>

Grid

To create a grid layout, use the grid utility class. You can specify the number of columns using grid-cols-{n}. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500 p-4">Column 1</div>
  <div class="bg-green-500 p-4">Column 2</div>
  <div class="bg-red-500 p-4">Column 3</div>
</div>


# Responsive Design
Tailwind CSS makes it easy to create [responsive designs](https://tailwindcss.com/docs/responsive-design) using its mobile-first approach. You can apply different styles at different breakpoints by prefixing utility classes with the breakpoint name.
For example, to set a different background color on larger screens:
```html
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
  <div class="bg-blue-500 p-4">Column 1</div>
  <div class="bg-green-500 p-4">Column 2</div>
  <div class="bg-red-500 p-4">Column 3</div>
</div>

Dark Mode

By default, Tailwind CSS uses prefers-color-scheme to detect dark mode. You can use a css selector instead of prefers-color-scheme.

override the dark variant to use your custom selector

1
@custom-variant dark (&:where(.dark, .dark *));

To enable dark mode, add dark class to the root element of your HTML. This will apply dark mode styles when the class is present.

1
document.documentElement.classList.add('dark');

you can choose to enable or disable dark mode based on user preference or a local storage setting.

Then, you can use the dark: prefix to apply styles in dark mode:

1
2
3
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-4">
  This div changes background and text color in dark mode.
</div>

References