Client.Style
Client.Style
📓

Tailwind

Return to Client•Studio

Tailwind

💡
We use tailwind on all our sites. We want to stay away from writing extra CSS styles as much as possible. Tailwind uses inline classes for this reason, which also helps keep our content consistent and easy to read for all. Refer to Tailwind docs for more examples.

Basic Usage

The Tailwind docs cover all classes and gives their corresponding CSS styles. These are examples of some common ones:

<div class="h-48 w-48">
* height: 12rem; 
* width: 12rem;
<div class="p-12 rounded-full bg-black">
* padding: 3rem; 
* border-radius: 9999px;
* background-color: black;
<div class="text-center font-medium text-white">
* text-align: center;
* font-weight: 500;
* color: white;
<div class="flex items-center justify-center">
* display: flex;
* align-items: center;
* justify-content: center;

Responsive

To apply responsive styles to the same node, prefix them with the specified widths:

<div class="p-4 md:p-8 lg:p-16">
	  * screen widths above 1024px [lg] : padding: 4rem;
	  * screen widths above 768px  [md] : padding: 2rem;
	  * screen widths under 768px       : padding: 1rem;
<div class="relative sm:flex">
	  * screen widths above 640px  [sm] : display: flex;
	  * screen widths under 640px       : display: relative;

Colours

The intensity of a colour must be specified. For example, a class of .bg-blue-900 will be darker than a class of .bg-blue-50. However, this does not apply to black or white.

Custom colours can be added and modified in the tailpress.json file. The new colour is given a name newcolor and hex value, which can then be used sitewide in the same was as any other tailwind colour bg-newcolor:

{ "colors": { "newcolor": "#09AB2F" }}

This method can also be used to edit other tailwind defaults, but for consistency, these changes should be kept to a minimum.

Grids

In Tailwind, grids can be constructed easily, by specifying the number of columns and gap width:

<div class="grid grid-cols-3 lg:grid-cols-2 gap-4">

Hover and Focus

Basic Hover, Focus and Active states can also be set via prefixes hover, focus and active. Consider, for example:

<div class="bg-blue-500 hover:bg-blue-700">

Note: If an element needs to be styled when hovering over its parent element, the group class must be added to the parent, and group-hover to the element:

<div class="group">
	<div class="text-indigo-500 group-hover:text-gray-500">

Transitions

For smoother animations when using hover & focus states, a transition class can be added. This can encompass all changes (transition-all) or more specific ones (transition-colors, transition-opacity, transition-transform).

<div class="bg-blue-50 hover:bg-red-50 transition-colors duration-300">

Note above the duration class, which sets the transition duration in milliseconds.

Best Practices

Avoid repeating the same classes on the same elements. In this case it makes more sense to use the CSS file instead. Consider the example below:

<li class="text-center text-xl text-black">
<li class="text-center text-xl text-black">
<li class="text-center text-xl text-black">

section.name ul li { @apply text-center text-xl text-black }