Support for rollup js?

[jimsheen]

Hi,

Is there a way to compile tailwind js using rollup js? I am using the following postcss.config.js 👍

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-preset-env')({
      stage: 1,
    }),
    require('postcss-nested'),
    tailwindcss('./tailwind.js'),
    require('autoprefixer'),
  ],
};

and in rollup.config

postcss({
  extensions: ['.css'],
  extract: true,
  modules: true,
  config: {
    path: './postcss.config.js'
  },
}),

When omitting the config.path it does not seem to want to compile tailwind js into css. Or even including it straight into rollup.config.js

const tailwindcss = require('tailwindcss');

...
postcss({
  extensions: ['.css'],
  extract: true,
  modules: true,
  config: {
    path: './postcss.config.js'
  },
  plugins: [
    require('postcss-import'),
    require('postcss-preset-env')({
      stage: 1,
    }),
    require('postcss-nested'),
    tailwindcss('./tailwind.js'),
    require('autoprefixer'),
  ]
}),

[jimsheen]

Ah fixed it, the component i was building from wasn't including the css file D'OH

[ericdfields]

@jimsheen can you share how you're including the css? my rollup + postcss config looks right. I'm trying to do something like

<style>
  @import './main.css';
    h1 {
        color: purple;
    }
</style>

but no luck

[B3Kay]

Ah fixed it, the component i was building from wasn't including the css file D'OH

Can you share how you configed rollup for Tailwind?

[mfeineis]

This ticket is not the freshest but in case somebody wants to have a look at a working tailwindcss+rollupjs setup, I have one here https://github.com/mfeineis/tailwindcss-exploration

[tim-phillips]

@mfeineis, that repo comes back 404

[alisahindev]

This ticket is not the freshest but in case somebody wants to have a look at a working tailwindcss+rollupjs setup, I have one here https://github.com/mfeineis/tailwindcss-exploration

not working link crashed

[GodBleak]

I have a working rollup + tailwind setup here. It's for Solid, but I imagine it will work for other frameworks.

[JasonMatthewsDev93]

I have a working rollup + tailwind setup here. It's for Solid, but I imagine it will work for other frameworks.

This is EXACTLY what I needed - after 2 days. You're truly doing the lords work! Works with create-react-app and the version of tailwind in the package.json

[agm1984]

I solved this in the past couple days by finding the root index.js file that is getting rolled up by rollup, such as where it transforms ./src/index.js into ./dist/index.js:

./src/index.js (root of bundle, ie: similar to the main.js file in a Vue application)

import './assets/css/index.css';

./assets/css/index.css

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

.test-fart {
    background-color: orange;
    color: brown;
}

./rollup.config.js

import postcss from 'rollup-plugin-postcss';
import tailwindcss from 'tailwindcss';

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

...

            plugins: [
                postcss({
                    extensions: ['.css'],
                    plugins: [tailwindcss(tailwindConfig)],
                }),
            ]
        },

After that you can add your package.json scripts for dev: rollup -c --watch and prod: rollup -c

[SySagar]

I am trying to build my componet library using rollup. I can assure that my storybook is working fine and getting all styles from tailwind. However on bundling and using the button I can't see any stlyes applied. Althoug on inspecting the styles are written there.

My rollupConfig:

const resolve = require("@rollup/plugin-node-resolve");
const commonjs = require("@rollup/plugin-commonjs");
const typescript = require("@rollup/plugin-typescript");
const dts = require("rollup-plugin-dts");
const postcss = require("rollup-plugin-postcss");
const tailwindcss = require("tailwindcss")
const tailwindConfig = require("./tailwind.config")

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

module.exports = [
  {
    input: "src/index.ts",
    external: ['react-dom','css'],
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      }
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      postcss({
        extract: 'tailwind.css', 
        extends:['.css'], 
        module:false,
        minimize: true,
        inject: {
          insertAt: 'top',
        },
        plugins: [
          tailwindcss(tailwindConfig),
          require('autoprefixer'), // Assuming you're using Autoprefixer
        ],
      }),
    ],
  },
  {
    input: "dist/types/src/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "cjs" }],
    plugins: [dts.default()],
    external: [/\.css$/],
  },
];

My index.ts:

import './tailwind.css'

export * from './components/ui/index'

Can someone please help?

[SySagar]

I solved this in the past couple days by finding the root index.js file that is getting rolled up by rollup, such as where it transforms ./src/index.js into ./dist/index.js:

./src/index.js (root of bundle, ie: similar to the main.js file in a Vue application)

import './assets/css/index.css';

./assets/css/index.css

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

.test-fart {
    background-color: orange;
    color: brown;
}

./rollup.config.js

import postcss from 'rollup-plugin-postcss';
import tailwindcss from 'tailwindcss';

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

...

            plugins: [
                postcss({
                    extensions: ['.css'],
                    plugins: [tailwindcss(tailwindConfig)],
                }),
            ]
        },

After that you can add your package.json scripts for dev: rollup -c --watch and prod: rollup -c

Yes this work. But it shoul naturally import the css files rather than manually updating it in build files.

[socketopp]

I created a repository for my case.

I am trying to implement a widget in Svelte using Tailwind and I am using rollup.js together with this. However, when running the server, the app.css is failed to be loaded from the Svelte component.

I am importing app.css in my Svelte component

<style>
   @import '../app.css';
</style>

My app.css look like this:

@import './preflight.css';
@tailwind components;
@tailwind utilities;

My tailwind config have a specific prefix to prevent style leaking

export default {
    important: '#__my-widget',
    prefix: 'tw-w-',
    content: ['./src/**/*.{html,js,ts,svelte}'],
    theme: {
        extend: {}
    },
    plugins: [forms]
};

My preflight file looks like this...

#__my-widget ::before,
#__my-widget ::after {
    --tw-content: '';
}
#__my-widget html {...}

Would be awesome if someone could point me in the right direction here.