Initial commit
This commit is contained in:
commit
d0b29c4ccf
11 changed files with 242 additions and 0 deletions
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
|
@ -0,0 +1,3 @@
|
|||
node_modules
|
||||
public/build
|
||||
yarn.lock
|
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["bradlc.vscode-tailwindcss"]
|
||||
}
|
53
README.md
Normal file
53
README.md
Normal 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
19
package.json
Normal 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
14
postcss.config.js
Normal 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
BIN
public/favicon-16x16.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1 KiB |
BIN
public/favicon-32x32.png
Normal file
BIN
public/favicon-32x32.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
140
public/index.html
Normal file
140
public/index.html
Normal file
File diff suppressed because one or more lines are too long
3
public/tailwind.css
Normal file
3
public/tailwind.css
Normal file
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
7
tailwind.config.js
Normal file
7
tailwind.config.js
Normal file
|
@ -0,0 +1,7 @@
|
|||
module.exports = {
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
}
|
Loading…
Reference in a new issue