Tailwind styles are not being applied after bundling with Rollup

Question

Apologies if this is an obvious question, this is my first time trying to build a component library.

I'm building a React component library with Tailwind CSS 3. When I run the components with Storybook, they display as intended. However, when I bundle with Rollup, the class names are applied, but the CSS is not included in the build.

This is my tailwind.config.js file:

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

My rollup.config.js file:

import babel from 'rollup-plugin-babel';
import external from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';

const packageJson = require('./package.json');

export default [
  {
    input: 'src/index.js',
    output: [
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      postcss({
        config: {
          path: './postcss.config.js',
        },
        extensions: ['.css'],
        minimize: true,
        inject: {
          insertAt: 'top',
        },
      }),
      babel({
        exclude: 'node_modules/**',
        presets: ['@babel/preset-react'],
      }),
      external(),
      resolve(),
      terser(),
    ],
  },
];

My postcss.config.js file:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

And my package.json file:

{
  "name": "@jro31/react-component-library",
  "version": "0.0.5",
  "description": "A library of React components",
  "scripts": {
    "rollup": "rollup -c",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jro31/react-component-library.git"
  },
  "keywords": [
    "react",
    "components",
    "component-library",
    "react-component-library"
  ],
  "author": "Jethro Williams",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/jro31/react-component-library/issues"
  },
  "homepage": "https://github.com/jro31/react-component-library#readme",
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/preset-react": "^7.17.12",
    "@headlessui/react": "^1.6.5",
    "@heroicons/react": "^1.0.6",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/builder-webpack4": "^6.5.9",
    "@storybook/manager-webpack4": "^6.5.9",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "autoprefixer": "^10.4.7",
    "babel-loader": "^8.2.5",
    "postcss": "^8.4.14",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "rollup": "^2.75.7",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-terser": "^7.0.2",
    "tailwindcss": "^3.1.3"
  },
  "peerDependencies": {
    "@headlessui/react": "^1.6.5",
    "@heroicons/react": "^1.0.6",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/jro31"
  }
}

My src/index.css file is simply:

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

I only have one dummy component for now. Based on this, when I run npm run storybook, my component displays as intended with the Tailwind styling applied.

However, on running npm run rollup, the dist/esm/index.js file is generated as follows:

import t from"react";const e=e=>t.createElement("button",{className:"text-9xl md:text-6xl bg-blue-400"},e.label);export{e as Button};
//# sourceMappingURL=index.js.map

It includes the Tailwind classnames, but not styling. So importing this component into an external project, the class names are applied, but the Tailwind styling is not.

Anyone have any idea where I'm going wrong? I've spent a few hours trying to fix this, so would be incredible grateful for any help.

Bring

Answer 1

I finally figured it out.

I needed to import my src/index.css file into my component.

My src/index.css file is simply:

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

Then in my src/components/index.js file I imported this file:

import '../index.css';

export { default as Button } from './Button';

Now the styling gets included in the Rollup bundle.

After all I tried, I can't believe it was this simple. I hope at least that this answer helps someone else avoid going through the same pain and suffering.

Bring

Answer 2

Given your rollup.config.js:

    plugins: [
      postcss({
        config: {
          path: './postcss.config.js',
        },
        extensions: ['.css'],
        minimize: true,
        inject: {
          insertAt: 'top',
        },
      }),

You should be able to change it to this:

import tailwindcss from 'tailwindcss';

const tailwindConfig = require('./tailwind.config.js');

...

    plugins: [
      postcss({
        config: {
          path: './postcss.config.js',
        },
        extensions: ['.css'],
        minimize: true,
        inject: {
          insertAt: 'top',
        },
        plugins: [tailwindcss(tailwindConfig)],
      }),

That should allow you to have package.json scripts as follows:

"scripts": {
    "dev": "rollup -c --watch",
    "build": "rollup -c"
},

Beyond that the accepted answer is what you need. I typically import the css file into the entry point of the application or npm library (root index.js file that is bundled with rollup), shown here in your rollup.config.js file:

export default [
  {
    input: 'src/index.js',

Pleasure