How to build a website from scratch part 1

Rai Omido

Table of contents

Tailwindcss is a utility-based CSS framework for building websites. It is comprised of thousands of utility CSS classes that you can use together to build cool components for your website.

In this tutorial, we are going to learn how to use tailwindcss to build a simple website with a few pages.

# Install the necessary tools

Legend has it that in the past, as a developer, you would often have to download all your project's dependencies onto your computer in order to use them in your projects. This would prove to be a challenge especially when you needed to use tens of dependencies in your project. Updating them would also be a real challenge.

Thankfully, in modern application development, a lot of tools have been introduced to make development much easier.

In order to build a website using Tailwind CSS, we need to install the tools necessary for installing any required dependencies.

We will also need tools for bundling our code both during and after development.

To give you more perspective, for instance, when building websites using tailwindcss, you, first of all, have to use the development CSS build which is usually comprised of thousands of utility classes which you can experiment with until you achieve a final result. The truth is, once you have your final result, you actually don't need the rest of the unused CSS on the final website. You will, therefore, need to purge all of the unused code and only upload what your website requires to production. To do this, you will need to run a number of different commands appropriately as we shall see.

In order to install these tools, you need to have access to a command-line tool like the Terminal on Linux and Mac or Powershell on Windows.

~Install nodejs and npm

In this tutorial, we will depend on Node Package Manager for installing and managing our dependencies. NPM comes bundled in node.js, so head over to nodejs.org to download the software into your computer.

If you are on windows, you might want to download Git. It comes with a nice command-line tool (git bash) that in my opinion is a little better than Windows Powershell.

# Define your resources and dependencies

Since tailwindcss is only a CSS framework, it may not provide all the tools we require for building a fully-fledged website. An average modern website may need some bit of Javascript for interactivity of components such as dropdown menus. It may also need some icons for visual enhancement.

~Tailwindcss for front end styling

Tailwind CSS is a utility first low-level CSS framework for website development created by Adam Wathan.

We shall be using this framework to build our website's front-end.

If you'd like to learn more about what Tailwind brings to the table, that other frameworks do not, you may check out CSS Utility Classes and "Separation of Concerns"

As always, the documentation is the best way to learn more about a framework. You might want to check out out the Tailwind CSS website for more information.

~Alpine.js for interactive JavaScript components

Alpine.js is a minimal, lightweight javascript framework that offers you the reactive and declarative nature of big frameworks like Vue and React.js. We shall use alpine.js to manage interactive parts of our website like dropdown menus and more.

If you'd like to learn a bit more about alpine.js, you may want to check out the Alpine.js GitHub repository.

~Complementing tailwindcss with tailwind ui

In addition to Tailwind CSS, we shall use Tailwind UI, which is a component library built to complement Tailwind CSS. There is a marketplace of sorts for Tailwind UI components, which are not entirely free, but the free samples are good enough to get us started. If you'd like to explore more of the library, please check out the Tailwind UI website.

~Glightbox.js for popup images and videos

Glightbox is a pure javascript lightbox. In case you ever want to display images and videos in popup modals, you can try out this library.

~Resources

I am always pretty strict with dependency sizes, so I always prefer to use SVG icons on my website instead of including entire icon libraries on the website. There are some very nice recommendations for icons and other resources that you might want to check out on the Tailwindcss website.

Additionally, if you'd like to use some illustrations of black people, checkout out Black Illustrations.

# Set up your project and install the dependencies

Now that we have all our dependencies well defined, it's time to dive into downloading and installing each of them and setting up our project to start development.

One of the ways of adding most of the third-party packages is to bundle them together into one main js file that you can include in your website's files, but I prefer to keep them separate to avoid loading redundant code on pages.

Additionally, while you are developing offline, you could choose to download copies of the dependencies onto your computer, then serve them over a content delivery network once you are ready to move to production.

~Verify that you have npm installed

Like we saw earlier, we shall heavily depend on npm to manage our dependencies. So ensure that you have it installed on your computer. If you are using another dependency management tool, no need to fret. That too is cool.

~Set up your project's root directory

If you're a developer, chances are, you already know where to set up your project. Preferably in your webroot directory. For instance;

#linux
var/www/html/

#windows ~ xampp
c:\\xampp\htdocs
#etc

However, since this is pure HTML, you could place it anywhere. It could be in the Desktop, Documents e.t.c directories. Just ensure it's somewhere you can easily locate.

Moreover, we need to organize our project so that we don't end up with a mess. For this tutorial's sake, we shall have the following directory structure;

  • All our raw files, (files that need processing) will be placed in the src directory. 
  • All our ready to use files will go to the public directory, classified by type, i.e, public/css, public/js e.t.c.
  • All our ready to use third-party dependencies will go to the public/vendor directory.
  • Our application's entry point will be index.html

Go ahead and create the directories and file above so that we have the following directory structure in our project's root directory.

public/css
public/js
public/vendor
src/css
index.html
~Install Laravel Mix and configure npm scripts

This will be important since in your project's you may want to use talwindcss together with many other packages. To make development easier, we will add Tailwind as a PostCSS plugin in our build chain, so that we don't have a separate build process for Tailwind from the other packages you may be using.

To achieve this, we shall be using Webpack, which is an awesome open-source JavaScript module bundler. We shall use Laravel Mix to install and set up webpack.

Laravel mix is a wrapper around webpack, which will enable us to work with webpack without having to go through the configuration hustles. It is optimized for Laravel, a popular PHP framework, but can be used in any project.

Enough said, let's dive into action.

npm init -y
npm install laravel-mix --save-dev

Create a webpack.mix.js file in your project's root directory and add the line below;

let mix = require('laravel-mix');

After these steps you should be having the following structure in your project root directory;

node_modules/
public/
src/ package.json package.lock.json webpack.mix.js

We are now ready to proceed to the next steps.

Set up NPM scripts

In order to speed up our workflow, we need to make use of npm scripts. First, let's install cross-env to help us handle different environments;

npm install cross-env --save-dev

Next up, add the following line inside your package.json file;

Note that this must be inside of the top-level curly braces {}.

"scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}

 

~Install and configure Tailwind

We now have our project ready to start setting up Tailwindcss. The next few steps are as easy as cheese. We only need to run a couple of commands as follows;

Installing Tailwind CSS
npm install tailwindcss@latest
Adding Tailwind to our CSS

Create a src/css/style.css in your project's root directory and add the following lines;

@tailwind base;
@tailwind components;
@tailwind utilities;
Create a tailwind config file in the project root directory
npx tailwindcss init

This will create a tailwind.config.js file in our project's root directory.

// tailwind.config.js 
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

We will use this file to modify and extend Tailwind to match our needs.

Process Tailwind CSS

We can use Mix's postCss method to process our CSS and then include Tailwind CSS as a plugin. We achieve this by adding this line to our webpack.mix.js file;

mix.postCss('src/css/style.css', 'public/css', [
  require('tailwindcss'),
])
Purging unused CSS

Using the default configuration, tailwind build size will be huge, for a good reason. It actually contains thousands of utility classes that make development easier. In order to reduce this size for the production build, we can utilize Tailwind's purge feature by updating the code below in the tailwind.config.js file.

  purge: [
    './*.html',
  ],

Now whenever you generate the production build, the size will be significantly reduced to just a few kilobytes. This makes a whole lot of difference as you can clearly note.

~Test your configuration

So far, so good! Now is the moment of reckoning. We need to check that our configuration actually works. This is the time when we shall make use of our npm scripts.

Testing the development build
npm run development

This bundles the scripts in development mode. They are usually bulky and include all dependencies necessary for the development of your project.

Testing the production build
npm run production

This bundles only the dependencies necessary for your project's use in production. The resultant code is usually minified with all the unnecessary code dropped.

Watching for changes
npm run watch

This runs the scripts in webpack.mix.js every time there are changes in our application's files.

Hot reloading
npm run hot

This runs the scripts in webpack.mix.js and auto-refreshes the page while maintaining the component's state in the browser when our app's files are changed.

~Conclusion

In this part, we have seen how to install and set up Tailwindcss so that we can use it in our projects to build beautiful websites. In the next tutorial, we dive into the real building. Otherwise, thank you for following this tutorial. I hope you were able to find help.