arnolem / tailwindphp

TailwindPHP - 在PHP项目中使用Tailwind CSS(无需npm)

2.2.0 2024-03-04 08:13 UTC

This package is auto-updated.

Last update: 2024-09-04 09:26:23 UTC


README

TailwindPHP - 在PHP项目中使用Tailwind CSS(无需npm)

Tailwind PHP 允许您直接使用PHP即时编译TailwindCSS,无需依赖(无需npm或postcss)。

安装

重要:Alpha版本需要Linux x64。

需要PHP 8.0+和Composer

composer req arnolem/tailwindphp

添加执行权限

chmod +x ./vendor/arnolem/tailwindphp/bin/*

配置

1- 创建一个tailwind.config.js配置文件

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./templates/**/*.twig"],
  theme: {
    extend: {},
  },
  plugins: [],
}

2- 添加到css路由的链接

<!-- base.html.twig -->
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ path('css') }}" >
<!-- //... -->

3- 使用TailwindPhp创建css路由

<?php
// src/Controller/CssController.php
namespace App\Controller;

use Arnolem\TailwindPhp\TailwindPhp;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class CssController
{
    #[Route(path: 'style.css', name: 'css')]
    public function index(): Response
    {
        return new Response(
            TailwindPhp::build(),
            Response::HTTP_OK,
            ['Content-Type' => 'text/css']
        );
    }
}

可选-启用SCSS编译

<?php
// src/Controller/CssController.php
namespace App\Controller;

use Arnolem\TailwindPhp\TailwindPhp;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class CssController
{
    #[Route(path: 'style.css', name: 'css')]
    public function index(): Response
    {
        TailwindPhp::enableScss(true);
        
        $scss = 'YOUR_SCSS_CONTENT with @apply ou theme() function';
        
        return new Response(
            TailwindPhp::build($scss),
            Response::HTTP_OK,
            ['Content-Type' => 'text/css']
        );
    }
}

致谢

许可协议

TailwindPHP遵循MIT许可协议(MIT)