¿Cómo configuro Tailwind CSS con Vite?

Viento de cola es un marco CSS popular que simplifica el diseño de su interfaz de usuario. Proporciona clases de bajo nivel, y esas clases se combinan para crear estilos para diferentes componentes.

Vit JS es una herramienta de compilación que proporciona una experiencia de desarrollo más rápida para proyectos web modernos. Simplifica la forma en que construimos y desarrollamos aplicaciones web front-end. Creará un servidor localhost para ejecutar su aplicación web front-end y agrupar su javascript, CSS y recursos para la producción.

En este artículo, veremos cómo configurar Tailwind CSS con Vite. Antes de continuar con la instalación de Tailwind CSS, asegúrese de que node y npm estén instalados. De lo contrario, consulte el artículo Instalación de Node.js en Windows/Linux para conocer los procedimientos de instalación detallados.

Pasos para instalar el Tailwind CSS con la aplicación Vite.js: Siga los pasos a continuación para configurar un CSS de viento de cola usando la aplicación Vite.js:

Paso 1: Crear una carpeta de proyecto

Cree una carpeta y escriba el nombre deseado en esa carpeta. En esa carpeta, cree un archivo HTML y agregue el código predeterminado (utilice ! luego presione enter).

Paso 2: Instale los archivos necesarios de npm

Una vez que haya creado una carpeta que contenga un archivo HTML, abra el terminal en la carpeta raíz del proyecto y escriba el siguiente comando en la terminal. Este comando simplemente genera un proyecto npm vacío y aquí, -y estado por si Un archivo llamado paquete.json fue creado. (Este paso se puede omitir, pero prefiero usarlo)

npm init -y

Paso 3: Instale Tailwind CSS junto con vite.js

Ejecute el siguiente comando en la terminal para instalar todas las dependencias de Tailwind a través de vite. Este comando crea un node_modules carpeta y paquete-bloqueo.json Archivo.

npm install -D tailwindcss postcss autoprefixer vite

Paso 4: Cree el archivo de configuración de Tailwind

El siguiente comando genera 2 archivos de configuración llamados postcss.config.js y tailwind.config.js.

npx tailwindcss init -p

postcss.config.js

tailwind.config.js

Paso 5: agregue pautas de viento de cola

haz uno ahora estilo.css y agregue las pautas de la capa CSS de Tailwind en ese archivo. Una vez que se agregan todas las pautas de capa estilo.cssahora conecta el estilo.css archivo en su archivo HTML usando el etiquetas

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

Paso 6: Actualizaciones en package.json

hicimos uno paquete.json archivo (en el paso 2). Este archivo contiene metadatos importantes sobre su proyecto y registra sus dependencias.

«guiones»: {
“prueba”: “echo ”Error: no se especificó ninguna prueba” && exit 1″
},

Cambie las líneas de código de arriba con las líneas de abajo, y no olvide agregar una coma al final.

«guiones»: {
«comenzar»: «invitar»
},

Paso 7: Configure las rutas de la plantilla

Necesitamos el contenido en el tailwind.config.js archivo para que aplique Tailwind CSS en todos los archivos.

Línea para actualizar

content: ["*"],

Después de actualizar el archivo tailwind.config.js:

Paso 8: Revisa la estructura del proyecto

Verifique la estructura del proyecto y todos los archivos necesarios.

Paso 9: Ejecute la aplicación

Use el comando para ejecutar la aplicación comienza la ejecución de npm en la terminal.

npm run start

La línea de código anterior genera un servidor localhost y sigue el enlace del servidor para abrir la aplicación en el navegador web.

Paso 10: prueba Tailwind CSS con un ejemplo

Ahora que hemos configurado con éxito el Tailwind CSS y sabemos cómo ejecutar la aplicación, probémoslo con un ejemplo simple.

Ejemplo: Este ejemplo ilustra la ejecución exitosa del código después de configurar Tailwind-CSS con la aplicación Vite.

Salida: Utilizar para ejecutar la aplicación comienza la ejecución de npm en la terminal.