fix: Update Vite + Tailwind CSS initialization for TailwindCSS 4.0

wimdeblauwe · Jan 28, 2025 · bd56e5e · bd56e5e
1 parent 64e56ed
commit bd56e5e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 16 deletions.
diff --git a/src/main/java/io/github/wimdeblauwe/ttcli/livereload/helper/TailwindCssHelper.java b/src/main/java/io/github/wimdeblauwe/ttcli/livereload/helper/TailwindCssHelper.java
@@ -1,7 +1,6 @@
 package io.github.wimdeblauwe.ttcli.livereload.helper;
 
 import io.github.wimdeblauwe.ttcli.util.ExternalProcessRunner;
-
 import java.io.IOException;
 import java.nio.file.Files;
 import java.nio.file.Path;
@@ -34,9 +33,8 @@ private static void initializeTailwindConfig(Path base) throws InterruptedExcept
 
     private static String applicationCssContent() {
         return """
-                @tailwind base;
-                @tailwind components;
-                @tailwind utilities;""";
+            @import "tailwindcss";
+            """;
     }
 
     private TailwindCssHelper() {

diff --git a/src/main/java/io/github/wimdeblauwe/ttcli/livereload/vite/ViteLiveReloadInitService.java b/src/main/java/io/github/wimdeblauwe/ttcli/livereload/vite/ViteLiveReloadInitService.java
@@ -102,7 +102,7 @@ public Path getTailwindConfigFileParentPath(ProjectInitializationParameters para
         return null;
     }
 
-    private void createViteConfig(Path basePath) throws IOException {
+    protected void createViteConfig(Path basePath) throws IOException {
         Path path = basePath.resolve("vite.config.js");
         String content = """
                 import {defineConfig} from 'vite';

diff --git a/...io/github/wimdeblauwe/ttcli/livereload/vite/ViteWithTailwindCssLiveReloadInitService.java b/...io/github/wimdeblauwe/ttcli/livereload/vite/ViteWithTailwindCssLiveReloadInitService.java
@@ -6,13 +6,14 @@
 import io.github.wimdeblauwe.ttcli.livereload.TailwindCssSpecializedLiveReloadInitService;
 import io.github.wimdeblauwe.ttcli.livereload.helper.TailwindCssHelper;
 import io.github.wimdeblauwe.ttcli.npm.NodeService;
-import org.springframework.core.annotation.Order;
-import org.springframework.stereotype.Component;
-
 import java.io.IOException;
+import java.nio.file.Files;
 import java.nio.file.Path;
+import java.nio.file.StandardOpenOption;
 import java.util.List;
 import java.util.stream.Stream;
+import org.springframework.core.annotation.Order;
+import org.springframework.stereotype.Component;
 
 @Component
 @Order(6)
@@ -40,15 +41,8 @@ public void generate(ProjectInitializationParameters projectInitializationParame
 
             TailwindCssHelper.createApplicationCss(basePath,
                                                    "src/main/resources/static/css/application.css");
-            TailwindCssHelper.setupTailwindConfig(basePath, "./src/main/resources/templates/**/*.html");
-            // Generate the postcss.config.js file for Tailwind CSS
-            nodeService.runNpxCommand(basePath, List.of("tailwindcss", "init", "-p"));
-
         } catch (IOException e) {
             throw new LiveReloadInitServiceException(e);
-        } catch (InterruptedException e) {
-            Thread.currentThread().interrupt();
-            throw new LiveReloadInitServiceException(e);
         }
     }
 
@@ -60,10 +54,54 @@ public Path getTailwindConfigFileParentPath(ProjectInitializationParameters para
     @Override
     protected List<String> npmDevDependencies() {
         return Stream.concat(super.npmDevDependencies().stream(),
-                             Stream.of("tailwindcss", "postcss", "autoprefixer"))
+                Stream.of("tailwindcss", "@tailwindcss/vite"))
                      .toList();
     }
 
+    @Override
+    protected void createViteConfig(Path basePath) throws IOException {
+        Path path = basePath.resolve("vite.config.js");
+        String content = """
+            import {defineConfig} from 'vite';
+            import tailwindcss from '@tailwindcss/vite';
+            import path from 'path';
+            import springBoot from '@wim.deblauwe/vite-plugin-spring-boot';
+            
+            export default defineConfig({
+                plugins: [
+                    tailwindcss(),
+                    springBoot()
+                ],
+                root: path.join(__dirname, './src/main/resources'),
+                build: {
+                    manifest: true,
+                    rollupOptions: {
+                        input: [
+                            '/static/css/application.css'
+                        ]
+                    },
+                    outDir: path.join(__dirname, `./target/classes/static`),
+                    copyPublicDir: false,
+                    emptyOutDir: true
+                },
+                server: {
+                    proxy: {
+                        // Proxy all backend requests to Spring Boot except for static assets
+                        '^/(?!static|assets|@|.*\\\\.(js|css|png|svg|jpg|jpeg|gif|ico|woff|woff2)$)': {
+                            target: 'http://localhost:8080',  // Proxy to Spring Boot backend
+                            changeOrigin: true,
+                            secure: false
+                        }
+                    },
+                    watch: {
+                        ignored: ['target/**']
+                    }
+                }
+            });
+            """;
+        Files.writeString(path, content, StandardOpenOption.CREATE);
+    }
+
     @Override
     public boolean isTailwindVersionOf(Class<? extends LiveReloadInitService> liveReloadInitServiceClass) {
         return liveReloadInitServiceClass.isAssignableFrom(ViteLiveReloadInitService.class);