- <%% if notice.present? %>
-
<%%= notice %>
- <%% end %>
-
- <%%= render @<%= singular_table_name %> %>
-
- <%%= link_to "Edit this <%= human_name.downcase %>", <%= edit_helper(type: :path) %>, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
- <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-
- <%%= button_to "Destroy this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
-
+<%% content_for :title, "Showing <%= human_name.downcase %>" %>
+
+
+ <%% if notice.present? %>
+
<%%= notice %>
+ <%% end %>
+
+
Showing <%= human_name.downcase %>
+
+ <%%= render @<%= singular_table_name %> %>
+
+ <%%= link_to "Edit this <%= human_name.downcase %>", <%= edit_helper(type: :path) %>, class: "w-full sm:w-auto text-center rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
+ <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper %>_path, class: "w-full sm:w-auto text-center mt-2 sm:mt-0 sm:ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
+
+ <%%= button_to "Destroy this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, method: :delete, class: "w-full 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?" } %>
diff --git a/lib/install/application.css b/lib/install/application.css
new file mode 100644
index 00000000..f1d8c73c
--- /dev/null
+++ b/lib/install/application.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/lib/install/application.tailwind.css b/lib/install/application.tailwind.css
deleted file mode 100644
index 8666d2f3..00000000
--- a/lib/install/application.tailwind.css
+++ /dev/null
@@ -1,13 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/*
-
-@layer components {
- .btn-primary {
- @apply py-2 px-4 bg-blue-200;
- }
-}
-
-*/
diff --git a/lib/install/tailwindcss.rb b/lib/install/install_tailwindcss.rb
similarity index 63%
rename from lib/install/tailwindcss.rb
rename to lib/install/install_tailwindcss.rb
index 2c2ba50c..3d471d07 100644
--- a/lib/install/tailwindcss.rb
+++ b/lib/install/install_tailwindcss.rb
@@ -1,19 +1,23 @@
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/application.css")
if APPLICATION_LAYOUT_PATH.exist?
- say "Add Tailwindcss include tags and container element in application layout"
- insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /^\s*<%= stylesheet_link_tag/
- <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
- ERB
+ unless File.read(APPLICATION_LAYOUT_PATH).match?(/stylesheet_link_tag :app/)
+ say "Add Tailwindcss include tags in application layout"
+ insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /^\s*<%= stylesheet_link_tag/
+ <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+ ERB
+ end
+ say "Add Tailwindcss container element in application layout"
if File.open(APPLICATION_LAYOUT_PATH).read =~ /\n\s*<%= yield %>\n\s*<\/body>/
insert_into_file APPLICATION_LAYOUT_PATH.to_s, %(
\n ), before: CENTERING_CONTAINER_INSERTION_POINT
insert_into_file APPLICATION_LAYOUT_PATH.to_s, %(\n ), after: CENTERING_CONTAINER_INSERTION_POINT
end
else
say "Default application.html.erb is missing!", :red
- say %( Add <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> within the tag in your custom layout.)
+ say %( Add <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %> within the tag in your custom layout.)
end
say "Build into app/assets/builds"
@@ -28,14 +32,9 @@
append_to_file(".gitignore", %(\n/app/assets/builds/*\n!/app/assets/builds/.keep\n))
end
-unless Rails.root.join("config/tailwind.config.js").exist?
- say "Add default config/tailwindcss.config.js"
- copy_file "#{__dir__}/tailwind.config.js", "config/tailwind.config.js"
-end
-
-unless Rails.root.join("app/assets/stylesheets/application.tailwind.css").exist?
- say "Add default app/assets/stylesheets/application.tailwind.css"
- copy_file "#{__dir__}/application.tailwind.css", "app/assets/stylesheets/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?
diff --git a/lib/install/tailwind.config.js b/lib/install/tailwind.config.js
deleted file mode 100644
index d6ad82c0..00000000
--- a/lib/install/tailwind.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
-
-module.exports = {
- content: [
- './public/*.html',
- './app/helpers/**/*.rb',
- './app/javascript/**/*.js',
- './app/views/**/*.{erb,haml,html,slim}'
- ],
- theme: {
- extend: {
- fontFamily: {
- sans: ['Inter var', ...defaultTheme.fontFamily.sans],
- },
- },
- },
- plugins: [
- require('@tailwindcss/forms'),
- require('@tailwindcss/typography'),
- require('@tailwindcss/container-queries'),
- ]
-}
diff --git a/lib/install/upgrade_tailwindcss.rb b/lib/install/upgrade_tailwindcss.rb
new file mode 100644
index 00000000..6266583a
--- /dev/null
+++ b/lib/install/upgrade_tailwindcss.rb
@@ -0,0 +1,63 @@
+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/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
+ abort
+end
+
+if File.read(TAILWIND_CONFIG_PATH).match?(/defaultTheme/)
+ say "Removing references to 'defaultTheme' from #{TAILWIND_CONFIG_PATH}"
+ gsub_file TAILWIND_CONFIG_PATH.to_s, /^(.*defaultTheme)/, "// \\1"
+end
+
+if POSTCSS_CONFIG_PATH.exist?
+ say "Moving PostCSS configuration to application root directory"
+ copy_file POSTCSS_CONFIG_PATH, Rails.root.join("postcss.config.js")
+ remove_file POSTCSS_CONFIG_PATH
+end
+
+if APPLICATION_LAYOUT_PATH.exist?
+ if File.read(APPLICATION_LAYOUT_PATH).match?(/"inter-font"/)
+ say "Strip Inter font CSS from application layout"
+ gsub_file APPLICATION_LAYOUT_PATH.to_s, %r{, "inter-font"}, ""
+ else
+ say "Inter font CSS not detected.", :green
+ end
+
+ if File.read(APPLICATION_LAYOUT_PATH).match?(/stylesheet_link_tag :app/) &&
+ File.read(APPLICATION_LAYOUT_PATH).match?(/stylesheet_link_tag "tailwind"/)
+ say "Remove unnecessary stylesheet_link_tag from application layout"
+ gsub_file APPLICATION_LAYOUT_PATH.to_s, %r{^\s*<%= stylesheet_link_tag "tailwind".*%>$}, ""
+ end
+else
+ say "Default application.html.erb is missing!", :red
+ say %( Please check your layouts and remove any "inter-font" stylesheet links.)
+end
+
+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")
+ say "Running the upstream Tailwind CSS upgrader"
+ command = Shellwords.join(["npx", "@tailwindcss/upgrade@next", "--force", "--config", TAILWIND_CONFIG_PATH.to_s])
+ success = run(command, abort_on_failure: false)
+ unless success
+ say "The upgrade tool failed!", :red
+ say %( You probably need to update your configuration. Please read the error messages,)
+ say %( and check the Tailwind CSS upgrade guide at https://tailwindcss.com/docs/upgrade-guide.)
+ abort
+ end
+else
+ say "Could not run the Tailwind upgrade tool. Please see https://tailwindcss.com/docs/upgrade-guide for manual instructions.", :red
+ abort
+end
+
+say "Compile initial Tailwind build"
+run "rails tailwindcss:build"
diff --git a/lib/puma/plugin/tailwindcss.rb b/lib/puma/plugin/tailwindcss.rb
index e614d62a..4624d7e8 100644
--- a/lib/puma/plugin/tailwindcss.rb
+++ b/lib/puma/plugin/tailwindcss.rb
@@ -1,4 +1,5 @@
require "puma/plugin"
+require "tailwindcss/commands"
Puma::Plugin.create do
attr_reader :puma_pid, :tailwind_pid, :log_writer
@@ -11,8 +12,11 @@ def start(launcher)
# Using IO.popen(command, 'r+') will avoid watch_command read from $stdin.
# If we use system(*command) instead, IRB and Debug can't read from $stdin
# correctly bacause some keystrokes will be taken by watch_command.
- IO.popen(Tailwindcss::Commands.watch_command, 'r+') do |io|
- IO.copy_stream(io, $stdout)
+ begin
+ IO.popen(Tailwindcss::Commands.watch_command, 'r+') do |io|
+ IO.copy_stream(io, $stdout)
+ end
+ rescue Interrupt
end
end
diff --git a/lib/tailwindcss/commands.rb b/lib/tailwindcss/commands.rb
index 26c5178a..bef42fd2 100644
--- a/lib/tailwindcss/commands.rb
+++ b/lib/tailwindcss/commands.rb
@@ -4,16 +4,18 @@ module Tailwindcss
module Commands
class << self
def compile_command(debug: false, **kwargs)
+ debug = ENV["TAILWINDCSS_DEBUG"].present? if ENV.key?("TAILWINDCSS_DEBUG")
+ rails_root = defined?(Rails) ? Rails.root : Pathname.new(Dir.pwd)
+
command = [
Tailwindcss::Ruby.executable(**kwargs),
- "-i", Rails.root.join("app/assets/stylesheets/application.tailwind.css").to_s,
- "-o", Rails.root.join("app/assets/builds/tailwind.css").to_s,
- "-c", Rails.root.join("config/tailwind.config.js").to_s,
+ "-i", rails_root.join("app/assets/tailwind/application.css").to_s,
+ "-o", rails_root.join("app/assets/builds/tailwind.css").to_s,
]
command << "--minify" unless (debug || rails_css_compressor?)
- postcss_path = Rails.root.join("config/postcss.config.js")
+ postcss_path = rails_root.join("postcss.config.js")
command += ["--postcss", postcss_path.to_s] if File.exist?(postcss_path)
command
diff --git a/lib/tailwindcss/engine.rb b/lib/tailwindcss/engine.rb
index 4b9b9fdc..7b88c5f1 100644
--- a/lib/tailwindcss/engine.rb
+++ b/lib/tailwindcss/engine.rb
@@ -2,14 +2,16 @@
module Tailwindcss
class Engine < ::Rails::Engine
- initializer "tailwindcss.assets" do
- Rails.application.config.assets.precompile += %w( inter-font.css )
- end
-
initializer "tailwindcss.disable_generator_stylesheets" do
Rails.application.config.generators.stylesheets = false
end
+ initializer "tailwindcss.exclude_asset_path", before: "propshaft.append_assets_path" do
+ if Rails.application.config.assets.excluded_paths # the app may not be using Propshaft
+ Rails.application.config.assets.excluded_paths << Rails.root.join("app/assets/tailwind")
+ end
+ end
+
config.app_generators do |g|
g.template_engine :tailwindcss
end
diff --git a/lib/tailwindcss/version.rb b/lib/tailwindcss/version.rb
index 2bc244fc..a172caa0 100644
--- a/lib/tailwindcss/version.rb
+++ b/lib/tailwindcss/version.rb
@@ -1,3 +1,3 @@
module Tailwindcss
- VERSION = "3.0.0"
+ VERSION = "4.2.0"
end
diff --git a/lib/tasks/install.rake b/lib/tasks/install.rake
index 2a571cad..f94ec2a1 100644
--- a/lib/tasks/install.rake
+++ b/lib/tasks/install.rake
@@ -1,6 +1,6 @@
namespace :tailwindcss do
desc "Install Tailwind CSS into the app"
task :install do
- system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/tailwindcss.rb", __dir__)}"
+ system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/install_tailwindcss.rb", __dir__)}"
end
end
diff --git a/lib/tasks/upgrade.rake b/lib/tasks/upgrade.rake
new file mode 100644
index 00000000..05047523
--- /dev/null
+++ b/lib/tasks/upgrade.rake
@@ -0,0 +1,6 @@
+namespace :tailwindcss do
+ desc "Upgrade app from Tailwind CSS v3 to v4"
+ task :upgrade do
+ system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/upgrade_tailwindcss.rb", __dir__)}"
+ end
+end
diff --git a/tailwindcss-rails.gemspec b/tailwindcss-rails.gemspec
index 8d893029..45c19c28 100644
--- a/tailwindcss-rails.gemspec
+++ b/tailwindcss-rails.gemspec
@@ -19,5 +19,19 @@ Gem::Specification.new do |spec|
spec.files = Dir["{app,lib}/**/*", "MIT-LICENSE", "Rakefile", "README.md"]
spec.add_dependency "railties", ">= 7.0.0"
- spec.add_dependency "tailwindcss-ruby"
+ spec.add_dependency "tailwindcss-ruby", "~> 4.0"
+
+ # TODO: remove this after a suitable period of time after the v4.0.0 release.
+ spec.post_install_message = <<~TEXT
+ == Upgrading to Tailwind CSS v4 ==
+
+ If you are upgrading to tailwindcss-rails 4.x, please read the upgrade guide at:
+
+ https://github.com/rails/tailwindcss-rails/blob/main/README.md#upgrading-your-application-from-tailwind-v3-to-v4
+
+ If you're not ready to upgrade yet, please pin to version 3 in your Gemfile:
+
+ gem "tailwindcss-rails", "~> 3.3.1"
+
+ TEXT
end
diff --git a/test/integration/user_journey_test.sh b/test/integration/user_install_test.sh
similarity index 60%
rename from test/integration/user_journey_test.sh
rename to test/integration/user_install_test.sh
index 00818f2d..6f4ca301 100755
--- a/test/integration/user_journey_test.sh
+++ b/test/integration/user_install_test.sh
@@ -7,9 +7,10 @@ set -eux
# set up dependencies
rm -f Gemfile.lock
-bundle remove actionmailer
+bundle remove actionmailer || true
+bundle remove rails || true
bundle add rails --skip-install ${RAILSOPTS:-}
-bundle install
+bundle install --prefer-local
# do our work a directory with spaces in the name (#176, #184)
rm -rf "My Workspace"
@@ -18,24 +19,26 @@ pushd "My Workspace"
# create a rails app
bundle exec rails -v
-bundle exec rails new test-app --skip-bundle
-pushd test-app
+bundle exec rails new test-install --skip-bundle
+pushd test-install
# make sure to use the same version of rails (e.g., install from git source if necessary)
bundle remove rails --skip-install
bundle add rails --skip-install ${RAILSOPTS:-}
# use the tailwindcss-rails under test
-bundle add tailwindcss-rails --path="../.."
-bundle install
-bundle show --paths
+bundle add tailwindcss-rails --skip-install --path="../.."
+bundle add tailwindcss-ruby --skip-install ${TAILWINDCSSOPTS:-}
+bundle install --prefer-local
+bundle show --paths | fgrep tailwind
bundle binstubs --all
# install tailwindcss
bin/rails tailwindcss:install
# TEST: tailwind was installed correctly
-grep -q tailwind app/views/layouts/application.html.erb
+grep -q "
> Rakefile
@@ -44,6 +47,10 @@ task :still_here do
end
EOF
+cat >> app/assets/tailwind/application.css < "Rails 8.0.0.beta" ]] ; then
@@ -54,4 +61,13 @@ fi
# TEST: presence of the generated file
bin/rails generate scaffold post title:string body:text published:boolean
-grep -q "Show this post" app/views/posts/index.html.erb
+grep -q "Show" app/views/posts/index.html.erb
+
+# TEST: contents of the css file
+bin/rails tailwindcss:build[verbose]
+grep -q "py-2" app/assets/builds/tailwind.css
+
+# TEST: contents include application.css directives
+grep -q "#abc12399" app/assets/builds/tailwind.css
+
+echo "OK"
diff --git a/test/integration/user_upgrade_test.sh b/test/integration/user_upgrade_test.sh
new file mode 100755
index 00000000..d6017efc
--- /dev/null
+++ b/test/integration/user_upgrade_test.sh
@@ -0,0 +1,90 @@
+#! /usr/bin/env bash
+# reproduce the documented user journey for installing and running tailwindcss-rails
+# this is run in the CI pipeline, non-zero exit code indicates a failure
+
+set -o pipefail
+set -eux
+
+# set up dependencies
+rm -f Gemfile.lock
+bundle remove actionmailer || true
+bundle remove rails || true
+bundle add rails --skip-install ${RAILSOPTS:-}
+bundle install --prefer-local
+
+# do our work a directory with spaces in the name (#176, #184)
+rm -rf "My Workspace"
+mkdir "My Workspace"
+pushd "My Workspace"
+
+# create a rails app
+bundle exec rails -v
+bundle exec rails new test-upgrade --skip-bundle
+pushd test-upgrade
+
+# make sure to use the same version of rails (e.g., install from git source if necessary)
+bundle remove rails --skip-install
+bundle add rails --skip-install ${RAILSOPTS:-}
+
+# set up app with tailwindcss-rails v3 and tailwindcss-ruby v3
+bundle add tailwindcss-rails --skip-install --version 3.3.0
+bundle add tailwindcss-ruby --skip-install --version 3.4.17
+bundle install --prefer-local
+bundle show --paths | fgrep tailwind
+bundle binstubs --all
+
+# install tailwindcss
+bin/rails tailwindcss:install
+grep -q inter-font app/views/layouts/application.html.erb
+
+if [[ $(rails -v) > "Rails 8.0.0.beta" ]] ; then
+ # install auth templates
+ bin/rails generate authentication
+ grep -q PasswordsController app/controllers/passwords_controller.rb
+fi
+
+# install scaffold templates
+bin/rails generate scaffold post title:string body:text published:boolean
+grep -q "Show this post" app/views/posts/index.html.erb
+
+# upgrade time!
+bundle remove tailwindcss-rails --skip-install
+bundle remove tailwindcss-ruby --skip-install
+
+bundle add tailwindcss-rails --skip-install --path="../.."
+bundle add tailwindcss-ruby --skip-install ${TAILWINDCSSOPTS:---version 4.0.0}
+
+bundle install --prefer-local
+bundle show --paths | fgrep tailwind
+bundle binstubs --all
+
+# create a postcss file
+cat < config/postcss.config.js
+module.exports = {
+ plugins: {
+ autoprefixer: {},
+ },
+}
+EOF
+
+bin/rails tailwindcss:upgrade
+
+# TEST: removal of inter-font CSS
+if grep -q inter-font app/views/layouts/application.html.erb ; then
+ echo "FAIL: inter-font CSS not removed"
+ exit 1
+fi
+
+# TEST: moving the postcss file
+test ! -a config/postcss.config.js
+test -a postcss.config.js
+
+# TEST: moving application.tailwind.css
+test ! -a app/assets/stylesheets/application.tailwind.css
+test -a app/assets/tailwind/application.css
+
+# generate CSS
+bin/rails tailwindcss:build[verbose]
+grep -q "py-2" app/assets/builds/tailwind.css
+
+echo "OK"
diff --git a/test/lib/tailwindcss/commands_test.rb b/test/lib/tailwindcss/commands_test.rb
index a273e45e..d09481a4 100644
--- a/test/lib/tailwindcss/commands_test.rb
+++ b/test/lib/tailwindcss/commands_test.rb
@@ -10,6 +10,16 @@ def setup
end
test ".compile_command" do
+ Rails.stub(:root, File) do # Rails.root won't work in this test suite
+ actual = Tailwindcss::Commands.compile_command
+ assert_kind_of(Array, actual)
+ assert_equal(executable, actual.first)
+ assert_includes(actual, "-i")
+ assert_includes(actual, "-o")
+ end
+ end
+
+ test ".compile_command debug flag" do
Rails.stub(:root, File) do # Rails.root won't work in this test suite
actual = Tailwindcss::Commands.compile_command
assert_kind_of(Array, actual)
@@ -23,6 +33,32 @@ def setup
end
end
+ test ".compile_command debug environment variable" do
+ begin
+ Rails.stub(:root, File) do # Rails.root won't work in this test suite
+ ENV["TAILWINDCSS_DEBUG"] = ""
+ actual = Tailwindcss::Commands.compile_command
+ assert_kind_of(Array, actual)
+ assert_includes(actual, "--minify")
+
+ actual = Tailwindcss::Commands.compile_command(debug: true)
+ assert_kind_of(Array, actual)
+ assert_includes(actual, "--minify")
+
+ ENV["TAILWINDCSS_DEBUG"] = "any non-blank value"
+ actual = Tailwindcss::Commands.compile_command
+ assert_kind_of(Array, actual)
+ refute_includes(actual, "--minify")
+
+ actual = Tailwindcss::Commands.compile_command(debug: true)
+ assert_kind_of(Array, actual)
+ refute_includes(actual, "--minify")
+ end
+ ensure
+ ENV.delete('TAILWINDCSS_DEBUG')
+ end
+ end
+
test ".compile_command when Rails compression is on" do
Rails.stub(:root, File) do # Rails.root won't work in this test suite
Tailwindcss::Commands.stub(:rails_css_compressor?, true) do
@@ -47,8 +83,7 @@ def setup
assert_equal(executable, actual.first)
refute_includes(actual, "--postcss")
- config_file = Rails.root.join("config/postcss.config.js")
- FileUtils.mkdir_p(Rails.root.join("config"))
+ config_file = Rails.root.join("postcss.config.js")
FileUtils.touch(config_file)
actual = Tailwindcss::Commands.compile_command
assert_kind_of(Array, actual)