Skip to content

Commit 0cc3f19

Browse files
doc: further improvements to the README
Co-authored-by: Eric Gusmao <[email protected]>
1 parent 976ddab commit 0cc3f19

File tree

1 file changed

+29
-17
lines changed

1 file changed

+29
-17
lines changed

Diff for: README.md

+29-17
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,17 @@
3535

3636
## Installation
3737

38-
With Rails 7 you can generate a new application preconfigured with Tailwind by using `--css tailwind`. If you're adding Tailwind later, you need to:
38+
With Rails 7 you can generate a new application preconfigured with Tailwind CSS by using `--css tailwind`. If you're adding Tailwind later, you need to:
3939

4040
1. Run `./bin/bundle add tailwindcss-rails`
4141
2. Run `./bin/rails tailwindcss:install`
4242

43-
This gem depends on the `tailwindcss-ruby` gem to install a working tailwind executable.
43+
This gem depends on the `tailwindcss-ruby` gem to install a working Tailwind CLI executable.
4444

4545

4646
### Choosing a specific version of `tailwindcss`
4747

48-
The `tailwindcss-ruby` gem is declared as a floating dependency of this gem, so by default you will get the most recent stable version. However, you can select a specific version of tailwind by pinning that gem to the analogous version in your application's `Gemfile`. For example,
48+
The `tailwindcss-ruby` gem is declared as a floating dependency of this gem, so by default you will get the most recent stable version. However, you can select a specific version of Tailwind CSS by pinning that gem to the analogous version in your application's `Gemfile`. For example,
4949

5050
``` ruby
5151
gem "tailwindcss-rails"
@@ -63,35 +63,41 @@ You can also use a local (npm-based) installation if you prefer, please go to ht
6363

6464
v4.x of this gem has been updated to work with Tailwind v4, including providing some help with upgrading your application.
6565

66-
A full explanation of a Tailwind v4 upgrade is out of scope for this README, so we strongly urge you to read the [official Tailwind v4 upgrade guide](https://tailwindcss.com/docs/upgrade-guide) before embarking on an upgrade to an existing large app.
66+
A full explanation of a Tailwind CSS v4 upgrade is out of scope for this README, so we **strongly urge** you to read the [official Tailwind CSS v4 upgrade guide](https://tailwindcss.com/docs/upgrade-guide) before embarking on an upgrade to an existing large app.
6767

68-
This gem will help with some of the mechanics of the upgrade, however.
68+
This gem will help with some of the mechanics of the upgrade:
69+
70+
- update some generated files to handle breaking changes in v4 of this gem,
71+
- update some local project files to meet some Tailwind CSS v4 conventions,
72+
- attempt to run the [upstream v4 upgrade tool](https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool).
6973

7074

7175
### You don't _have_ to upgrade
7276

73-
Keep in mind that you don't _need_ to upgrade. You can stay on Tailwind v3 for the foreseeable future if you prefer not to migrate now, or if your migration runs into problems.
77+
Keep in mind that you don't _need_ to upgrade. You can stay on Tailwind CSS v3 for the foreseeable future if you prefer not to migrate now, or if your migration runs into problems.
7478

75-
Just make sure you're pinned to v3.3.1 of this gem:
79+
If you don't want to upgrade, then pin your application to v3.3.1 of this gem:
7680

7781
``` ruby
7882
# Gemfile
7983
gem "tailwindcss-rails", "~> 3.3.1" # which transitively pins tailwindcss-ruby to v3
8084
```
8185

82-
or if you're on an earlier version of this gem, make sure you're pinning the version of **both** `tailwindcss-rails` and `tailwindcss-ruby`:
86+
If you're on an earlier version of this gem, `<= 3.3.0`, then make sure you're pinning the version of **both** `tailwindcss-rails` and `tailwindcss-ruby`:
8387

8488
``` ruby
8589
# Gemfile
8690
gem "tailwindcss-rails", "~> 3.3"
87-
gem "tailwindcss-ruby", "~> 3.4" # only necessary with tailwindcss-rails < 3.3.1
91+
gem "tailwindcss-ruby", "~> 3.4" # only necessary with tailwindcss-rails <= 3.3.0
8892
```
8993

9094

9195
### Upgrade steps
9296

93-
First, update to `tailwindcss-rails` v4.0.0 or higher. This will also ensure you're transitively depending on `tailwindcss-ruby` v4.
97+
> [!WARNING]
98+
> In applications using Tailwind plugins without JavaScript tooling, these upgrade steps may fail to fully migrate `tailwind.config.js` because the upstream upgrade tool needs the Tailwind plugins to be installed and available through a JavaScript package manager. If you see errors from the upstream upgrade tool, you should try following the additional steps in [Updating CSS class names for v4](#updating-css-class-names-for-v4) which will help you install (temporarily!) the necessary packages and clean up afterwards.
9499
100+
First, update to `tailwindcss-rails` v4.0.0 or higher. This will also ensure you're transitively depending on `tailwindcss-ruby` v4.
95101

96102
```html
97103
# Gemfile
@@ -100,9 +106,10 @@ gem "tailwindcss-rails", "~> 4.0" # which transitively pins tailwindcss-ruby to
100106

101107
If you want to migrate CSS class names for v4 (this is an optional step!), jump to [Updating CSS class names for v4](#updating-css-class-names-for-v4) before continuing.
102108

103-
Then, **run** the `tailwindcss:upgrade` task. Among other things, this will try to run the official Tailwind upgrade utility. It requires `npx` in order to run, but it's a one-time operation and is *highly recommended* for a successful upgrade.
109+
Then, run `bin/rails tailwindcss:upgrade`. Among other things, this will try to run the official Tailwind upgrade utility. It requires `npx` in order to run, but it's a one-time operation and is *highly recommended* for a successful upgrade.
104110

105-
Here's what the upgrade task does:
111+
<details>
112+
<summary>Here's a detailed list of what the upgrade task does.</summary>
106113

107114
- Cleans up some things in the generated `config/tailwind.config.js`.
108115
- If present, moves `config/postcss.config.js` to the root directory.
@@ -111,6 +118,8 @@ Here's what the upgrade task does:
111118
- Removes references to the Inter font from the application layout.
112119
- Runs the upstream upgrader (note: requires `npx` to run the one-time upgrade, but highly recommended).
113120

121+
</details>
122+
114123
<details>
115124
<summary>Here's what that upgrade looks like on a vanilla Rails app.</summary>
116125

@@ -152,7 +161,7 @@ Done in 56ms
152161
</details>
153162
154163
155-
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)!
164+
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).
156165
157166
158167
### Troubleshooting
@@ -161,14 +170,17 @@ You may want to check out [TailwindCSS v4 - upgrade experience report · rails/t
161170
162171
We know there are some cases we haven't addressed with the upgrade task:
163172
164-
- In setups without JavaScript tooling, the update process may fail to fully migrate `tailwind.config.js` because the tool assumes that the imported packages (e.g., tailwind plugins) are installed via a package manager, allowing them to be called. In this case, you should try following the instructions in [Updating CSS class names for v4](#updating-css-class-names-for-v4) which will install the needed javascript packages for the updater.
173+
- In applications using Tailwind plugins without JavaScript tooling, these upgrade steps may fail to fully migrate `tailwind.config.js` because the upstream upgrade tool needs the Tailwind plugins to be installed and available through a JavaScript package manager. If you see errors from the upstream upgrade tool, you should try following the additional steps in [Updating CSS class names for v4](#updating-css-class-names-for-v4) which will help you install (temporarily!) the necessary packages and clean up afterwards.
165174
166175
We'll try to improve the upgrade process over time, but for now you may need to do some manual work to upgrade.
167176
168177
169178
### Updating CSS class names for v4
170179
171-
With some additional manual work the upstream upgrade tool will update your application's CSS class names to v4 conventions. **This is an optional step that requires a Javascript toolchain!**
180+
> [!NOTE]
181+
> If you'd like to help automate these steps, please drop a note to the maintainers in [this discussion thread](https://github.com/rails/tailwindcss-rails/discussions/450).
182+
183+
With some additional manual work the upstream upgrade tool will update your application's CSS class names to v4 conventions. **This is an optional step that requires a JavaScript toolchain.**
172184
173185
**Add** the following line to the `.gitignore` file, to prevent the upstream upgrade tool from accessing node_modules files.
174186
@@ -315,7 +327,7 @@ Running `bin/dev` invokes Foreman to start both the Tailwind watch process and t
315327
316328
### Using with PostCSS
317329
318-
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.
330+
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.
319331
320332
For example, to enable nesting:
321333
@@ -328,7 +340,7 @@ export default {
328340
}
329341
```
330342
331-
⚠ Note that PostCSS is a javascript tool with its own prerequisites! By default `tailwindcss-rails` does not require any javascript tooling, so in order to use PostCSS, a `package.json` with dependencies for your plugins and a package manager like `yarn` or `npm` is required, for example:
343+
⚠ Note that PostCSS is a JavaScript tool with its own prerequisites! By default `tailwindcss-rails` does not require any JavaScript tooling, so in order to use PostCSS, a `package.json` with dependencies for your plugins and a package manager like `yarn` or `npm` is required, for example:
332344
333345
```json
334346
// package.json

0 commit comments

Comments
 (0)