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
npx create-next-app -e with-tailwindcss projectname
//this will create your nextjs application and integrate JIT engine and Tailwind-CSS in it.
xxxxxxxxxx
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{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: {},
},
};
xxxxxxxxxx
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Install tailwind in next js using npm
Simple Algorithm
1: Run this command to install needed packages: yarn add tailwindcss postcss autoprefixer
2: Create a src folder at the root directory. Move the pages and styles folders into the src folder.
3: Create file called postcss.config.js at the root and paste this inside:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
4: Create file called tailwind.config.js at the root and paste this inside:
module.exports = {
content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
5: Inside the _app.js file paste this: import 'tailwindcss/tailwind.css'
and…BAM, that’s it.