@scayle/tailwind-base v1.1.3

Getting Started

Visit the Add-On Developer Guide to learn more on how to use the Panel icons.

Visit the Docs to learn more about our system requirements.

What is Scayle ?

SCAYLE is a full-featured e-commerce software solution that comes with flexible APIs. Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about Scayles’s architecture and commerce modules in the Docs.

@scayle/tailwind-base

A base Tailwind preset for SCAYLE projects. It includes our core colors, fonts, and sizes along with a few plugins. Based on the SCAYLE Style Guide

Installation

npm i -S @scayle/tailwind-base

Usage

Add the following to your tailwind config:

presets: [require('@scayle/tailwind-base')]

Or if you don't want to include the default plugins:

presets: [require('@scayle/tailwind-base/core')]

Fonts

This preset uses Lato v1, Noto Sans Arabic and Noto Sans Hebrew in the default font-family, but the fonts are not bundled with this package. You must load them yourself.

e.g. Using Google Fonts

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Noto+Sans+Arabic:wght@400;700;900&family=Noto+Sans+Hebrew:wght@400;700;900&display=swap');

or

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Noto+Sans+Arabic:wght@400;700;900&family=Noto+Sans+Hebrew:wght@400;700;900&display=swap"
  rel="stylesheet"
/>

Colors

The settings defined in the preset will be merged with Tailwind's default configuration with the exception of colors and screen breakpoints.

The idea behind this is that the palette defined here should be used in most cases, and many colors in the Tailwind palette would be lost in a merge anyway because of name conflicts.

If you need to use any colors in the Tailwind palette, they can be imported from the Tailwind package.

const tailwindColors = require('tailwindcss/colors');
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-color': 'rgb(255, 0, 0)',
        ...tailwindColors,
      },
    },
  },
};

Plugins

This package includes a collection of plugins for Tailwind. Most are included by default in the preset, but they can also be used individually. Because plugins added in a preset cannot be removed, if you only want to use some plugins, use the core preset and explicitly add the plugins you want.

Base

The following plugins adjust styles in Tailwind's base layer. None of them are included in the default preset.

Base

@scayle/tailwind-base/plugins/base.js

This plugin applies some base styles to built-in elements, such as headings, a and img.

Env

@scayle/tailwind-base/plugins/env.js

The env plugin adds two custom properties to the body element: --env-color and --env-name. The values of these custom properties are determined by the panel environment.

It also adds the utility classes bg-env-color for setting the background based on the environment and color-env for the text color.

Element-Plus

@scayle/tailwind-base/plugins/element-plus.js

This plugin sets element-plus css variables based on the tailwind config. It is not included in the default preset.

Utilities

The following plugins add additional utilities to Tailwind's utilities layer.

Filter Color

Utility classes to create filter rules that apply a specific theme color. Can be used for coloring svg or transparent png icons that are loaded through an img tag.

Creates a filter-[theme-color-name] class for each theme color.

MultiColumn

@scayle/tailwind-base/plugins/multiColumn.js

This plugin adds utility classes for building a Multi-column Layout.

Column Span

Utility classes for controlling the column-span

Column Count

Utility classes for controlling the column-count

Column Rule Width

Utility classes for controlling the column-rule-width.

Column Rule Color

Utility classes for controlling the column-rule-color.

Creates a rule-[theme-color-name] class for each theme color. Additionally, it supports the arbitrary value syntax so you can add classes like rule-[#FF0000].

Column Rule Style

Utility classes for controlling the column-rule-style.

No Scrollbar

@scayle/tailwind-base/plugins/noScrollbar.js

Adds a no-scrollbar class which hides the scrollbar while still allowing scroll.

<div style="height: 50px" class="overflow-auto no-scrollbar">
  <div style="height: 75px" class="bg-yellow"></div>
  <div style="height: 75px" class="bg-blue"></div>
</div>

Reset

@scayle/tailwind-base/plugins/reset.js

Adds a few classes to explicitly reset browser styles for certain elements.

Scrollbar styles

@scayle/tailwind-base/plugins/scrollbar.js

Utilities for styling the scrollbar.

Additionally, it creates thumb-[theme-color-name] and track-[theme-color-name] classes for each theme color.

📝 You must specify both the thumb and track color. If only one is set, the default scrollbar colors will be used for both properties. CSS Scrollbars

<div
  style="height: 50px"
  class="overflow-auto track-red thumb-blue scrollbar-thin"
>
  <div style="height: 75px" class="bg-yellow"></div>
  <div style="height: 75px" class="bg-blue"></div>
</div>

These two properties also support the arbitrary value syntax.

<div
  style="height: 50px"
  class="overflow-auto track-[#FF0000] thumb-[#0000FF] scrollbar-thin"
>
  <div style="height: 75px" class="bg-yellow"></div>
  <div style="height: 75px" class="bg-blue"></div>
</div>

Components

The following plugins add styles for common CSS components to Tailwind's components layer.

Alert

@scayle/tailwind-base/plugins/alert.js

<div class="alert alert-warning">
  <span>Careful! Something bad might happen</span>
</div>

<div class="alert alert-success">
  <span>Yay! It worked</span>
</div>

By default all theme colors are supported along with arbitrary values. For example, alert-red and alert-[#FF0000].

Avatar

@scayle/tailwind-base/plugins/avatar.js

Avatars consist of an .avatar element which contains either an .avatar-image element for icons and images or .avatar-initials for text. A data-initials attribute can also be added to .avatar-image elements. The text will be displayed if the image fails to load.

<div class="avatar">
  <img
    class="avatar-image"
    src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
    data-initials="abc"
  />
</div>

<div class="avatar">
  <img class="avatar-image" data-initials="abc" src="/thisisabrokenlink.jpg" />
</div>

<div class="avatar">
    <img
        class="avatar-image bg-dark"
        :src="require('@scayle/panel-icons/img/ic-checkmark.svg')"
        data-initials="abc"
    />
</div>

<div class="avatar">
  <IconCheckmark class="avatar-image bg-dark text-dark-grey fill-current" />
</div>

<div class="avatar">
  <div class="avatar-initials">XYZ</div>
</div>

There also some size presets for avatars.

<div class="avatar avatar-xs">
  <img
    class="avatar-image"
    src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
    data-initials="abc"
  />
</div>

<div class="avatar avatar-sm">
  <img
    class="avatar-image"
    src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
    data-initials="abc"
  />
</div>

<div class="avatar avatar-md">
  <img
    class="avatar-image"
    src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
    data-initials="abc"
  />
</div>

<div class="avatar avatar-lg">
  <img
    class="avatar-image"
    src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
    data-initials="abc"
  />
</div>

<div class="avatar avatar-xl">
  <img
    class="avatar-image"
    src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
    data-initials="abc"
  />
</div>

Badge

@scayle/tailwind-base/plugins/badge.js

<div>
  <span class="badge badge-red">Item one</span>
  <span class="badge badge-green">Item two</span>
</div>

By default all theme colors are supported along with arbitrary values. For example, badge-red and badge-[#FF0000].

Bullet

@scayle/tailwind-base/plugins/bullet.js

<div class="flex flex-col">
  <span class="bullet bullet-red">Item one</span>
  <span class="bullet bullet-green">Item two</span>
</div>

By default all theme colors are supported along with arbitrary values. For example, bullet-red and bullet-[#FF0000].

Button

@scayle/tailwind-base/plugins/button.js

<div>
  <button class="btn">Click Me</button>
  <br class="my-2" />
  <button class="btn btn-primary">Click Me</button>
  <br class="my-2" />
  <button class="btn btn-primary" disabled>Click Me</button>
  <br class="my-2" />
  <button class="btn btn-link">Click Me</button>
  <br class="my-2" />
  <button class="btn btn-text text-dark-grey">Click Me</button>
  <br class="my-2" />
  <div class="btn-group">
    <button class="btn">Click Me</button>
    <button class="btn">Click Me</button>
    <button class="btn btn-primary">Click Me</button>
  </div>
  <br class="my-2" />
  <button class="btn btn-success">Click Me</button>
  <br class="my-2" />
  <button class="btn btn-warning">Click Me</button>
  <br class="my-2" />
  <button class="btn btn-danger">Click Me</button>
  <br class="my-2" />
  <button class="btn btn-outline-red">Click Me</button>
  <br class="my-2" />
  <button class="btn btn-primary btn-env-based">Click Me</button>
  <br class="my-2" />
  <button class="btn btn-icon-only"><IconSearch class="icon icon-sm" /></button>
</div>

By default all theme colors are supported along with arbitrary values. For example, btn-red, btn-[#FF0000], btn-outline-red, btn-outline-[#FF0000].

Card

@scayle/tailwind-base/plugins/card.js

<div class="card">
  <div class="card-header">
    <h5>Card Title</h5>
    <span class="count">100</span>
  </div>
  <div class="card-body">Body content here</div>
  <div class="card-footer">You can have a footer too if you want</div>
</div>

Forms & Labels

@scayle/tailwind-base/plugins/forms.js

<div class="card">
  <div class="card-body grid gap-5">
    <label class="label">
      <span class="label-text">Name</span>

      <input
        class="form-control"
        placeholder="Enter a name"
        :disabled="false"
      />
    </label>

    <label class="label">
      <span class="label-text">Read Only</span>

      <input class="form-control" value="read only value" disabled="" />
    </label>

    <label class="label">
      <span class="label-text is-required">Required Field</span>

      <input
        class="form-control"
        placeholder="Enter a value"
        :class="{ 'is-invalid': true }"
      />

      <span class="invalid-feedback"> This field is required </span>
    </label>

    <label class="label">
      <span class="label-row">
        <span class="label-text is-required">Has Badge</span>
        <span class="label-badge badge-warning">Warning</span>
      </span>

      <input class="form-control" placeholder="Enter a value" />
    </label>
  </div>
</div>

<div class="card">
  <div class="card-body form-horizontal">
    <label class="label-horizontal">
      <span class="label-horizontal-text">Name</span>

      <input
        class="form-control"
        placeholder="Enter a name"
        :disabled="false"
      />
    </label>

    <label class="label-horizontal">
      <span class="label-horizontal-text">Read Only</span>

      <input class="form-control" value="read only value" disabled="" />
    </label>

    <label class="label-horizontal">
      <span class="label-horizontal-text is-required">Required Field</span>

      <div>
        <input
          class="form-control"
          placeholder="Enter a value"
          :class="{ 'is-invalid': true }"
        />

        <span class="invalid-feedback"> This field is required </span>
      </div>
    </label>
  </div>
</div>

Icon

@scayle/tailwind-base/plugins/icon.js

The icon plugin adds classes for working with svg icons.

The icon class adds some basic styling for icons.

<IconStar class="icon"></IconStar>

Icons can be sized using width and height utilities. There are also some standard size increments we use.

<IconStar class="icon icon-lg"></IconStar>

CSS Icons

It's also possible to use pure css icons. Add the icon-bg class, plus a class icon-bg-[icon-name]. Icons are included from @scayle/panel-icons.

<div class="text-red">
  <div class="icon icon-bg icon-bg-shirt icon-xl"></div>
</div>

Colors

Icons will by default use the currentColor. You can change the color by using a text-color utility class. If you add the icon-native class they will instead use the color from the svg file.

<div class="text-red">
  <div class="icon icon-bg icon-bg-shirt icon-xl icon-native"></div>
</div>

Spinner

@scayle/tailwind-base/plugins/spinner.js

To create a spinner, add an element with the spinner class and containing some spans. Each span will be an animated dot.

<div class="spinner">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

To change the dot color, add a text color class.

<div class="spinner text-red">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

A size class can also be added to change the spinner size. It supports arbitrary values of type length.

<div class="spinner spinner-lg">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

The spinner-overlay class can be added to an element to display an opaque overlay on top. It can have rounded borders if has-rounded-border is also added. If the spinner has the is-centered class, it will be centered within the overlay.

<div class="card spinner-overlay has-rounded-border">
  <div class="spinner is-centered">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

Typography

@scayle/tailwind-base/plugins/text.js

Other channels

• LinkedIn
• Jobs
• AboutYou Tech Blog

License

Licensed under the MIT