Installation

Installing Splendid Layouts

First, install Splendid Styles.

npm install @splendidlabz/styles

Then, import the layouts folder into your CSS.

@import '@splendidlabz/styles/layouts';

If you use Tailwind, you can install Splendid Layouts after Tailwind. This code below is a good starting point, but we recommend removing Tailwind’s preflight styles.

@import 'tailwindcss';
@import '@splendidlabz/styles/layouts';

We use Tailwind differently

We believe in using Tailwind and CSS in a synergistic manner — leveraging the strengths of both systems — instead of littering your DOM with utility classes. We wrote about this method in detail in Unorthodox Tailwind.

Give our Tailwind version a try. You may be surprised at how effective it is.

Removing Tailwind Preflight

Tailwind contains an aggressive preflight styles that eliminates a lot of browser defaults. We don’t like that, so we recommend you remove it.

While doing this, we recommend adding the following CSS layers as well:

/* Remove this */
 @import 'tailwindcss';

/* Put this before importing Splendid Layouts */
 @layer theme, base, utilities.base, components, utilities;
 @import 'tailwindcss/theme.css' layer(theme);
 @import 'tailwindcss/utilities.css' layer(utilities);

Usage Without Tailwind

We offer a non-tailwind version of this library for non-Tailwind users. To install the non-tailwind version, use the following:

/* Include the non-tailwind version of the library */
@import '@splendidlabz/styles/layouts/non-tailwind';

/* Includes the tailwind utilities we use quite a bit */
@import '@splendidlabz/styles/layouts/utilities';