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
+29-17
Original file line number
Diff line number
Diff line change
@@ -35,17 +35,17 @@
35
35
36
36
## Installation
37
37
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:
39
39
40
40
1. Run `./bin/bundle add tailwindcss-rails`
41
41
2. Run `./bin/rails tailwindcss:install`
42
42
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.
44
44
45
45
46
46
### Choosing a specific version of `tailwindcss`
47
47
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,
49
49
50
50
```ruby
51
51
gem "tailwindcss-rails"
@@ -63,35 +63,41 @@ You can also use a local (npm-based) installation if you prefer, please go to ht
63
63
64
64
v4.x of this gem has been updated to work with Tailwind v4, including providing some help with upgrading your application.
65
65
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.
67
67
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).
69
73
70
74
71
75
### You don't _have_ to upgrade
72
76
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.
74
78
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:
76
80
77
81
```ruby
78
82
# Gemfile
79
83
gem "tailwindcss-rails", "~> 3.3.1"# which transitively pins tailwindcss-ruby to v3
80
84
```
81
85
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`:
83
87
84
88
```ruby
85
89
# Gemfile
86
90
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
88
92
```
89
93
90
94
91
95
### Upgrade steps
92
96
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.
94
99
100
+
First, update to `tailwindcss-rails` v4.0.0 or higher. This will also ensure you're transitively depending on `tailwindcss-ruby` v4.
95
101
96
102
```html
97
103
# Gemfile
@@ -100,9 +106,10 @@ gem "tailwindcss-rails", "~> 4.0" # which transitively pins tailwindcss-ruby to
100
106
101
107
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.
102
108
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.
104
110
105
-
Here's what the upgrade task does:
111
+
<details>
112
+
<summary>Here's a detailed list of what the upgrade task does.</summary>
106
113
107
114
- Cleans up some things in the generated `config/tailwind.config.js`.
108
115
- If present, moves `config/postcss.config.js` to the root directory.
@@ -111,6 +118,8 @@ Here's what the upgrade task does:
111
118
- Removes references to the Inter font from the application layout.
112
119
- Runs the upstream upgrader (note: requires `npx` to run the one-time upgrade, but highly recommended).
113
120
121
+
</details>
122
+
114
123
<details>
115
124
<summary>Here's what that upgrade looks like on a vanilla Rails app.</summary>
116
125
@@ -152,7 +161,7 @@ Done in 56ms
152
161
</details>
153
162
154
163
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).
156
165
157
166
158
167
### Troubleshooting
@@ -161,14 +170,17 @@ You may want to check out [TailwindCSS v4 - upgrade experience report · rails/t
161
170
162
171
We know there are some cases we haven't addressed with the upgrade task:
163
172
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.
165
174
166
175
We'll try to improve the upgrade process over time, but for now you may need to do some manual work to upgrade.
167
176
168
177
169
178
### Updating CSS class names for v4
170
179
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.**
172
184
173
185
**Add** the following line to the `.gitignore` file, to prevent the upstream upgrade tool from accessing node_modules files.
174
186
@@ -315,7 +327,7 @@ Running `bin/dev` invokes Foreman to start both the Tailwind watch process and t
315
327
316
328
### Using with PostCSS
317
329
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.
319
331
320
332
For example, to enable nesting:
321
333
@@ -328,7 +340,7 @@ export default {
328
340
}
329
341
```
330
342
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:
0 commit comments