Initial commit

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+public/build
+yarn.lock

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["bradlc.vscode-tailwindcss"]
+}

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.

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

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')]
+      : []
+  ]
+}

public/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+}