diff --git a/README.md b/README.md index ad88e6fa..936d3b29 100644 --- a/README.md +++ b/README.md @@ -6,39 +6,46 @@ 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 [cssnano](https://cssnano.co/) to optimize your CSS for production and added configured [tailwind.config.js](tailwind.config.css) to remove unused CSS. + +```js +module.exports = { + purge: ['./public/**/*.html'], + ... +}; +``` To build an optimized version of your CSS, simply run: diff --git a/package.json b/package.json index d4d18a8b..521ca249 100644 --- a/package.json +++ b/package.json @@ -5,16 +5,13 @@ "production": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/build/tailwind.css", "start": "npm run serve" }, - "dependencies": { - "autoprefixer": "^9.5.1", - "tailwindcss": "^1.0" - }, "devDependencies": { - "@fullhuman/postcss-purgecss": "^1.2.0", - "concurrently": "^4.1.0", - "cross-env": "^5.2.0", + "concurrently": "^5.2.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-preset-env": "^6.7.0", + "tailwindcss": "^1.4.6" } } diff --git a/postcss.config.js b/postcss.config.js index e4fec190..469a0a0d 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('postcss-preset-env'), + ...(process.env.NODE_ENV === 'production' ? [require('cssnano')] : []), + ], +}; diff --git a/public/index.html b/public/index.html index 87adfa2b..635619b9 100644 --- a/public/index.html +++ b/public/index.html @@ -1,131 +1,307 @@ - + - - - - - - - Welcome to Tailwind! - - -
- -
-
-
-
-
- - - - - - - - - - - - -
-
-

Welcome to your first Tailwind project!

-

The file you're looking at is the index.html file in the repository you just cloned. If you used npm run serve to view this page, try editing that file to see this page automatically update with your changes.

+ + + + + + + Welcome to Tailwind! + + +
+ +
+
+
+
+
+ + + + + + + + + + + + +
+
+

+ Welcome to your first Tailwind project! +

+

+ The file you're looking at is the + index.html + file in the repository you just cloned. If you used + npm run serve + to view this page, try editing that file to see this page + automatically update with your changes. +

+
-
-
-
-
-
-
- - - - - - -
-
-

Documentation

-

Get familiar with Tailwind’s utility-first approach and start building awesome stuff.

-
- - Explore the docs - - - - +
+
+
+
+
+ + + + + + +
+
+

+ Documentation +

+

+ Get familiar with Tailwind’s utility-first approach and + start building awesome stuff. +

+
+ + Explore the docs + + + + +
-
-
-
-
- - - - -
-
-

Component Examples

-

Browse pre-built components using Tailwind’s utility classes.

-
- - Browse examples - - - - +
+
+
+ + + + +
+
+

+ Component Examples +

+

+ Browse pre-built components using Tailwind’s utility + classes. +

+
+ + Browse examples + + + + +
-
-
-
-
- - - - -
-
-

Resources

-

A collection of assets and resources to help supercharge your Tailwind workflow.

-
- - Find resources - - - - +
+
+
+ + + + +
+
+

+ Resources +

+

+ A collection of assets and resources to help supercharge + your Tailwind workflow. +

+
+ + Find resources + + + + +
-
-
-
-
- - - - -
-
-

Community

-

Connect and learn from other Tailwind users in the community.

-
- - Connect - - - - +
+
+
+ + + + +
+
+

+ Community +

+

+ Connect and learn from other Tailwind users in the + community. +

+
+ + Connect + + + + +
@@ -135,6 +311,5 @@

Community

-
- + diff --git a/tailwind.config.js b/tailwind.config.js index af829e20..7af3a1a1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,7 +1,8 @@ module.exports = { + purge: ['./public/**/*.html'], theme: { extend: {}, }, variants: {}, plugins: [], -} +};