How to add tailwindcss to KotlinJS

Question

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.

score 3 · Accepted Answer · answered Sep 23 '20 at 23:48

A basic integration can be achieved with the node-gradle plugin.

In your build.gradle.kts:

plugins {
   id("com.github.node-gradle.node") version "3.0.0-rc2"
}

Also in build.gradle.kts define a task called "tailwindcss" that calls the tailwind CLI via npx. For example:

val tailwindCss = tasks.register<com.github.gradle.node.npm.task.NpxTask>("tailwindcss") {

  // Output CSS location
  val generatedFile = "build/resources/main/static/css/tailwind-generated.css"

  // Location of the tailwind config file
  val tailwindConfig = "css/tailwind.css"

  command.set("tailwind")
  args.set(listOf("build", tailwindConfig, "-o", generatedFile))

  dependsOn(tasks.npmInstall)

  // The location of the source files which Tailwind scans when running ```purgecss```
  inputs.dir("src/main/kotlin/path/to/your/presentation/files")

  inputs.file(tailwindConfig)
  outputs.file(generatedFile)
}

Finally, in build.gradle.kts bind the task to your processResources step, so that it runs automatically. Note you may want to refine this later, because running tailwind every time the processResources step is invoked will slow down your dev cycle.

tasks.processResources {
  dependsOn(tailwindCss)
}

Now we need a minimal package.json in the root of your project. For example:

{
  "name": "MyProject",
  "devDependencies": {
    "tailwindcss": "^1.7.0"
  }
}

Finally, we configure our tailwind config in the location defined by our NpxTask, in the example ```css/tailwind.css"

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

So now after the processResource step is run, gradle will invoke the Tailwind npx task, consume your source and write the CSS to the location you specified.

How to add tailwindcss to KotlinJS

1 Answers1