jaredpalmer / tsdx

Zero-config CLI for TypeScript package development
https://tsdx.io
MIT License
11.2k stars 505 forks source link

tailwindcss not applied after building package with tsdx #1167

Open hbisadii opened 1 year ago

hbisadii commented 1 year ago

I'm not sure if this is a bug. I've got a tsdx uikit project with tailwindcss 3.2.6 "postcss": "^8.4.14" and "autoprefixer": "^10.4.13". I also have storybook in my project. The problem is that all tailwind classes are working alright in storybook but after I build the package and install it on another project none are working. I also got this tsdx.config.js with inject:true:

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const tailwindcss = require('tailwindcss');
let static_files = require('rollup-plugin-static-files');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      static_files({
        include: ['./src/assets', './src/styles'],
      }),
      postcss({
        plugins: [
          tailwindcss({
            purge: ['./src/**/*.tsx'],
            darkMode: false, // or 'media' or 'class'
            theme: {
              extend: {},
            },
            variants: {
              extend: {},
            },
            plugins: [],
          }),
          autoprefixer(),
        ],
        inject: true,
        // only write out CSS for the first bundle (avoids pointless extra files):
        extract: !!options.writeMeta,
      })
    );
    return config;
  },
};

Also when I build the project the components files are like this. for example for badge component there is a index.d.ts with following code:

import React, { FC } from "react";
import { colorsTypes } from "../../../types/colors-types";
declare type size = "lg" | "md" | "sm" | "xs";
export interface BadgeProps {
    size?: size;
    color?: colorsTypes;
    bgColor?: colorsTypes;
    className?: string;
    rounded?: string;
    children?: React.ReactNode;
    badgeContent?: React.ReactNode;
}
export declare const Badge: FC<BadgeProps>;
export default Badge;

while I have more codes in my src using tailwind classes. I just can't find what's wrong.

walifile commented 1 year ago

I noticed that you mentioned Tailwind CSS not being applied after building your package with TSDX. I just wanted to let you know that in the template I shared, Tailwind CSS is working perfectly after building.

I've tested it thoroughly, and the build process ensures that all the Tailwind CSS styles are correctly applied.

If you have any specific questions or need further assistance, please let me know.

You can find the template here: https://github.com/walifile/tsdx-tailwind-typescript-component-library