Configuring Webpack from scratch for Tailwind CSS with React

In this tutorial, we will work through configuring Webpack for use with react and tailwind CSS.

0shares

In this tutorial, we will work through configuring Webpack for use with react and tailwind CSS. Before we dive into the configurations, let us first look at an overview of the technologies involved.

WebpackWebpack is a wonderful tool for bundling and optimizing front-end assets (JS, CSS, and Images). Webpack uses a configuration file to determine how specific things are loaded into your application. You write commands in your configuration file of where your assets are and how to load them. Then, when you run it, it goes into your application entry point(the base file your app loads from) reads it and figures out exactly what it needs, and the order it needs it, and what each piece depends on.

It will then create few bundles, optimize them, and include as the scripts in your application. It does not run during your page load, it runs during your development. It also allows you to easily consume other packages from NPM (Node Package Manager).

React

As you're likely already aware, React is a simple, modern front-end library for building elegant user interfaces. It reduces the amount of effort building a versatile UI takes by efficiently handling DOM manipulation and event handling, producing a more predictable and easier to debug code.

Before React, other libraries like JQuery were used to manipulate the DOM. But as the web grew, exponentially more frameworks like Angular, Vue, and React came to light. What differentiates React from the rest of the pack is that it allows you to create your own HTML elements (typically wrapped within components) with customized functionality.

Tailwind CSSTailwind is a utility-first CSS framework for rapidly building custom user interfaces. One thing I love about tailwind CSS is that it doesn’t come with any predefined components, but rather it offers highly composable, low-level utility classes.

It leaves all the magic in your hands and doesn’t help you make any decision as to how your website should look. This makes your website look and feels unique with every new design.

Since it is utility first all you need do is to apply those utility classes to your HTML tags. It is possible to build a fully functional website with only tailwind CSS or with just minor CSS additions.

Assumptions and Prerequisites

This tutorial assumes that you have the following pre-installed:Package manager: Npm or Yarn.

You can use yarn if you wish, although the commands will vary slightly.

Before we start, here’s the full list of features we will set up together in this tutorial:

Webpack 4

Webpack Bundle Analyzer

Webpack Dev Server

React 16

React Dom

Tailwind CSS

autoprefixer (required for tailwind CSS)

postcss-cli (required for tailwind CSS)

css-loader (to compile CSS files)

postcss-loader (to compile the tailwind CSS files)

babel-loader (required for react)

@babel/core (required for react)

@babel/preset-env (required for react)

@babel/preset-react (required for react)

@babel/cli (required for react)

At this point, we clearly understand each of the technologies involved, let’s configure them to work together.

Install Webpack

Let’s start by creating a new directory to work with. In your terminal, type:

mkdir rect_test

First, we change into the new directory, then initialize a package.json file:

cd rect_test
npm init

Answer the prompt or type npm init -y if you want to skip the prompt.Inside the **package.json** add this if it doesn’t already exist.

Now we need to install Webpack on our machine. You can install it locally (project only) or globally. For our purposes, we'll install it as a dev dependency and webpack-cli so we can use it in the terminal. In your terminal, type this command:

npm i webpack webpack-cli -D

Now we need to create an entry point for our app (page loaded when the app starts up). To do that:

We now need to make a separate file called .babelrc to provide configuration options for babel-loader. When you state you’re using babel-loader in your Webpack config, it will look for .babelrc file if there is one. In your terminal type:

touch .babelrc

Now add the following code to it:

{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

At this point, we will also need to create an index.html file in the src folder where we can add our section element with id index.

This is where we render our main react component:Under the src folder create an index.html file and add the following lines to it:

Since we will import the CSS files into our React components we need to install css-loader module to resolve them. Once that’s resolved, we also need a style-loader to inject this into our DOM by adding a style tag into the head element of our HTML. In your terminal type:

In your terminal run npm start and you should see this in your browser.

Conclusion

In this post, we’ve learnt how to install and configure Webpack for use with tailwind CSS and react. There are a lot of more awesome things that can be achieved if you leverage on this new knowledge. Hack on!

LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.