If you are interested in developer trends you should check out my new newsletter at: unzip.dev
No BS, let's get right to it.
Create a new Next.js project
npx create-next-app <your-app-name>
Now cd to your project cd <your-app-name>
Install dependencies
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
Configure tailwind
Then npx tailwind init
Now let's import the tailwind css, delete all styles in styles and create: styles/tailwind.css with the contents:
@tailwind base;
@tailwind components;
@tailwind utilities;
PostCSS
Create postcss.config.js file (next.js uses it automatically).
module.exports = {
plugins: ['tailwindcss'],
}
Override the default styling
Replace import '../styles/globals.css' in pages/_app.js with: import '../styles/tailwind.css';
Add a test
Let's rewrite pages/index.js
import Head from 'next/head'
export default function Home() {
return (
<div className="flex justify-center">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="mt-4 p-4 w-1/4 rounded bg-blue-300 text-center">
<p className="text-blue-600">This should be very blue.</p>
</div>
</div>
)
}
Run
yarn dev and go to: localhost:3000
Result
Top comments (6)
I just tried --example -with-tailwindcss but did not manage due to postcss dependencies errors.
Thanks for the input! I hope it also helps others.
What config would you add?
Something like:
?
Thx Théophile. I got it working.
It's a great way to organize code. nextjs.org/docs/advanced-features/...
Thanks! I wanted a clean slate :)