Tailwind CSS
Integrate Tailwind with your React Just app.
Installation
Install Tailwind CSS and its Vite plugin in your project:
bash
$ npm install tailwindcss @tailwindcss/vitebash
$ pnpm add tailwindcss @tailwindcss/vitebash
$ bun add tailwindcss @tailwindcss/viteConfiguration
Ensure your package.json has type: "module" specified to be able to import the Tailwind CSS plugin:
json
{
"type": "module"
}Add the Tailwind plugin to your Vite config file:
ts
import tailwindcss from "@tailwindcss/vite";
import react from "react-just/vite";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [react(), tailwindcss()],
});Setup Styles
Create a CSS module (e.g. src/index.css) and import Tailwind CSS:
css
@import "tailwindcss";Import the CSS module in your App Component:
tsx
import "./index.css";
export default function App() {
return (
<html>
<body className="min-h-screen">
<h1 className="w-full py-8 text-4xl font-bold text-center">
Hello React Just with Tailwind!
</h1>
</body>
</html>
);
}