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.

# npm
npm i -D tailwindcss postcss autoprefixer @storefront-ui/vue

# yarn
yarn add -D tailwindcss postcss autoprefixer @storefront-ui/vue

# pnpm
pnpm add -D tailwindcss postcss autoprefixer @storefront-ui/vue

Initialize Tailwind

Running Tailwind's init command will generate a tailwind.config.js and postcss.config.js file in your project's root directory.

npx tailwindcss init -p

Modify Your Tailwind Configuration File

Storefront UI plugs into your Tailwind configuration to add any base styles and CSS variables. To do this, you need to import the Storefront UI Tailwind preset and add it to your tailwind.config.js 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.

// tailwind.config.js
import { tailwindConfig } from '@storefront-ui/vue/tailwind-config';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [tailwindConfig],
  content: ['./index.html', './**/*.vue', './node_modules/@storefront-ui/vue/**/*.{js,mjs}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind to Your CSS

Finally, you'll need to add CSS directives to add each Tailwind layer to src/style.css. Since Storefront UI fits into your Tailwind workflow, you'll need to add Tailwind's base, components, and utilities layers to your CSS.

/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

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>