Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 114 additions & 0 deletions examples/demo-app/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
# TailwindFX Example Project

This is an example project demonstrating how to use TailwindFX with the Maven plugin for build-time CSS generation.

## Prerequisites

- Java 17 or higher
- Maven 3.6+
- TailwindFX installed locally (`mvn install` in the main project)

## Building the Example

```bash
cd tailwindfx-example
mvn clean compile
```

This will:
1. Scan your Java and FXML files for Tailwind classes
2. Generate an optimized CSS file at `target/classes/css/tailwindfx-generated.css`
3. Compile your application

## Running the Example

```bash
mvn javafx:run
```

## Project Structure

```
tailwindfx-example/
├── pom.xml # Maven configuration with TailwindFX plugin
├── src/main/java/com/example/
│ ├── HelloApplication.java # Main application class
│ └── HelloController.java # FXML controller
└── src/main/resources/com/example/
└── hello-view.fxml # FXML view with Tailwind classes
```

## Using Tailwind Classes

In Java code:
```java
button.getStyleClass().addAll("bg-blue-500", "text-white", "p-4");
```

In FXML:
```xml
<Button text="Click Me" styleClass="bg-blue-500, text-white, p-4"/>
```

## Plugin Configuration

The Maven plugin is configured in `pom.xml`:

```xml
<plugin>
<groupId>io.github.yasmramos.tailwindfx</groupId>
<artifactId>tailwindfx-maven-plugin</artifactId>
<version>1.0-SNAPSHOT</version>
<executions>
<execution>
<goals>
<goal>generate</goal>
</goals>
<configuration>
<includeBase>true</includeBase>
<includeColors>true</includeColors>
<minify>false</minify>
</configuration>
</execution>
</executions>
</plugin>
```

### Configuration Options

| Option | Default | Description |
|--------|---------|-------------|
| `includeBase` | `true` | Include CSS variables and reset |
| `includeColors` | `true` | Include color palette |
| `minify` | `false` | Minify generated CSS |
| `outputDirectory` | `${project.build.outputDirectory}/css` | Output directory |
| `outputFileName` | `tailwindfx-generated.css` | Output file name |

## Generated CSS

After running `mvn compile`, check the generated CSS at:
```
target/classes/css/tailwindfx-generated.css
```

This file contains only the Tailwind classes used in your project, resulting in a smaller bundle size.

## Next Steps

1. Add more Tailwind classes to your FXML/Java files
2. Re-run `mvn compile` to regenerate CSS
3. Run with `mvn javafx:run` to see the changes

## Troubleshooting

**Plugin not found:** Make sure you've installed TailwindFX locally first:
```bash
cd ..
mvn clean install
```

**Classes not detected:** Ensure you're using the correct syntax:
- Java: `getStyleClass().addAll("class1", "class2")` or string literals
- FXML: `styleClass="class1, class2"`

**CSS not applied:** Check that `TailwindFX.install()` is called in your Application class.
87 changes: 87 additions & 0 deletions examples/demo-app/pom.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>io.github.yasmramos</groupId>
<artifactId>demo-app</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>jar</packaging>

<name>TailwindFX Example</name>
<description>Example project demonstrating TailwindFX with Maven plugin</description>

<properties>
<maven.compiler.release>17</maven.compiler.release>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<javafx.version>17.0.2</javafx.version>
<tailwindfx.version>1.0-SNAPSHOT</tailwindfx.version>
</properties>

<dependencies>
<!-- JavaFX -->
<dependency>
<groupId>org.openjfx</groupId>
<artifactId>javafx-controls</artifactId>
<version>${javafx.version}</version>
</dependency>
<dependency>
<groupId>org.openjfx</groupId>
<artifactId>javafx-fxml</artifactId>
<version>${javafx.version}</version>
</dependency>

<!-- TailwindFX -->
<dependency>
<groupId>io.github.yasmramos</groupId>
<artifactId>tailwindfx</artifactId>
<version>${tailwindfx.version}</version>
</dependency>
</dependencies>

<build>
<plugins>
<!-- TailwindFX Maven Plugin -->
<plugin>
<groupId>io.github.yasmramos</groupId>
<artifactId>tailwindfx-maven-plugin</artifactId>
<version>${tailwindfx.version}</version>
<executions>
<execution>
<goals>
<goal>generate</goal>
</goals>
<configuration>
<includeBase>true</includeBase>
<includeColors>true</includeColors>
<minify>false</minify>
<outputDirectory>${project.build.outputDirectory}/css</outputDirectory>
<outputFileName>tailwindfx-generated.css</outputFileName>
</configuration>
</execution>
</executions>
</plugin>

<!-- JavaFX Maven Plugin -->
<plugin>
<groupId>org.openjfx</groupId>
<artifactId>javafx-maven-plugin</artifactId>
<version>0.0.8</version>
<configuration>
<mainClass>com.example.HelloApplication</mainClass>
</configuration>
</plugin>

<!-- Compiler Plugin -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.11.0</version>
<configuration>
<release>17</release>
</configuration>
</plugin>
</plugins>
</build>
</project>
26 changes: 26 additions & 0 deletions examples/demo-app/src/main/java/com/example/HelloApplication.java
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
package com.example;

import io.github.yasmramos.tailwindfx.TailwindFX;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class HelloApplication extends Application {
@Override
public void start(Stage stage) throws Exception {
FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("hello-view.fxml"));
Scene scene = new Scene(fxmlLoader.load());

// Initialize TailwindFX with the scene
TailwindFX.install(scene);

stage.setTitle("TailwindFX Example");
stage.setScene(scene);
stage.show();
}

public static void main(String[] args) {
launch();
}
}
14 changes: 14 additions & 0 deletions examples/demo-app/src/main/java/com/example/HelloController.java
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
package com.example;

import javafx.fxml.FXML;
import javafx.scene.control.Label;

public class HelloController {
@FXML
private Label welcomeText;

@FXML
protected void onHelloButtonClick() {
welcomeText.setText("Welcome to JavaFX Application!");
}
}
27 changes: 27 additions & 0 deletions examples/demo-app/src/main/resources/com/example/hello-view.fxml
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<VBox xmlns="http://javafx.com/javafx/17"
xmlns:fx="http://javafx.com/fxml/1"
fx:controller="com.example.HelloController"
spacing="20"
alignment="CENTER"
styleClass="p-10, bg-gray-100">

<Label text="Welcome to TailwindFX!"
styleClass="text-2xl, font-bold, text-blue-600"/>

<Label text="This is an example project using the Maven plugin"
styleClass="text-lg, text-gray-700"/>

<Button text="Click Me"
styleClass="bg-blue-500, hover:bg-blue-700, text-white, font-bold, py-2, px-4, rounded"/>

<Label fx:id="welcomeText"
styleClass="text-sm, text-green-600"/>

</VBox>
17 changes: 9 additions & 8 deletions src/main/java/io/github/yasmramos/tailwindfx/TwInstall.java
Original file line number Diff line number Diff line change
Expand Up @@ -71,14 +71,15 @@ private static void installGeneratedBaseCss(Scene scene, int priority) {
String generatedCss = generator.generateBaseCss();

// Properly encode CSS for data URL (RFC 2397)
String encodedCss = java.net.URLEncoder.encode(generatedCss, java.nio.charset.StandardCharsets.UTF_8)
.replace("+", "%20")
.replace("%3A", ":")
.replace("%3B", ";")
.replace("%7B", "{")
.replace("%7D", "}")
.replace("%23", "#");

String encodedCss =
java.net.URLEncoder.encode(generatedCss, java.nio.charset.StandardCharsets.UTF_8)
.replace("+", "%20")
.replace("%3A", ":")
.replace("%3B", ";")
.replace("%7B", "{")
.replace("%7D", "}")
.replace("%23", "#");

String dataUrl = "data:text/css;charset=utf-8," + encodedCss;

var sheets = scene.getStylesheets();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,24 @@ public String generateBaseCss() {
generateShadowVariables(css);

css.append("}\n");

// Validate CSS structure
String result = css.toString();
if (!result.trim().endsWith("}")) {
throw new IllegalStateException("Generated CSS does not end with closing brace");
}

long openBraces = result.chars().filter(ch -> ch == '{').count();
long closeBraces = result.chars().filter(ch -> ch == '}').count();
if (openBraces != closeBraces) {
throw new IllegalStateException(
"CSS brace mismatch: " + openBraces + " opening braces, " + closeBraces + " closing braces");
"CSS brace mismatch: "
+ openBraces
+ " opening braces, "
+ closeBraces
+ " closing braces");
}

return result;
}

Expand Down
2 changes: 1 addition & 1 deletion tailwindfx-maven-plugin/pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>io.github.yasmramos.tailwindfx</groupId>
<groupId>io.github.yasmramos</groupId>
<artifactId>tailwindfx-maven-plugin</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>maven-plugin</packaging>
Expand Down
Loading