Tailwind CSS Ultimate Guide: Consejos prácticos de principiante a maestro

¿Qué es Tailwind CSS?

Tailwind CSS es un framework CSS que proporciona un conjunto de clases de utilidad configurables de bajo nivel para crear rápidamente interfaces de usuario personalizadas directamente en HTML. A diferencia de marcos como Bootstrap o Bulma, que proporcionan componentes prediseñados (por ejemplo, botones, tarjetas), Tailwind proporciona clases CSS atómicas, cada una de las cuales suele corresponder a una sola propiedad CSS o a un conjunto de ellas. Por ejemplo.text-center Correspondiente text-align: center;，.p-4 Correspondiente padding: 1rem;。

Esta filosofía de “clases funcionales” significa que los desarrolladores pueden “ensamblar” cualquier estilo que deseen combinando estas clases individuales sin tener que escribir CSS personalizado, lo que mejora enormemente la velocidad de desarrollo y mantiene las hojas de estilo pequeñas, porque eventualmente la Esto mejora enormemente la velocidad de desarrollo y reduce el tamaño de las hojas de estilo, ya que, con el tiempo, la herramienta de compilación elimina todas las clases no utilizadas mediante una “optimización de árbol”.

Conceptos clave y principios de funcionamiento

Comprender los conceptos básicos de Tailwind CSS es clave para dominar su esencia. Su filosofía de diseño gira en torno a la practicidad, la componibilidad y el diseño responsivo.

Lecturas recomendadas Dominar el CSS de Tailwind: Guía práctica y buenas prácticas de principio a fin。

Filosofía de diseño que da prioridad a la practicidad.

“La practicidad es lo primero” es la piedra angular de Tailwind. El framework ofrece un gran número de clases de una sola función, como la clase .bg-blue-500、.rounded-lg、.flex. Los desarrolladores construyen componentes complejos combinando estas clases como si fueran bloques de Lego. Este enfoque evita la necesidad de que el CSS tradicional tenga un nombre de clase semántico para cada componente (p. ej. .user-card), y elimina los costes de cambio de contexto al alternar entre archivos CSS y HTML.

Asistente de creación de sitios web de WordPress.com

99,999% de disponibilidad + recuperación de desastres en toda la región, asistencia 24 horas al día, 7 días a la semana, AI Build Site gratuito con la compra del paquete Blog

Nombre de dominio gratuito durante un año

Visita el Asistente del constructor de sitios web de WordPress.com →...

Asistente de creación de sitios web de UltaHost

Más de 900 plantillas gratuitas y personalizables para obtener la potencia SEO que necesita para optimizar su sitio web de cara a las búsquedas

Oferta 40%

Visita UltaHost Website Builder Helper → Constructor de sitios web.

Diseño responsivo y puntos de interrupción.

Tailwind dispone de un sistema integrado de puntos de interrupción adaptables con nombres de clase que pueden prefijarse fácilmente para aplicar estilos a distintos tamaños de pantalla. Los prefijos de puntos de interrupción predeterminados incluyen:sm:、md:、lg:、xl:、2xl:。

Por ejemplo, un elemento apilado en móvil y alineado horizontalmente en una pantalla grande podría implementarse así:

<div class="flex flex-col md:flex-row">
  <div>Contenido 1</div>
  <div>Contenido 2</div>
</div>

Esto significa que el valor por defecto (móvil) es flex-col(verticalmente), en una pantalla mediana (md:) y por encima se convierte en flex-row(Horizontal).

Configuración y personalización

La configuración por defecto de Tailwind se puede encontrar en el directorio raíz del proyecto a través del archivo tailwind.config.js para una personalización más profunda. En este archivo, puede modificar las paletas de colores, las relaciones de espaciado, los tipos de letra, los valores de los puntos de interrupción e incluso añadir nuevas clases de utilidades.

Lecturas recomendadas Aprender Tailwind CSS: Construir páginas web modernas y responsive desde cero。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

Una vez personalizada, puede utilizar la función .bg-brand-blue Y .w-128 Esto es un tipo personalizado así.

Uso e instalación básicos

Antes de que puedas empezar a utilizar Tailwind, necesitas integrarlo en tu proyecto; Tailwind puede instalarse de varias formas, la más habitual a través de npm o yarn.

Instalación mediante PostCSS (recomendado)

Para la mayoría de los proyectos front-end modernos (por ejemplo, utilizando Vite, Webpack), la instalación a través de PostCSS es la forma más integrada de hacerlo. Primero, instala Tailwind y sus dependencias a través de npm:

El asistente para crear sitios web de Bluehost.

Proporciona herramientas de creación de sitios web de IA, chat en línea y soporte telefónico las 24 horas del día, los 7 días de la semana, un dominio gratuito por un año, CDN gratuito y un acuerdo de nivel de servicio (SLA) de tiempo de actividad del 99,991 %

Visita Bluehost.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Esto instalará los paquetes necesarios y generará un tailwind.config.js archivo de configuración. A continuación, debe crear un perfil PostCSS (p. ej. postcss.config.js) y añade Tailwind:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

A continuación, en el archivo CSS principal (por ejemplo, el archivo src/styles.cssIntroduzca las instrucciones de Tailwind en el código:

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

Por último, asegúrate de que PostCSS se gestiona correctamente en el proceso de compilación de tu proyecto. Por ejemplo, en proyectos Vite o Webpack, leerán automáticamente el archivo postcss.config.js。

Lecturas recomendadas Dominar Tailwind CSS: Una guía práctica y de mejores prácticas para principiantes hasta expertos。

Utilizar un CDN para el desarrollo rápido de prototipos

Para prototipos rápidos, demos o archivos HTML sencillos, se pueden utilizar enlaces CDN. Basta con añadir la etiqueta <head> Añade el siguiente enlace en la sección:

<script src="https://cdn.tailwindcss.com"></script>

Tenga en cuenta que el enfoque CDN no admite la personalización y no puede utilizarse con la función @apply y como contiene todos los estilos, el tamaño del archivo es grande, por lo que no se recomienda para entornos de producción.

hosting.com

SSL gratis, Cloudflare CDN, WAF, más de 40 salas de servidores globales para elegir, latencia más baja cerca de ti, soporte de servicio 24/7/365, ¡ahora puedes ahorrar hasta 67%, soporte para AI builds y optimización SEO!

Visite hosting.com

Optimización de la construcción y la producción

Durante el desarrollo, Tailwind genera un enorme archivo CSS que contiene todas las clases posibles. Para el entorno de producción, debe ejecutarse un proceso de compilación para “sacudir el árbol”, es decir, eliminar todas las clases no utilizadas de los componentes HTML y JavaScript. En el tailwind.config.js En esto, a través de… content le dice a Tailwind qué archivos deben ser escaneados en busca de clases usadas:

module.exports = {
  content: ['./src/**/*.{html,js,vue,jsx,tsx}'],
  // ... 其他配置
}

A continuación, ejecute el comando de compilación (por ejemplo npm run build), el plugin Tailwind CLI o PostCSS genera un archivo CSS minimizado que contiene sólo las clases necesarias.

Técnicas avanzadas y buenas prácticas

Una vez que domines los conceptos básicos, unos cuantos consejos avanzados te permitirán utilizar Tailwind de forma más eficaz y elegante.

Extraer componentes y utilizar la instrucción @apply

Aunque la combinación de clases directamente en HTML es el modo principal de Tailwind, escribir una larga lista de clases una y otra vez puede resultar redundante cuando una combinación de clases concreta (como un estilo concreto de botón) se repite varias veces en un proyecto. En este caso, puede utilizar la función @apply extrae clases de componentes reutilizables en su CSS.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

Luego, en HTML, solo se necesita utilizar… class="btn-primary" Eso es todo. Otro enfoque que está más en línea con la filosofía de Tailwind es utilizar las capacidades de componentisación de los frameworks de JavaScript (por ejemplo, React, Vue) para encapsular bloques de interfaz de usuario reutilizables.

Manejo de hover, focus, etc.

Tailwind proporciona prefijos variantes para diversos estados de interacción, como por ejemplo hover:、focus:、active:、disabled:。

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 ...">
  按钮
</button>

También puede configurar el tailwind.config.js ¿Qué es esto? variants para activar o desactivar determinadas variantes de estado para clases de servicios específicas.

Se utiliza junto con frameworks JavaScript

Tailwind funciona bien con los principales frameworks de front-end como React, Vue y Angular. En React, puedes utilizar Tailwind de la forma habitual en JSX's className utilizando la clase Tailwind. Para manejar el empalme dinámico de nombres de clase, puede utilizar una clase como clsx o classnames Una biblioteca de herramientas como esta.

function Button({ isPrimary, children }) {
  const classes = clsx(
    'py-2 px-4 rounded-lg font-semibold',
    isPrimary ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'
  );
  return <button className={classes}>{children}</button>;
}

Ampliación con plug-ins personalizados

Si tú o tu equipo necesitáis un conjunto específico de clases de utilidad que no existen en Tailwind, podéis escribir plugins personalizados. Los plug-ins se crean añadiendo una clase personalizada al directorio tailwind.config.js introducido en el

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          /* 隐藏滚动条的 CSS */
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none',
        },
      })
    })
  ]
}

resúmenes

Tailwind CSS revoluciona la forma en que los desarrolladores escriben CSS gracias a su enfoque basado en la utilidad. Traslada las decisiones de estilo de las hojas de estilo a un lenguaje de marcado, y consigue una gran eficacia de desarrollo y coherencia de diseño combinando un gran número de clases funcionales de grano fino. Su potente sistema de configuración permite una profunda personalización para adaptarse a cualquier sistema de diseño, mientras que las optimizaciones del tiempo de compilación garantizan que el producto final sea pequeño y compacto. Ya sea para la creación rápida de prototipos o para proyectos grandes y complejos, Tailwind CSS proporciona una solución de estilo potente, flexible y fácil de mantener. El dominio de sus conceptos básicos, flujos de trabajo y técnicas avanzadas le dará una ventaja en el desarrollo front-end moderno.

FAQ Preguntas más frecuentes

¿Los estilos CSS de Tailwind contaminan el HTML?

Los nombres de las clases CSS de Tailwind hacen que el HTML parezca contener mucho contenido, pero no se trata de “contaminación de estilo” en el sentido tradicional. El diseño es intencionado, ya que centraliza la lógica de estilo en el nivel de vista, elimina la carga cognitiva de saltar entre CSS y HTML, y refuerza un estrecho acoplamiento de estilo y estructura, que es una ventaja en el desarrollo basado en componentes.

¿Cómo puedo anular o personalizar las clases predeterminadas de Tailwind?

Hay dos métodos principales. Primero, puedes hacerlo en tailwind.config.js Los documentos de theme.extend para añadir o ampliar valores temáticos (por ejemplo, color, espaciado), lo que generará nuevas clases. En segundo lugar, si desea anular completamente un valor predeterminado, puede añadir una nueva clase a la sección theme (en lugar de extend) para establecer directamente el nuevo valor. Para anulaciones puntuales, también es posible añadir valores arbitrarios utilizando la representación de corchetes, por ejemplo top-[117px]。

¿Cuál es la diferencia entre extraer componentes utilizando @apply y escribir CSS directamente?

utilizar @apply Las clases extraídas por las directivas siguen siendo esencialmente una colección de clases de utilidad de Tailwind que se ven afectadas por la configuración de Tailwind y finalmente son procesadas por la herramienta de compilación. Escribir CSS puro directamente está fuera del ecosistema de Tailwind. El uso excesivo de @apply Puede llevarte de vuelta a escribir CSS tradicional, anulando el propósito de “combinar clases en HTML” de Tailwind. Se recomienda que solo utilices una combinación de estilos concreta si realmente se reutiliza mucho. @apply。

¿Cómo funciona Tailwind CSS en un entorno de producción?

Tailwind CSS se comporta muy bien cuando está correctamente compilado y optimizado. La herramienta de compilación escanea todos tus archivos de código fuente para encontrar las clases que realmente se utilizan y, a continuación, genera sólo esas clases en el archivo CSS final. Esto significa que el archivo CSS final entregado al usuario es a menudo mucho más pequeño que el CSS escrito a mano o el CSS que utiliza bibliotecas de componentes no optimizadas, lo que resulta en páginas de carga más rápida.

¿Se puede utilizar Tailwind con bibliotecas de componentes de interfaz de usuario?

Dependiendo de la situación, Tailwind es una solución de estilo completa por sí misma y por lo general no requiere otra biblioteca de componentes de interfaz de usuario completa (como Material-UI). Sin embargo, puede utilizar bibliotecas de componentes construidas sobre Tailwind, como Headless UI (que proporciona componentes interactivos sin estilo) o DaisyUI (que proporciona componentes con estilo). Estas bibliotecas se integran perfectamente con los temas y kits de herramientas de Tailwind para acelerar aún más el desarrollo.