Installation

Installing Splendid Layouts

You can install Splendid Layouts through npm.

npm install @splendidlabz/layouts

Then you can import Splendid Layouts into your project to use it.

// styles.scss
@use '@splendidlabz/layouts';

/* styles.scss */
@import '@splendidlabz/css/layouts';

<!-- index.html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splendidlabz/layouts/dist/styles.css" />

Installing Tailwind (Optional)

We recommend using Tailwind to get the most out of Splendid Layouts.

Don’t worry about Tailwind polluting your DOM with classes — that’s not going to happen. See our philosophy for reasons why. 😉

How to install Tailwind:

• If you’re using Astro, use Astro’s Tailwind integration.
• If you’re not using Astro, use Tailwind’s official docs.

Tailwind Configuration

We recommend removing Tailwind’s preflight styles because it contains an overly-aggressive CSS reset. We’ve got you covered with our own reset.

module.exports = {
  corePlugins: { preflight: false },
}

Splendid Tailwind Presets

We recommend installing our layouts preset to make layouts easier to use. You can find out more about the layouts preset in its documentation.

npm install @splendidlabz/tailwind

// tailwind.config.cjs
import { layouts } from '@splendidlabz/tailwind/presets'
module.exports = {
  // ...
  presets: [layouts],
}

Usage without Tailwind

If you don’t want to use Tailwind, you need to add our utilities to your project. This file gives you the utilities that are needed to use Splendid Layouts.

// styles.scss
@use '@splendidlabz/layouts/utilities';

/* styles.scss */
@import '@splendidlabz/layouts/css/utilities';

<!-- index.html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splendidlabz/layouts/dist/utilities.css" />