Instalación

¿Por qué instalar Tailwind CSS?

Recomendamos instalar Tailwind CSS para garantizar una experiencia óptima al utilizar los componentes. A continuación se presentan los pasos a seguir para llevar a cabo su instalación de manera simple y rápida.

Instalación

La forma más rápida y simple para la instalación de Talwind CSS desde cero es con la herramienta Tailwind CLI.

  1. 1

    Instalar Tailwind CSS

    Instalar ` tailwindcss ` a través de npm, y crea tu ` tailwind.config.js ` archivo.

    Terminal

            > npm install -D tailwindcss
> npx tailwindcss init
  2. 2

    Configure sus rutas de plantilla

    Agregue las rutas a todos sus archivos de plantilla en su ` tailwind.config.js ` archivo.

    tailwind.config.js

            /** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
    extend: {},
},
plugins: [],
}
  3. 3

    Agregue las directivas Tailwind a su CSS

    Añadir el ` @tailwind ` directivas para cada una de las capas de Tailwindants a su archivo CSS principal.

    scr/input.css

            @tailwind base;
@tailwind components;
@tailwind utilities;
  4. 4

    Inicie el proceso de compilación de Tailwind CLI

    Ejecute la herramienta CLI para escanear sus archivos de plantilla para clases y crear CSS.

    Terminal

            > npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
  5. 5

    Comience a usar Tailwind en su HTML

    Agregue su archivo CSS compilado al ` head ` y comience a usar las clases de utilidad de Tailwindics para diseñar su contenido.

    src/index.html

            <!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./output.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold underline">
         Hello world!
    </h1>
</body>
</html>

Puedes visitar la documentación oficial de Tailwind CSS para más información.