Tails.js 🎨

Welcome to Tails.js, a zero-config utility-first CSS framework. With just one script tag, you can access a wide range of utility classes, themes, and responsive design features. No build tools are required, making it easy to integrate into your projects.

Table of Contents

• Features
• Getting Started
• Usage
• Customization
• Themes
• Responsive Design
• Plugins
• Contributing
• License
• Links

Features

• Utility-First Approach: Quickly build custom designs without leaving your HTML.
• No Configuration Required: Just drop in a script tag and start using it.
• Theming Support: Easily switch between themes to fit your project.
• Responsive Design: Built-in responsive utilities for mobile-first design.
• Animation Utilities: Add animations to your elements with ease.
• Plugin System: Extend functionality with custom plugins.

Getting Started

To get started with Tails.js, simply include the following script tag in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/tails.js"></script>

This will load the framework and make all utility classes available for use.

Usage

Tails.js allows you to apply utility classes directly in your HTML. Here’s a simple example:

<div class="bg-blue-500 text-white p-4 rounded">
  Hello, Tails.js!
</div>

In this example, the classes bg-blue-500, text-white, p-4, and rounded apply background color, text color, padding, and border radius, respectively.

Customization

You can customize Tails.js to fit your needs. The framework provides a range of utility classes that you can mix and match. If you need to create your own utility classes, you can do so by adding your CSS styles in a separate stylesheet.

Example Custom Class

.custom-class {
  background-color: #ff6347; /* Tomato */
  color: white;
  padding: 20px;
}

You can then use this class in your HTML:

<div class="custom-class">
  Custom Styled Element
</div>

Themes

Tails.js comes with several built-in themes. You can switch between them easily by adding a class to your HTML element. For example:

<div class="theme-dark">
  Dark Theme Content
</div>

Adding Custom Themes

To create a custom theme, define your styles in a CSS file and include it in your project. Then, apply the custom theme class to your elements.

Responsive Design

Responsive design is straightforward with Tails.js. The framework provides responsive utility classes that allow you to control the layout at different breakpoints.

Example Responsive Classes

<div class="bg-blue-500 md:bg-red-500 lg:bg-green-500">
  Responsive Background Color
</div>

In this example, the background color changes based on the screen size.

Plugins

Tails.js supports a plugin system that allows you to extend its functionality. You can create your own plugins or use existing ones from the community.

Creating a Plugin

To create a plugin, define a JavaScript function that adds new utility classes or modifies existing ones. Here’s a simple example:

function myPlugin() {
  // Add new utility classes
}

You can then include this plugin in your project.

Contributing

We welcome contributions to Tails.js! If you want to help, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes.
4. Submit a pull request.

Please ensure that your code follows our coding standards and includes tests where applicable.

License

Tails.js is open-source software licensed under the MIT License. You can use, modify, and distribute it freely, but please include the original license in any distributed copies.

Links

For the latest updates and releases, visit our Releases section. Here, you can find the latest version of Tails.js to download and execute in your projects.

To learn more about Tails.js, check the documentation for comprehensive guides and examples.

---

Feel free to reach out if you have any questions or need further assistance. Enjoy building with Tails.js!