A retrospective on using tailwindui

[reboottime]

Introduction

This article is a retrospective on using tailwind.css. It covers topics.

• Naming convention in tailwind.css
• Practices on using tailwind for styling

[reboottime]

Naming Conventions in Tailwind

A well-chosen variable name provides immediate impression on its purpose and usage in the code. Tailwind.css naming convention is a standard pattern that has been adopted in many UI systems.

1. Prefixes:

   • Responsive Prefixes:

     • sm: for small screens. 640px
     • md: for medium screens. 768px
     • lg: for large screens. 1024px
     • xl: for extra-large screens. 1280px
     • 2xl: for even larger screens. 1536px

   • State Variants:

     • hover: for hover state.
     • focus: for focus state.
     • active: for active state.
     • group-hover: for targeting elements when a parent is hovered.
     • focus-within: for targeting elements when a parent is in focus.

   • Dark Mode Prefix:

     • dark: for targeting elements in dark mode.

2. Keywords:

   • Layout and Positioning:
     • m- for margin.
     • p- for padding.
     • w- for width.
     • h- for height.
     • top-, right-, bottom-, left- for positioning.

• Describe the direction of layout or box model:

  • 'mx': means the margin left and margin right declared in a single variable
  • 'my"": means the margin top and margin bottom declared in a single variable

• Typography:

  • text- for font size, color, weight, etc.
  • font- for font family.

• Background and Borders:

  • bg- for background color.
  • border- for border color, width, radius, etc.

• Flexbox and Grid:

  • flex- for flexbox utilities.
  • grid- for grid utilities.
    Consider grid when you are adjusting nuance of responsinveness.

• Display:

  • block, inline-block, inline, hidden, etc.

• Interactivity and Effects:

  • cursor- for cursor styles.
  • transition- for transition effects.

• Spacing:

  • space- for margin and padding utilities with predefined spacing values.

• Sizing:

  • w- and h- followed by size keywords like full, 1/2, 1/3, etc.

• Rounded Corners:

  • rounded- followed by size keywords like sm, md, lg, etc.

• Shadows:

  • shadow- followed by size keywords like sm, md, lg, etc.

• Opacity:

  • opacity- followed by values like 25, 50, 75, 100.

• Overflow:

  • overflow- for handling overflow behavior.

• Alignment:

  • text-center, items-center, justify-center, etc.

• Positioning:

  • relative, absolute, fixed, etc.

• Lists:

  • list-disc and list-decimal for unordered and ordered lists.

• Container:

  • container for setting a max-width container.

• Flexbox Alignment:

  • justify-, items-, and content- for flexbox alignment.

• Grid Alignment:

  • justify-items-, justify-self-, align-items-, align-self-, etc.

• Text Alignment:

  • text-left, text-center, text-right, etc.

• Text Decoration:

  • underline, no-underline, line-through, etc.

• Whitespace:

  • whitespace- for controlling whitespace.

• Word Break:

  • break- for controlling word break behavior.

• Vertical Alignment:

  • align- for vertical alignment.

• Accessibility:

  • sr-only, not-sr-only for screen reader-only content.

• Pointer Events:

  • pointer-events- for controlling pointer events.

• User Select:

  • select- for controlling user select behavior.

[reboottime]

Practices on using Tailwind

Practice on customizing colors in your code (design)

Tailwind includes an expertly-crafted default color palette out-of-the-box.

It also gives the exposure to customize colors, as following:

Tailwind.css:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    },
  },
}

By default, these custom colors made avaible everywhere in the framework where you use colors, including text, border and background

<div class="bg-midnight text-tahiti">
  <!-- ... -->
</div>

---

[reboottime]

Practice on supporting customized font

• Import fonts via url, for example, using googleapis hosted font

  <link
            href="https://fonts.googleapis.com/css2?family=Questrial&display=swap"
            rel="stylesheet"
   />

• Customize font family for different element types in tailwind configuration file

Extra information about font family categories in tailwind

[reboottime]

Practice on font size

Very often, the font settings given from designer doesn't match the default settings of tailwind.

The solution is to customize our own font settings

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    fontSize: {
      '2xl': ['1.5rem', {
        lineHeight: '2rem',
        letterSpacing: '-0.01em',
        fontWeight: '500',
      }],
      '3xl': ['1.875rem', {
        lineHeight: '2.25rem',
        letterSpacing: '-0.02em',
        fontWeight: '700',
      }],
    }
  }
}