search

stevecochrane / tailwindcss-logical

A CSS Logical Properties and Values plugin for Tailwind CSS.
https://stevecochrane.github.io/tailwindcss-logical/
ISC License
172 stars 2 forks source link

Inset Inline Properties not being applied #31

Closed K3TH3R closed 2 years ago

K3TH3R commented 2 years ago

I'm in the process of migrating a small app build over to logical properties. Everything has largely gone smoothly, but I've run into one issue with the inset inline properties. I am seeing the actual class in my VSCode Intellisense:

Screen Shot 2022-03-01 at 10 43 07 am

Screen Shot 2022-03-01 at 11 19 17 am

I thought it might be something with JIT/purgeCSS, but I'm not running into any issues with any other of the tailwindcss-logical classes so far. Everything else, including the inset-inline- classes are working and being applied in the HTML, but I can't get the inline-start- and inline-end- classes to be applied.

[Edit] Also seeing this on:

stevecochrane commented 2 years ago

Hi @K3TH3R,

Hmmm, nothing comes immediately to mind, but with some more info maybe I can narrow down the cause. Do the block-start- and block-end- classes work as expected? If so, that's pretty strange, because those classes are built in exactly the same way as inline-start- and inline-end- so they should work the same way.

Is your project public on GitHub? If not, what versions of tailwindcss and tailwindcss-logical are you using? And do you have anything else in your tailwind.config.js file (or postcss.config.js file) that might cause a conflict with the affected classes?

K3TH3R commented 2 years ago

@stevecochrane Thanks. I've tried recreating a minimal example repo for you and I can't seem to replicate it, so it must be some weirdness in my main project.

K3TH3R commented 2 years ago

I'm going to add this in here as documentation for anyone else that might run into this in the future. The problem appears to lie not with tailwindcss-logical, so much as it does with postcss-preset-env. I was seeing unnecessary color overrides on my inline border classes which were wiping out my CSS custom property values: Screen Shot 2022-03-17 at 9 49 13 am

Simply commenting out postcss-preset-env from my postcss.config.js file fixed the problem. I'm still working on narrowing down how/why this is happening within preset-env and plan to open a ticket over there once I have it figured out, but wanted to add this for now in case anyone else bumps into this problem.

stevecochrane commented 2 years ago

Interesting, and this is good to know about since postcss-preset-env is very commonly used. Thank you for sharing this!