Merge pull request #63 from umstek/upgrade/2021-dec

Wickramaranga Abeygunawardhana · web-flow · commit b3130ff0296b · 2021-12-12T11:54:02.000+05:30
Upgrade dependencies and Readme
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parcel-typescript-react-tailwind",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "license": "MIT",
   "description": "Trying-out Tailwind CSS with Parcel",
   "scripts": {
@@ -9,18 +9,18 @@
     "clean": "rm -rf .parcel-cache dist"
   },
   "devDependencies": {
-    "@parcel/transformer-image": "2.0.0",
-    "@types/react": "17.0.30",
-    "@types/react-dom": "17.0.9",
-    "autoprefixer": "10.3.7",
-    "parcel": "2.0.0",
-    "postcss": "8.3.9",
-    "typescript": "4.4.4"
+    "@parcel/transformer-image": "2.0.1",
+    "@types/react": "17.0.37",
+    "@types/react-dom": "17.0.11",
+    "autoprefixer": "10.4.0",
+    "parcel": "2.0.1",
+    "postcss": "8.4.4",
+    "typescript": "4.5.3"
   },
   "dependencies": {
     "postcss-import": "^14.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "tailwindcss": "^2.2.4"
+    "tailwindcss": "^3.0.1"
   }
 }
diff --git a/readme.md b/readme.md
@@ -1,6 +1,6 @@
 # Trying-out Tailwind CSS with Parcel
 
-Some years ago, I was searching for a UI kit to use in one of my hobby react apps. I found some good-looking React UI kits like [Ant Design](http://ant.design), [BlueprintJS](https://blueprintjs.com) and [Evergreen](https://evergreen.segment.com) but sometimes the bloat becomes unbearable and customizability becomes a priority. [Material UI](https://material-ui.com) is said to be the most popular one, but, no thanks; not a fan of material UI. Anyway, the discussion on available react UI kits is a topic for a different post. Here what happened was that I tried to create my own UI kit with SASS and soon found out that there is a gap between my idea on how the components should look and my knowledge on how to use CSS properly.
+Few years ago, I was searching for a UI kit to be used in one of my hobby react apps. I found some good-looking React UI kits like [Ant Design](http://ant.design), [BlueprintJS](https://blueprintjs.com) and [Evergreen](https://evergreen.segment.com) but sometimes the bloat becomes unbearable and customizability becomes a priority. [Material UI](https://material-ui.com) is said to be the most popular one, but, no thanks; not a fan of material UI. Anyway, the discussion on available react UI kits is a topic for a different post. Here what happened was that I tried to create my own UI kit with SASS and soon found out that there is a gap between my idea on how the components should look and my knowledge on how to use CSS properly.
 
 # What is Tailwind CSS?
 
@@ -18,27 +18,27 @@ First I’ve created the `tailwind-test` folder and initialized the project with
 First add parcel bundler; this takes care of how to load, process and bundle all the `.tsx`, .`css`, `.html` etc. you’re going to create.
 
 ```sh
-yarn add --dev parcel-bundler
+yarn add --dev parcel
 ```
 
 Then add Tailwind CSS as stated in the documentation.
 
 ```sh
-yarn add tailwindcss
+yarn add tailwindcss postcss autoprefixer
 ```
 
 Add the below `scripts` section to your `package.json` so that you can run, build and clean the project easily.
 
 ```json
 "scripts": {
-  "start": "parcel ./src/index.html --open",
-  "build": "parcel build ./src/index.html",
-  "clean": "rm -rf dist .cache"
+  "start": "parcel serve ./src/index.html --open",
+  "build": "parcel build --dist-dir dist src/index.html",
+  "clean": "rm -rf .parcel-cache dist"
 },
 ```
 
 Create the `src` folder and create the `index.html` file with a basic HTML5 template. You can also use `html:5` snippet/emmet if you’re using [vsocde](https://code.visualstudio.com/).
-Add `<div class="app"></div>` and `<script src="./main.tsx"></script>` inside body, so that React can mount your app there.
+Add `<div class="app"></div>` and `<script src="./main.ts"></script>` inside body, so that React can mount your app there.
 
 ```html
 <!DOCTYPE html>
@@ -51,28 +51,19 @@ Add `<div class="app"></div>` and `<script src="./main.tsx"></script>` inside bo
   </head>
   <body>
     <div id="app"></div>
-    <script src="./main.tsx"></script>
+    <script type="module" src="./main.ts"></script>
   </body>
 </html>
 ```
 
-Create the `main.tsx` and add your React app there. Note that we have added a [button](https://tailwindcss.com/components/buttons) which uses Tailwind styles with utility classes. Utility classes is [not the only way](https://tailwindcss.com/docs/extracting-components) you can add Tailwind styles. Since we’re trying Tailwind with React, utility classes is enough for us right now.
+Create the `main.ts` and add your React app there. Note that we have added a custom card component which uses Tailwind styles with utility classes. `src/components/Card/index.tsx` and `src/views/App.tsx` are omitted for clarity. Utility classes is [not the only way](https://tailwindcss.com/docs/reusing-styles) you can add Tailwind styles. Since we’re trying Tailwind with React, utility classes is enough for us right now.
 
-```tsx
+```ts
 import * as React from "react";
-import { render } from "react-dom";
-
-function App() {
-  return (
-    <div>
-      <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
-        Hello, Tailwind!
-      </button>
-    </div>
-  );
-}
+import * as ReactDOM from "react-dom";
+import { App } from "./views/App";
 
-render(<App />, document.getElementById("app"));
+ReactDOM.render(React.createElement(App), document.getElementById("app"));
 ```
 
 Create `main.css` file and add the below. These are tailwind directives. This is needed to inject tailwind [styles](https://tailwindcss.com/docs/preflight) and utility classes into your CSS.
@@ -85,135 +76,27 @@ Create `main.css` file and add the below. These are tailwind directives. This is
 @tailwind utilities;
 ```
 
-Add `postcss.config.js` file inside the project folder (i.e.: one level up from `src` folder). Tailwind CSS is a [PostCSS](https://postcss.org/) plugin where PostCSS handles all pre/post processing of CSS you write, such as adding [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) [automatically](https://github.com/postcss/autoprefixer). Parcel has built-in support for PostCSS, but doesn’t know yet about Tailwind, so we have to configure it with the below content. Make sure you include `tailwindcss` before `autoprefixer`.
-
-```js
-module.exports = {
-  plugins: [
-    require("tailwindcss"),
-    require("autoprefixer"),
-    require("postcss-nested"),
-  ],
-};
-```
-
-Now it’s show-time. Run `yarn start`.
-At this moment, if you are curious why we didn’t add typescript or react, don’t worry; parcel will install them automatically — and yes, it knows that TypeScript is a dev dependency. And since you have passed the `--open` flag, it even opens the browser window for you.
-
-You should see something like below.
-
-![Hello, world!](https://paper-attachments.dropbox.com/s_597CE0BBFBFE1EF1D6752296A9DAB2D8A884BE13707C4980DBFA5F0EAEC2575E_1573911903692_image.png)
-
-Done.
-
-# Trying to style my way
-
-I tried playing with it a little. Changed `hover:bg-blue-700` to `hover:bg-blue-400`. Now it displays a lighter color on mouse over.
-
-```tsx
-<button className="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded">
-  Hello, Tailwind!
-</button>
-```
-
-![hover:bg-blue-400](https://paper-attachments.dropbox.com/s_597CE0BBFBFE1EF1D6752296A9DAB2D8A884BE13707C4980DBFA5F0EAEC2575E_1573919433381_image.png)
-
-Added an [active](https://tailwindcss.com/docs/pseudo-class-variants#active) background color using `active:bg-blue-900`. (This technique with colon is called Pseudo-class Variants in Tailwind CSS; we use pseudo-class names in `className` rather than in CSS.) Nothing changed. It still shows the hover color on press! What could have gone wrong? It is actually documented right below where the example for `active:` is. We have to add `active` variant to the Tailwind config file `tailwind.config.js`.
-
-```js
-module.exports = {
-  // ...
-  variants: {
-    backgroundColor: ["active", "responsive", "hover", "focus"],
-  },
-  // ...
-};
-```
-
-By default, [some of the variants are disabled](https://tailwindcss.com/docs/pseudo-class-variants#default-variants-reference) due to file-size considerations. Even with these disabled, Tailwind is quite [large](https://tailwindcss.com/docs/controlling-file-size). 😕
-Anyway, now I configured variants as the above and ran `yarn clean` to clean temp files and started again. We clearly configured tailwind! Or… did we? There is an order how we should organize variants, because, [Tailwind is no magic](https://tailwindcss.com/docs/configuring-variants/#ordering-variants); it generates CSS. CSS precedence applies here too.
-I enabled all the variants in the correct order for all the styles with the below. We don’t have file size considerations for this test so that is fine.
-
-```js
-module.exports = {
-  variants: [
-    "responsive",
-    "group-hover",
-    "focus-within",
-    "first",
-    "last",
-    "odd",
-    "even",
-    "hover",
-    "focus",
-    "active",
-    "visited",
-    "disabled",
-  ],
-};
-```
-
-It works.
-
-![active:bg-blue-900](https://paper-attachments.dropbox.com/s_597CE0BBFBFE1EF1D6752296A9DAB2D8A884BE13707C4980DBFA5F0EAEC2575E_1573922304511_image.png)
-
-# Next steps…
-
-Let’s see the file sizes…
-
-![5.5 MB](https://paper-attachments.dropbox.com/s_597CE0BBFBFE1EF1D6752296A9DAB2D8A884BE13707C4980DBFA5F0EAEC2575E_1573922486261_image.png)
-
-Gosh! It’s huge. This is not the size you want your production CSS bundle to be. We are using a lot of unwanted styles. But how do we reduce the bundle? [Manually selecting](https://tailwindcss.com/docs/controlling-file-size#removing-unused-theme-values) what is necessary using the configuration file is hard. We have to try [something else](https://tailwindcss.com/docs/controlling-file-size#setting-up-purgecss).
-
-> Mozilla's [Firefox Send](https://send.firefox.com/) is built with Tailwind, yet somehow their CSS is only 13.1kb minified, and only 4.7kb gzipped! How?
-> They're using [Purgecss](https://www.purgecss.com/),…
-
-~~Let’s add `purgecss`. Run `yarn add @fullhuman/postcss-purgecss -D`. Unfortunately, parcel currently fails to auto install postcss plugins just by looking at its config. I don’t think it’s in parcel’s scope.~~
-
-**Update: As of `tailwindcss` version `1.4.5`, we don't need to configure purgecss this way. So do not install `purgecss` and keep your `postcss.config.js` intact. (The old way would also work, anyway.)**
+Add `.postcssrc` file inside the project folder (i.e.: one level up from `src` folder). Tailwind CSS is a [PostCSS](https://postcss.org/) plugin where PostCSS handles all pre/post processing of CSS you write, such as adding [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) [automatically](https://github.com/postcss/autoprefixer). Parcel has built-in support for PostCSS, but doesn’t know yet about Tailwind, so we have to configure it with the below content. Make sure you include `tailwindcss` before `autoprefixer`.
 
 ```js
-// const purgecss = require("@fullhuman/postcss-purgecss")({
-//   // Specify the paths to all of the template files in your project
-//   content: [
-//     "./src/**/*.html",
-//     "./src/**/*.{t,j}sx"
-//     // etc.
-//   ],
-//   // Include any special characters you're using in this regular expression
-//   defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
-// });
-module.exports = {
-  plugins: [
-    require("tailwindcss"),
-    require("autoprefixer"),
-    require("postcss-nested"),
-    // ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
-  ],
-};
+{
+  "plugins": {
+    "postcss-import": true,
+    "tailwindcss": true,
+    "postcss-nested": true,
+    "autoprefixer": true
+  }
+}
 ```
 
-**Update: But edit the `tailwind.config.css` to look like the below (note the _purge_):**
-
-```js
-module.exports = {
-  purge: ["./src/**/*.html", "./src/**/*.{j,t}sx"],
-  theme: {
-    // ...
-  },
-  variants: [
-    //...
-  ],
-};
-```
+Now it’s show-time. Run `yarn` to install dependencies and `yarn start` to start. Since you have specified `--open` in `yarn start`, you’ll see the browser open with the `index.html` file.
 
-Now, let’s check the file sizes…
+You should see a card with a title and a description.
 
-![2 KB](https://paper-attachments.dropbox.com/s_597CE0BBFBFE1EF1D6752296A9DAB2D8A884BE13707C4980DBFA5F0EAEC2575E_1573927636877_image.png)
+# Old tailwind versions
 
-It’s down to ~~two~~ (**update: a little larger than that**) kilobytes. That’s because we only have a few classes used.
-So what exactly does purgecss do? It basically traverses through all our `.tsx` files and finds the class names we have used. Then it removes selectors that match all unused class names from CSS (check that regex!). Ugly, but works. Of course, you have to be careful when dynamically generating CSS class names in react.
-At this moment, you should’ve realized that although Tailwind can make our lives easier, it also has its own drawbacks. Working with Tailwind CSS is NOT a no-brainer.
+Find my blogpost here
+https://umstek.tk/posts/trying-out-tailwindcss-with-parcel/ which includes the original content written for tailwind 1.x and then updated for tailwind 2.x.
 
 # The good, the bad, and the ugly
 
@@ -227,81 +110,29 @@ I can notice several good things about Tailwind CSS at a glance.
 
 There isn’t much to complain about the library but,
 
-- It can get unintuitive sometimes to configure.
-- Gradients, icons, animations ~~and transitions~~ (**update: transitions and transforms are there after v1.2.0**) aren’t built-in. Adding them can be complicated.
+- Fonts, Icons, animations aren’t built-in. Adding them can be complicated.
 - Advanced controls such as switches, calendars, tables, floating notifications, modals etc. are not available.
-- Generated CSS can get quite large if you’re using a lot of features. Using purgecss eliminates this but it’s kind of ugly because it does a string search; not proper parsing. But, again, it doesn’t know what template language/framework we’re using.
-- Lack of IDE support (yet). But there are vscode extensions, ~~but none for react~~ (**Update: bradlc.vscode-tailwindcss worked for react**).
 
-# Demo
+(I had more points here for the old versions but looks like now tailwind supports pretty much everything you'll need.)
 
-~~The demo below uses Tailwind plugins `tailwindcss-transforms` and `tailwindcss-transitions` because tailwind doesn’t support transforms and transitions out-of-the-box.~~
+# Demo
 
 ![Demo](https://paper-attachments.dropbox.com/s_597CE0BBFBFE1EF1D6752296A9DAB2D8A884BE13707C4980DBFA5F0EAEC2575E_1574005327689_ezgif.com-video-to-gif.gif)
 
 I created a template with the above plugins as a starting point [here](https://github.com/umstek/parcel-typescript-react-tailwind) on GitHub.
 
 Or, [see it in action](https://parcel-typescript-react-tailwind.vercel.app/).
 
-Tailwind also supports custom themes, variants, plugins etc., but that’s outside the scope of this short post. The documentation is your friend.
-
-# Updates
-
-## 2020 October Update 1
-
-Get ready for v2.0 upgrade, remove warning messages.
-
-`tailwind.config.js`.
-
-```js
-  future: {
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
-  },
-```
-
-## 2021 May Update 1
-
-Upgraded parcel bundler to 2.x; this requires the image URLs to be changed.
-
-```diff
-- import cardImage from "../../static/vitalik-vynarchyk-0PePaKnEmuM-unsplash.jpg";
-+ import cardImage from "url:../../static/vitalik-vynarchyk-0PePaKnEmuM-unsplash.jpg";
-```
-
-We need to ignore `.parcel-cache` from committing. (.gitignore). Changed the `clean` command too.
-
-```diff
-+ .parcel-cache
-```
-
-TypeScript Alias paths are not working; but maybe we can fix it? However, specify relative URL for now.
-
-```diff
-- import "~styles/main.pcss";
-+ import "../styles/main.pcss";
-```
-
-TypeScript has been upgraded to 4.x together with the parcel upgrade. I changed the `tsconfig.json`.
-
-```diff
-- "target": "es5",
-- "module": "esnext",
-+ "moduleResolution": "node",
-+ "target": "ESNext",
-+ "module": "ESNext",
-```
-
-After the 2.x upgrade, `tailwind.config.js` is totally new. We also now use the experimental JIT mode.
+# Resources
 
-And we use a `.postcssrc` file instead of `postcss.config.js` to avoid breaking hot reload.
+https://headlessui.dev/
 
-# Resources
+https://tailwindui.com/
 
 https://www.tailwindtoolbox.com/
 
 https://tailwindcomponents.com/
 
-https://tailwindtemplates.io/cards/
+https://tailwindtemplates.io/
 
 https://github.com/aniftyco/awesome-tailwindcss
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,7 +1,6 @@
 module.exports = {
-  mode: "jit",
-  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/**/*.html"],
-  darkMode: false, // or 'media' or 'class'
+  content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/**/*.html"],
+  darkMode: 'media',
   theme: {
     extend: {
       scale: {
@@ -10,8 +9,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {},
-  },
   plugins: [],
 };
diff --git a/yarn.lock b/yarn.lock
