Building a Reusable Front-end Development Project using Webpack and Tailwind CSS

One
of the areas that a web developer will spend the most time learning is a
build system or process to streamline their directory own local
development process. When I first started working with task runners I
was using Grunt to automate tasks, such as compiling Sass, bundling
JavaScript, and optimizing images. However, what amazed me was that all
the same tasks that I ran locally to develop could be run before
deploying to a production website using a Git repository.

The
idea of using a task running or having a build process might be scary
for some, but when working with one or multiple developers at a time on a
single project it allows for everything to be kept in sync with a
unified process that can be run on your computer or any number of other
development machines in the same way.

Over
the years and after having spent so much time in different development
platforms like Drupal, WordPress, and more I tried to find ways to
remove as many extraneous pieces as I could to streamline my development
processes. I started using Grunt and Gulp and eventually ditched those
in favor of using Node packages directly with CLI commands within package.json to make it easier and eventually developed my responsive framework, called Centurion,
from scratch. It was a way to develop and learn a way to standardize a
set of reusable classes and components for a wide variety of projects
that I was working on. The rationale behind Centurion
will remain a discussion for another post, but suffice to say I am
working on resurrecting it for some amazing new projects down the road.
So stay tuned!

As of the publishing of this article, the process that I use primarily for development is Webpack and Tailwind CSS.
I won’t go into much detail about the benefits and drawbacks of each
since there are plenty of articles across the internet that already
discuss that in length, such as, Why Webpack and Building a Scalable CSS Architecture.

If
you’ve never used either then I would recommend you check out both
projects and how they might help your current development projects. All
the code that I have outlined in the walkthrough below is available on
Github — https://github.com/Hounder-Co/webpack-tailwind-starter.


Getting Started

The
process of setting up a starter Node project with webpack is relatively
straightforward and you as of webpack 4 you technically don’t need a
webpack config file to use it.

If you’d like to learn more about the configuration options in webpack then check out https://webpack.js.org/concepts/.

1. Create a project directory.

2. Within the project, initialize a node project

Spread the love

Posted by News Monkey

blank