Cb-sting NPM | npm.io

cb-sting

cb-sting is a Tailwind CSS plugin that provides additional string utilities for your projects.

Installation

You can install the cb-sting plugin via npm. Make sure you have Tailwind CSS installed in your project before proceeding with the following steps.

npm install cb-sting

After installing, add the plugin to your Tailwind CSS configuration file (tailwind.config.js):

module.exports = {
  // ...
  plugins: [
    require("cb-sting"),
    // ...
  ],
};

Theming

cb-sting also supports theming for additional customization options. To use the pre-defined theme, add the following link to your HTML file:

<link rel="stylesheet" href="https://cb-design.netlify.app/sting_tokens.css" />

You can modify the theme file to suit your project's branding and color scheme. For more information on theming, please refer to the cb-sting documentation.

Usage

The cb-sting plugin extends Tailwind CSS with new string utilities. These utilities can be used directly in your HTML or within your CSS files.

Here are a few examples of how to use cb-sting utilities:

Truncate Text

The truncate utility truncates long text and adds an ellipsis when it overflows its container.

<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Capitalize Text

The capitalize utility capitalizes the first letter of each word in a string.

<span class="capitalize">hello world</span>

Uppercase Text

The uppercase utility transforms all letters in a string to uppercase.

<h1 class="uppercase">welcome to cb-sting</h1>

Styled Button

The cb-sting plugin can be used in conjunction with other Tailwind CSS classes to style components. Here's an example of a button styled using the btn and btn-primary classes:

<button class="btn btn-primary">Button</button>

Form Control

The cb-sting plugin can be utilized to style form controls as well. Here's an example of a form control with a label and an input field:

<div class="form-control">
  <label for="email" class="label">Email</label>
  <input
    type="email"
    name="email"
    id="email"
    class="input"
    placeholder="you@example.com"
  />
</div>

For more details and a full list of available utilities, please refer to the cb-sting documentation.

Feel free to customize the above template further, provide additional information, or adjust it to match your plugin's specific features and theming requirements.