### Install cargo-generate Binary Source: https://github.com/oyelowo/twust/blob/master/examples/leptos-demo/README.md This command installs the `cargo-generate` binary, a tool used for creating new Rust projects from predefined templates. It simplifies the setup of new Leptos projects. ```bash cargo install cargo-generate ``` -------------------------------- ### Install Trunk for Client-Side Rendering Source: https://github.com/oyelowo/twust/blob/master/examples/leptos-demo/README.md This command installs the `trunk` binary, a build tool for Rust Wasm applications, which is used for client-side rendering and serving the Leptos application. ```bash cargo install trunk ``` -------------------------------- ### Install Rust Nightly Toolchain Source: https://github.com/oyelowo/twust/blob/master/examples/leptos-demo/README.md This command installs the `nightly` Rust toolchain, which is often required by `cargo-leptos` for advanced features or specific dependencies. The `--allow-downgrade` flag permits installation even if a newer nightly version is already present. ```bash rustup toolchain install nightly --allow-downgrade ``` -------------------------------- ### Serve Leptos Application with Trunk Source: https://github.com/oyelowo/twust/blob/master/examples/leptos-demo/README.md This command starts a development server using `trunk`, automatically opening the application in the default web browser at the specified local address (http://127.0.0.1:8080//). ```bash trunk serve --open ``` -------------------------------- ### Install TailwindCSS using npm Source: https://github.com/oyelowo/twust/blob/master/examples/leptos-demo/README.md This command installs TailwindCSS as a development dependency using npm. It is the recommended method for integrating TailwindCSS into a project, allowing for easy updates and management. ```bash npm install -D tailwindcss ``` -------------------------------- ### Initialize WebAssembly Module for Leptos/Tailwind Source: https://github.com/oyelowo/twust/blob/master/examples/leptos-demo/dist/index.html This JavaScript snippet imports and initializes a WebAssembly module, likely for a Leptos application integrated with Tailwind CSS. It loads the main JavaScript bundle and then the associated WebAssembly binary. ```JavaScript import init from '/tailwind-csr-trunk-4ed9e9e4c35d1fac.js';init('/tailwind-csr-trunk-4ed9e9e4c35d1fac_bg.wasm'); ``` -------------------------------- ### Add Twust Dependency to Cargo.toml Source: https://github.com/oyelowo/twust/blob/master/docs/src/installation.md This TOML snippet shows how to add the `twust` crate as a dependency in your Rust project's `Cargo.toml` file. It includes both the basic dependency declaration and an example of how to enable optional features like `daisyui` by specifying them within the dependency definition. ```toml [dependencies] twust = "1.0.7" # Enable optional features like daisyui: twust = { version = "1.0.7", features = ["daisyui"] } ``` -------------------------------- ### Example Tailwind Configuration File Source: https://github.com/oyelowo/twust/blob/master/docs/src/configuration.md Demonstrates a sample `tailwind.config.json` file structure, illustrating how to extend theme colors, disable core plugins like preflight, and define custom variants for CSS properties. ```json { "theme": { "extend": { "colors": { "primary": "#ff6347", "secondary": "#4a90e2" } } }, "corePlugins": { "preflight": false }, "variants": { "backgroundColor": ["responsive", "hover", "focus"] } } ``` -------------------------------- ### Install Sass Globally using npm Source: https://github.com/oyelowo/twust/blob/master/examples/leptos-demo/README.md This command installs the `dart-sass` package globally via npm. Sass is a CSS preprocessor that `cargo-leptos` might use for styling, although it is noted as potentially optional in future versions. ```bash npm install -g sass ``` -------------------------------- ### Install twust Rust Crate Source: https://github.com/oyelowo/twust/blob/master/README.md Add `twust` to your `Cargo.toml` dependencies. Optionally enable features like `daisyui` for extended functionality. ```TOML [dependencies] twust = "1.0.7" ``` ```TOML [dependencies] twust = { version = "1.0.7", features = ["daisyui"] } ``` -------------------------------- ### Client-Side WebSocket Live Reload for Development Source: https://github.com/oyelowo/twust/blob/master/examples/leptos-demo/dist/index.html This JavaScript code establishes a WebSocket connection to a development server (likely Trunk) to enable live reloading of the browser page. It listens for 'reload' messages from the server and forces a page reload. If the connection is lost, it attempts to reconnect after a delay and reloads upon successful reconnection, assuming the server has rebuilt. ```JavaScript (function () { var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; var url = protocol + '//' + window.location.host + '/_trunk/ws'; var poll_interval = 5000; var reload_upon_connect = () => { window.setTimeout( () => { // when we successfully reconnect, we'll force a // reload (since we presumably lost connection to // trunk due to it being killed, so it will have // rebuilt on restart) var ws = new WebSocket(url); ws.onopen = () => window.location.reload(); ws.onclose = reload_upon_connect; }, poll_interval); }; var ws = new WebSocket(url); ws.onmessage = (ev) => { const msg = JSON.parse(ev.data); if (msg.reload) { window.location.reload(); } }; ws.onclose = reload_upon_connect; })() ``` -------------------------------- ### Clone the twust repository locally Source: https://github.com/oyelowo/twust/blob/master/docs/src/contributing.md Clones the twust repository from GitHub to your local machine, allowing you to start working on the project. ```Shell git clone https://github.com/oyelowo/twust.git ``` -------------------------------- ### Configure VS Code for Rust, HTML, and TailwindCSS Source: https://github.com/oyelowo/twust/blob/master/examples/leptos-demo/README.md These VS Code settings enhance the development experience for Rust projects using HTML and TailwindCSS. They enable Emmet and TailwindCSS IntelliSense for Rust files, associate `.rs` files with Rust language mode, and configure editor suggestions. ```json "emmet.includeLanguages": { "rust": "html", "*.rs": "html" }, "tailwindCSS.includeLanguages": { "rust": "html", "*.rs": "html" }, "files.associations": { "*.rs": "rust" }, "editor.quickSuggestions": { "other": "on", "comments": "on", "strings": true }, "css.validate": false, ``` -------------------------------- ### Set Rust Nightly as Default Toolchain Source: https://github.com/oyelowo/twust/blob/master/examples/leptos-demo/README.md This command configures `nightly` as the default Rust toolchain for the current environment. This ensures that subsequent `cargo` commands will use the nightly compiler unless explicitly overridden. ```bash rustup default nightly ``` -------------------------------- ### Add WebAssembly Target for Rust Source: https://github.com/oyelowo/twust/blob/master/examples/leptos-demo/README.md This command adds the `wasm32-unknown-unknown` target to the Rust toolchain, enabling the compilation of Rust code into WebAssembly. This is essential for building web applications with frameworks like Leptos. ```bash rustup target add wasm32-unknown-unknown ``` -------------------------------- ### Using Custom Tailwind Classes in Rust Source: https://github.com/oyelowo/twust/blob/master/docs/src/configuration.md Illustrates how to apply custom Tailwind CSS classes, such as those defined in `tailwind.config.json`, within a Rust application using the `tw!` macro for styling components. ```rust tw!("bg-primary text-secondary hover:bg-secondary"); ``` -------------------------------- ### Tailwind CSS Configuration File Structure Source: https://github.com/oyelowo/twust/blob/master/README.md Overview of the basic structure for `tailwind.config.json`, showing common sections like `corePlugins`, `allowedLists`, `theme`, `variants`, and `plugins` for extending Tailwind's default behavior. ```JSON { "corePlugins": {}, "allowedLists": { "classes": [], "modifiers": [] }, "theme": { "extend": {} }, "variants": {}, "plugins": {} } ``` -------------------------------- ### Enable DaisyUI Feature in Twust Source: https://github.com/oyelowo/twust/blob/master/docs/src/faq.md To use Twust with DaisyUI, you need to enable the 'daisyui' feature flag in your Cargo.toml file. This allows Twust to recognize and process DaisyUI-specific classes. ```toml twust = { version = "1.0.7", features = ["daisyui"] } ``` -------------------------------- ### Commit changes with a descriptive message Source: https://github.com/oyelowo/twust/blob/master/docs/src/contributing.md Records your modifications to the repository's history, associating them with a clear and concise message explaining the changes made. ```Shell git commit -m "Add new feature" ``` -------------------------------- ### Create a new feature branch for development Source: https://github.com/oyelowo/twust/blob/master/docs/src/contributing.md Creates and switches to a new branch dedicated to your feature or bug fix, isolating your changes from the main codebase. ```Shell git checkout -b feature-name ``` -------------------------------- ### Use `tw!` Macro for Compile-time Tailwind Classes Source: https://github.com/oyelowo/twust/blob/master/README.md The `tw!` macro validates and merges Tailwind CSS class names at compile time, returning them as a single string. It supports various Tailwind features including custom configurations, modifiers, and complex group/aria variants. ```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"); ``` -------------------------------- ### Use `tws!` Macro for Compile-time Checked Class Arrays Source: https://github.com/oyelowo/twust/blob/master/README.md The `tws!` macro validates Tailwind CSS class names at compile time and returns them as a Rust array of strings, useful for scenarios where an array of classes is preferred. ```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"]); ``` -------------------------------- ### Use `tws1!` for Array of Single Tailwind Classes Only in Rust Source: https://github.com/oyelowo/twust/blob/master/docs/src/macros.md The `tws1!` macro creates an array where each element must be a single, validated Tailwind CSS class string. This macro is useful for defining a list of individual classes, each checked for singularity. ```Rust use twust::tws1; let class_list = tws1!["text-xl", "border", "m-4"]; assert_eq!(class_list, ["text-xl", "border", "m-4"]); ``` -------------------------------- ### Use `tw!` for Type-Checked Tailwind Classes in Rust Source: https://github.com/oyelowo/twust/blob/master/docs/src/macros.md The `tw!` macro allows you to define a single string of Tailwind CSS classes. It performs type-checking to ensure the classes are valid. This macro is useful for applying multiple Tailwind classes as a single string. ```Rust use twust::tw; let class = tw!("hover:bg-green-500 text-white font-bold"); assert_eq!(class, "hover:bg-green-500 text-white font-bold"); ``` -------------------------------- ### Use `tws!` for Compile-time Checked Array of Tailwind Classes in Rust Source: https://github.com/oyelowo/twust/blob/master/docs/src/macros.md The `tws!` macro creates an array of Tailwind CSS class strings. It performs compile-time checks on the validity of each class in the array. This is useful for managing a collection of individual Tailwind classes. ```Rust use twust::tws; let class_list = tws!["border", "rounded-md", "shadow"]; assert_eq!(class_list, ["border", "rounded-md", "shadow"]); ``` -------------------------------- ### Use `tws1!` Macro for Array of Single Tailwind Classes Source: https://github.com/oyelowo/twust/blob/master/README.md The `tws1!` macro validates an array of single Tailwind CSS class names at compile time, ensuring each item is a valid standalone class. This is suitable for lists of individual classes. ```Rust use twust::tws1; let class_list = tws1!["text-xl", "border", "m-4"]; assert_eq!(class_list, ["text-xl", "border", "m-4"]); ``` -------------------------------- ### Use `tw1!` for Single Tailwind Class Only in Rust Source: https://github.com/oyelowo/twust/blob/master/docs/src/macros.md The `tw1!` macro is designed to accept and validate only a single Tailwind CSS class string. It ensures that only one class is provided, making it suitable for scenarios where a single, specific class is required. ```Rust use twust::tw1; let single_class = tw1!("flex"); assert_eq!(single_class, "flex"); ``` -------------------------------- ### Validate TailwindCSS Classes at Compile-Time with Rust `tw!` Macro Source: https://github.com/oyelowo/twust/blob/master/docs/src/README.md This Rust code snippet demonstrates the usage of the `tw!` macro from the `twust` crate. It allows developers to validate TailwindCSS class names during compilation, catching typos and invalid classes before runtime. The macro ensures the class string conforms to TailwindCSS rules and returns the validated string, preventing runtime errors. ```Rust use twust::tw; let class = tw!("bg-blue-500 text-lg hover:bg-blue-600"); assert_eq!(class, "bg-blue-500 text-lg hover:bg-blue-600"); ``` -------------------------------- ### Use `tw1!` Macro for Single Tailwind Class Validation Source: https://github.com/oyelowo/twust/blob/master/README.md The `tw1!` macro validates a single Tailwind CSS class name at compile time, ensuring it is a valid standalone class. This is useful when only one class is expected. ```Rust use twust::tw1; let class = tw1!("bg-red-500"); assert_eq!(class, "bg-red-500"); ``` -------------------------------- ### Validate an array of single TailwindCSS classes with `tws1!` macro in Rust Source: https://github.com/oyelowo/twust/blob/master/docs/src/usage.md Demonstrates the `tws1!` macro for validating an array where each element is expected to be a single TailwindCSS class. This ensures strict adherence to one class per array item, returning an array of validated single class strings. ```Rust use twust::tws1; let class_list = tws1!["bg-red-500", "text-lg", "p-4"]; assert_eq!(class_list, ["bg-red-500", "text-lg", "p-4"]); ``` -------------------------------- ### Validate multiple TailwindCSS classes with `tw!` macro in Rust Source: https://github.com/oyelowo/twust/blob/master/docs/src/usage.md Demonstrates the basic usage of the `tw!` macro to validate and concatenate multiple TailwindCSS classes at compile time. It ensures the provided string contains valid TailwindCSS classes and returns them as a single string. ```Rust use twust::tw; let class = tw!("bg-red-500 text-lg"); assert_eq!(class, "bg-red-500 text-lg"); ``` -------------------------------- ### Validate multiple TailwindCSS class strings as an array with `tws!` macro in Rust Source: https://github.com/oyelowo/twust/blob/master/docs/src/usage.md Shows how the `tws!` macro can be used to validate an array of strings, where each string may contain multiple TailwindCSS classes. The macro processes and flattens the classes into a single array of validated class strings. ```Rust use twust::tws; let class_list = tws!["bg-red-500 text-lg", "p-4 bg-blue-500"]; assert_eq!(class_list, ["bg-red-500", "text-lg", "p-4"]); ``` -------------------------------- ### Restrict to a single TailwindCSS class with `tw1!` macro in Rust Source: https://github.com/oyelowo/twust/blob/master/docs/src/usage.md Illustrates how to use the `tw1!` macro to enforce that only a single TailwindCSS class is provided and validated at compile time. This is useful for strict single-class assignments where multiple classes are not allowed. ```Rust use twust::tw1; let single_class = tw1!("bg-blue-500"); assert_eq!(single_class, "bg-blue-500"); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.