DEV Community

Johan PIQUET
Johan PIQUET

Posted on

What is Tailwind CSS and how to use it with React / Jopi Rewrite?

#react #tailwindcss #node

What is Tailwind CSS?

Tailwind CSS is a popular utility-first CSS framework that provides a large set of small, composable CSS classes. For example, the class float-right corresponds to float: right, while text-red-500 sets the text color to a red shade at intensity 500. Likewise, text-red-200 uses a lighter red (intensity 200).

Why Tailwind is useful?

Tailwind saves time by providing ready-to-use utility classes and reduces the need for separate stylesheet files. This makes it easy to copy and paste HTML while keeping the exact appearance intact.

Normally, copying HTML between projects or pages can break the look because stylesheets or selector hierarchies might not be copied along with the markup. With Tailwind, styles are embedded in the classes on the elements themselves, so a component can be reused elsewhere without unpredictable styling regressions.

The need of a pre-processor

Tailwind provides many utility classes, but in practice your final CSS only includes the classes you actually use. This keeps generated stylesheet sizes very small despite the huge number of available utilities.

The trade-off is that Tailwind requires a build step: a tool scans your source files and generates a stylesheet containing only the utilities you used. The tool itself is fast, but setting up the toolchain and configuration can be the main friction point.

Jopi Rewrite includes Tailwind out of the box

Jopi Rewrite is a server framework for Node.js that is optimized for great performance with Bun.js.

When you use Jopi Rewrite, Tailwind CSS is already integrated and preconfigured — there is nothing extra you need to do.

Example project using Tailwind

As an example we'll create a simple project using Tailwind. We'll use a project template generator so the setup is very quick.

Prerequisites:

  • A recent Node.js version (current LTS, e.g. v22.19 when this was written).
  • Optionally Bun.js installed for faster local development (see https://bun.sh).

Create the project

You can create the project with the following command:

npx jopi create minimal-router --dir myProject
Enter fullscreen mode Exit fullscreen mode

Project contents

The generated project is a minimal starter that:

Pages live under the reactPages folder, where each directory maps to a route.

File "reactPages/products/index.page.tsx"

This file exports a React component served at http://127.0.0.1:3000/products.

If you look at its contents you'll find code like this:

import React from "react";
import {usePageTitle} from "jopi-rewrite-ui";

export default function () {
    usePageTitle("Products");

    return <div className="flex flex-col items-center m-20">
        <div className="text-gray-500">The product page</div>
        <div className="text-red-300">TODO: add plenty of great products!</div>
    </div>
}
Enter fullscreen mode Exit fullscreen mode

This example uses Tailwind classes as mentioned above.

Jopi Rewrite uses React SSR (Server-Side Rendering).

The server renders the React component to HTML so pages are indexable by search engines like Google. Once the HTML is loaded in the browser, React hydrates the markup — replacing it with a fully interactive React component.

This approach gives fast perceived load times and good SEO because the user sees usable content immediately without waiting for the client-side JavaScript to finish loading and initializing.

Testing the project

Jopi Rewrite supports hot-reloading for React components: edit your React code and the browser will automatically refresh to show the latest visual changes when the tool detects a change.

Try editing products/index.page.tsx and see updates in real time.

You can run the app in two main ways:

  • Use Bun.js for the fastest developer loop (recommended for visual iteration).
  • Use Node.js, which may be slower because of TypeScript compilation.

With Bun.js:

bun install
bun run start-bun-dev
Enter fullscreen mode Exit fullscreen mode

With Node.js:

npm install
npm run build
npm run start-bun-dev
Enter fullscreen mode Exit fullscreen mode

Once the server is running, open http://127.0.0.1:3000/products.

The page content comes from src/reactPage/products/index.page.tsx. If you change that file — especially the Tailwind classes — you should see the changes reflected immediately in the browser. This is a huge time-saver when iterating on visuals.

End of the tutorial

That's the end of this short tutorial, which aimed to give you an overview of Tailwind CSS and how to use it with Jopi Rewrite.

Useful links:

Top comments (0)