¿Cómo configurar Tailwind CSS en AngularJS?

¿Qué es Tailwind CSS?

De acuerdo con la documentación oficial, Tailwind CSS es un marco CSS de primera utilidad para construir rápidamente interfaces de usuario personalizadas. Es una forma genial de escribir estilo en línea y lograr una interfaz increíble sin escribir una sola línea de tu propio CSS.

¿Qué es Angular?

Angular es una plataforma y un marco para crear aplicaciones cliente de una sola página mediante HTML y TypeScript. Angular está escrito en TypeScript. Implementa la funcionalidad principal y opcional como un conjunto de bibliotecas de TypeScript que importa a sus aplicaciones.

Entonces, comencemos con la creación de un nuevo proyecto angular y la configuración de Tailwind CSS en el proyecto angular.

Configurando un nuevo Proyecto Angular:

• Abra CMD (Ventana) o Terminal (Linux) y escriba el comando.

ng new project-name

• Después de ejecutar el comando anterior, hace algunas preguntas como se muestra a continuación, relacionadas con CSS, que es básicamente el tipo de CSS que desea usar en su proyecto angular. Seleccione CSS para este proyecto.
• También solicita el enrutamiento, habilítelo diciendo que sí.

Permítales terminar el proceso anterior.

• Una vez que se completa el proceso, hay una carpeta de proyecto. Ingrese a la carpeta usando el comando de cambio de directorio de CMD o Terminal y ejecute el siguiente comando.

ng serve --open

• Se abrirá la página predeterminada de angular en el navegador.

La configuración de Angular está lista, deje que se mueva para instalar Tailwind CSS en angular.

Instalación de Tailwind CSS en Angular Project: hay 2 formas de agregar Tailwind CSS en Angular Project.

• Uso de CDN
• Uso de PostCSS y configuración de línea de comandos

Uso de CDN:

• Abra el proyecto en su editor de código favorito.
• Explore el index.html del proyecto angular.
• Simplemente pegue la línea de abajo en la sección principal.

<enlace href=”https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=”hoja de estilo”>

Incluirá todas las bibliotecas del viento de cola en el proyecto a través de Internet. Es una manera fácil de incluir el viento de cola.

Nota: Se requiere internet. Si Internet no está disponible, entonces no funcionará.

Usando PostCSS:

• Abra el directorio del proyecto en cmd o terminal y ejecute el siguiente comando.

npm install tailwindcss postcss autoprefixer

• La instalación del comando anterior requiere la biblioteca para que se ejecute Tailwind. Configuremos el css y el postcss del viento de cola. Para eso, podemos crear un archivo con el nombre de tailwind.config.js y postcss.config.js en el archivo del proyecto.

tailwind.config.js

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js

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

• Ahora Tailwind CSS está listo para usar en su proyecto Angular y se ha configurado correctamente en el proyecto.

Ahora puede usar el CSS en línea de Tailwind y, para ensuciar más las manos, puede consultar el sitio web de Tailwind.

Referencia: https://tailwindcss.com/