README

注意：此插件正在积极开发中，需要Winter CMS v1.2.3+。

Tailwind UI 是由Tailwind CSS的作者设计的Tailwind CSS组件库。这是一个Winter CMS插件，为后端提供了基于TailwindUI的定制皮肤。

屏幕截图

暗黑模式！

支持暗黑模式和用户偏好设置。

入门指南

使用composer安装插件

composer require winter/wn-tailwindui-plugin

然后，运行迁移以确保插件已启用

php artisan migrate

配置

此插件的配置通过配置文件处理。要修改配置值并开始使用，您可以将值添加到您的.env环境文件中，或者将plugins/winter/tailwindui/config/config.php文件复制到config/winter/tailwindui/config.php并在此处进行更改。

环境文件支持值

• TAILWIND_SHOW_BREAKPOINT_DEBUGGER=false

在其他插件中使用Tailwind

为了确保在使用Tailwind与后端中的其他插件结合使用时最佳兼容性，应采取以下步骤

• 使用Laravel Mix来处理编译您的插件Tailwind样式
• 在您的tailwind.config.js文件中，执行以下操作
  • 扩展Winter.TailwindUI插件的配置而不是默认的Tailwind配置（例如：const config = require('../../winter/tailwindui/tailwind.config.js');）。
  • 确保禁用了Preflight Tailwind插件（例如：config.corePlugins = {preflight: false};）。
  • 将config.content设置为仅包含您的插件路径（例如：config.content = ['./formwidgets/**/*.{vue,php,htm}', './components/**/*.{php,htm}', './assets/src/js/**/*.{js,vue}'];）。
• 在您的package.json文件中，包含postcss-prefixwrap以将您的插件生成的样式包裹在特定于插件的类中，以防止在其他后端部分中覆盖样式（例如："postcss-prefixwrap": "~1.29.x",）。
• 在您的winter.mix.js文件中，在编译Tailwind样式时使用postcss-prefixwrap（例如：mix.postCss('assets/src/css/example.css', 'assets/dist/css/example.css', [..., require('postcss-prefixwrap')('.plugin-authorname-pluginname'), ...])）。

示例 tailwind.config.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;

示例 winter.mix.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'],
            })
        ]
    );

示例 package.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"
    }
}

未来想法

如果其他插件也能检测到此插件已生成的类并将其从编译的样式中删除，那就太理想了。如果有人有时间/动力，欢迎通过Pull Requests添加这个功能。

鸣谢

此插件最初由Joseph Blythe和Luke Towers为Spatial Media编写。

它已经经过修改并以Winter命名空间重新发布，作为Winter CMS的官方插件，由Winter CMS团队维护。

如果您想为此插件的开发做出贡献，请随时在此处的插件仓库提交问题或拉取请求：https://github.com/wintercms/wn-tailwindui-plugin

如果您想支持Winter CMS，请访问：WinterCMS.com