Getting the error as per the title. The solutions I found were for Typescript, and as I am very new to JS and Tailwind I couldn't make anything out of it. How do I solve this issue?
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/aspect-ratio'),
],
}
Thanks!
You need to install the aspect ratio module.
From your project's root directory, run this:
npm install --save-dev @tailwindcss/aspect-ratio
Make sure that you re-run your project after installing this before trying out the fix.
When I installed this plugin I got the same issue as above. However, I followed the below steps to fix this:-
npm install -D @tailwindcss/aspect-rationpm i again.As per documentation you need to disable the core aspectRatio plugin to avoid conflicts with the native aspect-ratio utilities included in Tailwind CSS v3.0
// tailwind.config.js
module.exports = {
theme: {
// ...
},
corePlugins: {
aspectRatio: false,
},
plugins: [
require('@tailwindcss/aspect-ratio'),
// ...
],
}
In case anyone else stumbles across this issue:
Delete your node_modules folder in your root dir
Install all tailwind packages you need manually:
npm i --force tailwindcssnpm i --force @tailwindcss/aspect-ratioRun npm i to install all your other packages
This worked for me.
Otherwise have a look at this thread for more potential solutions (e.g., configuring your workspaces in package.json): https://github.com/tailwindlabs/tailwindcss-forms/issues/31
U dont hv to worry about this warning tailwind config is a js file but ur editor and linter will still try to warn u as ur main project is a typescript project this warning in specific comes from there not begin any type declarations in that tailwind plugin package but the package exists and will still work anyway
