|  | 
| 12 | 12 | - [Upgrading your application from Tailwind v3 to v4](#upgrading-your-application-from-tailwind-v3-to-v4) | 
| 13 | 13 |   * [You don't _have_ to upgrade](#you-dont-_have_-to-upgrade) | 
| 14 | 14 |   * [Upgrade steps](#upgrade-steps) | 
| 15 |  | -  * [Troubleshooting](#troubleshooting) | 
|  | 15 | +  * [Troubleshooting a v4 upgrade](#troubleshooting-a-v4-upgrade) | 
| 16 | 16 |   * [Updating CSS class names for v4](#updating-css-class-names-for-v4) | 
| 17 | 17 | - [Developing with Tailwindcss](#developing-with-tailwindcss) | 
| 18 | 18 |   * [Configuration and commands](#configuration-and-commands) | 
| 19 | 19 |   * [Building for production](#building-for-production) | 
| 20 | 20 |   * [Building for testing](#building-for-testing) | 
| 21 | 21 |   * [Building unminified assets](#building-unminified-assets) | 
| 22 | 22 |   * [Live rebuild](#live-rebuild) | 
|  | 23 | +  * [Using Tailwind plugins](#using-tailwind-plugins) | 
| 23 | 24 |   * [Using with PostCSS](#using-with-postcss) | 
| 24 | 25 |   * [Custom inputs or outputs](#custom-inputs-or-outputs) | 
| 25 |  | -- [Troubleshooting](#troubleshooting-1) | 
|  | 26 | +- [Troubleshooting](#troubleshooting) | 
| 26 | 27 |   * [Lost keystrokes or hanging when using terminal-based debugging tools (e.g. IRB, Pry, `ruby/debug`...etc.) with the Puma plugin](#lost-keystrokes-or-hanging-when-using-terminal-based-debugging-tools-eg-irb-pry-rubydebugetc-with-the-puma-plugin) | 
| 27 | 28 |   * [Running in a docker container exits prematurely](#running-in-a-docker-container-exits-prematurely) | 
| 28 | 29 |   * [Conflict with sassc-rails](#conflict-with-sassc-rails) | 
| @@ -171,7 +172,7 @@ Done in 56ms | 
| 171 | 172 | If this doesn't succeed, it's likely that you've customized your Tailwind configuration and you'll need to do some work to make sure your application upgrades. Please read the [official upgrade guide](https://tailwindcss.com/docs/upgrade-guide) and try following the additional steps in [Updating CSS class names for v4](#updating-css-class-names-for-v4). | 
| 172 | 173 | 
 | 
| 173 | 174 | 
 | 
| 174 |  | -### Troubleshooting | 
|  | 175 | +### Troubleshooting a v4 upgrade | 
| 175 | 176 | 
 | 
| 176 | 177 | You may want to check out [TailwindCSS v4 - upgrade experience report · rails/tailwindcss-rails · Discussion #450](https://github.com/rails/tailwindcss-rails/discussions/450) if you're having trouble upgrading. | 
| 177 | 178 | 
 | 
| @@ -275,31 +276,6 @@ This gem also makes available a Puma plugin to manage a live rebuild process whe | 
| 275 | 276 | 
 | 
| 276 | 277 | This gem also generates a `Procfile.dev` file which will run both the rails server and a live rebuild process (see "Live Rebuild" section below). | 
| 277 | 278 | 
 | 
| 278 |  | -#### Install plugins | 
| 279 |  | -
 | 
| 280 |  | -Tailwind plugins can be installed using `package.json`. | 
| 281 |  | -
 | 
| 282 |  | -Using Yarn: | 
| 283 |  | -
 | 
| 284 |  | -``` sh | 
| 285 |  | -[ ! -f package.json ] && yarn init | 
| 286 |  | -yarn add daisyui # example | 
| 287 |  | -``` | 
| 288 |  | -
 | 
| 289 |  | -Using npm: | 
| 290 |  | -
 | 
| 291 |  | -``` sh | 
| 292 |  | -npm init | 
| 293 |  | -npm add daisyui # example | 
| 294 |  | -``` | 
| 295 |  | -
 | 
| 296 |  | -Than use `@plugin` annotation in `app/assets/tailwind/application.css`: | 
| 297 |  | -
 | 
| 298 |  | -``` css | 
| 299 |  | -@import "tailwindcss"; | 
| 300 |  | -@plugin "daisyui"; | 
| 301 |  | -``` | 
| 302 |  | -
 | 
| 303 | 279 | ### Building for production | 
| 304 | 280 | 
 | 
| 305 | 281 | The `tailwindcss:build` is automatically attached to `assets:precompile`, so before the asset pipeline digests the files, the Tailwind output will be generated. | 
| @@ -357,6 +333,32 @@ If you are running `rails tailwindcss:watch` in a docker container without a tty | 
| 357 | 333 | Running `bin/dev` invokes Foreman to start both the Tailwind watch process and the rails server in development mode based on your `Procfile.dev` file. | 
| 358 | 334 | 
 | 
| 359 | 335 | 
 | 
|  | 336 | +### Using Tailwind plugins | 
|  | 337 | +
 | 
|  | 338 | +If you want to use Tailwind plugins, they can be installed using `package.json`. | 
|  | 339 | +
 | 
|  | 340 | +Using Yarn: | 
|  | 341 | +
 | 
|  | 342 | +``` sh | 
|  | 343 | +[ ! -f package.json ] && yarn init | 
|  | 344 | +yarn add daisyui # example | 
|  | 345 | +``` | 
|  | 346 | +
 | 
|  | 347 | +Using npm: | 
|  | 348 | +
 | 
|  | 349 | +``` sh | 
|  | 350 | +npm init | 
|  | 351 | +npm add daisyui # example | 
|  | 352 | +``` | 
|  | 353 | +
 | 
|  | 354 | +Than use `@plugin` annotation in `app/assets/tailwind/application.css`: | 
|  | 355 | +
 | 
|  | 356 | +``` css | 
|  | 357 | +@import "tailwindcss"; | 
|  | 358 | +@plugin "daisyui"; | 
|  | 359 | +``` | 
|  | 360 | +
 | 
|  | 361 | +
 | 
| 360 | 362 | ### Using with PostCSS | 
| 361 | 363 | 
 | 
| 362 | 364 | If you want to use PostCSS as a preprocessor, create a custom `postcss.config.js` in your project root directory, and that file will be loaded by Tailwind automatically. | 
|  | 
0 commit comments