Tailwind Package

Structural Tailwind utilities and preset CSS for BrickSlider markup.

Install

npm install @sixsrc/brick-slider @sixsrc/brick-slider-tailwind tailwindcss

Setup

Add to your main stylesheet:

@import "tailwindcss";
@import "@sixsrc/brick-slider-tailwind/preset.css";
@plugin "@sixsrc/brick-slider-tailwind";

Visual States

The Tailwind package provides the structural layer for BrickSlider, but it does not force your visual theme for active slides or active dots.

Example:

.active > .bs-content {
  @apply border border-violet-800 rounded-lg;
}

.bs-dot--active {
  @apply bg-violet-800 border border-violet-800;
}

If you are not using Tailwind, keep the same markup classes and style those states with plain CSS in your project.

Stories Progress Theme

The Stories plugin also keeps the visual progress theme in your hands.

Example:

.bs-stories-progress-item {
  @apply bg-white/20;
}

.bs-stories-progress-item--active {
  @apply bg-white/35;
}

.bs-stories-progress-item--completed {
  @apply bg-white/45;
}

.bs-stories-progress-bar {
  @apply bg-white;
}

Class Reference

Core

Stories