tailwind 4

pete0550last year

5

@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

• 

  marclp_eslast year

  I have the same problem, the list width is incorrect when using v4

• 

  arseniyxlast year

  I believe one of major benefits using CMS is that you not need to wast time on customizing. So I'm not sure if adding tailwind or shadcn is best approach, actually. But I might be wrong in some cases.

• 

  pete0550last year

  i have custom blocks that use tailwind in the front end. so i want to be able to preview them in the admin so need tailwind css to apply on the admin side. in v3 tailwind it worked fine. for v4 it shoudl work fine and works in dev mode but whatever happens in the build process it doesnt work. unfortunately payload admin styling doesnt do a reset first and doesnt fully style all elements so applying a full tailwind css to admin breaks the exisitng styling when it resets

• 

  arseniyxlast year

  I see what you mean now. This highlight bigger issue that you need tailwind styles of frontend in the admin, just for the preview.

  
  
  

  Not sure why its so, but there should be a better approach.

• 

  pete0550last year

  It’s not just the preview. I use tailwind for my custom fields etc too as I much prefer working with tailwind than vanilla css as I find it much quicker and easier to work out what’s going on 6 months later when I have forgotten about what I did

  
  
  

  If you change the global.scss to be global.css instead and update the import in the payload layout to the new css file name then it works in production. Assuming its a bug with the tailwind 4 builder that isnt picking up scss files but is picking up css. strange how it works in dev with scss file.

  
  
  

  so to be clear:

  
  
  

  - change golbal.scss name to be global.css

  
  

  - change import line in layout file to import the newly named css file

  
  
  

  then the global.css file can be:

  
  

  @layer theme, base, components, utilities;
  @import 'tailwindcss/theme.css' layer(theme);
  @import 'tailwindcss/utilities.css' layer(utilities);

  
  
  

  and the front end css file can be:

  
  

  @import 'tailwindcss';

  
  
  

  and then it works as expected by not loading base reset in admin but does it fully in the front end and now works in production as well as development