Installation

Since Storefront UI is designed to fit seamlessly into your Tailwind CSS workflow, there will be different installation steps depending on your environment.

Playground

You can try out Storefront UI in your browser with our online playground.

Stackblitz playground

Vite + Vue 3

Create Your Vite Project

If you are creating a new project with Vite, you can use the create-vite command to get started.

# npm 6.x
npm create vite@latest my-vue-app --template vue-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue-ts

# yarn
yarn create vite my-vue-app --template vue-ts

# pnpm
pnpm create vite my-vue-app --template vue-ts

Install Tailwind and Storefront UI Dependencies

Next, you'll need to install Tailwind CSS and PostCSS, as well as the Storefront UI's Vue library and Tailwind preset.

Add all sub-dependencies manually for PNPM and PostCSS

Due to issue connected to resolving @import and @plugin by PostCSS and @tailwindcss/postcss and how pnpm create packages in node_modules, you have to install all sub-dependency manually.

# npm
npm i -D tailwindcss @tailwindcss/vite @storefront-ui/vue

# yarn
yarn add -D tailwindcss @tailwindcss/vite @storefront-ui/vue

# pnpm
pnpm add -D tailwindcss @tailwindcss/vite @storefront-ui/vue

# pnpm and postcss
pnpm add -D tailwindcss @tailwindcss/vite @storefront-ui/vue @storefront-ui/shared @storefront-ui/tailwind-config @tailwindcss/typography

Configure the Tailwind Vite plugin

Add the @tailwindcss/vite to your Vite configuration file to enable Tailwind CSS processing.

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), tailwindcss()],
})

Add Tailwind to Your CSS and Configure It

To enable Tailwind, you need to import it within your .css file. Storefront UI plugs into your Tailwind configuration to add any base styles and CSS variables. So as a final step, you just need to import the Storefront UI Tailwind preset in your .css file.

Add a path to your installed package

In order for Tailwind to properly detect the utility classes used in Storefront UI components, you need to add a path to wherever your node_modules folder is located to the content property. In the example below, we're using the default location for node_modules, but this may change if you're working in a monorepo.

// style.css
@import "tailwindcss";
@import "@storefront-ui/vue/tailwind-config";
@plugin "@storefront-ui/typography";

@source '../**/*.vue';
@source '../node_modules/@storefront-ui/vue';

You're Ready to Go!

Now, you can import Storefront UI components in your app and all the Tailwind utilities from the @storefront-ui/vue library will be available in your project.

<template>
  <SfButton class="w-full"> Hello </SfButton>
</template>

<script lang="ts" setup>
import { SfButton } from '@storefront-ui/vue';
</script>