Skip to content

Commit

Permalink
Merge pull request #46 from lazymozek/features/improvements
Browse files Browse the repository at this point in the history 
Features and Improvements
  • Loading branch information
@manjumjn
manjumjn committed Feb 16, 2023
2 parents 83d5b65 + f322444 commit 5a5d222
Show file tree
Hide file tree
Showing 8 changed files with 143 additions and 84 deletions.
1 change: 0 additions & 1 deletion _config.yml
View file

This file was deleted.

6 changes: 6 additions & 0 deletions config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@ module.exports = {
tailwindjs: "./tailwind.config.js",
port: 9050,
},
plugins: {
typograpy: true,
forms: true,
lineClamp: true,
containerQueries: true,
},
paths: {
root: "./",
src: {
Expand Down
4 changes: 1 addition & 3 deletions directoryList.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
|-- undefined
|-- .gitignore
|-- Root
|-- config.js
|-- gulpfile.js
|-- package-lock.json
|-- package.json
|-- readme.md
|-- tailwind.config.js
|-- _config.yml
|-- build
| |-- index.html
| |-- css
Expand Down
13 changes: 8 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
{
"name": "gulp-with-tailwindcss",
"version": "1.2.0",
"version": "2.1.0",
"description": "TailwindCSS StarterKit with Gulp 4",
"main": "gulpfile.js",
"dependencies": {},
"devDependencies": {
"@tailwindcss/container-queries": "^0.1.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/line-clamp": "^0.4.2",
"@tailwindcss/typography": "^0.5.8",
"@tailwindcss/typography": "^0.5.9",
"autoprefixer": "^10.4.13",
"browser-sync": "^2.27.10",
"gulp": "^4.0.2",
Expand All @@ -20,9 +21,11 @@
"gulp-sass": "^5.1.0",
"gulp-terser": "^2.1.0",
"log-symbols": "^4.1.0",
"postcss": "^8.4.14",
"sass": "^1.50.0",
"tailwindcss": "^3.1.6"
"postcss": "^8.4.21",
"prettier": "^2.8.4",
"prettier-plugin-tailwindcss": "^0.2.3",
"sass": "^1.58.1",
"tailwindcss": "^3.2.6"
},
"scripts": {
"dev": "gulp",
Expand Down
49 changes: 29 additions & 20 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,12 @@ Gulp with TailwindCSS v3 Starter Kit ( ~~Updated with [TailwindCSS JIT](https://

## Included Tailwind Plugins

- @tailwindcss/forms
- @tailwindcss/line-clamp
- @tailwindcss/typography
You can disable the plugins from `config.js` using `plugins` option

- [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms)
- [@tailwindcss/line-clamp](https://github.com/tailwindlabs/tailwindcss-line-clamp)
- [@tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin)
- [@tailwindcss/container-queries](https://github.com/tailwindlabs/tailwindcss-container-queries)

## Usage

Expand Down Expand Up @@ -35,29 +38,35 @@ To change the path of files and destination/build folder, edit options in **conf
```sh
{
config: {
...
port: 9050 // browser preview port
...
port: 9050 // browser preview port
},
plugins: {
typograpy: true,
forms: true,
lineClamp: true,
containerQueries: true,
},
paths: {
root: "./",
src: {
root: "./",
src: {
base: "./src",
css: "./src/css",
js: "./src/js",
img: "./src/img"
},
dist: {
base: "./dist",
css: "./dist/css",
js: "./dist/js",
img: "./dist/img"
},
build: {
base: "./build",
css: "./build/css",
js: "./build/js",
img: "./build/img"
}
},
dist: {
base: "./dist",
css: "./dist/css",
js: "./dist/js",
img: "./dist/img"
},
build: {
base: "./build",
css: "./build/css",
js: "./build/js",
img: "./build/img"
}
}
...
}
Expand Down
75 changes: 41 additions & 34 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,16 @@
</head>
<body class="bg-gray-200">
<header
class="p-20 bg-gradient-to-r from-red-400 via-red-500 to-pink-500 text-center"
class="bg-gradient-to-r from-red-400 via-red-500 to-pink-500 p-20 text-center"
>
<h1 class="hero-heading">Gulp with TailwindCSS v3 Kit</h1>
<p class="w-full text-center text-white text-xl leading-5 mb-10">
Updated with Tailwind v3.0, PostCSS v8.0+
<p class="mb-10 w-full text-center text-xl leading-5 text-white">
Updated with Tailwind v3.2+, PostCSS v8.0+
</p>
<p class="w-full text-center text-white text-base leading-5 mb-10">
Tailwind Plugins included:<br />
@tailwindcss/typography, @tailwindcss/forms, @tailwindcss/line-clamp
<p class="mb-10 w-full text-center text-base leading-5 text-white">
Tailwind Plugins included: (can be disabled in config.js)<br />
@tailwindcss/typography, @tailwindcss/forms, @tailwindcss/line-clamp,
@tailwindcss/container-queries
</p>
<div class="py-15 flex justify-center space-x-6">
<a
Expand Down Expand Up @@ -52,17 +53,17 @@ <h1 class="hero-heading">Gulp with TailwindCSS v3 Kit</h1>
>
</div>
</header>
<div class="mx-auto py-20 max-w-2xl">
<div class="mx-auto max-w-2xl py-20">
<img
class="shadow transition-shadow duration-500 rounded hover:shadow-lg mb-10"
class="mb-10 rounded shadow transition-shadow duration-500 hover:shadow-lg"
src="img/cover.jpg"
alt="Gulp with TailwindCSS"
/>
<div class="instructions">
<div class="mb-20 text-gray-700">
<h4 class="sub-title">Usage</h4>
<p>Use the following commands to get started.</p>
<code class="code transform translate-x-[20px]">
<code class="code translate-x-[20px] transform">
<em>// To Install Dev Depedencies</em><br />
npm install<br /><br />

Expand All @@ -84,31 +85,37 @@ <h4 class="sub-title">Options</h4>
<!-- Ignore the messay code :P only for demo -->
<!-- prettier-ignore -->
<code class="code pre transform translate-x-[-20px]">
config: {
... port: 9050 <em>//Update port here</em>
},
paths: {
root: "./",
src: {
base: "./src",
css: "./src/css",
js: "./src/js",
img: "./src/img"
},
dist: {
base: "./dist",
css: "./dist/css",
js: "./dist/js",
img: "./dist/img"
},
build: {
base: "./build",
css: "./build/css",
js: "./build/js",
img: "./build/img"
}
}
</code>
config: {
... port: 9050 <em>//Update port here</em>
},
plugins: {
typograpy: true, <em>// set `false` to disable particular plugin</em>
forms: true,
lineClamp: true,
containerQueries: true,
},
paths: {
root: "./",
src: {
base: "./src",
css: "./src/css",
js: "./src/js",
img: "./src/img"
},
dist: {
base: "./dist",
css: "./dist/css",
js: "./dist/js",
img: "./dist/img"
},
build: {
base: "./build",
css: "./build/css",
js: "./build/js",
img: "./build/img"
}
}
</code>
</div>
</div>

Expand Down
23 changes: 18 additions & 5 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,25 @@
const options = require("./config"); //options from config.js

const allPlugins = {
typography: require("@tailwindcss/typography"),
forms: require("@tailwindcss/forms"),
lineClamp: require("@tailwindcss/line-clamp"),
containerQueries: require("@tailwindcss/container-queries"),
};

const plugins = Object.keys(allPlugins)
.filter((k) => options.plugins[k])
.map((k) => {
if (k in options.plugins && options.plugins[k]) {
return allPlugins[k];
}
});

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js,php}"],
theme: {
extend: {},
},
plugins: [
require("@tailwindcss/typography"),
require("@tailwindcss/forms"),
require("@tailwindcss/line-clamp"),
],
plugins: plugins,
};
56 changes: 40 additions & 16 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,11 @@
resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==

"@tailwindcss/container-queries@^0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@tailwindcss/container-queries/-/container-queries-0.1.0.tgz#f3f0409893774f046ab2da1efd8a13105d21ec01"
integrity sha512-t1GeJ9P8ual160BvKy6Y1sG7bjChArMaK6iRXm3ZYjZGN2FTzmqb5ztsTDb9AsTSJD4NMHtsnaI2ielrXEk+hw==

"@tailwindcss/forms@^0.5.3":
version "0.5.3"
resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.3.tgz#e4d7989686cbcaf416c53f1523df5225332a86e7"
Expand All @@ -85,10 +90,10 @@
resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz#f353c5a8ab2c939c6267ac5b907f012e5ee130f9"
integrity sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==

"@tailwindcss/typography@^0.5.8":
version "0.5.8"
resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.8.tgz#8fb31db5ab0590be6dfa062b1535ac86ad9d12bf"
integrity sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==
"@tailwindcss/typography@^0.5.9":
version "0.5.9"
resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.9.tgz#027e4b0674929daaf7c921c900beee80dbad93e8"
integrity sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==
dependencies:
lodash.castarray "^4.4.0"
lodash.isplainobject "^4.0.6"
Expand Down Expand Up @@ -4130,7 +4135,7 @@ postcss-selector-parser@6.0.10:
cssesc "^3.0.0"
util-deprecate "^1.0.2"

postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.6:
postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.6:
version "6.0.11"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
Expand All @@ -4143,7 +4148,16 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==

postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.18:
postcss@^8.0.9, postcss@^8.4.21:
version "8.4.21"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
dependencies:
nanoid "^3.3.4"
picocolors "^1.0.0"
source-map-js "^1.0.2"

postcss@^8.3.5:
version "8.4.19"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc"
integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==
Expand All @@ -4162,6 +4176,16 @@ prepend-http@^2.0.0:
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
integrity sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==

prettier-plugin-tailwindcss@^0.2.3:
version "0.2.3"
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.3.tgz#b68a1de10056fc84055426af132c2697bea0955c"
integrity sha512-s2N5Dh7Ao5KTV1mao5ZBnn8EKtUcDPJEkGViZIjI0Ij9TTI5zgTz4IHOxW33jOdjHKa8CSjM88scelUiC5TNRQ==

prettier@^2.8.4:
version "2.8.4"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.4.tgz#34dd2595629bfbb79d344ac4a91ff948694463c3"
integrity sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==

pretty-bytes@^5.3.0:
version "5.6.0"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
Expand Down Expand Up @@ -4544,10 +4568,10 @@ safe-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==

sass@^1.50.0:
version "1.56.1"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.56.1.tgz#94d3910cd468fd075fa87f5bb17437a0b617d8a7"
integrity sha512-VpEyKpyBPCxE7qGDtOcdJ6fFbcpOM+Emu7uZLxVrkX8KVU/Dp5UF7WLvzqRuUhB6mqqQt1xffLoG+AndxTZrCQ==
sass@^1.58.1:
version "1.58.1"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.58.1.tgz#17ab0390076a50578ed0733f1cc45429e03405f6"
integrity sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"
Expand Down Expand Up @@ -5110,10 +5134,10 @@ symbol-observable@1.0.1:
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
integrity sha512-Kb3PrPYz4HanVF1LVGuAdW6LoVgIwjUYJGzFe7NDrBLCN4lsV/5J0MFurV+ygS4bRVwrCEt2c7MQ1R2a72oJDw==

tailwindcss@^3.1.6:
version "3.2.4"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250"
integrity sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==
tailwindcss@^3.2.6:
version "3.2.6"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.6.tgz#9bedbc744a4a85d6120ce0cc3db024c551a5c733"
integrity sha512-BfgQWZrtqowOQMC2bwaSNe7xcIjdDEgixWGYOd6AL0CbKHJlvhfdbINeAW76l1sO+1ov/MJ93ODJ9yluRituIw==
dependencies:
arg "^5.0.2"
chokidar "^3.5.3"
Expand All @@ -5129,12 +5153,12 @@ tailwindcss@^3.1.6:
normalize-path "^3.0.0"
object-hash "^3.0.0"
picocolors "^1.0.0"
postcss "^8.4.18"
postcss "^8.0.9"
postcss-import "^14.1.0"
postcss-js "^4.0.0"
postcss-load-config "^3.1.4"
postcss-nested "6.0.0"
postcss-selector-parser "^6.0.10"
postcss-selector-parser "^6.0.11"
postcss-value-parser "^4.2.0"
quick-lru "^5.1.1"
resolve "^1.22.1"
Expand Down

0 comments on commit 5a5d222

Please sign in to comment.