Payload is just mind blowing thing for me to create e-commerce website in short time without giving headche to developers (in case it's me) changing the stuff or updating the stuff again and again... But one thing is that the template for e-commerce is using sass to style webapges. Trust me i worked with both sass and tailwindcss. But i am good at styling webpages with tailwindcss because i had used almost three component libraries with that including

nextui

shadcn

and

daisyui

. Beacause it is easy peasy task to add a new theme or cutomizing th existing theme.. The way for cusotmizing with sass is more difficult for me as we have to adjust different color shades manually (in

src/app/_css/colors.scss

## Lets get to the point

I want to use some tailwindcss component library to style or create components. So anyone can give option to setup with Tailwindcss styles or something else (by default which is

.scss

right now.

markatomniux2 years ago
https://nouance.io/articles/how-to-setup-tailwindcss-with-payloadcms-and-webpack

m.naeem666222 years ago

@191776538205618177

In my case this is not working i had already found this but not worked.. I am using e-commerce template. In that tempalte the

buildConfig

is different. I tried with some workaround but not wroked:

export default buildConfig({
// ...
    webpack: config => {
      return {
        ...config,
        resolve: {
          ...config.resolve,
          alias: {
            ...config.resolve?.alias,
            dotenv: path.resolve(__dirname, './dotenv.js'),
            [path.resolve(__dirname, 'collections/Products/hooks/beforeChange')]: mockModulePath,
            [path.resolve(__dirname, 'collections/Users/hooks/createStripeCustomer')]:
              mockModulePath,
            [path.resolve(__dirname, 'collections/Users/endpoints/customer')]: mockModulePath,
            [path.resolve(__dirname, 'endpoints/create-payment-intent')]: mockModulePath,
            [path.resolve(__dirname, 'endpoints/customers')]: mockModulePath,
            [path.resolve(__dirname, 'endpoints/products')]: mockModulePath,
            [path.resolve(__dirname, 'endpoints/seed')]: mockModulePath,
            stripe: mockModulePath,
            express: mockModulePath,
          },
        },
// Here i added that snippet
        module: {
          ...config.module,
          rules: [
            ...config.module?.rules,
            {
              test: /\tailwind.css$/i,
              use: ['css-loader', 'postcss-loader'],
            },
          ],
        },
      }
    },
// ...

Adding the line

import '../tailwind.css'

at top of the

src/app/layout.tsx

worked for me..

Note: Adding import line in src/app/payload.config.tsx not worked for me.

markatomniux2 years ago
is it working ok for you now?
m.naeem666222 years ago
Yes.. it is working... by moving the line
import '../tailwind.css'
to
src/app/layout.tsx

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.