updating playgound to recent (v1.7) Tailwind versions. Upgrading dependencies, README, removing PurgeCSS which is now built-in, and configured from the config file

Author: simonswiss

README.md

@@ -6,39 +6,39 @@ To get started:
 
 1. Clone the repository:
 
-    ```bash
-    git clone https://github.com/tailwindcss/playground.git tailwindcss-playground
+   ```bash
+   git clone https://github.com/tailwindcss/playground.git tailwindcss-playground
 
-    cd tailwindcss-playground
-    ```
+   cd tailwindcss-playground
+   ```
 
 2. Install the dependencies:
 
-    ```bash
-    # Using npm
-    npm install
+   ```bash
+   # Using npm
+   npm install
 
-    # Using Yarn
-    yarn
-    ```
+   # Using Yarn
+   yarn
+   ```
 
 3. Start the development server:
 
-    ```bash
-    # Using npm
-    npm run serve
+   ```bash
+   # Using npm
+   npm run serve
 
-    # Using Yarn
-    yarn run serve
-    ```
+   # Using Yarn
+   yarn run serve
+   ```
 
-    Now you should be able to see the project running at localhost:8080.
+   Now you should be able to see the project running at localhost:8080.
 
 4. Open `public/index.html` in your editor and start experimenting!
 
 ## Building for production
 
-Even though this isn't necessarily a starter kit for a proper project, we've included an example of setting up both [Purgecss](https://www.purgecss.com/) and [cssnano](https://cssnano.co/) to optimize your CSS for production.
+Even though this isn't necessarily a starter kit for a proper project, we've included an example of setting up [cssnano](https://cssnano.co/) to optimize your CSS for production.
 
 To build an optimized version of your CSS, simply run:
 

package.json

@@ -6,15 +6,14 @@
     "start": "npm run serve"
   },
   "dependencies": {
-    "autoprefixer": "^9.5.1",
-    "tailwindcss": "^1.0"
+    "autoprefixer": "^9.8.6",
+    "tailwindcss": "^1.7.2"
   },
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^1.2.0",
-    "concurrently": "^4.1.0",
-    "cross-env": "^5.2.0",
+    "concurrently": "^5.3.0",
+    "cross-env": "^7.0.2",
     "cssnano": "^4.1.10",
     "live-server": "^1.2.1",
-    "postcss-cli": "^6.1.2"
+    "postcss-cli": "^7.1.1"
   }
 }

postcss.config.js

@@ -1,14 +1,7 @@
-const purgecss = require('@fullhuman/postcss-purgecss')({
-  content: ['./public/**/*.html'],
-  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
-})
-
 module.exports = {
   plugins: [
-    require('tailwindcss'),
-    require('autoprefixer'),
-    ...process.env.NODE_ENV === 'production'
-      ? [purgecss, require('cssnano')]
-      : []
-  ]
-}
+    require("tailwindcss"),
+    require("autoprefixer"),
+    ...(process.env.NODE_ENV === "production" ? [require("cssnano")] : []),
+  ],
+};

tailwind.config.js

@@ -1,7 +1,8 @@
 module.exports = {
+  purge: ["./public/**/*.html"],
   theme: {
     extend: {},
+    variants: {},
+    plugins: [],
   },
-  variants: {},
-  plugins: [],
-}
+};