Tailwind CSS styles not applied after deploy

[ckam03]

I can’t for the life of me figure out why the Tailwind styles aren’t applying. I’m not really sure what else to say so if there’s any other information that would be useful to know, let me know.

• we need to know your netlify site name. laughing-swartz-35f82b.netlify.app

• Build problems? Link or paste the FULL build log & build settings screenshot
  2:50:50 PM: Build ready to start
  2:50:51 PM: build-image version: 53b83b6bede2920f236b25b6f5a95334320dc849
  2:50:51 PM: build-image tag: v3.6.0
  2:50:51 PM: buildbot version: 8ae026ef4905d9174e416775c6b64aa19950569b
  2:50:51 PM: Building without cache
  2:50:51 PM: Starting to prepare the repo for build
  2:50:52 PM: No cached dependencies found. Cloning fresh repo
  2:50:52 PM: git clone https://github.com/ckam03/Tailwind_portfoliov2
  2:50:53 PM: Preparing Git Reference refs/heads/master
  2:50:54 PM: Starting build script
  2:50:54 PM: Installing dependencies
  2:50:54 PM: Python version set to 2.7
  2:50:55 PM: v12.18.0 is already installed.
  2:50:56 PM: Now using node v12.18.0 (npm v6.14.4)
  2:50:56 PM: Started restoring cached build plugins
  2:50:56 PM: Finished restoring cached build plugins
  2:50:56 PM: Attempting ruby version 2.7.1, read from environment
  2:50:57 PM: Using ruby version 2.7.1
  2:50:58 PM: Using PHP version 5.6
  2:50:58 PM: Started restoring cached node modules
  2:50:58 PM: Finished restoring cached node modules
  2:50:58 PM: Installing NPM modules using NPM version 6.14.4
  2:51:03 PM: > @fortawesome/fontawesome-free@5.15.1 postinstall /opt/build/repo/node_modules/@fortawesome/fontawesome-free
  2:51:03 PM: > node attribution.js
  2:51:03 PM: Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com
  2:51:03 PM: License - Free License | Font Awesome (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  2:51:03 PM: npm WARN tailwind_portfoliov2@1.0.0 No repository field.
  2:51:03 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
  2:51:03 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
  2:51:03 PM: added 175 packages from 150 contributors and audited 176 packages in 4.479s
  2:51:03 PM: 20 packages are looking for funding
  2:51:03 PM: run npm fund for details
  2:51:03 PM: found 0 vulnerabilities
  2:51:03 PM: NPM modules installed
  2:51:04 PM: Started restoring cached go cache
  2:51:04 PM: Finished restoring cached go cache
  2:51:04 PM: go version go1.14.4 linux/amd64
  2:51:04 PM: go version go1.14.4 linux/amd64
  2:51:04 PM: Installing missing commands
  2:51:04 PM: Verify run directory
  2:51:06 PM: ​
  2:51:06 PM: ────────────────────────────────────────────────────────────────
  2:51:06 PM: Netlify Build
  2:51:06 PM: ────────────────────────────────────────────────────────────────
  2:51:06 PM: ​
  2:51:06 PM: ❯ Version
  2:51:06 PM: @netlify/build 8.0.0
  2:51:06 PM: ​
  2:51:06 PM: ❯ Flags
  2:51:06 PM: deployId: 5fe7b03abf1584f89fd6e8e5
  2:51:06 PM: mode: buildbot
  2:51:06 PM: ​
  2:51:06 PM: ❯ Current directory
  2:51:06 PM: /opt/build/repo
  2:51:06 PM: ​
  2:51:06 PM: ❯ Config file
  2:51:06 PM: No config file was defined: using default values.
  2:51:06 PM: ​
  2:51:06 PM: ❯ Context
  2:51:06 PM: production
  2:51:06 PM: ​
  2:51:06 PM: ────────────────────────────────────────────────────────────────
  2:51:06 PM: 1. Build command from Netlify app
  2:51:06 PM: ────────────────────────────────────────────────────────────────
  2:51:06 PM: ​
  2:51:06 PM: $ npm run build:css
  2:51:06 PM: > tailwind_portfoliov2@1.0.0 build:css /opt/build/repo
  2:51:06 PM: > tailwind build public/main.css -o public/tailwind.css
  2:51:07 PM: tailwindcss 2.0.2
  2:51:07 PM: Building: public/main.css
  2:51:12 PM: Finished in 5.05 s
  2:51:12 PM: Size: 4.35MB
  2:51:12 PM: Saved to public/tailwind.css
  2:51:12 PM: ​
  2:51:12 PM: (build.command completed in 6.2s)
  2:51:12 PM: ​
  2:51:12 PM: ────────────────────────────────────────────────────────────────
  2:51:12 PM: Netlify Build Complete
  2:51:12 PM: ────────────────────────────────────────────────────────────────
  2:51:12 PM: ​
  2:51:12 PM: (Netlify Build completed in 6.3s)
  2:51:12 PM: Caching artifacts
  2:51:12 PM: Started saving node modules
  2:51:12 PM: Finished saving node modules
  2:51:12 PM: Started saving build plugins
  2:51:12 PM: Finished saving build plugins
  2:51:12 PM: Started saving pip cache
  2:51:12 PM: Finished saving pip cache
  2:51:12 PM: Started saving emacs cask dependencies
  2:51:12 PM: Finished saving emacs cask dependencies
  2:51:12 PM: Started saving maven dependencies
  2:51:12 PM: Finished saving maven dependencies
  2:51:12 PM: Started saving boot dependencies
  2:51:12 PM: Finished saving boot dependencies
  2:51:12 PM: Started saving rust rustup cache
  2:51:12 PM: Finished saving rust rustup cache
  2:51:12 PM: Started saving rust cargo bin cache
  2:51:12 PM: Finished saving rust cargo bin cache
  2:51:12 PM: Started saving go dependencies
  2:51:12 PM: Finished saving go dependencies
  2:51:15 PM: Build script success
  2:51:15 PM: Starting to deploy site from ‘public’
  2:51:15 PM: Creating deploy tree
  2:51:15 PM: Creating deploy upload records
  2:51:15 PM: 1 new files to upload
  2:51:15 PM: 0 new functions to upload
  2:51:15 PM: Starting post processing
  2:51:15 PM: Post processing - HTML
  2:51:15 PM: Post processing - header rules
  2:51:15 PM: Post processing - redirect rules
  2:51:15 PM: Post processing done
  2:51:15 PM: Site is live
  2:51:30 PM: Finished processing build request in 38.518242842s

The better the post - the faster the answer.

[jonsully]

Hey there!

Pure speculation here, but I’m wondering if it’s your tailwind.config.js's purge section:

purge: [
    './public/**/*.html'
  ],

You may be purging all of the tailwind classes since your html file is in ./public/*.html but your purge command is only checking for ./public/**/*.html - I’m not a wiz on globs, but I don’t think a double-star glob can equal ‘none’ (e.g. flatten the globbed directory layer). Hopefully that’ll help!

–
Jon

[ckam03]

It purges fine when I do it locally but I tried your suggestion anyway hoping but that doesn’t seem to be it either. Thanks for the suggestion though. I’m really not sure what to try at this point.

[jonsully]

Interesting. For the record, what site is this for? (Custom domain or *.netlify.app) Just wanting to poke around with some various debugging requests etc.

–
Jon

[ckam03]

Oh its a custom domain. chriskamer.com

[jonsully]

Oh - no I’m sorry I didn’t see that you’d already listed your *.netlify.app domain in your first post. Discourse should’ve hyper-linked that oh well.

I took this as a learning opportunity for myself too - I haven’t played with Tailwind’s build procedures much but found this guide to be helpful. I think you’re wanting to do the Postcss + Purge CSS route with your site but using the tailwind CLI itself, which I don’t think would yield you the result you’re wanting (the full Tailwind CSS file is like 7MB un-purged).

How to setup Tailwind with PurgeCSS and PostCSS

Essentially I installed two packages and set your postcss.config.js to

npm i @fullhuman/postcss-purgecss
npm i cssnano

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    cssnano({
      preset: 'default'
    }),
    purgecss({
      content: ['./public/*.html'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

Then was running this as the ‘build’ command

yarn postcss public/main.css -o public/tailwind.css

No need to specify NODE_ENV or anything like that; that command will tell PostCss to build your tailwind.css (output) file to what’s defined in main.css and purge everything except the classes listed in index.html. Comes out looking great:

Hopefully that helps or gives you some ideas!

–
Jon