//Code from Tailwind docs - https://tailwindcss.com/docs/guides/nextjs
//Terminal - Start your project
npx create-next-app my-project
cd my-project
//Terminal - Install Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
//Create tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
//Add Tailwind to your globals.css file
@tailwind base;
@tailwind components;
@tailwind utilities;
//Terminal - Initiate your project
npm run dev
//START USING TAILWIND!
export default function ExampleComponent() {
return (
<h1 className="text-3xl font-bold underline">
Hello from Tailwind!
</h1>
)
}
//Extra - Install Tailwind Intellisense from VS Code for
//an amazing experience!
npx create-next-app -e with-tailwindcss pName
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
// Remember to add to tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
// and to globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
npx create-next-app -e with-tailwindcss projectname
//this will create your nextjs application and integrate JIT engine and Tailwind-CSS in it.