Skip to content

Commit c1e5258

Browse files
committed
Bump the "tailwind plugins" section up to H3
and move it to after the basic build/rebuild commands unrelated, rename the upgrade-troubleshooting section to disambiguate from the generate-troubleshooting section.
1 parent 3dab6d3 commit c1e5258

File tree

1 file changed

+30
-28
lines changed

1 file changed

+30
-28
lines changed

README.md

+30-28
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,18 @@
1212
- [Upgrading your application from Tailwind v3 to v4](#upgrading-your-application-from-tailwind-v3-to-v4)
1313
* [You don't _have_ to upgrade](#you-dont-_have_-to-upgrade)
1414
* [Upgrade steps](#upgrade-steps)
15-
* [Troubleshooting](#troubleshooting)
15+
* [Troubleshooting a v4 upgrade](#troubleshooting-a-v4-upgrade)
1616
* [Updating CSS class names for v4](#updating-css-class-names-for-v4)
1717
- [Developing with Tailwindcss](#developing-with-tailwindcss)
1818
* [Configuration and commands](#configuration-and-commands)
1919
* [Building for production](#building-for-production)
2020
* [Building for testing](#building-for-testing)
2121
* [Building unminified assets](#building-unminified-assets)
2222
* [Live rebuild](#live-rebuild)
23+
* [Using Tailwind plugins](#using-tailwind-plugins)
2324
* [Using with PostCSS](#using-with-postcss)
2425
* [Custom inputs or outputs](#custom-inputs-or-outputs)
25-
- [Troubleshooting](#troubleshooting-1)
26+
- [Troubleshooting](#troubleshooting)
2627
* [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)
2728
* [Running in a docker container exits prematurely](#running-in-a-docker-container-exits-prematurely)
2829
* [Conflict with sassc-rails](#conflict-with-sassc-rails)
@@ -171,7 +172,7 @@ Done in 56ms
171172
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).
172173
173174
174-
### Troubleshooting
175+
### Troubleshooting a v4 upgrade
175176
176177
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.
177178
@@ -275,31 +276,6 @@ This gem also makes available a Puma plugin to manage a live rebuild process whe
275276
276277
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).
277278
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-
303279
### Building for production
304280
305281
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
357333
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.
358334
359335
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+
360362
### Using with PostCSS
361363
362364
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

Comments
 (0)