tailwindcss-rails 4.0.0.rc1 → 4.0.0.rc2

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: 90c12e592470225fa2691b3d6a05f37a9e2ec42105914808503fb2ff8dcad26d
4
- data.tar.gz: b8ed05daad38b1e5d444e642d2c6959a9bdeccf7b73dffb64cd6180298f9e9e0
3
+ metadata.gz: 25b499cfb3a5bb8ff72c083b3db9b55f805841e72f4c7d70822f43ad549841f1
4
+ data.tar.gz: ce5a7fec5aebe849b5ec925e26314a2d49757457447f4abdce46a05a3d00f4c9
5
5
  SHA512:
6
- metadata.gz: 503d686e869134450c4b7088881779bc63db162e2b75864c2ced185a4575a8d3425c8f7afb7929e892dbf1196e79cf163480e7e4d637a0a6467e03e26b9f256d
7
- data.tar.gz: b44d09d37a35e990f020526880d4d227759b24f979c3443009d7dc5f2f0ffca03ad8a3ea686b6e969530f05e4e4bf96337812132ef58f5c7ff85657a94dfe85d
6
+ metadata.gz: aa8f794bbd71a24f565fe426d92195568421ce59f2c3d025e3efec7ff6e9b809a040639db693de0945fa717e559ace7c26ffef61f321524cf27000ad1fb6192d
7
+ data.tar.gz: 7202ece89941519c53a56cb4c276abfac516f59f9baada3212283b499dd51432747ee9fb2a1e95416f7bb671da70d95a7b609a734e4ae34d3f9479e6027df3a6
data/README.md CHANGED
@@ -12,6 +12,7 @@
12
12
  - [Upgrading your application from Tailwind v3 to v4](#upgrading-your-application-from-tailwind-v3-to-v4)
13
13
  * [You don't _have_ to upgrade](#you-dont-_have_-to-upgrade)
14
14
  * [Upgrade steps](#upgrade-steps)
15
+ * [Plugins](#plugins)
15
16
  * [Troubleshooting](#troubleshooting)
16
17
  - [Developing with Tailwindcss](#developing-with-tailwindcss)
17
18
  * [Configuration and commands](#configuration-and-commands)
@@ -28,7 +29,6 @@
28
29
  * [Class names must be spelled out](#class-names-must-be-spelled-out)
29
30
  * [`ERROR: Cannot find the tailwindcss executable` for supported platform](#error-cannot-find-the-tailwindcss-executable-for-supported-platform)
30
31
  * [Using asset-pipeline assets](#using-asset-pipeline-assets)
31
- * [Conflict with pre-existing asset pipeline stylesheets](#conflict-with-pre-existing-asset-pipeline-stylesheets)
32
32
  - [License](#license)
33
33
 
34
34
  <!-- tocstop -->
@@ -67,11 +67,19 @@ A full explanation of a Tailwind v4 upgrade is out of scope for this README, so
67
67
 
68
68
  This gem will help with some of the mechanics of the upgrade, however.
69
69
 
70
+
70
71
  ### You don't _have_ to upgrade
71
72
 
72
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.
73
74
 
74
- Just make sure you're pinning the version of **both** `tailwindcss-rails` and `tailwindcss-ruby`:
75
+ Just make sure you're either pinned to v3.3.1 of this gem:
76
+
77
+ ``` ruby
78
+ # Gemfile
79
+ gem "tailwindcss-rails", "3.3.1" # which transitively pins tailwindcss-ruby to v3
80
+ ```
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`:
75
83
 
76
84
  ``` ruby
77
85
  # Gemfile
@@ -86,7 +94,7 @@ First, update to `tailwindcss-rails` v4.0.0 or higher. This will also ensure you
86
94
 
87
95
  ``` html
88
96
  # Gemfile
89
- gem "tailwindcss-rails", "~> 4.0"
97
+ gem "tailwindcss-rails", "~> 4.0" # which transitively pins tailwindcss-ruby to v4
90
98
  ```
91
99
 
92
100
  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.
@@ -94,59 +102,63 @@ Then, run the `tailwindcss:upgrade` task. Among other things, this will try to r
94
102
  Here's what the upgrade task does:
95
103
 
96
104
  - Cleans up some things in the generated `config/tailwind.config.js`.
97
- - Runs the upstream upgrader (note: requires `npx` to run the one-time upgrade, but highly recommended).
98
- - Removes references to the Inter font from the application layout.
99
105
  - If present, moves `config/postcss.config.js` to the root directory.
106
+ - If present, moves `app/assets/stylesheets/application.tailwind.css` to `app/assets/tailwind`.
107
+ - Removes unnecessary `stylesheet_link_tag "tailwindcss"` tags from the application layout.
108
+ - Removes references to the Inter font from the application layout.
109
+ - Runs the upstream upgrader (note: requires `npx` to run the one-time upgrade, but highly recommended).
100
110
 
101
- Here's what that upgrade looks like on a vanilla Rails app:
111
+ <details>
112
+ <summary>Here's what that upgrade looks like on a vanilla Rails app.</summary>
102
113
 
103
114
  ``` sh
104
115
  $ bin/rails tailwindcss:upgrade
105
116
  apply /path/to/tailwindcss-rails/lib/install/upgrade_tailwindcss.rb
106
117
  Removing references to 'defaultTheme' from /home/user/myapp/config/tailwind.config.js
107
118
  gsub config/tailwind.config.js
119
+ Strip Inter font CSS from application layout
120
+ gsub app/views/layouts/application.html.erb
121
+ Remove unnecessary stylesheet_link_tag from application layout
122
+ gsub app/views/layouts/application.html.erb
123
+ Moving application.tailwind.css to /home/user/myapp/app/assets/tailwind
124
+ create app/assets/tailwind/application.tailwind.css
125
+ remove app/assets/stylesheets/application.tailwind.css
126
+ 10.9.0
108
127
  Running the upstream Tailwind CSS upgrader
109
128
  run npx @tailwindcss/upgrade@next --force --config /home/user/myapp/config/tailwind.config.js from "."
110
129
  ≈ tailwindcss v4.0.0
111
-
112
130
  │ Searching for CSS files in the current directory and its subdirectories…
113
-
114
- │ ↳ Linked `./config/tailwind.config.js` to `./app/assets/stylesheets/application.tailwind.css`
115
-
131
+ │ ↳ Linked `./config/tailwind.config.js` to `./app/assets/tailwind/application.tailwind.css`
116
132
  │ Migrating JavaScript configuration files…
117
-
118
133
  │ ↳ The configuration file at `./config/tailwind.config.js` could not be automatically migrated to the new CSS
119
134
  │ configuration format, so your CSS has been updated to load your existing configuration file.
120
-
121
135
  │ Migrating templates…
122
-
123
136
  │ ↳ Migrated templates for configuration file: `./config/tailwind.config.js`
124
-
125
137
  │ Migrating stylesheets…
126
-
127
- │ ↳ Migrated stylesheet: `./app/assets/stylesheets/application.tailwind.css`
128
-
138
+ │ ↳ Migrated stylesheet: `./app/assets/tailwind/application.tailwind.css`
129
139
  │ ↳ No PostCSS config found, skipping migration.
130
-
131
140
  │ Updating dependencies…
132
-
133
141
  │ Could not detect a package manager. Please manually update `tailwindcss` to v4.
134
-
135
142
  │ Verify the changes and commit them to your repository.
136
-
137
- Strip Inter font CSS from application layout
138
- gsub app/views/layouts/application.html.erb
139
143
  Compile initial Tailwind build
140
144
  run rails tailwindcss:build from "."
141
145
  ≈ tailwindcss v4.0.0
142
-
143
- Done in 52ms
146
+ Done in 56ms
144
147
  run bundle install --quiet
145
148
  ```
146
149
 
150
+ </details>
151
+
147
152
  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)!
148
153
 
149
154
 
155
+ ### Plugins
156
+
157
+ In Tailwind CLI v3, some Tailwind plugins were included by default in the CLI tool. However, in v4 these default plugins have been removed.
158
+
159
+ In order to use any plugins with v4, either by declaring them in your (optional) config file or using the [`@plugin` directive](https://tailwindcss.com/docs/functions-and-directives#plugin-directive), it's necessary to install them using a local javascript package manager.
160
+
161
+
150
162
  ### Troubleshooting
151
163
 
152
164
  You may want to check out [TailwindCSS v4 - upgrade experience report · rails/tailwindcss-rails · Discussion #450](https://github.com/rails/tailwindcss-rails/discussions/450) if you're having trouble upgrading.
@@ -163,9 +175,11 @@ We'll try to improve the upgrade process over time, but for now you may need to
163
175
 
164
176
  ### Configuration and commands
165
177
 
166
- #### Input file: `app/assets/stylesheets/application.tailwind.css`
178
+ #### Input file: `app/assets/tailwind/application.tailwind.css`
179
+
180
+ The `tailwindcss:install` task will generate a Tailwind input file in `app/assets/tailwind/application.tailwind.css`. This is where you import the plugins you want to use and where you can setup your custom `@apply` rules.
167
181
 
168
- The installer will generate a Tailwind input file in `app/assets/stylesheets/application.tailwind.css`. This is where you import the plugins you want to use and where you can setup your custom `@apply` rules.
182
+ The location of this file changed in v4, from `app/assets/stylesheets` to `app/assets/tailwind`. The `tailwindcss:upgrade` task will move it for you.
169
183
 
170
184
  #### Output file: `app/assets/builds/tailwind.css`
171
185
 
@@ -257,13 +271,10 @@ For example, to enable nesting:
257
271
 
258
272
  ```js
259
273
  // postcss.config.js
260
- module.exports = {
274
+ export default {
261
275
  plugins: {
262
- 'postcss-import': {},
263
- 'tailwindcss/nesting': {},
264
- tailwindcss: {},
265
- autoprefixer: {},
266
- },
276
+ "@tailwindcss/postcss": {},
277
+ }
267
278
  }
268
279
  ```
269
280
 
@@ -275,10 +286,9 @@ module.exports = {
275
286
  "name": "my app",
276
287
  "private": true,
277
288
  "dependencies": {
278
- "postcss-advanced-variables": "^4.0.0",
279
- "postcss-import": "^16.0.1",
280
- "postcss-mixins": "^9.0.4",
281
- "tailwindcss": "^3.4.1"
289
+ "@tailwindcss/postcss": "^4.0.0",
290
+ "tailwindcss": "^4.0.0",
291
+ "postcss": "^8.5.1"
282
292
  }
283
293
  }
284
294
  ```
@@ -341,17 +351,6 @@ The inline version also works:
341
351
  <section class="bg-[url('image.svg')]">Has the image as it's background</section>
342
352
  ```
343
353
 
344
- ### Conflict with pre-existing asset pipeline stylesheets
345
-
346
- If you get a warning `Unrecognized at-rule or error parsing at-rule ‘@tailwind’.` in the browser console after installation, you are incorrectly double-processing `application.tailwind.css`. This is a misconfiguration, even though the styles will be fully effective in many cases.
347
-
348
- The file `application.tailwind.css` is installed when running `rails tailwindcss:install` and is placed alongside the common `application.css` in `app/assets/stylesheets`. Because the `application.css` in a newly generated Rails app includes a `require_tree .` directive, the asset pipeline incorrectly processes `application.tailwind.css`, where it should be taken care of by `tailwindcss`. The asset pipeline ignores TailwindCSS's at-directives, and the browser can't process them.
349
-
350
- To fix the warning, you can either remove the `application.css`, if you don't plan to use the asset pipeline for stylesheets, and instead rely on TailwindCSS completely for styles. This is what this installer assumes.
351
-
352
- Or, if you do want to keep using the asset pipeline in parallel, make sure to remove the `require_tree .` line from the `application.css`.
353
-
354
-
355
354
  ## License
356
355
 
357
356
  Tailwind for Rails is released under the [MIT License](https://opensource.org/licenses/MIT).
@@ -1,12 +1,16 @@
1
1
  APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")
2
2
  CENTERING_CONTAINER_INSERTION_POINT = /^\s*<%= yield %>/.freeze
3
+ TAILWIND_ASSET_PATH = Rails.root.join("app/assets/tailwind")
3
4
 
4
5
  if APPLICATION_LAYOUT_PATH.exist?
5
- say "Add Tailwindcss include tags and container element in application layout"
6
- insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /^\s*<%= stylesheet_link_tag/
7
- <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
8
- ERB
6
+ unless File.read(APPLICATION_LAYOUT_PATH).match?(/stylesheet_link_tag :app/)
7
+ say "Add Tailwindcss include tags in application layout"
8
+ insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /^\s*<%= stylesheet_link_tag/
9
+ <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
10
+ ERB
11
+ end
9
12
 
13
+ say "Add Tailwindcss container element in application layout"
10
14
  if File.open(APPLICATION_LAYOUT_PATH).read =~ /<body>\n\s*<%= yield %>\n\s*<\/body>/
11
15
  insert_into_file APPLICATION_LAYOUT_PATH.to_s, %( <main class="container mx-auto mt-28 px-5 flex">\n ), before: CENTERING_CONTAINER_INSERTION_POINT
12
16
  insert_into_file APPLICATION_LAYOUT_PATH.to_s, %(\n </main>), after: CENTERING_CONTAINER_INSERTION_POINT
@@ -28,9 +32,9 @@ if Rails.root.join(".gitignore").exist?
28
32
  append_to_file(".gitignore", %(\n/app/assets/builds/*\n!/app/assets/builds/.keep\n))
29
33
  end
30
34
 
31
- unless Rails.root.join("app/assets/stylesheets/application.tailwind.css").exist?
32
- say "Add default app/assets/stylesheets/application.tailwind.css"
33
- copy_file "#{__dir__}/application.tailwind.css", "app/assets/stylesheets/application.tailwind.css"
35
+ unless TAILWIND_ASSET_PATH.join("application.tailwind.css").exist?
36
+ say "Add default #{TAILWIND_ASSET_PATH}/application.tailwind.css"
37
+ copy_file "#{__dir__}/application.tailwind.css", TAILWIND_ASSET_PATH.join("application.tailwind.css")
34
38
  end
35
39
 
36
40
  if Rails.root.join("Procfile.dev").exist?
@@ -1,6 +1,8 @@
1
1
  TAILWIND_CONFIG_PATH = Rails.root.join("config/tailwind.config.js")
2
2
  APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")
3
3
  POSTCSS_CONFIG_PATH = Rails.root.join("config/postcss.config.js")
4
+ OLD_TAILWIND_ASSET_PATH = Rails.root.join("app/assets/stylesheets")
5
+ TAILWIND_ASSET_PATH = Rails.root.join("app/assets/tailwind")
4
6
 
5
7
  unless TAILWIND_CONFIG_PATH.exist?
6
8
  say "Default tailwind.config.js is missing!", :red
@@ -14,7 +16,32 @@ end
14
16
 
15
17
  if POSTCSS_CONFIG_PATH.exist?
16
18
  say "Moving PostCSS configuration to application root directory"
17
- FileUtils.mv(POSTCSS_CONFIG_PATH, Rails.root, verbose: true) || abort
19
+ copy_file POSTCSS_CONFIG_PATH, Rails.root.join("postcss.config.js")
20
+ remove_file POSTCSS_CONFIG_PATH
21
+ end
22
+
23
+ if APPLICATION_LAYOUT_PATH.exist?
24
+ if File.read(APPLICATION_LAYOUT_PATH).match?(/"inter-font"/)
25
+ say "Strip Inter font CSS from application layout"
26
+ gsub_file APPLICATION_LAYOUT_PATH.to_s, %r{, "inter-font"}, ""
27
+ else
28
+ say "Inter font CSS not detected.", :green
29
+ end
30
+
31
+ if File.read(APPLICATION_LAYOUT_PATH).match?(/stylesheet_link_tag :app/) &&
32
+ File.read(APPLICATION_LAYOUT_PATH).match?(/stylesheet_link_tag "tailwind"/)
33
+ say "Remove unnecessary stylesheet_link_tag from application layout"
34
+ gsub_file APPLICATION_LAYOUT_PATH.to_s, %r{^\s*<%= stylesheet_link_tag "tailwind".*%>$}, ""
35
+ end
36
+ else
37
+ say "Default application.html.erb is missing!", :red
38
+ say %( Please check your layouts and remove any "inter-font" stylesheet links.)
39
+ end
40
+
41
+ if OLD_TAILWIND_ASSET_PATH.join("application.tailwind.css").exist?
42
+ say "Moving application.tailwind.css to #{TAILWIND_ASSET_PATH}"
43
+ copy_file OLD_TAILWIND_ASSET_PATH.join("application.tailwind.css"), TAILWIND_ASSET_PATH.join("application.tailwind.css")
44
+ remove_file OLD_TAILWIND_ASSET_PATH.join("application.tailwind.css")
18
45
  end
19
46
 
20
47
  if system("npx --version")
@@ -32,17 +59,5 @@ else
32
59
  abort
33
60
  end
34
61
 
35
- if APPLICATION_LAYOUT_PATH.exist?
36
- if File.read(APPLICATION_LAYOUT_PATH).match?(/"inter-font"/)
37
- say "Strip Inter font CSS from application layout"
38
- gsub_file APPLICATION_LAYOUT_PATH.to_s, %r{, "inter-font"}, ""
39
- else
40
- say "Inter font CSS not detected.", :green
41
- end
42
- else
43
- say "Default application.html.erb is missing!", :red
44
- say %( Please check your layouts and remove any "inter-font" stylesheet links.)
45
- end
46
-
47
62
  say "Compile initial Tailwind build"
48
63
  run "rails tailwindcss:build"
@@ -8,7 +8,7 @@ module Tailwindcss
8
8
 
9
9
  command = [
10
10
  Tailwindcss::Ruby.executable(**kwargs),
11
- "-i", rails_root.join("app/assets/stylesheets/application.tailwind.css").to_s,
11
+ "-i", rails_root.join("app/assets/tailwind/application.tailwind.css").to_s,
12
12
  "-o", rails_root.join("app/assets/builds/tailwind.css").to_s,
13
13
  ]
14
14
 
@@ -6,6 +6,12 @@ module Tailwindcss
6
6
  Rails.application.config.generators.stylesheets = false
7
7
  end
8
8
 
9
+ initializer "tailwindcss.exclude_asset_path", after: "propshaft.append_assets_path" do
10
+ if Rails.application.config.assets.excluded_paths # the app may not be using Propshaft
11
+ Rails.application.config.assets.excluded_paths << Rails.root.join("app/assets/tailwind")
12
+ end
13
+ end
14
+
9
15
  config.app_generators do |g|
10
16
  g.template_engine :tailwindcss
11
17
  end
@@ -1,3 +1,3 @@
1
1
  module Tailwindcss
2
- VERSION = "4.0.0.rc1"
2
+ VERSION = "4.0.0.rc2"
3
3
  end
metadata CHANGED
@@ -1,13 +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.rc1
4
+ version: 4.0.0.rc2
5
5
  platform: ruby
6
6
  authors:
7
7
  - David Heinemeier Hansson
8
8
  bindir: bin
9
9
  cert_chain: []
10
- date: 2025-01-23 00:00:00.000000000 Z
10
+ date: 2025-01-26 00:00:00.000000000 Z
11
11
  dependencies:
12
12
  - !ruby/object:Gem::Dependency
13
13
  name: railties