Integrating tailwind css in theia using React #13455

ayush-shta · 2024-03-05T17:26:38Z

ayush-shta
Mar 5, 2024

I'm using react, and I could not get tailwind CSS to work with Theia. Can anyone please help me with this?

JonasHelming · 2024-03-06T07:49:02Z

JonasHelming
Mar 6, 2024
Maintainer

Could you describe the issue more in detail?

3 replies

ayush-shta Mar 6, 2024
Author

I tried installing tailwind css using this link, on our thiea project that uses React for frontend UI.

I tried the steps mentioned in both the Tailwind CLI and Using PostCSS. But I could not figure out how to integrate within our theia app.

I think the main issue is that I could not figure out where to how to do the last step mentioned in the docs ("Add your compiled CSS file to the <head> "), since I cannot find where will be our equivalent index.html file is for theia.

I could be thinking this in a complete wrong way. Please let me know what steps should I take for this.

sdirix Mar 6, 2024
Collaborator

Hi @ayush-shta,

The index.html is fully generated during theia build. Of course you could modify it afterwards, it will be located in lib/frontend/index.html. However it will be overwritten with each build.

However you should be able to include the CSS file progammatically. I think just importing it in some source file of yours, e.g. import './generated.css'; should be sufficient. It will then be processed by webpack and be automatically included. You just need to make sure that the path of the generated CSS file matches the deployment. You could for example handle this with webpack customization, adding a copy step.

ayush-shta Mar 7, 2024
Author

Thanks @sdirix for the suggestion.

However, I'm still a newbie on this. I did not see the generated CSS being generated, and I'm still not sure where or how should I make the webpack customization.

Could you please let me know where we should be looking into?

kachurun · 2025-06-06T23:33:14Z

kachurun
Jun 6, 2025

Its pretty easy man,
First of all you need to drop off tsc from your plugin build process and replace it with vite:

vite.config.mjs

import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
import { defineConfig } from 'vite';
import { libInjectCss } from 'vite-plugin-lib-inject-css';

export default defineConfig({
    plugins: [
        react(),
        tailwindcss(),
        libInjectCss(),
    ],
    build: {
        lib: {
            entry: resolve(__dirname, 'src/index.ts'),
            formats: ['cjs'],
            fileName: 'index',
        },
        outDir: 'lib',
        emptyOutDir: true,
        cssCodeSplit: true,
        sourcemap: true,
        target: 'ES2022',
        rollupOptions: {
            external: (id) => {
                // Aliases is not external
                if (id.startsWith('@/')) {
                    return false;
                }

                return !id.startsWith('.') && !id.startsWith('/') && !id.includes('\0');
            },
            output: {
                preserveModules: true,
                preserveModulesRoot: 'src',
                entryFileNames: '[name].js',
                chunkFileNames: '[name].js',
                format: 'cjs',
                exports: 'named',
            },
        },
    },
    resolve: {
        alias: [{
            find: /^@\/(.*)/,
            replacement: `${ resolve(__dirname, 'src') }/$1`,
        }],
    },
});

It also fix some issues like necessary to use crazy paths to css files, like '../../src/styles/index.css'

Then import your css file in your module and import tailwind in this css file. Easy peasy.

1 reply

kachurun Jun 6, 2025

I also recommend replace lerna with turborepo to run everything smoothly. But maybe with lerna everything will work too

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Integrating tailwind css in theia using React #13455

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Integrating tailwind css in theia using React #13455

Uh oh!

ayush-shta Mar 5, 2024

Replies: 2 comments · 4 replies

Uh oh!

JonasHelming Mar 6, 2024 Maintainer

Uh oh!

Uh oh!

ayush-shta Mar 6, 2024 Author

Uh oh!

Uh oh!

sdirix Mar 6, 2024 Collaborator

Uh oh!

ayush-shta Mar 7, 2024 Author

Uh oh!

kachurun Jun 6, 2025

Uh oh!

kachurun Jun 6, 2025

ayush-shta
Mar 5, 2024

Replies: 2 comments 4 replies

JonasHelming
Mar 6, 2024
Maintainer

ayush-shta Mar 6, 2024
Author

sdirix Mar 6, 2024
Collaborator

ayush-shta Mar 7, 2024
Author

kachurun
Jun 6, 2025