Unicorn Platform

World's best and simplest website builder powered by AI

Build your website
Back to Blog
Thursday, October 26, 2023

React with Tailwind CSS for Fast Styling

Introduction

React and Tailwind CSS together provide an optimal toolbox for rapidly building styled user interfaces. React's component architecture and Tailwind's utility-first CSS work seamlessly to boost developer productivity. Projects like FloatUI make it even faster to prototype UIs by providing ready-made Tailwind components for React.

Tailwind eliminates the need to context switch between languages and write custom CSS through its functional utility classes. You can compose styling and responsive behavior directly in React components using Tailwind's classes. This results in faster development cycles and cleaner code.

In this post, we'll provide an overview of Tailwind and React, strategies for integrating them, and how using them together supercharges building UIs.

Tailwind CSS Overview

Tailwind CSS is a highly customizable, low-level CSS framework that enables rapid styling through utility classes instead of custom CSS. It provides utilities for color, padding, margin, display and hundreds of other CSS properties out-of-the-box.

For example, Tailwind utilities like bg-blue-500, text-center, p-4, hover:underline allow styling HTML directly:

<button class="bg-blue-500 text-white p-4 hover:bg-blue-700">
  Button
</button>

No custom CSS needed! This simplicity powers speedy development and flexibility.

Utility-First Methodology

The utility-first methodology is the core of Tailwind CSS. Instead of writing custom CSS, Tailwind provides pre-defined utility classes for each CSS property that you compose together.

For example, instead of a .btn class, you would build a button with utilities like:

<button 
  class="bg-blue-500 text-white p-2 rounded"
>
  Button
</button>

This approach removes context switching between HTML, CSS, and JS files. Maintaining reusable utilities is also easier compared to cascading CSS rules.

Tailwind comes with hundreds of pre-designed utilities derived from design best practices. You can apply colors through text-{color}-500, spacing using p-2, m-auto, layout utilities like flex, grid, and much more.

Highly Customizable

While Tailwind provides utility classes out-of-the-box, you have extensive control over styling through configuration. Tailwind uses a config file to define colors, fonts, spacing, breakpoints and more.

For example, you can customize a Button component with new color schemes:

// Usage
<Button className="bg-primary text-white">
  Click Me 
</Button>

// Configuration
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#f2299a'
      }
    }
  }
}

This allows achieving personalized, on-brand UIs without writing CSS!

Responsive Design

Tailwind CSS is mobile-first and fully responsive. The utilities elegantly adapt across screens to provide polished cross-device experiences.

You control responsive behavior through breakpoint specific classes like sm:text-center, md:w-1/2, lg:hidden etc.

For example:

<div class="sm:text-center md:flex md:items-center">
  <!-- Centers text on small screens, enables flexbox on medium -->
</div>

Interactivity is also easy through hover:, focus: variants. Tailwind handles the heavy-lifting of responsive design for you.

React Overview

React is an extremely popular JavaScript library for building reactive user interfaces through components. It uses efficient diff-based rendering and a virtual DOM.

React promotes a declarative paradigm where you simply describe UI as a function of state, and React handles rendering it efficiently. Features like JSX, hooks and integrated support for libraries like Tailwind improve developer experience.

Component-Based

React apps are built as compositions of reusable, nestable components - independent pieces of UI logic and markup like headers, buttons, menus etc.

// Header.jsx
function Header() {
  return <h1>My Website</h1>;
} 

// Usage
<Header />

Parent components pass data into children via props. Complex UIs can be built by composing components together.

Declarative and Performant

React uses a declarative style where UIs are defined based on state. When state changes, React handles optimizing DOM updates efficiently.

For example:

// Declaratively render UI based on state
function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Increment: {count}  
      </button>
    </div>
  );
}

Features like the virtual DOM, uni-directional data flow, and hooks like useEffect enable building reactive UIs intuitively.

Using Tailwind CSS in React

There are several recommended strategies for using Tailwind CSS in React apps:

Pass Classes via Props

A common pattern is passing utility classes from parents to children:

// Button.jsx 
export function Button({ className, children }) {
  return <button className={className}>{children}</button>;
}

// Usage
<Button className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Submit  
</Button>

We can customize the Button by passing it a className prop with Tailwind utilities for colors, spacing, fonts, etc.

Abstracting classes this way makes styling reusable across components.

Toggling Classes Based on State

We can also conditionally apply Tailwind classes using React state:

function App() {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <>
      <button onClick={() => setMenuOpen(!menuOpen)}>
        Toggle Menu
      </button>
      
      <Navigation 
        className={`
          ${menuOpen ? '' : 'hidden'}
          lg:flex lg:items-center  
        `}
      />
    </>
  );
}

Here the Navigation visibility is toggled based on mobile/desktop screen sizes using state.

This enables creating responsive and interactive UIs with Tailwind + React state.

Benefits of Using Tailwind CSS with React

Key benefits of using Tailwind CSS with React:

  • Rapid Prototyping: Tailwind's utility classes speed up UI development directly in React components.
  • Beautiful Responsive Design: Composing breakpoint and layout utilities makes responsive UIs intuitive.
  • Faster Styling Without CSS: Tailwind removes need to write custom CSS through pre-designed utilities.
  • Reusable Styles: Abstracting classes into React props and state makes styling modular.
  • Optimized Components: Libraries like FloatUI provide ready-made accessible Tailwind React components to boost productivity.

Together, React and Tailwind provide the optimal toolset for crafting UIs faster.

Key Takeaways

  • Tailwind CSS enables rapid styling through utility classes instead of custom CSS. It's highly customizable and responsive.
  • React promotes building UIs through declarative components with efficient diff-based rendering.
  • In React, we can pass Tailwind classes via props and toggle them based on state for reusable styling.
  • Libraries like FloatUI provide pre-made, optimized Tailwind components for React.
  • Using Tailwind CSS with React improves developer experience through faster styling, prototyping, and crafting responsive UIs.

Conclusion

React and Tailwind CSS integrate beautifully together to supercharge UI development. Tailwind's atomic utility classes for styling fit perfectly with React's component architecture.

Composing UIs with Tailwind utilities directly in JSX removes context switching and speeds up styling without custom CSS. Managing styles based on props and state makes UIs robust and adaptive.

Together, React, Tailwind and component libraries like FloatUI enable rapid development of responsive, customized UIs with optimal developer experience. They empower designers and developers to build high-quality user interfaces faster.