Tailwind for admin panel

Sejden

10 months ago

17

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

• 

  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
• 

  Sejden

  10 months ago

  It worked after cleaning the cache. Thanks!

• 

  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?

  
• 

  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
• 

  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?

  
• 

  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

• 

  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?

• 

  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

• 

  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.

• 

  blupandaman

  5 months ago

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

  
  

  
  

  Was it somethings in globals?

• 

  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

• 

  nonfungibletunji

  5 months ago

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