6

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!

2

5 Answers 5

13

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.

Sign up to request clarification or add additional context in comments.

2 Comments

thanks, but I have already done so and it's still complaining
@J.Doe you sure you’ve called that in the root directory of your project?
2

When I installed this plugin I got the same issue as above. However, I followed the below steps to fix this:-

  1. Close the dev server.
  2. npm install -D @tailwindcss/aspect-ratio
  3. Hit this command npm i again.
  4. Start your server again.

Comments

1

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'),
    // ...
  ],
}

Comments

0

In case anyone else stumbles across this issue:

  1. Delete your node_modules folder in your root dir

  2. Install all tailwind packages you need manually:

    • npm i --force tailwindcss
    • npm i --force @tailwindcss/aspect-ratio
    • ...
  3. Run 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

Comments

0

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

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.