From 6138c4043d2991d5d805f5498e8fb1bb6f55b80f Mon Sep 17 00:00:00 2001 From: Ian Rodrigues Date: Fri, 15 Nov 2019 07:04:59 -0300 Subject: 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 0000000..408cb74 --- /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 0000000..99e242b --- /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 0000000..ad88e6f --- /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 0000000..2c3a60a --- /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 0000000..e4fec19 --- /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 0000000..58aae7e Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..30eb539 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..70be1bc Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..87adfa2 --- /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 0000000..b5c61c9 --- /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 0000000..af829e2 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,7 @@ +module.exports = { + theme: { + extend: {}, + }, + variants: {}, + plugins: [], +} -- cgit v1.2.3