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',
      }],
    }
  }
}