Adding CSS classes to templates allows you to target templates or parts of the template in your CSS files.

For example, if you want a different background colour per content type, then you need a way to identify each content type with a CSS selector. By default the node template includes a class for each content type, making it easy for you to target each one. You’ll see this in action later on in this tutorial. You will also learn how to create your own classes.

Adding a single class

To add a class, pass in the class name as an argument to the attributes.addClass() function.

	<div {{ attributes.addClass('classname') }}>

	</div>

Adding multiple classes

To add multiple classes to an element, create an array with all of the class names. To create an array in Twig, use the set tag followed by the name of the array.

  {%
	set classes = [
		'content',
		'node',
		'custom',
	]
  %}

And then pass that array to the attributes.addClass() function.

	<div {{ attributes.addClass(classes) }}>

	</div>

Classes are merged with existing classes

If there are any existing classes, the new classes will be merged. Therefore, all the classes will be added to the element.

Removing a class

You may decide that you’d like to remove one of the existing classes. To do that, you can use the attributes.removeClass() function.

	<div {{ attributes.addClass(classes).removeClass('node') }}>

	</div>

Two real world examples

In your code editor, head over to the templates in the Classy theme (core/themes/classy/templates).

Single class

Open up field/time.html.twig. This is an example of a single class being added to the time element.

	<time{{ attributes.addClass('datetime') }}>{{ text }}</time>

Multiple class array

Open up layout/region.html.twig. The classes array:

	{%
	set classes = [
		'region',
		'region-' ~ region|clean_class,
	]
	%}

In this example, there are two classes. The first one is a simple one called ‘region’. The second one looks more interesting:

	'region-' ~ region|clean_class,

Let’s break this down:

• 'region-': a simple sting
• ~ is a Twig operator that concatenate two strings together
• region: the region variable. It will be replaced with the actual region (e.g. block)
• |: A pipe that separates a variable (region) from a filter (clean_class)
• clean_class: a filter that will remove invalid characters from HTML classes

If you have a block in the header region, then the above code will add a class called region-header.

<div class="region region-header">

Node class

The final example is the classes added to the article element in the node template.

Open up content/node.html.twig. This is another example of multiple classes.

  set classes = [
	'node',
	'node--type-' ~ node.bundle|clean_class,
	node.isPromoted() ? 'node--promoted',
	node.isSticky() ? 'node--sticky',
	not node.isPublished() ? 'node--unpublished',
	view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
  ]
%}

As mentioned in the example at the top of this tutorial, the node template will have a class for the content type, making it easy for you to specify styles on for specific content types. That is defined with this line:

	'node--type-' ~ node.bundle|clean_class,

A content type is a type of bundle in Drupal. So node.bundle will return the content type machine name. Just like the field example, this is passed through the clean_class filter.

If you are viewing an article node, the class added to article will be:

node--type-article

There are also four conditions that check if something exists before adding the class. For example:

node.isPromoted() ? 'node--promoted',

This checks if the node is promoted to the frontage. If it is, it adds the node--promotedclass.

not node.isPublished() ? 'node--unpublished',

This checks if the node is not published. If it isn’t published, it adds the node--unpublished class.

Outro

Hopefully this tutorial has helped you understand how you can add classes to Twig templates. I encourage you learn from more examples by having a look at more templates (in the Classy theme, or another theme).