@tailwindcss/aspect-ratio - npm Package Compare versions

Comparing version 0.0.0-insiders.a4d3d64 to 0.0.0-insiders.bd273eb

src/index.d.ts

CHANGELOG.md

		@@ -10,5 +10,16 @@ # Changelog

		- Nothing yet!

		## [0.4.2] - 2022-09-02

		### Fixed

		- Update TypeScript types ([#34](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/34))

		## [0.4.1] - 2022-09-01

		### Added

		- Remove `dist` folder and related dependencies ([#29](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/29))
		- Add typescript types ([#33](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/33))

		@@ -73,3 +84,5 @@ ## [0.4.0] - 2021-12-09

		[unreleased]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.0...HEAD
		[unreleased]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.2...HEAD
		[0.4.2]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.1...v0.4.2
		[0.4.1]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.0...v0.4.1
		[0.4.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.3.0...v0.4.0
		@@ -76,0 +89,0 @@ [0.3.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.2...v0.3.0

package.json

		{
		"name": "@tailwindcss/aspect-ratio",
		"version": "0.0.0-insiders.a4d3d64",
		"version": "0.0.0-insiders.bd273eb",
		"main": "src/index.js",
		"types": "src/index.d.ts",
		"license": "MIT",
		@@ -6,0 +7,0 @@ "repository": "https://github.com/tailwindlabs/tailwindcss-aspect-ratio",

README.md

		@@ -11,10 +11,6 @@ # @tailwindcss/aspect-ratio
		```sh
		# Using npm
		npm install @tailwindcss/aspect-ratio

		# Using Yarn
		yarn add @tailwindcss/aspect-ratio
		npm install -D @tailwindcss/aspect-ratio
		```

		Then add the plugin to your `tailwind.config.js` file:
		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:

		@@ -27,2 +23,5 @@ ```js
		},
		corePlugins: {
		aspectRatio: false,
		},
		plugins: [
		@@ -106,1 +105,40 @@ require('@tailwindcss/aspect-ratio'),
		```

		## Compatibility with default aspect-ratio utilities

		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.

		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.

		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:

		```js
		module.exports = {
		// ...
		theme: {
		aspectRatio: {
		auto: 'auto',
		square: '1 / 1',
		video: '16 / 9',
		1: '1',
		2: '2',
		3: '3',
		4: '4',
		5: '5',
		6: '6',
		7: '7',
		8: '8',
		9: '9',
		10: '10',
		11: '11',
		12: '12',
		13: '13',
		14: '14',
		15: '15',
		16: '16',
		},
		},
		}
		```

		This is necessary, as the default `aspectRatio` values are overwritten by this plugin's values.

@tailwindcss/aspect-ratio - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics