PHP code example of craftpulse / craft-tailwind

1. Go to this page and download the library: Download craftpulse/craft-tailwind library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php. 
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

craftpulse / craft-tailwind example snippets




return [
    // 'auto' | '3' | '4'
    'tailwindVersion' => 'auto',

    // Directory containing tailwind.config.* (v3 detection)
    'buildchainPath' => null,

    // Directory containing CSS entry file (v4 detection)
    'cssPath' => null,

    // CSS custom properties injected as :root variables
    'cssVariables' => [
        '--color-brand-primary' => '#3490dc',
        '--color-brand-on-primary' => '#ffffff',
    ],

    // LRU cache size for merge results (0-10000)
    'cacheSize' => 500,

    // Tailwind class prefix, bare form (no trailing hyphen).
    // v3 emits `tw-px-4`; v4 emits `tw:px-4`. null = no prefix.
    'prefix' => null,

    // Resolve `@tailwindcss/typography` conflicts (prose-sm vs prose-lg etc.)
    'typography' => false,

    // Custom prose-{suffix} additions beyond the defaults the typography
    // plugin ships. Add suffixes you've registered yourself.
    'typographyExtraSizes' => [],
    'typographyExtraColors' => [],

    // Auto-inject CSS variables into every site page's <head>
    'autoInject' => false,

    // Attributes applied to the auto-injected <style> tag
    // (e.g. ['nonce' => '...', 'media' => 'screen'])
    'autoInjectAttributes' => [],
];




return [
    '*' => [
        'tailwindVersion' => 'auto',
        'autoInject' => false,
    ],
    'dev' => [
        'autoInject' => true,
    ],
];


// config/tailwind.php
return [
    'autoInject' => true,
    'autoInjectAttributes' => [
        'nonce' => 'static-nonce-or-leave-out',
    ],
];


return [
    'typography' => true,
];


return [
    'typography' => true,
    'typographyExtraSizes'  => ['huge'],
    'typographyExtraColors' => ['mybrand', 'marketing'],
];

twig
{% set proseSize = entry.proseSize.value ?? 'prose-base' %}

<article class="{{ craft.tailwind.merge('prose prose-slate max-w-none', proseSize) }}">
    {{ entry.body|raw }}
</article>