Tailwind UI is a Tailwind CSS component library designed by the authors of Tailwind CSS

Overview

Tailwind UI Backend Skin

Tailwind_UI_Plugin

Tailwind UI is a Tailwind CSS component library designed by the authors of Tailwind CSS. This is a Winter CMS plugin that provides a custom, TailwindUI-based skin for the backend.

Configuration

Configuration for this plugin is handled through a configuration file. In order to modify the configuration values and get started you can either add the values to your .env environment file or copy the plugins/winter/tailwindui/config/config.php file to config/winter/tailwindui/config.php and make your changes there.

Environment File Supported Values:

  • TAILWIND_SHOW_BREAKPOINT_DEBUGGER=false

Credits

This plugin was originally written by Joseph Blythe & Luke Towers for Spatial Media.

It has since been modified and re-released under the Winter namespace as a first party plugin for Winter CMS maintained by the Winter CMS team.

If you would like to contribute to this plugin's development, please feel free to submit issues or pull requests to the plugin's repository here: https://github.com/wintercms/wn-tailwindui-plugin

If you would like to support Winter CMS, please visit WinterCMS.com

Comments
  • Scrollbars visible on each page

    Scrollbars visible on each page

    Using @apply h-screen for the layout container, gives me scrollbars in every backend pages.
    https://github.com/wintercms/wn-tailwindui-plugin/blob/a34b50bd0273c1a6950ba147b08950e09b2ff968/assets/css/src/custom.css#L140 image

    Tested on Windows on Firefox, Edge and Chrome.

    Replacing it with height : calc(100vh - 4rem) remove the scrollbars. Need to remove layout-topmenu container's height.

    opened by damsfx 5
  • Generating

    Generating "better" brand's colors variations

    I don't think the colors generated are the best.

    With amout set in percentage as actual :

    https://github.com/wintercms/wn-tailwindui-plugin/blob/c757d8f0a2cabead86454326c1b1a715358e15fc/skins/tailwindui/layouts/_branding.php#L11-L19 image

    With amout set as integer :

    According to comments in phpColors.php, amout must be an integer. https://github.com/mexitek/phpColors/blob/e10e44f67632096072237ff0822674a442d4bb50/src/Mexitek/PHPColors/Color.php#L401-L408

    But if the base color is already dark (or light), it results in the generation of black (or white) past a certain percentage when using integer.

    $color = new Color($colorString);
    return [
        'dark' => $color->darken(20),
        'darker' => $color->darken(30),
        'darkest' => $color->darken(40),
        'light' => $color->lighten(25),
        'lighter' => $color->lighten(30),
        'lightest' => $color->lighten(35),
    ];
    

    image

    This is because the phpColors library calculates the percentage to be added based on 100% of the channel but not on the remaining percentage to reach the 0% (darker) or 100% (lighter).

    $hsl['L'] = ($hsl['L'] * 100) - $amount;
    

    The trick

    So I've slightly modified the shade generation to caclulate a percentage of luminance :

    $color = new Color($colorString);
    $luminance = $color->getHsl()['L'] * 100;
    return [
        'dark' => $color->darken($luminance * 0.20),
        'darker' => $color->darken($luminance * 0.30),
        'darkest' => $color->darken($luminance * 0.40),
        'light' => $color->lighten($luminance * 0.25),
        'lighter' => $color->lighten($luminance * 0.30),
        'lightest' => $color->lighten($luminance * 0.35),
    ];
    

    And I think it give better results : image Maybe the amounts should be finely tuned.

    Or equally spaced in the channel:

    $color = new Color($colorString);
    $luminance = $color->getHsl()['L'] * 100;
    return [
        'dark' => $color->darken(($luminance / 4) * 1),
        'darker' => $color->darken(($luminance / 4) * 2),
        'darkest' => $color->darken(($luminance / 4) * 3),
        'light' => $color->lighten((100 - $luminance) / 4 * 1),
        'lighter' => $color->lighten((100 - $luminance) / 4 * 2),
        'lightest' => $color->lighten((100 - $luminance) / 4 * 3),
    ];
    

    image

    Status: Review Needed Type: Conceptual Enhancement 
    opened by damsfx 3
  • Primary & secondary vars not available during compile time

    Primary & secondary vars not available during compile time

    The color-mod function requires the --primary & --secondary CSS vars to be present during compile time which fails under the current configuration rendering any color-mod defined colours unavailable at the moment.

    A couple of different options are available:

    • Find a way to inject variables during the compilation process and require each project using this plugin to recompile the styles for themselves
    • Perform colour modifications in PHP and inject them as root CSS variables like we're doing now with primary & secondary and then refer to those variables in the tailwind.config.js file. (This is my preferred solution).

    @joseph-sm @jaxwilko thoughts?

    Status: Completed Type: Bug 
    opened by LukeTowers 3
  • [FIX] Added fix for ml input buttons

    [FIX] Added fix for ml input buttons

    This PR disables the default button styles for .ml-btn and replaces it with a simple darken on hover.

    Original: image

    New: image New on hover: image

    It looks more obvious in practice than the screenshot suggests :)

    opened by jaxwilko 1
  • Adds sticky navigation

    Adds sticky navigation

    • Added fixed sidebar, scrollable in beside & text only modes.
    • Added sticky topnav

    Sidenav with fixed sidebar & sticky topnav

    winter-cms-tw-ui-sticky-nav

    Topnav sticky

    winter-cms-tw-ui-sticky-nav1

    Known issues

    In sidenav tile mode if there are a lot of items they will flow off screen as it is not possible to make modes with the flyout sub navigation scroll-y without cutting off the sub menu, one solution would be to implement javascript (like we did for top menus) to modify the position to allow it to pop out @see https://css-tricks.com/popping-hidden-overflow/. In most cases there aren't enough items to make this a problem at the moment.

    Status: Completed Type: Maintenance 
    opened by joseph-sm 0
  • fix(Components): Fixes backend styling issues

    fix(Components): Fixes backend styling issues

    • Sidebar is now scrollable if content is overflows on y axis

    Screen Shot 2022-11-11 at 3 19 39 pm

    • input-group-addon buttons should now align correctly with form-control

    Screen Shot 2022-11-11 at 3 07 20 pm

    • Froala default style fixes for heading, links, ordered & unordered lists

    Screen Shot 2022-11-11 at 2 22 07 pm

    • Froala checkbox controls now align with label

    Screen Shot 2022-11-11 at 2 18 03 pm

    opened by joseph-sm 0
  • Nav items under a different context

    Nav items under a different context

    If navigation gets registered under a different context then the href of the anchor does not get used. Instead, the JS that listens for the click event looks for a data attrib which is non existent. This PR will simply return if that attrib is undefined.

    The backend.css also had changes after compilation, this might have been forgotten in a previous commit.

    Status: Completed Type: Maintenance 
    opened by robertalexa 0
  • Reworks brand's colors palette

    Reworks brand's colors palette

    Redesign of the brand's color palette while waiting for a better way to do it with a library. Fix #14

    The three darker or lighter shades are evenly distributed over the luminance channel.

    Before :
    image

    After :
    image

    Status: Completed Type: Enhancement 
    opened by damsfx 0
  • Fixes for media manager insert/crop and buttons

    Fixes for media manager insert/crop and buttons

    This commit aims to fix an issue with the Crop and Insert feature of the media manager. Also, it fixes some of the issues with borders for grouped buttons. While here I have gitinored some IDE path - hope this is not an issue.

    For the sake of UI, I have created a separate PR https://github.com/wintercms/winter/pull/673 that increases the width of the input fields as the value was being cut off, especially with large numbers.

    Preview: image

    opened by robertalexa 0
  • Adds dark mode

    Adds dark mode

    This adds a fully working dark mode with a dark mode toggle button in the account drop down menu and user preferences form. The dark mode settings is stored in backend user preferences.

    This PR also updates to tailwind 3.2

    CSS for setting dark mode was taken from https://github.com/WebVPF/wn-darkbackend-plugin

    opened by der-On 0
  • Sticky navigation overflow bug

    Sticky navigation overflow bug

    The #20 PR introduces a display bug for me.
    The sidenav layout overflow the content layout : image

    @joseph-sm can you test it with the default WinterCMS logo?

    opened by damsfx 0
  • updates to tailwind 3.2 + adds missing dark mode colors

    updates to tailwind 3.2 + adds missing dark mode colors

    This updates tailwind to version 3.2 and adds some missing dark mode colors that work well with the dark backend plugin.

    Note:

    had to rename the class collapse to collapsible in the side menu as collapse is already used by tailwindcss https://tailwindcss.com/docs/visibility#collapsing-elements

    Status: Response Needed Type: Conceptual Enhancement 
    opened by der-On 4
  • class='icon-pencil' is broken

    class='icon-pencil' is broken

    A backend button with class icon-pencil doesn't render the icon, it renders a square with a cross in it image

    <button
        class="btn btn-primary icon-pencil"
        data-request="<?= $this->getEventHandler('onEdit'); ?>"
        data-request-data="id: <?= $id; ?>"
        title="Edit">
    </button>
    
    Status: Review Needed Type: Unconfirmed Bug 
    opened by AIC-BV 5
  • [WIP] Added tailwind:plugin command

    [WIP] Added tailwind:plugin command

    This is a POC for allowing plugin vendors to compile css patches used to include their required tailwind css as a seperate file.

    The idea being users should not have to recompile the Winter.TailwindUI package to add addtional tailwind css rules for custom plugins, but instead should be able to use the plugin to compile an additional backend.css file specific for their plugin.

    Usage:

    The target plugin must implement a tailwind.config.js file, however this can be an import of the original. For example:

    const config = require('../../winter/tailwindui/tailwind.config.js');
    
    config.content.push('./controllers/example/assets/src/**/*.{vue,htm}');
    
    module.exports = config;
    

    Then run the following:

    ./artisan tailwind:plugin author.plugin (I also added support for passing webpack args to mix:compile) ./artisan tailwind:plugin author.plugin -- --stats-children

    And a file will be created: author/plugin/assets/dist/css/backend.css which will only include the additional tailwind css rules added by their config extension.

    Improvements:

    This POC is implmented using some file hackery, it would be better to extend our mix support so we can inject custom mix configurations, allowing us to configure the tailwind config path. I attempted to do this using the postcss.config.js approach but it didn't seem to work properly.

    If we did add the above override we could also dynamically rewrite output instructions, allowing us to not have to move the tailwindui plugin's backend.css file around.

    Adding support for watch would also be very nice.

    Any thoughts very welcome :)

    Status: Testing Needed Type: Enhancement 
    opened by jaxwilko 7
Owner
Winter CMS
Free, open-source, self-hosted, community-driven CMS platform based on the Laravel PHP Framework
Winter CMS
EasyRdf is a PHP library designed to make it easy to consume and produce RDF.

EasyRdf EasyRdf is a PHP library designed to make it easy to consume and produce RDF. It was designed for use in mixed teams of experienced and inexpe

EasyRdf 578 Dec 23, 2022
Sample Web Application in Laravel with tailwind css

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Mulindwa Denis 1 Nov 26, 2021
A Simple MVC PHP Framework, integrated with lot of features such as Session, Cookies, Migrations, Database, Factories, Seeding, Bootstrap and Tailwind CSS

Navite A Simple MVC PHP Framework, integrated with lot of features such as Session, Cookies, Migrations, Database, Factories, Seeding, Bootstrap and T

Celionatti 2 Aug 22, 2022
A status monitor for Elite Dangerous, written in PHP. Designed for 1080p screens in the four-panel-view in panel.php, and for 7 inch screens with a resolution of 1024x600 connected to a Raspberry Pi.

EDStatusPanel A status monitor for Elite Dangerous, written in PHP. Designed for 1080p screens in the four-panel-view in panel.php, and for 7 inch scr

marcus-s 24 Oct 4, 2022
This is a community-based project designed in the view of R.V.R & J.C College of Engineering hostel mess maintenance.

Hostel-Maintenance-System Introduction This is a community-based project designed in the view of R.V.R & J.C College of Engineering hostel mess mainte

 Datta Sai Mallipeddi 1 Oct 23, 2021
A composer package designed to help you create a JSON:API in Phalcon

phalcon-json-api-package A composer package designed to help you create a JSON:API in Phalcon What happens when a PHP developer wants to create an API

Jim 36 Oct 7, 2022
Simple PHP/Laravel app that displays Todoist tasks in a view designed for a Kindle Touch

productivity-dashboard Just a simple PHP/Laravel app that retrieves (so far) tasks from Todoist and displays them in a simple view designed for a Kind

null 7 Dec 9, 2022
Simple PHP/Laravel app that displays Todoist tasks in a view designed for a Kindle Touch

productivity-dashboard Just a simple PHP/Laravel app that retrieves (so far) tasks from Todoist and displays them in a simple view designed for a Kind

null 3 Dec 27, 2021
X1 - A very simple web based note solution that's designed to serve as my second brain.

X1 A very simple web based note solution that's designed to serve as my second brain. Starting Server To start the tool simply clone the repo and then

Joel Dare 118 Dec 28, 2022
Updates the disabled link manager functionality in WordPress, originally designed as a blogroll, to act as a bookmarking system.

=== Bookmark Links === Contributors: dshanske Tags: links, bookmarks, readlater Requires at least: 4.7 Tested up to: 5.4 Stable tag: trunk Requires PH

David Shanske 7 Nov 16, 2022
Jump is yet another self-hosted startpage for your server designed to be simple, stylish, fast and secure.

Jump Jump is yet another self-hosted startpage for your server designed to be simple, stylish, fast and secure. Features Fast, easy to deploy, secure

Dale Davies 309 Dec 27, 2022
Snuffleupagus is a PHP 7+ and 8+ module designed to drastically raise the cost of attacks against websites, by killing entire bug classes

Snuffleupagus is a PHP 7+ and 8+ module designed to drastically raise the cost of attacks against websites, by killing entire bug classes

Julien Voisin 625 Jan 3, 2023
Icinga Director has been designed to make Icinga 2 configuration handling easy

The Director aims to be your new favourite Icinga config deployment tool. Director is designed for those who want to automate their configuration deployment and those who want to grant their “point & click” users easy access to the configuration.

Icinga 395 Jan 3, 2023
An extremely customizable BuildBattle mini-game designed for scalability and simplicity.

BuildBattle An extremely customizable BuildBattle mini-game designed for scalability and simplicity. Features Customisable messages and scoreboard Mul

null 11 Sep 18, 2022
PHP Web User Queue designed to run on shared hosting

WebUserQueue Introduction This is a web user queueing system written in PHP with a MySQL backend designed to run on shared hosting. It was designed to

Chris 0 Aug 13, 2022
Couleur is a modern PHP 8.1+ color library, intended to be compatible with CSS Color Module Level 4.

?? Couleur: A modern PHP 8.1+ color library ?? Couleur: A modern PHP 8.1+ color library ?? Presentation ⚙️ Installation ?? Quick Start ?? Usage ?? Imm

Matthieu Masta Denis 3 Oct 26, 2022
MODX Helper for Tailwind

TailwindHelper MODX Helper for Tailwind Features This MODX Extra adds a Tailwind helper to the MODX installation: Write a safelist.json on base on chu

Thomas Jakobi 3 Jan 10, 2022
Proyecto Laravel-Livewire-Tailwind. Buscador de Gifs, Imágenes y Vídeos. Fuentes: Giphy y Pixabay.

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Juan Gómez 1 Feb 10, 2022
Polonium is a world class old school ✍️ blog website made with Php and Tailwind 🌀

Polonium Polonium is a world class old school ✍️ blog website made with Php and Tailwind ?? to write dump articles about... Yeah I know, you should pr

Youness Idbakkasse 2 Jan 10, 2022