{"id":49512,"date":"2022-03-17T13:41:19","date_gmt":"2022-03-17T12:41:19","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=49512&preview=true&preview_id=49512"},"modified":"2025-01-31T14:40:20","modified_gmt":"2025-01-31T13:40:20","slug":"tailwind-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/tailwind-css\/","title":{"rendered":"\u00bfC\u00f3mo usar Tailwind CSS para desarrollar r\u00e1pidamente sitios web elegantes?"},"content":{"rendered":"

A medida que avanzas como desarrollador, es m\u00e1s probable que utilices tecnolog\u00edas que te ayuden a hacer m\u00e1s escribiendo menos c\u00f3digo. Un marco de trabajo frontal s\u00f3lido como Tailwind CSS<\/span> es una forma de conseguirlo.<\/p>\n

En este art\u00edculo, aprenderemos sobre Tailwind CSS<\/span>, un framework CSS<\/span> que ayuda a construir y dise\u00f1ar p\u00e1ginas web. Empezaremos explicando c\u00f3mo instalar e integrar Tailwind CSS<\/span> en tu proyecto, veremos algunas aplicaciones pr\u00e1cticas y tambi\u00e9n c\u00f3mo puedes crear tus estilos y plugins personalizados.<\/p>\n

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

<\/div><\/kinsta-auto-toc>\n

Echa un Vistazo a Nuestro Videotutorial sobre el Uso de Tailwind CSS para Construir Sitios Web<\/a>:<\/strong>
\n<\/kinsta-video><\/p>\n

\u00bfQu\u00e9 es Tailwind CSS?<\/h2>\n
\"tailwind-css-homepage\"
Tailwind CSS.<\/figcaption><\/figure>\n

Tailwind CSS<\/span> es un marco de trabajo CSS (Hojas de Estilo en Cascada)<\/a> con clases predefinidas que puedes utilizar para construir y dise\u00f1ar p\u00e1ginas web directamente en tu marcado<\/span>. Te permite escribir CSS<\/span> en tu HTML<\/span> en forma de clases predefinidas.<\/p>\n

Definiremos lo que es un marco de trabajo y lo que queremos decir con \u00bb CSS<\/span> con prioridad de utilidad\u00bb para ayudarte a entender mejor de qu\u00e9 trata Tailwind CSS<\/span>.<\/p>\n

\u00bfQu\u00e9 es un marco de trabajo?<\/h2>\n

Como t\u00e9rmino general de programaci\u00f3n, un marco de trabajo es una herramienta<\/a> que proporciona componentes<\/span> reutilizables y listos para usar construidos a partir de las caracter\u00edsticas de una herramienta ya existente. El prop\u00f3sito general de crear marcos es aumentar la velocidad de desarrollo haciendo menos trabajo.<\/p>\n

Ahora que hemos establecido el significado de un marco, deber\u00eda ayudarte a entender que Tailwind CSS<\/span> es una herramienta construida a partir de las caracter\u00edsticas de CSS<\/span>. Todas las funcionalidades del framework se derivan de los estilos CSS<\/span> compuestos como clases.<\/p>\n

\u00bfQu\u00e9 es un marco CSS con prioridad de utilidad?<\/h2>\n

Cuando decimos CSS<\/span> con prioridad de utilidad, nos referimos a clases en nuestro marcado (HTML)<\/a>\u00a0con funcionalidades predefinidas. Esto implica que s\u00f3lo tienes que escribir una clase<\/span> con estilos predefinidos adjuntos, y esos estilos se aplicar\u00e1n al elemento.<\/p>\n

En el caso de que trabajes con CSS<\/span> de vainilla(CSS<\/span> sin ning\u00fan marco o biblioteca), primero dar\u00edas a tu elemento un nombre de clase<\/span> y luego adjuntar\u00edas diferentes propiedades y valores a esa clase<\/span>, que, a su vez, aplicar\u00e1n el estilo a tu elemento.<\/p>\n

Te mostraremos un ejemplo. Aqu\u00ed crearemos un bot\u00f3n con esquinas redondeadas y un texto<\/span> que diga \u00abHazme clic\u00bb Este es el aspecto que tendr\u00e1 el bot\u00f3n:<\/p>\n

\"A
Nuestro bot\u00f3n.<\/figcaption><\/figure>\n

Primero haremos esto usando CSS<\/span> vainilla, y luego usando las clases de utilidad disponibles en Tailwind CSS<\/span>.<\/p>\n

Con CSS vainilla<\/h3>\n
<button class<\/span>=\"btn\">Click me<\/button><\/code><\/pre>\n
Hemos dado a las etiquetas de los botones la clase<\/span> btn<\/code>, que se estilizar\u00e1 utilizando una hoja de estilos externa. Esto es:<\/p>\n
.btn {\n  background-color<\/span>: #000;\n  color<\/span>: #fff;\n  padding: 8px;\n  border: none;\n  border-radius: 4px;\n}<\/code><\/pre>\n
Con Tailwind CSS<\/h3>\n
<button class=\"bg-black text-white p-2 rounded\">Click me<\/button><\/code><\/pre>\n
Todo esto es necesario para conseguir el mismo efecto que el ejemplo con CSS<\/span> vainilla. No se ha creado ninguna hoja de estilos externa en la que tengas que escribir los estilos porque cada nombre de clase<\/span> que hemos utilizado ya tiene un estilo predefinido.<\/p>\n
Requisitos previos para utilizar Tailwind CSS<\/h2>\n
Antes de utilizar Tailwind CSS<\/span>, hay algunos requisitos previos que debes considerar para poder utilizar las funciones del framework sin dificultades. He aqu\u00ed algunos de ellos:<\/p>\n