Added eleventy + tailwind boilerplate
This commit is contained in:
Corey
commit
5121f1ab8a
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2017 Adam Wathan <adam.wathan@gmail.com>
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
# Tailwind CSS Webpack Starter Project
|
||||||
|
|
||||||
|
This is an example of a super simple Webpack setup for using [Tailwind CSS](https://tailwindcss.com).
|
||||||
|
|
||||||
|
To get started, clone the project and install the dependencies:
|
||||||
|
|
||||||
|
```
|
||||||
|
# Using npm
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Using Yarn
|
||||||
|
yarn
|
||||||
|
```
|
||||||
|
|
||||||
|
After that, start up Webpack Development Server:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Webpack Development Server will watch `/src/styles.css` and `/tailwind.js` and rebuild your stylesheet on every change.
|
||||||
|
|
||||||
|
You can play around with `/index.html` to see the effects of your changes.
|
||||||
|
|
||||||
|
To build a production bundle run:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run prod
|
||||||
|
```
|
||||||
|
|
||||||
|
After that you will have a ready to deploy bundle at `/dist`
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
Have a lot of experience with Webpack and suggestions on how we could improve this starter template? We'd love a PR!
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "cross-env NODE_ENV=development webpack-dev-server",
|
||||||
|
"prod": "cross-env NODE_ENV=production webpack --no-progress"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"copy-webpack-plugin": "^5.0.2",
|
||||||
|
"cross-env": "^5.1",
|
||||||
|
"css-loader": "^0.28.10",
|
||||||
|
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
||||||
|
"glob-all": "^3.1.0",
|
||||||
|
"html-webpack-plugin": "^3.0.6",
|
||||||
|
"postcss": "^6.0.19",
|
||||||
|
"postcss-loader": "^2.1.1",
|
||||||
|
"purgecss-webpack-plugin": "^1.4.0",
|
||||||
|
"style-loader": "^0.20.3",
|
||||||
|
"tailwindcss": "^1.0.0-beta.3",
|
||||||
|
"webpack": "^4.29.6",
|
||||||
|
"webpack-cli": "^3.3.0",
|
||||||
|
"webpack-dev-server": "^3.2.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: [require("tailwindcss")("./tailwind.config.js")],
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Tailwind Starter Template</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="min-h-screen flex items-center justify-center bg-teal-600">
|
||||||
|
<h1 class="text-5xl text-white font-sans">Hello World!</h1>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
module.exports = {
|
||||||
|
theme: {
|
||||||
|
// Some useful comment
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
// Some useful comment
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
// Some useful comment
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
const path = require("path")
|
||||||
|
const glob = require("glob-all")
|
||||||
|
const ExtractTextPlugin = require("extract-text-webpack-plugin")
|
||||||
|
const HtmlWebpackPlugin = require("html-webpack-plugin")
|
||||||
|
const CopyWebpackPlugin = require("copy-webpack-plugin")
|
||||||
|
const PurgecssPlugin = require("purgecss-webpack-plugin")
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom PurgeCSS Extractor
|
||||||
|
* https://github.com/FullHuman/purgecss
|
||||||
|
* https://github.com/FullHuman/purgecss-webpack-plugin
|
||||||
|
*/
|
||||||
|
class TailwindExtractor {
|
||||||
|
static extract(content) {
|
||||||
|
return content.match(/[A-z0-9-:\/]+/g)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: "./src/css/tailwind.src.css",
|
||||||
|
mode: process.env.NODE_ENV,
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: ExtractTextPlugin.extract({
|
||||||
|
fallback: "style-loader",
|
||||||
|
use: [
|
||||||
|
{ loader: "css-loader", options: { importLoaders: 1 } },
|
||||||
|
"postcss-loader",
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new ExtractTextPlugin("styles.css", {
|
||||||
|
disable: process.env.NODE_ENV === "development",
|
||||||
|
}),
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
filename: "index.html",
|
||||||
|
template: "src/index.html",
|
||||||
|
}),
|
||||||
|
/// Enable images folder
|
||||||
|
// new CopyWebpackPlugin([
|
||||||
|
// {
|
||||||
|
// from: "src/images",
|
||||||
|
// to: "images",
|
||||||
|
// },
|
||||||
|
// ]),
|
||||||
|
new PurgecssPlugin({
|
||||||
|
paths: glob.sync([path.join(__dirname, "src/**/*.html")]),
|
||||||
|
extractors: [
|
||||||
|
{
|
||||||
|
extractor: TailwindExtractor,
|
||||||
|
extensions: ["html", "js"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue