How to install Tailwind CSS and daisyUI in a Next.js project
Create a new Next.js project in the current directory
npm create next-app@latest ./
npm install tailwindcss @tailwindcss/postcss daisyui@latest
Add Tailwind CSS to your PostCSS config file
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
'@tailwindcss/postcss': {},
},
};
export default config;
Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)
@import "tailwindcss";
@plugin "daisyui";
Now you can use daisyUI class names!
If you're using Turbopack (likenext dev --turbopack
), The default Lightning CSS config will modify some styles which maycause issues.
To fix this add"browserslist": "> 1%"
to yourpackage.json
file using this command:
npm pkg set browserslist="> 1%"
This will tell Lightning CSS to target modern browsers instead of polyfilling styles for outdated browsers.