Build Faster. Design Smarter. Launch Stronger.
This guide walks through how to integrate TailwindCSS into a customized BigCommerce Stencil theme. It’s designed to help ecommerce brands and developers streamline their workflow, modernize their frontend, and deliver high-impact storefront experiences.
Why BigCommerce?
BigCommerce is more than just a platform. It’s a powerful foundation for building large-scale, performance-driven storefronts that connect with users and convert with intention.
Depending on your business goals, BigCommerce offers several implementation paths:
- A fully headless setup powered by APIs and the frontend framework of your choice
- A customized theme that balances speed to market with full design control
- A ready-to-launch out-of-the-box theme from the BigCommerce theme store
This guide focuses on the second option: quickly building on the default Cornerstone theme and enhancing it with TailwindCSS to support modern development workflows.
Before You Start
This walkthrough uses the bigcommerce-tailwind-starter-base theme by TrellisCommerce. It’s a great starting point or a helpful reference for building a theme from scratch.
Key notes:
- A tw- prefix is applied to all Tailwind classes to avoid conflicts with base theme styles.
- DaisyUI is included to make UI component styling more efficient.
- The guide keeps the base styles intact. You can remove them if desired, but doing so means rebuilding core site features like the cart and checkout.
Why Tailwind?
TailwindCSS simplifies and speeds up UI development. It allows teams to work from a shared design system, reduce styling errors, and maintain consistency across pages.
With Tailwind, styles are defined centrally using a configuration file. Colors, spacing, fonts, and more can be updated in one place to match your brand. This is especially helpful when working across multiple projects or developers.
A hybrid approach often works best. Keep the existing styles as a base and layer new ones in using Tailwind. That way, uncustomized areas of the site remain functional while your team focuses on what matters most.
What You’ll Need
Make sure the following tools are installed:
- Git
- Node Version Manager (NVM)
- Node.js (version 20)
- NPM (version 9)
- BigCommerce Stencil CLI
- (Optional) DaisyUI
Tip: If you’re on Windows, use Windows Subsystem for Linux (WSL2) so you can run NVM with fewer compatibility issues.
Installing TailwindCSS in a Stencil Theme
Step 1: Install NVM
bash
CopyEdit
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash
Then update your profile file:
bash
CopyEdit
export NVM_DIR=”$([ -z “${XDG_CONFIG_HOME-}” ] && printf %s “${HOME}/.nvm” || printf %s “${XDG_CONFIG_HOME}/nvm”)”
[ -s “$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh”
Step 2: Install Node.js and NPM
bash
CopyEdit
nvm install 20
nvm use 20
Step 3: Install the Stencil CLI
Follow BigCommerce’s installation guide for your specific operating system.
Step 4: Create Stencil API Credentials
Generate and securely store your credentials from the BigCommerce admin panel.
Step 5: Clone the Starter Theme
bash
CopyEdit
git clone [email protected]:TrellisCommerce/bigcommerce-tailwind-starter-base.git
Step 6: Update the Tailwind Config
Add the following to your tailwind.config.js file to enable Just-In-Time purging:
js
CopyEdit
content: [‘./templates/**/*.html’, ‘./widgets/**/*.html’, ‘./assets/**/*.js’]
Step 7: Install Node Modules
bash
CopyEdit
npm i
Step 8: Initialize the Stencil Environment
bash
CopyEdit
stencil init –url https://yourstore.com/ –token xxxxxxx-xxxx-xxxx-xxxxxxxxxx –port 3000
Step 9: Start the Local Development Server
bash
CopyEdit
stencil start
You should now see your storefront running at localhost:3000.
Adding Tailwind to an Existing Theme
If you’re not using the starter theme and want to integrate Tailwind manually:
- Ensure NVM, Node, and NPM are installed.
- If your theme doesn’t include a package.json file, create one:
bash
CopyEdit
npm init
- Install Tailwind following the PostCSS guide.
Add the configuration file to your project root and update your base CSS file, likely linked in base.html:
html
CopyEdit
{{{stylesheet ‘/assets/css/theme.css’}}}
Optimizing Your Workflow with NPM Scripts
To streamline development, add helpful script aliases to your package.json. Here are some examples:
json
CopyEdit
“scripts”: {
“build”: “npx webpack –config webpack.prod.js”,
“buildDev”: “npx webpack –config webpack.dev.js”,
“lighthouse”: “npx lighthouse –config-path=lighthouse-config.js –quiet –output json –chrome-flags=\”–headless\” $URL | jq ‘.audits | map_values(.rawValue)'”,
“tailwind”: “npx tailwindcss -i ./assets/scss/tailwind-src.css -o ./assets/scss/tailwind.scss –watch”,
“dev”: “concurrently \”npx tailwindcss -i ./assets/scss/tailwind-src.css -o ./assets/scss/tailwind.scss –watch\” \”stencil start\””,
“test”: “npx jest”,
“stylelint”: “npx stylelint **/*.scss”,
“stylelint:fix”: “npx stylelint –fix **/*.scss”,
“prepare”: “husky install”
}
Each command supports a different piece of the development lifecycle, from compiling assets to testing and style checking.
Optional: Installing DaisyUI
DaisyUI is a component library that extends Tailwind with prebuilt UI elements. To add it:
Step 1: Install DaisyUI
bash
CopyEdit
npm i -D daisyui@latest
Step 2: Add It to Your PostCSS Configuration
js
CopyEdit
plugins: {
‘@tailwindcss/postcss’: {},
}
Step 3: Define a Theme in tailwind.config.js
js
CopyEdit
daisyui: {
themes: [
{
yourtheme: {
primary: ‘#ff0000’,
secondary: ‘#00ff00’,
accent: ‘#0000ff’,
neutral: ‘#efefef’,
info: ‘#00ffff’,
success: ‘#00ffff’,
warning: ‘#ffff00’,
error: ‘#ff0000’
},
},
],
}
Once configured, you’re ready to start using DaisyUI components in your theme.
Wrapping It Up
At this point, your BigCommerce theme is fully equipped with TailwindCSS and optionally DaisyUI. You’re set up for faster design cycles, cleaner code, and scalable component-driven development.
This isn’t just about setup. It’s about momentum. When every part of your ecommerce site is built with clarity, purpose, and speed, your brand stays ahead and your team stays empowered.
