Tailwind for admin panel

sejden7 months ago

7

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

• 

  jmikrut

  2 years ago

  @281120856527077378
  
  

  funny, we were just talking about this

  
  
  

  you should be able to do that

  @668622626041757706
  
  

  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
• 

  ysione2 years ago

  @668622626041757706

  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?

  
  
  

  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?

  
  
  

  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

  
  
  

  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
• 

  iamprompt2 years 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.

  
  
  @364124941832159242

  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?

  
  
  

  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.

• 

  vaunblu2 years ago

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

  
  
  

  Was it somethings in globals?

• 

  nonfungibletunji2 years ago

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

• 

  alexanarcho8 months ago

  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
• 

  whitesniperr8 months ago

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