tailwindlabs/tailwindcss-aspect-ratio

Angular 17. using ratio plugin as described in docs, not working

Closed this issue · 2 comments

mattiLeBlanc commented

What version of @tailwindcss/aspect-ratio are you using?

v3.3.3

What version of Node.js are you using?

18

What browser are you using?

Chrome

What operating system are you using?

Mac OS 14.4

Reproduction repository

https://angular-tailwind-qhtv1i.stackblitz.io

Describe your issue

As you can see in the https://angular-tailwind-qhtv1i.stackblitz.io app.component.html, I am applying ratio to the container around the img, but I am not seeing any CSS applied to the IMG object, or to its container.

What am I doing wrong or is there something else broken?

reinink commented

Hey there!

So I don't think the issue here is related to this plugin, but rather the setup of your app. Taking a quick look at this I see a number of issues:

  • I see that you're including Tailwind CSS v3 in your package.json file, but you're including Tailwind CSS v1 via a CDN in your index.html file, and it looks like you're using a Tailwind CSS v1/v2 tailwind.config.js config file.
  • You have the require('@tailwindcss/aspect-ratio') plugin in your PostCSS plugin list in your webpack.config.js file. This isn't a PostCSS plugin but rather a Tailwind CSS plugin, so it needs to be configured in your tailwind.config.js config file.
  • While you're importing Tailwind into your styles.scss, it doesn't look like the Tailwind styles are actually getting included in the built project, which is probably why the aspect ratio styles are not applying.

My recommendation is to have a look at how we recommend setting up Angular projects with Tailwind CSS using our guide here: https://tailwindcss.com/docs/guides/angular

Also, for what it's worth, the aspect-ratio CSS property has pretty good browser support these days, so maybe consider just using that instead.

Hope that helps 👍

  • 👍1
mattiLeBlanc commented

Hi @reinink .
Sorry about that if I made config issues, I used a stackblitz which preset some of these things like loading tailwind css v1 in html. I didnt see that.
In my own project I dont do that, I just load the tailwind via npm and I followed the tailwind setup instructions for Angular.
I will have a look at your suggestion to see if I made a mistake in the config.
Thanks.