jueves 4 abril 2024

Cómo configurar tailwind con Angular

Para comenzar, primero asegúrate de tener configurado un proyecto Angular. El método más común es utilizar Angular CLI.

ng new mi-proyecto
cd mi-proyecto

Instala Tailwind CSS

Usa npm para instalar tailwindcss y luego ejecuta el comando init para generar un archivo tailwind.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Añade las rutas a todos tus archivos de plantilla en el archivo tailwind.config.js.

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Incorpora las directivas @tailwind para cada una de las capas de Tailwind a tu archivo de estilos ./src/styles.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

Ejecuta el proceso de compilación con ng serve para iniciar tu proyecto.

Ahora puedes empezar a utilizar las clases de utilidad de Tailwind para diseñar tu contenido.

<h1 class="text-4xl font-bold underline">
  ¡Hola mundo!
</h1>

Con estos pasos, estarás listo para integrar Tailwind CSS en tu proyecto Angular.

Etiquetas:

Autor:

Jorge García

Fullstack developer