xxxxxxxxxx
npx create-next-app -e with-tailwindcss projectname
//this will create your nextjs application and integrate JIT engine and Tailwind-CSS in it.
xxxxxxxxxx
npx create-next-app@latest --typescript --example with-tailwindcss
//later in package.json if you want change next from latest to version it install
//go to package-lock.json and see node_modules/@next/env version and copy that.
//until nextjs 13 is in beta better to use 12.3.2 version
npx create-next-app@12.3.2 --typescript --example with-tailwindcss
//OR
npx create-next-app@12.0.10 -e with-tailwindcss .
//create next app in current folder.
//Latest time this is best it will give promt to install tailwindcss.
npx create-next-app@latest my-project --typescript --eslint
cd my-project
xxxxxxxxxx
// Create your project
npx create-next-app@latest my-project --typescript --eslint
cd my-project
// Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
// Configure your template paths
// tailwind.config.js
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
theme: {
extend: {
colors: {
primary: "#101010",
mainback: "#1D0070",
white: "#fff",
black: "#000",
default: "#D2D5DA",
}
},
screens: {
sm: { max: "768px", min: "350px" },
md: "768px" ,
lg: "1080px" ,
xl: {min: "1440px"},
},
},
// Add the Tailwind directives to your CSS
// src/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
// Start your build process
npm run dev
// Start using Tailwind in your project
// src/app/page.tsx
export default function Home() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
xxxxxxxxxx
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;
xxxxxxxxxx
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
xxxxxxxxxx
// postcss.config.js
const { join } = require('path');
module.exports = {
plugins: {
tailwindcss: {
config: join(__dirname, 'tailwind.config.js'),
},
autoprefixer: {},
},
};