kotlin - 如何将 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将任务绑定(bind)到您的 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 写入您指定的位置。