https://github.com/drdogbot7/tailwindcss-responsive-embed

responsive embed component for tailwindcss
https://github.com/drdogbot7/tailwindcss-responsive-embed

Last synced: 3 months ago
JSON representation

responsive embed component for tailwindcss

• Host: GitHub
• URL: https://github.com/drdogbot7/tailwindcss-responsive-embed
• Owner: drdogbot7
• Created: 2018-07-08T16:29:27.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-02-12T08:02:36.000Z (over 2 years ago)
• Last Synced: 2024-03-12T06:23:33.923Z (3 months ago)
• Language: JavaScript
• Size: 264 KB
• Stars: 83
• Watchers: 2
• Forks: 5
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Lists

• awesome-tailwindcss - Responsive Embed - Adds a `responsive-embed` component. (Plugins)

README

        
# tailwind-responsive-embed

**I recommend switching to [@tailwindcss/aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio) instead of using this plugin. This plugin DOES NOT WORK with @tailwindcss/aspect-ratio.**  If you are _already_ using this plugin on a site without issue… that's probably fine.

Responsive embed component for tailwindcss, based on [bootstrap's responsive embed](https://getbootstrap.com/docs/4.1/utilities/embed/) which is itself credited to Nicolas Gallagher and [SUIT CSS](https://suitcss.github.io/). This will add the `.embed-responsive` and `.embed-responsive-item` components to your css.

This plugin relies on [webdna/tailwindcss-aspect-ratio](https://github.com/webdna/tailwindcss-aspect-ratio) to create the aspect ratio utility classes.

## Install

```bash

# Install via npm

npm install --save-dev tailwindcss-responsive-embed

```

## Usage

Responsive embed classes won't do much by themselves, so require `tailwindcss-aspect-ratio` also. It shouldn't matter what order they are included.

```js

module.exports = {

    theme: {

        aspectRatio: {

            none: 0,

            square: [1, 1],

            "16/9": [16, 9],

            "4/3": [4, 3],

            "21/9": [21, 9]

        }

    },

    variants: {

        aspectRatio: ['responsive']

    },

    plugins: [

        require("tailwindcss-responsive-embed"),

        require("tailwindcss-aspect-ratio"),

    ]

}

```

This configuration would create the following classes:

```scss

.embed-responsive {

  position: relative;

  display: block;

  height: 0;

  padding: 0;

  overflow: hidden;

 }

 

.embed-responsive .embed-responsive-item,

.embed-responsive iframe,

.embed-responsive embed,

.embed-responsive object,

.embed-responsive video {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    height: 100%;

    width: 100%;

    border: 0;

  }

}

// tailwindcss-aspect-ratio generates these

.aspect-ratio-none {

  padding-bottom: 0;

}

.aspect-ratio-square {

  padding-bottom: 100%;

}

.aspect-ratio-16\/9 {

  padding-bottom: 56.25%;

}

.aspect-ratio-4\/3 {

  padding-bottom: 75%;

}

.aspect-ratio-21\/9 {

  padding-bottom: 42.86%;

}

```

## Example HTML

```html



  



```