Introducción a Tailwind CSS – Part 1

Tailwind CSS se puede utilizar para crear sitios web de la forma más rápida y sencilla.

Tailwind CSS es básicamente un marco CSS de primera utilidad para construir rápidamente interfaces de usuario personalizadas. Es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita para crear diseños personalizados sin ningún estilo obstinado molesto que tenga que luchar para anular. 
La belleza de esta cosa llamada viento de cola es que no impone especificaciones de diseño o cómo debería verse su sitio, simplemente reúne pequeños componentes para construir una interfaz de usuario que es única. Lo que Tailwind simplemente hace es tomar un archivo CSS «en bruto», procesa este archivo CSS sobre un archivo de configuración y produce una salida.
¿Por qué Tailwind CSS?

  • Proceso de creación de interfaz de usuario más rápido
  • Es un marco CSS de utilidad primero, lo que significa que podemos usar clases de utilidad para crear diseños personalizados sin escribir CSS como en el enfoque tradicional. 
     

Ventajas de Tailwind CSS:

  • No más nombres tontos para las clases de CSS y las identificaciones.
  • Líneas mínimas de código en el archivo CSS.
  • Podemos personalizar los diseños para hacer los componentes.
  • Hace que el sitio web sea receptivo.
  • Realiza los cambios de la manera deseada. 
    CSS es de naturaleza global y si realiza cambios en el archivo, la propiedad cambia en todos los archivos HTML vinculados a él. Pero con la ayuda de Tailwind CSS podemos usar clases de utilidad y hacer cambios locales.

Instalación: 
Método 1: Instalar Tailwind a través de npm

  • Paso 1: npm init -y
  • Paso 2: npm instala tailwindcss
  • Paso 3: Use la directiva @tailwind para inyectar estilos base, componentes y utilidades de Tailwind en su archivo CSS. 
    @base de viento de cola; 
    @componentes de viento de cola; 
    utilidades @tailwind;
  • Paso 4: npx tailwindcss init 
    Esto se usa para crear un archivo de configuración para personalizar los diseños. Es un paso opcional.
  • Paso 5: npx tailwindcss build styles.css -o output.css 
    Este comando se usa para compilar style.css es el archivo que debe compilarse y output.css es el archivo en el que debe compilarse. Si la salida del archivo .css no se crea antes, entonces se creará automáticamente.

Método 2: usar Tailwind a través de CDN

html

<!-- add it to the head section of the html file -->
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet">

Pero existen algunas limitaciones cuando se usa CDN. Algunos de ellos son:

  • Personalizar el tema predeterminado de Tailwind no se puede usar
  • No se pueden usar directivas como @apply, @variants, etc.
  • No puedo instalar complementos de terceros

Ejemplo:

html

<!-- Write HTML code here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport"
              content="width=device-width,
                       initial-scale=1.0" />
        <title>Tailwind CSS</title>
        <link rel="stylesheet"
              href="./style.css" />
    </head>
    <body>
        <!-- font size -->
        <h1 class="text-lg">Large font size</h1>
        <!-- font weight -->
        <h1 class="font-bold">Bold fond weight</h1>
        <!-- Typography -->
        <h1 class="tracking-widest">Spacing between words</h1>
        <!-- Transform -->
        <h1 class="uppercase">Uppercase word</h1>
        <!-- line height align color background
              width padding margin border opacity shadow-->
        <div class="leading-9 text-right
                    text-red-700
                    bg-red-500 w-1/2 h-1/3 p-5 my-10
                    border-t-2
                    border-solid
                    border-green-500
                    opacity-40
                    shadow-2xl">
             
<p>GeeksforGeeks</p>
 
        </div>
        <!-- focus pseudo class -->
        <input class="border focus:border-red-500
                      focus:outline-none p-5 m-5
                      placeholder-red-500"
               type="text"
               name=""
               value=""
               placeholder="name" />
        <!-- layout -->
        <div class="md:flex md:flex-wrap m-5">
            <div class="bg-blue-500
                        p-5 md:w-1/3
                        md:bg-pink-600">
              GeeksforGeeks
          </div>
            <div class="bg-teal-500 p-5 md:w-1/3">
              GeeksforGeeks
          </div>
            <div class="bg-yellow-500 p-5 md:w-1/3">
              GeeksforGeeks
          </div>
        </div>
    </body>
</html>

Producción:

Navegador compatible:

  • Google Chrome
  • Borde de Microsoft
  • Firefox
  • Safari

Publicación traducida automáticamente

Artículo escrito por Sapna2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *