Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tailwindcss not applied after building package with tsdx #1167

Open
hbisadii opened this issue Feb 14, 2023 · 1 comment
Open

tailwindcss not applied after building package with tsdx #1167

hbisadii opened this issue Feb 14, 2023 · 1 comment

Comments

@hbisadii
Copy link

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
Copy link

walifile commented May 8, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants