Demystifying Tailwind CSS in fezcodex: A Utility-First Approach

In the fezcodex project, you'll notice that our components are styled cool(!). Instead of writing custom CSS for every element, Tailwind CSS is used. This post will explain what Tailwind CSS is, how it's configured in my project, and why it's a powerful tool for building user interfaces.

Part 1: The Core Concept - Utility-First CSS

Traditionally, when styling a webpage, you might write CSS like this:

And then apply it in your HTML:

Tailwind CSS takes a utility-first approach. Instead of writing custom CSS classes for every component, you apply small, single-purpose utility classes directly in your HTML (or JSX, in our case). Each class does one thing, and one thing only.

For example, the same button in Tailwind would look like this:

Benefits of Utility-First CSS:

• Rapid UI Development: You can build complex UIs much faster because you're not constantly switching between HTML/JSX and CSS files. All the styling happens directly in your markup.
• Consistent Design: By using a predefined set of utility classes (which are based on a design system), it's much easier to maintain a consistent look and feel across your application.
• No More Unused CSS: Tailwind, especially with its JIT (Just-In-Time) mode, only generates the CSS that you actually use in your project. This results in incredibly small and optimized CSS bundles, improving performance.
• Avoid Naming Headaches: You no longer have to come up with semantic class names for every single element, which can be a surprisingly difficult task in larger projects.

Part 2: Tailwind in fezcodex - Configuration and Customization

Our project customizes Tailwind to fit its specific design needs. This is primarily managed through two files:

tailwind.config.js

This is the central configuration file for Tailwind CSS. It tells Tailwind how to behave and what custom styles to include.

• content: This array (./src/**/*.{js,jsx,ts,tsx}) tells Tailwind which files to scan for utility classes. This is crucial for the build process to identify and include only the necessary CSS.
• theme.extend.colors: This is where we integrate our custom color palette. You'll see it imports colors from ./src/config/colors.js. This means that any color defined in colors.js (like article: '#FA8072') becomes available as a Tailwind utility class. For example:
  • text-article will apply the article color to text.
  • bg-article will apply the article color to the background.
  • border-article will apply the article color to the border. This is why we use text-article and not just article – the text- prefix tells Tailwind what CSS property to apply the color to.
• theme.extend.fontFamily: Similar to colors, this section allows us to define and use custom fonts (imported from ./src/config/fonts.js) throughout the project using Tailwind's font-{name} classes.
• plugins: We use @tailwindcss/typography here. This plugin provides a set of prose classes that can be used to style raw HTML (like the content generated from Markdown files) with beautiful, readable typography, without having to manually style every heading, paragraph, and list item.

src/config/colors.js and src/config/fonts.js

These files act as our project's design token repositories. They centralize all our custom colors and font definitions, making it easy to manage and update our design system from a single source.

Part 3: How It All Comes Together - Building UI

When you look at a component like AppCard.js or WordCounterPage.js, you'll see a lot of classes directly in the JSX. For example, a card might have classes like:

Let's break down a few of these:

• bg-transparent: Sets the background to transparent.
• border: Adds a default border.
• rounded-lg: Applies a large border-radius.
• shadow-lg: Adds a large box shadow.
• p-6: Adds padding of 1.5rem on all sides.
• flex flex-col justify-between: Configures the element as a flex container, arranging its children in a column and distributing space between them.
• hover:scale-105 hover:shadow-2xl: These are variant classes. They apply scale-105 (makes the element 5% larger) and shadow-2xl (a larger shadow) only when the element is hovered over.
• transition-all duration-300 ease-in-out: Ensures that changes to properties like transform (for scale) and box-shadow (for shadow) happen smoothly over 300 milliseconds.

Tailwind also makes responsive design easy with prefixes like sm:, md:, lg:, and xl:. For example, md:flex would make an element a flex container only on medium screens and larger.

Part 4: The Build Process

During development and when building for production, a tool like Craco (which sits on top of Create React App's Webpack configuration) processes your code. It uses PostCSS and the Tailwind plugin to scan all your files for Tailwind utility classes. It then generates a minimal CSS file containing only the styles corresponding to the classes you've actually used. This ensures that your final application bundle is as small and performant as possible.

Part 5: Let's Change the Color of Horizontal Rule

You can change the color of an <hr> (horizontal rule) element in Tailwind CSS using a couple of common methods:

1. Using border-color utilities (Most Common)

By default, an <hr> element is rendered as a line using its border-top or border-bottom property. You can directly apply Tailwind's border color utilities to change its color.

Explanation:

• border-gray-300: Sets the border color to a light gray.
• border-red-500: Sets the border color to red.
• border-t-4: Makes the top border 4 pixels thick. You can use border-t, border-b, border-l, border-r or just border for all sides.
• border-blue-500: Sets the border color to blue.
• border-primary-400: Uses a custom color defined in your tailwind.config.js (like the primary color you have).

2. Using background-color utilities with a defined height

Another way is to treat the <hr> as a block element with a specific height and then apply a background color. This gives you more control over its appearance, especially if you want a solid block of color rather than just a border line.

Explanation:

• h-px: Sets the height to 1 pixel. You can use any height utility (e.g., h-1, h-2, h-4, etc.).
• bg-red-500: Sets the background color to red.
• border-0: It's important to remove the default border of the <hr> when using this method, otherwise, you might see both the border and the background color.

Choose the method that best suits your design needs. The border-color method is generally more semantic for an <hr>, but the background-color method offers more flexibility for solid bars.

Part 6: Let's Put Two <Span> Element Next To Each Other

When your parent div has the classes flex flex-col text-sm group w-max flex-grow, the flex-col class specifically instructs the flex container to arrange its direct children in a column, meaning they will stack vertically, one below the other.

To put two <span> elements next to each other (horizontally) within this flex-col parent, you need to introduce a nested flex container that is configured for a row layout.

Here's how you can do it:

Explanation:

1. flex flex-col text-sm group w-max flex-grow: This is your existing parent div. It will arrange its direct children (like "Other content 1", "Other content 2", the new nested div, and "More content 3") in a vertical column.
2. <div class="flex items-center space-x-2">: This is the crucial part.
   • flex: This makes this new div a flex container. By default, a flex container arranges its items in a row (flex-row).
   • items-center: This vertically aligns the items (your <span>s) in the center of this nested flex container.
   • space-x-2: This Tailwind utility adds horizontal space between the direct children of this flex container (your two <span>s). You can adjust 2 to any spacing you need (e.g., space-x-1, space-x-4).

By using this nested div, you create a horizontal layout context specifically for your two <span> elements, while the overall parent div still maintains its flex-col behavior for its other children.

Conclusion

Tailwind CSS provides a powerful and efficient way to build and maintain the UI of the fezcodex project. By embracing its utility-first philosophy and leveraging its extensive configuration options, we can rapidly develop consistent, responsive, and performant user interfaces. It streamlines the styling process, allowing developers to focus more on functionality and less on managing complex CSS stylesheets.