Material Tailwind integration with Redwood

Get Help and Help Others
1

Hello, good morning.

I’m having trouble using Material Tailwind (https://www.material-tailwind.com/) on RW. I did the setup, but it doesn’t style correctly.

I installed the package in the web workspace, added the HOC withMT() in the export of the Tailwind config, imported the contents of the MTT components to the tailwind config (section indicated for monorepos in the doc), add <ThemeProvider> on App.tsx , but nothing made it work. Any tips or has anyone successfully installed it?

image

Rendered button on browser appears like this (on screenshot above)

1 Like
2

@MichaelrMentele I know you use MUI… any suggestions?

3

I don’t know anything about that library, but I’d suggest you take a look at the built-in support for Tailwind (see Command Line Interface | RedwoodJS Docs). Run through that setup to understand how it works and see if you can build from there.

Hope that helps!

1 Like
4

Hey @ipetinate did you get this resolved in the end by chance?

1 Like
5

I ran into the same issue, eventually fixed it by using the node-modules of the web directory. Posting the tailwind.config.js for anyone else facing the issue.

/** @type {import('tailwindcss').Config} */
const withMT = require('@material-tailwind/react/utils/withMT')

module.exports = withMT({
  content: [
    'src/**/*.{js,jsx,ts,tsx}',
    '../node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}',
    '../node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
})
3 Likes
6

Hello Grace.

No, I opted for other solutions and no longer use Redwood, but even at the time I decided not to use Tailwind Material due to factors other than the lack of support.

7

Hi David, thanks for responding, and sorry for the delay.

But I had already used the official support for Tailwind, and it worked very well, the problem was with the integration of the third-party library.