diff --git a/README.md b/README.md index 0ac0960..c24ee1d 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,9 @@ 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. +You can play around with `src/template/index.html` to see the effects of your changes. + +You can also add more pages in `src/template/`. In order for webpack to pick up new pages, you have to restart the webpack development server. To build a production bundle run: diff --git a/package.json b/package.json index 013202b..904657f 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "postcss": "^6.0.19", "postcss-loader": "^2.1.1", "style-loader": "^0.20.3", - "tailwindcss": ">=0.6.5", + "tailwindcss": ">=0.7.0", "webpack": "^4.1.1", "webpack-cli": "^2.0.12", "webpack-dev-server": "^3.1.1" diff --git a/src/index.html b/src/pages/index.html similarity index 100% rename from src/index.html rename to src/pages/index.html diff --git a/src/pages/otherpage.html b/src/pages/otherpage.html new file mode 100644 index 0000000..9b1a6cc --- /dev/null +++ b/src/pages/otherpage.html @@ -0,0 +1,13 @@ + + + + Tailwind Starter Template + + + + +
+

Greetings from Other Page

+
+ + diff --git a/tailwind.js b/tailwind.js index cb35d76..ec83de3 100644 --- a/tailwind.js +++ b/tailwind.js @@ -24,7 +24,7 @@ View the full documentation at https://tailwindcss.com. | */ -// let defaultConfig = require('tailwindcss/defaultConfig')() +let defaultConfig = require('tailwindcss/defaultConfig')() /* @@ -226,7 +226,7 @@ module.exports = { 'Liberation Mono', 'Courier New', 'monospace', - ] + ], }, @@ -474,6 +474,7 @@ module.exports = { '2': '0.5rem', '3': '0.75rem', '4': '1rem', + '5': '1.25rem', '6': '1.5rem', '8': '2rem', '10': '2.5rem', @@ -495,7 +496,7 @@ module.exports = { '1/6': '16.66667%', '5/6': '83.33333%', 'full': '100%', - 'screen': '100vw' + 'screen': '100vw', }, @@ -521,6 +522,7 @@ module.exports = { '2': '0.5rem', '3': '0.75rem', '4': '1rem', + '5': '1.25rem', '6': '1.5rem', '8': '2rem', '10': '2.5rem', @@ -531,7 +533,7 @@ module.exports = { '48': '12rem', '64': '16rem', 'full': '100%', - 'screen': '100vh' + 'screen': '100vh', }, @@ -572,7 +574,7 @@ module.exports = { minHeight: { '0': '0', 'full': '100%', - 'screen': '100vh' + 'screen': '100vh', }, @@ -647,8 +649,15 @@ module.exports = { '2': '0.5rem', '3': '0.75rem', '4': '1rem', + '5': '1.25rem', '6': '1.5rem', '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '20': '5rem', + '24': '6rem', + '32': '8rem', }, @@ -675,8 +684,15 @@ module.exports = { '2': '0.5rem', '3': '0.75rem', '4': '1rem', + '5': '1.25rem', '6': '1.5rem', '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '20': '5rem', + '24': '6rem', + '32': '8rem', }, @@ -702,8 +718,15 @@ module.exports = { '2': '0.5rem', '3': '0.75rem', '4': '1rem', + '5': '1.25rem', '6': '1.5rem', '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '20': '5rem', + '24': '6rem', + '32': '8rem', }, @@ -728,6 +751,7 @@ module.exports = { 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', + 'outline': '0 0 0 3px rgba(52,144,220,0.5)', 'none': 'none', }, @@ -828,6 +852,7 @@ module.exports = { | - responsive | - hover | - focus + | - focus-within | - active | - group-hover | @@ -838,11 +863,12 @@ module.exports = { modules: { appearance: ['responsive'], backgroundAttachment: ['responsive'], - backgroundColors: ['responsive', 'hover'], + backgroundColors: ['responsive', 'hover', 'focus'], backgroundPosition: ['responsive'], backgroundRepeat: ['responsive'], backgroundSize: ['responsive'], - borderColors: ['responsive', 'hover'], + borderCollapse: [], + borderColors: ['responsive', 'hover', 'focus'], borderRadius: ['responsive'], borderStyle: ['responsive'], borderWidths: ['responsive'], @@ -851,7 +877,7 @@ module.exports = { flexbox: ['responsive'], float: ['responsive'], fonts: ['responsive'], - fontWeights: ['responsive', 'hover'], + fontWeights: ['responsive', 'hover', 'focus'], height: ['responsive'], leading: ['responsive'], lists: ['responsive'], @@ -861,19 +887,23 @@ module.exports = { minHeight: ['responsive'], minWidth: ['responsive'], negativeMargin: ['responsive'], + objectFit: false, + objectPosition: false, opacity: ['responsive'], + outline: ['focus'], overflow: ['responsive'], padding: ['responsive'], pointerEvents: ['responsive'], position: ['responsive'], resize: ['responsive'], - shadows: ['responsive'], + shadows: ['responsive', 'hover', 'focus'], svgFill: [], svgStroke: [], + tableLayout: ['responsive'], textAlign: ['responsive'], - textColors: ['responsive', 'hover'], + textColors: ['responsive', 'hover', 'focus'], textSizes: ['responsive'], - textStyle: ['responsive', 'hover'], + textStyle: ['responsive', 'hover', 'focus'], tracking: ['responsive'], userSelect: ['responsive'], verticalAlign: ['responsive'], diff --git a/webpack.config.js b/webpack.config.js index 4954ccb..3f5c60e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,26 @@ const path = require('path') const ExtractTextPlugin = require('extract-text-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') +const fs = require('fs') + +// Our function that generates our html plugins +function generateHtmlPlugins (templateDir) { + // Read files in template directory + const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir)) + return templateFiles.map(item => { + // Split names and extension + const parts = item.split('.') + const name = parts[0] + const extension = parts[1] + // Create new HTMLWebpackPlugin with options + return new HtmlWebpackPlugin({ + filename: `${name}.html`, + template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`) + }) + }) +} + +const htmlPlugins = generateHtmlPlugins('./src/pages') module.exports = { entry: './src/styles.css', @@ -22,10 +42,6 @@ module.exports = { plugins: [ new ExtractTextPlugin('styles.css', { disable: process.env.NODE_ENV === 'development', - }), - new HtmlWebpackPlugin({ - filename: 'index.html', - template: 'src/index.html', - }), - ], + }) + ].concat(htmlPlugins) } diff --git a/yarn.lock b/yarn.lock index 9b627fa..71a7331 100644 --- a/yarn.lock +++ b/yarn.lock @@ -378,6 +378,18 @@ autoprefixer@^6.3.1: postcss "^5.2.16" postcss-value-parser "^3.2.3" +autoprefixer@^9.3.1: + version "9.3.1" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.3.1.tgz#71b622174de2b783d5fd99f9ad617b7a3c78443e" + integrity sha512-DY9gOh8z3tnCbJ13JIWaeQsoYncTGdsrgCceBaQSIL4nvdrLxgbRSBPevg2XbX7u4QCSfLheSJEEIUUSlkbx6Q== + dependencies: + browserslist "^4.3.3" + caniuse-lite "^1.0.30000898" + normalize-range "^0.1.2" + num2fraction "^1.2.2" + postcss "^7.0.5" + postcss-value-parser "^3.3.1" + babel-code-frame@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" @@ -410,6 +422,13 @@ babel-core@^6.26.0: slash "^1.0.0" source-map "^0.5.7" +babel-extract-comments@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21" + integrity sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ== + dependencies: + babylon "^6.18.0" + babel-generator@^6.26.0: version "6.26.1" resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90" @@ -830,9 +849,10 @@ babel-plugin-transform-flow-strip-types@^6.8.0: babel-plugin-syntax-flow "^6.18.0" babel-runtime "^6.22.0" -babel-plugin-transform-object-rest-spread@^6.22.0: +babel-plugin-transform-object-rest-spread@^6.22.0, babel-plugin-transform-object-rest-spread@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06" + integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY= dependencies: babel-plugin-syntax-object-rest-spread "^6.8.0" babel-runtime "^6.26.0" @@ -1138,6 +1158,15 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6: caniuse-db "^1.0.30000639" electron-to-chromium "^1.2.7" +browserslist@^4.3.3: + version "4.3.4" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.3.4.tgz#4477b737db6a1b07077275b24791e680d4300425" + integrity sha512-u5iz+ijIMUlmV8blX82VGFrB9ecnUg5qEt55CMZ/YJEhha+d8qpBfOFuutJ6F/VKRXjZoD33b6uvarpPxcl3RA== + dependencies: + caniuse-lite "^1.0.30000899" + electron-to-chromium "^1.3.82" + node-releases "^1.0.1" + buffer-alloc-unsafe@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0" @@ -1181,9 +1210,10 @@ builtin-status-codes@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8" -bytes@3.0.0: +bytes@3.0.0, bytes@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048" + integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg= cacache@^10.0.4: version "10.0.4" @@ -1261,6 +1291,11 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: version "1.0.30000884" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000884.tgz#d02b25dc885ffdf80434cf68b0941ea3161a4c8b" +caniuse-lite@^1.0.30000898, caniuse-lite@^1.0.30000899: + version "1.0.30000909" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000909.tgz#697e8f447ca5f758e7c6cef39ec429ce18b908d3" + integrity sha512-4Ix9ArKpo3s/dLGVn/el9SAk6Vn2kGhg8XeE4eRTsGEsmm9RnTkwnBsVZs7p4wA8gB+nsgP36vZWYbG8a4nYrg== + chalk@^1.0.0, chalk@^1.1.3: version "1.1.3" resolved "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" @@ -1484,7 +1519,7 @@ colors@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63" -commander@2.17.x, commander@^2.11.0, commander@~2.17.1: +commander@2.17.x, commander@~2.17.1: version "2.17.1" resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf" @@ -2039,6 +2074,11 @@ electron-to-chromium@^1.2.7: version "1.3.62" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.62.tgz#2e8e2dc070c800ec8ce23ff9dfcceb585d6f9ed8" +electron-to-chromium@^1.3.82: + version "1.3.84" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.84.tgz#2e55df59e818f150a9f61b53471ebf4f0feecc65" + integrity sha512-IYhbzJYOopiTaNWMBp7RjbecUBsbnbDneOP86f3qvS0G0xfzwNSvMJpTrvi5/Y1gU7tg2NAgeg8a8rCYvW9Whw== + elegant-spinner@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e" @@ -3631,6 +3671,11 @@ lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" +lodash.toarray@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561" + integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE= + lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" @@ -4015,6 +4060,13 @@ node-dir@0.1.8: version "0.1.8" resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.8.tgz#55fb8deb699070707fb67f91a460f0448294c77d" +node-emoji@^1.8.1: + version "1.8.1" + resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.8.1.tgz#6eec6bfb07421e2148c75c6bba72421f8530a826" + integrity sha512-+ktMAh1Jwas+TnGodfCfjUbJKoANqPaJFN0z0iqh41eqD8dvguNzcitVSBSVK1pidz0AqGbLKcoVuVLRVZ/aVg== + dependencies: + lodash.toarray "^4.4.0" + node-forge@0.7.5: version "0.7.5" resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df" @@ -4062,6 +4114,13 @@ node-pre-gyp@^0.10.0: semver "^5.3.0" tar "^4" +node-releases@^1.0.1: + version "1.0.4" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.0.4.tgz#2d585de8c6c81d00017e063e7810a63889aa6756" + integrity sha512-GqRV9GcHw8JCRDaP/JoeNMNzEGzHAknMvIHqMb2VeTOmg1Cf9+ej8bkV12tHfzWHQMCkQ5zUFgwFUkfraynNCw== + dependencies: + semver "^5.3.0" + nomnom@^1.8.1: version "1.8.1" resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.8.1.tgz#2151f722472ba79e50a76fc125bb8c8f2e4dc2a7" @@ -4769,6 +4828,11 @@ postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^ version "3.3.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15" +postcss-value-parser@^3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" + integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== + postcss-zindex@^2.0.1: version "2.2.0" resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22" @@ -4794,6 +4858,15 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.14, postcss@^6.0.1 source-map "^0.6.1" supports-color "^5.4.0" +postcss@^7.0.5: + version "7.0.6" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.6.tgz#6dcaa1e999cdd4a255dcd7d4d9547f4ca010cdc2" + integrity sha512-Nq/rNjnHFcKgCDDZYO0lNsl6YWe6U7tTy+ESN+PnLxebL8uBtYX59HZqvrj7YLK5UCyll2hqDsJOo3ndzEW8Ug== + dependencies: + chalk "^2.4.1" + source-map "^0.6.1" + supports-color "^5.5.0" + prepend-http@^1.0.0, prepend-http@^1.0.1: version "1.0.4" resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" @@ -4821,6 +4894,11 @@ pretty-error@^2.0.2: renderkid "^2.0.1" utila "~0.4" +pretty-hrtime@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" + integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE= + private@^0.1.6, private@^0.1.8, private@~0.1.5: version "0.1.8" resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff" @@ -5707,6 +5785,14 @@ strip-bom@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3" +strip-comments@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d" + integrity sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw== + dependencies: + babel-extract-comments "^1.0.0" + babel-plugin-transform-object-rest-spread "^6.26.0" + strip-eof@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf" @@ -5732,7 +5818,7 @@ supports-color@^3.2.3: dependencies: has-flag "^1.0.0" -supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0: +supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" dependencies: @@ -5758,20 +5844,26 @@ symbol-observable@^1.1.0: version "1.2.0" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" -tailwindcss@>=0.6.5: - version "0.6.5" - resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-0.6.5.tgz#f692f875c373721d65ccecba5eb16fa949bcbb97" +tailwindcss@>=0.7.0: + version "0.7.2" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-0.7.2.tgz#a81e0c532911ec665a749c03d821a17b49e30165" + integrity sha512-mpDe9BBgdnvHatmdQ2GF/QVNQ/0nMX7lfmL3hV6D7r1NLVqYZIwFB4Z0vuIO2TIdVobdwwtLKPYOZ+MECv6vhw== dependencies: - commander "^2.11.0" + autoprefixer "^9.3.1" + bytes "^3.0.0" + chalk "^2.4.1" css.escape "^1.5.1" fs-extra "^4.0.2" lodash "^4.17.5" + node-emoji "^1.8.1" perfectionist "^2.4.0" postcss "^6.0.9" postcss-functions "^3.0.0" postcss-js "^1.0.1" postcss-nested "^3.0.0" postcss-selector-parser "^3.1.1" + pretty-hrtime "^1.0.3" + strip-comments "^1.0.2" tapable@^1.0.0: version "1.0.0"