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
// postcss.config.js
const { join } = require('path');
module.exports = {
plugins: {
tailwindcss: {
config: join(__dirname, 'tailwind.config.js'),
},
autoprefixer: {},
},
};
xxxxxxxxxx
npx create-next-app -e with-tailwindcss my-project
cd my-project