tailwindcss-rails 4.0.0.rc1 → 4.0.0.rc3

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: 9132c959c2d738315776b226dc5fe8292972e0e6a344e8d3f7c9294465910998
4
+ data.tar.gz: dd76376002a3a4ab5051b4affc63f57f0094fe3a95984d7b3c0ea3cd58f8161a
5
5
  SHA512:
6
- metadata.gz: 503d686e869134450c4b7088881779bc63db162e2b75864c2ced185a4575a8d3425c8f7afb7929e892dbf1196e79cf163480e7e4d637a0a6467e03e26b9f256d
7
- data.tar.gz: b44d09d37a35e990f020526880d4d227759b24f979c3443009d7dc5f2f0ffca03ad8a3ea686b6e969530f05e4e4bf96337812132ef58f5c7ff85657a94dfe85d
6
+ metadata.gz: 8de6d29182f7a5599944c65e6d2e86bc22fe8ebc3fa55a6eb7a2b6f71d5450a9349458c86343a6a47d184b96251acc2d1c078fd99890bfe74f32cbb3b9b5db8f
7
+ data.tar.gz: 6317cc4ea1fc599657af5cfee72ef1c04dd8a5caa8e6dd10a2e0c52b3ba6ce634dae5058abc86cfd2d4daa74677ebb020fc385d3b46a99007198b9343259f8bc
data/README.md CHANGED
@@ -28,7 +28,6 @@
28
28
  * [Class names must be spelled out](#class-names-must-be-spelled-out)
29
29
  * [`ERROR: Cannot find the tailwindcss executable` for supported platform](#error-cannot-find-the-tailwindcss-executable-for-supported-platform)
30
30
  * [Using asset-pipeline assets](#using-asset-pipeline-assets)
31
- * [Conflict with pre-existing asset pipeline stylesheets](#conflict-with-pre-existing-asset-pipeline-stylesheets)
32
31
  - [License](#license)
33
32
 
34
33
  <!-- tocstop -->
@@ -67,11 +66,19 @@ A full explanation of a Tailwind v4 upgrade is out of scope for this README, so
67
66
 
68
67
  This gem will help with some of the mechanics of the upgrade, however.
69
68
 
69
+
70
70
  ### You don't _have_ to upgrade
71
71
 
72
72
  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
73
 
74
- Just make sure you're pinning the version of **both** `tailwindcss-rails` and `tailwindcss-ruby`:
74
+ Just make sure you're either pinned to v3.3.1 of this gem:
75
+
76
+ ``` ruby
77
+ # Gemfile
78
+ gem "tailwindcss-rails", "3.3.1" # which transitively pins tailwindcss-ruby to v3
79
+ ```
80
+
81
+ 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
82
 
76
83
  ``` ruby
77
84
  # Gemfile
@@ -86,7 +93,7 @@ First, update to `tailwindcss-rails` v4.0.0 or higher. This will also ensure you
86
93
 
87
94
  ``` html
88
95
  # Gemfile
89
- gem "tailwindcss-rails", "~> 4.0"
96
+ gem "tailwindcss-rails", "~> 4.0" # which transitively pins tailwindcss-ruby to v4
90
97
  ```
91
98
 
92
99
  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,56 +101,53 @@ Then, run the `tailwindcss:upgrade` task. Among other things, this will try to r
94
101
  Here's what the upgrade task does:
95
102
 
96
103
  - 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
104
  - If present, moves `config/postcss.config.js` to the root directory.
105
+ - If present, moves `app/assets/stylesheets/application.tailwind.css` to `app/assets/tailwind`.
106
+ - Removes unnecessary `stylesheet_link_tag "tailwindcss"` tags from the application layout.
107
+ - Removes references to the Inter font from the application layout.
108
+ - Runs the upstream upgrader (note: requires `npx` to run the one-time upgrade, but highly recommended).
100
109
 
101
- Here's what that upgrade looks like on a vanilla Rails app:
110
+ <details>
111
+ <summary>Here's what that upgrade looks like on a vanilla Rails app.</summary>
102
112
 
103
113
  ``` sh
104
114
  $ bin/rails tailwindcss:upgrade
105
115
  apply /path/to/tailwindcss-rails/lib/install/upgrade_tailwindcss.rb
106
116
  Removing references to 'defaultTheme' from /home/user/myapp/config/tailwind.config.js
107
117
  gsub config/tailwind.config.js
118
+ Strip Inter font CSS from application layout
119
+ gsub app/views/layouts/application.html.erb
120
+ Remove unnecessary stylesheet_link_tag from application layout
121
+ gsub app/views/layouts/application.html.erb
122
+ Moving application.tailwind.css to /home/user/myapp/app/assets/tailwind
123
+ create app/assets/tailwind/application.tailwind.css
124
+ remove app/assets/stylesheets/application.tailwind.css
125
+ 10.9.0
108
126
  Running the upstream Tailwind CSS upgrader
109
127
  run npx @tailwindcss/upgrade@next --force --config /home/user/myapp/config/tailwind.config.js from "."
110
128
  ≈ tailwindcss v4.0.0
111
-
112
129
  │ 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
-
130
+ │ ↳ Linked `./config/tailwind.config.js` to `./app/assets/tailwind/application.tailwind.css`
116
131
  │ Migrating JavaScript configuration files…
117
-
118
132
  │ ↳ The configuration file at `./config/tailwind.config.js` could not be automatically migrated to the new CSS
119
133
  │ configuration format, so your CSS has been updated to load your existing configuration file.
120
-
121
134
  │ Migrating templates…
122
-
123
135
  │ ↳ Migrated templates for configuration file: `./config/tailwind.config.js`
124
-
125
136
  │ Migrating stylesheets…
126
-
127
- │ ↳ Migrated stylesheet: `./app/assets/stylesheets/application.tailwind.css`
128
-
137
+ │ ↳ Migrated stylesheet: `./app/assets/tailwind/application.tailwind.css`
129
138
  │ ↳ No PostCSS config found, skipping migration.
130
-
131
139
  │ Updating dependencies…
132
-
133
140
  │ Could not detect a package manager. Please manually update `tailwindcss` to v4.
134
-
135
141
  │ 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
142
  Compile initial Tailwind build
140
143
  run rails tailwindcss:build from "."
141
144
  ≈ tailwindcss v4.0.0
142
-
143
- Done in 52ms
145
+ Done in 56ms
144
146
  run bundle install --quiet
145
147
  ```
146
148
 
149
+ </details>
150
+
147
151
  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
152
 
149
153
 
@@ -163,9 +167,11 @@ We'll try to improve the upgrade process over time, but for now you may need to
163
167
 
164
168
  ### Configuration and commands
165
169
 
166
- #### Input file: `app/assets/stylesheets/application.tailwind.css`
170
+ #### Input file: `app/assets/tailwind/application.tailwind.css`
167
171
 
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.
172
+ 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.
173
+
174
+ ⚠ 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
175
 
170
176
  #### Output file: `app/assets/builds/tailwind.css`
171
177
 
@@ -257,13 +263,10 @@ For example, to enable nesting:
257
263
 
258
264
  ```js
259
265
  // postcss.config.js
260
- module.exports = {
266
+ export default {
261
267
  plugins: {
262
- 'postcss-import': {},
263
- 'tailwindcss/nesting': {},
264
- tailwindcss: {},
265
- autoprefixer: {},
266
- },
268
+ "@tailwindcss/postcss": {},
269
+ }
267
270
  }
268
271
  ```
269
272
 
@@ -275,10 +278,9 @@ module.exports = {
275
278
  "name": "my app",
276
279
  "private": true,
277
280
  "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"
281
+ "@tailwindcss/postcss": "^4.0.0",
282
+ "tailwindcss": "^4.0.0",
283
+ "postcss": "^8.5.1"
282
284
  }
283
285
  }
284
286
  ```
@@ -341,17 +343,6 @@ The inline version also works:
341
343
  <section class="bg-[url('image.svg')]">Has the image as it's background</section>
342
344
  ```
343
345
 
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
346
  ## License
356
347
 
357
348
  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", before: "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.rc3"
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.rc3
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-27 00:00:00.000000000 Z
11
11
  dependencies:
12
12
  - !ruby/object:Gem::Dependency
13
13
  name: railties
@@ -45,22 +45,6 @@ files:
45
45
  - MIT-LICENSE
46
46
  - README.md
47
47
  - Rakefile
48
- - app/assets/fonts/Inter-italic.alternates.var.woff2
49
- - app/assets/fonts/Inter-italic.cyrillic.var.woff2
50
- - app/assets/fonts/Inter-italic.extra.var.woff2
51
- - app/assets/fonts/Inter-italic.greek.var.woff2
52
- - app/assets/fonts/Inter-italic.latin-ext.var.woff2
53
- - app/assets/fonts/Inter-italic.latin.var.woff2
54
- - app/assets/fonts/Inter-italic.symbols.var.woff2
55
- - app/assets/fonts/Inter-italic.vietnamese.var.woff2
56
- - app/assets/fonts/Inter-roman.alternates.var.woff2
57
- - app/assets/fonts/Inter-roman.cyrillic.var.woff2
58
- - app/assets/fonts/Inter-roman.extra.var.woff2
59
- - app/assets/fonts/Inter-roman.greek.var.woff2
60
- - app/assets/fonts/Inter-roman.latin-ext.var.woff2
61
- - app/assets/fonts/Inter-roman.latin.var.woff2
62
- - app/assets/fonts/Inter-roman.symbols.var.woff2
63
- - app/assets/fonts/Inter-roman.vietnamese.var.woff2
64
48
  - lib/generators/tailwindcss/authentication/authentication_generator.rb
65
49
  - lib/generators/tailwindcss/authentication/templates/app/views/passwords/edit.html.erb
66
50
  - lib/generators/tailwindcss/authentication/templates/app/views/passwords/new.html.erb