Initial commit

This commit is contained in:
William Carroll 2019-11-15 07:04:59 -03:00
commit d0b29c4ccf
11 changed files with 242 additions and 0 deletions

3
.gitignore vendored Normal file
View file

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

3
.vscode/extensions.json vendored Normal file
View file

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

53
README.md Normal file
View file

@ -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.

19
package.json Normal file
View file

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

14
postcss.config.js Normal file
View file

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

BIN
public/favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

BIN
public/favicon-32x32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

140
public/index.html Normal file

File diff suppressed because one or more lines are too long

3
public/tailwind.css Normal file
View file

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

7
tailwind.config.js Normal file
View file

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