Skip to main content

Styling

EverShop supports including importing CSS files. It also support Sass or TailwindCss out of the box. This document will guide you through the process of styling your component and page.

Css file​

By default, EverShop supports importing CSS files. You can import CSS files from any component or page in your application.

import React from 'react';
import './style.scss';
warning

Note that the file extension must be .scss (NOT .css).

TailwindCss​

EverShop supports TailwindCss out of the box. The default EverShop theme uses TailwindCss for styling.

If you do not want to use TailwindCss, you create a Layout template to override the default one from the CMS module and remove the tailwind.scss file.

info

Check out the templating document to learn more about customizing the layout template.

If you override the default layout template from the cms core module, and keep using TailwindCss, you need to add the tailwind.scss file to your layout template.

tailwind.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

and then import the tailwind.scss file in your component.

Layout.js
import React from 'react';
import './tailwind.scss';

That is all. Now you can use TailwindCss in your components.

Sass​

EverShop supports Sass out of the box. You can use Sass in your components and pages.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}