2022-09-01 20:00:00

React and Tailwind Combination

It's not hard to combine the above tailwind integration and react integration together to create a really powerful front-end development environment for the IC project. Behind the two guides above, only a few extra adjustments are required to combine this two techniques together.

Adjust the Webpack Config

Both Tailwind and React add loaders to the webpack.config.js > modules > rules, we need to combine them together, like this:

module: {
    rules: [
        test: /\.js$/i,
        include: path.resolve(__dirname, 'src'),
        use: {
          loader: 'babel-loader',
          options: {
          	// note that you may need to run npm install @babel/preset-react
            presets: ['@babel/preset-env', '@babel/preset-react'],
        test: /\.css$/i,
        include: path.resolve(__dirname, 'src'),
        use: ['style-loader', 'css-loader', 'postcss-loader'],
        test: /\.(js|ts)x?$/,
        loader: "ts-loader"

Modify Tailwind Config

open tailwind.config.js and modify the regex for utility classes detection, to include .jsx:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,jsx}'],
  theme: {
    extend: {},
  plugins: [],

Adjust Source Code

For a minimum connection, 3 basic files are created in the src folder of the front-end canister:

├── index.css # this follow the tailwind guide
├── index.html # this follow the react guide
└── index.jsx # and import the index.css here

Then all things done. Here's a new example of the index.jsx

import React from "react"
import { render } from "react-dom"
import './index.css'

const Container = () => {

  return (
    <div className="container mx-auto min-h-screen max-w-2xl m-1 p-1 bg-stone-100">
      Hello React! 


render(<Container />, document.getElementById("app"))