diff --git a/admin/app/views/layouts/solidus_admin/preview.html.erb b/admin/app/views/layouts/solidus_admin/preview.html.erb
index f2cc8bf6019..055a5aaebe5 100644
--- a/admin/app/views/layouts/solidus_admin/preview.html.erb
+++ b/admin/app/views/layouts/solidus_admin/preview.html.erb
@@ -5,6 +5,7 @@
<%= javascript_importmap_tags "solidus_admin/application", shim: false, importmap: SolidusAdmin.importmap %>
+ <%= render 'layouts/solidus_admin/tailwindcss_cdn' %>
<%= yield %>
diff --git a/admin/config/importmap.rb b/admin/config/importmap.rb
index bf13fbf0bcf..9aa31c3894b 100644
--- a/admin/config/importmap.rb
+++ b/admin/config/importmap.rb
@@ -7,6 +7,18 @@
pin "stimulus-use", to: "https://ga.jspm.io/npm:stimulus-use@0.52.0/dist/index.js"
+pin "tailwindcss", to: "https://cdn.tailwindcss.com/3.3.3?plugins=typography,aspect-ratio"
+pin "@tailwindcss/aspect-ratio", to: "https://ga.jspm.io/npm:@tailwindcss/aspect-ratio@0.4.2/src/index.js"
+pin "@tailwindcss/container-queries", to: "https://ga.jspm.io/npm:@tailwindcss/container-queries@0.1.1/dist/index.js"
+pin "@tailwindcss/forms", to: "https://ga.jspm.io/npm:@tailwindcss/forms@0.5.6/src/index.js"
+pin "@tailwindcss/typography", to: "https://ga.jspm.io/npm:@tailwindcss/typography@0.5.10/src/index.js"
+
+pin "mini-svg-data-uri", to: "https://ga.jspm.io/npm:mini-svg-data-uri@1.4.4/index.js"
+pin "picocolors", to: "https://ga.jspm.io/npm:picocolors@1.0.0/picocolors.browser.js"
+pin "tailwindcss/colors", to: "https://ga.jspm.io/npm:tailwindcss@3.3.3/colors.js"
+pin "tailwindcss/defaultTheme", to: "https://ga.jspm.io/npm:tailwindcss@3.3.3/defaultTheme.js"
+pin "tailwindcss/plugin", to: "https://ga.jspm.io/npm:tailwindcss@3.3.3/plugin.js"
+
pin "solidus_admin/application", preload: true
pin "solidus_admin/utils"
pin_all_from SolidusAdmin::Engine.root.join("app/javascript/solidus_admin/controllers"), under: "solidus_admin/controllers"
diff --git a/admin/config/solidus_admin/tailwind.config.js.erb b/admin/config/solidus_admin/tailwind.config.js.erb
deleted file mode 100644
index b7cdcd6015e..00000000000
--- a/admin/config/solidus_admin/tailwind.config.js.erb
+++ /dev/null
@@ -1,96 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
-const plugin = require('tailwindcss/plugin')
-
-module.exports = {
- content: [
- <%= SolidusAdmin::Config.tailwind_content.map { "'#{_1}'" }.join(",\n ") %>
- ],
- theme: {
- extend: {
- aria: {
- 'current': 'current="true"',
- },
- fontFamily: {
- sans: ['Inter var', ...defaultTheme.fontFamily.sans],
- },
- colors: {
- transparent: "transparent",
- current: "currentColor",
-
- // Primary palette
- 'solidus-red': "#ef3023",
- black: "#222222",
- graphite: "#c7ccc7",
- 'graphite-light': "#d8dad8",
- sand: "#f5f3f0",
- white: "#ffffff",
-
- // Secondary palette
- yellow: "#fdc071",
- orange: "#f68050",
- blue: "#2554b1",
- moss: "#2d3925",
- forest: "#096756",
- midnight: "#163449",
- pink: "#f6d7e2",
- plum: "#3a0e31",
- sky: "#cbdff1",
- seafoam: "#c1e0de",
- dune: "#e6bf9b",
- 'full-black': "#000000",
-
- // Extra colors (not part of the original palette)
- 'papaya-whip': "#f9e3d9",
-
- // UI Red
- red: {
- 100: "#f8d6d3",
- 200: "#f1ada7",
- 300: "#ea8980",
- 400: "#e36054",
- 500: "#dc3728",
- 600: "#b12c20",
- 700: "#862219",
- 800: "#561610",
- 900: "#2b0b08",
- },
-
- // Grayscale
- gray: {
- 15: "#fafafa",
- 25: "#f5f5f5",
- 50: "#f0f0f0",
- 100: "#dedede",
- 200: "#cfcfcf",
- 300: "#bababa",
- 400: "#a3a3a3",
- 500: "#737373",
- 600: "#616161",
- 700: "#4a4a4a",
- 800: "#333333",
- },
- },
- borderRadius: {
- 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')",
- },
- 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)'
- },
- },
- },
- plugins: [
- require('@tailwindcss/forms')({ strategy: 'class' }),
- require('@tailwindcss/aspect-ratio'),
- require('@tailwindcss/typography'),
- require('@tailwindcss/container-queries'),
- plugin(({ addVariant }) => addVariant('hidden', '&([hidden])')),
- plugin(({ addVariant }) => addVariant('visible', '&:not([hidden])')),
- plugin(({ addVariant }) => addVariant('search-cancel', '&::-webkit-search-cancel-button')),
- ]
-}
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/lib/generators/solidus_admin/install/install_generator.rb b/admin/lib/generators/solidus_admin/install/install_generator.rb
index 83d84161c79..1fcaa17b753 100644
--- a/admin/lib/generators/solidus_admin/install/install_generator.rb
+++ b/admin/lib/generators/solidus_admin/install/install_generator.rb
@@ -20,14 +20,6 @@ def copy_initializer
copy_file "config/initializers/solidus_admin.rb"
end
- def ignore_tailwind_build_files
- append_file(".gitignore", "app/assets/builds/solidus_admin/") if File.exist?(Rails.root.join(".gitignore"))
- end
-
- def build_tailwind
- rake "solidus_admin:tailwindcss:build"
- end
-
def install_lookbook
return unless options[:lookbook]
diff --git a/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb b/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb
index 18d26fd06ec..7083cf0dd05 100644
--- a/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb
+++ b/admin/lib/generators/solidus_admin/install/templates/config/initializers/solidus_admin.rb
@@ -6,19 +6,6 @@
# 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 e2973ef9bfb..631d6d20567 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/engine.rb b/admin/lib/solidus_admin/engine.rb
index 3ad1f087b07..bd66d11e838 100644
--- a/admin/lib/solidus_admin/engine.rb
+++ b/admin/lib/solidus_admin/engine.rb
@@ -3,6 +3,7 @@
require "stimulus-rails"
require "turbo-rails"
require "view_component"
+require "tailwindcss-rails"
module SolidusAdmin
class Engine < ::Rails::Engine
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/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/bin/sandbox b/bin/sandbox
index 86878c6440b..a8a391f855b 100755
--- a/bin/sandbox
+++ b/bin/sandbox
@@ -41,7 +41,7 @@ echo "~~~> Removing the old sandbox"
rm -rf ./sandbox
echo "~~~> Creating a pristine Rails app"
-rails new sandbox \
+rails _7.0.8_ new sandbox \
--database="$RAILSDB" \
--skip-git \
--skip-keeps \
diff --git a/core/lib/spree/testing_support/dummy_app/assets/stylesheets/solidus_admin/tailwind.css b/core/lib/spree/testing_support/dummy_app/assets/stylesheets/solidus_admin/tailwind.css
deleted file mode 100644
index 1641b24ebcd..00000000000
--- a/core/lib/spree/testing_support/dummy_app/assets/stylesheets/solidus_admin/tailwind.css
+++ /dev/null
@@ -1 +0,0 @@
-/* Placeholder for compiled tailwind.css file */