Tailwind Responsive Plugin

Description

A Tailwind CSS plugin that enhances responsive design capabilities, providing additional utilities and breakpoints for creating more flexible and adaptable layouts.

Descripción

Un plugin para Tailwind CSS que mejora las capacidades de diseño responsivo, proporcionando utilidades y puntos de ruptura adicionales para crear diseños más flexibles y adaptables.

Installation / Instalación

English

npm install tailwind-responsive

Add the plugin to your tailwind.config.js file:

module.exports = {
  plugins: [
    require('tailwind-responsive'),
    // other plugins...
  ],
}

Español

npm install tailwind-responsive

Agrega el plugin a tu archivo tailwind.config.js:

module.exports = {
  plugins: [
    require('tailwind-responsive'),
    // otros plugins...
  ],
}

Usage / Uso

English

The plugin adds additional responsive utilities that are accessible using Tailwind's responsive prefixes.

Example:

<div class="flex-col md:flex-row lg:flex-col-reverse xl:gap-8">
  <!-- Content here -->
</div>

Español

El plugin agrega utilidades responsivas adicionales que son accesibles utilizando los prefijos responsivos de Tailwind.

Ejemplo:

<div class="flex-col md:flex-row lg:flex-col-reverse xl:gap-8">
  <!-- Contenido aquí -->
</div>

Configuration / Configuración

English

You can customize the plugin by passing an options object to the plugin function:

module.exports = {
  plugins: [
    require('tailwind-responsive')({
      breakpoints: {
        'xs': '320px',
        '2xl': '1536px',
        '3xl': '1920px',
      },
      container: {
        center: true,
        padding: '1rem',
      },
    }),
  ],
}

Español

Puedes personalizar el plugin pasando un objeto de opciones a la función del plugin:

module.exports = {
  plugins: [
    require('tailwind-responsive')({
      breakpoints: {
        'xs': '320px',
        '2xl': '1536px',
        '3xl': '1920px',
      },
      container: {
        center: true,
        padding: '1rem',
      },
    }),
  ],
}

Available Options / Opciones Disponibles

English

Español

License / Licencia

English

This project is licensed under the MIT License - see the LICENSE file for details.

Español

Este proyecto está licenciado bajo la Licencia MIT - consulta el archivo LICENSE para más detalles.