DEV Community: Theenadayalan Kaliamurthy

Setup TailwindCSS with React.js application and remove the unused styles using PurgeCSS

Theenadayalan Kaliamurthy — Sat, 05 Oct 2019 16:41:36 +0000

Originally post at https://www.theenadayalan.me/blog/setup-tailwindcss-in-react-application.

TailwindCSS is a utility-first, highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Every Web developer in the world is using Bootstrap as their first front-end component library. Because it is simple and easy to build the CSS components with a few bootstrap classes. They will be in flying colors because they have built Dropdown, Navbar, Tooltip, etc using a few CSS classes.

The real problem comes once they start introducing custom design(styles). They will have to override many Bootstrap CSS classes to make up their custom designs. Here TailwindCSS has the advantage over bootstrap, it has all the utility classes to build our custom design. It is also having component classes for starter projects.

Bootstrap is also having utility classes, but they are very few. and non-customizable. TailwindCSS is a fully customizable and low-level CSS framework.

In this post, We are going to explore how to setup TailwindCSS with React.js application using Webpack and PostCSS.

Prerequisites

Before adding TailwindCSS into your project, you must not be using create-react-app since we are gonna do manual Webpack configuration which create-react-app restricts. You should be built the project from scratch.

If you are new to React.js, Please follow my previous post on setting up the React.js application from scratch.

Installation

Follow the below steps to install the required packages to add TailwindCSS to your React application.

Setting up TailwindCSS

First, we will learn how to add TailwindCSS to the project using Webpack and PostCSS.

Install TailwindCSS and PostCSS.

  yarn add tailwindcss

tailwindcss - TailwindCSS library

Import the TailwindCSS library styles into our application style.

src/style.css

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

  yarn add -D postcss postcss-loader css-loader mini-css-extract-plugin

postcss - CSS transformation tool.

css-loader - Interprets @import and url() like import/require().

mini-css-extract-plugin - Extracts CSS into separate files, say style.css.

postcss-loader - PostCSS loader for webpack.

Let's add the webpack configurations.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.resolve(__dirname, 'src/index'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      include: path.resolve(__dirname, 'src'),
      use: ['babel-loader']
    }, {
      test: /\.css$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader
        },
        'css-loader',
        'postcss-loader'       
      ]
    }]
  },
  devServer: {
    contentBase:  path.resolve(__dirname, 'dist'),
    port: 9000
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "styles.css"
    }),
    new HtmlWebpackPlugin({
      template: "src/index.html" //source html
    })
  ]
};

let's add the PostCSS configurations.

postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss')
  ]
}

That's all! We are done. It's testing time. Let's add some tailwindcss styles to our project.

src/index.js

import React from 'react';
import { render } from 'react-dom';
import './style.css';

const rootElement = document.getElementById('react-app');

render(<div className="text-pink-600 text-center text-5xl"> Hello World! </div>, rootElement);

Phewww!! Let's see what we have done.

See! Very simple right?

Here comes the real villain, Let's check the Bundle Size

The size of the CSS file is 549KB. We used only a few classes but the bundle includes all the CSS classes that we don't actually use. (maybe we will never use it). Here comes the PurgeCSS as a lifesaver.

Setup PurgeCSS

PurgeCSS is a tool to remove unused CSS. We need to configure it with our PostCSS tool to get the benefit of PurgeCSS.

  yarn add -D @fullhuman/postcss-purgecss

@fullhuman/postcss-purgecss - PostCSS plugin for PurgeCSS

Configure postcss.config.js to support PurgeCSS.

postcss.config.js

const purgeCSS = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    require('tailwindcss'),
    purgeCSS({
      content: [
        './src/**/*.js',
      ],
      css: ['./src/**/*.css']
    })
  ]
}

That's all for the configurations. Now check the build size.

From 549KB to 8.34KB.

98.4% of CSS got reduced by Adding PurgeCSS 😃.

Fully completed code can be found here.

I hope this post is useful in some way for others. ❤️

How to set up React.js app from scratch without using create-react-app?

Theenadayalan Kaliamurthy — Sat, 28 Sep 2019 17:26:25 +0000

Originally posted here

After dwelling in Ember.js for almost two years I have tried React.js. As every developer do, I started surfing on the internet to create my Hello World app using React.js.

Initially, I found create-react-app which is pretty much useful for creating React.js in lightning-fast speed. I really enjoyed create-react-app since it had all the setup that we usually need in JS framework, starting from development server to test setup.

After using it for a while I felt that it lacks customization. create-react-app uses Webpack behind the screen to build the application. Webpack is a widely used javascript bundler which has a large ecosystem that supports plenty of plugins. But create-react-app doesn't allow us to explore those plugins.

So I arrived at the conclusion that I need to move out of create-react-app to utilize the full power of webpack with React.js. I started writing my own webpack configuration to release the full power of webpack.

Here I'm writing how I used webpack to build my react application to help the developers like me.

Prerequisite

Node.js must be installed on your computer. I hope you guys are familiar with yarn. Also, yarn is installed globally.
Create an empty project and create a package.json file.

Installation

Install the following packages.

Setup React.js

yarn add react and react-dom

react - React.js library.

react-dom - This package serves as the entry point to the DOM and server renderers for React.

Setup webpack

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin

webpack - Webpack is a bundler for modules.

webpack-cli - Command Line interface for webpack.

webpack-dev-server - Development server that provides live reloading.

html-webpack-plugin - The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles.

Setup Babel

yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader

@babel/core - Mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript.

@babel/preset-env - @babel/preset-env allows you to use the latest JavaScript.

@babel/preset-react - This package is a set of plugins used to support React.js specific features.

babel-loader - This package allows transpiling JavaScript files using Babel and webpack.

Configuration

We have installed all the required packages to create a React.js application using webpack. Next we need an index.html template where we need to insert the react constructed dom. Create an HTML file inside src/ folder.

src/index.html

  <html>
    <head>
      <title>Setup React Application From Scratch</title>
    </head>
    <body>
      <!-- We will insert the dom here -->
      <div id="react-app">

      </div>
    </body>
  </html>

Also, we need a starting point to create react application. Create a js file index src/ folder.

src/index.js

  import React from 'react';
  import { render } from 'react-dom';

  const rootElement = document.getElementById('react-app');

  render(<div> Hello World! </div>, rootElement);

Configure webpack to serve live development server

webpack.config.js

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: path.resolve(__dirname, 'src/index'),
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [{
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        use: ['babel-loader']
      }]
    },
    devServer: {
      contentBase:  path.resolve(__dirname, 'dist'),
      port: 9000
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "src/index.html" //source html
      })
    ]
  };

Babel Configurations

.babelrc

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

We have reached to the finishing line. Oh wait! there is one more thing to be done. Add the webpack scripts to package.json file.

package.json

{
  "name": "react-setup-from-scratch",
  "scripts": {
    "serve": "webpack-dev-server --mode development",
    "build": "webpack --mode production",
  }
}

That's all! It's show time. Let's start the development server.

  yarn serve

Voila!!! We are done. Let's see the output.

Fully completed code can be found here.

I hope this post is useful in someway for the beginners ❤️.