From 53b9a6ea00ab99e81d2609ffbdd65a06cf880310 Mon Sep 17 00:00:00 2001 From: jagreehal Date: Thu, 13 Jun 2019 06:51:11 +0100 Subject: [PATCH 1/2] use browser-sync instead of live-server --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 2c3a60a9..df4b0f6f 100644 --- a/package.json +++ b/package.json @@ -1,19 +1,19 @@ { "scripts": { - "serve": "cross-env NODE_ENV=development concurrently \"postcss public/tailwind.css -o public/build/tailwind.css --watch\" \"live-server ./public\"", + "dev": "cross-env NODE_ENV=development concurrently \"postcss public/tailwind.css -o public/build/tailwind.css --watch\" \"browser-sync start -s 'public' --files 'public' --open --no-notify\"", "development": "cross-env NODE_ENV=development postcss public/tailwind.css -o public/build/tailwind.css", "production": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/build/tailwind.css" }, "dependencies": { - "autoprefixer": "^9.5.1", - "tailwindcss": "^1.0" + "autoprefixer": "^9.6.0", + "tailwindcss": "^1.0.4" }, "devDependencies": { "@fullhuman/postcss-purgecss": "^1.2.0", + "browser-sync": "^2.26.7", "concurrently": "^4.1.0", "cross-env": "^5.2.0", "cssnano": "^4.1.10", - "live-server": "^1.2.1", "postcss-cli": "^6.1.2" } } From 4bfb40e772899cd33788ae4220d7859c4f5707af Mon Sep 17 00:00:00 2001 From: jagreehal Date: Sat, 4 Jul 2020 11:29:32 +0100 Subject: [PATCH 2/2] updated to use Tailwind@1.4.6 --- README.md | 43 +++-- package.json | 21 ++- postcss.config.js | 15 +- public/index.html | 413 +++++++++++++++++++++++++++++++------------- sandbox.config.json | 3 + tailwind.config.js | 3 +- 6 files changed, 338 insertions(+), 160 deletions(-) create mode 100644 sandbox.config.json 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 df4b0f6f..0b230476 100644 --- a/package.json +++ b/package.json @@ -1,19 +1,18 @@ { "scripts": { - "dev": "cross-env NODE_ENV=development concurrently \"postcss public/tailwind.css -o public/build/tailwind.css --watch\" \"browser-sync start -s 'public' --files 'public' --open --no-notify\"", + "serve": "cross-env NODE_ENV=development concurrently \"postcss public/tailwind.css -o public/build/tailwind.css --watch\" \"live-server ./public\"", "development": "cross-env NODE_ENV=development postcss public/tailwind.css -o public/build/tailwind.css", - "production": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/build/tailwind.css" - }, - "dependencies": { - "autoprefixer": "^9.6.0", - "tailwindcss": "^1.0.4" + "production": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/build/tailwind.css", + "start": "npm run serve" }, + "dependencies": {}, "devDependencies": { - "@fullhuman/postcss-purgecss": "^1.2.0", - "browser-sync": "^2.26.7", - "concurrently": "^4.1.0", - "cross-env": "^5.2.0", + "concurrently": "^5.2.0", + "cross-env": "^7.0.2", "cssnano": "^4.1.10", - "postcss-cli": "^6.1.2" + "live-server": "^1.2.1", + "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/sandbox.config.json b/sandbox.config.json new file mode 100644 index 00000000..a4df8557 --- /dev/null +++ b/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "node" +} 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: [], -} +};