# `twust`
Twust is a powerful static checker in Rust for TailwindCSS class names at compile-time. It ensures correctness by validating class names before runtime, preventing errors and improving developer experience.
<img width="1314" alt="Screenshot 2023-10-11 at 1 40 26" src="https://github.com/Oyelowo/twust/assets/31687368/881a37be-07be-462c-9952-f4897546dbf4">
- [`twust`](#twust)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [`tw!` - Compile-time Type-Checked Tailwind Classes](#tw-compile-time-type-checked-tailwind-classes)
- [`tws!` - Compile-time Checked Array of Classes](#tws-compile-time-checked-array-of-classes)
- [`tw1!` - Single Tailwind Class Only](#tw1-single-tailwind-class-only)
- [`tws1!` - Array of Single-Class Items Only](#tws1-array-of-single-class-items-only)
- [`tailwind.config.json` Overview](#tailwindconfigjson-overview)
- [Basic Structure:](#basic-structure)
- [Statement of Problem](#statement-of-problem)
- [Solution](#solution)
- [How does this compare with Other Rust Libraries?](#how-does-this-compare-with-other-rust-libraries)
- [`tailwindcss-to-rust`](#tailwindcss-to-rust)
- [`twust`](#twust)
- [License](#license)
- [⭐ Show Some Love!](#show-some-love)
---
## Features
- **Compile-time validation** of Tailwind CSS class names. Prevents typos and invalid Tailwind class names.
- **No runtime overhead** – errors are caught at compile time.
- **Supports single and multiple class formats.**
- **Supports DaisyU under a feature flag**.
- **Configurable: Supports overriding, extending, custom classes, custom modifiers, Plugins and many more**.
- **Flexible macro-based API**.
- **Returns class names as a string or an array** for easy use in UI frameworks.
- **Works seamlessly in Rust UI frameworks like Leptos, Dioxus, Yew, and Sycamore**.
- **Lightweight and blazing fast!**
---
## Installation
```toml
[dependencies]
twust = "1.0.7"
```
Enable optional features (e.g., `daisyui` support):
```toml
[dependencies]
twust = { version = "1.0.7", features = ["daisyui"] }
```
---
## Usage
### `tw!` - Compile-time Type-Checked Tailwind Classes
```rust
use twust::tw;
let class = tw!("bg-red-500 text-lg");
assert_eq!(class, "bg-red-500 text-lg");
// You can also separate classnames by space, these will be merged
let classes_list = tw!["bg-blue-500 hover:bg-blue-700", "bg-purple", "py-sm md:py-md tablet:py-sm lg:py-lg xl:py-xl"];
assert_eq!(classes_list, "bg-blue-500 hover:bg-blue-700 bg-purple py-sm md:py-md tablet:py-sm lg:py-lg xl:py-xl")
// You can override/extend color/background color in tailwind.config.json
tw!("bg-taxvhiti bg-tahiti-500 bg-tahiti bg-midnight bg-purple bg-red-50 bg-tahiti-800 border-s-tahiti-800");
tw!("md:text-red-50 text-slate-50 text-purple text-tahiti-500");
tw!("py-sm md:py-md tablet:py-sm lg:py-lg xl:py-xl");
tw!("group");
tw!("hover:-translate-y-0.5 transition motion-reduce:hover:translate-y-0 motion-reduce:transition-none");
tw!("group/edit block invisible md:hover:bg-slate-200 group-hover/item:visible");
tw!("group-[:nth-of-type(3)_&]:block group-hover/edit:text-gray-700 group-[:nth-of-type(3)_&]:block");
tw!("scroll-m-15 group-aria-[sort=ascending]:rotate-0");
// Even scroll margin can also be configured, here we add, sm and md under the Spacing/scrollMargin field in the config file
tw!("scroll-mx-sm scroll-mx-md");
tw!("px-[-45px] px-[-45cm] px-[-45rem] px-[-45em] px-[-45%] px-[-45vh]");
tw!("m-4 last:first:invalid:last:first:p-4 last:m-4 pb-[calc(100%-34px)] pb-[23px] [mask-type:luminance]
[mask-type:luminance] hover:[mask-type:alpha] lg:[--scroll-offset:44px] oyelowo oyedayo break-after-avoid"
);
tw!("h-full border-2 border-opacity-60 rounded-lg overflow-hidden");
```
### `tws!` - Compile-time Checked Array of Classes
```rust
use twust::tws;
let class_list = tws!["bg-red-500", "text-lg", "p-4"];
assert_eq!(class_list, ["bg-red-500", "text-lg", "p-4"]);
```
### `tw1!` - Single Tailwind Class Only
```rust
use twust::tw1;
let class = tw1!("bg-red-500");
assert_eq!(class, "bg-red-500");
```
### `tws1!` - Array of Single-Class Items Only
```rust
use twust::tws1;
let class_list = tws1!["text-xl", "border", "m-4"];
assert_eq!(class_list, ["text-xl", "border", "m-4"]);
```
---
## `tailwind.config.json` Overview
### Basic Structure:
```json
{
"corePlugins": {},
"allowedLists": {
"classes": [],
"modifiers": []
},
"theme": {
"extend": {}
},
"variants": {},
"plugins": {}
}
```
---
## Statement of Problem
TailwindCSS offers developers a flexible utility-first approach to styling web applications. However, its flexibility can also lead to potential pitfalls:
- **Runtime Errors:** Invalid TailwindCSS class names can cause unexpected styling issues that are only caught during runtime.
- **Developer Experience:** Manually validating class names can be tedious and error-prone.
- **Plugin Compatibility:** Some TailwindCSS utilities extend their functionality with plugins like DaisyUI, which traditional methods might not support.
- **Increased Build Size:** Invalid class names that slip into the production code can increase the final CSS bundle size.
---
## Solution
Twust addresses these challenges by offering:
- **Compile-time Validation:** Ensures that only valid TailwindCSS class names are used, preventing errors in production.
- **Seamless Integration:** Works within Rust macros for an improved developer experience.
- **Plugin Support:** Easily integrate popular plugins like DaisyUI with feature flags.
- **Optimized Builds:** Reduces unnecessary CSS bloat.
---
## How does this compare with Other Rust Libraries?
### `tailwindcss-to-rust`
- Requires complex setup and external dependencies.
- Generates Rust code that must be maintained manually.
- Lacks full support for all Tailwind utilities.
### `twust`
- No setup required – just use the macros.
- Works in real-time at compile-time.
- Self-contained with no external dependencies.
- Supports all standard TailwindCSS class names, including responsive variants.
---
## License
Twust is licensed under MIT/Apache-2.0. See LICENSE for details.
© [Oyelowo Oyedayo](https://github.com/Oyelowo)
**Email: oyelowo.oss@gmail.com**
---
## ⭐ Show Some Love!
If you find Twust useful, give it a ⭐ on [GitHub](https://github.com/Oyelowo/twust)!