diff --git a/.eslintrc.json b/.eslintrc.json
index a59dd2a3093..d49769ebf66 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,10 +1,12 @@
 {
   "extends": "eslint:recommended",
   "ignorePatterns": [
+    "*tailwind.config.js",
     "**/spec",
     "**/vendor",
     "**/node_modules",
     "sandbox",
+    "coverage",
     "core/doc",
     "tmp"
   ],
diff --git a/.gitignore b/.gitignore
index 6ddd5bb46d6..9af8c03be0d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,3 +31,4 @@ node_modules
 yarn.lock
 package-lock.json
 .env
+/admin/app/assets/builds
diff --git a/.rubocop.yml b/.rubocop.yml
index fcba6ffedbc..1d351c842af 100644
--- a/.rubocop.yml
+++ b/.rubocop.yml
@@ -345,3 +345,8 @@ Lint/MissingSuper:
 Rails/FindEach:
   Exclude:
     - 'db/migrate/**/*'
+
+# Since we're writing library code we can't assume that
+# tasks should load the rails environment loaded.
+Rails/RakeEnvironment:
+  Enabled: false
diff --git a/.rubocop_todo.yml b/.rubocop_todo.yml
index 9eb52acaab2..a581319b805 100644
--- a/.rubocop_todo.yml
+++ b/.rubocop_todo.yml
@@ -459,16 +459,6 @@ Rails/Present:
     - "core/lib/spree/core/search/base.rb"
     - "core/spec/models/spree/stock/availability_validator_spec.rb"
 
-# Offense count: 8
-# This cop supports unsafe autocorrection (--autocorrect-all).
-# Configuration parameters: Include.
-# Include: **/Rakefile, **/*.rake
-Rails/RakeEnvironment:
-  Exclude:
-    - "Rakefile"
-    - "backend/Rakefile"
-    - "core/Rakefile"
-
 # Offense count: 8
 # This cop supports safe autocorrection (--autocorrect).
 Rails/RedundantForeignKey:
diff --git a/Gemfile b/Gemfile
index b2856d6deed..fda2572d05c 100644
--- a/Gemfile
+++ b/Gemfile
@@ -54,6 +54,7 @@ end
 
 group :admin do
   gem 'solidus_admin', path: 'admin', require: false
+  gem 'tailwindcss-rails', '~> 2.0', require: false
   gem 'axe-core-rspec', '~> 4.7', require: false
   gem 'axe-core-capybara', '~> 4.7', require: false
 end
diff --git a/Procfile.dev b/Procfile.dev
index 9abbe4a07eb..3b9a7bf140a 100644
--- a/Procfile.dev
+++ b/Procfile.dev
@@ -1,2 +1,2 @@
 web: env RUBY_DEBUG_OPEN=true bin/rails server
-admin_tailwind: bin/rails solidus_admin:tailwindcss:watch
+admin_tailwind: bundle exec rake -C admin tailwindcss:watch
diff --git a/admin/Rakefile b/admin/Rakefile
index e4170fed801..9217d0c961b 100644
--- a/admin/Rakefile
+++ b/admin/Rakefile
@@ -7,6 +7,32 @@ require 'rspec/core/rake_task'
 require 'spree/testing_support/dummy_app/rake_tasks'
 require 'bundler/gem_tasks'
 
+namespace :tailwindcss do
+  tailwindcss_command = [
+    "tailwindcss",
+    "--content",
+    "#{__dir__}/{app/helpers,app/views,app/components,app/assets/javascripts,spec/components/previews}/**/*",
+    "--config",
+    "#{__dir__}/config/tailwind.config.js",
+    "--input",
+    "#{__dir__}/app/assets/stylesheets/solidus_admin/application.tailwind.css",
+    "--output",
+    "#{__dir__}/app/assets/builds/solidus_admin/tailwind.css",
+  ]
+
+  desc 'Build Tailwind CSS'
+  task :build do
+    sh tailwindcss_command.shelljoin
+  end
+
+  desc 'Watch Tailwind CSS'
+  task :watch do
+    sh (tailwindcss_command + ['--watch']).shelljoin
+  end
+end
+
+task build: 'tailwindcss:build'
+
 RSpec::Core::RakeTask.new
 task default: :spec
 
diff --git a/admin/app/assets/builds/.keep b/admin/app/assets/builds/.keep
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/admin/app/assets/config/solidus_admin_manifest.js b/admin/app/assets/config/solidus_admin_manifest.js
index 6ba31a2ef0f..6a51e2c43e6 100644
--- a/admin/app/assets/config/solidus_admin_manifest.js
+++ b/admin/app/assets/config/solidus_admin_manifest.js
@@ -1,4 +1,5 @@
 //= link_tree ../images
+//= link_tree ../builds
 //= link_tree ../stylesheets .css
 //= link_tree ../../javascript .js
 //= link_tree ../../components .js
diff --git a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css b/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css
new file mode 100644
index 00000000000..d66579b8cb0
--- /dev/null
+++ b/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css
@@ -0,0 +1,4 @@
+@import url("https://rsms.me/inter/inter.css");
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb b/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb
deleted file mode 100644
index 248516b671c..00000000000
--- a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb
+++ /dev/null
@@ -1,5 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-<%= SolidusAdmin::Config.tailwind_stylesheets.map { File.read(_1) }.join("\n") %>
diff --git a/admin/app/views/layouts/solidus_admin/application.html.erb b/admin/app/views/layouts/solidus_admin/application.html.erb
index 5c01b9963e6..4fa30ebdfd8 100644
--- a/admin/app/views/layouts/solidus_admin/application.html.erb
+++ b/admin/app/views/layouts/solidus_admin/application.html.erb
@@ -8,7 +8,6 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag SolidusAdmin::Config.theme_path(session[:admin_light_theme]), media: '(prefers-color-scheme: light)', "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag SolidusAdmin::Config.theme_path(session[:admin_dark_theme]), media: '(prefers-color-scheme: dark)', "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags "solidus_admin/application", shim: false, importmap: SolidusAdmin.importmap %>
diff --git a/admin/app/views/layouts/solidus_admin/preview.html.erb b/admin/app/views/layouts/solidus_admin/preview.html.erb
index f2cc8bf6019..19e4e2f5b0f 100644
--- a/admin/app/views/layouts/solidus_admin/preview.html.erb
+++ b/admin/app/views/layouts/solidus_admin/preview.html.erb
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <%= stylesheet_link_tag "solidus_admin/application.css", "inter-font", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags "solidus_admin/application", shim: false, importmap: SolidusAdmin.importmap %>
   </head>
   <body class="p-3">
diff --git a/admin/config/solidus_admin/tailwind.config.js.erb b/admin/config/tailwind.config.js
similarity index 58%
rename from admin/config/solidus_admin/tailwind.config.js.erb
rename to admin/config/tailwind.config.js
index 81333c2eee1..8432ef2f4a7 100644
--- a/admin/config/solidus_admin/tailwind.config.js.erb
+++ b/admin/config/tailwind.config.js
@@ -1,27 +1,28 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
 const plugin = require('tailwindcss/plugin')
+const adminRoot = __dirname.replace(/\/config$/, '')
 
 module.exports = {
   content: [
-    <%= SolidusAdmin::Config.tailwind_content.map { "'#{_1}'" }.join(",\n    ") %>
+    `${adminRoot}/{app/helpers,app/views,app/components,app/assets/javascripts,spec/components/previews}/**/*`,
   ],
   theme: {
     extend: {
       aria: {
-        'current': 'current="true"',
+        current: 'current="true"',
       },
       fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
       },
       colors: {
         transparent: "transparent",
         current: "currentColor",
 
         // Primary palette
-        'solidus-red': "#ef3023",
+        "solidus-red": "#ef3023",
         black: "#222222",
         graphite: "#c7ccc7",
-        'graphite-light': "#d8dad8",
+        "graphite-light": "#d8dad8",
         sand: "#f5f3f0",
         white: "#ffffff",
 
@@ -37,10 +38,10 @@ module.exports = {
         sky: "#cbdff1",
         seafoam: "#c1e0de",
         dune: "#e6bf9b",
-        'full-black': "#000000",
+        "full-black": "#000000",
 
         // Extra colors (not part of the original palette)
-        'papaya-whip': "#f9e3d9",
+        "papaya-whip": "#f9e3d9",
 
         // UI Red
         red: {
@@ -71,45 +72,45 @@ module.exports = {
         },
       },
       borderRadius: {
-        sm: '4px',
+        sm: "4px",
       },
       backgroundImage: {
-        'arrow-right-up-line': "url('solidus_admin/arrow_right_up_line.svg')",
-        'arrow-down-s-fill-gray-700': "url('solidus_admin/arrow_down_s_fill_gray_700.svg')",
-        'arrow-down-s-fill-red-400': "url('solidus_admin/arrow_down_s_fill_red_400.svg')",
+        "arrow-right-up-line": "url('solidus_admin/arrow_right_up_line.svg')",
+        "arrow-down-s-fill-gray-700": "url('solidus_admin/arrow_down_s_fill_gray_700.svg')",
+        "arrow-down-s-fill-red-400": "url('solidus_admin/arrow_down_s_fill_red_400.svg')",
       },
       boxShadow: {
-        sm: '0px 1px 2px 0px rgba(0, 0, 0, 0.04)',
-        base: '0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.04)'
+        sm: "0px 1px 2px 0px rgba(0, 0, 0, 0.04)",
+        base: "0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.04)",
       },
     },
   },
   plugins: [
-    require('@tailwindcss/forms')({ strategy: 'class' }),
-    require('@tailwindcss/aspect-ratio'),
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/container-queries'),
+    require("@tailwindcss/forms")({ strategy: "class" }),
+    require("@tailwindcss/aspect-ratio"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/container-queries"),
     plugin(({ addVariant, addBase, addComponents, theme }) => {
       // Support the "hidden" attribute
-      addVariant('hidden', '&([hidden])')
-      addVariant('visible', '&:not([hidden])')
+      addVariant("hidden", "&([hidden])")
+      addVariant("visible", "&:not([hidden])")
 
       // Support the "search-cancel" pseudo-element
-      addVariant('search-cancel', '&::-webkit-search-cancel-button')
+      addVariant("search-cancel", "&::-webkit-search-cancel-button")
 
       // Reset the <summary> marker
       addBase({
-        'summary::-webkit-details-marker': { display: 'none' },
-        'summary::marker': { display: 'none' },
-        'summary': { listStyle: 'none' },
+        "summary::-webkit-details-marker": { display: "none" },
+        "summary::marker": { display: "none" },
+        summary: { listStyle: "none" },
       })
 
       // Add a text style for links
       addComponents({
-        '.body-link': {
-          color: theme('colors.blue'),
-          '&:hover': {
-            textDecoration: 'underline',
+        ".body-link": {
+          color: theme("colors.blue"),
+          "&:hover": {
+            textDecoration: "underline",
           },
         },
       })
diff --git a/admin/docs/customizing_tailwind.md b/admin/docs/customizing_tailwind.md
deleted file mode 100644
index d35c51fc3bf..00000000000
--- a/admin/docs/customizing_tailwind.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# Customizing tailwind
-
-Solidus Admin uses [Tailwind CSS](https://tailwindcss.com/) for styling. The
-benefit of using Tailwind is that it allows you to customize the look and feel
-of the admin without having to write any CSS. By leveraging utility classes,
-you can easily change the colors, fonts, and spacing in use.
-
-Solidus Admin sets up Tailwind in a way that allows customization. When you
-install `solidus_admin`, its compiled CSS file is generated at
-`app/assets/builds/solidus_admin/tailwind.css`. As we'll see below, there are
-different ways in which you can add your styles to it. There are a couple of
-tasks you can run to recompile the CSS file:
-
-- `bin/rails solidus_admin:tailwindcss:build` - compiles the CSS file once.
-- `bin/rails solidus_admin:tailwindcss:watch` - compiles the CSS file and
-  watches for changes.
-
-When deploying to production, the build task is automatically added as part of
-the assets precompilation process.
-
-### Adding new paths to Tailwind
-
-Tailwind generates its CSS by scanning a configured set of paths for CSS
-classes. By default, Solidus Admin will add to this list the following globs
-from your host application:
-
-- `app/components/solidus_admin/**/*.rb`
-- `app/views/solidus_admin/**/*.{erb,haml,html,slim}`
-- `app/helpers/solidus_admin/**/*.rb`
-- `app/assets/javascripts/solidus_admin/**/*.js`
-- `public/solidus_admin/*.html`
-
-If that flexibility is not enough, you can add your own paths by appending the
-`SolidusAdmin::Config.tailwind_content` setting:
-
-```ruby
-# config/initializers/solidus_admin.rb
-SolidusAdmin::Config.tailwind_content << Rails.root.join("app/my/custom/path/**/*.rb")
-```
-
-> ⚠ Remember to re-run the `build` or `watch` tasks after changing this setting.
-
-### Adding custom CSS
-
-If you need advanced Tailwind customization, you can also create your own CSS
-file and append it to the Solidus Admin's default one. Be aware that's
-[considered a last-resort option](https://tailwindcss.com/docs/reusing-styles)
-according to Tailwind's philosophy, and most of the time you should be ok by
-making use of the available Tailwind classes.
-
-In case you need to do it, you can append your CSS file by pushing it to the
-`SolidusAdmin.tailwind_stylesheets` array:
-
-```ruby
-# config/initializers/solidus_admin.rb
-SolidusAdmin.tailwind_stylesheets << Rails.root.join("app/my/custom/path/my_styles.css")
-```
-
-> ⚠ Remember to re-run the `build` or `watch` tasks after changing this setting.
-
-## Acquiring full control over Tailwind configuration
-
-For very advanced use cases, it's possible to bail out of the Solidus Admin's
-managed Tailwind configuration and get a grip on it yourself. This is not
-recommended, as it will make your app more brittle to future changes in Solidus
-Admin, so do it at your own risk!
-
-There are a couple of tasks you can run for that:
-
-- `bin/rails solidus_admin:tailwindcss:override_config` - copies the default
-  Tailwind configuration file to `config/solidus_admin/tailwind.config.js.erb`.
-- `bin/rails solidus_admin:tailwindcss:override_stylesheet` - copies the
-  default Tailwind stylesheet file to
-  `app/assets/stylesheets/solidus_admin/application.tailwind.css.erb`.
-
-Notice that, unlike in a regular Tailwind setup, the config and stylesheet
-files are ERB templates. This is because they need to be able to access the
-Solidus Admin and application paths.
diff --git a/admin/docs/customizing_tailwindcss.md b/admin/docs/customizing_tailwindcss.md
new file mode 100644
index 00000000000..8cd1e0ff12e
--- /dev/null
+++ b/admin/docs/customizing_tailwindcss.md
@@ -0,0 +1,57 @@
+# Customizing TailwindCSS
+
+Solidus Admin uses [Tailwind CSS](https://tailwindcss.com/) for styling. The
+benefit of using Tailwind is that it allows you to customize the look and feel
+of the admin without having to write any CSS. By leveraging utility classes,
+you can easily change the colors, fonts, and spacing in use.
+
+Solidus Admin provides a precompiled CSS file that includes all the necessary
+Tailwind classes for the admin to work out of the box.
+
+In case you need to customize the admin's look and feel, or create custom
+components, you can do so by running Tailwind's build process in your host
+application.
+
+This process presumes that you have a working knowledge of Tailwind CSS. If you
+are not familiar with Tailwind, please refer to the [Tailwind
+documentation](https://tailwindcss.com/docs) for more information.
+
+## Setting up a local TailwindCSS build for Solidus Admin
+
+In order to customize the admin's look and feel, you'll need to set up a local
+Tailwind build. This is a two-step process:
+
+Add Tailwind configuration files to your application:
+
+```shell
+bin/rails solidus_admin:tailwindcss:install
+```
+
+This will create all the necessary files for you to customize TailwindCSS,
+including:
+- A `config/solidus_admin/tailwind.config.js` configuration file
+  that will automatically import the Solidus Admin's default configuration.
+- An `app/assets/stylesheets/solidus_admin/application.tailwind.css` file
+  in which you can add your own customizations.
+- Tasks to build the CSS file once or watch for changes and automatically
+  rebuild the target `app/assets/builds/solidus_admin/application.css` file.
+
+In order to manually build the CSS file, run:
+
+```shell
+bin/rails solidus_admin:tailwindcss:build
+```
+
+Or, to watch for changes and automatically rebuild the CSS file, run:
+
+```shell
+bin/rails solidus_admin:tailwindcss:watch
+```
+
+## Caveats
+
+### Conflict with sassc-rails
+
+Tailwind uses modern CSS features that are not recognized by the sassc-rails extension that was included by default in the Gemfile for Rails 6. In order to avoid any errors like SassC::SyntaxError, you must remove that gem from your Gemfile.
+
+*See https://github.com/rails/tailwindcss-rails#conflict-with-sassc-rails.*
diff --git a/admin/lib/generators/solidus_admin/install/install_generator.rb b/admin/lib/generators/solidus_admin/install/install_generator.rb
index c0f6d720642..305ef8eac2e 100644
--- a/admin/lib/generators/solidus_admin/install/install_generator.rb
+++ b/admin/lib/generators/solidus_admin/install/install_generator.rb
@@ -4,6 +4,7 @@ module SolidusAdmin
   module Generators
     class InstallGenerator < Rails::Generators::Base
       class_option :lookbook, type: :boolean, default: !!ENV['SOLIDUS_ADMIN_LOOKBOOK'], desc: 'Install Lookbook for component previews'
+      class_option :tailwind, type: :boolean, default: false, desc: 'Install TailwindCSS for custom components'
 
       source_root "#{__dir__}/templates"
 
@@ -25,7 +26,7 @@ def ignore_tailwind_build_files
       end
 
       def build_tailwind
-        rake "solidus_admin:tailwindcss:build"
+        rake "solidus_admin:tailwindcss:install" if options[:tailwind]
       end
 
       def install_lookbook
diff --git a/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb.tt b/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb.tt
index 5a376d3508e..7ae53e0de53 100644
--- a/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb.tt
+++ b/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb.tt
@@ -6,19 +6,6 @@ SolidusAdmin::Config.configure do |config|
   # It needs to be a path to an image file accessible by Sprockets.
   # config.logo_path = "my_own_logo.svg"
 
-  # Add custom paths for TailwindCSS to scan for styles. By default, it already
-  # includes the following paths:
-  # - public/solidus_admin/*.html
-  # - app/helpers/solidus_admin/**/*.rb
-  # - app/assets/javascripts/solidus_admin/**/*.js
-  # - app/views/solidus_admin/**/*.{erb,haml,html,slim}
-  # - app/components/solidus_admin/**/*.{rb,erb,haml,html,slim,js}
-  #
-  # config.tailwind_content << Rails.root.join("app/my/custom/path/**.rb")
-
-  # Append custom stylesheets to be compiled by TailwindCSS.
-  # config.tailwind_stylesheets << Rails.root.join("app/my/custom/path/style.css")
-
   # Add custom folder paths to watch for changes to trigger a cache sweep forcing a
   # regeneration of the importmap.
   # config.importmap_cache_sweepers << Rails.root.join("app/javascript/my_admin_components")
diff --git a/admin/lib/solidus_admin.rb b/admin/lib/solidus_admin.rb
index 921a105d38a..7a09f8f2911 100644
--- a/admin/lib/solidus_admin.rb
+++ b/admin/lib/solidus_admin.rb
@@ -8,7 +8,6 @@ module SolidusAdmin
   require "solidus_admin/importmap"
   require "solidus_admin/main_nav_item"
   require "solidus_admin/preview"
-  require "solidus_admin/tailwindcss"
 
   require "solidus_admin/configuration"
   require "solidus_admin/engine"
diff --git a/admin/lib/solidus_admin/configuration.rb b/admin/lib/solidus_admin/configuration.rb
index 840c0898a30..0c5f7b34f61 100644
--- a/admin/lib/solidus_admin/configuration.rb
+++ b/admin/lib/solidus_admin/configuration.rb
@@ -17,38 +17,6 @@ class Configuration < Spree::Preferences::Configuration
     # The default value is the Solidus logo that lives in the solidus_core gem.
     preference :logo_path, :string, default: "logo/solidus.svg"
 
-    # The list of paths were Tailwind CSS classes are used.
-    #
-    # You can modify this list to include your own paths:
-    #
-    #    SolidusAdmin::Config.tailwind_content << Rails.root.join("app/my/custom/path")
-    #
-    # Recompile with `bin/rails solidus_admin:tailwindcss:build` after changing this list.
-    #
-    # @see https://tailwindcss.com/docs/configuration#content
-    preference :tailwind_content, :array, default: [
-      "#{ENGINE_ROOT}/app/helpers/**/*.rb",
-      "#{ENGINE_ROOT}/app/assets/javascripts/**/*.js",
-      "#{ENGINE_ROOT}/app/views/**/*.erb",
-      "#{ENGINE_ROOT}/app/components/**/*.{rb,erb,js}",
-      "#{ENGINE_ROOT}/spec/components/previews/**/*.{erb,rb}",
-
-      Rails.root&.join("public/solidus_admin/*.html"),
-      Rails.root&.join("app/helpers/solidus_admin/**/*.rb"),
-      Rails.root&.join("app/assets/javascripts/solidus_admin/**/*.js"),
-      Rails.root&.join("app/views/solidus_admin/**/*.{erb,haml,html,slim}"),
-      Rails.root&.join("app/components/solidus_admin/**/*.{rb,erb,haml,html,slim,js}")
-    ].compact
-
-    # List of Tailwind CSS files to be combined into the final stylesheet.
-    #
-    # You can modify this list to include your own files:
-    #
-    #   SolidusAdmin::Config.tailwind_stylesheets << Rails.root.join("app/assets/stylesheets/solidus_admin/application.tailwind.css")
-    #
-    # Recompile with `bin/rails solidus_admin:tailwindcss:build` after changing this list.
-    preference :tailwind_stylesheets, :array, default: []
-
     # List of paths to watch for changes to trigger a cache sweep forcing a regeneration of the importmap.
     #
     # @see https://github.com/rails/importmap-rails#sweeping-the-cache-in-development-and-test
diff --git a/admin/lib/solidus_admin/install_tailwindcss.rb b/admin/lib/solidus_admin/install_tailwindcss.rb
new file mode 100644
index 00000000000..d6267684cf9
--- /dev/null
+++ b/admin/lib/solidus_admin/install_tailwindcss.rb
@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+# This file is a Rails app template and should be loaded with `bin/rails `.
+
+engine_root = File.expand_path("#{__dir__}/../..")
+config_path = "config/solidus_admin/tailwind.config.js"
+input_path = "app/assets/stylesheets/solidus_admin/application.tailwind.css"
+output_path = "app/assets/builds/solidus_admin/tailwind.css"
+
+unless bundle_command "show tailwindcss-rails"
+  bundle_command "add tailwindcss-rails"
+end
+
+# Copy the Tailwind CSS main file.
+create_file input_path, File.read("#{engine_root}/app/assets/stylesheets/solidus_admin/application.tailwind.css")
+
+create_file config_path, <<~JS
+  const { execSync } = require('child_process')
+  const adminRoot = execSync('bundle show solidus_admin').toString().trim()
+  const solidusAdmin = require(`${adminRoot}/config/tailwind.config.js`)
+
+  module.exports = {
+    // Read how to use TailwindCSS presets: https://tailwindcss.com/docs/presets.
+    presets: [solidusAdmin],
+
+    content: [
+      // Include paths coming from SolidusAdmin.
+      ...solidusAdmin.content,
+
+      // Include paths to your own components.
+      `${__dirname}/../../app/components/admin/**/*`,
+    ],
+  }
+JS
+
+create_file "lib/tasks/solidus_admin/tailwind.rake", <<~RUBY
+  # frozen_string_literal: true
+
+  namespace :solidus_admin do
+    namespace :tailwindcss do
+      root = Rails.root
+      tailwindcss = Tailwindcss::Commands.executable
+
+      tailwindcss_command = [
+        tailwindcss,
+        "--config", root.join(#{config_path.to_s.inspect}),
+        "--input", root.join(#{input_path.to_s.inspect}),
+        "--output", root.join(#{output_path.to_s.inspect}),
+      ]
+
+      desc 'Build Tailwind CSS'
+      task :build do
+        sh tailwindcss_command.shelljoin
+      end
+
+      desc 'Watch Tailwind CSS'
+      task :watch do
+        sh (tailwindcss_command + ['--watch']).shelljoin
+      end
+    end
+  end
+
+  # Attach Tailwind CSS build to other tasks.
+  %w[
+    assets:precompile
+    test:prepare
+    spec:prepare
+    db:test:prepare
+  ].each do |task_name|
+    next unless Rake::Task.task_defined?(task_name)
+
+    Rake::Task[task_name].enhance(['solidus_admin:tailwindcss:build'])
+  end
+RUBY
+
+append_file ".gitignore", "app/assets/builds/solidus_admin/"
+
+unless Rails.root.join("Procfile.dev").exist?
+  create_file "Procfile.dev", <<~YAML
+    web: bin/rails server
+  YAML
+end
+
+unless Rails.root.join("bin/dev").exist?
+  create_file "bin/dev", <<~SH
+    #!/usr/bin/env sh
+
+    if ! gem list foreman -i --silent; then
+      echo "Installing foreman..."
+      gem install foreman
+    fi
+
+    # Default to port 3000 if not specified
+    export PORT="${PORT:-3000}"
+
+    exec foreman start -f Procfile.dev "$@"
+  SH
+
+  run "chmod +x bin/dev"
+end
+
+append_to_file "Procfile.dev", "admin_css: bin/rails solidus_admin:tailwindcss:watch\n"
diff --git a/admin/lib/solidus_admin/tailwindcss.rb b/admin/lib/solidus_admin/tailwindcss.rb
deleted file mode 100644
index dbd8a516edd..00000000000
--- a/admin/lib/solidus_admin/tailwindcss.rb
+++ /dev/null
@@ -1,58 +0,0 @@
-# frozen_string_literal: true
-
-require "tailwindcss-rails"
-require "fileutils"
-
-module SolidusAdmin
-  # @api private
-  module Tailwindcss
-    module_function
-
-    def run(args = "")
-      config_file_path = compile_to_tempfile(
-        [config_app_path, config_engine_path].find(&:exist?),
-        "tailwind.config.js"
-      )
-      stylesheet_file_path = compile_to_tempfile(
-        [stylesheet_app_path, stylesheet_engine_path].find(&:exist?),
-        "application.tailwind.css"
-      )
-
-      system "#{::Tailwindcss::Engine.root.join('exe/tailwindcss')} \
-         -i #{stylesheet_file_path} \
-         -o #{Rails.root.join('app/assets/builds/solidus_admin/tailwind.css')} \
-         -c #{config_file_path} \
-         #{args}"
-    end
-
-    def config_app_path
-      Rails.root.join("config/solidus_admin/tailwind.config.js.erb")
-    end
-
-    def config_engine_path
-      SolidusAdmin::Engine.root.join("config/solidus_admin/tailwind.config.js.erb")
-    end
-
-    def stylesheet_app_path
-      Rails.root.join("app/assets/stylesheets/solidus_admin/application.tailwind.css.erb")
-    end
-
-    def stylesheet_engine_path
-      SolidusAdmin::Engine.root.join("app/assets/stylesheets/solidus_admin/application.tailwind.css.erb")
-    end
-
-    def compile_to_tempfile(erb_path, name)
-      Rails.root.join("tmp/solidus_admin/#{name}").tap do |file|
-        content = ERB.new(File.read(erb_path)).result
-
-        file.dirname.mkpath
-        file.write(content)
-      end
-    end
-
-    def copy_file(src, dst)
-      FileUtils.mkdir_p(File.dirname(dst))
-      FileUtils.cp(src, dst)
-    end
-  end
-end
diff --git a/admin/lib/tasks/tailwind.rake b/admin/lib/tasks/tailwind.rake
new file mode 100644
index 00000000000..f304a585c9b
--- /dev/null
+++ b/admin/lib/tasks/tailwind.rake
@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+namespace :solidus_admin do
+  namespace :tailwindcss do
+    desc 'Install Tailwind CSS on the host application'
+    task :install do
+      system "#{RbConfig.ruby} ./bin/rails app:template LOCATION='#{__dir__}/../solidus_admin/install_tailwindcss.rb'"
+    end
+  end
+end
diff --git a/admin/lib/tasks/tailwindcss.rake b/admin/lib/tasks/tailwindcss.rake
deleted file mode 100644
index 2b19ad2a95a..00000000000
--- a/admin/lib/tasks/tailwindcss.rake
+++ /dev/null
@@ -1,55 +0,0 @@
-# frozen_string_literal: true
-
-namespace :solidus_admin do
-  namespace :tailwindcss do
-    require "solidus_admin/tailwindcss"
-
-    desc "Build Solidus Admin's Tailwind's css"
-    task build: :environment do
-      SolidusAdmin::Tailwindcss.run
-    end
-
-    desc <<~DESC
-      Watch and build Solidus Admin's Tailwind css on file changes
-
-      It needs to be re-run whenever:
-
-      - `SolidusAdmin::Config.tailwind_content` is updated
-      - `SolidusAdmin::Config.tailwind_stylesheets` is updated
-      - `bin/rails solidus_admin:tailwindcss:override_config` is run
-      - `bin/rails solidus_admin:tailwindcss:override_stylesheet` is run
-      - The override files are updated
-    DESC
-    task watch: :environment do
-      SolidusAdmin::Tailwindcss.run("-w")
-    end
-
-    desc <<~DESC
-      Override Solidus Admin's Tailwindcss configuration
-
-      It copies the config file from the engine to the app, so it can be customized.
-    DESC
-    task override_config: :environment do
-      SolidusAdmin::Tailwindcss.copy_file(
-        SolidusAdmin::Tailwindcss.config_engine_path,
-        SolidusAdmin::Tailwindcss.config_app_path
-      )
-    end
-
-    desc <<~DESC
-      Override Solidus Admin's Tailwind's stylesheet
-
-      It copies the stylesheet file from the engine to the app, so it can be customized.
-    DESC
-    task override_stylesheet: :environment do
-      SolidusAdmin::Tailwindcss.copy_file(
-        SolidusAdmin::Tailwindcss.stylesheet_engine_path,
-        SolidusAdmin::Tailwindcss.stylesheet_app_path
-      )
-    end
-  end
-end
-
-if Rake::Task.task_defined?("assets:precompile")
-  Rake::Task["assets:precompile"].enhance(["solidus_admin:tailwindcss:build"])
-end
diff --git a/admin/solidus_admin.gemspec b/admin/solidus_admin.gemspec
index bb1c6c29c41..72face62ce9 100644
--- a/admin/solidus_admin.gemspec
+++ b/admin/solidus_admin.gemspec
@@ -19,7 +19,7 @@ Gem::Specification.new do |s|
 
   s.files = `git ls-files -z`.split("\x0").reject do |f|
     f.match(%r{^(spec|script)/})
-  end
+  end + ["app/assets/builds/solidus_admin/tailwind.css"]
 
   s.required_ruby_version = '>= 3.0.0'
   s.required_rubygems_version = '>= 1.8.23'
@@ -29,7 +29,6 @@ Gem::Specification.new do |s|
   s.add_dependency 'solidus_backend'
   s.add_dependency 'solidus_core', '> 4.2'
   s.add_dependency 'stimulus-rails', '~> 1.2'
-  s.add_dependency 'tailwindcss-rails', '~> 2.0'
   s.add_dependency 'turbo-rails', '~> 1.4'
   s.add_dependency 'view_component', '~> 3.3'
 end
diff --git a/admin/spec/spec_helper.rb b/admin/spec/spec_helper.rb
index 2393ca5ab55..cfb4713b543 100644
--- a/admin/spec/spec_helper.rb
+++ b/admin/spec/spec_helper.rb
@@ -41,6 +41,7 @@
 require 'webdrivers'
 Capybara.save_path = ENV['CIRCLE_ARTIFACTS'] if ENV['CIRCLE_ARTIFACTS']
 Capybara.exact = true
+Capybara.disable_animation = true
 Capybara.register_driver :selenium_chrome_headless do |app|
   browser_options = ::Selenium::WebDriver::Chrome::Options.new
   browser_options.args << '--headless'
diff --git a/core/lib/spree/testing_support/dummy_app.rb b/core/lib/spree/testing_support/dummy_app.rb
index b162d564e4d..2e089d239f4 100644
--- a/core/lib/spree/testing_support/dummy_app.rb
+++ b/core/lib/spree/testing_support/dummy_app.rb
@@ -117,6 +117,7 @@ class Application < ::Rails::Application
 
     config.assets.paths << File.expand_path('dummy_app/assets/javascripts', __dir__)
     config.assets.paths << File.expand_path('dummy_app/assets/stylesheets', __dir__)
+    config.assets.css_compressor = nil
 
     config.paths["config/database"] = File.expand_path('dummy_app/database.yml', __dir__)
     config.paths['config/routes.rb'] = File.expand_path('dummy_app/routes.rb', __dir__)