|
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