diff --git a/.idea/runConfigurations/Auto_reload_the_Tailwind_example.xml b/.idea/runConfigurations/Auto_reload_the_Tailwind_example.xml new file mode 100644 index 0000000..4cbfa8d --- /dev/null +++ b/.idea/runConfigurations/Auto_reload_the_Tailwind_example.xml @@ -0,0 +1,24 @@ + + + + + + + true + true + false + false + + + \ No newline at end of file diff --git a/.idea/runConfigurations/Build_the_Tailwind_example.xml b/.idea/runConfigurations/Build_the_Tailwind_example.xml new file mode 100644 index 0000000..6314384 --- /dev/null +++ b/.idea/runConfigurations/Build_the_Tailwind_example.xml @@ -0,0 +1,25 @@ + + + + + + + true + true + false + false + + + \ No newline at end of file diff --git a/.idea/runConfigurations/Clean_the_Tailwind_example.xml b/.idea/runConfigurations/Clean_the_Tailwind_example.xml new file mode 100644 index 0000000..a1998fa --- /dev/null +++ b/.idea/runConfigurations/Clean_the_Tailwind_example.xml @@ -0,0 +1,25 @@ + + + + + + + true + true + false + false + + + \ No newline at end of file diff --git a/.idea/runConfigurations/Run_the_Tailwind_example.xml b/.idea/runConfigurations/Run_the_Tailwind_example.xml new file mode 100644 index 0000000..3331515 --- /dev/null +++ b/.idea/runConfigurations/Run_the_Tailwind_example.xml @@ -0,0 +1,25 @@ + + + + + + + true + true + false + false + + + \ No newline at end of file diff --git a/examples/tailwind/README.md b/examples/tailwind/README.md new file mode 100644 index 0000000..b136832 --- /dev/null +++ b/examples/tailwind/README.md @@ -0,0 +1,3 @@ +# Tailwind example + +Example of a build with a single Kotlin/JS project using TailwindCSS. diff --git a/examples/tailwind/build.gradle.kts b/examples/tailwind/build.gradle.kts new file mode 100644 index 0000000..a8e0559 --- /dev/null +++ b/examples/tailwind/build.gradle.kts @@ -0,0 +1,27 @@ +plugins { + kotlin("multiplatform") version "1.9.10" + + // List of releases: https://gitlab.com/opensavvy/kotlin-vite/-/releases + id("opensavvy.vite.kotlin") // version "REPLACE THIS" +} + +repositories { + mavenCentral() +} + +kotlin { + js(IR) { + browser() + binaries.executable() + } + + sourceSets { + val jsMain by getting { + dependencies { + implementation(devNpm("tailwindcss", "3.3.3")) + implementation(devNpm("postcss", "8.4.31")) + implementation(devNpm("autoprefixer", "10.4.16")) + } + } + } +} diff --git a/examples/tailwind/settings.gradle.kts b/examples/tailwind/settings.gradle.kts new file mode 100644 index 0000000..a71b367 --- /dev/null +++ b/examples/tailwind/settings.gradle.kts @@ -0,0 +1 @@ +rootProject.name = "example-tailwind" diff --git a/examples/tailwind/src/jsMain/kotlin/Main.kt b/examples/tailwind/src/jsMain/kotlin/Main.kt new file mode 100644 index 0000000..92713b8 --- /dev/null +++ b/examples/tailwind/src/jsMain/kotlin/Main.kt @@ -0,0 +1,17 @@ +package opensavvy.gradle.vite.kotlin.example.tailwind + +import kotlinx.browser.document +import kotlinx.browser.window +import kotlin.js.Date + +fun main() { + println("Hello world!") + createOrModifyDiv("Hello from Tailwind !") +} + +private fun createOrModifyDiv(content: String){ + val div = document.querySelector("div") + ?: document.createElement("div").also { document.body?.appendChild(it) } + div.innerHTML = content + div.className = "w-48 flex justify-center items-center m-2 p-3 text-gray-200 rounded-xl bg-indigo-600 hover:bg-indigo-800 hover:cursor-not-allowed select-none transition-colors ease-in-out" +} diff --git a/examples/tailwind/src/jsMain/resources/index.html b/examples/tailwind/src/jsMain/resources/index.html new file mode 100644 index 0000000..1d80f00 --- /dev/null +++ b/examples/tailwind/src/jsMain/resources/index.html @@ -0,0 +1,14 @@ + + + + + Vite & Tailwind for Kotlin + + + + +
+ + + + diff --git a/examples/tailwind/src/jsMain/resources/postcss.config.cjs b/examples/tailwind/src/jsMain/resources/postcss.config.cjs new file mode 100644 index 0000000..1b69d43 --- /dev/null +++ b/examples/tailwind/src/jsMain/resources/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/examples/tailwind/src/jsMain/resources/style.css b/examples/tailwind/src/jsMain/resources/style.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/examples/tailwind/src/jsMain/resources/style.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/examples/tailwind/src/jsMain/resources/tailwind.config.cjs b/examples/tailwind/src/jsMain/resources/tailwind.config.cjs new file mode 100644 index 0000000..b43b5ba --- /dev/null +++ b/examples/tailwind/src/jsMain/resources/tailwind.config.cjs @@ -0,0 +1,14 @@ + +module.exports = { + darkMode: 'class', // use 'media' or 'class' + content: [ + "./**/*.{html,js}", // This is required for our app to work + ], + theme: { + extend: {}, + }, + variants: { + extend: {}, + }, + plugins: [], +} -- 2.51.2 From b954425efbab67dbd756f7fdb47beca9099976b8 Mon Sep 17 00:00:00 2001 From: Maxime GIRARDET Date: Sat, 7 Oct 2023 22:07:43 +0200 Subject: [PATCH 2/2] ci(gitlab): Build Tailwind example --- .gitlab-ci.yml | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 0d4007e..1ed6328 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -99,6 +99,25 @@ example:multi-project: url: $URL deployment_tier: development +example:tailwind: + extends: [ .example ] + variables: + example: tailwind + + after_script: + - mv examples/tailwind/build/vite/dist kotlin-tailwind + - PREFIX="$CI_PROJECT_ROOT_NAMESPACE/" + - echo "URL=https://$CI_PROJECT_ROOT_NAMESPACE.$CI_PAGES_DOMAIN/-/${CI_PROJECT_PATH//$PREFIX}/-/jobs/$CI_JOB_ID/artifacts/kotlin-tailwind/index.html" >>deploy.env + + artifacts: + paths: + - kotlin-tailwind + expose_as: Tailwind example + environment: + name: review/$CI_COMMIT_REF_SLUG/example-tailwind + url: $URL + deployment_tier: development + # endregion # region Publishing