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 +4 -4
- data/README.md +47 -48
- data/lib/install/install_tailwindcss.rb +11 -7
- data/lib/install/upgrade_tailwindcss.rb +28 -13
- data/lib/tailwindcss/commands.rb +1 -1
- data/lib/tailwindcss/engine.rb +6 -0
- data/lib/tailwindcss/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 25b499cfb3a5bb8ff72c083b3db9b55f805841e72f4c7d70822f43ad549841f1
|
4
|
+
data.tar.gz: ce5a7fec5aebe849b5ec925e26314a2d49757457447f4abdce46a05a3d00f4c9
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
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
|
-
|
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/
|
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
|
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
|
-
|
274
|
+
export default {
|
261
275
|
plugins: {
|
262
|
-
|
263
|
-
|
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
|
279
|
-
"
|
280
|
-
"postcss
|
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
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
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
|
32
|
-
say "Add default
|
33
|
-
copy_file "#{__dir__}/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
|
-
|
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"
|
data/lib/tailwindcss/commands.rb
CHANGED
@@ -8,7 +8,7 @@ module Tailwindcss
|
|
8
8
|
|
9
9
|
command = [
|
10
10
|
Tailwindcss::Ruby.executable(**kwargs),
|
11
|
-
"-i", rails_root.join("app/assets/
|
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
|
|
data/lib/tailwindcss/engine.rb
CHANGED
@@ -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
|
data/lib/tailwindcss/version.rb
CHANGED
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.
|
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-
|
10
|
+
date: 2025-01-26 00:00:00.000000000 Z
|
11
11
|
dependencies:
|
12
12
|
- !ruby/object:Gem::Dependency
|
13
13
|
name: railties
|