Skip to content

Commit a38db34

Browse files
icyJosephmolebox
icyJoseph
and
molebox
authored
Docs: Add more info about TW and TW 3 option (#82203)
Closes: https://linear.app/vercel/issue/DOC-4862/tailwind-css-modules --------- Co-authored-by: Rich Haines <[email protected]>
1 parent eb756a6 commit a38db34

File tree

8 files changed

+351
-175
lines changed

8 files changed

+351
-175
lines changed

‎docs/01-app/01-getting-started/11-css.mdx

Lines changed: 172 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,190 @@
11
---
22
title: CSS
3-
description: Learn about the different ways to add CSS to your application, including CSS Modules, Global CSS, Tailwind CSS, and more.
3+
description: Learn about the different ways to add CSS to your application, including Tailwind CSS, CSS Modules, Global CSS, and more.
44
related:
55
title: Next Steps
66
description: Learn more about the alternatives ways you can use CSS in your application.
77
links:
8-
- app/guides/tailwind-css
8+
- app/guides/tailwind-v3-css
99
- app/guides/sass
1010
- app/guides/css-in-js
1111
---
1212

1313
Next.js provides several ways to style your application using CSS, including:
1414

15+
- [Tailwind CSS](#tailwind-css)
1516
- [CSS Modules](#css-modules)
1617
- [Global CSS](#global-css)
1718
- [External Stylesheets](#external-stylesheets)
18-
- [Tailwind CSS](/docs/app/guides/tailwind-css)
1919
- [Sass](/docs/app/guides/sass)
2020
- [CSS-in-JS](/docs/app/guides/css-in-js)
2121

22+
## Tailwind CSS
23+
24+
[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that provides low-level utility classes to build custom designs.
25+
26+
<AppOnly>
27+
28+
Install Tailwind CSS:
29+
30+
```bash package="pnpm"
31+
pnpm add -D tailwindcss @tailwindcss/postcss
32+
```
33+
34+
```bash package="npm"
35+
npm install -D tailwindcss @tailwindcss/postcss
36+
```
37+
38+
```bash package="yarn"
39+
yarn add -D tailwindcss @tailwindcss/postcss
40+
```
41+
42+
```bash package="bun"
43+
bun add -D tailwindcss @tailwindcss/postcss
44+
```
45+
46+
Add the PostCSS plugin to your `postcss.config.mjs` file:
47+
48+
```js filename="postcss.config.mjs"
49+
export default {
50+
plugins: {
51+
'@tailwindcss/postcss': {},
52+
},
53+
}
54+
```
55+
56+
Import Tailwind in your global CSS file:
57+
58+
```css filename="app/globals.css"
59+
@import 'tailwindcss';
60+
```
61+
62+
Import the CSS file in your root layout:
63+
64+
```tsx filename="app/layout.tsx" switcher
65+
import './globals.css'
66+
67+
export default function RootLayout({
68+
children,
69+
}: {
70+
children: React.ReactNode
71+
}) {
72+
return (
73+
<html lang="en">
74+
<body>{children}</body>
75+
</html>
76+
)
77+
}
78+
```
79+
80+
```jsx filename="app/layout.js" switcher
81+
import './globals.css'
82+
83+
export default function RootLayout({ children }) {
84+
return (
85+
<html lang="en">
86+
<body>{children}</body>
87+
</html>
88+
)
89+
}
90+
```
91+
92+
Now you can start using Tailwind's utility classes in your application:
93+
94+
```tsx filename="app/page.tsx" switcher
95+
export default function Page() {
96+
return (
97+
<main className="flex min-h-screen flex-col items-center justify-between p-24">
98+
<h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
99+
</main>
100+
)
101+
}
102+
```
103+
104+
```jsx filename="app/page.js" switcher
105+
export default function Page() {
106+
return (
107+
<main className="flex min-h-screen flex-col items-center justify-between p-24">
108+
<h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
109+
</main>
110+
)
111+
}
112+
```
113+
114+
</AppOnly>
115+
116+
<PagesOnly>
117+
118+
Install Tailwind CSS:
119+
120+
```bash package="pnpm"
121+
pnpm add -D tailwindcss @tailwindcss/postcss
122+
```
123+
124+
```bash package="npm"
125+
npm install -D tailwindcss @tailwindcss/postcss
126+
```
127+
128+
```bash package="yarn"
129+
yarn add -D tailwindcss @tailwindcss/postcss
130+
```
131+
132+
```bash package="bun"
133+
bun add -D tailwindcss @tailwindcss/postcss
134+
```
135+
136+
Add the PostCSS plugin to your `postcss.config.mjs` file:
137+
138+
```js filename="postcss.config.mjs"
139+
export default {
140+
plugins: {
141+
'@tailwindcss/postcss': {},
142+
},
143+
}
144+
```
145+
146+
Import Tailwind in your global CSS file:
147+
148+
```css filename="styles/globals.css"
149+
@import 'tailwindcss';
150+
```
151+
152+
Import the CSS file in your `pages/_app.js` file:
153+
154+
```jsx filename="pages/_app.js"
155+
import '@/styles/globals.css'
156+
157+
export default function MyApp({ Component, pageProps }) {
158+
return <Component {...pageProps} />
159+
}
160+
```
161+
162+
Now you can start using Tailwind's utility classes in your application:
163+
164+
```tsx filename="pages/index.tsx" switcher
165+
export default function Home() {
166+
return (
167+
<main className="flex min-h-screen flex-col items-center justify-between p-24">
168+
<h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
169+
</main>
170+
)
171+
}
172+
```
173+
174+
```jsx filename="pages/index.js" switcher
175+
export default function Home() {
176+
return (
177+
<main className="flex min-h-screen flex-col items-center justify-between p-24">
178+
<h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
179+
</main>
180+
)
181+
}
182+
```
183+
184+
</PagesOnly>
185+
186+
> **Good to know:** If you need broader browser support for very old browsers, see the [Tailwind CSS v3 setup instructions](/docs/app/guides/tailwind-v3-css).
187+
22188
## CSS Modules
23189

24190
CSS Modules locally scope CSS by generating unique class names. This allows you to use the same class in different files without worrying about naming collisions.
@@ -125,7 +291,7 @@ export default function RootLayout({ children }) {
125291
}
126292
```
127293

128-
> **Good to know:** Global styles can be imported into any layout, page, or component inside the `app` directory. However, since Next.js uses React's built-in support for stylesheets to integrate with Suspense, this currently does not remove stylesheets as you navigate between routes which can lead to conflicts. We recommend using global styles for _truly_ global CSS, and [CSS Modules](#css-modules) for scoped CSS.
294+
> **Good to know:** Global styles can be imported into any layout, page, or component inside the `app` directory. However, since Next.js uses React's built-in support for stylesheets to integrate with Suspense, this currently does not remove stylesheets as you navigate between routes which can lead to conflicts. We recommend using global styles for _truly_ global CSS (like Tailwind's base styles), [Tailwind CSS](#tailwind-css) for component styling, and [CSS Modules](#css-modules) for custom scoped CSS when needed.
129295
130296
</AppOnly>
131297

@@ -277,7 +443,8 @@ To keep CSS ordering predictable:
277443

278444
- Try to contain CSS imports to a single JavaScript or TypeScript entry file
279445
- Import global styles and Tailwind stylesheets in the root of your application.
280-
- Use CSS Modules instead of global styles for nested components.
446+
- **Use Tailwind CSS** for most styling needs as it covers common design patterns with utility classes.
447+
- Use CSS Modules for component-specific styles when Tailwind utilities aren't sufficient.
281448
- Use a consistent naming convention for your CSS modules. For example, using `<name>.module.css` over `<name>.tsx`.
282449
- Extract shared styles into shared components to avoid duplicate imports.
283450
- Turn off linters or formatters that auto-sort imports like ESLint’s [`sort-imports`](https://eslint.org/docs/latest/rules/sort-imports).

‎docs/01-app/02-guides/migrating/app-router-migration.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -887,7 +887,7 @@ If you are also migrating to Next.js from a Single-Page Application (SPA) at the
887887
In the `pages` directory, global stylesheets are restricted to only `pages/_app.js`. With the `app` directory, this restriction has been lifted. Global styles can be added to any layout, page, or component.
888888

889889
- [CSS Modules](/docs/app/getting-started/css#css-modules)
890-
- [Tailwind CSS](/docs/app/guides/tailwind-css)
890+
- [Tailwind CSS](/docs/app/getting-started/css#tailwind-css)
891891
- [Global Styles](/docs/app/getting-started/css#global-css)
892892
- [CSS-in-JS](/docs/app/guides/css-in-js)
893893
- [External Stylesheets](/docs/app/getting-started/css#external-stylesheets)
@@ -921,7 +921,7 @@ export default function RootLayout({ children }) {
921921
}
922922
```
923923

924-
Learn more about [styling with Tailwind CSS](/docs/app/guides/tailwind-css)
924+
Learn more about [styling with Tailwind CSS](/docs/app/getting-started/css#tailwind-css)
925925

926926
## Using App Router together with Pages Router
927927

‎docs/01-app/02-guides/migrating/from-create-react-app.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ export default function RootLayout({
300300
}
301301
```
302302

303-
If you’re using Tailwind CSS, see our [installation docs](/docs/app/guides/tailwind-css).
303+
If you're using Tailwind CSS, see our [installation docs](/docs/app/getting-started/css#tailwind-css).
304304

305305
### Step 6: Create the Entrypoint Page
306306

0 commit comments

Comments
 (0)