{"id":44097,"date":"2024-04-19T07:00:00","date_gmt":"2024-04-19T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=44097"},"modified":"2025-01-16T14:35:18","modified_gmt":"2025-01-16T22:35:18","slug":"tailwind-css-guia","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/es\/tailwind-css-guia\/","title":{"rendered":"La Gu\u00eda Completa Sobre Tailwind CSS"},"content":{"rendered":"\n

Los frameworks de CSS han cambiado la forma en que los desarrolladores abordan el desarrollo web al proporcionar componentes y estilos predefinidos. Sin embargo, muchos frameworks vienen con dise\u00f1os con opiniones y hojas de estilo infladas que limitan la personalizaci\u00f3n.<\/p>\n\n\n\n

Tailwind CSS toma un enfoque diferente. Como un framework de CSS de utilidades primero, proporciona clases de utilidad de bajo nivel que permiten a los desarrolladores construir dise\u00f1os personalizados sin estar limitados por componentes predefinidos.<\/p>\n\n\n\n

Con m\u00e1s de 675,375 sitios web<\/a> utilizando Tailwind CSS y m\u00e1s de 8.61 millones de repositorios<\/a> dependientes, Tailwind se ha convertido en algo m\u00e1s que otro framework de CSS.<\/p>\n\n\n\n

En este art\u00edculo, repasaremos la comprensi\u00f3n de los conceptos de Tailwind CSS, el proceso de configuraci\u00f3n y el uso pr\u00e1ctico para que puedas comenzar a construir tus hermosas interfaces de usuario personalizadas sin necesidad de aprender CSS.<\/p>\n\n\n\n

\u00a1Empecemos!<\/p>\n\n\n\n

\u00bfQu\u00e9 es Tailwind CSS?<\/strong><\/h2>\n\n\n\n

Tailwind CSS es un framework de CSS<\/a> altamente personalizable y de bajo nivel que proporciona un conjunto de clases de utilidad para construir r\u00e1pidamente interfaces de usuario personalizadas. Fue desarrollado y lanzado por primera vez por Adam Wathan en 2017.<\/p>\n\n\n\n

Desde entonces, Tailwind ha experimentado una trayectoria ascendente<\/a> en sitios web construidos utilizando la biblioteca Tailwind.<\/p>\n\n\n\n

\""Estad\u00edsticas<\/figure>\n\n\n\n

Si bien el crecimiento actualmente parece haberse ralentizado seg\u00fan los gr\u00e1ficos de BuiltWith, el framework en s\u00ed se actualiza regularmente con nuevas caracter\u00edsticas, clases y m\u00e1s.<\/p>\n\n\n\n

Seg\u00fan los datos de la pila tecnol\u00f3gica de BuiltWith<\/a>, m\u00e1s de 100,000 sitios web solo en los Estados Unidos utilizan Tailwind para construir sus interfaces de usuario, junto con el Reino Unido, Indonesia, Alemania y otros pa\u00edses que figuran entre los 10 principales usuarios de esta biblioteca.<\/p>\n\n\n\n

\"Estad\u00edsticas<\/figure>\n\n\n\n

La filosof\u00eda principal detr\u00e1s de Tailwind CSS es proporcionar a los desarrolladores<\/a> un conjunto de bloques de construcci\u00f3n en lugar de componentes predefinidos. Estos bloques de construcci\u00f3n son clases de utilidad peque\u00f1as y de un solo prop\u00f3sito que se pueden combinar para crear dise\u00f1os complejos y receptivos.<\/p>\n\n\n\n

Este enfoque permite una mayor flexibilidad y control sobre el dise\u00f1o, ya que puedes personalizar cada aspecto de tu IU sin estar limitado por los estilos con opiniones del framework.<\/p>\n\n\n\n

\u00bfQu\u00e9 hace diferente a Tailwind CSS?<\/strong><\/h2>\n\n\n\n

Tradicionalmente, al trabajar con CSS, los desarrolladores escriben clases personalizadas en hojas de estilo separadas para estilizar sus elementos HTML. Este enfoque puede llevar a archivos CSS<\/a> grandes y hacer que sea dif\u00edcil mantener y actualizar los estilos en todo un proyecto.<\/p>\n\n\n\n

Tailwind proporciona un conjunto completo de clases de utilidad que se pueden aplicar directamente a los elementos HTML. Estas clases son altamente componibles, lo que permite a los desarrolladores construir dise\u00f1os complejos y personalizados sin escribir una sola l\u00ednea de CSS personalizado.<\/p>\n\n\n\n

Por ejemplo, en lugar de escribir una clase de CSS personalizada para estilizar un bot\u00f3n, puedes usar las clases predefinidas de Tailwind de esta manera:<\/p>\n\n\n\n

<button class=”bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded”>
  Button
<\/button><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Este enfoque tiene varios beneficios:<\/p>\n\n\n\n

    \n
  1. Desarrollo m\u00e1s r\u00e1pido<\/strong>: Las clases predefinidas ayudan a los desarrolladores a construir e iterar r\u00e1pidamente en dise\u00f1os sin tener que cambiar constantemente entre archivos HTML<\/a> y CSS.<\/li>\n\n\n\n
  2. Estilo consistente:<\/strong> Tailwind proporciona un conjunto estandarizado de clases, lo que ayuda a mantener la consistencia en el dise\u00f1o en todo el proyecto.<\/li>\n\n\n\n
  3. Archivos CSS m\u00e1s peque\u00f1os<\/strong>: Debido a que los estilos se aplican directamente en el HTML, no es necesario tener archivos CSS grandes y personalizados.<\/li>\n\n\n\n
  4. Mantenimiento m\u00e1s f\u00e1cil<\/strong>: Con los estilos definidos en el HTML, es m\u00e1s f\u00e1cil ver c\u00f3mo los cambios afectar\u00e1n a un elemento espec\u00edfico sin tener que buscar en archivos CSS separados.<\/li>\n\n\n\n
  5. Mejor rendimiento<\/strong>: Muchos sistemas de estilo modernos como Emotion<\/a> o Styled Components<\/a> dependen de JavaScript (generalmente durante el tiempo de ejecuci\u00f3n, lo que ralentiza el rendimiento) para renderizar tu CSS. Tailwind es solo CSS al final del d\u00eda.<\/li>\n\n\n<\/ol>\n\n\n\n
    \n\n

    <\/p>\n\n\n\n\u201c<\/em>Tailwind me convirti\u00f3 en un desarrollador de stack completo ?\u201d\u00a0<\/em>
    \u2014 <\/em>    Boris Lepikhin<\/a><\/cite><\/blockquote>\n\n\n\n

    Comenzando con Tailwind CSS<\/strong><\/h2>\n\n\n\n

    Antes de comenzar con ejemplos, configuremos un proyecto b\u00e1sico con Tailwind CSS. Supondremos que tienes cierta familiaridad con HTML y CSS. Adem\u00e1s, debes tener npm instalado en tu sistema<\/a>. \u00a1Una vez que hayas terminado, est\u00e1s listo para seguir adelante!<\/p>\n\n\n\n

    Crea un nuevo directorio para tu proyecto y navega hacia \u00e9l:<\/strong><\/p>\n\n\n\n

    mkdir my-tailwind-project
    cd my-tailwind-project<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Inicializa un nuevo proyecto npm e instala Tailwind CSS:<\/strong><\/p>\n\n\n\n

    npm init -y
    npm install -D tailwindcss<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Crea un archivo tailwind.config.js:<\/strong><\/p>\n\n\n\n

    npx tailwindcss init<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Crea un archivo input.css y agrega lo siguiente:<\/strong><\/p>\n\n\n\n

    @tailwind base;
    @tailwind components;
    @tailwind utilities;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Actualiza tu archivo tailwind.config.js para procesar tu input.css:<\/strong><\/p>\n\n\n\n

    module.exports = {
      content: [“.\/src\/**\/*.{html,js}”],
      theme: {
        extend: {},
      },
      plugins: [],
    }<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Crea un archivo index.html en un directorio src y agrega lo siguiente:<\/strong><\/p>\n\n\n\n

    <!DOCTYPE html>
    <html<\/strong>>
      <head<\/strong>>
        <link<\/strong> href=”\/dist\/output.css” rel=”stylesheet”>
      <\/head<\/strong>>
      <body<\/strong>>
        <h1<\/strong> class=”text-3xl font-bold text-center mt-4″>Welcome to Tailwind CSS!<\/h1<\/strong>>
      <\/body<\/strong>>
    <\/html<\/strong>><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Construye tu CSS:<\/strong><\/p>\n\n\n\n

    npx tailwindcss -i .\/src\/input.css -o .\/src\/output.css –watch<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Ahora, cuando abras index.html en tu navegador, deber\u00edas ver un t\u00edtulo grande y en negrita que dice \u201cWelcome to Tailwind CSS!\u201d<\/strong><\/p>\n\n\n\n

    \""Welcome<\/figure>\n\n\n\n

    \u00a1Felicidades, has configurado tu primer proyecto de Tailwind!<\/p>\n\n\n\n

    Clases de Utilidad de Tailwind CSS<\/strong><\/h2>\n\n\n\n

    Tailwind CSS proporciona una amplia gama de clases de utilidad que cubren varios aspectos de estilo, como dise\u00f1o, espaciado, tipograf\u00eda, colores y m\u00e1s. Estas clases siguen una convenci\u00f3n de nomenclatura que facilita entender su prop\u00f3sito.<\/p>\n\n\n\n

    \n\n\n\n

    \n\t\n\t\t<\/svg>\n\t\t<\/span>\n\t\t<\/svg>\n\t<\/a>\n

    Tipograf\u00eda<\/h3>\n

    La tipograf\u00eda es el proceso de organizar un tipo de letra en variaciones de fuente, tama\u00f1o y espaciado. Esto implica hacer que la apariencia, el estilo y la disposici\u00f3n del texto sean legibles y agradables a la vista.<\/p>\n \n<\/div>\n\n<\/p>\n\n\n\n

    Exploraremos algunas clases de utilidad com\u00fanmente utilizadas en Tailwind CSS<\/a>.<\/p>\n\n\n\n

    Clases de Dise\u00f1o de Tailwind<\/strong><\/h3>\n\n\n\n