Tailwind CSS styling not being applied on deploy

Question

This is the first time I'm using Tailwind CSS to style my React app. It styles perfectly when I'm running the app locally, however, now that I've deployed it using gh-pages, there is no styling be applied. Do I need to make changes to my package.json file or something?

Link to the live site

{
  "name": "seafaring",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://superhackerboy.github.io/sweet-seafaring-dreams/",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "gh-pages": "^2.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "build:css": "postcss src/styles/tailwind.css -o src/styles/index.css",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/index.css --watch",
    "start": "cross-env NODE_ENV=development concurrently \"npm run watch:css\" \"react-scripts start\"",
    "build": "cross-env NODE_ENV=production concurrently \"npm run build:css\" \"react-scripts build\"",
    "test": "react-scripts test",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^2.1.0",
    "autoprefixer": "^9.7.4",
    "concurrently": "^5.1.0",
    "cross-env": "^7.0.0",
    "cssnano": "^4.1.10",
    "postcss-cli": "^7.1.0",
    "purgecss": "^2.1.0",
    "tailwindcss": "^1.2.0"
  }
}

Answer 1

I had a similar problem.

In my case, I was using dynamically set color classes like className=text-${color}-500 for example.

And that's where the problem lies.

If you set up everything according to the official tailwind docs, you will automatically set up purgeCSS as well. This will then delete all unused CSS classes from your tailwind files in the build process (in your example deploying to gh-pages)

To fix this, you will have to specifically write the class names down somewhere, because purgeCSS looks for any strings that match existing class names in your project.

In my case, I just used a multiline-comment like this in one of my files:

  /**
   * PurgeCSS:
   * text-red-500
   * text-green-500
   * text-yellow-500
   * text-gray-500
   * text-purple-500
   * text-indigo-500
   * text-blue-500
   * text-pink-500
   *

   */

This fixed any building issues with tailwind / purgecss and I can now happily use dynamic classes in my projects.

Hope this helped, I know it's a bit late, but I just stumbled across this question as I tried to solve it myself!

Answer 2

While the current top answer by Fred is a working solution. I've found an even better solution in the Tailwind documentation.

You can specify a safelist in your tailwind.config.js, classes specified in this safelist will never be purged.

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.html'],
    safelist: [
      'bg-blue-500',
      'text-center',
      'hover:opacity-100',
      // ...
      'lg:text-right',
    ]
  },
  // ...
}

More information: https://tailwindcss.com/docs/optimizing-for-production#safelisting-specific-classes