ouun/stage-laravel-tailwind-config

获取您 Sage & Stage 项目中的 Tailwind 配置值

v1.0.0 2020-04-07 12:22 UTC

This package is auto-updated.

Last update: 2024-09-07 22:16:28 UTC


README

这是一个从 approvedio/laravel-mix-export-tailwind-config 分支出来的项目,用于与 Roots Sage > 10 & Stage 一起使用。原始作者 Michael Boffey 如下描述

"最近我发现自己在项目中越来越多地使用 Tailwind,但遇到了一些需要在我 blade 模板中访问 Tailwind 配置值的情况。最近的一次事件发生在构建管理部分时,我需要访问 Tailwind 配置文件中定义的颜色以传递给图表库。为了避免硬编码值,我决定创建这个库。"

安装

composer require ouun/stage-laravel-tailwind-config

发布配置

$  wp acorn vendor:publish --provider="Stage\Tailwind\TailwindServiceProvider"

应用程序服务提供者和外观将自动为您注册。

或者将服务提供者添加到您的 app.php 配置文件中

Stage\Tailwind\TailwindServiceProvider::class,

可选地,您可以添加别名到 app.php 配置文件的 Aliases 部分中

'Tailwind' => Stage\Tailwind\Facades\Tailwind::class,

使用方法

您可以使用外观

Tailwind::get('colors.red-light', '#FF0000');

您可以使用辅助方法

tailwind('colors.red-light', '#FF0000');

配置

默认情况下,我们假设您的 Tailwind 配置文件名为 tailwind.json,位于项目 `/dist` 文件夹中。您可以通过发布配置并更新到 tailwind.json 文件的路径来覆盖此配置。

'cache_path' => base_path('dist/tailwind.json'),

要从配置生成 tailwind.json 文件,您可能需要使用像 这个 这样的 Webpack 导出包,或者将以下 Mix 扩展添加到您的 webpack.mix.js 文件中

mix.extend('exportTailwindConfig', function(webpackConfig, configPath = './tailwind.js') {
    let fs = require('fs');
    let config = require(configPath);
    let json = JSON.stringify(config, null, 2);

    fs.writeFile('./tailwind.json', json);
});

然后调用以下 mix 函数生成此文件

mix.exportTailwindConfig('./tailwind.js');