Usare TailwindCSS in Angular

Mattepuffo's logo
Usare TailwindCSS in Angular

Usare TailwindCSS in Angular

Programmazione, Javascript - AJAX

Sento sempre più spesso parlare di TailwindCSS, ed ho quindi deciso di provarlo in Angular.

Partendo dal presupposto che sto usando Angular 12, iniziamo aggiungendo TailwindCSS con questo comando:

ng add @ngneat/tailwind

Vi verranno fatte una serie di domande:

  • ho scelto no alla prima
  • classic alla seconda
  • tutte le opzioni alla terza

Vi dovreste ritrovare con il file tailwind.conf.js già creato:

const {guessProductionMode} = require("@ngneat/tailwind");

module.exports = {
  prefix: '',
  purge: {
    enabled: guessProductionMode(),
    content: [
      './src/**/*.{html,ts}',
    ]
  },
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/typography')
  ],
};

Se usate i file CSS, e non SCSS, dovreste vedere già aggiunti i fogli di stile; questo il mio file style.css:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Nel file index.html dovete aggiungere la classe al body:

  <body class="dark">
    <app-root></app-root>
  </body>

Infine, per vedere se tutto funziona, provate ad aggiungere un pò di HTML al vostro componente:

<div class="container mx-auto mt-8">
  <div class="grid grid-cols-3 gap-4">
    <div>
      <button
        class="py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600">
        Bottone
      </button>

    </div>
  </div>
</div>

Enjoy!

Condividi

Commentami!