Is there a way to make tailwindcss work when deployed as an npm module?

When TC is executed immediately, it works well. tailwindcss does not work when referencing after npm module deployment.

TC.js (src/lib)

import React, { Fragment } from "react";
import './TC.css';

const TC = () => {
  return (
    <Fragment>
      <div className='bg-blue-200'>hello</div>
    </Fragment>
  );
};

export default TC;

TC.css (src/lib)

@tailwind base;
@tailwind components;
@tailwind utilities;

package.json (/)

Dist file was created and distributed with the command below.

  "scripts": {
    "publish:npm": "rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files"
}

import TC

tailwindcss is not working.

import React from "react";
import TC "@niceharu/tc";

const Home = () => {
  return (
     <TC></TC>
  );
};

export default Home;

CodePudding user response：

Yeah, it works to import the compiled CSS. Thanks. I compiled it using the command below.

"scripts": { "build:css": "tailwindcss -o dist/TC.css --minify" }