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.

3 min readJan 5, 2022

When programming on a theme, I highly recommend using the Shopify GitHub integration. I created a step-by-step guide on how to set it up correctly.

Use Shopify Dawn Theme for Multiple Projects via GitHub Connect

How we setup our Shopify theme development with GitHub Connect.

markustripp.medium.com

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: [],
}

Please define a prefix to avoid conflicts of the CSS class names between Tailwind and Dawn. I use the prefix “x”, but feel free to use any other prefix you like.

The Dawn theme uses 2 breakpoints at 990px and 750px. To be compatible, set the screen sizes for Tailwind accordingly.

Please inherit the heading font from the Dawn layout definition to share the same fonts by using “var( — font-heading-family)”.

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 }}
...

Please ensure the app.css file (Tailwind) is loaded before the Dawn theme base.css file. Otherwise, the Tailwind resets many of Dawn’s default styles.

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>

Here, I use Dawn’s “page-width-desktop” class as outer div. This ensures the box has the same dimensions as all the other Dawn boxes. Inside I use Tailwind classes prefixed with “x” to style the elements.

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.