Skip to content

Commit e37ed78

Browse files
committed
doc: update README upgrade guide for css class names
I think 787bf26 left these instructions split across sections, I've tried to clean that up.
1 parent 738ba68 commit e37ed78

File tree

1 file changed

+40
-36
lines changed

1 file changed

+40
-36
lines changed

README.md

+40-36
Original file line numberDiff line numberDiff line change
@@ -72,19 +72,19 @@ This gem will help with some of the mechanics of the upgrade, however.
7272

7373
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.
7474

75-
Just make sure you're either pinned to v3.3.1 of this gem:
75+
Just make sure you're pinned to v3.3.1 of this gem:
7676

7777
``` ruby
7878
# Gemfile
79-
gem "tailwindcss-rails", "3.3.1" # which transitively pins tailwindcss-ruby to v3
79+
gem "tailwindcss-rails", "~> 3.3.1" # which transitively pins tailwindcss-ruby to v3
8080
```
8181

8282
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`:
8383

8484
``` ruby
8585
# Gemfile
8686
gem "tailwindcss-rails", "~> 3.3"
87-
gem "tailwindcss-ruby", "~> 3.4"
87+
gem "tailwindcss-ruby", "~> 3.4" # only necessary with tailwindcss-rails < 3.3.1
8888
```
8989

9090

@@ -98,33 +98,7 @@ First, update to `tailwindcss-rails` v4.0.0 or higher. This will also ensure you
9898
gem "tailwindcss-rails", "~> 4.0" # which transitively pins tailwindcss-ruby to v4
9999
```
100100

101-
If you want to migrate class names for v4 (optional), apply this [step](#upgrading-class-names-for-v4) and continue this guide.
102-
103-
Add the following line to the `.gitignore` file:
104-
105-
```gitignore
106-
/node_modules
107-
```
108-
(So the Tailwind update tool won’t dig through your node_modules files and infer incorrect migrations, because it complies with ``.gitignore`` constraints)
109-
110-
Then create a ``package.json`` in the root of the project:
111-
112-
```jsonc
113-
{
114-
"name": "app_name",
115-
"version": "1.0.0",
116-
"dependencies": {
117-
"tailwindcss": "^3.4.17", // Mandatory!!
118-
// Install all plugins and modules that are referenced in tailwind.config.js
119-
"@tailwindcss/aspect-ratio": "^0.4.2",
120-
"@tailwindcss/container-queries": "^0.1.1",
121-
"@tailwindcss/forms": "^0.5.10",
122-
"@tailwindcss/typography": "^0.5.16"
123-
// And so on...
124-
}
125-
}
126-
```
127-
**Run** ``npm install`` (or ``yarn install`` if using ``yarn``)
101+
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.
128102

129103
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.
130104

@@ -187,14 +161,42 @@ You may want to check out [TailwindCSS v4 - upgrade experience report · rails/t
187161
188162
We know there are some cases we haven't addressed with the upgrade task:
189163
190-
- 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.
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.
191165
192166
We'll try to improve the upgrade process over time, but for now you may need to do some manual work to upgrade.
193167
194168
195169
### Updating CSS class names for v4
196170
197-
Before running the upgrade task, go to ``config/tailwind.config.js`` update the ``content`` part to:
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!**
172+
173+
**Add** the following line to the `.gitignore` file, to prevent the upstream upgrade tool from accessing node_modules files.
174+
175+
```gitignore
176+
/node_modules
177+
```
178+
179+
**Create** a `package.json` in the root of the project:
180+
181+
```jsonc
182+
{
183+
"name": "app_name",
184+
"version": "1.0.0",
185+
"dependencies": {
186+
"tailwindcss": "^3.4.17", // Mandatory!!
187+
// Install all plugins and modules that are referenced in tailwind.config.js
188+
"@tailwindcss/aspect-ratio": "^0.4.2",
189+
"@tailwindcss/container-queries": "^0.1.1",
190+
"@tailwindcss/forms": "^0.5.10",
191+
"@tailwindcss/typography": "^0.5.16"
192+
// And so on...
193+
}
194+
}
195+
```
196+
197+
**Run** `npm install` (or `yarn install` if using `yarn`)
198+
199+
**Update** `config/tailwind.config.js` and temporarily change the `content` part to have an additional `.` on all paths so they are relative to the config file:
198200
199201
```js
200202
content: [
@@ -204,17 +206,19 @@ Before running the upgrade task, go to ``config/tailwind.config.js`` update the
204206
'../app/views/**/*.{erb,haml,html,slim}'
205207
],
206208
```
207-
(Just add an additional ``.`` to all the paths referenced)
208209
209-
Run the upstream upgrader as instructed above.
210+
(Just add an additional `.` to all the paths referenced)
211+
212+
**Run** the upstream upgrader as instructed above.
210213
211-
Then, once you've run that successfully:
214+
Then, once you've run that successfully, clean up:
212215
213-
- **Delete** ``package.json``, ``node_modules/`` and ``package-lock.json`` (or ``yarn.lock``), plus remove ``/node_modules`` from ``.gitignore``.
216+
- **Delete** `package.json`, `node_modules/` and `package-lock.json` (or `yarn.lock`), plus remove `/node_modules` from `.gitignore`.
214217
- **Go** to your CSS file and remove the following line (if present):
215218
```css
216219
@plugin '@tailwindcss/container-queries';
217220
```
221+
- **Revert** the changes to `config/tailwind.config.js` so that paths are once again relative to the application root.
218222
219223
220224
## Developing with Tailwindcss

0 commit comments

Comments
 (0)