@srdante/tailui-base v1.1.0

@srdante/tailui-base

A Tailwind CSS plugin that provides a css standard colors/font sizes for headers, paragraph and body tags based on Tailwind UI style.

Installation

Install the plugin from npm:

# Using npm
npm install @srdante/tailui-base

# Using Yarn
yarn add @srdante/tailui-base

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@srdante/tailui-base'),
    // ...
  ],
}

What is added?

This plugin adds a default base CSS applied to the document and colors utilities classes.

Base

Default base style and dark style added to html elements.

• body: bg-gray-50 dark:bg-gray-700

• p, li: text-sm text-gray-500 dark:text-gray-300

• h1: text-gray-900 dark:text-white leading-6 font-semibold text-3xl

• h2: text-gray-900 dark:text-white leading-6 font-semibold text-2xl
• h3: text-gray-900 dark:text-white leading-6 font-medium text-xl
• h4: text-gray-900 dark:text-white leading-6 font-medium text-lg
• h5: text-gray-900 dark:text-white leading-6 font-medium text-base
• h6: text-gray-900 dark:text-white leading-6 font-medium text-sm

Utilities

Generated utilities classes for light and dark theme using one class.

• .bg-ground: bg-white dark:bg-gray-800

• .bg-ground-dark: bg-gray-50 dark:bg-gray-700

• .ring-shadow: ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-25

• .bg-{color}: bg-{color}-600 dark:bg-{color}-500

• .text-{color}: text-{color}-600 dark:text-{color}-500
• .link-{color}: text-{color}-600 hover:text-{color}-500 dark:text-{color}-500 dark:hover:text-{color}-400 font-medium