Help: Upgrade to Tailwind 3!

[wmonecke]

Has anyone been able to upgrade to Tailwind 3 yet? I am getting stuck and have little clue on what to do next.

[schmanat]

Hi @wmonecke

To get TailwindCSS 3 working you have to do some configuration changes.

1. Open the packages.json and remove the follwing lines:

• "tailwindcss": "^2.2.7" (Line 20)
• "node-sass": "^6.0.1", (Line 85)

2. Install the new packages

• npm install --save sass (node-sass is deprecated
• npm install -D tailwindcss@latest (Tailwind will be installed as dev dependency)

3. Update tailwind.config.js

module.exports = {
  content: ['./src/**/*.js'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

(replace purge with content, and remove darkMode)

After this changes tailwind 3 works (for me :)).

If you have use some features of Tailwind please read the official upgrade Guide of Tailwind

[wmonecke]

@schmanat Thanks for the help! I am getting the following error, did you have it too?

Do we not need to reconfigure something with node-sass?

Uncaught Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Unexpected '/'. Escaping special characters with \ may help.
    at Root._error (:3000/Users/waltermonecke/Documents/Code/fabled/node_modules/tailwindcss/node_modules/postcss-selector-parser/dist/parser.js:174:16)

This is my node modules:

{
  "author": {
    "name": "Stefan Wüthrich",
    "url": "https://altafino.com"
  },
  "keywords": [
    "react",
    "reactjs",
    "webpack",
    "boilerplate",
    "tailwind"
  ],
  "license": "MIT",
  "name": "react-webpack-5-tailwind-2",
  "version": "1.0.1",
  "description": "Webpack 5 boilerplate with React 17, Tailwind 2, using babel, sass, with HMR and an optimized production build",
  "dependencies": {
    "classnames": "^2.3.1",
    "firebase": "^9.0.0-beta.2",
    "nice-waves": "^1.0.1",
    "react": "^17.0.2",
    "react-animate-height": "^2.0.23",
    "react-beautiful-dnd": "^13.1.0",
    "react-blurhash": "^0.1.3",
    "react-colorful": "^5.3.0",
    "react-confirm-alert": "^2.7.0",
    "react-datepicker": "^4.2.1",
    "react-dom": "^17.0.2",
    "react-howler": "^5.2.0",
    "react-infinite-scroller": "^1.2.4",
    "react-loadable": "^5.5.0",
    "react-lottie-player": "^1.3.1",
    "react-modal": "^3.14.3",
    "react-outside-click-handler": "^1.3.0",
    "react-popper": "^2.2.5",
    "react-redux": "^7.2.4",
    "react-rnd": "^10.3.5",
    "react-router-dom": "^5.2.0",
    "react-textarea-autosize": "^8.3.3",
    "react-timekeeper": "^2.2.1",
    "react-toastify": "^7.0.4",
    "react-transition-group": "^4.4.2",
    "recharts": "^2.0.9",
    "redux": "^4.1.0",
    "redux-persist": "^6.0.0",
    "redux-persist-webextension-storage": "^1.0.2",
    "redux-thunk": "^2.3.0",
    "sass": "^1.48.0",
    "set-value": "^4.0.0",
    "unset-value": "^2.0.0",
    "use-file-picker": "^1.3.0",
    "uuid": "^8.3.2",
    "valtio": "^1.2.1",
    "valtio-yjs": "^0.1.1",
    "y-websocket": "^1.3.16",
    "yjs": "^13.5.12"
  },
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "start": "webpack serve --config config/webpack.dev.js",
    "build": "NODE_ENV=production webpack --config config/webpack.prod.js && npm run copy",
    "build-staging": "NODE_ENV=production webpack --config config/webpack.stag.js",
    "prettify": "yarn prettier \"**/*.*(js|jsx)\" --ignore-path=.prettierignore --write",
    "lint": "eslint src --ext .js,.jsx && yarn prettify",
    "lint-fix": "eslint src --ext .js,.jsx --fix && yarn prettify",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
    "copy": "cp build/manifest.json dist/ && cp -a build/backgroundScripts/. dist/"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint-staged --verbose"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint --fix"
    ]
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.14.3",
    "@babel/preset-env": "^7.14.2",
    "@babel/preset-react": "^7.13.13",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "@svgr/webpack": "^5.5.0",
    "@tailwindcss/jit": "^0.1.18",
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^13.1.9",
    "autoprefixer": "^10.2.5",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.2.4",
    "css-minimizer-webpack-plugin": "^2.0.0",
    "dotenv-webpack": "^7.0.3",
    "eslint": "^7.26.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-import": "^2.23.2",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "html-webpack-plugin": "^5.3.1",
    "husky": "^4.3.8",
    "jest": "^26.6.3",
    "lint-staged": "^10.5.4",
    "mini-css-extract-plugin": "^1.6.0",
    "postcss": "^8.2.15",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^5.3.0",
    "prettier": "^2.3.0",
    "prop-types": "^15.7.2",
    "react-editor-js": "^1.10.0",
    "react-refresh": "^0.9.0",
    "redux-devtools": "^3.7.0",
    "redux-devtools-extension": "^2.13.9",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "tailwindcss": "^3.0.15",
    "terser-webpack-plugin": "^5.1.2",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  }
}

[wmonecke]

@schmanat Nevermind! You also need to install sass as a devDependency! Thank you so much!