Tailwind Css es un framework CSS, basado en utility-first o clases CSS de utilidad. Esto nos permite crear proyectos de una manera sencilla y personalizable. Y por supuesto no tenemos que escribir código CSS en nuestros proyectos web.
¿Qué son las Clases de Utilidad?
Son clases CSS con un fin único y específico, en lugar de clases con muchos estilos, son clases con un único fin.
Un ejemplo de una clase de Css es que la misma clase nos da varios estilos que le damos a un elemento Html, sin embargo cada clase en Tailwind CSS solamente nos da un estilo.
Ejemplo de clase CSS:
.parrafoPrincipal{
color: red;
font-size: 2rem;
text-align: center;
}
Sin embargo en Tailwind Css cada clase de utilidad solamente nos da un estilo:
.red{
.color:red;
}
.font-large{
.font-size: 2rem;
}
.text-center{
text-align: center;
}
Estas clase de utilidad predefinida la pueden utilizar en varios elementos en nuestro Html.
Tailwind es un framework basado en responsive design, su principal enfoque es la técnica mobile first, pero igualmente podemos adaptarlo al resto de dispositivos más grandes.
Nos proporciona una gran variedad de clases que nos ayuda a crear una estructura y estilos para dar el diseño que queremos a nuestra pagina web, y realizándose con mucha rapidez.
Tailwind revisa todos los archivos Html y JavaScript para buscar nombres de clase de utilidad de Tailwind, generando los estilos de esas clases, para crear un archivo CSS con esos estilos, sin que toques una línea de CSS.
Si es verdad, que al principio parece muy complicado, pero cuando vas manejándolo, ves que el nombre de las clases es muy intuitivo, lo de siempre, la experiencia en su uso, nos demuestra su facilidad de uso.
Ejemplo:
<p class="text-xl font-bold bg-red-100">Bienvenido a mi Web</p>
Este framework, tiene su propia pagina web donde existe mucha información de ello, siendo:
https://tailwindcss.com/
En dicha web, nos enseña las distintas formas de instalación, como las gran variedad de las clases que tiene dicho framework, y mucha más información.
