typescript - jak nainstalovat tailwindcss v monorepu jako turborepo

// Poznámka: Nehledám řešení. Jsem tu jen proto, abych vám řekl, jak tento problém řeším

npx create-turbo@latest //vytvořit monorepo projekt

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

problém je nemožnost vytvořit tailwind.config.json

pokud jste schopni vytvořit soubor "tailwind.config.json", pak můžete TailwindCSS používat a importem si ho šťastně používat

/** @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: [],
}

Chcete-li nainstalovat Tailwind v monorepu, použijte následující kroky :-

nejprve přejděte do apps/web a do souboru package.json přidejte následující ručně:-

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

poté spusť:-

npm install

po tomto následující příkazy nebudou dávat žádnou chybu..

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

Odpověď č. 1

TailwindCSS v3

Instalace TailwindCSS v3 a v4 se liší. Očekávali jste instalaci v3, ale v4 je nová nejnovější verze. Pro instalaci v3 použijte:

npm install -D tailwindcss@3

Jakmile je toto hotovo, ostatní kroky zůstávají nezměněny:

Začněte s Tailwind CSS - Dokumentace TailwindCSS v3

TailwindCSS v4 s PostCSS

Postupujte podle průvodce TailwindCSS pro PostCSS:

Nainstalujte TailwindCSS v4 s PostCSS - Dokumentace TailwindCSS v4

npm install tailwindcss @tailwindcss/postcss postcss

Pak můžete snadno integrovat TailwindCSS do postcss.config.mjs pomocí pluginu @tailwindcss/postcss uvolněného od verze 4 takto:

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

A importujte TailwindCSS do hlavního souboru global.css:

@import "tailwindcss";

Co se změnilo od verze 4?

Ve verzi v4 bylo zaváděno mnoho zásadních změn. Pro použití je vyžadována alespoň verze Node.js v20. Proces init byl odstraněn. Soubor tailwind.config.js byl zrušen ve prospěch konfigurace orientované na CSS. Direktiva @tailwind byla nahrazena @import "tailwindcss";. Podpora preprocesorů Sass, Less a Stylus byla odstraněna. Viz všechny změny: