0

I am currently trying to create a web application, using TailwindCSS for styles, PostCSS as the processor and parcel-bundler as a bundler, based off this boilerplate from GitHub.

For some reason, every time I run yarn build, everything compiles right except for the CSS. The *.css file in dist/ is completely unchanged from the source file, and it seems like the file is not being processed at all...

My package.json

{
  "license": "MIT",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build --no-minify src/index.html"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "autoprefixer": "^9",
    "parcel-bundler": "^1.12.5",
    "postcss": "^7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.3.4",
  }
}

main.css (CSS source file, *.css file in dist/ looks exactly like this)

/* purgecss start ignore */
@tailwind base;
@tailwind components;

@tailwind utilities;
/* purgecss end ignore */

.btn-orange {
  @apply bg-gray-200 w-28 p-2 text-sm rounded hover:bg-yellow-500 transition-colors shadow-lg font-bold;
}

label {
  @apply font-bold;
}

I have no idea what I'm doing wrong... I have used @tailwind instead of @import as suggested by many posts online, but for some reason the file is still not being processed. I am not sure if it is something wrong with PostCSS, or Parcel.

Andrew Stegmaier
  • 3,429
  • 2
  • 14
  • 26
Meowmi
  • 322
  • 2
  • 11
  • 1
    A quick tip while I look at this more deeply: `parcel-bundler` is the deprecated/unsupported v1 version of parcel. You probably want to remove that and install `"parcel": "^2.0.1"` instead. – Andrew Stegmaier Nov 25 '21 at 18:43
  • Thank you so much!! I updated parcel, and the rest of the packages, plus installed postcss-cli. IT WORKS!! Now the issue I have is with parcel messing up the output directory structure causing all my css and js files to be incorrectly referenced…. Sigh – Meowmi Nov 25 '21 at 19:07
  • Great! Happy to help here if you post a new issue. Parcel will output a flat file structure to the `dist` folder by default, although this can be customized with a [namer plugin](https://stackoverflow.com/questions/62900160/how-to-handle-output-files-in-parcel/69543953#69543953). – Andrew Stegmaier Nov 25 '21 at 19:26
  • One thing occured to me that might be the source of your problem - parcel works for most web apps best if you make the entry-point your `html` file, not the set of `js` and `css` files - see [here](https://parceljs.org/getting-started/webapp/#project-setup) – Andrew Stegmaier Nov 28 '21 at 19:51

0 Answers0