Building a Tailwind UI Component Library for React

How to build a UI component library using Tailwind, Bit, React and Vite

Unlike traditional CSS frameworks, with predefined styles that you can override, Tailwind allows developers to build designs directly into JSX using utility classes. Its compiler scans these files and generates only the necessary CSS. This is an excellent way to optimize CSS along with its JavaScript counterparts.

However, when using Tailwind with Bit components, there are a few challenges to overcome. The main challenge is that Tailwind compilation needs to be adopted at a granular level to develop and preview each component in isolation.

Let’s see how we can solve these issues to allow the development, testing, and previewing of React Tailwind components.

See the solution presented in this blog in the following sources:

• Source Code in GitHub
• CI Support with GitHub Actions
• Components Library in Bit Platform: Tailwind Library

Tailwind UI Component Library

Components can be shared on Bit Platform and used across multiple projects.

Bit. Composable software platform.

Getting Started

When creating a UI library with Tailwind support, Bit provides a Plugin, Custom Env for Tailwind and a Transformer that compiles the CSS for component preview and the final bundle.

In your UI library project, first, you need to install this plugin and then fork the Tailwind Env and Config so that you can customize them to your needs.

This demo also forks the example app and the button component to kickstart the project.

First, log into Bit Platform and create a remote scope. This is where your components reside. In this demo, the scope used is learnbit-react.tailwind-library .

The demo components for this blog, hosted on Bit Platform

# Creating a new workspace
bit init --default-scope learnbit-react.tailwind-library

# Forking the Env and Config
bit fork frontend.tailwind/config/tailwind
bit fork frontend.tailwind/envs/tw-react-env

# Forking the Button and App
bit fork frontend.tailwind/examples/button ui/button --env learnbit-react.tailwind-library/envs/tw-react-env
bit fork frontend.tailwind/examples/vite-app demo --env learnbit-react.tailwind-library/envs/tw-react-env

# Make the App Executable
bit use learnbit-react.tailwind-library/demo

Run bit start to see these component previews for development.

However, for the Tailwind compilation to take effect for your app component, you must update your configuration and provide the new component names and paths. You can see that a new components selector is given to parse all the UI components.

// file: demo/tailwind.config.ts

import { Plugin, type Config } from '@frontend/tailwind.plugin';
import { theme } from '@learnbit-react/tailwind-library.theme'

const bitPlugin = new Plugin({
  components: ['@learnbit-react/tailwind-library.ui.**'],
  content: ['./**/*.{js,jsx,ts,tsx}'],
  cwd: __dirname,
});

const config: Config = {
  theme: theme(),
  plugins: [bitPlugin.apply()],
};

export default config;

Then, you can run the app by executing bit run demo. After that, you can create your new UI library components in the UI directory. Here, we have created two components, namely textfieldand switch.

One key benefit of Bit is that it provides a unique developer experience for building components. You can focus on creating and modifying only the components you need, and Bit helps you determine their dependency graph and the impact of change.

Once you create the new UI components, you can explore the dependency graph to understand how Envs, Configs, App and UI components are connected.

UI Library Dependency Graph

Once the components are ready, tag them and export them to the remote scope you created in bit.cloud.

bit tag -m "initial tag"
bit export

You can also see all the components are built in ripple-ci. If you decide to commit the code to the Git repository, you can configure your CI/CD pipeline to automate the end-to-end process of reviewing, tagging, and exporting components.

CI/CD with GitHub Actions

Automating CI/CD with Bit components with GitHub is straightforward. You can find pre-built tasks that can;

• Build your Pull Requests and verify all your components in Bit Platform with the preview.
• Automate Tagging and Exporting Components after merging a Pull Request.

All the CI/CD configurations can be found here.

The three GitHub action tasks for the UI library are as follows.

• Bit Pull Request
• Tag Export and Commit back the Bitmap
• Lane Cleanup (Clean up Bit lanes created for component previews in Pull Requests)

Example: GitHub Actions Link for Component Preview

You can copy-paste these scripts into your project and set the environment secrets. Then, it should function accordingly.

Theming Support

One of the fundamental features of a UI library is supporting theming. Bit Tailwind integration allows you to customize and extend your theme whenever needed.

When creating a custom theme for your components, you need to define it in two places.

• Bit Env configuration for Tailwind: This is used while developing your components in the Bit development server.
• The app component configuration: This is used for the application runtime.

Following best practices, you can create a separate component for the theme and add its configuration to be reused in both places.

bit create module theme --aspect teambit.node/node

Theme component dependency graph

Following is a simple theme configuration following the Tailwind theming docs.

/**
 * returns theme object
 */
export function theme() {
  return {
    extend: {
      fontFamily: {
        sans: ['Arial', 'Helvetica', 'sans-serif'], // Default sans-serif font
        serif: ['Georgia', 'Times New Roman', 'serif'], // Default serif font
      },
      colors: {
        'blue-500': '#00d1ff', // Fluorescent blue
        'blue-700': '#0094cc', // Darker fluorescent blue
        'bg-gray-200': '#0094cc',
        'gray-200': '#ccff00', // Fluorescent green for background
        'blue-300': '#33ccff', // Fluorescent blue for focus ring
        'blue-800': '#ff00ff', // Fluorescent pink for dark mode focus ring
        'blue-600': '#00ffcc', // Fluorescent teal for checked background
      },
      ringColor: {
        'blue-300': '#33ccff', // Matching focus ring with fluorescent blue
      }
    },
  }
}

Conclusion

With Bit’s Tailwind support, now you can easily create a UI components library that can be used across multiple projects.

This combination empowers teams to maintain a consistent design system while benefiting from the modularity and reusability that Bit offers to create component libraries.

Thank you!

Learn More

Crafting a Community-Driven UI Library: A Guide to Fostering Collaboration and Adoption

The Architecture of a Modern Frontend Design System

7 Best Tailwind Component Libraries and Template Collections (2023)

5 Reasons to Use Tailwind CSS with React Native