5

Bootstrapping React with Tailwind

 3 years ago
source link: https://willschenk.com/articles/2021/bootstrapping_react_with_tailwind_css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Published April 15, 2021 #react, #tailwindcss

This is straight from the Tailwind Install Guide but here so I can remember it easier.

Setup the project

  npx create-react-app my-app
  cd my-app

Install tailwindcss

  npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat \
      @tailwindcss/postcss7-compat \
      postcss@^7 \
      autoprefixer@^9

Install craco

  npm install @craco/craco

And change the scripts part of package.json:

     "start": "craco start",
     "build": "craco build",
     "test": "craco test",

Create a craco.config.js file:

  // craco.config.js
  module.exports = {
      devServer: {
          watchOptions: {
              ignored: /\.#|node_modules|~$/,
          },
      },
      style: {
          postcss: {
              plugins: [
                  require('tailwindcss'),
                  require('autoprefixer'),
              ],
          },
      },
  }

Tailwind Configuration

Create a tailwind.config.js:

  // tailwind.config.js
  module.exports = {
      purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
      darkMode: false, // or 'media' or 'class'
      theme: {
          extend: {},
      },
      variants: {
          extend: {},
      },
      plugins: [],
  }

Add a src/index.css file:

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

References

  1. https://tailwindcss.com/docs/guides/create-react-app


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK