Personalització de TailwindCSS amb Sass i Vite

TailwindCSS té un enfocament diferent de Bootstrap, ja que es basa en la utilitat i configuració mitjançant fitxers de configuració.

Instal·lació de TailwindCSS

npm install -D tailwindcss postcss autoprefixer

Configuració PostCSS

Vite llegeix automàticament la configuració PostCSS si el fitxer existeix.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Integració Sass

No es necessita Sass per a les variables de disseny (colors, mides, etc.) de TailwindCSS, ja que això es fa a tailwind.config.js. Però podem usar Sass per a:

• Importar TailwindCSS: Utilitzar un fitxer Sass com a punt d'entrada.

• Sintaxi niuada: Utilitzar el nesting de Sass.

• Escriure Scss personalitzat.

Exemple de src/scss/custom.scss amb TailwindCSS

Aquest fitxer serà el punt d'entrada i no contindrà variables per a la personalització del framework, només les directives.

// 1. DIRECTIVES DE TAILWIND
// Aquestes directives seran processades per PostCSS/Tailwind
@tailwind base;
@tailwind components;
@tailwind utilities;

// 2. US DE SASS PER A ESTILS PROPIS
// Podem usar funcions, mixins i niuatge (nesting) de Sass
$custom-color: #10b981; // Un color que no és al tema de Tailwind
$breakpoint-md: 768px;

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: $custom-color;
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

.hero-section {
  padding: 4rem 2rem;
  background-color: $custom-color;

  // Utilitzem el niuatge de Sass
  h1 {
    font-size: 2.5rem;
    color: white;

    @media (min-width: $breakpoint-md) {
      font-size: 4rem;
    }
  }

  // Podem usar @apply amb els nostres estils SASS niuats
  .btn-custom {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded transition-colors duration-300;
    
    &:hover {
      @apply bg-blue-700;
    }
  }
}

La utilitat de Sass és oferir millores de sintaxi (com el nesting i les variables) pel codi Scss propi, que es combina amb les classes generades per TailwindCSS.