Tailwindcss

# Personalización

https://tailwindcss.com/docs/installation/

# Intalación

Crear package.json

npm init -y

# npm tailwind

npm i tailwindcss

# Archivos

Crear un directorio src/estilos.css y en su interior:

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

# Compilar

npx tailwindcss build src/estilos.css -o public/output.css

Crear arhivo public/index.html y llamar a los estilos:








 








<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="output.css">
</head>

<body>
    <h1 class="mt-20">Hola Tailwind</h1>
</body>

</html>

# Personalizar

https://tailwindcss.com/docs/configuration

--full

npx tailwindcss init --full

npx tailwindcss init

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

# Extensión VSC

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

  • Funciona si existe el archivo tailwind.config.js

# Ejemplos:

module.exports = {
  purge: [],
  theme: {
    extend: {
      colors: {
        danger: '#ff5f40',
        info: {
          900: '#234e52',
          800: '#285e61',
        }
      },
    },
    fontFamily: {
      rale: ['Raleway'],
    },
  },
  variants: {},
  plugins: [],
}

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;400;900&display=swap');

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

<body>
    <h1 class="bg-danger text-xl font-rale font-hairline">Hola Tailwind</h1>
    <h2 class="bg-info-900 text-white">Hola dos mundo</h2>
</body>

No olvide compilar su código:

npx tailwindcss build src/estilos.css -o public/output.css

# Extracting classes using @apply

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;400;900&display=swap');

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

/* Estamos ocupando una fuente personalizada "Rale" */
.btn {
    @apply font-rale py-2 px-4 rounded;
}

.btn-blue {
    @apply bg-blue-500 text-white;
}

.btn-blue:hover {
    @apply bg-blue-700;
}

<!-- Extracting classes using @apply -->
<button class="btn btn-blue">
    Button
</button>

No olvide compilar su código:

npx tailwindcss build src/estilos.css -o public/output.css

← Flexbox →