Skip to content

Rename application.tailwind.css to application.css #481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 27, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 13 additions & 30 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,56 +1,39 @@
## next / unreleased

## v4.0.0.rc3 / 2025-01-27

Everything in v4.0.0.rc2, plus ...

General changes:

- Remove the Inter font assets from the gem. @EricGusmao
- If Propshaft is being used, `app/assets/tailwind` will be excluded from its asset handling. (This was incompletely fixed in RC2.)


## v4.0.0.rc2 / 2025-01-26

Everything in v4.0.0.rc1, plus ...

General changes:

- The location of `application.tailwind.css` has moved from `app/assets/stylesheets` to `app/assets/tailwind`. If Propshaft is being used, `app/assets/tailwind` will be excluded from its asset handling.
## next rc / unreleased

Changes to the `tailwindcss:install` task:

- The "tailwind" stylesheet link tag will only be added to the application layout if Propshaft isn't in use and already handling `app/assets/build/tailwind.css`. Previously it was always injected, resulting in the tag being rendered twice if Propshaft was in use.

Changes to the `tailwindcss:upgrade` task:

- The "tailwind" stylesheet link tag will be removed if Propshaft is in use and already handling `app/assets/build/tailwind.css`.
- The file `application.tailwind.css` will be moved from `app/assets/stylesheets` to `app/assets/tailwind`.
- The input file `app/assets/tailwind/application.tailwind.css` has been renamed to `app/assets/tailwind/application.css`.

Thanks to @brunoprietog for feedback and advice.

## v4.0.0.rc1 / 2025-01-23
## v4.0.0.rc3 / 2025-01-27

### Upgrade to Tailwind CSS v4

General changes:

- Dependency on `tailwindcss-ruby` set to `~> 4.0`.
- The location of (optional) `postcss.config.js` has moved from the `config/` directory to the app root.
- The location of `application.tailwind.css` has moved from `app/assets/stylesheets` to `app/assets/tailwind`. If Propshaft is being used, `app/assets/tailwind` will be excluded from its asset handling.
- The Inter font is no longer packaged with the gem.

Changes to the `tailwindcss:install` task:

- The `tailwindcss:install` task no longer installs `config/tailwind.config.js`.
- The Inter font is no longer packaged with the gem.
- Some Tailwind class names are updated for v4.
- The Inter font is no longer configured in the application layout.
- Some Tailwind class names in the ERB templates are updated for v4.
- The "tailwind" stylesheet link tag will only be added to the application layout if Propshaft isn't in use and already handling `app/assets/build/tailwind.css`. Previously it was always injected, resulting in the tag being rendered twice if Propshaft was in use.

New task `tailwindcss:upgrade` upgrades many apps cleanly:

- Cleans up some things in the generated `config/tailwind.config.js`.
- Runs the upstream upgrader (note: requires `npx` to run the one-time upgrade, but highly recommended).
- Removes references to the Inter font from the application layout.
- Removes configuration for the Inter font from the application layout.
- If present, moves `config/postcss.config.js` to the root directory.
- The "tailwind" stylesheet link tag will be removed if Propshaft is in use and already handling `app/assets/build/tailwind.css`.
- The input file `application.tailwind.css` will be moved from `app/assets/stylesheets` to `app/assets/tailwind`.

Thanks to @EricGusmao and @excid3 for their help and advice on this work.
Thanks to @EricGusmao, @patriciomacadden, and @excid3 for their feedback, contributions, and advice on the v4 release.


## v3.3.1 / 2025-01-23
Expand Down
16 changes: 8 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ Here's what the upgrade task does:

- Cleans up some things in the generated `config/tailwind.config.js`.
- If present, moves `config/postcss.config.js` to the root directory.
- If present, moves `app/assets/stylesheets/application.tailwind.css` to `app/assets/tailwind`.
- If present, moves `app/assets/stylesheets/application.tailwind.css` to `app/assets/tailwind/application.css`.
- Removes unnecessary `stylesheet_link_tag "tailwindcss"` tags from the application layout.
- Removes references to the Inter font from the application layout.
- Runs the upstream upgrader (note: requires `npx` to run the one-time upgrade, but highly recommended).
Expand All @@ -119,22 +119,22 @@ $ bin/rails tailwindcss:upgrade
gsub app/views/layouts/application.html.erb
Remove unnecessary stylesheet_link_tag from application layout
gsub app/views/layouts/application.html.erb
Moving application.tailwind.css to /home/user/myapp/app/assets/tailwind
create app/assets/tailwind/application.tailwind.css
Moving /home/user/myapp/app/assets/stylesheets/application.tailwind.css to /home/user/myapp/app/assets/tailwind/application.css
create app/assets/tailwind/application.css
remove app/assets/stylesheets/application.tailwind.css
10.9.0
Running the upstream Tailwind CSS upgrader
run npx @tailwindcss/upgrade@next --force --config /home/user/myapp/config/tailwind.config.js from "."
≈ tailwindcss v4.0.0
│ Searching for CSS files in the current directory and its subdirectories…
│ ↳ Linked `./config/tailwind.config.js` to `./app/assets/tailwind/application.tailwind.css`
│ ↳ Linked `./config/tailwind.config.js` to `./app/assets/tailwind/application.css`
│ Migrating JavaScript configuration files…
│ ↳ The configuration file at `./config/tailwind.config.js` could not be automatically migrated to the new CSS
│ configuration format, so your CSS has been updated to load your existing configuration file.
│ Migrating templates…
│ ↳ Migrated templates for configuration file: `./config/tailwind.config.js`
│ Migrating stylesheets…
│ ↳ Migrated stylesheet: `./app/assets/tailwind/application.tailwind.css`
│ ↳ Migrated stylesheet: `./app/assets/tailwind/application.css`
│ ↳ No PostCSS config found, skipping migration.
│ Updating dependencies…
│ Could not detect a package manager. Please manually update `tailwindcss` to v4.
Expand Down Expand Up @@ -167,11 +167,11 @@ We'll try to improve the upgrade process over time, but for now you may need to

### Configuration and commands

#### Input file: `app/assets/tailwind/application.tailwind.css`
#### Input file: `app/assets/tailwind/application.css`

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.
The `tailwindcss:install` task will generate a Tailwind input file in `app/assets/tailwind/application.css`. This is where you import the plugins you want to use and where you can setup your custom `@apply` rules.

⚠ 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.
⚠ The location of this file changed in v4, from `app/assets/stylesheets/application.tailwind.css` to `app/assets/tailwind/application.css`. The `tailwindcss:upgrade` task will move it for you.

#### Output file: `app/assets/builds/tailwind.css`

Expand Down
File renamed without changes.
8 changes: 4 additions & 4 deletions lib/install/install_tailwindcss.rb
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")
CENTERING_CONTAINER_INSERTION_POINT = /^\s*<%= yield %>/.freeze
TAILWIND_ASSET_PATH = Rails.root.join("app/assets/tailwind")
TAILWIND_ASSET_PATH = Rails.root.join("app/assets/tailwind/application.css")

if APPLICATION_LAYOUT_PATH.exist?
unless File.read(APPLICATION_LAYOUT_PATH).match?(/stylesheet_link_tag :app/)
Expand Down Expand Up @@ -32,9 +32,9 @@
append_to_file(".gitignore", %(\n/app/assets/builds/*\n!/app/assets/builds/.keep\n))
end

unless TAILWIND_ASSET_PATH.join("application.tailwind.css").exist?
say "Add default #{TAILWIND_ASSET_PATH}/application.tailwind.css"
copy_file "#{__dir__}/application.tailwind.css", TAILWIND_ASSET_PATH.join("application.tailwind.css")
unless TAILWIND_ASSET_PATH.exist?
say "Add default #{TAILWIND_ASSET_PATH}"
copy_file "#{__dir__}/application.css", TAILWIND_ASSET_PATH
end

if Rails.root.join("Procfile.dev").exist?
Expand Down
12 changes: 6 additions & 6 deletions lib/install/upgrade_tailwindcss.rb
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
TAILWIND_CONFIG_PATH = Rails.root.join("config/tailwind.config.js")
APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")
POSTCSS_CONFIG_PATH = Rails.root.join("config/postcss.config.js")
OLD_TAILWIND_ASSET_PATH = Rails.root.join("app/assets/stylesheets")
TAILWIND_ASSET_PATH = Rails.root.join("app/assets/tailwind")
OLD_TAILWIND_ASSET_PATH = Rails.root.join("app/assets/stylesheets/application.tailwind.css")
TAILWIND_ASSET_PATH = Rails.root.join("app/assets/tailwind/application.css")

unless TAILWIND_CONFIG_PATH.exist?
say "Default tailwind.config.js is missing!", :red
Expand Down Expand Up @@ -38,10 +38,10 @@
say %( Please check your layouts and remove any "inter-font" stylesheet links.)
end

if OLD_TAILWIND_ASSET_PATH.join("application.tailwind.css").exist?
say "Moving application.tailwind.css to #{TAILWIND_ASSET_PATH}"
copy_file OLD_TAILWIND_ASSET_PATH.join("application.tailwind.css"), TAILWIND_ASSET_PATH.join("application.tailwind.css")
remove_file OLD_TAILWIND_ASSET_PATH.join("application.tailwind.css")
if OLD_TAILWIND_ASSET_PATH.exist?
say "Moving #{OLD_TAILWIND_ASSET_PATH} to #{TAILWIND_ASSET_PATH}"
copy_file OLD_TAILWIND_ASSET_PATH, TAILWIND_ASSET_PATH
remove_file OLD_TAILWIND_ASSET_PATH
end

if system("npx --version")
Expand Down
2 changes: 1 addition & 1 deletion lib/tailwindcss/commands.rb
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ def compile_command(debug: false, **kwargs)

command = [
Tailwindcss::Ruby.executable(**kwargs),
"-i", rails_root.join("app/assets/tailwind/application.tailwind.css").to_s,
"-i", rails_root.join("app/assets/tailwind/application.css").to_s,
"-o", rails_root.join("app/assets/builds/tailwind.css").to_s,
]

Expand Down
6 changes: 3 additions & 3 deletions test/integration/user_install_test.sh
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ bin/rails tailwindcss:install

# TEST: tailwind was installed correctly
grep -q "<main class=\"container" app/views/layouts/application.html.erb
test -a app/assets/tailwind/application.tailwind.css
test -a app/assets/tailwind/application.css

# TEST: rake tasks don't exec (#188)
cat <<EOF >> Rakefile
Expand All @@ -46,7 +46,7 @@ task :still_here do
end
EOF

cat >> app/assets/tailwind/application.tailwind.css <<EOF
cat >> app/assets/tailwind/application.css <<EOF
@theme { --color-special: #abc12399; }
EOF

Expand All @@ -66,7 +66,7 @@ grep -q "Show this post" app/views/posts/index.html.erb
bin/rails tailwindcss:build[verbose]
grep -q "py-2" app/assets/builds/tailwind.css

# TEST: contents include application.tailwind.css
# TEST: contents include application.css directives
grep -q "#abc12399" app/assets/builds/tailwind.css

echo "OK"
2 changes: 1 addition & 1 deletion test/integration/user_upgrade_test.sh
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ test -a postcss.config.js

# TEST: moving application.tailwind.css
test ! -a app/assets/stylesheets/application.tailwind.css
test -a app/assets/tailwind/application.tailwind.css
test -a app/assets/tailwind/application.css

# generate CSS
bin/rails tailwindcss:build[verbose]
Expand Down
Loading