I have monorepo with packages/ui components package. It uses tailwind styling inside.
I want to use that components in NextJS app, which is in the same monorepo. If I use transpilePackages in the NextJS app's next.config.json, do I need to install tailwind in the NextJS app?
#transpilePackages
hallow raptor
pale sluiceBOT
Hi @hallow raptor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you need to install Tailwind CSS in your Next.js application even if you are using transpilePackages in your next.config.js file. The transpilePackages feature allows Next.js to automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (node_modules). However, it does not handle the installation of these dependencies.
To install Tailwind CSS, you can use the following commands:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
After installing, you need to configure Tailwind CSS. Inside tailwind.config.js, add paths to the files that will use Tailwind CSS class names:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
// Or if using `src` directory:
'./src/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}
You do not need to modify postcss.config.js.
Sources:
- Next.js Documentation - transpilePackages (https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages)
- Next.js Documentation - Tailwind CSS (https://nextjs.org/docs/app/building-your-application/styling/tailwind-css)