Custom CSS for Spree Storefront
Learn how to add custom CSS stylesheets of your Spree storefront
Spree Storefront is built on top of Tailwind CSS. After installing Spree you should find 2 new files:
- app/assets/stylesheets/application.tailwind.css - This is the main CSS file that includes all the Tailwind CSS classes and adds bare-bones styles to the storefront
- config/tailwind.config.js - This is the Tailwind CSS configuration (we recommend not changing this file, to allow for easier upgrades)
You can add or modify styles to the storefront by adding new Tailwind classes to the application.tailwind.css
but we recommend creating a new CSS file in the app/assets/stylesheets
directory and then importing it in the application.tailwind.css
file, eg.
Importing an additional CSS file
in the my_custom_styles.css
file, add the following:
and on top of the application.tailwind.css
file, add the following:
Importing a 3rd party CSS library
You can import a 3rd party CSS library directly from a CDN in the application.tailwind.css
file, eg.
CSS Variables
Spree Storefront uses a handful of CSS variables that are automatically injected into the body tag. This allows customers to change colors, fonts, etc from the admin dashboard (via page builder).
The default variables should be something like this:
They are defined in the app/views/themes/default/spree/shared/_css_variables.html.erb file which should be present in your theme.