Is it possible to use Tailwind (PostCSS) with TSUP?

[osvaldokalvaitir]

In the documentation it says that it has experimental CSS support but I couldn't execute it, I did the steps below:

Installation:

npm install tailwindcss postcss autoprefixer --save-dev

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

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

or

module.exports = {
  plugins: [require('tailwindcss')(), require('autoprefixer')()],
}

src/styles/globals.css

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

src/index.tsx

import './styles/globals.css'

code...

package.json

scripts:
"build": "tsup src/index.tsx --format esm,cjs --dts --external react",

In the dist folder it is still returning an index.css file instead of joining

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

[vaynevayne]

I also want to use tailwindcss, but I don't want to output .css files, but support css in js, can this be done?

[joshunrau]

I'm not sure what your exact use case is, but if you're looking to build a React library for your own use, you can just compile the code without the CSS, and include the compiled code in the CSS for your app.

tailwind.config.cjs

const path = require('path');

const baseConfig = require('my-library');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    path.join(path.dirname(require.resolve('my-library')), '**/*.{js,cjs,mjs}')
  ],
  presets: [baseConfig]
};

[Jared-Dahlke]

is there a way to have tsup convert the tailwind into css so we can just import the css into our app?

[osvaldokalvaitir]

is there a way to have tsup convert the tailwind into css so we can just import the css into our app?

That's what I wanted too

[ocavue]

I tested the tsup with Rollup and tailwindcss, and it looks fine to me (i.e. the dist/index.css is built as expected). I've created a simple repo as an example.

https://github.com/issueset/tsup-tailwindcss-example

Going to close this issue for now, but feel free to reopen it if anyone can provide a minimal replication to show the issue when working with tsup and tailwindcss together.

[Jared-Dahlke]

@ocavue this works, but now tree shaking is not working

I copied your tailwind example you just made and added react:
https://github.com/Jared-Dahlke/tsup-shadcn

the tailwind works now which is great! But now tree shaking is not working. In my example i am expecting Button to be about 10kb and Accordion to add more weight once it's added in. But it looks like it's just forcing you to import the whole file.

import { Button } from "tsup-tailwind-react-shadcn"; should only be about 10kb

[TheMikeyRoss]

I keep getting this error when I try to build my library that uses tailwind:

✘ [ERROR] C:\Users\Mikey\Desktop\coding\my-lib\src\tailwind.css:1:1: The `` class does not exist. If `` is a custom class, make sure it is defined within a `@layer` directive. [plugin postcss]

    node_modules/postcss/lib/input.js:106:15:
      106 │       result = new CssSyntaxError(