Tailwind: Get the config working

[tordans]

Right now, anything I change in the config is not respected by the build. And I could not figure out why.
Until now, we worked around this by not adding classes to the config but manually. But we miss out on a lot of Tailwind without a working config.

[tordans]

Is it because we use the PostCSS 7 compatibility build

I wanted to see if the problem disappears by using the "regular" latest build.
What I tried / where I stand

• Uninstall the compatibility build reinstalling the @latest following https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
  • `npm uninstall tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9``
  • npm install tailwindcss@latest postcss@latest autoprefixer@latest

However, this still does not work due to an error with parcel:

Server running at http://localhost:1234
🚨  /Users/tobiasjordans/Development/OSM/MapComplete/index.css:undefined:undefined: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/Users/tobiasjordans/Development/OSM/MapComplete/node_modules/parcel/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/Users/tobiasjordans/Development/OSM/MapComplete/node_modules/parcel/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/Users/tobiasjordans/Development/OSM/MapComplete/node_modules/parcel/node_modules/postcss/lib/postcss.js:55:10)
    at module.exports (/Users/tobiasjordans/Development/OSM/MapComplete/node_modules/parcel/src/transforms/postcss.js:17:19)
    at async CSSAsset.transform (/Users/tobiasjordans/Development/OSM/MapComplete/node_modules/parcel/src/assets/CSSAsset.js:133:5)
    at async CSSAsset.process (/Users/tobiasjordans/Development/OSM/MapComplete/node_modules/parcel/src/Asset.js:216:7)
    at async Pipeline.processAsset (/Users/tobiasjordans/Development/OSM/MapComplete/node_modules/parcel/src/Pipeline.js:46:7)
    at async Pipeline.process (/Users/tobiasjordans/Development/OSM/MapComplete/node_modules/parcel/src/Pipeline.js:24:23)
    at async Object.run (/Users/tobiasjordans/Development/OSM/MapComplete/node_modules/parcel/src/worker.js:15:12)
    at async Bundler.loadAsset (/Users/tobiasjordans/Development/OSM/MapComplete/node_modules/parcel/src/Bundler.js:577:19)
^C⏎

Updating to parcel 2.0

It looks like the "parcel": "^1.12.4", is the newest version of the 1.0 build.
But parcel2 should work with the newest postCSS.

There is an https://v2.parceljs.org/getting-started/migration/: https://v2.parceljs.org/getting-started/migration/

Which I did not try to follow since I know nothing about it :-).

[tordans]

No special package.json#feature config neeed(?)

I was wondering if we need special commands in the start script and such.

But … examples like https://github.com/tailwindlabs/tailwindcss.com/blob/master/package.json#L3-L6 do not have any special commands …

Related: Build for production

However, I still thing that the build script should include https://tailwindcss.com/docs/installation#building-for-production NODE_ENV=production npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

[tordans]

OK, I figured it out.
One needs to restart the server after changing the config 🤦.

Will update the code in my next PR an move the custom classes to the config.

[tordans]

Update: For some reason I cannot move the custom media query to the config. Or at least it does not show up in the generated css file.

https://tailwindcss.com/docs/breakpoints#custom-media-queries

module.exports = {
  purge: [
…
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
…
      screens: {
        'landscape': { 'raw': '(max-height: 600px) and (min-width: 600px)' },
      },
    },
  },
  variants: {
…
  },
  plugins: [],
}