tailwindcss-rails 4.0.0.rc5 → 4.1.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: feb54fa67b693a510af105af631562dcff146ff61cf473b5f589d3de7a1b3b93
4
- data.tar.gz: fb4e6ed2484ef0c0940a93bbec16754f560e84491b06aaf65fa4c08fd30802cf
3
+ metadata.gz: 8dfb2a9007c58419791262f3e6161df3aefbec1bb74f513c87404c01135751c2
4
+ data.tar.gz: 9339a008fff18d68721d9958fbea1d98b80825fb18f502d7394092e77a3c3d9c
5
5
  SHA512:
6
- metadata.gz: 52381d2049c6af62bfdd11e2b9d06639e0c220e5e898bf3c374d03caf37bac6438bbc36bd3235f24a6e6e7621a921c97626bb5f69a230441cf3e316a2f58adb8
7
- data.tar.gz: faef12c4ac6646a902bdd7327de45079d7541454a55a3f55e737c66c6d34b2d2ac0057d8274b394116378551cd5cad399d4b4a8bb20db1ec880c9d5f6bb2f3cf
6
+ metadata.gz: 86735d4c0a54258a459a0a9aab3ad5e53d738e1cf195bc6ee0b9554505c53417749e481212f17d0f5462516f0b84f8f6846606706cff315e4f9ba7923039615b
7
+ data.tar.gz: c299cf5e88698b34a0b1c64bad13d752af44a681628b85752bbfe7f098c8a6c31bb111ae49b566084c444eda92efc7df45f60d5a2ef6eb2e6068857facb06e40
data/README.md CHANGED
@@ -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,72 +63,60 @@ 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 either 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
- gem "tailwindcss-rails", "3.3.1" # which transitively pins tailwindcss-ruby to v3
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"
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
98
104
  gem "tailwindcss-rails", "~> 4.0" # which transitively pins tailwindcss-ruby to v4
99
105
  ```
100
106
 
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:
107
+ **Update** path references to any existing css files imported in `app/assets/stylesheets/application.tailwind.css` so that they will resolve when the file is moved to `app/assets/tailwind/application.css`.
104
108
 
105
- ```gitignore
106
- /node_modules
109
+ ```diff
110
+ -@import "pagy.css";
111
+ +@import "../stylesheets/pagy.css";
107
112
  ```
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
113
 
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``)
114
+ 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
115
 
129
- 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.
116
+ 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.
130
117
 
131
- Here's what the upgrade task does:
118
+ <details>
119
+ <summary>Here's a detailed list of what the upgrade task does.</summary>
132
120
 
133
121
  - Cleans up some things in the generated `config/tailwind.config.js`.
134
122
  - If present, moves `config/postcss.config.js` to the root directory.
@@ -137,6 +125,8 @@ Here's what the upgrade task does:
137
125
  - Removes references to the Inter font from the application layout.
138
126
  - Runs the upstream upgrader (note: requires `npx` to run the one-time upgrade, but highly recommended).
139
127
 
128
+ </details>
129
+
140
130
  <details>
141
131
  <summary>Here's what that upgrade looks like on a vanilla Rails app.</summary>
142
132
 
@@ -178,7 +168,7 @@ Done in 56ms
178
168
  </details>
179
169
 
180
170
 
181
- 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)!
171
+ 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).
182
172
 
183
173
 
184
174
  ### Troubleshooting
@@ -187,14 +177,45 @@ You may want to check out [TailwindCSS v4 - upgrade experience report · rails/t
187
177
 
188
178
  We know there are some cases we haven't addressed with the upgrade task:
189
179
 
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.
180
+ - 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.
191
181
 
192
182
  We'll try to improve the upgrade process over time, but for now you may need to do some manual work to upgrade.
193
183
 
194
184
 
195
185
  ### Updating CSS class names for v4
196
186
 
197
- Before running the upgrade task, go to ``config/tailwind.config.js`` update the ``content`` part to:
187
+ > [!NOTE]
188
+ > 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).
189
+
190
+ 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.**
191
+
192
+ **Add** the following line to the `.gitignore` file, to prevent the upstream upgrade tool from accessing node_modules files.
193
+
194
+ ```gitignore
195
+ /node_modules
196
+ ```
197
+
198
+ **Create** a `package.json` in the root of the project:
199
+
200
+ ```jsonc
201
+ {
202
+ "name": "app_name",
203
+ "version": "1.0.0",
204
+ "dependencies": {
205
+ "tailwindcss": "^3.4.17", // Mandatory!!
206
+ // Install all plugins and modules that are referenced in tailwind.config.js
207
+ "@tailwindcss/aspect-ratio": "^0.4.2",
208
+ "@tailwindcss/container-queries": "^0.1.1",
209
+ "@tailwindcss/forms": "^0.5.10",
210
+ "@tailwindcss/typography": "^0.5.16"
211
+ // And so on...
212
+ }
213
+ }
214
+ ```
215
+
216
+ **Run** `npm install` (or `yarn install` if using `yarn`)
217
+
218
+ **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
219
 
199
220
  ```js
200
221
  content: [
@@ -204,18 +225,19 @@ Before running the upgrade task, go to ``config/tailwind.config.js`` update the
204
225
  '../app/views/**/*.{erb,haml,html,slim}'
205
226
  ],
206
227
  ```
207
- (Just add an additional ``.`` to all the paths referenced)
208
228
 
209
- Run the upstream upgrader as instructed above.
229
+ (Just add an additional `.` to all the paths referenced)
230
+
231
+ **Run** the upstream upgrader as instructed above.
210
232
 
211
- Then, once you've run that successfully:
233
+ Then, once you've run that successfully, clean up:
212
234
 
213
- - **Delete** ``package.json``, ``node_modules/`` and ``package-lock.json`` (or ``yarn.lock``), plus remove ``/node_modules`` from ``.gitignore``.
235
+ - **Delete** `package.json`, `node_modules/` and `package-lock.json` (or `yarn.lock`), plus remove `/node_modules` from `.gitignore`.
214
236
  - **Go** to your CSS file and remove the following line (if present):
215
237
  ```css
216
238
  @plugin '@tailwindcss/container-queries';
217
239
  ```
218
-
240
+ - **Revert** the changes to `config/tailwind.config.js` so that paths are once again relative to the application root.
219
241
 
220
242
  ## Developing with Tailwindcss
221
243
 
@@ -311,7 +333,7 @@ Running `bin/dev` invokes Foreman to start both the Tailwind watch process and t
311
333
 
312
334
  ### Using with PostCSS
313
335
 
314
- 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.
336
+ 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.
315
337
 
316
338
  For example, to enable nesting:
317
339
 
@@ -324,7 +346,7 @@ export default {
324
346
  }
325
347
  ```
326
348
 
327
- ⚠ 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:
349
+ ⚠ 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:
328
350
 
329
351
  ```json
330
352
  // package.json
@@ -375,7 +397,7 @@ See https://github.com/flavorjones/tailwindcss-ruby for help.
375
397
 
376
398
  ### Using asset-pipeline assets
377
399
 
378
- In Rails, you want to use [assets from the asset pipeline to get fingerprinting](https://guides.rubyonrails.org/asset_pipeline.html#what-is-fingerprinting-and-why-should-i-care-questionmark). However, Tailwind isn't aware of those assets.
400
+ In Rails, you want to use [assets from the asset pipeline to get fingerprinting](https://guides.rubyonrails.org/asset_pipeline.html#fingerprinting-versioning-with-digest-based-urls). However, Tailwind isn't aware of those assets.
379
401
 
380
402
  To use assets from the pipeline, use `url(image.svg)`. [Since Sprockets v3.3.0](https://github.com/rails/sprockets-rails/pull/476) `url(image.svg)` is rewritten to `/path/to/assets/image-7801e7538c6f1cc57aa75a5876ab0cac.svg` so output CSS will have the correct path to those assets.
381
403
 
@@ -400,4 +422,3 @@ The inline version also works:
400
422
  ## License
401
423
 
402
424
  Tailwind for Rails is released under the [MIT License](https://opensource.org/licenses/MIT).
403
- The Inter font is released under the [SIL Open Font License, Version 1.1](https://github.com/rsms/inter/blob/master/LICENSE.txt).
@@ -7,11 +7,11 @@
7
7
 
8
8
  <%%= form_with url: password_path(params[:token]), method: :put, class: "contents" do |form| %>
9
9
  <div class="my-5">
10
- <%%= form.password_field :password, required: true, autocomplete: "new-password", placeholder: "Enter new password", maxlength: 72, class: "block shadow-sm rounded-md border border-gray-400 outline-hidden focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
10
+ <%%= form.password_field :password, required: true, autocomplete: "new-password", placeholder: "Enter new password", maxlength: 72, class: "block shadow-sm rounded-md border border-gray-400 focus:outline-solid focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
11
11
  </div>
12
12
 
13
13
  <div class="my-5">
14
- <%%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", placeholder: "Repeat new password", maxlength: 72, class: "block shadow-sm rounded-md border border-gray-400 outline-hidden focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
14
+ <%%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", placeholder: "Repeat new password", maxlength: 72, class: "block shadow-sm rounded-md border border-gray-400 focus:outline-solid focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
15
15
  </div>
16
16
 
17
17
  <div class="inline">
@@ -7,7 +7,7 @@
7
7
 
8
8
  <%%= form_with url: passwords_path, class: "contents" do |form| %>
9
9
  <div class="my-5">
10
- <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow-sm rounded-md border border-gray-400 outline-hidden focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
10
+ <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow-sm rounded-md border border-gray-400 focus:outline-solid focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
11
11
  </div>
12
12
 
13
13
  <div class="inline">
@@ -12,26 +12,26 @@
12
12
  <%% end %>
13
13
 
14
14
  <% attributes.each do |attribute| -%>
15
- <div class="my-5">
15
+ <div class="my-5<%= " flex items-center gap-2" if attribute.field_type == :checkbox || attribute.field_type == :check_box %>">
16
16
  <% if attribute.password_digest? -%>
17
17
  <%%= form.label :password %>
18
- <%%= form.password_field :password, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
18
+ <%%= form.password_field :password, class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
19
19
  </div>
20
20
 
21
21
  <div class="my-5">
22
22
  <%%= form.label :password_confirmation %>
23
- <%%= form.password_field :password_confirmation, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password_confirmation].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password_confirmation].any?}] %>
23
+ <%%= form.password_field :password_confirmation, class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password_confirmation].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password_confirmation].any?}] %>
24
24
  <% elsif attribute.attachments? -%>
25
25
  <%%= form.label :<%= attribute.column_name %> %>
26
- <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
26
+ <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
27
27
  <% else -%>
28
28
  <%%= form.label :<%= attribute.column_name %> %>
29
29
  <% if attribute.field_type == :textarea || attribute.field_type == :text_area -%>
30
- <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
30
+ <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
31
31
  <% elsif attribute.field_type == :checkbox || attribute.field_type == :check_box -%>
32
- <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow-sm rounded-md border outline-hidden mt-2 h-5 w-5", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
32
+ <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow-sm rounded-md border order-first h-5 w-5", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
33
33
  <% else -%>
34
- <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
34
+ <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow-sm rounded-md border px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
35
35
  <% end -%>
36
36
  <% end -%>
37
37
  </div>
@@ -10,13 +10,19 @@
10
10
  <%%= link_to "New <%= human_name.downcase %>", new_<%= singular_route_name %>_path, class: "rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white block font-medium" %>
11
11
  </div>
12
12
 
13
- <div id="<%= plural_table_name %>" class="min-w-full">
13
+ <div id="<%= plural_table_name %>" class="min-w-full divide-y divide-gray-200 space-y-5">
14
14
  <%% if @<%= plural_table_name %>.any? %>
15
15
  <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
16
- <%%= render <%= singular_table_name %> %>
17
- <p>
18
- <%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(singular_table_name) %>, class: "ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
19
- </p>
16
+ <div class="flex justify-between items-center">
17
+ <%%= render <%= singular_table_name %> %>
18
+ <div class="space-x-2">
19
+ <%%= link_to "Show", <%= model_resource_name(singular_table_name) %>, class: "rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
20
+ <%%= link_to "Edit", <%= edit_helper(singular_table_name, type: :path) %>, class: "rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
21
+ <div class="inline-block">
22
+ <%%= button_to "Destroy", <%= model_resource_name %>, method: :delete, class: "rounded-md px-3.5 py-2.5 text-white bg-red-600 hover:bg-red-500 font-medium cursor-pointer", data: { turbo_confirm: "Are you sure?" } %>
23
+ </div>
24
+ </div>
25
+ </div>
20
26
  <%% end %>
21
27
  <%% else %>
22
28
  <p class="text-center my-10">No <%= human_name.downcase.pluralize %> found.</p>
@@ -1,16 +1,18 @@
1
- <div id="<%%= dom_id <%= singular_name %> %>">
1
+ <div id="<%%= dom_id <%= singular_name %> %>" class="my-5 space-y-5">
2
2
  <% attributes.reject(&:password_digest?).each do |attribute| -%>
3
- <p class="my-5">
3
+ <div>
4
4
  <strong class="block font-medium mb-1"><%= attribute.human_name %>:</strong>
5
5
  <% if attribute.attachment? -%>
6
- <%%= link_to <%= singular_name %>.<%= attribute.column_name %>.filename, <%= singular_name %>.<%= attribute.column_name %> if <%= singular_name %>.<%= attribute.column_name %>.attached? %>
6
+ <%%= link_to <%= singular_name %>.<%= attribute.column_name %>.filename, <%= singular_name %>.<%= attribute.column_name %>, class: "text-gray-700 underline hover:no-underline" if <%= singular_name %>.<%= attribute.column_name %>.attached? %>
7
7
  <% elsif attribute.attachments? -%>
8
8
  <%% <%= singular_name %>.<%= attribute.column_name %>.each do |<%= attribute.singular_name %>| %>
9
- <div><%%= link_to <%= attribute.singular_name %>.filename, <%= attribute.singular_name %> %></div>
9
+ <div><%%= link_to <%= attribute.singular_name %>.filename, <%= attribute.singular_name %>, class: "text-gray-700 underline hover:no-underline" %></div>
10
10
  <%% end %>
11
+ <% elsif attribute.type == :boolean -%>
12
+ <%%= <%= singular_name %>.<%= attribute.column_name %>? ? "Yes" : "No" %>
11
13
  <% else -%>
12
14
  <%%= <%= singular_name %>.<%= attribute.column_name %> %>
13
15
  <% end -%>
14
- </p>
16
+ </div>
15
17
  <% end -%>
16
18
  </div>
@@ -12,6 +12,6 @@
12
12
  <%%= link_to "Edit this <%= human_name.downcase %>", <%= edit_helper(type: :path) %>, class: "mt-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
13
13
  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper %>_path, class: "ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
14
14
  <div class="inline-block ml-2">
15
- <%%= button_to "Destroy this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, method: :delete, class: "mt-2 rounded-md px-3.5 py-2.5 text-white bg-red-600 hover:bg-red-500 font-medium" %>
15
+ <%%= button_to "Destroy this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, method: :delete, class: "mt-2 rounded-md px-3.5 py-2.5 text-white bg-red-600 hover:bg-red-500 font-medium cursor-pointer", data: { turbo_confirm: "Are you sure?" } %>
16
16
  </div>
17
17
  </div>
@@ -1,3 +1,3 @@
1
1
  module Tailwindcss
2
- VERSION = "4.0.0.rc5"
2
+ VERSION = "4.1.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,13 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: tailwindcss-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 4.0.0.rc5
4
+ version: 4.1.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - David Heinemeier Hansson
8
- autorequire:
9
8
  bindir: bin
10
9
  cert_chain: []
11
- date: 2025-01-29 00:00:00.000000000 Z
10
+ date: 2025-02-19 00:00:00.000000000 Z
12
11
  dependencies:
13
12
  - !ruby/object:Gem::Dependency
14
13
  name: railties
@@ -38,7 +37,6 @@ dependencies:
38
37
  - - "~>"
39
38
  - !ruby/object:Gem::Version
40
39
  version: '4.0'
41
- description:
42
40
  email: david@loudthinking.com
43
41
  executables: []
44
42
  extensions: []
@@ -86,7 +84,17 @@ licenses:
86
84
  metadata:
87
85
  homepage_uri: https://github.com/rails/tailwindcss-rails
88
86
  rubygems_mfa_required: 'true'
89
- post_install_message:
87
+ post_install_message: |+
88
+ == Upgrading to Tailwind CSS v4 ==
89
+
90
+ If you are upgrading to tailwindcss-rails 4.x, please read the upgrade guide at:
91
+
92
+ https://github.com/rails/tailwindcss-rails/blob/main/README.md#upgrading-your-application-from-tailwind-v3-to-v4
93
+
94
+ If you're not ready to upgrade yet, please pin to version 3 in your Gemfile:
95
+
96
+ gem "tailwindcss-rails", "~> 3.3.1"
97
+
90
98
  rdoc_options: []
91
99
  require_paths:
92
100
  - lib
@@ -101,8 +109,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
101
109
  - !ruby/object:Gem::Version
102
110
  version: 3.2.0
103
111
  requirements: []
104
- rubygems_version: 3.5.22
105
- signing_key:
112
+ rubygems_version: 3.6.2
106
113
  specification_version: 4
107
114
  summary: Integrate Tailwind CSS with the asset pipeline in Rails.
108
115
  test_files: []
116
+ ...