|
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