What is Tailwind CSS
Tailwind CSS is a utility-first CSS framework that’s gained a lot of traction in the past couple of years because it allows developers to rapidly create custom designs with ease. It achieves this by providing a large library of CSS helper classes that a developer can use to apply styles directly in markup.
For example, here’s a CodePen example of an alert component built with Tailwind CSS:
As you can see from the CodePen example, all the styling is coming from the Tailwind CSS classes.
When your project is ready for production Tailwind CSS uses PostCSS to bundle only the classes that your project needs. However, Tailwind CSS does have a Play CDN that you can use for testing styles.
The Play CDN should not be used for a production site because it’s not optimized, however, it will be perfect for creating images with the Mattermix API because optimization isn’t as critical as a client-facing application.
What we’re going to build
In this tutorial we are going to use Tailwind CSS to build a social graphic template that can be used with the Mattermix API. You could use the Mattermix API to create images with a simple HTTP request or use the Mattermix Zapier integration as a low-code or no-code option.
The HTML from this project would be passed into the Mattermix API in order to create the image. You could even update values dynamically by using the Handlebars template syntax–example of that below.
By the end of the tutorial you will have built the following:
Configuration
We’re going to use CodePen to write the code and see a live preview. Once you have a new pen created, type ! in the HTML editor and hit the TAB key. This will create a default HTML template for getting our project started:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mattermix Social Template</title>
</head>
<body></body>
</html>
We’ll be using Inter as the main font for the project, so let’s add the font styles in the head tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mattermix Social Template</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"
rel="stylesheet"
/>
</head>
<body></body>
</html>
Next, add the Tailwind Play CDN to your project by adding the script in your head tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mattermix Social Template</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body></body>
</html>
We’re now able to use all the Tailwind classes in our HTML to start adding styles! We can even customize the Tailwind configuration, add custom classes, and use plugins with the Play CDN.
We can customize our Tailwind configuration by calling tailwind.config and passing in the config object.
For this project, we’re going to create a new color called one and include the Inter font family in the sans-serif stack. Add the following Tailwind configuration inside a script tag in the head tag of the HMTL:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mattermix Social Template</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
one: '#467CE5',
},
fontFamily: {
sans: ['Inter'],
},
},
},
}
</script>
</head>
<body></body>
</html>
If it’s your first time using Tailwind CSS you may be curious how we use the custom one color. All you have to do is replace any built-in color value, like blue-600 or white, with the new one value. For example, we’ll add the custom color background to the social card by using the class bg-one instead of one of the built-in classes like bg-blue-600.
Build it
Now it’s time to build the social media template! Add the following HTML inside the body tag:
<body>
<div class="bg-one flex h-[600px] w-[1200px] flex-col justify-between p-14">
<div>
<img
src="https://cdn.mattermix.com/stock/mattermix-logo.svg"
class="h-12 w-12"
/>
</div>
<div class="flex items-center">
<div class="w-[632px]">
<h1 class="text-5xl font-medium leading-tight text-white">
How to predict and measure content effectiveness
</h1>
</div>
<div class="ml-auto h-[360px] w-[360px] overflow-hidden">
<img
src="https://cdn.mattermix.com/stock/person-2.jpeg"
class="h-full w-full object-cover"
/>
</div>
</div>
<div class="flex items-center">
<p class="mr-4 text-2xl font-medium uppercase tracking-wide text-white">
Register now!
</p>
<svg
width="54"
height="16"
viewBox="0 0 33 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M27.8771.673872c-.3508-.350726-.9194-.350726-1.2701 0-.3508.350728-.3508.919368 0 1.270088l2.6579 2.65796H.898089C.402088 4.60192 0 5.00401 0 5.50001c0 .496.402088.89809.898089.89809H29.2649L26.607 9.05604c-.3508.35072-.3508.91936 0 1.27006.3507.3508.9193.3508 1.2701 0l4.191-4.19105c.3508-.35073.3508-.91937 0-1.2701L27.8771.673872z"
fill="#F9FAFB"
></path>
</svg>
</div>
</div>
</body>
Besides the class bg-one that uses the custom color we added to our configuration, all the classes can be found in the Tailwind CSS docs.
You may have noticed an unusual bracket syntax for some classes like w-[1200px]. This syntax allows you to create arbitrary values that are not supported out-of-the-box with Tailwind CSS.
Next steps
You can now pass the HTML from this example into the Mattermix API to create an image. Currently the values are static but you could change values you’d like to dynamically change using the Handlebars template syntax that the Mattermix API supports.
Below is an example of what the HTML would look like if you used the Handlebars template syntax to dynamically update the title, profile image, logo, and call-to-action:
<body>
<div class="bg-one flex h-[600px] w-[1200px] flex-col justify-between p-14">
<div>
<img src="{{logo}}" class="h-12 w-12" />
</div>
<div class="flex items-center">
<div class="w-[632px]">
<h1 class="text-5xl font-medium leading-tight text-white">{{title}}</h1>
</div>
<div class="ml-auto h-[360px] w-[360px] overflow-hidden">
<img src="{{image}}" class="h-full w-full object-cover" />
</div>
</div>
<div class="flex items-center">
<p class="mr-4 text-2xl font-medium uppercase tracking-wide text-white">
{{cta}}
</p>
<svg
width="54"
height="16"
viewBox="0 0 33 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M27.8771.673872c-.3508-.350726-.9194-.350726-1.2701 0-.3508.350728-.3508.919368 0 1.270088l2.6579 2.65796H.898089C.402088 4.60192 0 5.00401 0 5.50001c0 .496.402088.89809.898089.89809H29.2649L26.607 9.05604c-.3508.35072-.3508.91936 0 1.27006.3507.3508.9193.3508 1.2701 0l4.191-4.19105c.3508-.35073.3508-.91937 0-1.2701L27.8771.673872z"
fill="#F9FAFB"
></path>
</svg>
</div>
</div>
</body>
Pair the above template with the Mattermix Zapier integration and you now have a no-code solution for creating images automatically. One idea would be to create new images from a Google Form submission and then Slack message the results to your marketing team channel–the possibilities are endless!