如何将 tailwindcss 添加到 KotlinJS

Question

我无法将 tailwindcss 库添加到我的 KotlinJS 项目中。我尝试了多种方法。

我的 build.gradle.kts

中定义了多个依赖项

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

我尝试在我的 webpack.config.d 中使用此内容创建一个 tailwindcss.js

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

但这并没有做任何事情。我还尝试使用多个选项对其进行修改，但我始终无法编译 tailwindcss。我还尝试在 build.gradle.kts

中禁用和启用 KotlinJS CSS 支持

我找不到任何关于如何将 postcss 添加到 KotlinJS 项目的信息。

感谢您的帮助。

Answer 1

使用 node-gradle 插件可以实现基本的集成。

在你的build.gradle.kts:

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

同样在build.gradle.kts 中定义一个名为“tailwindcss”的任务，它通过npx 调用tailwind CLI。例如：

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)
}

最后，在build.gradle.kts 中将任务绑定到您的 processResources 步骤，以便它自动运行。请注意，您可能希望稍后对其进行细化，因为每次调用 processResources 步骤时都运行 tailwind 会减慢您的开发周期。

tasks.processResources {
  dependsOn(tailwindCss)
}

现在我们需要一个最小的package.json 在您的项目的根目录中。例如：

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

最后，我们在 NpxTask 定义的位置配置我们的 tailwind 配置，例如 ```css/tailwind.css"

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

现在在 processResource 步骤运行后，gradle 将调用 Tailwind npx 任务，使用您的源并将 CSS 写入您指定的位置。

Answer 2

接受的答案似乎不再有效。此外，使用 Node Gradle 插件不是最佳选择（KotlinJS 已经维护了自己的 package.json 和 yarn 安装）。

感谢 this repository (GitHub) 提供了一些小的更新 that you can find here (GitLab)，我设法让 Tailwind 与 KotlinJS 一起工作。