buen día,
Estoy creando una biblioteca de componentes React con TailwindCSS y ViteJS. La biblioteca genera cada componente como un archivo JS separado, por ejemplo:
// @components-library/src/ComponentA.jsx export default function ComponentA() { return <div className="flex justify-center">Component A</div>; } // Bundle Output: @components-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 };La aplicación que consume esta biblioteca de componentes también usa Tailwind. Sin embargo, los estilos no se aplican al componente importado. Los estilos específicos de la aplicación funcionan bien.
/* app/src/index.css */ @tailwind base; @tailwind components; @tailwind utilities; // app/src/App.jsx import CompoenntA from "@component-library/ComponentA"; export default function App() { return ( <div className="p-10"> <ComponentA /> </div> ); }En espera de asesoramiento de expertos.
¡Gracias!
Actualmente, también estoy trabajando en un proyecto similar al tuyo. He construido mi biblioteca de componentes con rollup . Generó un archivo CSS y luego importó ese archivo CSS a mi paquete principal.
import resolve from "@rollup/plugin-node-resolve"; import babel from "@rollup/plugin-babel"; import commonjs from "@rollup/plugin-commonjs"; 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/components", }, { file: packageJson.module, format: "esm", sourcemap: false, }, ], plugins: [ babel({ // this is needed because we're using TypeScript babelHelpers: "bundled", extensions: [".ts", ".tsx"], }), external(), resolve(), commonjs(), 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(), ], }, ]; import "@ht/components/dist/cjs/lib.css"; import "./assets/css/tailwind.css";Debe agregar la ruta del componente a tailwind.config.js.
En mi caso, mi biblioteca de componentes está vinculada al proyecto actual usando yarn link y estaba ocurriendo el mismo problema. Esto es lo que agregué en 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/{component-library-name}/src/**/*.{js,jsx,ts,tsx}" ], darkMode: false, // or 'media' or 'class' theme: { extend: {} }, variants: { extend: {} }, plugins: [] };