Tailwind for admin panel

sejdenlast year

14

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

• 

  jmikrut

  last year

  @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
• 

  sejdenlast year

  It worked after cleaning the cache. Thanks!

• 

  ysionelast year

  @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?

  
• 

  sejdenlast year

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

  
  https://tailwindcss.com/docs/preflight#disabling-preflight
• 

  ysionelast year

  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?

  
• 

  sejdenlast year

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

• 

  iampromptlast year

  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?

• 

  ysionelast year

  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

• 

  iampromptlast year

  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.

• 

  vaunblulast year

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

  
  

  
  

  Was it somethings in globals?

• 

  ysionelast year

  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

• 

  nonfungibletunjilast year

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

• 

  alexanarcholast month

  bump, also interested in just adding tailwind to admin panel with out destroying the rest (using the latest 3.0 beta)

  
  

  
  

  was able to solve this by following this post:

  https://payloadcms.com/blog/how-to-setup-tailwindcss-and-shadcn-ui-in-payload
• 

  whitesniperrlast month

  You can add prefix for your tailwind to avoid mess up the predefined css from payload