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.
Nuxt 3
If you prefer video guides, we have a quick video that can help you set up Storefront UI in your Nuxt 3 project.
Install all dependencies
With Nuxt 3, the fastest way to get started is to use the @nuxtjs/tailwindcss module. The Nuxt Tailwind module (opens new window) will automatically install Tailwind CSS and PostCSS for you.
Additionally, you'll need to install the Storefront UI's Vue library and Tailwind preset.
# npm
npm i -D @nuxtjs/tailwindcss @storefront-ui/vue
# yarn
yarn add -D @nuxtjs/tailwindcss @storefront-ui/vue
# pnpm
pnpm add -D @nuxtjs/tailwindcss @storefront-ui/vue
Add the Nuxt Tailwind module to your nuxt.config.ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss']
})
Modify your tailwind.config.ts
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.ts 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.ts
import type { Config } from 'tailwindcss';
import { tailwindConfig } from '@storefront-ui/vue/tailwind-config';
export default <Config>{
presets: [tailwindConfig],
content: ['./**/*.vue', './node_modules/@storefront-ui/vue/**/*.{js,mjs}'],
};
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 type="button" class="w-full"> Hello </SfButton>
</template>
<script lang="ts" setup>
import { SfButton } from '@storefront-ui/vue';
</script>