Admin Extensibility: Custom media queries in a custom tailwind config are ignored

robodove commented 1 year ago

Bug report

Describe the bug

Custom media queries defined in a custom Tailwind CSS configuration file are being ignored when used within a Medusa admin extension. Despite the media queries being correctly defined and the build process completing without errors, the custom breakpoints are not being applied as expected within the admin UI.

System information

Medusa version: latest
Node.js version: 18.17.0
Database: irrelevant
Operating system: macOS Sonoma
Browser (if relevant): irrelevant

Steps to reproduce the behavior

Extend the Medusa admin with a custom page/component.

Create a custom tailwind.config.js with custom media queries like so:


module.exports = {
 theme: {
   extend: {
     screens: {
       'custom': '640px',
     },
   },
 },
}

Use the custom media prefix within a .css file or inside a react component className:
```
.test {
@apply custom:bg-red-500
}
```
Expected behavior is that it works, however the build fails with this error: The `custom:bg-red-500` class does not exist. If `custom:bg-red-500` is a custom class, make sure it is defined within a `@layer` directive.
Defining it inside a layer directive doesn't work either.

kasperkristensen commented 1 year ago

Hi @robodove,

We don't support adding custom Tailwind configs for admin extensions atm, so what you are trying to do here won't be possible. I can definitely see the use case for this, and while we do have plans for adding an API to extend and override the styles of the admin, this could also be a great option for allowing full control of the styles.

I am closing this issue for now, as it is working as expected. But I am adding it to my backlog as something I'll pick up some time in the near future, but for now you will have to use arbitrary values for this, eg. max-[600px]:bg-red.

robodove commented 1 year ago

Hi @robodove,

We don't support adding custom Tailwind configs for admin extensions atm, so what you are trying to do here won't be possible. I can definitely see the use case for this, and while we do have plans for adding an API to extend and override the styles of the admin, this could also be a great option for allowing full control of the styles.

I am closing this issue for now, as it is working as expected. But I am adding it to my backlog as something I'll pick up some time in the near future, but for now you will have to use arbitrary values for this, eg. max-[600px]:bg-red.

https://github.com/medusajs/medusa/discussions/4116

Here you state that custom tailwind configs are supported though?

Anyways, i got it working btw

kasperkristensen commented 1 year ago

Hi @robodove, We don't support adding custom Tailwind configs for admin extensions atm, so what you are trying to do here won't be possible. I can definitely see the use case for this, and while we do have plans for adding an API to extend and override the styles of the admin, this could also be a great option for allowing full control of the styles. I am closing this issue for now, as it is working as expected. But I am adding it to my backlog as something I'll pick up some time in the near future, but for now you will have to use arbitrary values for this, eg. max-[600px]:bg-red.

4116

Here you state that custom tailwind configs are supported though?

Anyways, i got it working btw

Not sure where I said we supported it. In the RFC I mention needing to add a empty tailwind.config.js to make the tailwind intellisense VS code plugin work, but that was solved by copying the tailwind.config.js that is used into the .cache folder.

But great that you got it working, is it something you would able to share how you did? I am sure other people would also find it useful 😄

robodove commented 1 year ago

One way is to use multiple config file configuration: https://fogbender.com/blog/separate-tailwind-config-for-landing

The other.. is simply creating a tailwind config file at the project root, copying the contents of the medusa config file into it and extending it

The most important part is that since you guys seem to have custom screen prefixes, this must be copied and we have to use the xsmall, small, medium and large prefixes (instead of the tailwind default ones):

screens: {
        xsmall: "0px",
        small: "769px",
        medium: "1025px",
        large: "1464px",
      },

A quick and easy feature btw to support them natively in medusa would be to look for a tailwind config in the root folder and doing a deep assign Maybe guarding the properties you use by throwing a warning could make sense

medusajs / medusa