Download the PHP package winter/wn-tailwindui-plugin without Composer
On this page you can find all versions of the php package winter/wn-tailwindui-plugin. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download winter/wn-tailwindui-plugin
More information about winter/wn-tailwindui-plugin
Files in winter/wn-tailwindui-plugin
Package wn-tailwindui-plugin
Short Description Provides a TailwindUI-based skin for the Winter CMS backend.
License MIT
Homepage https://github.com/wintercms/wn-tailwindui-plugin
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package wn-tailwindui-plugin
Tailwind UI Backend Skin
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.
Supports:
- Multiple authentication page layouts (Simple, Left Sidebar)
- Backend Menu location customization (Top, Side)
- Backend Menu Icon location customization (Above, Beside, Hidden (Text Only), Only (No Text))
- Background image for login page
- Dark mode
Installation
This plugin is available for installation via Composer.
After installing the plugin you will need to run the migrations and (if you are using a public folder) republish your public directory.
Screenshots
| Before | After |
|---|---|
Dark Mode!
Dark mode and user preferences are also supported.
Getting started
Use composer to install the plugin:
Then, run the migrations to ensure the plugin is enabled:
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
Using Tailwind in other Plugins
The following steps should be taken in order to ensure the best compatibility between plugins when using Tailwind with other plugins in the Backend:
- Use Laravel Mix to handle compiling your plugin's Tailwind styles
- In your
tailwind.config.jsfile, take the following actions:- Extend the Winter.TailwindUI plugin's configuration rather than the default Tailwind configuration (ex:
const config = require('../../winter/tailwindui/tailwind.config.js');). - Ensure that the Preflight Tailwind plugin is disabled (ex:
config.corePlugins = {preflight: false};). - Set
config.contentto include only your plugin's paths (ex:config.content = ['./formwidgets/**/*.{vue,php,htm}', './components/**/*.{php,htm}', './assets/src/js/**/*.{js,vue}'];).
- Extend the Winter.TailwindUI plugin's configuration rather than the default Tailwind configuration (ex:
- In your
package.jsonfile, include postcss-prefixwrap to wrap your plugin's generated styles in a plugin-specific class to prevent overriding the styles elsewhere in the backend (ex."postcss-prefixwrap": "~1.29.x",). - In your
winter.mix.jsfile, use postcss-prefixwrap when compiling the Tailwind styles (ex.mix.postCss('assets/src/css/example.css', 'assets/dist/css/example.css', [..., require('postcss-prefixwrap')('.plugin-authorname-pluginname'), ...])).
Example tailwind.config.js:
Example winter.mix.js:
Example package.json:
Future Ideas
It would be ideal if it was also possible for other plugins to detect the classes that have already been generated by this plugin and prune them from their compiled styles. Pull Requests welcome to add that ability in the future if anyone has the time / motivation to do so.
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
