├── .gitignore ├── .vuepress ├── config.js ├── dist │ ├── 404.html │ ├── assets │ │ ├── css │ │ │ └── 0.styles.9a967e35.css │ │ └── js │ │ │ ├── 1.b5b38384.js │ │ │ ├── 10.295ea4f2.js │ │ │ ├── 11.8932730f.js │ │ │ ├── 12.f3ba6552.js │ │ │ ├── 3.482e7eb8.js │ │ │ ├── 4.184793ac.js │ │ │ ├── 5.e5e22029.js │ │ │ ├── 6.38162823.js │ │ │ ├── 7.bb49ecb4.js │ │ │ ├── 8.c27c04b1.js │ │ │ ├── 9.4d4c8776.js │ │ │ └── app.adda6272.js │ ├── blog │ │ ├── index.html │ │ ├── post-1.html │ │ ├── post-2.html │ │ └── post-3.html │ └── index.html └── theme │ ├── components │ ├── Footer.vue │ └── Nav.vue │ ├── layouts │ ├── Layout.vue │ ├── PostLayout.vue │ └── PostsLayout.vue │ └── styles │ └── theme.styl ├── README.md ├── blog ├── README.md ├── post-1.md ├── post-2.md └── post-3.md ├── package-lock.json ├── package.json └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: "Vuepress Blog Example", 3 | description: "just another blog", 4 | themeConfig: { 5 | nav: [{ text: "Blog", link: "/blog/" }, { text: "About", link: "/" }] 6 | }, 7 | plugins: ["vuepress-plugin-reading-time"], 8 | postcss: { 9 | plugins: [ 10 | require("tailwindcss")("./tailwind.config.js"), 11 | require("autoprefixer") 12 | ] 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /.vuepress/dist/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vuepress Blog Example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

404

How did we get here?
Take me home.
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/10.295ea4f2.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[10],{387:function(e,a,t){"use strict";t.r(a);var o=t(46),n=Object(o.a)({},function(){var e=this,a=e.$createElement,t=e._self._c||a;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("p",[e._v("The Latin scholar H. Rackham translated the above in 1914: De Finibus Bonorum Et Malorum But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.")]),e._v(" "),t("p",[e._v("No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.")]),e._v(" "),t("p",[e._v("Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?")]),e._v(" "),t("p",[e._v("On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.")])])},[],!1,null,null,null);a.default=n.exports}}]); -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/11.8932730f.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[11],{389:function(e,t,o){"use strict";o.r(t);var s=o(46),r=Object(s.a)({},function(){var e=this.$createElement,t=this._self._c||e;return t("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[t("p",[this._v("Adobe Fireworks Lorem Ipsum plugin In 1985 Aldus Corporation launched its first desktop publishing program Aldus PageMaker for Apple Macintosh computers, released in 1987 for PCs running Windows 1.0. Both contained the variant lorem ipsum most common today.")]),this._v(" "),t("p",[this._v("Laura Perry, then art director with Aldus, modified prior versions of Lorem Ipsum text from typographical specimens; in the 1960s and 1970s it appeared often in lettering catalogs by Letraset. Anecdotal evidence has it that Letraset used Lorem ipsum already from 1970 onwards, eg. for grids (page layouts) for ad agencies. Many early desktop publishing programs, eg. Adobe PageMaker, used it to create template.")]),this._v(" "),t("p",[this._v("Most text editors like MS Word or Lotus Notes generate random lorem text when needed, either as pre-installed module or plug-in to be added. Word selection or sequence don't necessarily match the original, which is intended to add variety. Presentation software like Keynote or Pages use it as a samples for screenplay layout. Content management software as Joomla, Drupal, Mambo, PHP-Nuke, WordPress, or Movable Type offer Lorem Ipsum plug-ins with the same functionality.")])])},[],!1,null,null,null);t.default=r.exports}}]); -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/12.f3ba6552.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[12],{242:function(n,w,o){}}]); -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/3.482e7eb8.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{244:function(s,t,e){"use strict";var r=e(46),n=Object(r.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var s=this.$createElement,t=this._self._c||s;return t("footer",{staticClass:"font-sans bg-black text-white py-8 px-4"},[t("div",{staticClass:"text-grey-darker text-center"},[this._v("©2019 Yours truely. All rights reserved.")])])}],!1,null,null,null);t.a=n.exports},245:function(s,t,e){"use strict";var r=e(46),n=Object(r.a)({},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("header",[e("nav",{staticClass:"font-sans bg-white text-center flex justify-between my-4 mx-auto container overflow-hidden"},[e("a",{staticClass:"block text-left no-underline font-bold text-black uppercase",attrs:{href:"/"}},[s._v(s._s(s.$site.title))]),s._v(" "),e("ul",{staticClass:"text-sm text-grey-dark list-reset flex items-center"},s._l(s.$site.themeConfig.nav,function(t){return e("li",[e("a",{staticClass:"inline-block py-2 px-3 text-grey-darkest hover:text-grey-dark no-underline",attrs:{href:t.link}},[s._v(s._s(t.text))])])}),0)])])},[],!1,null,null,null);t.a=n.exports},375:function(s,t,e){},376:function(s,t,e){var r={"./af":246,"./af.js":246,"./ar":247,"./ar-dz":248,"./ar-dz.js":248,"./ar-kw":249,"./ar-kw.js":249,"./ar-ly":250,"./ar-ly.js":250,"./ar-ma":251,"./ar-ma.js":251,"./ar-sa":252,"./ar-sa.js":252,"./ar-tn":253,"./ar-tn.js":253,"./ar.js":247,"./az":254,"./az.js":254,"./be":255,"./be.js":255,"./bg":256,"./bg.js":256,"./bm":257,"./bm.js":257,"./bn":258,"./bn.js":258,"./bo":259,"./bo.js":259,"./br":260,"./br.js":260,"./bs":261,"./bs.js":261,"./ca":262,"./ca.js":262,"./cs":263,"./cs.js":263,"./cv":264,"./cv.js":264,"./cy":265,"./cy.js":265,"./da":266,"./da.js":266,"./de":267,"./de-at":268,"./de-at.js":268,"./de-ch":269,"./de-ch.js":269,"./de.js":267,"./dv":270,"./dv.js":270,"./el":271,"./el.js":271,"./en-SG":272,"./en-SG.js":272,"./en-au":273,"./en-au.js":273,"./en-ca":274,"./en-ca.js":274,"./en-gb":275,"./en-gb.js":275,"./en-ie":276,"./en-ie.js":276,"./en-il":277,"./en-il.js":277,"./en-nz":278,"./en-nz.js":278,"./eo":279,"./eo.js":279,"./es":280,"./es-do":281,"./es-do.js":281,"./es-us":282,"./es-us.js":282,"./es.js":280,"./et":283,"./et.js":283,"./eu":284,"./eu.js":284,"./fa":285,"./fa.js":285,"./fi":286,"./fi.js":286,"./fo":287,"./fo.js":287,"./fr":288,"./fr-ca":289,"./fr-ca.js":289,"./fr-ch":290,"./fr-ch.js":290,"./fr.js":288,"./fy":291,"./fy.js":291,"./ga":292,"./ga.js":292,"./gd":293,"./gd.js":293,"./gl":294,"./gl.js":294,"./gom-latn":295,"./gom-latn.js":295,"./gu":296,"./gu.js":296,"./he":297,"./he.js":297,"./hi":298,"./hi.js":298,"./hr":299,"./hr.js":299,"./hu":300,"./hu.js":300,"./hy-am":301,"./hy-am.js":301,"./id":302,"./id.js":302,"./is":303,"./is.js":303,"./it":304,"./it-ch":305,"./it-ch.js":305,"./it.js":304,"./ja":306,"./ja.js":306,"./jv":307,"./jv.js":307,"./ka":308,"./ka.js":308,"./kk":309,"./kk.js":309,"./km":310,"./km.js":310,"./kn":311,"./kn.js":311,"./ko":312,"./ko.js":312,"./ku":313,"./ku.js":313,"./ky":314,"./ky.js":314,"./lb":315,"./lb.js":315,"./lo":316,"./lo.js":316,"./lt":317,"./lt.js":317,"./lv":318,"./lv.js":318,"./me":319,"./me.js":319,"./mi":320,"./mi.js":320,"./mk":321,"./mk.js":321,"./ml":322,"./ml.js":322,"./mn":323,"./mn.js":323,"./mr":324,"./mr.js":324,"./ms":325,"./ms-my":326,"./ms-my.js":326,"./ms.js":325,"./mt":327,"./mt.js":327,"./my":328,"./my.js":328,"./nb":329,"./nb.js":329,"./ne":330,"./ne.js":330,"./nl":331,"./nl-be":332,"./nl-be.js":332,"./nl.js":331,"./nn":333,"./nn.js":333,"./pa-in":334,"./pa-in.js":334,"./pl":335,"./pl.js":335,"./pt":336,"./pt-br":337,"./pt-br.js":337,"./pt.js":336,"./ro":338,"./ro.js":338,"./ru":339,"./ru.js":339,"./sd":340,"./sd.js":340,"./se":341,"./se.js":341,"./si":342,"./si.js":342,"./sk":343,"./sk.js":343,"./sl":344,"./sl.js":344,"./sq":345,"./sq.js":345,"./sr":346,"./sr-cyrl":347,"./sr-cyrl.js":347,"./sr.js":346,"./ss":348,"./ss.js":348,"./sv":349,"./sv.js":349,"./sw":350,"./sw.js":350,"./ta":351,"./ta.js":351,"./te":352,"./te.js":352,"./tet":353,"./tet.js":353,"./tg":354,"./tg.js":354,"./th":355,"./th.js":355,"./tl-ph":356,"./tl-ph.js":356,"./tlh":357,"./tlh.js":357,"./tr":358,"./tr.js":358,"./tzl":359,"./tzl.js":359,"./tzm":360,"./tzm-latn":361,"./tzm-latn.js":361,"./tzm.js":360,"./ug-cn":362,"./ug-cn.js":362,"./uk":363,"./uk.js":363,"./ur":364,"./ur.js":364,"./uz":365,"./uz-latn":366,"./uz-latn.js":366,"./uz.js":365,"./vi":367,"./vi.js":367,"./x-pseudo":368,"./x-pseudo.js":368,"./yo":369,"./yo.js":369,"./zh-cn":370,"./zh-cn.js":370,"./zh-hk":371,"./zh-hk.js":371,"./zh-tw":372,"./zh-tw.js":372};function n(s){var t=a(s);return e(t)}function a(s){if(!e.o(r,s)){var t=new Error("Cannot find module '"+s+"'");throw t.code="MODULE_NOT_FOUND",t}return r[s]}n.keys=function(){return Object.keys(r)},n.resolve=a,s.exports=n,n.id=376},380:function(s,t,e){"use strict";var r=e(8),n=e(27),a=e(28),l=e(26),o=[].sort,i=[1,2,3];r(r.P+r.F*(l(function(){i.sort(void 0)})||!l(function(){i.sort(null)})||!e(47)(o)),"Array",{sort:function(s){return void 0===s?o.call(a(this)):o.call(a(this),n(s))}})},381:function(s,t,e){"use strict";var r=e(375);e.n(r).a},384:function(s,t,e){"use strict";e.r(t);e(132),e(62),e(380);var r=e(243),n=e.n(r),a=e(245),l=e(244),o={components:{Nav:a.a,Footer:l.a},name:"Layout",methods:{formateDate:function(s){return n()(s).format("MMM Do YYYY")}},computed:{posts:function(){return this.$site.pages.filter(function(s){return s.path.startsWith("/blog/")&&!s.frontmatter.blog_index}).sort(function(s,t){return new Date(t.frontmatter.date)-new Date(s.frontmatter.date)})}}},i=(e(381),e(46)),j=Object(i.a)(o,function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("div",{staticClass:"flex flex-col h-full"},[e("Nav"),s._v(" "),e("ul",{staticClass:"flex-1 container mx-auto leading-normal"},s._l(s.posts,function(t){return e("router-link",{key:t.frontmatter.date,staticClass:"max-w-md w-full lg:flex mb-8 block mx-auto no-underline shadow-lg",attrs:{to:t.path}},[e("div",{staticClass:"h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden",staticStyle:{"background-image":"url('https://source.unsplash.com/user/iamrbn/daily')"},attrs:{title:"Random Photo"}}),s._v(" "),e("div",{staticClass:"border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal"},[e("div",{staticClass:"mb-8"},[e("div",{staticClass:"text-black font-bold text-xl mb-2"},[s._v(s._s(t.title))]),s._v(" "),e("p",{staticClass:"text-grey-darker text-base",domProps:{innerHTML:s._s(t.excerpt)}})]),s._v(" "),e("div",{staticClass:"flex items-center"},[e("div",{staticClass:"text-sm"},[e("p",{staticClass:"text-grey-dark"},[s._v(s._s(s.formateDate(t.frontmatter.date)))])])])])])}),1),s._v(" "),e("Footer",{staticClass:"pin-b"})],1)},[],!1,null,null,null);t.default=j.exports}}]); -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/4.184793ac.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{244:function(s,t,e){"use strict";var n=e(46),a=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var s=this.$createElement,t=this._self._c||s;return t("footer",{staticClass:"font-sans bg-black text-white py-8 px-4"},[t("div",{staticClass:"text-grey-darker text-center"},[this._v("©2019 Yours truely. All rights reserved.")])])}],!1,null,null,null);t.a=a.exports},245:function(s,t,e){"use strict";var n=e(46),a=Object(n.a)({},function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("header",[e("nav",{staticClass:"font-sans bg-white text-center flex justify-between my-4 mx-auto container overflow-hidden"},[e("a",{staticClass:"block text-left no-underline font-bold text-black uppercase",attrs:{href:"/"}},[s._v(s._s(s.$site.title))]),s._v(" "),e("ul",{staticClass:"text-sm text-grey-dark list-reset flex items-center"},s._l(s.$site.themeConfig.nav,function(t){return e("li",[e("a",{staticClass:"inline-block py-2 px-3 text-grey-darkest hover:text-grey-dark no-underline",attrs:{href:t.link}},[s._v(s._s(t.text))])])}),0)])])},[],!1,null,null,null);t.a=a.exports},374:function(s,t,e){},376:function(s,t,e){var n={"./af":246,"./af.js":246,"./ar":247,"./ar-dz":248,"./ar-dz.js":248,"./ar-kw":249,"./ar-kw.js":249,"./ar-ly":250,"./ar-ly.js":250,"./ar-ma":251,"./ar-ma.js":251,"./ar-sa":252,"./ar-sa.js":252,"./ar-tn":253,"./ar-tn.js":253,"./ar.js":247,"./az":254,"./az.js":254,"./be":255,"./be.js":255,"./bg":256,"./bg.js":256,"./bm":257,"./bm.js":257,"./bn":258,"./bn.js":258,"./bo":259,"./bo.js":259,"./br":260,"./br.js":260,"./bs":261,"./bs.js":261,"./ca":262,"./ca.js":262,"./cs":263,"./cs.js":263,"./cv":264,"./cv.js":264,"./cy":265,"./cy.js":265,"./da":266,"./da.js":266,"./de":267,"./de-at":268,"./de-at.js":268,"./de-ch":269,"./de-ch.js":269,"./de.js":267,"./dv":270,"./dv.js":270,"./el":271,"./el.js":271,"./en-SG":272,"./en-SG.js":272,"./en-au":273,"./en-au.js":273,"./en-ca":274,"./en-ca.js":274,"./en-gb":275,"./en-gb.js":275,"./en-ie":276,"./en-ie.js":276,"./en-il":277,"./en-il.js":277,"./en-nz":278,"./en-nz.js":278,"./eo":279,"./eo.js":279,"./es":280,"./es-do":281,"./es-do.js":281,"./es-us":282,"./es-us.js":282,"./es.js":280,"./et":283,"./et.js":283,"./eu":284,"./eu.js":284,"./fa":285,"./fa.js":285,"./fi":286,"./fi.js":286,"./fo":287,"./fo.js":287,"./fr":288,"./fr-ca":289,"./fr-ca.js":289,"./fr-ch":290,"./fr-ch.js":290,"./fr.js":288,"./fy":291,"./fy.js":291,"./ga":292,"./ga.js":292,"./gd":293,"./gd.js":293,"./gl":294,"./gl.js":294,"./gom-latn":295,"./gom-latn.js":295,"./gu":296,"./gu.js":296,"./he":297,"./he.js":297,"./hi":298,"./hi.js":298,"./hr":299,"./hr.js":299,"./hu":300,"./hu.js":300,"./hy-am":301,"./hy-am.js":301,"./id":302,"./id.js":302,"./is":303,"./is.js":303,"./it":304,"./it-ch":305,"./it-ch.js":305,"./it.js":304,"./ja":306,"./ja.js":306,"./jv":307,"./jv.js":307,"./ka":308,"./ka.js":308,"./kk":309,"./kk.js":309,"./km":310,"./km.js":310,"./kn":311,"./kn.js":311,"./ko":312,"./ko.js":312,"./ku":313,"./ku.js":313,"./ky":314,"./ky.js":314,"./lb":315,"./lb.js":315,"./lo":316,"./lo.js":316,"./lt":317,"./lt.js":317,"./lv":318,"./lv.js":318,"./me":319,"./me.js":319,"./mi":320,"./mi.js":320,"./mk":321,"./mk.js":321,"./ml":322,"./ml.js":322,"./mn":323,"./mn.js":323,"./mr":324,"./mr.js":324,"./ms":325,"./ms-my":326,"./ms-my.js":326,"./ms.js":325,"./mt":327,"./mt.js":327,"./my":328,"./my.js":328,"./nb":329,"./nb.js":329,"./ne":330,"./ne.js":330,"./nl":331,"./nl-be":332,"./nl-be.js":332,"./nl.js":331,"./nn":333,"./nn.js":333,"./pa-in":334,"./pa-in.js":334,"./pl":335,"./pl.js":335,"./pt":336,"./pt-br":337,"./pt-br.js":337,"./pt.js":336,"./ro":338,"./ro.js":338,"./ru":339,"./ru.js":339,"./sd":340,"./sd.js":340,"./se":341,"./se.js":341,"./si":342,"./si.js":342,"./sk":343,"./sk.js":343,"./sl":344,"./sl.js":344,"./sq":345,"./sq.js":345,"./sr":346,"./sr-cyrl":347,"./sr-cyrl.js":347,"./sr.js":346,"./ss":348,"./ss.js":348,"./sv":349,"./sv.js":349,"./sw":350,"./sw.js":350,"./ta":351,"./ta.js":351,"./te":352,"./te.js":352,"./tet":353,"./tet.js":353,"./tg":354,"./tg.js":354,"./th":355,"./th.js":355,"./tl-ph":356,"./tl-ph.js":356,"./tlh":357,"./tlh.js":357,"./tr":358,"./tr.js":358,"./tzl":359,"./tzl.js":359,"./tzm":360,"./tzm-latn":361,"./tzm-latn.js":361,"./tzm.js":360,"./ug-cn":362,"./ug-cn.js":362,"./uk":363,"./uk.js":363,"./ur":364,"./ur.js":364,"./uz":365,"./uz-latn":366,"./uz-latn.js":366,"./uz.js":365,"./vi":367,"./vi.js":367,"./x-pseudo":368,"./x-pseudo.js":368,"./yo":369,"./yo.js":369,"./zh-cn":370,"./zh-cn.js":370,"./zh-hk":371,"./zh-hk.js":371,"./zh-tw":372,"./zh-tw.js":372};function a(s){var t=j(s);return e(t)}function j(s){if(!e.o(n,s)){var t=new Error("Cannot find module '"+s+"'");throw t.code="MODULE_NOT_FOUND",t}return n[s]}a.keys=function(){return Object.keys(n)},a.resolve=j,s.exports=a,a.id=376},379:function(s,t,e){"use strict";var n=e(374);e.n(n).a},385:function(s,t,e){"use strict";e.r(t);var n=e(243),a=e.n(n),j=e(245),r=e(244),l={components:{Nav:j.a,Footer:r.a},name:"Layout",methods:{formateDate:function(s){return a()(s).format("MMM Do YYYY")}}},i=(e(379),e(46)),o=Object(i.a)(l,function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("div",{staticClass:"flex flex-col h-full"},[e("Nav"),s._v(" "),e("article",{staticClass:"flex-1 mx-auto leading-normal container"},[e("h2",[s._v(s._s(s.$page.frontmatter.title))]),s._v(" "),e("label",{staticClass:"text-grey-dark"},[e("span",[s._v(s._s(s.$page.readingTime.text))]),s._v(" •\n "),e("span",[s._v(s._s(s.formateDate(s.$page.frontmatter.date)))])]),s._v(" "),e("Content")],1),s._v(" "),e("Footer",{staticClass:"pin-b"})],1)},[],!1,null,null,null);t.default=o.exports}}]); -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/5.e5e22029.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{244:function(t,e,n){"use strict";var s=n(46),a=Object(s.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this.$createElement,e=this._self._c||t;return e("footer",{staticClass:"font-sans bg-black text-white py-8 px-4"},[e("div",{staticClass:"text-grey-darker text-center"},[this._v("©2019 Yours truely. All rights reserved.")])])}],!1,null,null,null);e.a=a.exports},245:function(t,e,n){"use strict";var s=n(46),a=Object(s.a)({},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("header",[n("nav",{staticClass:"font-sans bg-white text-center flex justify-between my-4 mx-auto container overflow-hidden"},[n("a",{staticClass:"block text-left no-underline font-bold text-black uppercase",attrs:{href:"/"}},[t._v(t._s(t.$site.title))]),t._v(" "),n("ul",{staticClass:"text-sm text-grey-dark list-reset flex items-center"},t._l(t.$site.themeConfig.nav,function(e){return n("li",[n("a",{staticClass:"inline-block py-2 px-3 text-grey-darkest hover:text-grey-dark no-underline",attrs:{href:e.link}},[t._v(t._s(e.text))])])}),0)])])},[],!1,null,null,null);e.a=a.exports},373:function(t,e,n){},377:function(t,e,n){"use strict";var s=n(373);n.n(s).a},383:function(t,e,n){"use strict";n.r(e);var s=n(245),a=n(244),l={components:{Nav:s.a,Footer:a.a},name:"Layout"},r=(n(377),n(46)),i=Object(r.a)(l,function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"flex flex-col h-full"},[e("Nav"),this._v(" "),e("Content",{staticClass:"flex-1 container mx-auto leading-normal"}),this._v(" "),e("Footer",{staticClass:"pin-b"})],1)},[],!1,null,null,null);e.default=i.exports}}]); -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/6.38162823.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{382:function(t,e,s){"use strict";s.r(e);var o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],n={methods:{getMsg:function(){return o[Math.floor(Math.random()*o.length)]}}},i=s(46),h=Object(i.a)(n,function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])},[],!1,null,null,null);e.default=h.exports}}]); -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/7.bb49ecb4.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[7],{388:function(t,e,s){"use strict";s.r(e);var r=s(46),l=Object(r.a)({},function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("h1",{attrs:{id:"hello-vuepress"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#hello-vuepress","aria-hidden":"true"}},[this._v("#")]),this._v(" Hello VuePress")])])},[],!1,null,null,null);e.default=l.exports}}]); -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/8.c27c04b1.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{390:function(t,e,n){"use strict";n.r(e);var s=n(46),l=Object(s.a)({},function(){var t=this.$createElement;return(this._self._c||t)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})},[],!1,null,null,null);e.default=l.exports}}]); -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/9.4d4c8776.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[9],{386:function(e,i,t){"use strict";t.r(i);var a=t(46),o=Object(a.a)({},function(){var e=this,i=e.$createElement,t=e._self._c||i;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("p",[e._v('layout based on Lorem Ipsum Most of its text is made up from sections 1.10.32–3 of Cicero\'s De finibus bonorum et malorum (On the Boundaries of Goods and Evils; finibus may also be translated as purposes). Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit is the first known version ("Neither is there anyone who loves grief itself since it is grief and thus wants to obtain it"). It was found by Richard McClintock, a philologist, director of publications at Hampden-Sydney College in Virginia; he searched for citings of consectetur in classical Latin literature, a term of remarkably low frequency in that literary corpus.')]),e._v(" "),t("p",[e._v("Cicero famously orated against his political opponent Lucius Sergius Catilina. Occasionally the first Oration against Catiline is taken for type specimens: Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus nos eludet? (How long, O Catiline, will you abuse our patience? And for how long will that madness of yours mock us?)")]),e._v(" "),t("p",[e._v("Cicero's version of Liber Primus (first Book), sections 1.10.32–3 (fragments included in most Lorem Ipsum variants in red):")]),e._v(" "),t("p",[e._v("Cicero writing letters; from an early edition by Hieronymus Scotus Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?")])])},[],!1,null,null,null);i.default=o.exports}}]); -------------------------------------------------------------------------------- /.vuepress/dist/blog/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vuepress Blog Example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
©2019 Yours truely. All rights reserved.
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /.vuepress/dist/blog/post-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Test 1: common examples | Vuepress Blog Example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Test 1: common examples

layout based on Lorem Ipsum Most of its text is made up from sections 1.10.32–3 of Cicero's De finibus bonorum et malorum (On the Boundaries of Goods and Evils; finibus may also be translated as purposes). Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit is the first known version ("Neither is there anyone who loves grief itself since it is grief and thus wants to obtain it"). It was found by Richard McClintock, a philologist, director of publications at Hampden-Sydney College in Virginia; he searched for citings of consectetur in classical Latin literature, a term of remarkably low frequency in that literary corpus.

Cicero famously orated against his political opponent Lucius Sergius Catilina. Occasionally the first Oration against Catiline is taken for type specimens: Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus nos eludet? (How long, O Catiline, will you abuse our patience? And for how long will that madness of yours mock us?)

Cicero's version of Liber Primus (first Book), sections 1.10.32–3 (fragments included in most Lorem Ipsum variants in red):

Cicero writing letters; from an early edition by Hieronymus Scotus Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?

©2019 Yours truely. All rights reserved.
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /.vuepress/dist/blog/post-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Test 2: translation | Vuepress Blog Example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Test 2: translation

The Latin scholar H. Rackham translated the above in 1914: De Finibus Bonorum Et Malorum But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.

Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.

©2019 Yours truely. All rights reserved.
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /.vuepress/dist/blog/post-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Test 3: variants and technical information | Vuepress Blog Example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Test 3: variants and technical information

Adobe Fireworks Lorem Ipsum plugin In 1985 Aldus Corporation launched its first desktop publishing program Aldus PageMaker for Apple Macintosh computers, released in 1987 for PCs running Windows 1.0. Both contained the variant lorem ipsum most common today.

Laura Perry, then art director with Aldus, modified prior versions of Lorem Ipsum text from typographical specimens; in the 1960s and 1970s it appeared often in lettering catalogs by Letraset. Anecdotal evidence has it that Letraset used Lorem ipsum already from 1970 onwards, eg. for grids (page layouts) for ad agencies. Many early desktop publishing programs, eg. Adobe PageMaker, used it to create template.

Most text editors like MS Word or Lotus Notes generate random lorem text when needed, either as pre-installed module or plug-in to be added. Word selection or sequence don't necessarily match the original, which is intended to add variety. Presentation software like Keynote or Pages use it as a samples for screenplay layout. Content management software as Joomla, Drupal, Mambo, PHP-Nuke, WordPress, or Movable Type offer Lorem Ipsum plug-ins with the same functionality.

©2019 Yours truely. All rights reserved.
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /.vuepress/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello VuePress | Vuepress Blog Example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Hello VuePress

©2019 Yours truely. All rights reserved.
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /.vuepress/theme/components/Footer.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vuepress/theme/components/Nav.vue: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /.vuepress/theme/layouts/Layout.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /.vuepress/theme/layouts/PostLayout.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 31 | 32 | -------------------------------------------------------------------------------- /.vuepress/theme/layouts/PostsLayout.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 58 | 59 | -------------------------------------------------------------------------------- /.vuepress/theme/styles/theme.styl: -------------------------------------------------------------------------------- 1 | @tailwind preflight; 2 | @tailwind components; 3 | body, html, #app { 4 | height: 100%; 5 | } 6 | @tailwind utilities; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hello VuePress 2 | -------------------------------------------------------------------------------- /blog/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: PostsLayout 3 | blog_index: true 4 | --- 5 | -------------------------------------------------------------------------------- /blog/post-1.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Test 1: common examples" 3 | layout: PostLayout 4 | date: 2019-02-11 5 | --- 6 | 7 | layout based on Lorem Ipsum Most of its text is made up from sections 1.10.32–3 of Cicero's De finibus bonorum et malorum (On the Boundaries of Goods and Evils; finibus may also be translated as purposes). Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit is the first known version ("Neither is there anyone who loves grief itself since it is grief and thus wants to obtain it"). It was found by Richard McClintock, a philologist, director of publications at Hampden-Sydney College in Virginia; he searched for citings of consectetur in classical Latin literature, a term of remarkably low frequency in that literary corpus. 8 | 9 | 10 | 11 | Cicero famously orated against his political opponent Lucius Sergius Catilina. Occasionally the first Oration against Catiline is taken for type specimens: Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus nos eludet? (How long, O Catiline, will you abuse our patience? And for how long will that madness of yours mock us?) 12 | 13 | Cicero's version of Liber Primus (first Book), sections 1.10.32–3 (fragments included in most Lorem Ipsum variants in red): 14 | 15 | Cicero writing letters; from an early edition by Hieronymus Scotus Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? 16 | -------------------------------------------------------------------------------- /blog/post-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Test 2: translation" 3 | layout: PostLayout 4 | date: 2019-02-12 5 | --- 6 | 7 | The Latin scholar H. Rackham translated the above in 1914: De Finibus Bonorum Et Malorum But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. 8 | 9 | 10 | 11 | No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. 12 | 13 | Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? 14 | 15 | On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains. 16 | -------------------------------------------------------------------------------- /blog/post-3.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Test 3: variants and technical information" 3 | layout: PostLayout 4 | date: 2019-02-13 5 | --- 6 | 7 | Adobe Fireworks Lorem Ipsum plugin In 1985 Aldus Corporation launched its first desktop publishing program Aldus PageMaker for Apple Macintosh computers, released in 1987 for PCs running Windows 1.0. Both contained the variant lorem ipsum most common today. 8 | 9 | 10 | 11 | Laura Perry, then art director with Aldus, modified prior versions of Lorem Ipsum text from typographical specimens; in the 1960s and 1970s it appeared often in lettering catalogs by Letraset. Anecdotal evidence has it that Letraset used Lorem ipsum already from 1970 onwards, eg. for grids (page layouts) for ad agencies. Many early desktop publishing programs, eg. Adobe PageMaker, used it to create template. 12 | 13 | Most text editors like MS Word or Lotus Notes generate random lorem text when needed, either as pre-installed module or plug-in to be added. Word selection or sequence don't necessarily match the original, which is intended to add variety. Presentation software like Keynote or Pages use it as a samples for screenplay layout. Content management software as Joomla, Drupal, Mambo, PHP-Nuke, WordPress, or Movable Type offer Lorem Ipsum plug-ins with the same functionality. 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuepress-blog", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "vuepress build" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/amiechen/vuepress-blog.git" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/amiechen/vuepress-blog/issues" 17 | }, 18 | "homepage": "https://github.com/amiechen/vuepress-blog#readme", 19 | "dependencies": { 20 | "moment": "^2.24.0", 21 | "tailwindcss": "^0.7.4", 22 | "vuepress": "^1.0.0-alpha.37" 23 | }, 24 | "devDependencies": { 25 | "vuepress-plugin-reading-time": "^0.1.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Tailwind - The Utility-First CSS Framework 4 | 5 | A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), 6 | David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). 7 | 8 | Welcome to the Tailwind config file. This is where you can customize 9 | Tailwind specifically for your project. Don't be intimidated by the 10 | length of this file. It's really just a big JavaScript object and 11 | we've done our very best to explain each section. 12 | 13 | View the full documentation at https://tailwindcss.com. 14 | 15 | 16 | |------------------------------------------------------------------------------- 17 | | The default config 18 | |------------------------------------------------------------------------------- 19 | | 20 | | This variable contains the default Tailwind config. You don't have 21 | | to use it, but it can sometimes be helpful to have available. For 22 | | example, you may choose to merge your custom configuration 23 | | values with some of the Tailwind defaults. 24 | | 25 | */ 26 | 27 | let defaultConfig = require('tailwindcss/defaultConfig')() 28 | 29 | 30 | /* 31 | |------------------------------------------------------------------------------- 32 | | Colors https://tailwindcss.com/docs/colors 33 | |------------------------------------------------------------------------------- 34 | | 35 | | Here you can specify the colors used in your project. To get you started, 36 | | we've provided a generous palette of great looking colors that are perfect 37 | | for prototyping, but don't hesitate to change them for your project. You 38 | | own these colors, nothing will break if you change everything about them. 39 | | 40 | | We've used literal color names ("red", "blue", etc.) for the default 41 | | palette, but if you'd rather use functional names like "primary" and 42 | | "secondary", or even a numeric scale like "100" and "200", go for it. 43 | | 44 | */ 45 | 46 | let colors = { 47 | 'transparent': 'transparent', 48 | 49 | 'black': '#22292f', 50 | 'grey-darkest': '#3d4852', 51 | 'grey-darker': '#606f7b', 52 | 'grey-dark': '#8795a1', 53 | 'grey': '#b8c2cc', 54 | 'grey-light': '#dae1e7', 55 | 'grey-lighter': '#f1f5f8', 56 | 'grey-lightest': '#f8fafc', 57 | 'white': '#ffffff', 58 | 59 | 'red-darkest': '#3b0d0c', 60 | 'red-darker': '#621b18', 61 | 'red-dark': '#cc1f1a', 62 | 'red': '#e3342f', 63 | 'red-light': '#ef5753', 64 | 'red-lighter': '#f9acaa', 65 | 'red-lightest': '#fcebea', 66 | 67 | 'orange-darkest': '#462a16', 68 | 'orange-darker': '#613b1f', 69 | 'orange-dark': '#de751f', 70 | 'orange': '#f6993f', 71 | 'orange-light': '#faad63', 72 | 'orange-lighter': '#fcd9b6', 73 | 'orange-lightest': '#fff5eb', 74 | 75 | 'yellow-darkest': '#453411', 76 | 'yellow-darker': '#684f1d', 77 | 'yellow-dark': '#f2d024', 78 | 'yellow': '#ffed4a', 79 | 'yellow-light': '#fff382', 80 | 'yellow-lighter': '#fff9c2', 81 | 'yellow-lightest': '#fcfbeb', 82 | 83 | 'green-darkest': '#0f2f21', 84 | 'green-darker': '#1a4731', 85 | 'green-dark': '#1f9d55', 86 | 'green': '#38c172', 87 | 'green-light': '#51d88a', 88 | 'green-lighter': '#a2f5bf', 89 | 'green-lightest': '#e3fcec', 90 | 91 | 'teal-darkest': '#0d3331', 92 | 'teal-darker': '#20504f', 93 | 'teal-dark': '#38a89d', 94 | 'teal': '#4dc0b5', 95 | 'teal-light': '#64d5ca', 96 | 'teal-lighter': '#a0f0ed', 97 | 'teal-lightest': '#e8fffe', 98 | 99 | 'blue-darkest': '#12283a', 100 | 'blue-darker': '#1c3d5a', 101 | 'blue-dark': '#2779bd', 102 | 'blue': '#3490dc', 103 | 'blue-light': '#6cb2eb', 104 | 'blue-lighter': '#bcdefa', 105 | 'blue-lightest': '#eff8ff', 106 | 107 | 'indigo-darkest': '#191e38', 108 | 'indigo-darker': '#2f365f', 109 | 'indigo-dark': '#5661b3', 110 | 'indigo': '#6574cd', 111 | 'indigo-light': '#7886d7', 112 | 'indigo-lighter': '#b2b7ff', 113 | 'indigo-lightest': '#e6e8ff', 114 | 115 | 'purple-darkest': '#21183c', 116 | 'purple-darker': '#382b5f', 117 | 'purple-dark': '#794acf', 118 | 'purple': '#9561e2', 119 | 'purple-light': '#a779e9', 120 | 'purple-lighter': '#d6bbfc', 121 | 'purple-lightest': '#f3ebff', 122 | 123 | 'pink-darkest': '#451225', 124 | 'pink-darker': '#6f213f', 125 | 'pink-dark': '#eb5286', 126 | 'pink': '#f66d9b', 127 | 'pink-light': '#fa7ea8', 128 | 'pink-lighter': '#ffbbca', 129 | 'pink-lightest': '#ffebef', 130 | } 131 | 132 | module.exports = { 133 | 134 | /* 135 | |----------------------------------------------------------------------------- 136 | | Colors https://tailwindcss.com/docs/colors 137 | |----------------------------------------------------------------------------- 138 | | 139 | | The color palette defined above is also assigned to the "colors" key of 140 | | your Tailwind config. This makes it easy to access them in your CSS 141 | | using Tailwind's config helper. For example: 142 | | 143 | | .error { color: config('colors.red') } 144 | | 145 | */ 146 | 147 | colors: colors, 148 | 149 | 150 | /* 151 | |----------------------------------------------------------------------------- 152 | | Screens https://tailwindcss.com/docs/responsive-design 153 | |----------------------------------------------------------------------------- 154 | | 155 | | Screens in Tailwind are translated to CSS media queries. They define the 156 | | responsive breakpoints for your project. By default Tailwind takes a 157 | | "mobile first" approach, where each screen size represents a minimum 158 | | viewport width. Feel free to have as few or as many screens as you 159 | | want, naming them in whatever way you'd prefer for your project. 160 | | 161 | | Tailwind also allows for more complex screen definitions, which can be 162 | | useful in certain situations. Be sure to see the full responsive 163 | | documentation for a complete list of options. 164 | | 165 | | Class name: .{screen}:{utility} 166 | | 167 | */ 168 | 169 | screens: { 170 | 'sm': '576px', 171 | 'md': '768px', 172 | 'lg': '992px', 173 | 'xl': '1200px', 174 | }, 175 | 176 | 177 | /* 178 | |----------------------------------------------------------------------------- 179 | | Fonts https://tailwindcss.com/docs/fonts 180 | |----------------------------------------------------------------------------- 181 | | 182 | | Here is where you define your project's font stack, or font families. 183 | | Keep in mind that Tailwind doesn't actually load any fonts for you. 184 | | If you're using custom fonts you'll need to import them prior to 185 | | defining them here. 186 | | 187 | | By default we provide a native font stack that works remarkably well on 188 | | any device or OS you're using, since it just uses the default fonts 189 | | provided by the platform. 190 | | 191 | | Class name: .font-{name} 192 | | CSS property: font-family 193 | | 194 | */ 195 | 196 | fonts: { 197 | 'sans': [ 198 | 'system-ui', 199 | 'BlinkMacSystemFont', 200 | '-apple-system', 201 | 'Segoe UI', 202 | 'Roboto', 203 | 'Oxygen', 204 | 'Ubuntu', 205 | 'Cantarell', 206 | 'Fira Sans', 207 | 'Droid Sans', 208 | 'Helvetica Neue', 209 | 'sans-serif', 210 | ], 211 | 'serif': [ 212 | 'Constantia', 213 | 'Lucida Bright', 214 | 'Lucidabright', 215 | 'Lucida Serif', 216 | 'Lucida', 217 | 'DejaVu Serif', 218 | 'Bitstream Vera Serif', 219 | 'Liberation Serif', 220 | 'Georgia', 221 | 'serif', 222 | ], 223 | 'mono': [ 224 | 'Menlo', 225 | 'Monaco', 226 | 'Consolas', 227 | 'Liberation Mono', 228 | 'Courier New', 229 | 'monospace', 230 | ], 231 | }, 232 | 233 | 234 | /* 235 | |----------------------------------------------------------------------------- 236 | | Text sizes https://tailwindcss.com/docs/text-sizing 237 | |----------------------------------------------------------------------------- 238 | | 239 | | Here is where you define your text sizes. Name these in whatever way 240 | | makes the most sense to you. We use size names by default, but 241 | | you're welcome to use a numeric scale or even something else 242 | | entirely. 243 | | 244 | | By default Tailwind uses the "rem" unit type for most measurements. 245 | | This allows you to set a root font size which all other sizes are 246 | | then based on. That said, you are free to use whatever units you 247 | | prefer, be it rems, ems, pixels or other. 248 | | 249 | | Class name: .text-{size} 250 | | CSS property: font-size 251 | | 252 | */ 253 | 254 | textSizes: { 255 | 'xs': '.75rem', // 12px 256 | 'sm': '.875rem', // 14px 257 | 'base': '1rem', // 16px 258 | 'lg': '1.125rem', // 18px 259 | 'xl': '1.25rem', // 20px 260 | '2xl': '1.5rem', // 24px 261 | '3xl': '1.875rem', // 30px 262 | '4xl': '2.25rem', // 36px 263 | '5xl': '3rem', // 48px 264 | }, 265 | 266 | 267 | /* 268 | |----------------------------------------------------------------------------- 269 | | Font weights https://tailwindcss.com/docs/font-weight 270 | |----------------------------------------------------------------------------- 271 | | 272 | | Here is where you define your font weights. We've provided a list of 273 | | common font weight names with their respective numeric scale values 274 | | to get you started. It's unlikely that your project will require 275 | | all of these, so we recommend removing those you don't need. 276 | | 277 | | Class name: .font-{weight} 278 | | CSS property: font-weight 279 | | 280 | */ 281 | 282 | fontWeights: { 283 | 'hairline': 100, 284 | 'thin': 200, 285 | 'light': 300, 286 | 'normal': 400, 287 | 'medium': 500, 288 | 'semibold': 600, 289 | 'bold': 700, 290 | 'extrabold': 800, 291 | 'black': 900, 292 | }, 293 | 294 | 295 | /* 296 | |----------------------------------------------------------------------------- 297 | | Leading (line height) https://tailwindcss.com/docs/line-height 298 | |----------------------------------------------------------------------------- 299 | | 300 | | Here is where you define your line height values, or as we call 301 | | them in Tailwind, leadings. 302 | | 303 | | Class name: .leading-{size} 304 | | CSS property: line-height 305 | | 306 | */ 307 | 308 | leading: { 309 | 'none': 1, 310 | 'tight': 1.25, 311 | 'normal': 1.5, 312 | 'loose': 2, 313 | }, 314 | 315 | 316 | /* 317 | |----------------------------------------------------------------------------- 318 | | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing 319 | |----------------------------------------------------------------------------- 320 | | 321 | | Here is where you define your letter spacing values, or as we call 322 | | them in Tailwind, tracking. 323 | | 324 | | Class name: .tracking-{size} 325 | | CSS property: letter-spacing 326 | | 327 | */ 328 | 329 | tracking: { 330 | 'tight': '-0.05em', 331 | 'normal': '0', 332 | 'wide': '0.05em', 333 | }, 334 | 335 | 336 | /* 337 | |----------------------------------------------------------------------------- 338 | | Text colors https://tailwindcss.com/docs/text-color 339 | |----------------------------------------------------------------------------- 340 | | 341 | | Here is where you define your text colors. By default these use the 342 | | color palette we defined above, however you're welcome to set these 343 | | independently if that makes sense for your project. 344 | | 345 | | Class name: .text-{color} 346 | | CSS property: color 347 | | 348 | */ 349 | 350 | textColors: colors, 351 | 352 | 353 | /* 354 | |----------------------------------------------------------------------------- 355 | | Background colors https://tailwindcss.com/docs/background-color 356 | |----------------------------------------------------------------------------- 357 | | 358 | | Here is where you define your background colors. By default these use 359 | | the color palette we defined above, however you're welcome to set 360 | | these independently if that makes sense for your project. 361 | | 362 | | Class name: .bg-{color} 363 | | CSS property: background-color 364 | | 365 | */ 366 | 367 | backgroundColors: colors, 368 | 369 | 370 | /* 371 | |----------------------------------------------------------------------------- 372 | | Background sizes https://tailwindcss.com/docs/background-size 373 | |----------------------------------------------------------------------------- 374 | | 375 | | Here is where you define your background sizes. We provide some common 376 | | values that are useful in most projects, but feel free to add other sizes 377 | | that are specific to your project here as well. 378 | | 379 | | Class name: .bg-{size} 380 | | CSS property: background-size 381 | | 382 | */ 383 | 384 | backgroundSize: { 385 | 'auto': 'auto', 386 | 'cover': 'cover', 387 | 'contain': 'contain', 388 | }, 389 | 390 | 391 | /* 392 | |----------------------------------------------------------------------------- 393 | | Border widths https://tailwindcss.com/docs/border-width 394 | |----------------------------------------------------------------------------- 395 | | 396 | | Here is where you define your border widths. Take note that border 397 | | widths require a special "default" value set as well. This is the 398 | | width that will be used when you do not specify a border width. 399 | | 400 | | Class name: .border{-side?}{-width?} 401 | | CSS property: border-width 402 | | 403 | */ 404 | 405 | borderWidths: { 406 | default: '1px', 407 | '0': '0', 408 | '2': '2px', 409 | '4': '4px', 410 | '8': '8px', 411 | }, 412 | 413 | 414 | /* 415 | |----------------------------------------------------------------------------- 416 | | Border colors https://tailwindcss.com/docs/border-color 417 | |----------------------------------------------------------------------------- 418 | | 419 | | Here is where you define your border colors. By default these use the 420 | | color palette we defined above, however you're welcome to set these 421 | | independently if that makes sense for your project. 422 | | 423 | | Take note that border colors require a special "default" value set 424 | | as well. This is the color that will be used when you do not 425 | | specify a border color. 426 | | 427 | | Class name: .border-{color} 428 | | CSS property: border-color 429 | | 430 | */ 431 | 432 | borderColors: global.Object.assign({ default: colors['grey-light'] }, colors), 433 | 434 | 435 | /* 436 | |----------------------------------------------------------------------------- 437 | | Border radius https://tailwindcss.com/docs/border-radius 438 | |----------------------------------------------------------------------------- 439 | | 440 | | Here is where you define your border radius values. If a `default` radius 441 | | is provided, it will be made available as the non-suffixed `.rounded` 442 | | utility. 443 | | 444 | | If your scale includes a `0` value to reset already rounded corners, it's 445 | | a good idea to put it first so other values are able to override it. 446 | | 447 | | Class name: .rounded{-side?}{-size?} 448 | | CSS property: border-radius 449 | | 450 | */ 451 | 452 | borderRadius: { 453 | 'none': '0', 454 | 'sm': '.125rem', 455 | default: '.25rem', 456 | 'lg': '.5rem', 457 | 'full': '9999px', 458 | }, 459 | 460 | 461 | /* 462 | |----------------------------------------------------------------------------- 463 | | Width https://tailwindcss.com/docs/width 464 | |----------------------------------------------------------------------------- 465 | | 466 | | Here is where you define your width utility sizes. These can be 467 | | percentage based, pixels, rems, or any other units. By default 468 | | we provide a sensible rem based numeric scale, a percentage 469 | | based fraction scale, plus some other common use-cases. You 470 | | can, of course, modify these values as needed. 471 | | 472 | | 473 | | It's also worth mentioning that Tailwind automatically escapes 474 | | invalid CSS class name characters, which allows you to have 475 | | awesome classes like .w-2/3. 476 | | 477 | | Class name: .w-{size} 478 | | CSS property: width 479 | | 480 | */ 481 | 482 | width: { 483 | 'auto': 'auto', 484 | 'px': '1px', 485 | '1': '0.25rem', 486 | '2': '0.5rem', 487 | '3': '0.75rem', 488 | '4': '1rem', 489 | '5': '1.25rem', 490 | '6': '1.5rem', 491 | '8': '2rem', 492 | '10': '2.5rem', 493 | '12': '3rem', 494 | '16': '4rem', 495 | '24': '6rem', 496 | '32': '8rem', 497 | '48': '12rem', 498 | '64': '16rem', 499 | '1/2': '50%', 500 | '1/3': '33.33333%', 501 | '2/3': '66.66667%', 502 | '1/4': '25%', 503 | '3/4': '75%', 504 | '1/5': '20%', 505 | '2/5': '40%', 506 | '3/5': '60%', 507 | '4/5': '80%', 508 | '1/6': '16.66667%', 509 | '5/6': '83.33333%', 510 | 'full': '100%', 511 | 'screen': '100vw', 512 | }, 513 | 514 | 515 | /* 516 | |----------------------------------------------------------------------------- 517 | | Height https://tailwindcss.com/docs/height 518 | |----------------------------------------------------------------------------- 519 | | 520 | | Here is where you define your height utility sizes. These can be 521 | | percentage based, pixels, rems, or any other units. By default 522 | | we provide a sensible rem based numeric scale plus some other 523 | | common use-cases. You can, of course, modify these values as 524 | | needed. 525 | | 526 | | Class name: .h-{size} 527 | | CSS property: height 528 | | 529 | */ 530 | 531 | height: { 532 | 'auto': 'auto', 533 | 'px': '1px', 534 | '1': '0.25rem', 535 | '2': '0.5rem', 536 | '3': '0.75rem', 537 | '4': '1rem', 538 | '5': '1.25rem', 539 | '6': '1.5rem', 540 | '8': '2rem', 541 | '10': '2.5rem', 542 | '12': '3rem', 543 | '16': '4rem', 544 | '24': '6rem', 545 | '32': '8rem', 546 | '48': '12rem', 547 | '64': '16rem', 548 | 'full': '100%', 549 | 'screen': '100vh', 550 | }, 551 | 552 | 553 | /* 554 | |----------------------------------------------------------------------------- 555 | | Minimum width https://tailwindcss.com/docs/min-width 556 | |----------------------------------------------------------------------------- 557 | | 558 | | Here is where you define your minimum width utility sizes. These can 559 | | be percentage based, pixels, rems, or any other units. We provide a 560 | | couple common use-cases by default. You can, of course, modify 561 | | these values as needed. 562 | | 563 | | Class name: .min-w-{size} 564 | | CSS property: min-width 565 | | 566 | */ 567 | 568 | minWidth: { 569 | '0': '0', 570 | 'full': '100%', 571 | }, 572 | 573 | 574 | /* 575 | |----------------------------------------------------------------------------- 576 | | Minimum height https://tailwindcss.com/docs/min-height 577 | |----------------------------------------------------------------------------- 578 | | 579 | | Here is where you define your minimum height utility sizes. These can 580 | | be percentage based, pixels, rems, or any other units. We provide a 581 | | few common use-cases by default. You can, of course, modify these 582 | | values as needed. 583 | | 584 | | Class name: .min-h-{size} 585 | | CSS property: min-height 586 | | 587 | */ 588 | 589 | minHeight: { 590 | '0': '0', 591 | 'full': '100%', 592 | 'screen': '100vh', 593 | }, 594 | 595 | 596 | /* 597 | |----------------------------------------------------------------------------- 598 | | Maximum width https://tailwindcss.com/docs/max-width 599 | |----------------------------------------------------------------------------- 600 | | 601 | | Here is where you define your maximum width utility sizes. These can 602 | | be percentage based, pixels, rems, or any other units. By default 603 | | we provide a sensible rem based scale and a "full width" size, 604 | | which is basically a reset utility. You can, of course, 605 | | modify these values as needed. 606 | | 607 | | Class name: .max-w-{size} 608 | | CSS property: max-width 609 | | 610 | */ 611 | 612 | maxWidth: { 613 | 'xs': '20rem', 614 | 'sm': '30rem', 615 | 'md': '40rem', 616 | 'lg': '50rem', 617 | 'xl': '60rem', 618 | '2xl': '70rem', 619 | '3xl': '80rem', 620 | '4xl': '90rem', 621 | '5xl': '100rem', 622 | 'full': '100%', 623 | }, 624 | 625 | 626 | /* 627 | |----------------------------------------------------------------------------- 628 | | Maximum height https://tailwindcss.com/docs/max-height 629 | |----------------------------------------------------------------------------- 630 | | 631 | | Here is where you define your maximum height utility sizes. These can 632 | | be percentage based, pixels, rems, or any other units. We provide a 633 | | couple common use-cases by default. You can, of course, modify 634 | | these values as needed. 635 | | 636 | | Class name: .max-h-{size} 637 | | CSS property: max-height 638 | | 639 | */ 640 | 641 | maxHeight: { 642 | 'full': '100%', 643 | 'screen': '100vh', 644 | }, 645 | 646 | 647 | /* 648 | |----------------------------------------------------------------------------- 649 | | Padding https://tailwindcss.com/docs/padding 650 | |----------------------------------------------------------------------------- 651 | | 652 | | Here is where you define your padding utility sizes. These can be 653 | | percentage based, pixels, rems, or any other units. By default we 654 | | provide a sensible rem based numeric scale plus a couple other 655 | | common use-cases like "1px". You can, of course, modify these 656 | | values as needed. 657 | | 658 | | Class name: .p{side?}-{size} 659 | | CSS property: padding 660 | | 661 | */ 662 | 663 | padding: { 664 | 'px': '1px', 665 | '0': '0', 666 | '1': '0.25rem', 667 | '2': '0.5rem', 668 | '3': '0.75rem', 669 | '4': '1rem', 670 | '5': '1.25rem', 671 | '6': '1.5rem', 672 | '8': '2rem', 673 | '10': '2.5rem', 674 | '12': '3rem', 675 | '16': '4rem', 676 | '20': '5rem', 677 | '24': '6rem', 678 | '32': '8rem', 679 | }, 680 | 681 | 682 | /* 683 | |----------------------------------------------------------------------------- 684 | | Margin https://tailwindcss.com/docs/margin 685 | |----------------------------------------------------------------------------- 686 | | 687 | | Here is where you define your margin utility sizes. These can be 688 | | percentage based, pixels, rems, or any other units. By default we 689 | | provide a sensible rem based numeric scale plus a couple other 690 | | common use-cases like "1px". You can, of course, modify these 691 | | values as needed. 692 | | 693 | | Class name: .m{side?}-{size} 694 | | CSS property: margin 695 | | 696 | */ 697 | 698 | margin: { 699 | 'auto': 'auto', 700 | 'px': '1px', 701 | '0': '0', 702 | '1': '0.25rem', 703 | '2': '0.5rem', 704 | '3': '0.75rem', 705 | '4': '1rem', 706 | '5': '1.25rem', 707 | '6': '1.5rem', 708 | '8': '2rem', 709 | '10': '2.5rem', 710 | '12': '3rem', 711 | '16': '4rem', 712 | '20': '5rem', 713 | '24': '6rem', 714 | '32': '8rem', 715 | }, 716 | 717 | 718 | /* 719 | |----------------------------------------------------------------------------- 720 | | Negative margin https://tailwindcss.com/docs/negative-margin 721 | |----------------------------------------------------------------------------- 722 | | 723 | | Here is where you define your negative margin utility sizes. These can 724 | | be percentage based, pixels, rems, or any other units. By default we 725 | | provide matching values to the padding scale since these utilities 726 | | generally get used together. You can, of course, modify these 727 | | values as needed. 728 | | 729 | | Class name: .-m{side?}-{size} 730 | | CSS property: margin 731 | | 732 | */ 733 | 734 | negativeMargin: { 735 | 'px': '1px', 736 | '0': '0', 737 | '1': '0.25rem', 738 | '2': '0.5rem', 739 | '3': '0.75rem', 740 | '4': '1rem', 741 | '5': '1.25rem', 742 | '6': '1.5rem', 743 | '8': '2rem', 744 | '10': '2.5rem', 745 | '12': '3rem', 746 | '16': '4rem', 747 | '20': '5rem', 748 | '24': '6rem', 749 | '32': '8rem', 750 | }, 751 | 752 | 753 | /* 754 | |----------------------------------------------------------------------------- 755 | | Shadows https://tailwindcss.com/docs/shadows 756 | |----------------------------------------------------------------------------- 757 | | 758 | | Here is where you define your shadow utilities. As you can see from 759 | | the defaults we provide, it's possible to apply multiple shadows 760 | | per utility using comma separation. 761 | | 762 | | If a `default` shadow is provided, it will be made available as the non- 763 | | suffixed `.shadow` utility. 764 | | 765 | | Class name: .shadow-{size?} 766 | | CSS property: box-shadow 767 | | 768 | */ 769 | 770 | shadows: { 771 | default: '0 2px 4px 0 rgba(0,0,0,0.10)', 772 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 773 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 774 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 775 | 'outline': '0 0 0 3px rgba(52,144,220,0.5)', 776 | 'none': 'none', 777 | }, 778 | 779 | 780 | /* 781 | |----------------------------------------------------------------------------- 782 | | Z-index https://tailwindcss.com/docs/z-index 783 | |----------------------------------------------------------------------------- 784 | | 785 | | Here is where you define your z-index utility values. By default we 786 | | provide a sensible numeric scale. You can, of course, modify these 787 | | values as needed. 788 | | 789 | | Class name: .z-{index} 790 | | CSS property: z-index 791 | | 792 | */ 793 | 794 | zIndex: { 795 | 'auto': 'auto', 796 | '0': 0, 797 | '10': 10, 798 | '20': 20, 799 | '30': 30, 800 | '40': 40, 801 | '50': 50, 802 | }, 803 | 804 | 805 | /* 806 | |----------------------------------------------------------------------------- 807 | | Opacity https://tailwindcss.com/docs/opacity 808 | |----------------------------------------------------------------------------- 809 | | 810 | | Here is where you define your opacity utility values. By default we 811 | | provide a sensible numeric scale. You can, of course, modify these 812 | | values as needed. 813 | | 814 | | Class name: .opacity-{name} 815 | | CSS property: opacity 816 | | 817 | */ 818 | 819 | opacity: { 820 | '0': '0', 821 | '25': '.25', 822 | '50': '.5', 823 | '75': '.75', 824 | '100': '1', 825 | }, 826 | 827 | 828 | /* 829 | |----------------------------------------------------------------------------- 830 | | SVG fill https://tailwindcss.com/docs/svg 831 | |----------------------------------------------------------------------------- 832 | | 833 | | Here is where you define your SVG fill colors. By default we just provide 834 | | `fill-current` which sets the fill to the current text color. This lets you 835 | | specify a fill color using existing text color utilities and helps keep the 836 | | generated CSS file size down. 837 | | 838 | | Class name: .fill-{name} 839 | | CSS property: fill 840 | | 841 | */ 842 | 843 | svgFill: { 844 | 'current': 'currentColor', 845 | }, 846 | 847 | 848 | /* 849 | |----------------------------------------------------------------------------- 850 | | SVG stroke https://tailwindcss.com/docs/svg 851 | |----------------------------------------------------------------------------- 852 | | 853 | | Here is where you define your SVG stroke colors. By default we just provide 854 | | `stroke-current` which sets the stroke to the current text color. This lets 855 | | you specify a stroke color using existing text color utilities and helps 856 | | keep the generated CSS file size down. 857 | | 858 | | Class name: .stroke-{name} 859 | | CSS property: stroke 860 | | 861 | */ 862 | 863 | svgStroke: { 864 | 'current': 'currentColor', 865 | }, 866 | 867 | 868 | /* 869 | |----------------------------------------------------------------------------- 870 | | Modules https://tailwindcss.com/docs/configuration#modules 871 | |----------------------------------------------------------------------------- 872 | | 873 | | Here is where you control which modules are generated and what variants are 874 | | generated for each of those modules. 875 | | 876 | | Currently supported variants: 877 | | - responsive 878 | | - hover 879 | | - focus 880 | | - focus-within 881 | | - active 882 | | - group-hover 883 | | 884 | | To disable a module completely, use `false` instead of an array. 885 | | 886 | */ 887 | 888 | modules: { 889 | appearance: ['responsive'], 890 | backgroundAttachment: ['responsive'], 891 | backgroundColors: ['responsive', 'hover', 'focus'], 892 | backgroundPosition: ['responsive'], 893 | backgroundRepeat: ['responsive'], 894 | backgroundSize: ['responsive'], 895 | borderCollapse: [], 896 | borderColors: ['responsive', 'hover', 'focus'], 897 | borderRadius: ['responsive'], 898 | borderStyle: ['responsive'], 899 | borderWidths: ['responsive'], 900 | cursor: ['responsive'], 901 | display: ['responsive'], 902 | flexbox: ['responsive'], 903 | float: ['responsive'], 904 | fonts: ['responsive'], 905 | fontWeights: ['responsive', 'hover', 'focus'], 906 | height: ['responsive'], 907 | leading: ['responsive'], 908 | lists: ['responsive'], 909 | margin: ['responsive'], 910 | maxHeight: ['responsive'], 911 | maxWidth: ['responsive'], 912 | minHeight: ['responsive'], 913 | minWidth: ['responsive'], 914 | negativeMargin: ['responsive'], 915 | objectFit: false, 916 | objectPosition: false, 917 | opacity: ['responsive'], 918 | outline: ['focus'], 919 | overflow: ['responsive'], 920 | padding: ['responsive'], 921 | pointerEvents: ['responsive'], 922 | position: ['responsive'], 923 | resize: ['responsive'], 924 | shadows: ['responsive', 'hover', 'focus'], 925 | svgFill: [], 926 | svgStroke: [], 927 | tableLayout: ['responsive'], 928 | textAlign: ['responsive'], 929 | textColors: ['responsive', 'hover', 'focus'], 930 | textSizes: ['responsive'], 931 | textStyle: ['responsive', 'hover', 'focus'], 932 | tracking: ['responsive'], 933 | userSelect: ['responsive'], 934 | verticalAlign: ['responsive'], 935 | visibility: ['responsive'], 936 | whitespace: ['responsive'], 937 | width: ['responsive'], 938 | zIndex: ['responsive'], 939 | }, 940 | 941 | 942 | /* 943 | |----------------------------------------------------------------------------- 944 | | Plugins https://tailwindcss.com/docs/plugins 945 | |----------------------------------------------------------------------------- 946 | | 947 | | Here is where you can register any plugins you'd like to use in your 948 | | project. Tailwind's built-in `container` plugin is enabled by default to 949 | | give you a Bootstrap-style responsive container component out of the box. 950 | | 951 | | Be sure to view the complete plugin documentation to learn more about how 952 | | the plugin system works. 953 | | 954 | */ 955 | 956 | plugins: [ 957 | require('tailwindcss/plugins/container')({ 958 | // center: true, 959 | // padding: '1rem', 960 | }), 961 | ], 962 | 963 | 964 | /* 965 | |----------------------------------------------------------------------------- 966 | | Advanced Options https://tailwindcss.com/docs/configuration#options 967 | |----------------------------------------------------------------------------- 968 | | 969 | | Here is where you can tweak advanced configuration options. We recommend 970 | | leaving these options alone unless you absolutely need to change them. 971 | | 972 | */ 973 | 974 | options: { 975 | prefix: '', 976 | important: false, 977 | separator: ':', 978 | }, 979 | 980 | } 981 | --------------------------------------------------------------------------------