Skip to main content

2. Use Arbitrary Variants

You can apply utilities to specific selectors or conditions using arbitrary variants.

Example:

Explanation:

  • [&>p] targets child <p> elements
  • Useful for styling nested elements without extra CSS

3. Group & Peer Variants

Use group or peer classes to control styles based on parent or sibling state.

Group Example​

Peer Example​

4. Use CSS Variables with Tailwind

Combine CSS variables with Tailwind utilities for dynamic styling.

Benefits:

  • Dynamic themes
  • Design system compatibility
  • Easier customization

5. Simplify Layouts with Flex and Grid Utilities

Tailwind provides powerful utilities for layout creation.

Example:

Or using Flexbox:

6. Use @apply for Reusable Utility Groups

You can combine utilities inside CSS using @apply.

Usage:

Benefits:

  • Cleaner markup
  • Reusable component styles

7. Customizing the Tailwind Theme

Extend Tailwind with custom values inside tailwind.config.js.

Usage:

8. Dynamic Classes in JavaScript Frameworks

When using frameworks like React or Vue, classes can be conditionally applied.

Example (React):

Benefits:

  • Dynamic UI states
  • Cleaner component logic

9. Responsive Design Shortcuts

Tailwind uses mobile-first responsive utilities.

Example:

Breakpoints:

10. Dark Mode Styling

Tailwind supports dark mode with the dark: prefix.

Example:

Configuration:

11. Use Container Utilities

Tailwind’s container utility centers and constrains layouts.

Benefits:

  • Consistent layout width
  • Responsive margins
  • Cleaner structure

12. Organize Classes for Readability

A recommended order:

  1. Layout
  2. Spacing
  3. Typography
  4. Colors
  5. Effects

Example:

This improves:

  • maintainability
  • collaboration
  • readability

13. Use Plugins to Extend Tailwind

Tailwind supports a plugin system for advanced features.

Example:

Common plugins:

  • @tailwindcss/forms
  • @tailwindcss/typography
  • @tailwindcss/aspect-ratio

Benefits:

  • Extended utilities
  • better UI defaults
  • faster development

Reference

Video Source:

https://youtu.be/PjtXCWkQb3I

You already have valid Markdown content. To convert it into a .md file, just save it with the .md extension.

Option 1 — Quick Method​

  1. Open VS Code / Notepad / any text editor.
  2. Paste the Markdown content.
  3. Save the file as:

Option 2 — Using Terminal (Mac / Linux / Git Bash)​

Then paste the Markdown content into the file.

Option 3 — Using PowerShell (Windows)​

Example File Structure​

PrefixScreen Sizesm:Small screensmd:Medium screenslg:Large screensxl:Extra large Converter to file md