Zero Config Tailwind 3.x with Rsbuild

Zero config is becoming default standard to increase the developer experience as well as making it easy for early adapter. As you know TailwindCSS 4 is on the way with Zero Config or with Config using CSS file here how can we achieve the same using TailwindCSS 3.x itself with Rsbuild.

If we are working with TailwindCSS 3.x, we typically need to tell tailwind about what are the files TailwindCSS needs to be parsed and to generate the output css files with only classes consumed in those files. Here is the typical Tailwind config file in the root directory.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx,html}", // Update the paths according to your project structure
    "./public/index.html"
  ],
  theme: {
    extend: {
      colors: {
        // Add your custom colors here
        primary: '#3490dc',
        secondary: '#ffed4a',
        accent: '#e3342f',
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  plugins: [
    // Add your plugins here
  ],
}

What is the issue, everything looks cool in here right?. Yes there is nothing wrong here except statically specifying the list of file paths inside content[] key.

Lets see why it is a problem: Say for example; we want to consume the design system built using TailwindCSS like NextUI. We need only few number of widgets from NextUI, we will never use all the components of the design system. So when consuming only needed widgets as specified here in this doc we need to manually change the Tailwind.config.js to include the installed widgets file paths to tell Tailwind to include those files when parsing and generating output CSS files every time we install widgets. Here is the such config for consuming Button widget from NextUI.

// tailwind.config.js
const {nextui} = require("@nextui-org/theme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // single component styles
    "./node_modules/@nextui-org/theme/dist/components/button.js",
    // or you can use a glob pattern (multiple component styles)
    './node_modules/@nextui-org/theme/dist/components/(button|snippet|code|input).js'
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

This is a problem when multiple person working on a project. As a platform engineer We cannot encourage everyone on the team to go and change the build config as that is not their job to do, they are busy engineers working hard to delivery their features on time.

To solve this manual work, we can utilise the brand new rsbuild plugin rsbuild-plugin-tailwindcss which uses its build time module graph to dynamically update the content[] from which Tailwind need parse and generate the css file. It opens the door to simplifying the consumption of TailwindCSS components independently.

Here is the simple project that show cases the greater impact of this plugin. Here we have only consumed the button widget from NextUI with only needed Tailwind config.

https://codesandbox.io/p/devbox/gifted-goodall-8w8wxv?embed=1&file=%2Fsrc%2FApp.tsx

Originally published at https://yab.hashnode.dev on November 17, 2024.