Skip to content

Cómo instalar y usar Tailwind CSS 3.0

ALT

David Morales

Installing Tailwind CSS

Tailwind CSS 3.0 está en una fase bastante temprana, pero que ya conviene ir usando para que el proyecto que estés preparando no se quede anticuado en poco tiempo.

Tailwind CSS 3.0 puede usarse de 3 maneras distintas:

Vamos a ver cada una de ellas.

Usando el Playground de Tailwind CSS

La forma más fácil de probar Tailwind CSS es mediante el Playground. Se trata de un editor online donde el framework ya está cargado, con una previsualización que se actualiza mientras vas escribiendo.

Para acceder a esta herramienta, tienes dos maneras:

En el Playground hay dos grandes partes:

El Playground de Tailwind CSS

Verás que ya hay código HTML en el editor. Es un ejemplo que se carga cuando accedes, para que puedas empezar a modificar y experimentar.

Arriba puedes ver una numeración, que es la versión de Tailwind CSS que se ha cargado. Si haces clic, verás las últimas disponibles para cada versión mayor. Ahora mismo, la versión 3 se encuentra en fase alpha, y es la que te recomiendo usar. Cuando la seleccionas todo sigue viéndose exactamente igual.

En el editor (parte izquierda) es donde se trabaja casi al completo con Tailwind CSS. Tiene resaltado de sintaxis, autocompletado, detección de colores, indentación, etc.

Encima del editor hay 3 pestañas:

Si quieres ver una demostración de uso del Playground, te recomiendo ver el vídeo-tutorial de Tailwind CSS que acompaña a este artículo.

Usando el CDN de Tailwind CSS

Si te ha gustado el Playground y quieres algo parecido pero usando un editor de código en tu máquina, te recomiendo usar el CDN de Tailwind CSS. Es la forma más rápida de usar el framework en local sin instalar nada.

El CDN de Tailwind CSS

Al usar el CDN, el script monitoriza los cambios que haces en el HTML, detectando las clases que usas y compilando el CSS en el navegador, en tiempo real.

Todas las características del framework están disponibles por defecto.

Como puedes ver en la imagen, el script que carga el CDN acepta un parámetro plugins, donde se especifican los plugins oficiales que quieres cargar, separados por comas.

A partir de aquí, ya puedes copiar tu HTML del Playground y pegarlo dentro de las etiquetas body. O si quieres empezar desde cero, puedes hacerlo directamente dentro del body.

El CDN lo veo como un paso intermedio entre el Playground y el siguiente punto, que es compilar tu código CSS.

De nuevo, si quieres ver una demostración del CDN, mira el vídeo al final de este artículo.

Usando el compilador de Tailwind CSS

Si vas a trabajar en serio con Tailwind CSS en tu proyecto, la manera más correcta de hacerlo es instalando las librerías y compilando el código CSS final, porque eso también te va a abrir la puerta a muchas características avanzadas de Tailwind CSS que puedes necesitar más adelante.

Antes de empezar, elimina la etiqueta script que carga el CDN.

Abre el terminal para hacer las instalaciones.

Instalando Node.js

El primer paso es instalar Node.js Si ya lo tienes instalado, puedes pasar al siguiente punto. En caso contrario sigue leyendo.

Node.js para macOS y Linux

La instalación es idéntica en macOS y Linux.

Node.js para Windows

Instalando Tailwind CSS y sus dependencias

Abre el terminal y escribe:

npm install -D tailwindcss@next postcss@latest autoprefixer@latestCode language: CSS (css)

Cuando npm termine de instalar, verás que se han creado 3 elementos nuevos:

Con esto ya tienes Tailwind CSS instalado. Pero si además quieres instalar los plugins oficiales, puedes hacerlo así:

npm install -D @tailwindcss/typography@next @tailwindcss/forms@next @tailwindcss/aspect-ratio@latest @tailwindcss/line-clamp@latestCode language: CSS (css)

Son 4 plugins:

Solo los dos primeros tienen versión en desarrollo, por eso especificamos el sufijo @next. De esa forma los puedes usar con Tailwind CSS 3.0 En los demás puedes usar sus últimas versiones sin problema.

Si en algún momento quieres actualizar los paquetes que llevas instalados hasta ahora, puedes hacerlo con este comando:

npm update

Con los paquetes ya instalados, ahora tienes que inicializar el proyecto para usarlo con Tailwind CSS:

npx tailwindcss init

Te indicará que se ha generado el archivo tailwind.config.js Este es el archivo de configuración de Tailwind CSS.

El contenido de este archivo de configuración es muy similar a la pestaña Config del Playground.

La configuración esencial aquí es indicar al compilador en qué archivos buscar las clases de Tailwind CSS que uses, para generar el archivo CSS final.

En el vídeo que puedes ver a continuación te muestro todo este proceso con algunos detalles más.

Cómo instalar y usar Tailwind CSS

En este vídeo te enseño las 3 maneras de usar Tailwind CSS. Cubro el Playground, la versión CDN y la instalación de los paquetes.

Además puedes ver cómo convierto un HTML con CSS estándar, a usar las clases de utilidad de Tailwind CSS.

Written by

David Morales

Computer Engineer

Teaching my software engineering knowledge in a creative way.

Would you like to get the 10 Ninja Keys of the Developer?

An exclusive PDF for Newsletter subscribers.

You will also be notified of future articles and affordable courses (in the pipeline) that will turn you into a ninja developer.

View privacy information

Leave a reply

Please fill in all fields.

Your email address will not be published.

View privacy information