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
# If you're on Next.js v10 or newer
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# If you're on Next.js v9 or older
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
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
// tailwind.config.js
module.exports = {
- purge: [],
+ purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
xxxxxxxxxx
// postcss.config.js
const { join } = require('path');
module.exports = {
plugins: {
tailwindcss: {
config: join(__dirname, 'tailwind.config.js'),
},
autoprefixer: {},
},
};
xxxxxxxxxx
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;