tailwind install nextjs
Ensure you have a Next.js project set up. If not, create a new Next.js project using the
create-next-app
command in your terminal:npx create-next-app your-app-name
Navigate to your project directory:
cd your-app-name
Install Tailwind CSS and its required dependencies via npm:
npm install tailwindcss postcss autoprefixer
Create a
tailwind.config.js
file in the root directory of your project to configure Tailwind CSS:npx tailwindcss init -p
Open your
styles/globals.css
file (or create it if it doesn't exist) and import Tailwind CSS styles and include base styles:css @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';
Configure PostCSS to include Tailwind CSS in your project. Create a
postcss.config.js
file in your root directory:javascript module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };
In your
next.config.js
file, enable CSS support:javascript // next.config.js const withCSS = require('@zeit/next-css'); module.exports = withCSS();
Start your Next.js development server:
npm run dev
Begin using Tailwind CSS utility classes in your Next.js components by applying classes in your JSX/HTML files.