如何将tailwindcss添加到KotlinJS

问题描述

我无法将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支持

我找不到有关如何向Kotlinjs项目添加postcss的任何信息。

谢谢您的帮助。

解决方法

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

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

,

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

在您的build.gradle.kts中：

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

还在build.gradle.kts中定义一个名为“ tailwindcss”的任务，该任务通过npx调用顺风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定义的位置配置我们的tailwind配置，例如```css / tailwind.css''

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

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