kotlinwebpackpostcsstailwind-csskotlin-js

How to add tailwindcss to KotlinJS

I am unable to add the tailwindcss library to my KotlinJS project. I tried multiple things.

I have multiple dependencies defined in my build.gradle.kts

implementation(npm("postcss", "latest"))
implementation(npm("postcss-loader", "latest"))
implementation(npm("tailwindcss", "1.8.10"))

I tried creating a tailwindcss.js in my webpack.config.d with this content

config.module.rules.push({
        test: /\.css$/i,
        use: [
            'style-loader',
            'css-loader',
            {
                loader: 'postcss-loader',
                options: {
                    postcssOptions: {
                        plugins: [
                            [
                                'tailwindcss'
                            ],
                        ],
                    },
                },
            }
        ]
    }
);

But that doesn't do anything. I also tried modifying this with multiple options, but I was never able to get tailwindcss to compile. I also tried disabling and enabling the KotlinJS CSS support in build.gradle.kts

I can't find any info on how to add postcss to KotlinJS project.

Thank you for any help.

Solution

  • The accepted answer seems to not work anymore. Also, using the Node Gradle plugin is sub-optimal (KotlinJS already maintains its own package.json and yarn installation).

    I managed to get Tailwind to work with KotlinJS thanks for this repository (GitHub) with a few small updates that you can find here (GitLab).