gradle-tailwind

gradle-tailwind is a plugin for the Gradle build manager for the TailwindCSS framework.

NOTE This Gradle plugin is currently in alpha, so some information listed here does not apply fully yet.

How To Use

Requirements

• Gradle 7.4+
• Tailwind 3.0.3+ (v4.x supported)

Plugin Configuration

The plugin configuration is simple, just see the following section for the relevant DSL for your project:

Groovy DSL

First, add your plugin like so:

plugins {
    id "com.hyeons-lab.tailwind" version "0.3.0"
}

And configure your Tailwind application as desired, like so:

tailwind {
    version = "4.1.0"
    configPath = "src/main/resources"  // Optional for v4; required for v3
    input = "src/main/resources/tailwind/tailwind.css"
    output = "src/main/resources/css/example.css"
}

Kotlin DSL

First, add your plugin like so:

plugins {
    id("com.hyeons-lab.tailwind") version "0.3.0"
}

And configure your Tailwind application as desired, like so:

• Gradle <8.1

  tailwind {
      version.set("4.1.0")
      configPath.set("src/main/resources")  // Optional for v4; required for v3
      input.set("src/main/resources/tailwind/tailwind.css")
      output.set("src/main/resources/css/example.css")
  }

• Gradle >8.1

  tailwind {
      version = "4.1.0"
      configPath = "src/main/resources"  // Optional for v4; required for v3
      input = "src/main/resources/tailwind/tailwind.css"
      output = "src/main/resources/css/example.css"
  }

Tailwind CSS v4 Support

This plugin supports both Tailwind CSS v3 and v4.

Tailwind v4 uses a CSS-based configuration system instead of tailwind.config.js. When using v4:

• The configPath property is optional - if not set or if tailwind.config.js doesn't exist, the plugin will use CSS-based configuration
• Configure your theme directly in your CSS file using @theme and other v4 directives
• See the Tailwind v4 documentation for details on CSS-based configuration

Tailwind v3 uses JavaScript configuration:

• Set configPath to the directory containing your tailwind.config.js
• The plugin will automatically use the config file if it exists

Available Tasks

• :tailwindDownload - Downloads the TailwindCSS binary for the configured version. Automatically runs before compile/init tasks if the binary is missing. Includes SHA256 checksum verification for security.
• :tailwindInit - Initialises the tailwind.config.js file (for Tailwind v3) with the input and output provided in the config.
  • Options:
    • --full - Initialize with a full configuration file that includes all default options
    • --postcss - Initialize PostCSS configuration alongside Tailwind config
    • --esm - Generate an ESM format configuration file
    • --ts - Generate a TypeScript configuration file
• :tailwindCompile - Compiles the given Tailwind CSS file to the path provided in output. Automatically downloads the binary if needed.

Example

There is a working example containing a rudimentary Tailwind project. To compile the CSS and view the HTML properly, run the following task:

./gradlew :example:tailwindCompile

Development

Because Gradle sucks, the only LTS versions that this build allows for are 8 and 11, due to a known issue with the tests. The plugin itself should build with Java 17 in the meantime.

License

This project is licensed under the Apache 2.0 license.