G'day,

I am building a React ponent library with TailwindCSS and ViteJS. The library outputs each ponent as a separate JS file, for example:

// @ponents-library/src/ComponentA.jsx

export default function ComponentA() {
  return <div className="flex justify-center">Component A</div>;
}

// Bundle Output: @ponents-library/dist/ComponentA.js

import { j as jsx } from "./jsx-runtime.js";
import "react";
function ComponentA() {
  return /* @__PURE__ */ jsx("div", {
    className: "flex justify-center",
    children: "Component A",
  });
}
export { ComponentA as default };

The app that is consuming this ponents library is also using Tailwind. However, the styles are not applied to the imported ponent. App-specific styles are working fine.

/* app/src/index.css */

@tailwind base;
@tailwind ponents;
@tailwind utilities;

// app/src/App.jsx

import CompoenntA from "@ponent-library/ComponentA";
export default function App() {
  return (
    <div className="p-10">
      <ComponentA />
    </div>
  );
}

Awaiting expert advice.

Thank you!

G'day,

I am building a React ponent library with TailwindCSS and ViteJS. The library outputs each ponent as a separate JS file, for example:

// @ponents-library/src/ComponentA.jsx

export default function ComponentA() {
  return <div className="flex justify-center">Component A</div>;
}

// Bundle Output: @ponents-library/dist/ComponentA.js

import { j as jsx } from "./jsx-runtime.js";
import "react";
function ComponentA() {
  return /* @__PURE__ */ jsx("div", {
    className: "flex justify-center",
    children: "Component A",
  });
}
export { ComponentA as default };

The app that is consuming this ponents library is also using Tailwind. However, the styles are not applied to the imported ponent. App-specific styles are working fine.

/* app/src/index.css */

@tailwind base;
@tailwind ponents;
@tailwind utilities;

// app/src/App.jsx

import CompoenntA from "@ponent-library/ComponentA";
export default function App() {
  return (
    <div className="p-10">
      <ComponentA />
    </div>
  );
}

Awaiting expert advice.

Thank you!

• javascript
• css
• reactjs
• tailwind-css
• vite

2 Answers 2

You should add the path of the ponent to the tailwind.config.js.

In my case, my ponent library is symlinked to the current project using yarn link and the same problem was happening. Here is what I added in tailwind.config.js:

module.exports = {
  // use content instead of purge if using tailiwind v3
  purge: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",

    // this line fixed the issue for me
    "./node_modules/{ponent-library-name}/src/**/*.{js,jsx,ts,tsx}"
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
};

Currently, I am also working on a similar project as like as you. I have built my ponent library with rollup. It generated a CSS file then imported that CSS file to my main package.

My Rollup Config

import resolve from "@rollup/plugin-node-resolve";
import babel from "@rollup/plugin-babel";
import monjs from "@rollup/plugin-monjs";
import typescript from "@rollup/plugin-typescript";
import { terser } from "rollup-plugin-terser";
import external from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import swc from "rollup-plugin-swc";
import filesize from "rollup-plugin-filesize";
const packageJson = require("./package.json");

export default [
    {
        input: "index.ts",
        output: [
            {
                file: packageJson.main,
                format: "cjs",
                sourcemap: false,
                name: "@ht/ponents",
            },
            {
                file: packageJson.module,
                format: "esm",
                sourcemap: false,
            },
        ],
        plugins: [
            babel({
                // this is needed because we're using TypeScript
                babelHelpers: "bundled",
                extensions: [".ts", ".tsx"],
            }),
            external(),
            resolve(),
            monjs(),
            typescript({ tsconfig: "./tsconfig.json" }),
            postcss({
                config: {
                    path: "./postcss.config.js",
                },
                extensions: [".css"],
                minimize: true,
                extract: "lib.css",
            }),
            swc({
                jsc: {
                    parser: {
                        syntax: "typescript",
                    },
                    target: "es2018",
                },
            }),
            terser(),
            filesize(),
        ],
    },
];

Main Package's index

import "@ht/ponents/dist/cjs/lib.css";
import "./assets/css/tailwind.css";