typescript - how to install tailwindcss in monorepo like turborepo - Stack Overflow

admin管理员组

文章数量:1394155

// Note: I'm not looking for solution. I'm just here to tell you how i solve this issue

npx create-turbo@latest //create monorepo project

cd apps/web  //should be present in you app directory
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

problem is unable to create tailwind.config.json

if you able to create "tailwind.config.json" file then you use tailwindcss happily using through import

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

To install tailwind in monorepo use the following steps :-

1. first go to apps/web and in package.json add the following manually:-

"devDependencies": {
"tailwindcss": "^3.0.0",
"postcss": "^8.0.0",
"autoprefixer": "^10.0.0"
}

then run:-

npm install

after this following commands won't give any error..

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// Note: I'm not looking for solution. I'm just here to tell you how i solve this issue

npx create-turbo@latest //create monorepo project

cd apps/web  //should be present in you app directory
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

problem is unable to create tailwind.config.json

if you able to create "tailwind.config.json" file then you use tailwindcss happily using through import

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

To install tailwind in monorepo use the following steps :-

1. first go to apps/web and in package.json add the following manually:-

"devDependencies": {
"tailwindcss": "^3.0.0",
"postcss": "^8.0.0",
"autoprefixer": "^10.0.0"
}

then run:-

npm install

after this following commands won't give any error..

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• typescript
• next.js
• tailwind-css
• monorepo
• turborepo

Share Improve this question Follow edited Mar 22 at 8:10 Dksinha asked Mar 12 at 10:46 DksinhaDksinha 3133 bronze badges 3

• Can you reformulate your question please its not clear whats your problem exactly – Mootez Zemmel Commented Mar 12 at 11:35
• Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Bot Commented Mar 12 at 12:24
• @Community, the asker cannot clarify their question any further, as this would be a working example in 2024. However, starting from January 2025, with the release of TailwindCSS v4, the installation method has changed from npm install tailwindcss to npm install tailwindcss@3 if they still want to use v3. The entire procedure has been completely revamped if they want to upgrade to v4. See more: stackoverflow/a/79503453/15167500 and github/tailwindlabs/tailwindcss/issues/1971 – rozsazoltan Commented Mar 12 at 12:34

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

TailwindCSS v3

The installation of TailwindCSS v3 and v4 is different. You were expecting the v3 installation, but v4 is the new latest version. For v3 installation, use:

npm install -D tailwindcss@3

Once this is done, the other steps remain unchanged:

• Get started with Tailwind CSS - TailwindCSS v3 Docs

TailwindCSS v4 with PostCSS

Follow TailwindCSS guide for PostCSS:

• Install TailwindCSS v4 with PostCSS - TailwindCSS v4 Docs

npm install tailwindcss @tailwindcss/postcss postcss

Then you can easily integrate TailwindCSS to postcss.config.mjs using the @tailwindcss/postcss plugin released from v4 like this:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

And import TailwindCSS to main global.css:

@import "tailwindcss";

What's changed from v4?

In v4, numerous breaking changes were introduced. A minimum of Node.js v20 is required for usage. The init process has been removed. The tailwind.config.js file has been deprecated in favor of a CSS-first configuration. The @tailwind directive has been replaced with @import "tailwindcss";. Support for Sass, Less, and Stylus preprocessors has been removed. See all changes:

• Upgrading your Tailwind CSS projects from v3 to v4 - TailwindCSS v4 Docs
• Automatic Source Detection from TailwindCSS v4 - StackOverflow
• Deprecated: Sass, Less and Stylus preprocessors support - StackOverflow
• Removed @tailwind directives - StackOverflow
• Problem installing with "npx tailwindcss init -p" command - StackOverflow
• New CSS-first configuration option in v4 - StackOverflow
• TailwindCSS v4 is backwards compatible with v3 - StackOverflow

本文标签： typescripthow to install tailwindcss in monorepo like turborepoStack Overflow