You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+39-36
Original file line number
Diff line number
Diff line change
@@ -79,12 +79,11 @@ Just make sure you're either pinned to v3.3.1 of this gem:
79
79
gem "tailwindcss-rails", "3.3.1"# which transitively pins tailwindcss-ruby to v3
80
80
```
81
81
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`:
82
+
or if you're on an earlier version of this gem, make sure you're pinning `tailwindcss-rails`to v3.3.1:
83
83
84
84
```ruby
85
85
# Gemfile
86
-
gem "tailwindcss-rails", "~> 3.3"
87
-
gem "tailwindcss-ruby", "~> 3.4"
86
+
gem "tailwindcss-rails", "~> 3.3.1"
88
87
```
89
88
90
89
@@ -98,33 +97,7 @@ First, update to `tailwindcss-rails` v4.0.0 or higher. This will also ensure you
98
97
gem "tailwindcss-rails", "~> 4.0" # which transitively pins tailwindcss-ruby to v4
99
98
```
100
99
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``)
100
+
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.
128
101
129
102
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.
130
103
@@ -187,14 +160,42 @@ You may want to check out [TailwindCSS v4 - upgrade experience report · rails/t
187
160
188
161
We know there are some cases we haven't addressed with the upgrade task:
189
162
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.
163
+
- 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.
191
164
192
165
We'll try to improve the upgrade process over time, but for now you may need to do some manual work to upgrade.
193
166
194
167
195
168
### Updating CSS class names for v4
196
169
197
-
Before running the upgrade task, go to ``config/tailwind.config.js`` update the ``content`` part to:
170
+
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!**
171
+
172
+
**Add** the following line to the `.gitignore` file, to prevent the upstream upgrade tool from accessing node_modules files.
173
+
174
+
```gitignore
175
+
/node_modules
176
+
```
177
+
178
+
**Create** a `package.json` in the root of the project:
179
+
180
+
```jsonc
181
+
{
182
+
"name": "app_name",
183
+
"version": "1.0.0",
184
+
"dependencies": {
185
+
"tailwindcss": "^3.4.17", // Mandatory!!
186
+
// Install all plugins and modules that are referenced in tailwind.config.js
187
+
"@tailwindcss/aspect-ratio": "^0.4.2",
188
+
"@tailwindcss/container-queries": "^0.1.1",
189
+
"@tailwindcss/forms": "^0.5.10",
190
+
"@tailwindcss/typography": "^0.5.16"
191
+
// And so on...
192
+
}
193
+
}
194
+
```
195
+
196
+
**Run** `npm install` (or `yarn install` if using `yarn`)
197
+
198
+
**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:
198
199
199
200
```js
200
201
content: [
@@ -204,17 +205,19 @@ Before running the upgrade task, go to ``config/tailwind.config.js`` update the
204
205
'../app/views/**/*.{erb,haml,html,slim}'
205
206
],
206
207
```
207
-
(Just add an additional ``.`` to all the paths referenced)
208
208
209
-
Run the upstream upgrader as instructed above.
209
+
(Just add an additional `.` to all the paths referenced)
210
+
211
+
**Run** the upstream upgrader as instructed above.
210
212
211
-
Then, once you've run that successfully:
213
+
Then, once you've run that successfully, clean up:
212
214
213
-
- **Delete** ``package.json``, ``node_modules/`` and ``package-lock.json`` (or ``yarn.lock``), plus remove ``/node_modules`` from ``.gitignore``.
215
+
- **Delete**`package.json`, `node_modules/` and `package-lock.json` (or `yarn.lock`), plus remove `/node_modules` from `.gitignore`.
214
216
- **Go** to your CSS file and remove the following line (if present):
215
217
```css
216
218
@plugin '@tailwindcss/container-queries';
217
219
```
220
+
- **Revert** the changes to `config/tailwind.config.js` so that paths are once again relative to the application root.
0 commit comments