From d0b29c4ccfd92d0f3100a2e44c8ff2856ab10021 Mon Sep 17 00:00:00 2001 From: William Carroll Date: Fri, 15 Nov 2019 07:04:59 -0300 Subject: [PATCH] Initial commit --- .gitignore | 3 + .vscode/extensions.json | 3 + README.md | 53 +++++++++++++++ package.json | 19 ++++++ postcss.config.js | 14 ++++ public/favicon-16x16.png | Bin 0 -> 1029 bytes public/favicon-32x32.png | Bin 0 -> 1295 bytes public/favicon.ico | Bin 0 -> 15086 bytes public/index.html | 140 +++++++++++++++++++++++++++++++++++++++ public/tailwind.css | 3 + tailwind.config.js | 7 ++ 11 files changed, 242 insertions(+) create mode 100644 .gitignore create mode 100644 .vscode/extensions.json create mode 100644 README.md create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 public/favicon-16x16.png create mode 100644 public/favicon-32x32.png create mode 100644 public/favicon.ico create mode 100644 public/index.html create mode 100644 public/tailwind.css create mode 100644 tailwind.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..408cb749d --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +public/build +yarn.lock diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 000000000..99e242bbb --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["bradlc.vscode-tailwindcss"] +} diff --git a/README.md b/README.md new file mode 100644 index 000000000..ad88e6fac --- /dev/null +++ b/README.md @@ -0,0 +1,53 @@ +# Tailwind CSS Playground + +A simple starter project for playing around with Tailwind in a proper PostCSS environment. + +To get started: + +1. Clone the repository: + + ```bash + git clone https://github.com/tailwindcss/playground.git tailwindcss-playground + + cd tailwindcss-playground + ``` + +2. Install the dependencies: + + ```bash + # Using npm + npm install + + # Using Yarn + yarn + ``` + +3. Start the development server: + + ```bash + # Using npm + npm run serve + + # Using Yarn + yarn run serve + ``` + + 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. + +To build an optimized version of your CSS, simply run: + +```bash +# Using npm +npm run production + +# Using Yarn +yarn run production +``` + +After that's done, check out `./public/build/tailwind.css` to see the optimized output. diff --git a/package.json b/package.json new file mode 100644 index 000000000..2c3a60a99 --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "scripts": { + "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.5.1", + "tailwindcss": "^1.0" + }, + "devDependencies": { + "@fullhuman/postcss-purgecss": "^1.2.0", + "concurrently": "^4.1.0", + "cross-env": "^5.2.0", + "cssnano": "^4.1.10", + "live-server": "^1.2.1", + "postcss-cli": "^6.1.2" + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 000000000..e4fec1909 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,14 @@ +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')] + : [] + ] +} diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000000000000000000000000000000000000..58aae7eac16a94e9d81a4ba518b314c8fdf4142a GIT binary patch literal 1029 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 literal 0 HcmV?d00001 diff --git a/public/index.html b/public/index.html new file mode 100644 index 000000000..87adfa2b6 --- /dev/null +++ b/public/index.html @@ -0,0 +1,140 @@ + + + + + + + + + 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 + + + + +
+
+
+
+
+
+
+ + + + +
+
+

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 + + + + +
+
+
+
+
+
+
+ + + + +
+
+

Community

+

Connect and learn from other Tailwind users in the community.

+
+ + Connect + + + + +
+
+
+
+
+
+
+
+
+
+ + diff --git a/public/tailwind.css b/public/tailwind.css new file mode 100644 index 000000000..b5c61c956 --- /dev/null +++ b/public/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 000000000..af829e20f --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,7 @@ +module.exports = { + theme: { + extend: {}, + }, + variants: {}, + plugins: [], +}