Integrating Tailwind CSS

[shubham_kamdar]

Basically, I have made a custom component from the tailwind component library. One thing though is that when I put the component into the actual page, it shows something that looks nothing like the Tailwind component. Does anyone have experience with this that could potentially help me debug this?

[jason]

Can you check that your tailwind CSS files are included in the /plasmic-host page? Usually you’ll want to import the CSS files in some sort of global layout, for example in Next.js it would be _app.tsx or layout.tsx.

[shubham_kamdar]

Im using javascript and next, but I just started building from the exported code from Plasmic and so there isn’t an app.js or layout.js page.

[alyssa_feola]

@jason if possible, is this something you could demostrate? I’ve been interested in leveraging tailwind as well, and typically use codegen; so I’d be curious to see how the setup would be with Plasmic.

[jason]

I think you can follow the installation instructions of Tailwind CSS. There shouldn’t be anything Plasmic specific.

For general instructions, see Installation - Tailwind CSS.

For Next.js-specific instructions, see Styling: Tailwind CSS | Next.js

[penn_su]

how do you activate tailwind for plasmic studio components? I set the html attributes class name with tailwind and with tailwind installed in the nextjs app but it doesn’t work.

My understanding is that tailwind only generate relevant class styles based on usage and you include the files to parse in its settings file tailwind.config.js but since plasmic pages are generated in the plasmic studio (i’m not using codegen), therefore tailwind wasn’t included in the rendering pipeline to generate the necessary class names.

Can someone give a better solutions to this?

I have a kinda bad workaround

export default {
  mode: 'jit',
  important: true,
  safelist: [
    {
      pattern: /./, // the "." means "everything"
    },
  ],
  content: ["./src/**/*.tsx"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
      },
    },
  },
  plugins: [],
} satisfies Config;

This pre-generate all classes so it will work in plasmic

[paul_stenhouse]

@penn_su did you get this to work? Looking to do something similar.

[jason]

@penn_su’s solution should work

[jason]

Here’s a summary for future readers about how to get Tailwind CSS working, depending on how you use Plasmic:

Codegen

Since files are available locally, Tailwind’s preprocessor should be able to scan the files to automatically detect used CSS classes.

Loader

Files are loaded dynamically, so Tailwind cannot automatically scan. Use safelisting to manually configure the set of CSS classes to ship in the bundle.