<!DOCTYPE html>
Como instalar Tailwind CSS en ReactJs + Vite
En este tutorial, te mostraremos cómo instalar Tailwind CSS en un proyecto de ReactJs utilizando Vite como bundler.
Pasos a seguir:
- Crear un nuevo proyecto de ReactJs utilizando Vite:
- Instalar Tailwind CSS y las dependencias necesarias:
- Crear un archivo de configuración para Tailwind CSS:
- Editar el archivo tailwind.config.js y añadir las siguientes lÃneas:
- Importar Tailwind CSS en tu archivo de estilos:
- Actualizar el archivo de configuración de postcss:
- Ejecutar el proyecto:
npx create-react-app my-app --template vite
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init
module.exports = {
purge: ['./index.html', './src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
@import 'tailwindcss/tailwind.css';
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
}
npm start
¡Listo! Ahora has instalado correctamente Tailwind CSS en tu proyecto de ReactJs utilizando Vite como bundler. ¡Disfruta de la potencia y facilidad de uso de Tailwind CSS en tu aplicación!
vlw
He probado todos los videos y este fue el unico que me sirvio y adicionalmente es un video claro y conciso muchas gracias bro