Styling

Shopware Frontends templates use a utility-first styling approach based on UnoCSS. In the current layered setup, CMS rendering and design tokens are separated:

• @shopware/cms-base-layer provides CMS components and image-related Nuxt configuration
• @shopware/unocss-design-tokens-layer provides UnoCSS integration, shared design tokens, and runtime resolution for dynamic utility classes
• project-level uno.config.ts files extend the generated base config with brand-specific colors, safelists, presets, or preflights

This keeps CMS functionality independent from visual design choices and makes layered storefronts easier to extend.

Utility CSS

Unocss supports multiple CSS frameworks, including

• Tailwind CSS
• Windy CSS
• Bootstrap

This means you can use utilities like mt-10 or bg-gray-100 in all of your components along with styles like col-md-3. Note, that the Demo Store Template applies only Tailwind CSS syntax and does not mix any of the approaches.

Unocss will analyse your components and generate a CSS file that contains only the utility classes used in the implementation.

As an introduction, we recommend reading the Utility-First Fundamentals article from Tailwind CSS.

When building layouts in a utility-first manner, you should follow some fundamental rules.

Reusability

There will be cases when you would like to create a class instead of using a long list of utility classes for multiple components. In that case, consider creating a reusable component instead:

<img
  class="object-cover w-12 h-12 rounded-full border-3 border-white mr--6"
  src="https://picsum.photos/id/18/100/100"
/>
<img
  class="object-cover w-12 h-12 rounded-full border-3 border-white mr--6"
  src="https://picsum.photos/id/12/200/200"
/>
<img
  class="object-cover w-12 h-12 rounded-full border-3 border-white mr--6"
  src="https://picsum.photos/id/29/200/200"
/>

will become

<!-- ImageCircle.vue -->
<script setup>
defineProps(["imageSrc"]);
</script>

<template>
  <img
    class="object-cover w-12 h-12 rounded-full border-3 border-white mr--6"
    :src="imageSrc"
  />
</template>

<!--- ImageContainer.vue -->
<script setup>
defineProps(['images'])
</script>

<template>
    <ImageCircle v-for="image in images" :imageSrc="image">
</template>

Responsive Design

Start your layout from the smallest viewport and work your way up. There are built in prefixes for the viewport sizes:

<div class="grid md:grid-cols-2">
  <!-- some html -->
</div>

State Variants

Similar to viewport breakpoints, you can also use state variants with prefixes:

<div class="group flex justify-center">
  <input
    class="hover:shadow-xl border-2 border-indigo rounded-md p-3 shadow-md"
    type="text"
  />
</div>

Design Tokens

Shopware Frontends provides a shared set of color design tokens through the @shopware/unocss-design-tokens-layer package. See the Design Tokens page for the full reference, naming conventions, and an exportable Uno config snippet.

Use a custom CSS Framework

If you want to use a different CSS framework or fully custom styling, it's recommended to use the Blank Template as a starting point. It has no pre-installed CSS framework and you can install you own.

Remove UnoCSS from a Nuxt project

If you want to replace UnoCSS entirely, the easiest option is to start from the Blank Template. If you already use a layered Nuxt setup such as the Vue Starter Template, remove:

• @unocss/nuxt from modules
• @shopware/unocss-design-tokens-layer from extends
• the UnoCSS reset import from css
• unocss configuration from nuxt.config.ts
• your local uno.config.ts if it is no longer needed

After that, install your preferred styling solution and add its configuration normally.