Winnie CSS
  1. Getting Started
  2. Integrating with Tailwind

Integrating with Tailwind

Use Winnie CSS with Tailwind style your application.

Prerequisites

Before you get started, install and configure Tailwind and Winnie CSS in your application.

Installation

Install Winnie CSS for Tailwind

The simplest way to get up and running with Winnie CSS in any app is to start by installing Winnie CSS with the package manager of your choice. We will use npm, but yarn and pnpm also work as well.

Terminal window
npm install @winnie-ui/tailwind

Import the Style Sheet

Once you have Winnie CSS for Tailwind installed, you can then import the stylesheet in the root of your application.

global.css
@import "@winnie-ui/tailwind";

Configure your Theme

Now, with Winnie CSS installed and imported, it’s time to configure your theme. Winnie CSS allows you to choose the accent color, scale and border radius of your app.

root.tsx
export default function Root() {
  return (
    <html>
      <head>...</head>
      <body
        class="winnie-ui"
        data-accent-color="purple"
        data-scale="100%"
        data-radius="2"
        data-theme="light"
      >
        <App />
      </body>
    </html>
  );
}

To see how these different attributes affect the look and feel of an application, play around with the theme selector located in the top left. Everything in this documentation is built 100% with Winnie CSS.

FAQ

Why Tailwind V4 only?

Winnie CSS makes use of a new Tailwind feature in V4 which allows you to define a custom Tailwind theme using CSS. For more information see Theme Variables.