Extend Shopify Dawn Theme with a Custom Tailwind CSS Carousel Section

I recently used the Shopify Dawn theme for most of my new projects. It’s okay for 90% of my requirements, but I always have to create custom sections not included in the standard feature set. I prefer Tailwind for almost all of my web projects. Therefore I wanted to use it for custom sections as well. In this tutorial video, I show you how to set up Tailwind together with the Dawn theme and create a custom section.

A quick guide on how to install Tailwind to a Shopify theme

Clone the Shopify Dawn theme, and then please follow the installation instructions from the Tailwind website:

Terminal:npm install -D tailwindcss
npx tailwindcss init

Configure Tailwind

File: tailwind.config.jsmodule.exports = {
prefix: 'x',
content: [
'./layout/*.liquid',
'./templates/*.liquid',
'./templates/customers/*.liquid',
'./sections/*.liquid',
'./snippets/*.liquid',
],
theme: {
screens: {
'md': '750px',
'lg': '990px',
},
extend: {
fontFamily: {
'heading': 'var(--font-heading-family)'
},
},
},
plugins: [],
}

Add the Tailwind directives to your CSS

Create a CSS file in the assets directory.

File: assets/app-tailwind.css@tailwind base;
@tailwind components;
@tailwind utilities;

Start the Tailwind CLI build process

Run the CLI tool to scan your template files for classes and build your CSS to assets/app.css.

Terminal:npx tailwindcss -i ./assets/app-tailwind.css -o ./assets/app.css — watch

Add Tailwind to the theme layout file

File: layout/theme.liquid...
{{ 'app.css' | asset_url | stylesheet_tag }}

{{ 'base.css' | asset_url | stylesheet_tag }}
...

Use Tailwind in your sections

Now we are ready to use Tailwind in any Liquid file. A very simple section might look like this:

<div class="page-width-desktop">
<div class="xbg-red-600 xp-60 xtext-white">Hello World</div>
</div>

Conclusion

I used this setup in a couple of projects now. And it brings me the best of both worlds. I can start new projects very quickly with the default Dawn theme, and when I require customizations, I can use the familiar Tailwind framework.

Tutorial Video

In the tutorial video (https://youtu.be/TXbVJCYim-Q), I show you how to set up Tailwind together with Shopify Dawn. Then I create a simple carousel styled with Tailwind classes.

Dawn theme with Tailwind carousel I create in the tutorial video

I ❤️ Shopify & Next.js. checkout-agency.com, Founder