diff --git a/README.md b/README.md index ad88e6fa..2f887ff9 100644 --- a/README.md +++ b/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: diff --git a/package.json b/package.json index d4d18a8b..a0feae03 100644 --- a/package.json +++ b/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" } } diff --git a/postcss.config.js b/postcss.config.js index e4fec190..8985e91f 100644 --- a/postcss.config.js +++ b/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")] : []), + ], +}; diff --git a/tailwind.config.js b/tailwind.config.js index af829e20..5bedfaa4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,7 +1,8 @@ module.exports = { + purge: ["./public/**/*.html"], theme: { extend: {}, + variants: {}, + plugins: [], }, - variants: {}, - plugins: [], -} +};