https://github.com/vigetlabs/craft-classnames
Craft plugin for conditionally joining css class names together in Twig templates. Really helps with wrangling Tailwind CSS.
https://github.com/vigetlabs/craft-classnames
craft-plugin craft3 craft4 craft5 tailwindcss
Last synced: 3 months ago
JSON representation
Craft plugin for conditionally joining css class names together in Twig templates. Really helps with wrangling Tailwind CSS.
- Host: GitHub
- URL: https://github.com/vigetlabs/craft-classnames
- Owner: vigetlabs
- License: mit
- Created: 2019-09-16T00:01:18.000Z (almost 6 years ago)
- Default Branch: v3
- Last Pushed: 2024-03-29T16:16:06.000Z (over 1 year ago)
- Last Synced: 2025-03-24T11:21:50.809Z (4 months ago)
- Topics: craft-plugin, craft3, craft4, craft5, tailwindcss
- Language: PHP
- Homepage:
- Size: 171 KB
- Stars: 11
- Watchers: 15
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://github.com/JedWatson/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](https://github.com/vigetlabs/craft-classnames/tree/v2).
## 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:
```twig
{{ props.text }}
```
Other examples:
```twig
{{ 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:
```twig
{{ cx('foo', { 'bar': true }) }} {# 'foo bar' #}
```
***
Visit [code.viget.com](http://code.viget.com) to see more projects from [Viget](https://viget.com).