Building a package that has a tailwind dependency

Hello everyone!

I have 2 phoenix apps which both share a set of components. So I decided to create a package to extract these components out of the apps. So far so good, everything is working except that these components are using tailwind classes, so when the phoenix apps generate the css, the classes from the package are not being included, because they can’t be scanned. I have basically this config for tailwind on the phoenix side:

/** @type {import('tailwindcss').Config} */

let plugin = require("tailwindcss/plugin");

module.exports = {
    content: [
        './js/**/*.js',
        '../lib/*_web.ex',
        '../lib/*_web/**/*.*ex',
        '../storybook/**/*.*ex',
    ],

What would be the right approach here? Should I add tailwind to the package and then somehow merge the app css with the package css? thoughts? anyone dealing with the same issue?

Thanks!

Found my answer in the Petal components faq page :slight_smile:

1 Like