Skip to content

Commit f5488d5

Browse files
adamwathanadamwathan
committed
Simplify Next.js framework guide
1 parent bd167c2 commit f5488d5

File tree

1 file changed

+70
-230
lines changed

1 file changed

+70
-230
lines changed

‎src/pages/docs/guides/nextjs.js

+70-230
Original file line numberDiff line numberDiff line change
@@ -1,193 +1,48 @@
1-
import { useRouteHash } from '@/hooks/useRouteHash'
21
import { DocumentationLayout } from '@/layouts/DocumentationLayout'
32
import { FrameworkGuideLayout } from '@/layouts/FrameworkGuideLayout'
43
import { Steps } from '@/components/Steps'
5-
import { TabBar } from '@/components/Guides/TabBar.jsx'
64

7-
let tabs = [
5+
let steps = [
86
{
9-
name: 'Stable',
10-
key: 'stable',
11-
href: '#',
12-
intro: () => (
7+
title: 'Create your project',
8+
body: () => (
139
<p>
14-
The quickest way to start using Tailwind CSS in your Next.js project is to use the{' '}
15-
<a href="https://github.com/vercel/next.js/tree/c3e5caf1109a2eb42801de23fc78e42a08e5da6e/examples/with-tailwindcss">
16-
Next.js + Tailwind CSS Example
17-
</a>
18-
. This will automatically configure your Tailwind setup based on the official Next.js
19-
example. If you'd like to configure Tailwind manually, continue with the rest of this guide.
10+
Start by creating a new Next.js project if you don’t have one set up already. The most
11+
common approach is to use{' '}
12+
<a href="https://nextjs.org/docs/api-reference/create-next-app">Create Next App</a>.
2013
</p>
2114
),
22-
steps: [
23-
{
24-
title: 'Create your project',
25-
body: () => (
26-
<p>
27-
Start by creating a new Next.js project if you don’t have one set up already. The most
28-
common approach is to use{' '}
29-
<a href="https://nextjs.org/docs/api-reference/create-next-app">Create Next App</a>.
30-
</p>
31-
),
32-
code: {
33-
name: 'Terminal',
34-
lang: 'terminal',
35-
code: 'npx create-next-app@latest my-project --typescript --eslint\ncd my-project',
36-
},
37-
},
38-
{
39-
title: 'Install Tailwind CSS',
40-
body: () => (
41-
<p>
42-
Install <code>tailwindcss</code> and its peer dependencies via npm, and then run the
43-
init command to generate both <code>tailwind.config.js</code> and{' '}
44-
<code>postcss.config.js</code>.
45-
</p>
46-
),
47-
code: {
48-
name: 'Terminal',
49-
lang: 'terminal',
50-
code: 'npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p',
51-
},
52-
},
53-
{
54-
title: 'Configure your template paths',
55-
body: () => (
56-
<p>
57-
Add the paths to all of your template files in your <code>tailwind.config.js</code>{' '}
58-
file.
59-
</p>
60-
),
61-
code: {
62-
name: 'tailwind.config.js',
63-
lang: 'js',
64-
code: ` /** @type {import('tailwindcss').Config} */
65-
module.exports = {
66-
> content: [
67-
> "./pages/**/*.{js,ts,jsx,tsx}",
68-
> "./components/**/*.{js,ts,jsx,tsx}",
69-
> ​
70-
> // Or if using \`src\` directory:
71-
> "./src/**/*.{js,ts,jsx,tsx}",
72-
> ],
73-
theme: {
74-
extend: {},
15+
code: {
16+
name: 'Terminal',
17+
lang: 'terminal',
18+
code: 'npx create-next-app@latest my-project --typescript --eslint\ncd my-project',
7519
},
76-
plugins: [],
77-
}`,
78-
},
79-
},
80-
{
81-
title: 'Add the Tailwind directives to your CSS',
82-
body: () => (
83-
<p>
84-
Add the <code>@tailwind</code> directives for each of Tailwind’s layers to your{' '}
85-
<code>./styles/globals.css</code> file.
86-
</p>
87-
),
88-
code: {
89-
name: 'globals.css',
90-
lang: 'css',
91-
code: '@tailwind base;\n@tailwind components;\n@tailwind utilities;',
92-
},
93-
},
94-
{
95-
title: 'Start your build process',
96-
body: () => (
97-
<p>
98-
Run your build process with <code>npm run dev</code>.
99-
</p>
100-
),
101-
code: {
102-
name: 'Terminal',
103-
lang: 'terminal',
104-
code: 'npm run dev',
105-
},
106-
},
107-
{
108-
title: 'Start using Tailwind in your project',
109-
body: () => <p>Start using Tailwind’s utility classes to style your content.</p>,
110-
code: {
111-
name: 'index.tsx',
112-
lang: 'jsx',
113-
code: ` export default function Home() {
114-
return (
115-
> <h1 className="text-3xl font-bold underline">
116-
> Hello world!
117-
> </h1>
118-
)
119-
}`,
120-
},
121-
},
122-
],
12320
},
12421
{
125-
name: (
126-
<>
127-
<span>
128-
Using the{' '}
129-
<code className="font-mono font-medium px-1 py-0.5 text-[13px] leading-5 rounded">
130-
app
131-
</code>{' '}
132-
directory
133-
</span>
134-
</>
22+
title: 'Install Tailwind CSS',
23+
body: () => (
24+
<p>
25+
Install <code>tailwindcss</code> and its peer dependencies via npm, and then run the init
26+
command to generate both <code>tailwind.config.js</code> and <code>postcss.config.js</code>.
27+
</p>
13528
),
136-
key: 'app-directory',
137-
href: '#app-directory',
138-
intro: () => (
29+
code: {
30+
name: 'Terminal',
31+
lang: 'terminal',
32+
code: 'npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p',
33+
},
34+
},
35+
{
36+
title: 'Configure your template paths',
37+
body: () => (
13938
<p>
140-
If you’re beta testing the new{' '}
141-
<a href="https://beta.nextjs.org/docs/routing/fundamentals#the-app-directory">
142-
app directory
143-
</a>{' '}
144-
in Next.js 13, you’ll need to include the <code>./app</code> directory in your content paths
145-
and ensure your CSS file is imported in your main layout file.
39+
Add the paths to all of your template files in your <code>tailwind.config.js</code> file.
14640
</p>
14741
),
148-
steps: [
149-
{
150-
title: 'Create your project',
151-
body: () => (
152-
<p>
153-
Start by creating a new Next.js project if you don’t have one set up already. The most
154-
common approach is to use{' '}
155-
<a href="https://nextjs.org/docs/api-reference/create-next-app">Create Next App</a>.
156-
</p>
157-
),
158-
code: {
159-
name: 'Terminal',
160-
lang: 'terminal',
161-
code: 'npx create-next-app@latest my-project --experimental-app --typescript --eslint\ncd my-project',
162-
},
163-
},
164-
{
165-
title: 'Install Tailwind CSS',
166-
body: () => (
167-
<p>
168-
Install <code>tailwindcss</code> and its peer dependencies via npm, and then run the
169-
init command to generate both <code>tailwind.config.js</code> and{' '}
170-
<code>postcss.config.js</code>.
171-
</p>
172-
),
173-
code: {
174-
name: 'Terminal',
175-
lang: 'terminal',
176-
code: 'npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p',
177-
},
178-
},
179-
{
180-
title: 'Configure your template paths',
181-
body: () => (
182-
<p>
183-
Add the paths to all of your template files in your <code>tailwind.config.js</code>{' '}
184-
file.
185-
</p>
186-
),
187-
code: {
188-
name: 'tailwind.config.js',
189-
lang: 'js',
190-
code: ` /** @type {import('tailwindcss').Config} */
42+
code: {
43+
name: 'tailwind.config.js',
44+
lang: 'js',
45+
code: ` /** @type {import('tailwindcss').Config} */
19146
module.exports = {
19247
> content: [
19348
> "./app/**/*.{js,ts,jsx,tsx}",
@@ -202,74 +57,59 @@ let tabs = [
20257
},
20358
plugins: [],
20459
}`,
205-
},
206-
},
207-
{
208-
title: 'Add the Tailwind directives to your CSS',
209-
body: () => (
210-
<p>
211-
Add the <code>@tailwind</code> directives for each of Tailwind’s layers to your{' '}
212-
<code>./app/globals.css</code> file.
213-
</p>
214-
),
215-
code: {
216-
name: 'globals.css',
217-
lang: 'css',
218-
code: '@tailwind base;\n@tailwind components;\n@tailwind utilities;',
219-
},
220-
},
221-
{
222-
title: 'Start your build process',
223-
body: () => (
224-
<p>
225-
Run your build process with <code>npm run dev</code>.
226-
</p>
227-
),
228-
code: {
229-
name: 'Terminal',
230-
lang: 'terminal',
231-
code: 'npm run dev',
232-
},
233-
},
234-
{
235-
title: 'Start using Tailwind in your project',
236-
body: () => <p>Start using Tailwind’s utility classes to style your content.</p>,
237-
code: {
238-
name: 'page.tsx',
239-
lang: 'jsx',
240-
code: ` export default function Home() {
60+
},
61+
},
62+
{
63+
title: 'Add the Tailwind directives to your CSS',
64+
body: () => (
65+
<p>
66+
Add the <code>@tailwind</code> directives for each Tailwind’s layers to your{' '}
67+
<code>globals.css</code> file.
68+
</p>
69+
),
70+
code: {
71+
name: 'globals.css',
72+
lang: 'css',
73+
code: '@tailwind base;\n@tailwind components;\n@tailwind utilities;',
74+
},
75+
},
76+
{
77+
title: 'Start your build process',
78+
body: () => (
79+
<p>
80+
Run your build process with <code>npm run dev</code>.
81+
</p>
82+
),
83+
code: {
84+
name: 'Terminal',
85+
lang: 'terminal',
86+
code: 'npm run dev',
87+
},
88+
},
89+
{
90+
title: 'Start using Tailwind in your project',
91+
body: () => <p>Start using Tailwind’s utility classes to style your content.</p>,
92+
code: {
93+
name: 'index.tsx',
94+
lang: 'jsx',
95+
code: ` export default function Home() {
24196
return (
24297
> <h1 className="text-3xl font-bold underline">
24398
> Hello world!
24499
> </h1>
245100
)
246101
}`,
247-
},
248-
},
249-
],
102+
},
250103
},
251104
]
252105

253106
export default function UsingNextJs({ code }) {
254-
let hash = useRouteHash()
255-
256-
let selectedTabIndex = tabs.findIndex((tab) => tab.href === hash)
257-
258-
if (selectedTabIndex === -1) {
259-
selectedTabIndex = 0
260-
}
261-
262107
return (
263108
<FrameworkGuideLayout
264109
title="Install Tailwind CSS with Next.js"
265-
description="Setting up Tailwind CSS in a Next.js v10+ project."
110+
description="Setting up Tailwind CSS in a Next.js project."
266111
>
267-
<TabBar tabs={tabs} selectedTabIndex={selectedTabIndex} />
268-
<Steps
269-
intro={tabs[selectedTabIndex].intro}
270-
steps={tabs[selectedTabIndex].steps}
271-
code={code[selectedTabIndex]}
272-
/>
112+
<Steps steps={steps} code={code} />
273113
</FrameworkGuideLayout>
274114
)
275115
}
@@ -279,7 +119,7 @@ export function getStaticProps() {
279119

280120
return {
281121
props: {
282-
code: tabs.map((tab) => highlightedCodeSnippets(tab.steps)),
122+
code: highlightedCodeSnippets(steps),
283123
},
284124
}
285125
}

0 commit comments

Comments
 (0)