Tailwind for admin panel

default discord avatar
Sejden
10 months ago
17

Hi! Is there a way I can use Tailwindcss for components inside the admin panel?



Currently trying with this inside

payload.config.ts

:


export default buildConfig({
  admin{
    css: path.resolve(__dirname, "admin/style/global.css")
  },
  …
})


Should it be done differently?

  • discord user avatar
    jmikrut
    Payload Team
    10 months ago

    @Jarrod



    funny, we were just talking about this



    you should be able to do that @Sejden



    I've never used Tailwind but loading up extra CSS like that is done exactly how you're attempting to do it



    also, if it's not showing / working for you, try to

    rm -Rf node_modules/cache
  • default discord avatar
    Sejden
    10 months ago

    It worked after cleaning the cache. Thanks!

  • default discord avatar
    Ysione
    8 months ago

    @Sejden Hi, I want to use tailwind for panel too but when I add it, it breaks some of payload styles


    Did you encounter the same problem?

    image.png
  • default discord avatar
    Sejden
    8 months ago

    Hi @Ysione! You have to disable the Tailwind preflight, as it overwrites the Payload styles if active.


    https://tailwindcss.com/docs/preflight#disabling-preflight
  • default discord avatar
    Ysione
    8 months ago

    Great, thank you that helped though table still have issue, I think one line of css should fix it or there something else I missing?

    image.png
  • default discord avatar
    Sejden
    8 months ago

    Hm. Not sure why that could be happening. Try narrowing it to a Minimal Reproducible example and it might be easier to debug

  • default discord avatar
    iamPrompt
    8 months ago

    I found that it would be a little bit strange if we use TailwindCSS with PayloadCMS. The default root size for TW is 16px while the payload is 13px. TW is base on rem size so that the size we use for tw in payload is not the same as we normally do in others application.



    @jmikrut Is it possible to override the css both components and layout in one file without using !important?? Since I see payload use a separate scss file for each component. I'm not sure, if I rewrite the css with the existing class it would work or not?

  • default discord avatar
    Ysione
    8 months ago

    Found the issue, for some reason after build css file had class table which sets

    display:table

    , other than that all good, thank you for your help

  • default discord avatar
    iamPrompt
    8 months ago

    I think many issues are based on the preflight that we skip. Such the border, addition to the

    border

    and

    border-black

    , you need to add

    border-solid

    for the border to show up. If not, it just shows nothing.

  • default discord avatar
    blupandaman
    5 months ago

    What did you change in order to get the table width to show properly?



    Was it somethings in globals?

  • default discord avatar
    Ysione
    5 months ago

    Sorry, can't recall it, but I believe that I had a string as one of the props for component that had a "table" in it, so tailwind parser counted it as class, thats why it was in compiled file, I just renamed the string


    Maybe there is something similar

  • default discord avatar
    nonfungibletunji
    5 months ago

    Any tailwind best practices? I would like to use tailwind instead .scss

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.