cursor-rules/tailwind4-guidelines at main · kriserdmann/cursor-rules · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
# 🌀 Tailwind CSS v4 Installation Guide (PostCSS Plugin Method)

Tailwind CSS is a utility-first CSS framework designed for rapid UI development. With version 4, you get faster performance, improved developer experience, and zero-runtime styling.

This guide outlines how to install and configure Tailwind CSS v4 using **PostCSS**, which is ideal for Next.js-based microSaaS applications.

* * *

## ✅ Why This Approach?

-   Seamless integration with frameworks like **Next.js**
-   Full control over the PostCSS pipeline
-   Ideal for **server-side rendered (SSR)** projects
-   No runtime overhead
* * *

## 🔧 Installation Steps

### 1\. Install Required Packages

In your project root, run:

`npm install tailwindcss @tailwindcss/postcss postcss`

* * *

### 2\. Configure PostCSS

Create or update `postcss.config.mjs` (or `.js` depending on your setup):

`export default {   plugins: {     "@tailwindcss/postcss": {},   }, };`

* * *

### 3\. Import Tailwind into Your CSS

In your main CSS file (e.g., `src/styles/globals.css` or `app/globals.css`):

`@import "tailwindcss";`

Make sure this CSS file is imported in your Next.js app, typically in `_app.tsx` or `layout.tsx`.

* * *

### 4\. Start the Dev Server

Run your build/dev process:

`npm run dev`

Make sure `npm run dev` includes your CSS build step (if not using Next.js auto-pipeline).

* * *

### 5\. Use Tailwind Classes in Your Components

Start applying Tailwind utility classes to your JSX or HTML elements:

`<h1 class="text-3xl font-bold underline">   Hello world! </h1>`

Next.js handles CSS injection automatically, so no need to manually link CSS files in the HTML `<head>`.

* * *

## 📌 Notes

-   Tailwind scans all `.js`, `.ts`, `.jsx`, `.tsx`, and `.html` files by default. You can configure content paths in `tailwind.config.js`.
-   For **production builds**, Tailwind will tree-shake unused classes for optimal performance.
-   Combine with **@tailwindcss/forms**, **typography**, or other official plugins as needed.