Instalación y configuración de Tailwind CSS en proyectos HTML

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:40

Instalación y configuración de Tailwind CSS en proyectos HTML

Curso Básico de Vue.js 2

Clase 27 de 38

Clase 27 / 38

Recursos

¿Cómo instalar Tailwind CSS y configurar tu proyecto?

Tailwind CSS es un framework que te permitirá crear contenido HTML con estilos a través de clases de utilidad. Esto implica que podrás aplicar estilos como márgenes, colores y tipografía, simplemente usando clases predefinidas. Aquí te explicamos cómo integrar Tailwind CSS en tu proyecto.

¿Qué es Tailwind CSS?

Tailwind CSS es un "utility-first" framework, lo que significa que se basa en clases que puedes usar directamente en tus archivos HTML para aplicar estilos específicos. A diferencia de otros frameworks como Bootstrap o Bulma, Tailwind se centra en escribir menos CSS y utilizar más clases utilitarias.

Características de Tailwind CSS:

Clases para colores, márgenes, tipografías, bordes y dimensiones.
Flexibilidad para alinear elementos usando Flexbox.
Construcción ágil sin necesidad de escribir mucho código CSS.

¿Cómo instalar Tailwind CSS en tu proyecto?

Preparación del entorno: Antes de comenzar, asegúrate de estar en el directorio raíz de tu proyecto en la terminal.
Ejecutar el comando de instalación: Para instalar Tailwind CSS, necesitas correr el comando:
```
npm install -D tailwindcss
```
O si prefieres usar Yarn, puedes ejecutar:
```
yarn add -D tailwindcss
```
Configuración automática: Tras la instalación, debes configurar Tailwind para que funcione correctamente con tu proyecto. Para esto, puedes generar un archivo de configuración con el siguiente comando:
```
npx tailwindcss init
```

¿Cómo incluir Tailwind CSS en tu proyecto?

Configurar el archivo tailwind.config.js: Este archivo te permitirá personalizar los estilos y las configuraciones de Tailwind a tu gusto.
Importar Tailwind CSS: Abre el archivo donde deseas incluir los estilos, como index.css, y añade los siguientes importes:
```
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
```
Configurar en main.js: En tu archivo principal como main.js, importa el archivo CSS donde incluiste Tailwind:
```
import './index.css';
```

¿Qué debes tener en cuenta al usar Tailwind CSS?

Modularidad: Las clases de Tailwind permiten componer estilos de forma modular y reutilizable.
Flexibilidad: Puedes cambiar configuraciones fácilmente moviendo tus archivos entre diferentes directorios sin preocuparte por ajustar rutas relativas gracias a soluciones como Webpack y Vue CLI.
Optimización: Tailwind facilita optimizar tu CSS final, evitando la escritura y el mantenimiento de CSS innecesario.

Tailwind CSS es una herramienta poderosa que te permitirá construir rápidamente interfaces visuales con la mínima cantidad de CSS escrita. Tómate el tiempo para familiarizarte con su documentación, practica con las clases utilitarias, y verás cómo pronto se convierte en un recurso indispensable en tu caja de herramientas de desarrollo web. ¡No te detengas aquí y sigue aprendiendo para crear proyectos aún más impresionantes!

Rafael Perez Grisales

Hace 6 años

Buen dia a todos, se me presento el siguiente error al tratar de instalar Tailwind CSS:

Error: PostCSS plugin tailwindcss requires PostCSS 8.

Asi que despues de leer un poco en algunos foros y en la documentacion oficial de Tailwind, hice lo siguiente:

desinstale las dependencias de Tailwind: npm uninstall tailwindcss postcss autoprefixer
limpie la cache de npm npm cache clean --force
instale las dependecias sugeridas en la documentacion oficial de Tailwind para solventar este error npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Cree los archivos de configuracion de Tailwind utilizando el siguiente comando npx tailwindcss init -p
Edite el archivo de configuracion tailwind.config.js y reemplace la linea de codigo purge: [], por esta purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
Finalmente, cree la carpeta css y el archivo tailwind.css manualmente y coloque las referencias de Tailwind @tailwind base; @tailwind components; @tailwind utilities;

Espero que sirva como refencia para aquellas personas que les sucede el mismo error que a mi; toca esperar a que solucionen estos problemas de compatibilidad para actualizar por completo el proyecto de VUE.

Comentarios (56)56 comentarios

Carlos Eduardo Gomez García

La diferencia entre npm install y vue add puede ser confusa pero trataré de explicarlo:

npm install: Instala una dependecia dentro de nuestro proyecto, simplemente la agrega para que podamos empezar a hacer uso de ella

vue add: Añade un plugin al CLI de vue, en este caso, añadimos un plugin que el profesor creó, ese plugin ya se encargaba de installar a través de npm install la dependencia de Tailwind, pero no solo lo instaló, sino que también lo configuró, con npm install tendrías que hacer esas configuraciones tu mismo, en este caso, el plugin del profesor ya hizo las configuraciones

Andrés Felipe Lopez gomez

Hace 5 años

Excelente

Luis Alejandro Vera Hernandez

Excelente explicacion, gracias por tomarte el tiempo de compartirnoslo

Lucas Durán

Hace 7 años

Hay que correr nuevamente npm run serve para que tome los cambios

Moisés Cedeño

Gracias compañero por este dato.

Juan Ignacio Contreras

muy buen dato GRACIAS! me estaba quemando el coco ya jajaja

Jose Luis Campos Bautista

Deberían dar un curso en dónde enseñen a crear estos plugins.

Nacho Anaya

Profesor

Seria una gran idea!

Ivan Gonzalez

Curso de NPM

Freddy Córdova Arana

vue add @ianaya89/tailwind

Jairo Lachira Peralta

¿Por qué usan vue add y no npm install? ¿Hay alguna diferencia?

Arturo Casas Quiroga

@Jairo Tengo entendido que se usa vue add para agregar una librería dentro del proyecto, y npm install instala de forma global la librería

jonathan sanchez

TailwindCSS es un framework que no tiene componentes sino utilidades de CSS, en vez de preocuparte por decidir que componente usar TailwindCSS te da clases que hacen algo específico en CSS como poner texto en negritas, redondear bordes, poner sombras y cosas atómicas y pequeñas.

Ricardo Celis

https://tailwindcss.com/

Gustavo Adolfo Perez Ramos

Si tienes problemas con la instalación del plugin pueden usar este otro que esta actualizado y también es fácil de configurar:

vue-cli-plugin-tailwind

Solo tienen que ejecutar en consola:

vue add tailwind

Y seleccionar opción " full " para agregar toda la configuración de tailwind, luego puedes seguir con la clase con normalidad

Muchas gracias

Fernando Mejia

Ojo yo tuve que detener el server y volver a prenderlo para que reconociera los cambios al agregar Tailwind

Jose Noriega

Error TailWind

Me topé con un error después de añadir el plugin de tailwind y lo solucioné instalando lo siguiente:

 npm i -D autoprefixer@9.8.6 postcss-cli@8.1.0

Error

Juan Valentin Perdomo Bonilla

gracias, me paso eso, a que se debe el error?

Ya paso ha pasado un tiempo de esto pero recuerdo que cuando inicié el proyecto lo configuré para que usará SCSS y al parecer esto causó los conflictos con las dependencias base.

Abner Batz

vue add@ianaya89/tailwind plugin creado por ianaya para configurar y tener tailwind funcionando en el proyecto, importante estar en la carpeta raiz del proyecto antes de correr estos comandos.

Jhan Carlos Viloria Murillo

Guía oficial para instalar Tailwind manualmente: https://github.com/tailwindcss/setup-examples/tree/master/examples/vue-cli

Sergio Iván Urbina Rodríguez

Excelente aporte, me ire por esta ruta

Miguel Angel Reyes Moreno

Tailwind CSS

Para este proyecto en particular, hacemos vue add @ianaya89/tailwind

Gonzalo Benavente

no se porque de la noche a la mañana me empezo a aparecer 36 vulnerabilidades en npm y no importa que haga no se corrigen ayudaaaa. alguien sabe como corregirlo? porque instale todo de nuevo en una maquina virtual y me sigue apareciendo

Duarte Rosa

Hola, ¿Qué diferencia tiene Tailwind con Bulma? ¿Cuál recomiendan?

DIEGO Córdova Nieto

Veo que tailwind es una mejor opción que boostrap para usar con Vue...

De todas maneras, si para un proyecto quisiera usar bootstrap, ¿también se puede agregar con algún comando ?

Fernando Andres Muñoz Suazo

Una manera rápida es simplemente agreando el CDN de boostrap dentro de nuestro HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

O bien implementándolo como en cualquier otro proyecto y mandándolo a llamar donde lo necesitemos.

David Fernando Aguirre Rodriguez

Bootstrap-Vue no sólo es compatible con los componentes de Bootstrap y el sistema de rejilla, sino que también incluye soporte para las Vue.js Directives, lo que nos proporciona el conjunto completo de características del ecosistema Vue.js.

Una de las características más interesantes de Bootstrap-Vue es que tiene un playground en línea. Este nos permite exportar nuestro código a JSFiddle. ¿No es genial?

Te dejo la referencia: https://www.ma-no.org/es/programacion/javascript/integracion-de-bootstrap-4-con-vue-js-usando-bootstrap-vue

Gary Obed Rodas Flores

Que diferencias tiene Tailwind con bootstrap?

Gabriel De Andrade

La mayor diferencia es que Tailwind a diferencia de otros frameworks CSS no tiene un tema por defecto ni es un UI Kit, no toma decisiones en cómo debería lucir tu aplicación :D

Fabián Antonio Salgado Sepúlveda

Además, que Tailwind es solo css, no como bootstrap. Bootstrap cuenta además cuenta con componentes con funcionalidades de javascript.

Jorge Uribe

A los que han llegado hasta acá actualmente (febrero 2022), el curso esta desactualizado y pueden tener inconvenientes al momento de instalar y realizar el proyecto como tal y eso frustrar, así me sentía yo pero me toco investigar por mi cuenta y leer la documentación de vue, vuecli y tailwind para saber como crear e integrar un proyecto actualmente y al final fue satisfactorio por que aprendí mucho mas y lo hice por mi cuenta, los invito a que lo intenten y si necesitan ayuda me dejan un comentario, con gusto les ayudare. Saludos.

Luis Alberto Anguita Fernandez

Si les da el siguiente error: Syntax Error: Error: PostCSS plugin postcss-nested requires PostCSS 8. Lo que deben hacer es instalar postcss: npm install postcss

Jose Luis Barboza Gonzales

installar tailwind css -> vue add @ianaya89/tailwind import tailwind en main js -> import “@/assets/css/tailwind.css” -> sin nombre y @ es ref src

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

Instalación y configuración de Tailwind CSS en proyectos HTML