Build Landing Page With Tailwind CSS v3.0 Part 1 — Installation

https://www.frontendmentor.io/challenges/manage-landing-page-SLXqC6P5

So recently Tailwind CSS just updated to version 3.0 in December 9th 2021 where they added so many features such as Just-In-Time all the time, added more colors, Scroll snap API, Multi column layout and so much more, you can read it furthermore in here.

If you dont’know about Tailwind or haven’t heard of it basically it is a CSS framework that has a utility-first class such as flex (display: flex), pt-4 (padding-top: 0.5rem), text-white (color: white) and many more so you don’t have to create your own css class name because I know naming class is sometimes really hard and kinda frustrating. Unlike Bootstrap that has a component class like button “btn btn-primary” so you can use it right away and if you want to customize to your own style you have to overwrite the class, Tailwind here trying to make you create and style your own button. You can check the docs of tailwind here.

Tailwind Button Sample

Button Sample Code

Now in this article, I wanna show you how powerful using Tailwind to create a landing page, without further ado let’s get started. In this example I’m using design from frontendmentor.io which is one of the best website to exercise frontend skill, I recommend it for anyone who want to learn frontend.

Prerequisites

Before you continue, make sure you have these:

1. Have Node JS installed in your local machine.
2. You need to know the basic of html and css.

Done All Of That? Great, Lets Begin

First, download the starter files here and make sure login with your GitHub account so the files can be downloaded.

After you download the files, extract it and open with your favorite code editor, in this case I’m using VS Code.

Now install tailwind using command line:

npm install -D tailwindcss

After it finished installing, create tailwind.config.js file using this command line:

npx tailwindcss init

Now there is a new file tailwind.config.js next open it and add these code to add the paths to all of your template files:

module.exports = {
    content: ["./**/*.html"],  
    theme: {    
        extend: {},  
    },  
    plugins: [],
}

Next create tailwind.css file in src folder and add these:

@tailwind base; 
@tailwind components; 
@tailwind utilities;

these @tailwind directives help you to insert tailwind ‘base’, ‘components’, and ‘utilities’ styles into your CSS. Next step is to run Tailwind CLI tool to scan your template files for classes and build your CSS and don’t forget to add styles in index.html :

<link rel="stylesheet" href="./dist/style.css">

Here is command to run Tailwind CLI:

npx tailwindcss -i ./src/tailwind.css -o ./dist/style.css --watch

Before

Now try open index.html if the font is changes from the default arial then congratulations you just successfully installed Tailwind CSS.

After

Before we finish this tutorial, if you open style-guide.md there is a guide for font family and color we have to use. In tailwind we have to add it manually in tailwind.config.js default font and primary color ‘Bright Red’ and ‘Dark Blue’. Now add ‘Be Vietnam’ font to our index.html file you can search it in fonts.google.com with weights of 400, 500, and 700 or just add these into your head tag before style.css:

<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=Be+Vietnam+Pro:wght@400;500;700&display=swap" rel="stylesheet">

After that, replace the default font of tailwind into font we just added and add the color into tailwind. Copy and paste the code below into tailwind.config.js:

So let me explain, inside theme we have fontFamily there is one property called sans, it is the default font of tailwind and we replaced it into Be Vietnam Pro. Inside extend we have colors there is 2 props primary and secondary, actually you can change it and name it whatever you want but in this case I want it like that to avoid confusion. But why we put colors into extend not in theme, because if you want to replace the default styling of tailwind we put it inside theme BUT if you don’t want to get rid of the default style of tailwind and just want to add it then put it inside extend, so in our case we just want to replace tailwind default font and just added new colors without replacing old colors.

Here is the complete code https://github.com/fajarhidayad/landing-page-tailwind

Demo: https://landing-page-tailwind.vercel.app/

So there you go the installation and setup of Tailwind CSS, next part we are going to build the landing page, So Stay Tune.