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"
  }
}

Facer

did you find any solution? – Mesomorphic

@DoryDaniel I did not. I ended up just using their CDN. – Facer

are you using typescript? if yes, you must include it in 'tailwind.confing.js' file – Mesomorphic

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!

Saire

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

Ilarrold

Thank you. This is the right answer to the question. – Sadiesadira

Answer 3

This issue happen because purge-css remove not use styles. you can prevent that by adding colors that you want to an div element in that component and hide the component.

example:

            <div className="hidden bg-success bg-info bg-danger bg-warning"></div>

this will resolve your issue.

Foxglove

Answer 4

Tailwind classes need to be purgeable as described in their documentation here: https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html. If you are concatenating class names with variables such as w-${sidebarWidth}, they are stripped and lost at build time.

You'll need to change your approach to how you build dynamic names. Here's what I do, it makes more sense to me than having to maintain a commented list as suggested by another answer:

1. Store any variables to be used inside a class name as the exact values described in Tailwind's documentation. An example might be:

// lib/tw.js
export const HEADER_HEIGHT_CLASS = "h-16";

2. Writer a little helper function to help build the classes

// classnames.js
export default function merge(...args) {
  return args.join(" ");
}

3. Put it all together when you need to use dynamic class names

import cx from "lib/classnames";
import { HEADER_HEIGHT_CLASS } from "lib/tw";

...
<header className={cx("bg-white", HEADER_HEIGHT_CLASS)}>
  ...
</header>
...

This ensures the string h-16 exists somewhere and thus will be captured as an included class at time of deploy.

This very oversight caused me quite the headache as I had spent days chugging along locally with an approach I thought was reasonable only to find everything broken upon deploy. The feature itself makes perfect sense once you learn why it exists but ugh, I wish Tailwind would put some kind of warning closer to the earlier parts of their documentation.

Oreilly

Answer 5

For any Typescript users:

since the tailwind installation docs don't mention this explicitly

for your tailwind.config.js add tsx as type to the content property as shown below

  module.exports = {
  content: ["./src/**/*.{html,js,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Eyecatching