Styling Radix UI with Tailwind CSS: A Step-by-Step Guide

Learn how to bring the power of Tailwind CSS to your Radix UI components and discover the benefit of using an unstyled component library.

2 Jan 2023

The Radix Primitives UI library, also known as "Radix UI", is an open source React component library that is completely unstyled, preferring instead to leave the choice of styling method to the developer. The lack of styling opinion makes it a strong companion for Tailwind CSS.

In this article, we will explain why Radix UI and Tailwind CSS work so well together, and will demonstrate how to use Tailwind CSS to style your Radix UI components.

Radix UI Component Library

Many React UI component libraries provide clear benefits when developing apps. They facilitate rapid development by providing pre-built components that can be slotted in to React apps. Most component libraries make it easy for any developer to produce an attractive interface, and often provide accessible, customizable components out of the box.

Radix UI provides all those benefits, but its absence of opinion on styling mechanism is perhaps the biggest contributor to its increasing popularity since its release in late 2020.

By leaving the choice of styling mechanism to the developer, Radix UI is compatible with Tailwind CSS and therefore has been able to tap into Tailwind's phenomenal surge in popularity. Tailwind CSS averaged a massive 4.5 million downloads per week as of December 2022 and many developers have been drawn to UI component libraries that work well with it, of which Radix UI is one.

The beauty of Tailwind CSS

The wonderful thing about Tailwind CSS is that it provides a set of consistent classes which can be easily applied across different websites and apps, meaning that styling can be achieved simply by specifying familiar class names in your HTML, without you actually having to write any CSS classes!

Tailwind CSS makes building responsive websites easy as well, with an intuitive code structure that is simple to learn and use.

The Tailwind toolset makes it a cinch to produce an optimized CSS file as well, and there are no limits to customization either, though too much customization would offset the main benefit of using Tailwind in the first place.

Add Tailwind CSS and Radix UI to your React project

To get started with Tailwind CSS and Radix UI, you will need to install Tailwind CSS via npm. First, open a shell session and change into the directory containing your project, then type the following shell command:

npm install tailwindcss

If the Radix UI components you wish to use have not yet been installed, then you will need to install them individually too. For example, if you wanted to install the toast and accordion components, you would install them with:

npm install @radix-ui/react-toast
npm install @radix-ui/react-accordion

Once Tailwind CSS is installed, add these lines to your application's CSS file (e.g. main.css or src/index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

Also initialize Tailwind CSS by typing the following in the root folder of your project to create a default tailwind.config.js file:

npx tailwindcss init

Now edit that tailwind.config.js so that it has the following content:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The above code instructs Tailwind CSS to apply its styles to all filenames ending with 'js','jsx','ts' or 'tsx' in the 'src' subdirectory tree.

You are now ready to start styling your Radix UI components with Tailwind.

How to Style Radix UI Components with Tailwind CSS

Now all you need to do to style a Radix UI component with Tailwind CSS is to add your desired Tailwind CSS classes to the Radix UI component. To do that, use the className prop to specify your Tailwind CSS class(es).

For example, the code below is the default Create React App application file (App.js) but with code to import and place a Toggle component from Radix UI, with a className prop to style it with Tailwind classes that apply an indigo background with white semibold text and horizontal padding of 10 pixels.

import logo from './logo.svg';
import './App.css';
import * as Toggle from '@radix-ui/react-toggle';


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <Toggle.Root 
		  className="bg-indigo-600 text-white font-semibold px-10">
          Click Me
        </Toggle.Root>

      </header>
    </div>
  );
}
 
export default App;

Conclusion

Styling Radix UI components with Tailwind CSS leverages the benefits of both these great technologies, thereby driving rapid development of attractive and accessible user interfaces.