如何将 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 步骤时运行顺风会减慢您的开发周期。

tasks.processResources {
  dependsOn(tailwindCss)
}

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

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

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

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

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

Answer 2

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

我设法让 Tailwind 与 KotlinJS 一起工作，感谢 this repository (GitHub) with a few small updates that you can find here (GitLab)。

如何将 tailwindcss 添加到 KotlinJS

How to add tailwindcss to KotlinJS

kotlin

webpack

postcss

tailwind-css

kotlin-js