{"id":13606546,"url":"https://github.com/wintercms/wn-tailwindui-plugin","last_synced_at":"2025-05-13T16:31:37.033Z","repository":{"id":41119590,"uuid":"508066791","full_name":"wintercms/wn-tailwindui-plugin","owner":"wintercms","description":"Provides the TailwindUI-based modern backend skin for the Winter CMS backend","archived":false,"fork":false,"pushed_at":"2025-03-06T20:58:54.000Z","size":2323,"stargazers_count":17,"open_issues_count":9,"forks_count":9,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-06T23:32:31.347Z","etag":null,"topics":["hacktoberfest","plugin","skin","tailwindcss","tailwindui","wintercms"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wintercms.png","metadata":{"funding":{"github":"wintercms","open_collective":"wintercms"},"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-06-27T21:26:54.000Z","updated_at":"2025-04-11T02:20:52.000Z","dependencies_parsed_at":"2023-12-19T10:02:40.268Z","dependency_job_id":"24eb23d4-3acb-4558-a6ec-cbef30346ccc","html_url":"https://github.com/wintercms/wn-tailwindui-plugin","commit_stats":{"total_commits":82,"total_committers":15,"mean_commits":5.466666666666667,"dds":0.6585365853658536,"last_synced_commit":"36e5926a146cdd5db2fe25f16601b0e9d37c1ae3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wintercms%2Fwn-tailwindui-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wintercms%2Fwn-tailwindui-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wintercms%2Fwn-tailwindui-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wintercms%2Fwn-tailwindui-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wintercms","download_url":"https://codeload.github.com/wintercms/wn-tailwindui-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253542902,"owners_count":21924913,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","plugin","skin","tailwindcss","tailwindui","wintercms"],"created_at":"2024-08-01T19:01:10.091Z","updated_at":"2025-05-13T16:31:37.009Z","avatar_url":"https://github.com/wintercms.png","language":"PHP","funding_links":["https://github.com/sponsors/wintercms","https://opencollective.com/wintercms"],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Tailwind UI Backend Skin\n\n![Tailwind_UI_Plugin](https://user-images.githubusercontent.com/7253840/176566244-ff859f12-77a5-465e-9462-6380a47652a6.png)\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/wintercms/wn-tailwindui-plugin/blob/main/LICENSE)\n\n[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.\n\nSupports:\n- Multiple authentication page layouts (Simple, Left Sidebar)\n- Backend Menu location customization (Top, Side)\n- Backend Menu Icon location customization (Above, Beside, Hidden (Text Only), Only (No Text))\n- Background image for login page\n- Dark mode\n\n## Installation\n\nThis plugin is available for installation via [Composer](http://getcomposer.org/).\n\n```bash\ncomposer require winter/wn-tailwindui-plugin\n```\n\nAfter installing the plugin you will need to run the migrations and (if you are using a [public folder](https://wintercms.com/docs/develop/docs/setup/configuration#using-a-public-folder)) [republish your public directory](https://wintercms.com/docs/develop/docs/console/setup-maintenance#mirror-public-files).\n\n```bash\nphp artisan migrate\n```\n\n## Screenshots\n\n| Before | After |\n|---|---|\n| ![stock-winter](https://github.com/wintercms/wn-tailwindui-plugin/assets/7253840/096dffdc-6c21-4e8a-ae3d-5d09fa1dd251) | ![tailwind-ui-light](https://github.com/wintercms/wn-tailwindui-plugin/assets/7253840/fad97b4b-8c29-4615-bdc3-b04886b2e467) |\n\n### Dark Mode!\n\nDark mode and user preferences are also supported.\n\n![tailwind-ui-dark](https://github.com/wintercms/wn-tailwindui-plugin/assets/7253840/b6c866d5-f64a-4788-88f7-61364c7599b4)\n\n![tailwind-preferences](https://github.com/wintercms/wn-tailwindui-plugin/assets/7253840/6c21966a-07d3-4427-a6b6-2902c8c38527)\n\n## Getting started\n\nUse composer to install the plugin:\n\n```bash\ncomposer require winter/wn-tailwindui-plugin\n```\n\nThen, run the migrations to ensure the plugin is enabled:\n\n```bash\nphp artisan migrate\n```\n\n## Configuration\n\nConfiguration 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.\n\nEnvironment File Supported Values:\n- `TAILWIND_SHOW_BREAKPOINT_DEBUGGER=false`\n\n## Using Tailwind in other Plugins\n\nThe following steps should be taken in order to ensure the best compatibility between plugins when using Tailwind with other plugins in the Backend:\n\n- Use [Laravel Mix](https://wintercms.com/docs/v1.2/docs/console/asset-compilation) to handle compiling your plugin's Tailwind styles\n- In your `tailwind.config.js` file, take the following actions:\n  - Extend the Winter.TailwindUI plugin's configuration rather than the default Tailwind configuration (ex: `const config = require('../../winter/tailwindui/tailwind.config.js');`).\n  - Ensure that the [Preflight Tailwind plugin](https://tailwindcss.com/docs/preflight#disabling-preflight) is disabled (ex: `config.corePlugins = {preflight: false};`).\n  - 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}'];`).\n- 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\",`).\n- 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'), ...])`).\n\n### Example `tailwind.config.js`:\n\n```js\n// Extend the base tailwind config to avoid conflicts\nconst config = require('../../winter/tailwindui/tailwind.config.js');\n\nconfig.content = [\n    './formwidgets/**/*.{vue,php,htm}',\n    './components/**/*.{php,htm}',\n    './assets/src/js/**/*.{js,vue}',\n];\n\nconfig.corePlugins = {\n    preflight: false,\n};\n\nmodule.exports = config;\n```\n\n### Example `winter.mix.js`:\n\n```js\nconst mix = require('laravel-mix');\n\nmix.setPublicPath(__dirname)\n\n    // Compile Tailwind\n    .postCss(\n        'assets/src/css/myplugin.css',\n        'assets/dist/css/myplugin.css',\n        [\n            require('postcss-import'),\n            require('tailwindcss/nesting'),\n            require('tailwindcss'),\n            require('autoprefixer'),\n            require('postcss-prefixwrap')('.myauthor-pluginname', {\n                // Don't prefix wrap modals because we can't put the wrapping class on a high enough parent element to apply the styles\n                ignoredSelectors: ['.modal'],\n            })\n        ]\n    );\n```\n\n### Example `package.json`:\n\n```json\n{\n    \"name\": \"myauthor-pluginname\",\n    \"version\": \"0.0.1\",\n    \"private\": true,\n    \"version\": \"1.0.0\",\n    \"devDependencies\": {\n        \"postcss\": \"~8.4.x\",\n        \"postcss-prefixwrap\": \"~1.29.x\",\n        \"postcss-import\": \"~14.1.x\",\n        \"tailwindcss\": \"~3.0.x\",\n        \"@tailwindcss/typography\": \"0.5.8\"\n    }\n}\n```\n\n### Future Ideas\n\nIt 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.\n\n## Credits\nThis plugin was originally written by Joseph Blythe \u0026 Luke Towers for [Spatial Media](https://spatialmedia.io).\n\nIt 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.\n\nIf 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\n\nIf you would like to support Winter CMS, please visit [WinterCMS.com](https://wintercms.com/support)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwintercms%2Fwn-tailwindui-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwintercms%2Fwn-tailwindui-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwintercms%2Fwn-tailwindui-plugin/lists"}