1. Set up the WebPack configuration

1.1 Installation Dependencies

This article is not specifically about the webpack React project configuration, so we use our own packaged Webpack default tools (PD-js-config, PD-CSS-config). You can also configure your own Webapck React development environment if you want

Tailwind CSS is compiled with PostCSS and tailwind plugin, so if you build your own environment, you will need to install PostCSS, version 8 or later

yarn add pd-js-config pd-css-config webpack webpack-cli webpack-merge -D 

yarn add react react-dom
Copy the code

1.2 Install tailwind related dependencies


yarn add tailwindcss@lastest postcss@lastest autoprefixer

Copy the code

2. The configuration

2.1 webpack configuration

Pay attention to the point

  • CSS Do not configure CSS Modules. Otherwise, styles may fail
  • If you need to use Purge, you can add Purgecss to make the packaged styles smaller
const path = require("path");
const { merge } = require("webpack-merge");
const { default: getJSConfig } = require("pd-js-config");
const { default: getCssConfig } = require('pd-css-config');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(
  {
    entry: "./src/main.js".context: path.resolve(__dirname),
    mode: 'development'.output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.js",},module: {
      rules: []},resolve: {
      extensions: [".jsx".".js".".css"],},devtool: "source-map".plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "./index.html"),
      }),
    ],
  },
  getJSConfig({
    jsx: true.env: "development",
  }),
  getCssConfig({
    env: 'development'.cssSplit: {
      enable: true
    },
    useCssModule: false.preCompile: 'none'}));Copy the code

2.2 configuring the tailwindcss and postcss

Official recommendation: Build directly from tailwind scaffolding, where -p stands for postCSS configuration files at the same time

npx tailwind init -p
Copy the code

The configuration is as follows

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},}},Copy the code
module.exports = {
  // This part of the configuration uses purgecss
  // Tree shaking for styles
  purge: {
    mode: 'all'.enable: true.content: ["./index.html"."./src/**/*.{js,jsx}"."./src/app.{js,jsx}"],},// purge: [],
  darkMode: false.// or 'media' or 'class'
  theme: {
    extend: {},},variants: {
    extend: {},},plugins: [],};Copy the code

Use 3.

3.1 initial experience with tailwindcss

Now that all the configuration is complete, write a page to test it

import React from "react";

const App = () = > {
  return (
    <div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
      <img
        class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0"
        src="//www.tailwindcss.cn/img/erin-lindford.jpg"
        alt="Woman's Face"
      />
      <div class="text-center space-y-2 sm:text-left">
        <div class="Space - y - 0.5">
          <p class="text-lg text-black font-semibold">Erin Lindford</p>
          <p class="text-gray-500 font-medium">Product Engineer</p>
        </div>
        <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">
          Message
        </button>
      </div>
    </div>
  );
};

export default App;
Copy the code

3.2 the effect

All right, I’m going to tailwind + CSS. See you next time