There are multiple ways of using Tailwind CSS for your project, such as including the main Tailwind CSS file via CDN and then start building the elements using the default utility classes, or a much more recommended method, which would be to include Tailwind CSS via a package manager, then choosing a preferred building tool technology and then use the Tailwind Configuration file to easily change parameters and even add extra utility classes.
In this guide, we will cover both methods and show you a few examples of how you can get started using the most popular utility-first CSS framework.
Using Tailwind CSS via CDN
Although not the recommended method and you will lose a lot of the advantages of Tailwind CSS if you include it via CDN, it can be a great way to quickly test out the classes and get a good understanding of the utility-first methodology, before you dive into the more advanced building tools and configurations.
Include the following stylesheet inside the <head> tag of your HTML template to pull in the compiled Tailwind CSS file:
<link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">
After that, you can start playing around with the default utility classes from Tailwind CSS. Add the following HTML markup to your template using the utility classes:
<button class="bg-teal-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline py-2 px-3 text-white rounded-sm">
Sign Up
</button>
Let’s break down the meaning of each of the classes:
- bg-teal-500 - adds a teal color for the background of the button
- hover:bg-teal-600 - makes the background color of the button slightly darker when being hovered on
- focus:outline-none - disables the default browser outline styling when the button is being focused
- focus:shadow-outline - adds a shadow outline to the button when being focused
- py-2 - adds padding to the Y-axis (top and bottom)
- px-3 - adds padding to the X-axis (left and right)
- text-white - makes the text inside the button white
- rounded-sm - adds a small border-radius to the button
You may now ask, why so many classes and hustle for a button? Wouldn’t it be better to just have on class, such as .btn, and have the classes added inside the CSS files? Yes, and no.
If you would only have a couple of types of a button throughout your project, it’s absolutely fine to just have a single class for the button, and then maybe a few more for changing the colors or sizing.
However, if your project is quite large and more diverse, you may have many situations when there would need to be a slight change to a button, such as slightly larger or smaller, or a color that is only used in one or two places.
In these cases, using the utility-first method is hugely advantageous, because you don’t need to create an extra class in your CSS file for a single button.
For the example above, you could use py-3 or px-4 to make the button larger, you wouldn’t need to create another class to make a larger type of button. Put it simply: it’s just faster to develop this way.
I recommend you check out the documentation of these utility classes on the official website and play around with them in your HTML template.
Using Tailwind CSS via a Package Manager
It is generally recommended to use a package manager for any project for easier maintainability of dependencies and libraries. The most popular front-end package manager is NPM so we recommend using it to pull it in. Make sure you have Node and NPM installed on your machine before continuing.
If you don’t have a package.json file, make sure to run the following command in your terminal to initiate a config file:
npm init
You’ll be prompted to add a few pieces of information about the project, such as the title, author, version, and so on. For testing purposes, you can just “enter your way through”.
Secondly, run the following command to install Tailwind CSS locally:
npm install tailwindcss
Add Tailwind to your CSS
Create a local main.css file and use @tailwind to inject Tailwind’s base, component, and utilities styles into your CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
These directives will be swapped with the actual CSS code from Tailwind when building the files.
Create a Tailwind config file
If you’d like to customize the utility classes of Tailwind, we highly recommend using the Tailwind configuration file. For example, if you want to easily change colors, sizings, radiuses, shadows, font families, and many more, this is the easiest way to change them with little effort.
Use the Tailwind CLI to generate a configuration file by running the following command in your terminal:
npx tailwindcss init
This will create a boilerplate file with the following content:
// tailwind.config.js
module.exports = {
future: {},
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
We’ll get back to this file after finishing the building tools part of this guide and show you how you can update the colors and other properties of existing classes or even add new classes to your local Tailwind CSS configuration.
Processing Tailwind CSS
This is the final step of configuring Tailwind CSS locally. Add the following two plugins into your tailwind.config.js file for your build chain:
module.exports = {
plugins: [
// ...
require('tailwindcss'),
require('autoprefixer'),
// ...
]
}
For simple projects, you can run the following command in your terminal to process the Tailwind configuration you have set up:
npx tailwindcss build main.css -o output.css
Make sure that the main.css file is the one that imports the directives and that you include the output.css file in your HTML template. The CSS that you need to include in your project is output.css, not main.css.
Using the configuration file
By default, Tailwind will always first look for the tailwind.config.js file and take into account the parameters that you have set up. In this file, you can change the values of the existing utility classes, such as changing the colors, sizings, spacing, font family, and many more. You can also add extra classes to the existing ones.
Let’s go through a few simple examples of usage. Let’s start with a common one, changing the font family.
Changing the font family
First of all, you will need to include a new font family for your project. We recommend using Google Fonts. We like the “Nunito” font family, so after selecting it from Google Fonts, we added it to our HTML template like this:
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
Afterward, including a font, you should go to the tailwind.config.js file and add the following options inside the “theme” key value:
module.exports = {
future: {
// removeDeprecatedGapUtilities: true,
// purgeLayersByDefault: true,
},
purge: [],
theme: {
fontFamily: {
sans: ['Nunito', 'sans-serif'],
display: ['Nunito', 'sans-serif'],
body: ['Nunito', 'sans-serif'],
},
extend: {},
},
variants: {},
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
}
Now run the command that will process the Tailwind configuration file:
npx tailwindcss build styles.css -o output.css
You will now see that the font has changed when viewing your HTML template in your browser.
Adding custom colors
Almost inevitably you will need to either change or add branded colors to your project. Using the configuration file from Tailwind CSS, this process is incredibly easy to do. Add a key-value pair of your new color inside the “extend” object of the configuration file like this:
extend: {
colors: {
primary: '#EA755E',
}
}
Now change the bg-teal-500 and hover:bg-teal-500 classes of the button you have created to bg-primary and hover:bg-primary. Run the command in your terminal to process Tailwind and check out your browser to see how the button now uses the newly added color.
What is so awesome about Tailwind is that the new color will now be used not only for changing background colors but also for changing the color of text, shadows, and many more.
Build Tool Examples
Running the custom Tailwind processing command in your terminal every time you change something in the configuration file can be bothersome and counterproductive. This is where building tools come into play. The official documentation has the most popular building tools such as Webpack, Gulp, Laravel Mix, and some other ones well covered. Check out the officially supported build tools from the documentation.
Get access to free templates and themes used by over 5489 web developers by creating an account at Themesberg.
Top comments (7)
Pro tip: do not use tailwind, it's a mess
You can also create classes to avoid the mess ☺️.
then there is no point in using tailwind anyway, you can just write regular css and achieve the same results with the same amount of code
I partially disagree with you here. The power of Tailwind CSS comes when you need to make small and specific changes (such as spacing, sizing) in certain parts of a UI.
Rather than writing specific styles for a button that needs to be slightly larger in a certain place, it's easier to add a utility class to it right away.
Of course, it is good to have reusable classes for elements that look more or less the same, but it can be bothersome to always switch to the CSS file and create a new class or modify an existing one just to add a few more pixels in spacing, sizing, and so on.
just because it is easier it is not better, you will produce unreadable gibberish and save like 5 seconds of your time, which you will lose eventually by trying to understand your code a few months later
Wat
Agreed. Most CSS frameworks are.