DEV Community: Andy Griffiths

How to Build a Mobile-friendly, Fully Responsive Website Navigation Using Tailwind CSS

Andy Griffiths — Tue, 25 May 2021 16:06:49 +0000

Your website’s navigation is probably the single most important element on your page - you’ve got to make sure you get it right.

Yes, writing captivating content for your website is important but this will all be in vain if your users can’t navigate to it.

What makes things even harder, is that you also have to consider the usability of your navigation on countless devices, screen sizes and resolutions.

Luckily for you, there are several techniques and best practices to follow that will help you master the UI and UX of your website’s navigation.

We’ll explore them in this article.

Check out the DEMO
Download the SOURCE CODE

brandymedia / tailwind-responsive-navigation

So what are we building

We’re going to build a mobile-friendly, fully responsive navigation using Tailwind CSS that:

Works across all screen sizes
Uses ~~little to~~ no custom CSS
Implements simple vanilla JavaScript
Doesn’t repeat or duplicate elements
Gives you a great starting point for your own projects

The Code

I believe it would be beneficial from a learning perspective for you to read the rest of the tutorial. I also get that you may be busy and just need to implement the solution.

So here’s the completed code.

index.html

<!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>Responsive Navigation</title>
    <link rel="stylesheet" href="public/dist/styles.css">
</head>
<body>
    <h1 class="text-center my-10 text-4xl">Responsive Navigation</h1>
    <nav class="flex flex-col md:flex-row bg-gray-200 p-5">
        <div class="flex flex-wrap justify-between items-center">
            <div>
                Logo goes here...
            </div>
            <div class="burger md:hidden">
                <div class="bar1 h-1 w-7 my-1.5 bg-gray-800 duration-300"></div>
                <div class="bar2 h-1 w-7 my-1.5 bg-gray-800"></div>
                <div class="bar3 h-1 w-7 my-1.5 bg-gray-800 duration-300"></div>
            </div>
        </div>
        <ul class="links md:flex flex-col md:flex-row text-center w-full md:justify-around hidden">
            <li>
                <a href="#" class="block p-5">
                    Home
                </a>
            </li>
            <li>
                <a href="#" class="block p-5">
                    Services
                </a>
            </li>
            <li>
                <a href="#" class="block p-5">
                    About
                </a>
            </li>
            <li>
                <a href="#" class="block p-5">
                    Contact
                </a>
            </li>
            <li>
                <a href="#" class="block p-5">
                    Blog
                </a>
            </li>
        </ul>
    </nav>
    <script src="public/dist/script.js"></script>
</body>
</html>

script.js

const burger = document.querySelector('.burger');
const links = document.querySelector('.links');
const bar1 = document.querySelector('.bar1');
const bar2 = document.querySelector('.bar2');
const bar3 = document.querySelector('.bar3');

burger.addEventListener('click', () => {
    links.classList.toggle('hidden');
    bar1.classList.toggle('transform');
    bar1.classList.toggle('translate-y-1.5'); 
    bar1.classList.toggle('-rotate-45');
    bar2.classList.toggle('hidden');
    bar3.classList.toggle('transform');
    bar3.classList.toggle('-translate-y-1');        
    bar3.classList.toggle('rotate-45');
});

If you do have the time, then please read on...

Initial setup

As I’m sure you’ve guessed, we’re going to be using the amazing Tailwind CSS framework for all of our CSS styling in this project.

You could just include a link to their CDN but then you’re not going to benefit from all of the fantastic features.

So let’s include TailwInd CSS via NPM.

npm i tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli

Once this has finished installing, we need to set up a couple more things before we can code our navigation.

Open the package.json file, as we need to add a couple of scripts to allow us to compile our Tailwind CSS later.

"build": "postcss ./src/styles.css -o ./public/dist/styles.css",
"prod": "NODE_ENV=production postcss ./src/styles.css -o ./public/dist/styles.css"

In your terminal, run npx tailwindcss init -p to create our tailwind.config.js and postcss.config.js files, then open up the tailwind.config.js file and update darkMode to class.

Before we can compile our CSS, we need to create the source CSS file.

Create the src folder mkdir src then cd src in to the directory and create the CSS file touch styles.css.

Add the included to the styles.css file

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

Then run npm run build. This should output our compiled styles to our public/dist/styles.css file.

HTML markup - the structure (& style)

Now we have included Tailwind CSS in our project and compiled the development bundle, it’s time to start writing the HTML markup.

If you’re already familiar with Tailwind CSS you’ll know that to style HTML elements, you add various ‘utility’ classes inline. This saves a lot of time writing custom CSS, speeding up development considerably.

First things first, let's get our 'boilerplate' set out.

<!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>Responsive Navigation</title>
</head>
<body>

</body>
</html>

If you're using VS Code, you can automagically write the above code by hitting ! then tab.

You'll then need to add a link to your compiled styles.css in your head tag.

    ...
    <link rel="stylesheet" href="public/dist/styles.css">
</head>

Next, within the body tag, let's add the HTML for the structure of the actual navigation.

<nav>
    <ul class="links">
        <li>
            <a href="#">
                Home
            </a>
        </li>
        <li>
            <a href="#">
                Services
            </a>
        </li>
        <li>
            <a href="#">
                About
            </a>
        </li>
        <li>
            <a href="#">
                Contact
            </a>
        </li>
        <li>
            <a href="#">
                Blog
            </a>
        </li>
    </ul>
</nav>

The above code should be pretty self-explanatory but to recap - we create a nav tag and then inside we add an unordered list for our links, which is common convention for website navigations.

Next, let's use Tailwind's utility classes to add some styling as it's looking a little bit boring.

There are a few ways we could approach the layout of our navigation, in this case, we are going to use flexbox. This will give us all the tools we need to be able to respond to the various screen sizes we need to cater for.

Mobile web browsing overtook desktop web browsing several years ago, so it makes sense to build the navigation mobile-first. We'll concentrate on getting this to work on mobile (smaller screens) and then adapt this to work on desktops later.

Most mobile devices have limited horizontal real estate so it's common practice to arrange your navigation's links beneath one another in a vertical alignment. We will use Tailwind's flexbox utility classes to achieve this.

<nav class="flex flex-col md:flex-row bg-gray-200 p-5">
    <ul class="links flex flex-col text-center">
        ...
    </ul>
</nav>

What have we just done? We set the ul as flexbox with flex and then positioned the links in a column so they stack with flex-col then finally centred the text with text-center.

Because mobile devices don't have hover, it's really important each link has enough spacing so the user can easily press the desired option. Let's add some padding to each link to achieve this.

<li>
    <a href="#" class="block p-5">
      Home
  </a>
</li>

This is starting to look and work a lot better now. It's not ideal having the links taking up the entire vertical space of the screen though. We need a way to hide these when not in use.

To achieve this, we'll create a custom burger style button that will use some basic vanilla JavaScript to hide and show the links as they're required. Let's add the basic HTML structure.

<div>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<ul class="links flex flex-col text-center">
    ...
</ul>

One of the goals whilst building this navigation, was to use ~~little to~~ no custom CSS if possible. With this in mind, we're now going to use more of Tailwind's CSS utility classes to build the custom burger menu icon.

<div class="flex flex-wrap justify-between items-center">
    <div class="burger">
        <div class="h-1 w-7 my-1.5 bg-gray-800"></div>
        <div class="h-1 w-7 my-1.5 bg-gray-800"></div>
        <div class="h-1 w-7 my-1.5 bg-gray-800"></div>
    </div>
</div>

The navigation is now laid out in a sensible way for smaller devices such as mobiles. However, on desktop, the links are taking up too much of the space and would be better placed horizontally. Let's fix that now.

Also, the burger menu is not required on bigger screens, so we will hide that too.

Tailwind conveniently provides responsive utility modifiers classes that lets us target various screen sizes. In our example, we'll set the links to align next to each other horizontally with flex-row and hide the burger with the hidden class. Notice the md: modifier pre-fixed to the classes.

    <div>    
        <div class="burger md:hidden">
        <div class="h-1 w-7 my-1.5 bg-gray-800"></div>
        <div class="h-1 w-7 my-1.5 bg-gray-800"></div>
        <div class="h-1 w-7 my-1.5 bg-gray-800"></div>
    </div>
</div>
<ul class="links md:flex flex-col md:flex-row text-center w-full md:justify-around">

Before we tackle the JavaScript to hide and show the links on mobile, I want to add a section where we can add our logo or site name. So let's update our HTML markup.

<nav class="flex flex-col md:flex-row bg-gray-200 p-5">
    <div>
        <div>
            Logo goes here...
        </div>
        <div class="burger md:hidden">
            <div class="bar1 h-1 w-7 my-1.5 bg-gray-800"></div>
            <div class="bar2 h-1 w-7 my-1.5 bg-gray-800"></div>
            <div class="bar3 h-1 w-7 my-1.5 bg-gray-800"></div>
        </div>
    </div>
    <ul class="links md:flex flex-col md:flex-row text-center w-full md:justify-around hidden">

You'll notice the links have now disappeared on mobile, this is in preparation for our JavaScript. We'll write that now.

In the public/dist directory create a new file called script.js and link in your HTML file just before the closing body tag.

    <script src="public/dist/script.js"></script>
</body>

Open the script.js file and add the following code.

const burger = document.querySelector('.burger');
const links = document.querySelector('.links');

burger.addEventListener('click', () => {
    links.classList.toggle('hidden');
});

You should now have a fully functional mobile-friendly, responsive navigation.

To add the cherry on top, let's add an animation to the burger icon.

Update your HTML to...

<div class="burger md:hidden">
    <div class="bar1 h-1 w-7 my-1.5 bg-gray-800 duration-300"></div>
    <div class="bar2 h-1 w-7 my-1.5 bg-gray-800"></div>
    <div class="bar3 h-1 w-7 my-1.5 bg-gray-800 duration-300"></div>
</div>

Then update your script.js file to...

const burger = document.querySelector('.burger');
const links = document.querySelector('.links');
const bar1 = document.querySelector('.bar1');
const bar2 = document.querySelector('.bar2');
const bar3 = document.querySelector('.bar3');

burger.addEventListener('click', () => {
    links.classList.toggle('hidden');
    bar1.classList.toggle('transform');
    bar1.classList.toggle('translate-y-1.5'); 
    bar1.classList.toggle('-rotate-45');
    bar2.classList.toggle('hidden');
    bar3.classList.toggle('transform');
    bar3.classList.toggle('-translate-y-1');        
    bar3.classList.toggle('rotate-45');
});

That wraps up this tutorial.

If you enjoyed the tutorial, please make sure you follow me here on dev.to and Twitter so you don’t miss out when new tutorials are available.

Tailwind CSS Contact Form with a node.js Form Handler - Part 2

Andy Griffiths — Tue, 23 Feb 2021 19:59:14 +0000

If you followed along with part 1 of this mini-series, you should have a beautiful contact form styled with Tailwind CSS.

In Part 2, we’re going to build the back-end to handle the form submissions using node.js, Express and SendGrid.

Download the SOURCE CODE

brandymedia / tailwind-contact-form-handler

As we did in part 1, we’re going to be using npm to manage our dependencies.

Install Our Dependencies

Create a new project folder mkdir form-handler, set this as your current directory cd form-handler and then run npm init -y to create our package.json file which we will need for our dependencies.

Let's now pull in all the dependencies we're going to need. Run npm i express @sendgrid/mail dotenv. We also need a dev dependency, so run npm i -D nodemon.

If that all went a bit over your head, don’t worry, I’ll explain what just happened.

In your project directory, you should now see a new directory node_modules - this contains all of the dependencies (third party code) we are going to utilise in our project.

If you open up your package.json file, you will see we have 3 dependencies under dependencies and 1 under devDependencies. The first 3 will be utilised in our final code base, the devDependencies is only used for development purposes.

If you want to learn more about what each of these dependencies does beyond the scope of this tutorial, then check the links below.

Express
SendGrid
dotenv
nodemon

Now we have everything installed, there are a couple more things we need to do before we can write the actual code to build the contact form handler.

Setup and Configure SendGrid

In order to be able to email the form responses, we need a mail service that can handle the form request. In this case, we’re going to use SendGrid.

If you haven't already, head over to SendGrid and register for a free account.

Once you have access to your account, from the dashboard you will need to create an API Key. Click on Settings > API Keys and then select Create AP Key.

For the purpose of this tutorial, we only need limited access to the API, so name your key something suitable, so you remember what it's for and then select Restricted Access. Allow access just for Mail Send, then click Create & View.

You will then be presented with your API Key. Make sure you copy this somewhere safe, as they only show you this once.

You will also need to verify your sender identity to be able to send any emails.

Now we have our API Key and have verified our sender identity, head back to our app and let’s create the file we need to hold this API key. Create a .env file in the root of your project touch .env.

Open up the file and add our key like so:

// .env
SENDGRID_API_KEY=YOUR_KEY_GOES_HERE

Building the Mail Server

Next, let’s create our app.js file with touch app.js and then open it up.

To be able to use the SendGrid API, we will need to import the SendGrid library, access the SendGrid API Key variable from within our .env config file and then tie them together.

// app.js
require('dotenv').config();
const sgMail = require('@sendgrid/mail');
sgMail.setApiKey(process.env.SENDGRID_API_KEY);

While we’re at it, we may as well import the Express library and set this up.

// app.js
const express = require('express');
const app = express();

To make things easier to configure when we push this to production, we will also add a PORT variable to our .env config file and pull this in to our app.js.

// .env
PORT=3000

// app.js
const port = process.env.PORT || 3000;

We’re now ready to set up a simple server and add a route using Express, which will allow us to accept a POST request to our app which we can then use to handle the form submission.

In our app.js file we have access to Express with the app variable, so let’s use that to set up the server and create our route.

// app.js
app.listen(port, (error) => {
    if (error) throw error;
    console.log(`Listening on port ${port}`);
});

app.post('/’, (req, res) => {
    // handle form submission
});

To be able to parse the data we receive from the form submission we need to add a couple of middlewares. Don’t worry too much if you don’t understand what a middleware is or what it does, just know we need these 2 below.

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

At this point, if we run node app.js we should get a console log telling us that our app is Listening on port 3000. This tells us that the server is running. However, we don’t want to have to continually start up the server every time we make a change in our app.

This is why we installed the nodemon package as a dev dependency earlier.

To set this up, we need to add a couple of custom scripts to our package.json file..

// package.json
  "scripts": {
    "prod": "node app.js",
    "dev": "nodemon app.js"
  },

Notice we added one for prod and one for dev - they are very similar apart from one uses node and the other nodemon.

When building our app locally, we can spin up the server using npm run dev. This will allow us to edit our app without having to constantly restart the server. This is because it uses the nodemon package which we set up in the package.json file.

So let’s run that now npm run dev. You should see a couple of nodemon message and then Listening on port 3000, this shows it is working.

At the minute we don’t have any code inside of our post route - let’s take a look at that next.

From part 1 of this tutorial, we created a contact form styled with TailwindCSS. If you look back at this code, you will see there are 3 input fields that we need to pull the data from message, name & email.

When a user submits the forms, these values will be POSTed to our mail server and we can then access these from the request using req.body.

Using destructuring, we can set these values to local variables in our app.

const {
    message,
    name,
    email
} = req.body;

This effectively looks at the request body and assigns the data to variables with corresponding names.

We can then use the data stored in these variables to compose an email to send to ourselves to get the form submission. We will use template literals to easily allow us to embed variables within our text.

    const msg = {
        to: 'test@example.com', // Change to your recipient
        from: 'test@example.com', // Change to your verified sender
        subject: 'Contact Form Submission',
        text: `Message: ${message} Name: ${name} Email: ${email}`,
        html: `
            <strong>Message:</strong>
            <p>${message}</p>
            <strong>Name:</strong>
            <p>${name}</p>
            <strong>Email:</strong>
            <p>${email}</p>
        `,
    }

Now we have our data ready to send to SendGrid, let’s use sgMail to do just that.

    sgMail
        .send(msg)
        .then(() => {
        console.log('Email sent')
        res.end()
    })
        .catch((error) => {
        console.error(error)
        res.end()
    })

We should now have a working simple mail server that can handle our submissions from our contact form.

If we’re going to use this mail server in a production environment, then we would need to implement both client-side and server-side validation to make sure we are sending, receiving and handling correctly formatted and safe data.

For now, this is beyond the scope of this tutorial. I may add a third part to the series covering this if there's enough interest.

Sending a Contact Form Request

Open up the contact form we created in part 1 of the series and update the form action to point to our mail server API and add the method attribute set to post.

<form action="http://localhost:3000" method="post">

Make sure in your HTML that the <button> type is set to submit.

<button type="submit">

Make sure our node server is running with npm run dev and then open the contact form in our browser. Add some dummy data to the form fields and hit Send...

...if everything worked correctly, we should see an Email sent message in our console and have received an email with the data we sent. If you have not received the email, check your JUNK folder.

You may have noticed that the form has redirected to http://localhost:3000/. This isn’t great. Ideally, we would redirect back to the original page the form was posted from, or a dedicated success page.

We could hard code the redirect URL into the Express route, but this isn't that flexible. Instead, we'll add this via a small piece of JavaScript in our contact form.

Inside our <form> tag, at the top, add a hidden field - this will hold the URL of the page we submit the form from.

<input type="hidden" name="redirect" class="redirect">

Now let’s write the JavaScript to populate the hidden field we’ve just added. At the bottom of our code, just inside our <body> tag add a script tag with the following code.

<script>
    const redirectField = document.querySelector('.redirect');
    const pageUrl = window.location.href;
    redirectField.value = pageUrl;
</script>

If you inspect your HTML with your developer tools, you should now see the redirect input has a value of something like http://127.0.0.1:5500/public/index.html. We now need to pull this in to our mail server.

Update our form handler code to add the redirect value.

const {
        message,
        name,
        email,
        redirect
} = req.body;

We can now change the res.end() to res.redirect(redirect) in our send email code.

    sgMail
        .send(msg)
        .then(() => {
        console.log('Email sent')
        res.redirect(redirect)
    })
        .catch((error) => {
        console.error(error)
        res.end()
    })

This now redirects us back to the page we submitted the form from but from a user experience point of view it is still lacking in terms of any feedback as to whether the form has been submitted successfully. Let’s fix that.

Instead of just redirecting back to the exact URL we got from our redirect variable, we could use a query string to tell the user their form was a success.

Change res.redirect(redirect) to res.redirect(${redirect}?submit=true).

Now if we submit a form successfully, our mail server will forward us back to our original URL with an additional query string ?submit=true. We now need to capture this in our form code, so we can show a success message.

Inside our <form> tag right at the top, add an empty div

<div class="form-message"></div>

Then add the JavaScript to handle this.

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const formMessage = document.querySelector('.form-message');

if(urlParams.has('submit')) {
    if(urlParams.get('submit') === 'true') {
        formMessage.innerHTML = `<div class="mb-5 p-3 max-w-xl mx-auto shadow-md sm:border-0 md:border md:border-gray-900 md:dark:border-gray-100 bg-green-400 dark:bg-green-400 text-gray-900 dark:text-gray-900">Thanks for your enquiry, someone will be in touch shortly.</div>`;
        formMessage.scrollIntoView();
        window.scrollBy(0, -20);
    }
}

Now, whenever the redirect includes ?submit=true you will be presented with the success message. As we have added new classes to our HTML, we will need to make sure we run npm run build to make sure these styles are included in the output of our CSS file.

That wraps it up.

You should now have a fully functioning contact form that can email the submissions to your email address. There are other considerations to make when building publicly accessible forms, like validation, sanitisation etc.

I may look to add a third part to the series, which will cover this in more detail.

brandymedia / tailwind-contact-form-handler

Tailwind CSS Contact Form with a node.js Form Handler - Part 1

Andy Griffiths — Wed, 10 Feb 2021 15:32:03 +0000

The chances are, if you have a website you’ll need a way for your customers to be able to contact you. Step up the humble contact form.

Using some basic HTML and the power of Tailwind CSS, we can quickly build out a stylish contact form and add it to our website.

We’ll also need a way to receive any form requests, so in Part 2 we’ll build a simple mail server API using node.js, Express and SendGrid.

Check out the DEMO
Download the SOURCE CODE

brandymedia / tailwind-contact-form

Front-end first

Both our front-end (contact form) and back-end (form handler) are going to be using npm for some dependencies, so make sure you have the latest version installed locally on your computer.

npm comes bundled with node.js, so you can get the download from nodejs.org.

Once you have node.js & npm installed locally, create a new folder for your project mkdir contact-form.

Next, navigate to our project with cd contact-form.

Now let’s initiate npm with the npm init -y command in the terminal. The -y flag simply answers yes to all the default questions, feel free to manually set this up by omitting this flag, or in the package.json file later.

Before we go any further, I just wanted to point out that Tailwind CSS can be used by simply using their dedicated CDN, as per their docs - however, this does not give us all of the functionality we need and is not recommended.

Instead, we are going to install this and use it as a PostCSS plugin.

So, let’s get the dependencies we require installed with npm i tailwindcss@latest @tailwindcss/forms postcss@latest autoprefixer@latest postcss-cli.

Once this has finished installing, we need to set up a couple more things before we can code our form.

Open the package.json file, as we need to add a couple of scripts to allow us to compile our Tailwind CSS later.

"build": "postcss ./src/styles.css -o ./public/dist/styles.css",
"prod": "NODE_ENV=production postcss ./src/styles.css -o ./public/dist/styles.css"

As a follow on from my last post Build a JavaScript and Tailwind CSS Theme Switcher I want to be able to use dark mode, so we need to set this up in Tailwind.

Build a JavaScript and Tailwind CSS Theme Switcher

Andy Griffiths ・ Feb 4 '21

#javascript #tailwindcss #css #webdev

In your terminal, run npx tailwindcss init -p to create our tailwind.config.js and postcss.config.js files, then open up the tailwind.config.js file.

First add the forms plugin.

plugins: [
    require('@tailwindcss/forms')
  ],

Then change darkMode to class.

Before we can compile our CSS, we need to create the source CSS file.

Create the src folder mkdir src then cd src in to the directory and create the CSS file touch styles.css.

Add the included to the styles.css file

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

Then run npm run build. This should output our compiled styles to our public/dist/styles.css file.

With all the setup out of the way, let’s get some coding done. Create an index.html file in our public directory touch public/index.html and then open it up.

As I’m using Visual Studio Code as my text editor, I'll add my HTML boilerplate code by pressing ! and then tab.

Next, update the title, add our CSS as a link tag and pull in Font Awesome.

<title>HTML & Tailwind CSS Contact Form</title>
<link rel="stylesheet" href="dist/styles.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

Tailwind CSS is a bit different from other CSS frameworks that you may have used before, such as Bootstrap or Foundation. Tailwind CSS does not assume any styles on your HTML elements.

With this in mind, we’ll need to style each of our HTML elements with CSS classes, as they will not have any default styles out-of-the-box. As this will all be controlled by adding utility classes to our HTML markup, this means we won’t need to write a single line of CSS.

The structure of our HTML is going to be straight forward, as we’re just going to create a form centralised on the page. Let’s create the bare-bones.

<form>
    <div>
        <!-- heading -->
    </div>
    <div>
        <!-- message field -->
    </div>
    <div>
        <!-- name field -->
    </div>
    <div>
        <!-- email field -->
    </div>
    <div>
        <!-- button -->
    </div>
</form>

This now gives us a good skeleton - let’s start populating these sections with our content.

Let’s create the styles for our form element. Remember, we do this by adding various CSS classes directly to the HTML markup.

<form action="" class="mt-20 p-10 max-w-xl mx-auto shadow-md sm:border-0 md:border md:border-gray-900 md:dark:border-gray-100 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100">
    <!-- form content -->
</form>

There’s quite a few classes required to get the desired design, so I’ll briefly explain what each one does. If you need further clarification, then check out the Tailwind CSS Documentation.

my-20 <!-- adds 5rem vertical margin -->
p-10 <!-- adds 2.5rem padding -->
max-w-xl <!-- sets the max width to 36rem  -->
mx-auto <!-- sets left and right margin auto to center -->
shadow-md <!-- adds a medium box shadow -->
sm:border-0 <!-- removes any border on small devices -->
md:border <!-- adds a border on medium devices and above -->
md:border-gray-900 <!-- sets the border color to a dark grey (light mode) -->
md:dark:border-gray-100 <!-- sets the border color to a light grey (dark mode) -->
bg-gray-100 <!-- sets the background color to a light grey (light mode) -->
dark:bg-gray-800 <!-- sets the background color to a dark grey (dark mode) -->
text-gray-900 <!-- sets the text color to a dark grey (light mode) -->
dark:text-gray-100 <!-- sets the text color to a light grey (dark mode) -->

Now that you have a better idea how to style HTML elements with Tailwind CSS’s utility classes, I’ll give you the rest of the markup verbatim. Feel free to look over the styles and reference these in the Tailwind CSS Documentation to see what each class does.

<body class="bg-white dark:bg-gray-900">
    <div class="flex w-full justify-around items-center bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white py-5">
        <div class="theme-switcher">
            <button class="theme-switcher-button theme-switcher-light bg-gray-200 border-gray-200 border-2 dark:bg-black dark:border-black p-2 focus:outline-none" title="Light"><i class="fas fa-sun pointer-events-none"></i> Light</button><button class="theme-switcher-button theme-switcher-dark bg-gray-200 border-gray-200 border-2 dark:bg-black dark:border-black p-2 focus:outline-none" title="Dark"><i class="fas fa-moon pointer-events-none"></i> Dark</button><button class="theme-switcher-button theme-switcher-auto bg-gray-200 border-gray-200 dark:bg-black border-2 dark:border-black p-2 focus:outline-none" title="Auto"><i class="fas fa-adjust pointer-events-none"></i> Auto</button>
        </div>
    </div>
    <form action="" class="my-20 p-10 max-w-xl mx-auto shadow-md sm:border-0 md:border md:border-gray-900 md:dark:border-gray-100 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100">
        <div class="mb-10">
            <h1 class="font-bold text-4xl mb-3">Get in touch</h1>
            <p class="font-medium text-lg mb-5">Send us a quick message and we'll get back to you shortly.</p>
            <hr class="border-gray-900 dark:border-gray-100">
        </div>
        <div class="mb-5">
            <label for="message" class="text-lg flex justify-between items-end"><span>Message</span><span class="text-xs text-red-500">Required</span></label>
            <textarea name="message" id="message" cols="30" rows="10" class="shadow-md mt-1 block w-full sm:text-sm rounded-none border-gray-900 dark:border-gray-100 bg-white dark:bg-gray-900"></textarea>
        </div>
        <div class="mb-5">
            <label for="name" class="text-lg flex justify-between items-end"><span>Name</span><span class="text-xs text-red-500 ">Required</span></label>
            <div class="mt-1 flex shadow-md">
                <span class="inline-flex items-center px-3 rounded-none border border-r-0 border-gray-900 dark:border-gray-100"><i class="fas fa-user"></i></span>
                <input type="text" name="name" class="flex-1 block w-full sm:text-sm rounded-none border border-gray-900 dark:border-gray-100 bg-white dark:bg-gray-900">
            </div>
        </div>
        <div class="mb-5">
            <label for="email" class="text-lg flex justify-between items-end"><span>Email</span><span class="text-xs text-red-500">Required</span></label>
            <div class="mt-1 flex shadow-md">
                <span class="inline-flex items-center px-3 rounded-none border border-r-0 border-gray-900 dark:border-gray-100"><i class="fas fa-envelope"></i></span>
                <input type="email" name="email" class="flex-1 block w-full sm:text-sm rounded-none border border-gray-900 dark:border-gray-100 bg-white dark:bg-gray-900">
            </div>
        </div>
        <div>
            <button type="button" class="font-medium shadow-md rounded-none p-2 w-full focus:outline-none focus:ring-2 focus:ring-offset-2 border border-gray-900 dark:border-gray-100 bg-gray-800 dark:bg-gray-200 text-gray-200 dark:text-gray-800 hover:bg-gray-900 dark:hover:bg-gray-100"><i class="fas fa-check"></i> Send</button>
        </div>
    </form>
</body>

You should now have a pretty nice looking contact form built with HTML and Tailwind CSS.

That wraps up this part of the tutorial.

In the next part, we’re going to look at building a form handler which will email us when a user submits a form. This will be built with node.js, Express and SendGrid. We’ll also look at some client-side and server-side form validation.

Please make sure you follow me here on dev.to and Twitter so you don’t miss out when the next part is available.

Build a JavaScript and Tailwind CSS Theme Switcher

Andy Griffiths — Thu, 04 Feb 2021 10:24:36 +0000

Working on a screen all day (and often night), your eyes can take a real battering. In September 2019, Apple released Dark Mode on iOS 13, I've not looked back since.

At first, not all apps supported this but slowly over the subsequent months to follow, a lot more have seen the light; or in this case, turned it out.

Check out the DEMO
Download the SOURCE CODE

brandymedia / tailwind-theme-switcher

A JavaScript & Tailwind CSS theme switcher.

Fad or Fab

Following in the steps of native mobile apps, websites have also seen a surge in theme switchers allowing their users to switch between light and dark modes.

On the surface, this may seem a little novel and gimmicky. In reality, I actually think there's some real utility in offering protection for your users' eyes.

Personally, I’ve suffered with migraines and headaches over the years and even the slightest respite from unnecessary screen brightness is always welcomed.

What We’re Going to Build

With rapid advancements in modern JavaScript and the popularity of the Utility First CSS framework Tailwind CSS, I thought it would be fun and also useful to combine the 2 to build a theme switcher.

The theme switcher will have 3 modes - dark, light and auto. The first 2 are pretty self-explanatory. The third auto option is going to utilise JavaScript's window.matchMedia method. This will detect the display preferences of the user's device to automagically select either dark or light accordingly.

Luckily Tailwind CSS already supports dark mode out-of-the-box, so most of the heavy lifting will be done in JavaScript, albeit in under 60 lines of code so don’t worry.

No need to Reinvent the Wheel

To boost our productivity straight out of the gate, we’re going to be using the excellent Tailwind CSS and PostCSS starter template from Shruti Balasa @thirusofficial.

You can clone or download this directly from GitHub - https://github.com/ThirusOfficial/tailwind-css-starter-postcss then follow the set up instructions in the README.md file.

This will give us an environment set up ready to use where we can compile Tailwind CSS with ease.

Getting Down to Business

Once you’ve got your copy of the starter template set up, it’s time to get stuck in and write the markup and JavaScript we’ll need to get this working.

First step, create our index.html and app.js files:



touch public/index.html
touch public/app.js

I’m using Visual Studio Code for my code editor which has built in support for Emmet which speeds up your workflow when writing your HTML.

In our index.html file, type ! tab. This will give us our HTML boilerplate code.

Next, we’ll update our title tag to Theme Switcher and then call our javascript & css files and add Font Awesome for some icons.



<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="dist/styles.css">
<script defer src="app.js"></script>

Notice that the link to our CSS includes dist as this is where PostCSS outputs our compiled CSS.

Before writing the JavaScript which will give us our interactivity, we’ll need to first write our HTML within our index.html file.

Nothing too scary here, just basic HTML tags styled with Tailwinds CSS utility classes.



<div class="flex w-full justify-around items-center fixed bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white py-5">
    <div class="theme-switcher">
        <button class="theme-switcher-button theme-switcher-light bg-gray-200 border-gray-200 border-2 dark:bg-black dark:border-black p-2 focus:outline-none" title="Light"><i class="fas fa-sun pointer-events-none"></i> Light</button><button class="theme-switcher-button theme-switcher-dark bg-gray-200 border-gray-200 border-2 dark:bg-black dark:border-black p-2 focus:outline-none" title="Dark"><i class="fas fa-moon pointer-events-none"></i> Dark</button><button class="theme-switcher-button theme-switcher-auto bg-gray-200 border-gray-200 dark:bg-black border-2 dark:border-black p-2 focus:outline-none" title="Auto"><i class="fas fa-adjust pointer-events-none"></i> Auto</button>
    </div>
</div>
<div class="flex w-full h-screen justify-center items-center bg-white dark:bg-gray-800">
    <h1 class="text-5xl text-gray-900 dark:text-white">Hello World!</h1>
</div>

There may look like there’s a ton of code here. The HTML is actually quite small but the way Tailwind works, it uses lots of CSS classes to style the elements, so it can look quite verbose.

Don’t worry too much about this for now. In the main it should be quite self explanatory what each class does, but if you want to learn more then check out the Tailwind CSS docs https://tailwindcss.com/docs.

One class to draw your attention to is the dark: variant class. When the dark class is set on the html or body elements, these utility classes allow us to control the styles for when the user has the Dark mode enabled.

If you manually add the class dark to the html tag, you will notice this is not quite working yet. We'll need to configure the tailwind.config.js file first.

Open up tailwind.config.js which should be in the root of your project directory. Then update darkMode to class.



darkMode: 'class',

Still no luck? That's because we need to recompile Tailwind to make sure the dark variants are added to our styles.css. So run npm run build again.

If you check your web page again, you should now see it's switched to dark mode, cool.

However, we can’t expect our website users to manually add the dark class to the markup to change themes, so we need to write the JavaScript to do this automatically when the user toggles the theme.

Remove the dark class from the html tag, as we don’t need this anymore.

Let’s open up our app.js file and get cracking.

First thing I like to do to avoid any embarrassing issues later is to make sure the app.js file is linked up correctly.

In our app.js file write:



console.log(‘Yep’);

Then in our browser, open up our developer tools and open the console tab.

We should see it outputs Yep - great, this is working, so you can delete the console.log(‘Yep’); from app.js now.

The code we’re going to write in our app.js file is going to consist of 3 main JavaScript concepts; DOM Manipulation, Event Listeners and Functions.

We want to listen for an event when a user clicks the options on our theme switcher and then run the necessary function to update the styles of our page.

To be able to listen for an event and manipulate the DOM, we first need to select the relevant HTML element with our JavaScript and set it inside of a variable so we can access this later on in our code.

We do this by querying the document for a specific element.



const themeSwitcher = document.querySelector('.theme-switcher');

Once we've grabbed our element, we can then add an event lister to detect when the user clicks on our theme switcher.



themeSwitcher.addEventListener('click', (e) => {
    // code run when user clicks our element
});

Now we need to write a few functions to hold the code we want to run when the click event is fired.



function getTheme() {
    // gets the current theme selected
}

function setTheme() {
    // sets the theme
}

function setActive() {
    // adds active state to the buttons
}

The default behaviour we want in our code will be to look to see if the user has selected a display preference on their device (light or dark) and then whether they have implicitly set an option using our theme switcher.

If they have selected an option on the theme switcher, then this will take precedence over the device preference.

We’re going to keep track of the users preference using JavaScripts localStorage property as this allows us to store data across browser sessions, so we can still access this even if the user closes their tab.

So let's work on the getTheme function first, checking if the user has manually set a preference for their theme.



const localTheme = localStorage.theme;

This code looks in our browsers local storage for the key theme and if it exists, sets our localTheme variable to the corresponding value.

There are 3 possibilities here:

Dark mode has been selected in the theme switcher, so localTheme will equal dark
Light mode has been selected in the theme switcher, so localTheme will equal light
Neither Dark or Light mode have been selected in the theme switcher so we fall back to the device preference if one has been set.

Let's set that conditional code up to catch each case.



if (localTheme === 'dark') {
    // user has manually selected dark mode
} else if (localTheme === 'light') {
    // user has manually selected light mode
} else {
    // user has not manually selected dark or light
}

The logic is now if the localTheme set in the localStorage of the browser is set to Dark then we use javascript to set a dark class on the root element of the document, in this case the html element.



document.documentElement.classList.add('dark');

If the localTheme is set to Light then we need to remove the dark class from the root element.



document.documentElement.classList.remove('dark');

Finally, if there are no themes set locally then we use the auto option, which either adds or removes the class depending on what preference is set on the device.

Our getTheme function now looks like this:



function getTheme() {
    const localTheme = localStorage.theme;

    if (localTheme === 'dark') {
        document.documentElement.classList.add('dark');
    } else if (localTheme === 'light') {
        document.documentElement.classList.remove('dark');
    } else {
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    }
}

If we now call the getTheme function within the themeSwitcher event listener, next time we click any of the options, the code will run.

If you give it a try, then you may notice that either nothing changed, or it has changed to dark mode. Currently the way our code is set up, it will look to see if our device has a display preference and then it will set that.

We now need to hook up the buttons, so they can actually set the theme to override our devices default. So let's create our setTheme function.



function setTheme(e) {
    // Set our theme choice
}

Notice that we are using a parameter in this function, this is because we need to be able to detect which button we clicked in our theme switcher, so we need to hook in to the event, or e for short.

Let’s set the element we’ve clicked in a variable using the events target property.



let elem = e.target;

Then set up an other conditional block of code to decide what we need to do based off which element was clicked by the user.



function setTheme(e) {
    let elem = e.target;

    if (elem.classList.contains('theme-switcher-dark')) {
        localStorage.theme = 'dark';
    } else if (elem.classList.contains('theme-switcher-light')) {
        localStorage.theme = 'light';
    } else {
        localStorage.removeItem('theme');
    }
}

To explain the above code in more detail. We’re saying if the user clicks the button with the class theme-switcher-dark then set the theme locally in localStorage to dark.

Else if the user clicks the button with the class theme-switcher-light then set the theme locally in localStorage to light.

Finally, if the user clicks the auto option, then we remove the theme key from localStorage and then we can fall back to the users device default.

To make sure we run the code in this function when a user clicks, we need to call this inside the themeSwitcher event listener.



themeSwitcher.addEventListener('click', (e) => {
    setTheme(e);
    getTheme();
});

Notice we pass the event as an argument from the click through the function so we can pick it up in our functions code.

Now we should be able to switch between the light and dark themes with the buttons we created in our HTML. Nearly there.

You’ve probably noticed that if we reload the page when auto is selected, it always defaults to the light theme. We need to make sure we run the getTheme function when we load the page. We can do this with another event listener.



window.addEventListener('load', () => {
    getTheme();
})

The code above listens for the page load event and then runs the function inside, which does the job.

To enable the theme change when the user updates their device settings, without them having to refresh their web page, we can add one last event listener.



window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    getTheme();
});

At this stage all of our functionality is working as expected but the UI is not great as it's not obvious which option has been selected. Let's fix that.

We will add a setActive function which will add a is-active class to the selected button, allowing us to add some CSS styles to identify which option has been selected.



function setActive(selectedButton) {
    const themeSwitcherButtons = document.querySelectorAll('.theme-switcher-button');
    themeSwitcherButtons.forEach((button) => {
        if (button.classList.contains('is-active')) {
            button.classList.remove('is-active');
        }
    })
    let activeButton = document.querySelector(`.theme-switcher-${selectedButton}`);
    activeButton.classList.add('is-active');
}

In our getTheme function we will set this up and then call the function.



function getTheme() {
    const localTheme = localStorage.theme;
    let selectedButton;

    if (localTheme === 'dark') {
        document.documentElement.classList.add('dark');
        logoSvg[0].style.fill = 'rgb(255,255,255)';
        selectedButton = 'dark';
    } else if (localTheme === 'light') {
        document.documentElement.classList.remove('dark');
        logoSvg[0].style.fill = 'rgb(0,0,0)';
        selectedButton = 'light';
    } else {
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.classList.add('dark');
            logoSvg[0].style.fill = 'rgb(255,255,255)';
            selectedButton = 'auto';
        } else {
            document.documentElement.classList.remove('dark');
            logoSvg[0].style.fill = 'rgb(0,0,0)';
            selectedButton = 'auto';
        }
    }

    setActive(selectedButton);
}

Add the necessary CSS styles to the src/styles.css file.



.is-active {
    border: 2px solid rgb(107, 114, 128)!important;
}

You'll then need to rebuild your styles with npm run build.

Once everything has re-compiled, we should be finished with our JavaScript & Tailwind CSS Theme Switcher.

If you enjoyed this article, then please follow me on Twitter for more coding tips and tricks @brandymedia 👍🏻