Skip to content

Craft plugin for conditionally joining css class names together in Twig templates. Really helps with wrangling Tailwind CSS.

License

Notifications You must be signed in to change notification settings

vigetlabs/craft-classnames

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Classnames plugin for Craft CMS 5.x

Classnames is a simple Twig function for conditionally joining css class names together in Twig templates, in a way that makes them much more readable. It's like Jed Watson's Classnames but for Twig in Craft.

This plugin is especially useful with Tailwind CSS projects.

Requirements

This plugin requires Craft CMS 5.0.0 or later.

For Craft 4 users, view the v2 branch.

Installation

To install the plugin, follow these instructions.

  1. Open your terminal and go to your Craft project:

     cd /path/to/project
    
  2. Then tell Composer to load the plugin:

     composer require viget/craft-classnames
    
  3. Install the plugin either via the CLI with ./craft plugin/install classnames, or in the Control Panel by going to Settings → Plugins and clicking the “Install” button for Classnames.

Using Classnames

A real world example:

<button
  class="{{ classNames({
    'group relative z-0 hover:z-1': true,
    'px-24 py-12': true,
    'font-bold text-14 text-dark-gray': true,
    'inline-flex items-center justify-between': props.arrow,
    'inline-block': not props.arrow,
    'w-full text-center': props.full
  }) }}"
>
  {{ props.text }}
</button>

Other examples:

{{ classNames('foo', 'bar') }} {# 'foo bar' #}
{{ classNames('foo', { 'bar': true }) }} {# 'foo bar' #}
{{ classNames({ 'foo-bar': true }) }} {# 'foo-bar' #}
{{ classNames({ 'foo-bar': false }) }} {# '' #}
{{ classNames({ 'foo': true }, { 'bar': true }) }} {# 'foo bar' #}
{{ classNames({ 'foo': true, 'bar': true }) }} {# 'foo bar' #}

There is even a shorthand cx version available:

{{ cx('foo', { 'bar': true }) }} {# 'foo bar' #}

Code At Viget

Visit code.viget.com to see more projects from Viget.

About

Craft plugin for conditionally joining css class names together in Twig templates. Really helps with wrangling Tailwind CSS.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages