Eli Bosley 2c62e0ad09 feat: tailwind v4 (#1522)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Streamlined Tailwind CSS integration using Vite plugin, eliminating
the need for separate Tailwind config files.
* Updated theme and color variables for improved consistency and
maintainability.

* **Style**
* Standardized spacing, sizing, and font classes across all components
using Tailwind’s default scale.
* Reduced excessive gaps, padding, and font sizes for a more compact and
cohesive UI.
* Updated gradient, border, and shadow classes to match Tailwind v4
conventions.
* Replaced custom pixel-based classes with Tailwind’s bracketed
arbitrary value syntax where needed.
* Replaced focus outline styles from `outline-none` to `outline-hidden`
for consistent focus handling.
* Updated flex shrink/grow utility classes to use newer shorthand forms.
* Converted several component templates to use self-closing tags for
cleaner markup.
  * Adjusted icon sizes and spacing for improved visual balance.

* **Chores**
* Removed legacy Tailwind/PostCSS configuration files and related
scripts.
* Updated and cleaned up package dependencies for Tailwind v4 and
related plugins.
  * Removed unused or redundant build scripts and configuration exports.
  * Updated documentation to reflect new Tailwind v4 usage.
  * Removed Prettier Tailwind plugin from formatting configurations.
* Removed Nuxt Tailwind module in favor of direct Vite plugin
integration.
  * Cleaned up ESLint config by removing Prettier integration.

* **Bug Fixes**
  * Corrected invalid or outdated Tailwind class names and syntax.
* Fixed issues with max-width and other utility classes for improved
layout consistency.

* **Tests**
* Updated test assertions to match new class names and styling
conventions.

* **Documentation**
* Revised README and internal notes to clarify Tailwind v4 adoption and
configuration changes.
* Added new development notes emphasizing Tailwind v4 usage and
documentation references.

* **UI Components**
* Enhanced BrandButton stories with detailed variant, size, and padding
showcases for better visual testing.
* Improved theme store to apply dark mode class on both `<html>` and
`<body>` elements for compatibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-07-21 09:58:02 -04:00
2025-07-21 09:58:02 -04:00
2025-05-27 07:52:25 -04:00
2025-07-21 09:58:02 -04:00
2025-07-21 09:58:02 -04:00
2025-07-21 09:58:02 -04:00
2025-05-27 07:52:25 -04:00
2025-07-21 09:58:02 -04:00
2025-07-21 09:58:02 -04:00
2025-07-21 09:58:02 -04:00
2025-07-03 10:02:34 -04:00

Contributors Forks Stargazers Issues MIT License LinkedIn


Logo

Unraid API

Monorepo for the Unraid API and Unraid Connect.
Explore the docs »

· Report Bug · Request Feature · Submit Work Intent

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Contributing
  6. License
  7. Contact
  8. Acknowledgments

About The Project

Built With

Unraid Node.js Vite Nuxt PHP

(back to top)

Getting Started

This section will guide you through the steps necessary to get the monorepo projects running and communicating with each other.

Prerequisites

Make sure the following software is installed before proceeding.

  • Bash
  • Docker (for macOS folks, Orbstack works too)
  • Node.js (v20)
  • Just (optional)
  • libvirt (macOS folks can run brew install libvirt)
  • rclone (for development)
  • An Unraid server for development

Alternative: Using Nix Flake

If you have Nix installed, you can use the provided flake to automatically set up all development dependencies:

nix develop

This will provide all the required tools (Node.js, Docker, Just, libvirt, rclone, etc.) without needing to install them manually.

SSH Key Setup

Next, create an SSH key if you haven't already. Once you have your key pair, add your public SSH key to your Unraid server:

  1. Log in to your Unraid development server.
  2. Use the navigation menu to go to 'Users'.
  3. Click on the user you logged in with (e.g. root)
  4. Paste your SSH public key into 'SSH authorized keys' and click 'Save'.

Installation

  1. Clone and enter the repo

    git clone git@github.com:unraid/api.git
    cd api
    

    If using Nix, enter the development environment:

    nix develop
    
  2. Run the monorepo setup command.

     pnpm install
    
  3. Run the build watcher to build the components and serve a local plugin file that can be installed on your Unraid server.

    pnpm build:watch
    

    Navigate to Plugins->Install and install the local plugin file that is output to the console.

Tip

View other workflows (local dev, etc.) in the Developer Workflows

(back to top)

Usage

See How to Use the API.

For more examples, please refer to the Documentation

(back to top)

Contributing

For a complete guide on contributing to the project, including our code of conduct and development process, please see our Contributing Guide. Please read this before contributing.

Developer Documentation

For more information about development workflows, repository organization, and other technical details, please refer to the developer documentation inside this repository:

Work Intent Process

Before starting development work on this project, you must submit a Work Intent and have it approved by a core developer. This helps prevent duplicate work and ensures changes align with the project's goals.

  1. Create a Work Intent

  2. Wait for Approval

    • A core developer will review your Work Intent
    • They may ask questions or suggest changes
    • Once approved, the unapproved label will be removed
  3. Begin Development

    • Only start coding after your Work Intent is approved
    • Follow the approach outlined in your approved Work Intent
    • Reference the Work Intent in your future PR

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

Top contributors

contrib.rocks image

Community

🌐 Forums
💬 Discord

(back to top)

Contact

@UnraidOfficial - contact@unraid.net

Project Link: https://github.com/unraid/api

(back to top)

Description
Unraid API / Connect / UI Monorepo
Readme 131 MiB
Languages
TypeScript 78.2%
Vue 11.9%
PHP 5.1%
Shell 1.9%
JavaScript 1.3%
Other 1.5%