mirror of
https://github.com/CoreyGinnivan/system-uicons.git
synced 2024-06-10 09:52:14 +02:00
Added eleventy + tailwind boilerplate
This commit is contained in:
commit
5121f1ab8a
21
LICENSE
Normal file
21
LICENSE
Normal file
|
@ -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.
|
35
README.md
Normal file
35
README.md
Normal file
|
@ -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!
|
23
package.json
Normal file
23
package.json
Normal file
|
@ -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"
|
||||
}
|
||||
}
|
3
postcss.config.js
Normal file
3
postcss.config.js
Normal file
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
plugins: [require("tailwindcss")("./tailwind.config.js")],
|
||||
}
|
3
src/css/tailwind.src.css
Normal file
3
src/css/tailwind.src.css
Normal file
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
16
src/index.html
Normal file
16
src/index.html
Normal file
|
@ -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>
|
11
tailwind.config.js
Normal file
11
tailwind.config.js
Normal file
|
@ -0,0 +1,11 @@
|
|||
module.exports = {
|
||||
theme: {
|
||||
// Some useful comment
|
||||
},
|
||||
variants: {
|
||||
// Some useful comment
|
||||
},
|
||||
plugins: [
|
||||
// Some useful comment
|
||||
]
|
||||
}
|
61
webpack.config.js
Normal file
61
webpack.config.js
Normal file
|
@ -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 a new issue