All Projects → webdna → Tailwindcss Aspect Ratio

webdna / Tailwindcss Aspect Ratio

Aspect Ratio Plugin for tailwindcss framework

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Tailwindcss Aspect Ratio

Tailwindcss Figma Plugin
Figma Plugin for TailwindCSS
Stars: ✭ 165 (-32.1%)
Mutual labels:  plugin, tailwindcss
Stencil Tailwind
TailwindCSS plugin for Stencil
Stars: ✭ 26 (-89.3%)
Mutual labels:  plugin, tailwindcss
Tailwind React Ui
React utility component primitives & UI framework for use with Tailwind CSS
Stars: ✭ 220 (-9.47%)
Mutual labels:  tailwindcss
Crane
PHP Intellisense/code-completion for VS Code
Stars: ✭ 236 (-2.88%)
Mutual labels:  plugin
Ctrlp Py Matcher
Fast vim CtrlP matcher based on python
Stars: ✭ 229 (-5.76%)
Mutual labels:  plugin
Protoc Gen Lint
A plug-in for Google's Protocol Buffers (protobufs) compiler to lint .proto files for style violations.
Stars: ✭ 221 (-9.05%)
Mutual labels:  plugin
Awesome Xcode Extensions
Awesome native Xcode extensions.
Stars: ✭ 2,628 (+981.48%)
Mutual labels:  plugin
Cordova Plugin Nativeaudio
The low latency audio plugin is designed to enable low latency and polyphonic audio from Cordova/PhoneGap applications, using a very simple and basic API.
Stars: ✭ 220 (-9.47%)
Mutual labels:  plugin
Cordovacn
Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms' native development language. (Apache Cordova是一个开放源代码的移动开发框架,它允许你使用web技术如:JavaScript,HTML,CSS进行跨平台开发,避免使用原生开发。)
Stars: ✭ 240 (-1.23%)
Mutual labels:  plugin
Reactive Resume
A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!
Stars: ✭ 3,280 (+1249.79%)
Mutual labels:  tailwindcss
Vue Events
Simple event handling for Vue.js
Stars: ✭ 234 (-3.7%)
Mutual labels:  plugin
Craftbook
🔧 Machines, ICs, PLCs, and more!
Stars: ✭ 226 (-7%)
Mutual labels:  plugin
Vite Vue3 Tailwind Starter
Vite 2.x + Vue 3.x + Tailwind 2.x (starter) ⚡
Stars: ✭ 205 (-15.64%)
Mutual labels:  tailwindcss
Miaow
A set of plugins for Sketch include drawing links & marks, UI Kit & Color sync, font & text replacing.
Stars: ✭ 2,536 (+943.62%)
Mutual labels:  plugin
Tinyfaces Sketch Plugin
Fill selected layers in Sketch with free stock avatars
Stars: ✭ 221 (-9.05%)
Mutual labels:  plugin
A17t
An atomic design toolkit for pragmatists
Stars: ✭ 236 (-2.88%)
Mutual labels:  tailwindcss
Better Mybatis Generator
在idea的数据库工具中,直接对表生成mybatis相关的代码文件。
Stars: ✭ 219 (-9.88%)
Mutual labels:  plugin
Vim Yoink
Vim plugin that maintains a yank history to cycle between when pasting
Stars: ✭ 225 (-7.41%)
Mutual labels:  plugin
Photofilters
photofilters library for flutter
Stars: ✭ 229 (-5.76%)
Mutual labels:  plugin
Podlove Publisher
Podlove Podcast Publisher for WordPress
Stars: ✭ 241 (-0.82%)
Mutual labels:  plugin

Aspect Ratio Plugin for Tailwind CSS

Requirements

This plugin requires Tailwind CSS 1.2 or later. If your project uses an older version of Tailwind, you should install the latest 2.x version of this plugin (npm install [email protected]).

Installation

npm install tailwindcss-aspect-ratio

Usage

This plugin uses the aspectRatio key in your Tailwind config’s theme and variants objects to generate aspect ratio utilities. Here is an example:

// tailwind.config.js
module.exports = {
  theme: {
    aspectRatio: { // defaults to {}
      'none': 0,
      'square': [1, 1], // or 1 / 1, or simply 1
      '16/9': [16, 9],  // or 16 / 9
      '4/3': [4, 3],    // or 4 / 3
      '21/9': [21, 9],  // or 21 / 9
    },
  },
  variants: {
    aspectRatio: ['responsive'], // defaults to ['responsive']
  },
  plugins: [
    require('tailwindcss-aspect-ratio'),
  ],
};

The aspectRatio theme object is a dictionary where the key is the suffix of the class name and the value is an array of width and height or a number that represents a width / height ratio. The key doesn’t have to replicate the values, so if you prefer "nice names" you could have something like 'video': [16, 9].

The above configuration would create the following classes, as well as their responsive variants:

.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%;
}

Which you can then use in your HTML like this:

<div class="relative">
  <div class="aspect-ratio-16/9"></div>
  <img src="thumbnail.jpg" class="absolute left-0 top-0 w-full h-full object-cover">
</div>

Or inside a flex container to behave like a “minimum aspect ratio” (if the content overflows, the container will grow instead of forcing the aspect ratio):

<div class="flex bg-gray-300">
  <div class="aspect-ratio-2/1"></div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed dictum sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas et lacus ut dolor rutrum dignissim.
  </p>
</div>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].