├── .github ├── ISSUE_TEMPLATE │ ├── 1.bug_report.yml │ └── config.yml └── workflows │ └── release-insiders.yml ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── package.json ├── src ├── index.d.ts └── index.js └── tests └── test.js /.github/ISSUE_TEMPLATE/1.bug_report.yml: -------------------------------------------------------------------------------- 1 | name: Bug Report 2 | description: Create a bug report for @tailwindcss/aspect-ratio. 3 | labels: [] 4 | body: 5 | - type: input 6 | attributes: 7 | label: What version of @tailwindcss/aspect-ratio are you using? 8 | description: 'For example: v0.2.0' 9 | validations: 10 | required: true 11 | - type: input 12 | attributes: 13 | label: What version of Node.js are you using? 14 | description: 'For example: v12.0.0' 15 | validations: 16 | required: true 17 | - type: input 18 | attributes: 19 | label: What browser are you using? 20 | description: 'For example: Chrome, Safari, or N/A' 21 | validations: 22 | required: true 23 | - type: input 24 | attributes: 25 | label: What operating system are you using? 26 | description: 'For example: macOS, Windows' 27 | validations: 28 | required: true 29 | - type: input 30 | attributes: 31 | label: Reproduction repository 32 | description: A public GitHub repo that includes a minimal reproduction of the bug. Unfortunately we can't provide support without a reproduction, and your issue will be closed and locked with no comment if this is not provided. 33 | validations: 34 | required: true 35 | - type: textarea 36 | attributes: 37 | label: Describe your issue 38 | description: Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Feature Request 4 | url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=ideas 5 | about: 'Suggest any ideas you have using our discussion forums.' 6 | - name: Help 7 | url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=help 8 | about: 'If you have a question or need help, ask a question on the discussion forums.' 9 | - name: Kind Words 10 | url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=kind-words 11 | about: "Have something nice to say about @tailwindcss/aspect-ratio or Tailwind CSS in general? We'd love to hear it!" 12 | -------------------------------------------------------------------------------- /.github/workflows/release-insiders.yml: -------------------------------------------------------------------------------- 1 | name: Release Insiders 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | 7 | permissions: 8 | contents: read 9 | id-token: write 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | 15 | strategy: 16 | matrix: 17 | node-version: [12] 18 | 19 | steps: 20 | - uses: actions/checkout@v2 21 | 22 | - name: Use Node.js ${{ matrix.node-version }} 23 | uses: actions/setup-node@v2 24 | with: 25 | node-version: ${{ matrix.node-version }} 26 | registry-url: 'https://registry.npmjs.org' 27 | 28 | - name: Use cached node_modules 29 | id: cache 30 | uses: actions/cache@v2 31 | with: 32 | path: node_modules 33 | key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }} 34 | restore-keys: | 35 | nodeModules- 36 | 37 | - name: Install dependencies 38 | if: steps.cache.outputs.cache-hit != 'true' 39 | run: npm install 40 | env: 41 | CI: true 42 | 43 | - name: Resolve version 44 | id: vars 45 | run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)" 46 | 47 | - name: 'Version based on commit: 0.0.0-insiders.${{ steps.vars.outputs.sha_short }}' 48 | run: npm version 0.0.0-insiders.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version 49 | 50 | - name: Publish 51 | run: npm publish --provenance --tag insiders 52 | env: 53 | CI: true 54 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 55 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | yarn.lock 3 | package-lock.json -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [Unreleased] 9 | 10 | - Nothing yet! 11 | 12 | ## [0.4.2] - 2022-09-02 13 | 14 | ### Fixed 15 | 16 | - Update TypeScript types ([#34](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/34)) 17 | 18 | ## [0.4.1] - 2022-09-01 19 | 20 | ### Added 21 | 22 | - Remove `dist` folder and related dependencies ([#29](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/29)) 23 | - Add typescript types ([#33](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/33)) 24 | 25 | ## [0.4.0] - 2021-12-09 26 | 27 | ### Added 28 | 29 | - Make sure that Tailwind CSS v3 is in peerDependencies ([ae97a25](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/ae97a25)) 30 | 31 | ## [0.3.0] - 2021-10-05 32 | 33 | ### Added 34 | 35 | - Support arbitrary values in Tailwind CSS v3.0.0-alpha.1, via the new `matchComponents` API 36 | 37 | ## [0.2.2] - 2021-10-02 38 | 39 | ### Fixed 40 | 41 | - Fix compatibility with Tailwind CSS v3.0.0-alpha.1 42 | 43 | ## [0.2.1] - 2021-05-24 44 | 45 | ### Fixed 46 | 47 | - Mark `tailwindcss` as peer-dependency for better monorepo support ([#14](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/14)) 48 | 49 | ## [0.2.0] - 2020-11-16 50 | 51 | ### Changed 52 | 53 | - Prefix custom properties with `tw-` to match Tailwind CSS v2.0 convention ([6802588](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/6802588)) 54 | 55 | ## [0.1.4] - 2020-11-06 56 | 57 | ### Added 58 | 59 | - Add `aspect-none` clas ([73b57ef](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/73b57ef)) 60 | 61 | ## [0.1.3] - 2020-11-06 62 | 63 | ### Fixed 64 | 65 | - Remove debugging statements ([32d68f5](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/32d68f5)) 66 | 67 | ## [0.1.2] - 2020-11-06 68 | 69 | ### Fixed 70 | 71 | - Remove incorrect peer dependencies ([d46bf8f](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/d46bf8f)) 72 | 73 | ## [0.1.1] - 2020-11-06 74 | 75 | ### Fixed 76 | 77 | - Fix entry point so it even works at all ([88fd2f1](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/88fd2f1)) 78 | 79 | ## [0.1.0] - 2020-11-06 80 | 81 | Initial release! 82 | 83 | [unreleased]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.2...HEAD 84 | [0.4.2]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.1...v0.4.2 85 | [0.4.1]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.0...v0.4.1 86 | [0.4.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.3.0...v0.4.0 87 | [0.3.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.2...v0.3.0 88 | [0.2.2]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.1...v0.2.2 89 | [0.2.1]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.0...v0.2.1 90 | [0.2.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.4...v0.2.0 91 | [0.1.4]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.3...v0.1.4 92 | [0.1.3]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.2...v0.1.3 93 | [0.1.2]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.1...v0.1.2 94 | [0.1.1]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.0...v0.1.1 95 | [0.1.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/releases/tag/v0.1.0 96 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Tailwind Labs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @tailwindcss/aspect-ratio 2 | 3 | A plugin that provides a composable API for giving elements a fixed aspect ratio. 4 | 5 | 6 | ## Installation 7 | 8 | Install the plugin from npm: 9 | 10 | ```sh 11 | npm install -D @tailwindcss/aspect-ratio 12 | ``` 13 | 14 | Then add the plugin to your `tailwind.config.js` file, and disable the `aspectRatio` core plugin to avoid conflicts with the native `aspect-ratio` utilities included in Tailwind CSS v3.0: 15 | 16 | ```js 17 | // tailwind.config.js 18 | module.exports = { 19 | theme: { 20 | // ... 21 | }, 22 | corePlugins: { 23 | aspectRatio: false, 24 | }, 25 | plugins: [ 26 | require('@tailwindcss/aspect-ratio'), 27 | // ... 28 | ], 29 | } 30 | ``` 31 | 32 | ## Usage 33 | 34 | Combine the `aspect-w-{n}` and `aspect-h-{n}` classes to specify the aspect ratio for an element: 35 | 36 | ```html 37 |
38 | 39 |
40 | ``` 41 | 42 | Use `aspect-none` to remove any aspect ratio behavior: 43 | 44 | ```html 45 |
46 | 47 |
48 | ``` 49 | 50 | When removing aspect ratio behavior, if nested elements have `w-{n}` or `h-{n}` classes, ensure they are re-declared with a matching breakpoint prefix: 51 | 52 | ```html 53 |
54 | ... 55 |
56 | ``` 57 | 58 | Note that due to the way this currently needs to be implemented ([the old padding-bottom trick](https://css-tricks.com/aspect-ratio-boxes/)) you need to assign the aspect ratio to a _parent_ element, and make the actual element you are trying to size the only child of that parent. 59 | 60 | Once the [`aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) is supported in modern browsers, we'll add official support to Tailwind CSS itself and deprecate this plugin. 61 | 62 | Aspect ratio classes up to 16 are generated by default: 63 | 64 | | Width | Height | 65 | | --- | --- | 66 | | `aspect-w-1` | `aspect-h-1` | 67 | | `aspect-w-2` | `aspect-h-2` | 68 | | `aspect-w-3` | `aspect-h-3` | 69 | | `aspect-w-4` | `aspect-h-4` | 70 | | `aspect-w-5` | `aspect-h-5` | 71 | | `aspect-w-6` | `aspect-h-6` | 72 | | `aspect-w-7` | `aspect-h-7` | 73 | | `aspect-w-8` | `aspect-h-8` | 74 | | `aspect-w-9` | `aspect-h-9` | 75 | | `aspect-w-10` | `aspect-h-10` | 76 | | `aspect-w-11` | `aspect-h-11` | 77 | | `aspect-w-12` | `aspect-h-12` | 78 | | `aspect-w-13` | `aspect-h-13` | 79 | | `aspect-w-14` | `aspect-h-14` | 80 | | `aspect-w-15` | `aspect-h-15` | 81 | | `aspect-w-16` | `aspect-h-16` | 82 | 83 | ## Configuration 84 | 85 | You can configure which values and variants are generated by this plugin under the `aspectRatio` key in your `tailwind.config.js` file: 86 | 87 | ```js 88 | // tailwind.config.js 89 | module.exports = { 90 | theme: { 91 | aspectRatio: { 92 | 1: '1', 93 | 2: '2', 94 | 3: '3', 95 | 4: '4', 96 | } 97 | }, 98 | variants: { 99 | aspectRatio: ['responsive', 'hover'] 100 | } 101 | } 102 | ``` 103 | 104 | ## Compatibility with default aspect-ratio utilities 105 | 106 | Tailwind CSS v3.0 shipped with [native aspect-ratio](https://tailwindcss.com/docs/aspect-ratio) support, and while these new utilities are great, the `aspect-ratio` property isn't supported in Safari 14, which still has [significant global usage](https://caniuse.com/mdn-css_properties_aspect-ratio). If you need to support Safari 14, this plugin is still the best way to do that. 107 | 108 | While it's technically possible to use the new native `aspect-ratio` utilities as well as this plugin in the same project, it doesn't really make a lot of sense to do so. If you're able to use the new native aspect-ratio utilities, just use them instead of this plugin, as they are a lot simpler and work much better. 109 | 110 | However, if you do want to use both approaches in your project, maybe as a way of transitioning slowly from the plugin approach to the new native utilities, you'll need to add the following values to your `tailwind.config.js` file: 111 | 112 | ```js 113 | module.exports = { 114 | // ... 115 | theme: { 116 | aspectRatio: { 117 | auto: 'auto', 118 | square: '1 / 1', 119 | video: '16 / 9', 120 | 1: '1', 121 | 2: '2', 122 | 3: '3', 123 | 4: '4', 124 | 5: '5', 125 | 6: '6', 126 | 7: '7', 127 | 8: '8', 128 | 9: '9', 129 | 10: '10', 130 | 11: '11', 131 | 12: '12', 132 | 13: '13', 133 | 14: '14', 134 | 15: '15', 135 | 16: '16', 136 | }, 137 | }, 138 | } 139 | ``` 140 | 141 | This is necessary, as the default `aspectRatio` values are overwritten by this plugin's values. 142 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tailwindcss/aspect-ratio", 3 | "version": "0.4.2", 4 | "main": "src/index.js", 5 | "types": "src/index.d.ts", 6 | "license": "MIT", 7 | "repository": "https://github.com/tailwindlabs/tailwindcss-aspect-ratio", 8 | "publishConfig": { 9 | "access": "public" 10 | }, 11 | "prettier": { 12 | "printWidth": 100, 13 | "semi": false, 14 | "singleQuote": true, 15 | "trailingComma": "es5" 16 | }, 17 | "scripts": { 18 | "test": "jest" 19 | }, 20 | "peerDependencies": { 21 | "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1" 22 | }, 23 | "devDependencies": { 24 | "jest": "^27.2.4", 25 | "postcss": "^8.2.4", 26 | "tailwindcss": "^3.0.0", 27 | "tailwindcss-v2": "npm:tailwindcss@^2.2.16" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/index.d.ts: -------------------------------------------------------------------------------- 1 | declare const plugin: { handler: () => void } 2 | export = plugin 3 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin') 2 | 3 | const baseStyles = { 4 | position: 'relative', 5 | paddingBottom: `calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)`, 6 | } 7 | 8 | const childStyles = { 9 | position: 'absolute', 10 | height: '100%', 11 | width: '100%', 12 | top: '0', 13 | right: '0', 14 | bottom: '0', 15 | left: '0', 16 | } 17 | 18 | const noneComponent = { 19 | '.aspect-none': { 20 | position: 'static', 21 | paddingBottom: '0', 22 | }, 23 | '.aspect-none > *': { 24 | position: 'static', 25 | height: 'auto', 26 | width: 'auto', 27 | top: 'auto', 28 | right: 'auto', 29 | bottom: 'auto', 30 | left: 'auto', 31 | }, 32 | } 33 | 34 | const aspectRatio = plugin( 35 | function ({ addComponents, matchComponents, theme, variants, e }) { 36 | const values = theme('aspectRatio') 37 | 38 | if (matchComponents) { 39 | matchComponents( 40 | { 41 | 'aspect-w': (value) => [ 42 | { 43 | ...baseStyles, 44 | '--tw-aspect-w': value, 45 | }, 46 | { 47 | '> *': childStyles, 48 | }, 49 | ], 50 | 'aspect-h': (value) => ({ '--tw-aspect-h': value }), 51 | }, 52 | { values } 53 | ) 54 | 55 | addComponents(noneComponent) 56 | 57 | return 58 | } 59 | 60 | const baseSelectors = Object.entries(values) 61 | .map(([key, value]) => { 62 | return `.${e(`aspect-w-${key}`)}` 63 | }) 64 | .join(',\n') 65 | 66 | const childSelectors = Object.entries(values) 67 | .map(([key, value]) => { 68 | return `.${e(`aspect-w-${key}`)} > *` 69 | }) 70 | .join(',\n') 71 | 72 | addComponents( 73 | [ 74 | { 75 | [baseSelectors]: baseStyles, 76 | [childSelectors]: childStyles, 77 | }, 78 | noneComponent, 79 | Object.entries(values).map(([key, value]) => { 80 | return { 81 | [`.${e(`aspect-w-${key}`)}`]: { 82 | '--tw-aspect-w': value, 83 | }, 84 | } 85 | }), 86 | Object.entries(values).map(([key, value]) => { 87 | return { 88 | [`.${e(`aspect-h-${key}`)}`]: { 89 | '--tw-aspect-h': value, 90 | }, 91 | } 92 | }), 93 | ], 94 | variants('aspectRatio') 95 | ) 96 | }, 97 | { 98 | theme: { 99 | aspectRatio: { 100 | 1: '1', 101 | 2: '2', 102 | 3: '3', 103 | 4: '4', 104 | 5: '5', 105 | 6: '6', 106 | 7: '7', 107 | 8: '8', 108 | 9: '9', 109 | 10: '10', 110 | 11: '11', 111 | 12: '12', 112 | 13: '13', 113 | 14: '14', 114 | 15: '15', 115 | 16: '16', 116 | }, 117 | }, 118 | variants: { 119 | aspectRatio: ['responsive'], 120 | }, 121 | } 122 | ) 123 | 124 | module.exports = aspectRatio 125 | -------------------------------------------------------------------------------- /tests/test.js: -------------------------------------------------------------------------------- 1 | const postcss = require('postcss') 2 | 3 | let expectedV3 = ` 4 | .aspect-w-1 { 5 | position: relative; 6 | padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%); 7 | --tw-aspect-w: 1 8 | } 9 | .aspect-w-1 > * { 10 | position: absolute; 11 | height: 100%; 12 | width: 100%; 13 | top: 0; 14 | right: 0; 15 | bottom: 0; 16 | left: 0 17 | } 18 | .aspect-w-2 { 19 | position: relative; 20 | padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%); 21 | --tw-aspect-w: 2 22 | } 23 | .aspect-w-2 > * { 24 | position: absolute; 25 | height: 100%; 26 | width: 100%; 27 | top: 0; 28 | right: 0; 29 | bottom: 0; 30 | left: 0 31 | } 32 | .aspect-h-2 { 33 | --tw-aspect-h: 2 34 | } 35 | .aspect-w-\\[123\\] { 36 | position: relative; 37 | padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%); 38 | --tw-aspect-w: 123 39 | } 40 | .aspect-w-\\[123\\] > * { 41 | position: absolute; 42 | height: 100%; 43 | width: 100%; 44 | top: 0; 45 | right: 0; 46 | bottom: 0; 47 | left: 0 48 | } 49 | .aspect-w-\\[var\\(--width\\)\\] { 50 | position: relative; 51 | padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%); 52 | --tw-aspect-w: var(--width) 53 | } 54 | .aspect-w-\\[var\\(--width\\)\\] > * { 55 | position: absolute; 56 | height: 100%; 57 | width: 100%; 58 | top: 0; 59 | right: 0; 60 | bottom: 0; 61 | left: 0 62 | } 63 | .aspect-h-\\[123\\] { 64 | --tw-aspect-h: 123 65 | } 66 | .aspect-h-\\[var\\(--height\\)\\] { 67 | --tw-aspect-h: var(--height) 68 | } 69 | .aspect-none { 70 | position: static; 71 | padding-bottom: 0 72 | } 73 | .aspect-none > * { 74 | position: static; 75 | height: auto; 76 | width: auto; 77 | top: auto; 78 | right: auto; 79 | bottom: auto; 80 | left: auto 81 | } 82 | ` 83 | 84 | it('v3', () => { 85 | let css = postcss([ 86 | require('tailwindcss')({ 87 | content: [ 88 | { 89 | raw: 'aspect-none aspect-w-1 aspect-w-2 aspect-h-2 aspect-w-[123] aspect-w-[var(--width)] aspect-h-[123] aspect-h-[var(--height)]', 90 | }, 91 | ], 92 | plugins: [require('../')], 93 | }), 94 | ]).process('@tailwind components').css 95 | 96 | expect(css).toBe(expectedV3.trim()) 97 | }) 98 | 99 | let expectedV2 = ` 100 | .aspect-w-1, 101 | .aspect-w-2 { 102 | position: relative; 103 | padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%) 104 | } 105 | 106 | .aspect-w-1 > *, 107 | .aspect-w-2 > * { 108 | position: absolute; 109 | height: 100%; 110 | width: 100%; 111 | top: 0; 112 | right: 0; 113 | bottom: 0; 114 | left: 0 115 | } 116 | 117 | .aspect-none { 118 | position: static; 119 | padding-bottom: 0 120 | } 121 | 122 | .aspect-none > * { 123 | position: static; 124 | height: auto; 125 | width: auto; 126 | top: auto; 127 | right: auto; 128 | bottom: auto; 129 | left: auto 130 | } 131 | 132 | .aspect-w-1 { 133 | --tw-aspect-w: 1 134 | } 135 | 136 | .aspect-w-2 { 137 | --tw-aspect-w: 2 138 | } 139 | 140 | .aspect-h-2 { 141 | --tw-aspect-h: 2 142 | } 143 | ` 144 | 145 | it('v2', () => { 146 | postcss([ 147 | require('tailwindcss-v2')({ 148 | purge: { enabled: true, content: [{ raw: 'aspect-none aspect-w-1 aspect-w-2 aspect-h-2' }] }, 149 | variants: [], 150 | plugins: [require('../')], 151 | }), 152 | ]) 153 | .process('@tailwind components', { from: undefined }) 154 | .then(({ css }) => { 155 | expect(css).toBe(expectedV2.trim()) 156 | }) 157 | }) 158 | --------------------------------------------------------------------------------