Extend Shopify Dawn Theme with a Custom Tailwind CSS Carousel Section

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.

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.

Dawn theme with Tailwind carousel I create in the tutorial video

GitHub repository where you find all the sources from the video:
https://github.com/markustripp/dawn-mext-1

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why not try Wagtail Cms?

Canonical ag

How to Solve: Roblox Can’t Move (2021 Update)

Using API Management as catalyst to implement IoT infrastructure in developing countries

Big news! The calculator block has landed 💯

Bots to update Wikidata.

Chain of Responsibility Pattern

SignalR Real-Time Communication (android application)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Markus Tripp

Markus Tripp

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

More from Medium

How to build a Tailwind CSS pagination component with Flowbite

How to Install Tailwind CSS with Next.js ?

Instagram UI home clone with tailwindCSS and Nextjs (all articles)

Relational Data in Firebase Firestore