Skip to main content

Tailwind Concepts and Common Classes

Some Concepts​

Spacing​

These rules control the padding and margin of elements. Examples include p-4 (adds padding on all sides of an element) and my-6 (adds margin on the top and bottom of an element).

Colors​

These rules control the color of elements. Examples include text-blue-500 (sets the text color to blue) and bg-yellow-400 (sets the background color to yellow).

Typography​

These rules control the font size, font weight, and other typography-related styles of elements. Examples include text-xl (increases the font size) and font-bold (increases the font weight).

Layout​

These rules control the layout and position of elements. Examples include flex (sets an element to display as a flex container) and absolute (sets an element to be positioned absolutely).

Sizing​

These rules control the size of elements. Examples include w-full (sets the width of an element to 100%) and h-24 (sets the height of an element to 24 units).

Other​

There are many other types of rules available in Tailwind CSS, such as rules for controlling borders, rounded corners, transitions, and more

Important classes​

  1. w-* These classes control the width of an element. For example, w-1/2 would make the element take up half of the available width.

  2. h-*: These classes control the height of an element. For example, h-12 would make the element 12 units tall.

  3. text-*: These classes control the text styling of an element. For example, text-xl would make the text larger than the default size.

  4. font-*: These classes control the font family of an element. For example, font-sans would apply a sans-serif font to the element.

  5. bg-*: These classes control the background color of an element. For example, bg-blue-500 would apply a blue color to the element's background.

  6. rounded-*: These classes control the border radius of an element. For example, rounded-full would make the element a circle.

  7. shadow-*: These classes control the shadow effect of an element. For example, shadow-md would apply a medium shadow to the element.

  8. text-center: This class aligns the text in an element to be centered.

  9. block px-4 py-2 rounded-lg bg-gray-400 hover:bg-gray-500

  10. This class applies multiple styles to an element at once. It creates a block-level element with padding on the left and right sides, padding on the top and bottom, a large border radius, and a gray background color. When the element is hovered over, the background color changes to a slightly darker shade of gray.

  11. flex items-center justify-between This class applies the flex layout to an element and aligns the child elements within it to be centered vertically and horizontally justified.