Tailwind Makes it Easy to Change Your Site's Branding
Here at Curious Minds, we like to save you money, and one of the ways that we do that is by building websites that are quick and easy to change when you need to make changes. Today, you'll get a peek behind the curtain to see how Tailwind, one of the tools we use to create easily editable websites, makes it so easy to change color schemes on your site, something that used to take a long time to do.
What is Tailwind?
Tailwind is a CSS framework made by Tailwind Labs that makes it easy to both build and edit your website. If you don't know what a CSS framework is, stick around! Because it could save you and your business some money! If you've got a brand that encompasses several websites, or if your branding changes periodically, you may find yourself in need of a way to easily change the color scheme of your site. You can easily change other things as well, but we're going to focus on color schemes. First, let's explain the scenario. Your site normally has a blue and white color scheme, but you want to set everything to an orange and black color scheme for a few weeks leading up to your Halloween sale. On a traditional website, this could take a long time, depending on how the site was coded. Various HTML, CSS, and Javascript files might all be interacting with the colors, and all of them need to be changed. Then, when the sale is over, it will take just as long to change everything back. With Tailwind, it's a lot more simple. The Tailwind configuration file contains a list of site branding colors, and we can just edit that one list and the changes will propagate to the entire site. Later, they can be changed back just as easily when the sale is over. Let's take a look at how this works.
The Default Tailwind Configuration
Out of the box, your tailwind config will look something like this: ``` // https://tailwindcss.com/docs/ configuration module.exports = { content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js,css}'], theme: { extend: { }, }, plugins: [], }; ``` That little extend section is your ticket to easier website maintenance and editing.
What Makes it so Powerful?
What we're going to do is add a colors object, which defines the colors for the site, according to their function, like so: ``` module.exports = { content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js,css}'], theme: { extend: { colors: { "brand-primary": blue, "brand-contrast": white }, }, }, plugins: [], }; ``` This tells the site that every element which is marked as having the brand-primary color is now blue, and every element which is marked as having the brand-contrast color is now white. To make use of this, everywhere on the site where you want a blue button or background or some other element that you want to match the brand primary color, we can give it a class to tell it to be blue.
The Payoff
Later, when you want to change the branding, we can just go back into the tailwind config file and change the colors like so: ``` module.exports = { content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js,css}'], theme: { extend: { colors: { "brand-primary": orange, "brand-contrast": black }, }, }, plugins: [], }; ``` Then we run a command to change the colors across the entire site and upload the new code to the web server for your site. And we're done! Your site will be orange and black until you set it back to something else! This is just one of the ways that we here at Curious Minds can save you money. By working efficiently and building your site in a way that's easy to edit and maintain, we make sure that you get the most bang for your buck when building a website.
