Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wintercms/wn-tailwindui-plugin
Provides the TailwindUI-based modern backend skin for the Winter CMS backend
https://github.com/wintercms/wn-tailwindui-plugin
hacktoberfest plugin skin tailwindcss tailwindui wintercms
Last synced: about 2 months ago
JSON representation
Provides the TailwindUI-based modern backend skin for the Winter CMS backend
- Host: GitHub
- URL: https://github.com/wintercms/wn-tailwindui-plugin
- Owner: wintercms
- License: mit
- Created: 2022-06-27T21:26:54.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-12T07:55:38.000Z (9 months ago)
- Last Synced: 2024-04-14T06:56:17.885Z (5 months ago)
- Topics: hacktoberfest, plugin, skin, tailwindcss, tailwindui, wintercms
- Language: PHP
- Homepage:
- Size: 1.94 MB
- Stars: 13
- Watchers: 4
- Forks: 9
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-wintercms - Winter.TailwindUI - Provides a modern backend skin based on Tailwind UI. (Uncategorized / Uncategorized)
README
# Tailwind UI Backend Skin
> **NOTE:** This plugin is in active development, and requires v1.2.3+ of Winter CMS.
[Tailwind UI](https://tailwindui.com/) is a Tailwind CSS component library designed by the authors of [Tailwind CSS](https://tailwindcss.com/). This is a [Winter CMS](https://wintercms.com) plugin that provides a custom, TailwindUI-based skin for the backend.
## Screenshots
| Before | After |
|---|---|
|  |  |
### Dark Mode!
Dark mode and user preferences are also supported.
## Getting started
Use composer to install the plugin:
```bash
composer require winter/wn-tailwindui-plugin
```
Then, run the migrations to ensure the plugin is enabled:
```bash
php artisan migrate
```
## Configuration
Configuration for this plugin is handled through a [configuration file](https://wintercms.com/docs/plugin/settings#file-configuration). 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](https://wintercms.com/docs/v1.2/docs/console/asset-compilation) to handle compiling your plugin's Tailwind styles
- In your `tailwind.config.js` file, 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](https://tailwindcss.com/docs/preflight#disabling-preflight) is disabled (ex: `config.corePlugins = {preflight: false};`).
- Set `config.content` to include only your plugin's paths (ex: `config.content = ['./formwidgets/**/*.{vue,php,htm}', './components/**/*.{php,htm}', './assets/src/js/**/*.{js,vue}'];`).
- In your `package.json` file, include [postcss-prefixwrap](https://www.npmjs.com/package/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.js` file, 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`:
```js
// Extend the base tailwind config to avoid conflicts
const config = require('../../winter/tailwindui/tailwind.config.js');
config.content = [
'./formwidgets/**/*.{vue,php,htm}',
'./components/**/*.{php,htm}',
'./assets/src/js/**/*.{js,vue}',
];
config.corePlugins = {
preflight: false,
};
module.exports = config;
```
### Example `winter.mix.js`:
```js
const mix = require('laravel-mix');
mix.setPublicPath(__dirname)
// Compile Tailwind
.postCss(
'assets/src/css/myplugin.css',
'assets/dist/css/myplugin.css',
[
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
require('postcss-prefixwrap')('.myauthor-pluginname', {
// Don't prefix wrap modals because we can't put the wrapping class on a high enough parent element to apply the styles
ignoredSelectors: ['.modal'],
})
]
);
```
### Example `package.json`:
```json
{
"name": "myauthor-pluginname",
"version": "0.0.1",
"private": true,
"version": "1.0.0",
"devDependencies": {
"postcss": "~8.4.x",
"postcss-prefixwrap": "~1.29.x",
"postcss-import": "~14.1.x",
"tailwindcss": "~3.0.x",
"@tailwindcss/typography": "0.5.8"
}
}
```
### 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](https://spatialmedia.io).
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](https://wintercms.com/support)