Tailwind CSS

Angular alkalmazásba a Tailwind CSS integrálása viszonylag egyszerű, és a következő lépéseket követheted:

---

1. Telepítsd a szükséges csomagokat

Futtasd az alábbi parancsot a projekted gyökerében:

npm install -D tailwindcss@latest @tailwindcss/postcss postcss autoprefixer

Ez telepíti a Tailwind CSS-t és a szükséges PostCSS bővítményeket.

---

.postcssrc.json

{
  "plugins": {
    "@tailwindcss/postcss": {},
    "autoprefixer": {}
  }
}

tailwind.config.js

export default {
  content: ['./src/**/*.{html,ts,scss}'],
  theme: {
    extend: {}
  },
  plugins: []
};

Ez a beállítás biztosítja, hogy a Tailwind minden .html és .ts fájlban lévő osztályokat figyelje.

---

4. Importáld a Tailwind direktívákat

src/styles.scss

@import 'tailwindcss';

---

5. Indítsd újra az Angular alkalmazást

Futtasd az Angular alkalmazásodat:

ng serve

---

6. Ellenőrizd a működést

Próbálj ki egy Tailwind osztályt egy komponens HTML fájljában:

<div class="text-3xl font-bold text-blue-500">
  Tailwind működik!
</div>

---

Extra tippek

• Ha problémád van a stílusok betöltésével, győződj meg róla, hogy a angular.json-ben a styles alatt szerepel a styles.css vagy styles.scss.
• Ha nem látod a változásokat, lehet, hogy törölnöd kell a böngésző cache-t (Ctrl + Shift + R vagy Cmd + Shift + R).

Ezzel készen áll a Tailwind CSS használata az Angular alkalmazásodban!