├── .babelrc
├── .gitignore
├── Readme.md
├── components
    └── Navbar
    │   ├── Navbar.scss
    │   └── index.js
├── next.config.js
├── nodemon.json
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── _document.js
    ├── about.js
    ├── index.js
    └── movies
    │   ├── [id]
    │       └── index.js
    │   └── index.js
├── postcss.config.js
├── scss
    ├── _vars.scss
    └── style.scss
├── server
    ├── index.js
    └── routes
    │   └── index.js
├── tailwind.js
├── yarn-error.log
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "plugins": [
 3 |     [
 4 |       "module-resolver",
 5 |       {
 6 |         "root": ["."],
 7 |         "alias": {
 8 |           "styles": "scss/"
 9 |         },
10 |         "cwd": "babelrc"
11 |       }
12 |     ],
13 |     [
14 |       "wrap-in-js",
15 |       {
16 |         "extensions": ["css$", "scss$"]
17 |       }
18 |     ]
19 |   ],
20 |   "presets": ["next/babel"],
21 |   "ignore": []
22 | }
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .next/


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | ## Next JS Tutorial
 2 | 
 3 | The following repository has been updated in the past year to represent the following changes:
 4 | 
 5 | - Dependencies were out of date
 6 |   - @zeit/next-sass => 1.0.1
 7 |   - autoprefixer => 9.6.1
 8 |   - next => 9.0.3
 9 |   - postcss-loader => 3.0.0
10 |   - raw-loader => 3.1.0
11 | - Changes in NextJS best practices
12 |   - `<title>` should not be in `_document.js` => moved to `_app.js`
13 |   - Differences in query param masking directory structure
14 | - More robust server-side routing
15 |   - Provided example to pass app as parameter into router, to make use of `app.render`


--------------------------------------------------------------------------------
/components/Navbar/Navbar.scss:
--------------------------------------------------------------------------------
1 | mark {
2 |   border-radius: 10px;
3 |   background-color: lightblue;
4 |   display: flex;
5 |   flex-direction: column-reverse;
6 | }
7 | 


--------------------------------------------------------------------------------
/components/Navbar/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import Link from "next/link";
 3 | import "./Navbar.scss";
 4 | 
 5 | class Navbar extends Component {
 6 |   constructor(props) {
 7 |     super(props);
 8 |     this.props = props;
 9 |   }
10 | 
11 |   render() {
12 |     return (
13 |       <nav>
14 |         <div>
15 |           <Link href="/">
16 |             <a title="Our API">Home</a>
17 |           </Link>
18 |           <Link href="/about">
19 |             <a title="About Next JS">About Next JS</a>
20 |           </Link>
21 |           <mark className="badge">Hello!</mark>
22 |         </div>
23 |       </nav>
24 |     );
25 |   }
26 | }
27 | 
28 | export default Navbar;
29 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const glob = require("glob");
 3 | 
 4 | module.exports = {
 5 |   webpack: (config, { dev }) => {
 6 |     config.module.rules.push(
 7 |       {
 8 |         test: /\.(css|scss)/,
 9 |         loader: "emit-file-loader",
10 |         options: {
11 |           name: "dist/[path][name].[ext]"
12 |         }
13 |       },
14 |       {
15 |         test: /\.css$/,
16 |         use: ["babel-loader", "raw-loader", "postcss-loader"]
17 |       },
18 |       {
19 |         test: /\.s(a|c)ss$/,
20 |         use: [
21 |           "babel-loader",
22 |           "raw-loader",
23 |           "postcss-loader",
24 |           {
25 |             loader: "sass-loader",
26 |             options: {
27 |               includePaths: ["scss", "node_modules"]
28 |                 .map(d => path.join(__dirname, d))
29 |                 .map(g => glob.sync(g))
30 |                 .reduce((a, c) => a.concat(c), [])
31 |             }
32 |           }
33 |         ]
34 |       }
35 |     );
36 |     return config;
37 |   }
38 | };
39 | 
40 | const withSass = require("@zeit/next-sass");
41 | module.exports = withSass();
42 | 


--------------------------------------------------------------------------------
/nodemon.json:
--------------------------------------------------------------------------------
1 | {
2 |   "verbose": true,
3 |   "ignore": ["node_modules", ".next"],
4 |   "watch": ["server/**/*", "index.js"],
5 |   "ext": "js json"
6 | }
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nexttutorial",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "nodemon server/index.js"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "@zeit/next-sass": "^1.0.1",
14 |     "autoprefixer": "^9.6.1",
15 |     "babel-plugin-module-resolver": "^3.1.1",
16 |     "babel-plugin-wrap-in-js": "^1.1.1",
17 |     "express": "^4.16.3",
18 |     "next": "^9.0.3",
19 |     "node-sass": "^4.8.3",
20 |     "postcss-easy-import": "^3.0.0",
21 |     "postcss-loader": "^3.0.0",
22 |     "raw-loader": "^3.1.0",
23 |     "react": "^16.3.2",
24 |     "react-dom": "^16.3.2",
25 |     "sass-loader": "^7.0.1",
26 |     "tailwindcss": "^0.5.2"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | // pages/_app.js
 2 | import App, { Container } from 'next/app'
 3 | import Head from 'next/head'
 4 | import React from 'react'
 5 | 
 6 | export default class MyApp extends App {
 7 |   static async getInitialProps({ Component, ctx }) {
 8 |     let pageProps = {}
 9 | 
10 |     if (Component.getInitialProps) {
11 |       pageProps = await Component.getInitialProps(ctx)
12 |     }
13 | 
14 |     return { pageProps }
15 |   }
16 | 
17 |   render() {
18 |     const { Component, pageProps } = this.props
19 | 
20 |     return (
21 |       <Container>
22 |         <Head>
23 |           <title>My new cool app</title>
24 |         </Head>
25 |         <Component {...pageProps} />
26 |       </Container>
27 |     )
28 |   }
29 | }


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Head, Main, NextScript } from "next/document";
 2 | 
 3 | export default class MyDocument extends Document {
 4 |   render() {
 5 |     return (
 6 |       <html>
 7 |         <Head>
 8 |           <link rel="stylesheet" href="/_next/static/style.css" />
 9 |         </Head>
10 |         <body>
11 |           <Main />
12 |           <NextScript />
13 |         </body>
14 |       </html>
15 |     );
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/pages/about.js:
--------------------------------------------------------------------------------
 1 | const About = () => (
 2 |   <section className="page-section">
 3 |     <h1>About Next JS</h1>
 4 |     <p>
 5 |       <span>
 6 |         Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti et eos
 7 |         sit vero ab laborum nulla culpa, quis neque ex, voluptatum, eveniet amet
 8 |         autem obcaecati animi ratione quo officiis at!
 9 |       </span>
10 |       <span>
11 |         Voluptas obcaecati et adipisci quasi omnis dolores odio eos hic modi
12 |         voluptatum ratione ullam sequi aspernatur ducimus exercitationem
13 |         possimus, sint rem officiis esse recusandae, eveniet laborum repellat.
14 |         Ipsum, culpa reprehenderit.
15 |       </span>
16 |       <span>
17 |         Facilis deleniti dolore neque excepturi hic, tempora dolores repellat
18 |         ipsum quis nihil! Dolor sapiente asperiores laborum aperiam
19 |         necessitatibus obcaecati adipisci temporibus itaque optio saepe
20 |         similique perspiciatis nulla ullam, voluptatibus praesentium?
21 |       </span>
22 |     </p>
23 |   </section>
24 | );
25 | 
26 | export default About;
27 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Head from "next/head";
 2 | import "../scss/style.scss";
 3 | import Navbar from "../components/Navbar";
 4 | 
 5 | const Index = () => (
 6 |   <section className="page-section">
 7 |     <Head>
 8 |       <title>Hello World</title>
 9 |     </Head>
10 |     <Navbar />
11 |     <h1>Hello World from Next JS</h1>
12 |     <div className="container mx-auto">
13 |       <p>
14 |         <span>
15 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti et
16 |           eos sit vero ab laborum nulla culpa, quis neque ex, voluptatum,
17 |           eveniet amet autem obcaecati animi ratione quo officiis at!
18 |         </span>
19 |         <span>
20 |           Voluptas obcaecati et adipisci quasi omnis dolores odio eos hic modi
21 |           voluptatum ratione ullam sequi aspernatur ducimus exercitationem
22 |           possimus, sint rem officiis esse recusandae, eveniet laborum repellat.
23 |           Ipsum, culpa reprehenderit.
24 |         </span>
25 |         <span>
26 |           Facilis deleniti dolore neque excepturi hic, tempora dolores repellat
27 |           ipsum quis nihil! Dolor sapiente asperiores laborum aperiam
28 |           necessitatibus obcaecati adipisci temporibus itaque optio saepe
29 |           similique perspiciatis nulla ullam, voluptatibus praesentium?
30 |         </span>
31 |       </p>
32 |     </div>
33 |   </section>
34 | );
35 | 
36 | export default Index;
37 | 


--------------------------------------------------------------------------------
/pages/movies/[id]/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | export default class extends Component {
 4 |   static getInitialProps({ query: { id }}) {
 5 |     return { movieId: id }
 6 |   }
 7 | 
 8 |   render() {
 9 |     return (
10 |       <div>
11 |         <h1>My Movie Post for #{this.props.movieId}</h1>
12 |         <p>
13 |           lorem
14 |         </p>
15 |       </div>
16 |     )
17 |   }
18 | }


--------------------------------------------------------------------------------
/pages/movies/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Head from 'next/head';
 3 | 
 4 | export default (props) => (
 5 |   <div>
 6 |     <Head>
 7 |       <title>Movie Title</title>
 8 |     </Head>
 9 |     <div>Movies Home</div>
10 |   </div>
11 | )


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [
3 |     require("postcss-easy-import")({ prefix: "_" }),
4 |     require("tailwindcss")("./tailwind.js"),
5 |     require("autoprefixer")({})
6 |   ]
7 | };
8 | 


--------------------------------------------------------------------------------
/scss/_vars.scss:
--------------------------------------------------------------------------------
1 | $green: green;
2 | 


--------------------------------------------------------------------------------
/scss/style.scss:
--------------------------------------------------------------------------------
 1 | @tailwind preflight;
 2 | @tailwind utilities;
 3 | 
 4 | @import "_vars.scss";
 5 | 
 6 | .page-section {
 7 |   @apply .bg-blue-lightest .py-6 .px-4;
 8 | }
 9 | 
10 | nav {
11 |   padding: 10px;
12 | 
13 |   a {
14 |     padding: 10px;
15 |     text-decoration: none;
16 |     color: $green;
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const next = require("next");
 3 | 
 4 | const PORT = process.env.PORT || 3000;
 5 | const dev = process.env.NODE_ENV !== "production";
 6 | const app = next({ dev });
 7 | const handle = app.getRequestHandler();
 8 | 
 9 | app
10 |   .prepare()
11 |   .then(() => {
12 |     const server = express();
13 |     const showRoutes = require("./routes/index.js");
14 | 
15 |     server.use("/api", showRoutes(server));
16 | 
17 |     server.get("*", (req, res) => {
18 |       return handle(req, res);
19 |     });
20 | 
21 |     server.listen(PORT, err => {
22 |       if (err) throw err;
23 |       console.log(`> Ready on ${PORT}`);
24 |     });
25 |   })
26 |   .catch(ex => {
27 |     console.error(ex.stack);
28 |     process.exit(1);
29 |   });
30 | 


--------------------------------------------------------------------------------
/server/routes/index.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const router = express.Router();
 3 | 
 4 | function routes(app) {
 5 |   router.get("/movies", (req, res) => {
 6 |     res.end("We made it! And it's great");
 7 |   });
 8 |   
 9 |   router.get("/movies/:id", (req, res) => {
10 |     return app.render(req, res, "/movies", { id: req.params.id });
11 |   });
12 | 
13 |   return router;
14 | };
15 | 
16 | module.exports = routes;
17 | 


--------------------------------------------------------------------------------
/tailwind.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Tailwind - The Utility-First CSS Framework
  3 | A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink),
  4 | David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger).
  5 | Welcome to the Tailwind config file. This is where you can customize
  6 | Tailwind specifically for your project. Don't be intimidated by the
  7 | length of this file. It's really just a big JavaScript object and
  8 | we've done our very best to explain each section.
  9 | View the full documentation at https://tailwindcss.com.
 10 | |-------------------------------------------------------------------------------
 11 | | The default config
 12 | |-------------------------------------------------------------------------------
 13 | |
 14 | | This variable contains the default Tailwind config. You don't have
 15 | | to use it, but it can sometimes be helpful to have available. For
 16 | | example, you may choose to merge your custom configuration
 17 | | values with some of the Tailwind defaults.
 18 | |
 19 | */
 20 | 
 21 | var defaultConfig = require("tailwindcss/defaultConfig")();
 22 | 
 23 | /*
 24 | |-------------------------------------------------------------------------------
 25 | | Colors                                    https://tailwindcss.com/docs/colors
 26 | |-------------------------------------------------------------------------------
 27 | |
 28 | | Here you can specify the colors used in your project. To get you started,
 29 | | we've provided a generous palette of great looking colors that are perfect
 30 | | for prototyping, but don't hesitate to change them for your project. You
 31 | | own these colors, nothing will break if you change everything about them.
 32 | |
 33 | | We've used literal color names ("red", "blue", etc.) for the default
 34 | | palette, but if you'd rather use functional names like "primary" and
 35 | | "secondary", or even a numeric scale like "100" and "200", go for it.
 36 | |
 37 | */
 38 | 
 39 | var colors = {
 40 |   transparent: "transparent",
 41 | 
 42 |   black: "#222b2f",
 43 |   "grey-darkest": "#364349",
 44 |   "grey-darker": "#596a73",
 45 |   "grey-dark": "#70818a",
 46 |   grey: "#9babb4",
 47 |   "grey-light": "#dae4e9",
 48 |   "grey-lighter": "#f3f7f9",
 49 |   "grey-lightest": "#fafcfc",
 50 |   white: "#ffffff",
 51 | 
 52 |   "red-darkest": "#420806",
 53 |   "red-darker": "#6a1b19",
 54 |   "red-dark": "#cc1f1a",
 55 |   red: "#e3342f",
 56 |   "red-light": "#ef5753",
 57 |   "red-lighter": "#f9acaa",
 58 |   "red-lightest": "#fcebea",
 59 | 
 60 |   "orange-darkest": "#542605",
 61 |   "orange-darker": "#7f4012",
 62 |   "orange-dark": "#de751f",
 63 |   orange: "#f6993f",
 64 |   "orange-light": "#faad63",
 65 |   "orange-lighter": "#fcd9b6",
 66 |   "orange-lightest": "#fff5eb",
 67 | 
 68 |   "yellow-darkest": "#453411",
 69 |   "yellow-darker": "#684f1d",
 70 |   "yellow-dark": "#f2d024",
 71 |   yellow: "#ffed4a",
 72 |   "yellow-light": "#fff382",
 73 |   "yellow-lighter": "#fff9c2",
 74 |   "yellow-lightest": "#fcfbeb",
 75 | 
 76 |   "green-darkest": "#032d19",
 77 |   "green-darker": "#0b4228",
 78 |   "green-dark": "#1f9d55",
 79 |   green: "#38c172",
 80 |   "green-light": "#51d88a",
 81 |   "green-lighter": "#a2f5bf",
 82 |   "green-lightest": "#e3fcec",
 83 | 
 84 |   "teal-darkest": "#0d3331",
 85 |   "teal-darker": "#174e4b",
 86 |   "teal-dark": "#38a89d",
 87 |   teal: "#4dc0b5",
 88 |   "teal-light": "#64d5ca",
 89 |   "teal-lighter": "#a0f0ed",
 90 |   "teal-lightest": "#e8fffe",
 91 | 
 92 |   "blue-darkest": "#05233b",
 93 |   "blue-darker": "#103d60",
 94 |   "blue-dark": "#2779bd",
 95 |   blue: "#3490dc",
 96 |   "blue-light": "#6cb2eb",
 97 |   "blue-lighter": "#bcdefa",
 98 |   "blue-lightest": "#eff8ff",
 99 | 
100 |   "indigo-darkest": "#191e38",
101 |   "indigo-darker": "#2f365f",
102 |   "indigo-dark": "#5661b3",
103 |   indigo: "#6574cd",
104 |   "indigo-light": "#7886d7",
105 |   "indigo-lighter": "#b2b7ff",
106 |   "indigo-lightest": "#e6e8ff",
107 | 
108 |   "purple-darkest": "#1f133f",
109 |   "purple-darker": "#352465",
110 |   "purple-dark": "#794acf",
111 |   purple: "#9561e2",
112 |   "purple-light": "#a779e9",
113 |   "purple-lighter": "#d6bbfc",
114 |   "purple-lightest": "#f3ebff",
115 | 
116 |   "pink-darkest": "#45051e",
117 |   "pink-darker": "#72173a",
118 |   "pink-dark": "#eb5286",
119 |   pink: "#f66d9b",
120 |   "pink-light": "#fa7ea8",
121 |   "pink-lighter": "#ffbbca",
122 |   "pink-lightest": "#ffebef"
123 | };
124 | 
125 | module.exports = {
126 |   /*
127 |   |-----------------------------------------------------------------------------
128 |   | Colors                                  https://tailwindcss.com/docs/colors
129 |   |-----------------------------------------------------------------------------
130 |   |
131 |   | The color palette defined above is also assigned to the "colors" key of
132 |   | your Tailwind config. This makes it easy to access them in your CSS
133 |   | using Tailwind's config helper. For example:
134 |   |
135 |   | .error { color: config('colors.red') }
136 |   |
137 |   */
138 | 
139 |   colors: colors,
140 | 
141 |   /*
142 |   |-----------------------------------------------------------------------------
143 |   | Screens                      https://tailwindcss.com/docs/responsive-design
144 |   |-----------------------------------------------------------------------------
145 |   |
146 |   | Screens in Tailwind are translated to CSS media queries. They define the
147 |   | responsive breakpoints for your project. By default Tailwind takes a
148 |   | "mobile first" approach, where each screen size represents a minimum
149 |   | viewport width. Feel free to have as few or as many screens as you
150 |   | want, naming them in whatever way you'd prefer for your project.
151 |   |
152 |   | Tailwind also allows for more complex screen definitions, which can be
153 |   | useful in certain situations. Be sure to see the full responsive
154 |   | documentation for a complete list of options.
155 |   |
156 |   | Class name: .{screen}:{utility}
157 |   |
158 |   */
159 | 
160 |   screens: {
161 |     sm: "576px",
162 |     md: "768px",
163 |     lg: "992px",
164 |     xl: "1200px"
165 |   },
166 | 
167 |   /*
168 |   |-----------------------------------------------------------------------------
169 |   | Fonts                                    https://tailwindcss.com/docs/fonts
170 |   |-----------------------------------------------------------------------------
171 |   |
172 |   | Here is where you define your project's font stack, or font families.
173 |   | Keep in mind that Tailwind doesn't actually load any fonts for you.
174 |   | If you're using custom fonts you'll need to import them prior to
175 |   | defining them here.
176 |   |
177 |   | By default we provide a native font stack that works remarkably well on
178 |   | any device or OS you're using, since it just uses the default fonts
179 |   | provided by the platform.
180 |   |
181 |   | Class name: .font-{name}
182 |   |
183 |   */
184 | 
185 |   fonts: {
186 |     sans: [
187 |       "-apple-system",
188 |       "BlinkMacSystemFont",
189 |       "Segoe UI",
190 |       "Roboto",
191 |       "Oxygen",
192 |       "Ubuntu",
193 |       "Cantarell",
194 |       "Fira Sans",
195 |       "Droid Sans",
196 |       "Helvetica Neue",
197 |       "sans-serif"
198 |     ],
199 |     serif: [
200 |       "Constantia",
201 |       "Lucida Bright",
202 |       "Lucidabright",
203 |       "Lucida Serif",
204 |       "Lucida",
205 |       "DejaVu Serif",
206 |       "Bitstream Vera Serif",
207 |       "Liberation Serif",
208 |       "Georgia",
209 |       "serif"
210 |     ],
211 |     mono: [
212 |       "Menlo",
213 |       "Monaco",
214 |       "Consolas",
215 |       "Liberation Mono",
216 |       "Courier New",
217 |       "monospace"
218 |     ]
219 |   },
220 | 
221 |   /*
222 |   |-----------------------------------------------------------------------------
223 |   | Text sizes                         https://tailwindcss.com/docs/text-sizing
224 |   |-----------------------------------------------------------------------------
225 |   |
226 |   | Here is where you define your text sizes. Name these in whatever way
227 |   | makes the most sense to you. We use size names by default, but
228 |   | you're welcome to use a numeric scale or even something else
229 |   | entirely.
230 |   |
231 |   | By default Tailwind uses the "rem" unit type for most measurements.
232 |   | This allows you to set a root font size which all other sizes are
233 |   | then based on. That said, you are free to use whatever units you
234 |   | prefer, be it rems, ems, pixels or other.
235 |   |
236 |   | Class name: .text-{size}
237 |   |
238 |   */
239 | 
240 |   textSizes: {
241 |     xs: ".75rem", // 12px
242 |     sm: ".875rem", // 14px
243 |     base: "1rem", // 16px
244 |     lg: "1.125rem", // 18px
245 |     xl: "1.25rem", // 20px
246 |     "2xl": "1.5rem", // 24px
247 |     "3xl": "1.875rem", // 30px
248 |     "4xl": "2.25rem", // 36px
249 |     "5xl": "3rem" // 48px
250 |   },
251 | 
252 |   /*
253 |   |-----------------------------------------------------------------------------
254 |   | Font weights                       https://tailwindcss.com/docs/font-weight
255 |   |-----------------------------------------------------------------------------
256 |   |
257 |   | Here is where you define your font weights. We've provided a list of
258 |   | common font weight names with their respective numeric scale values
259 |   | to get you started. It's unlikely that your project will require
260 |   | all of these, so we recommend removing those you don't need.
261 |   |
262 |   | Class name: .font-{weight}
263 |   |
264 |   */
265 | 
266 |   fontWeights: {
267 |     hairline: 100,
268 |     thin: 200,
269 |     light: 300,
270 |     normal: 400,
271 |     medium: 500,
272 |     semibold: 600,
273 |     bold: 700,
274 |     extrabold: 800,
275 |     black: 900
276 |   },
277 | 
278 |   /*
279 |   |-----------------------------------------------------------------------------
280 |   | Leading (line height)              https://tailwindcss.com/docs/line-height
281 |   |-----------------------------------------------------------------------------
282 |   |
283 |   | Here is where you define your line height values, or as we call
284 |   | them in Tailwind, leadings.
285 |   |
286 |   | Class name: .leading-{size}
287 |   |
288 |   */
289 | 
290 |   leading: {
291 |     none: 1,
292 |     tight: 1.25,
293 |     normal: 1.5,
294 |     loose: 2
295 |   },
296 | 
297 |   /*
298 |   |-----------------------------------------------------------------------------
299 |   | Tracking (letter spacing)       https://tailwindcss.com/docs/letter-spacing
300 |   |-----------------------------------------------------------------------------
301 |   |
302 |   | Here is where you define your letter spacing values, or as we call
303 |   | them in Tailwind, tracking.
304 |   |
305 |   | Class name: .tracking-{size}
306 |   |
307 |   */
308 | 
309 |   tracking: {
310 |     tight: "-0.05em",
311 |     normal: "0",
312 |     wide: "0.05em"
313 |   },
314 | 
315 |   /*
316 |   |-----------------------------------------------------------------------------
317 |   | Text colors                         https://tailwindcss.com/docs/text-color
318 |   |-----------------------------------------------------------------------------
319 |   |
320 |   | Here is where you define your text colors. By default these use the
321 |   | color palette we defined above, however you're welcome to set these
322 |   | independently if that makes sense for your project.
323 |   |
324 |   | Class name: .text-{color}
325 |   |
326 |   */
327 | 
328 |   textColors: colors,
329 | 
330 |   /*
331 |   |-----------------------------------------------------------------------------
332 |   | Background colors             https://tailwindcss.com/docs/background-color
333 |   |-----------------------------------------------------------------------------
334 |   |
335 |   | Here is where you define your background colors. By default these use
336 |   | the color palette we defined above, however you're welcome to set
337 |   | these independently if that makes sense for your project.
338 |   |
339 |   | Class name: .bg-{color}
340 |   |
341 |   */
342 | 
343 |   backgroundColors: colors,
344 | 
345 |   /*
346 |   |-----------------------------------------------------------------------------
347 |   | Border widths                     https://tailwindcss.com/docs/border-width
348 |   |-----------------------------------------------------------------------------
349 |   |
350 |   | Here is where you define your border widths. Take note that border
351 |   | widths require a special "default" value set as well. This is the
352 |   | width that will be used when you do not specify a border width.
353 |   |
354 |   | Class name: .border{-side?}{-width?}
355 |   |
356 |   */
357 | 
358 |   borderWidths: {
359 |     default: "1px",
360 |     "0": "0",
361 |     "2": "2px",
362 |     "4": "4px",
363 |     "8": "8px"
364 |   },
365 | 
366 |   /*
367 |   |-----------------------------------------------------------------------------
368 |   | Border colors                     https://tailwindcss.com/docs/border-color
369 |   |-----------------------------------------------------------------------------
370 |   |
371 |   | Here is where you define your border colors. By default these use the
372 |   | color palette we defined above, however you're welcome to set these
373 |   | independently if that makes sense for your project.
374 |   |
375 |   | Take note that border colors require a special "default" value set
376 |   | as well. This is the color that will be used when you do not
377 |   | specify a border color.
378 |   |
379 |   | Class name: .border-{color}
380 |   |
381 |   */
382 | 
383 |   borderColors: Object.assign({ default: colors["grey-light"] }, colors),
384 | 
385 |   /*
386 |   |-----------------------------------------------------------------------------
387 |   | Border radius                    https://tailwindcss.com/docs/border-radius
388 |   |-----------------------------------------------------------------------------
389 |   |
390 |   | Here is where you define your border radius values. If a `default` radius
391 |   | is provided, it will be made available as the non-suffixed `.rounded`
392 |   | utility.
393 |   |
394 |   | Class name: .rounded{-radius?}
395 |   |
396 |   */
397 | 
398 |   borderRadius: {
399 |     default: ".25rem",
400 |     sm: ".125rem",
401 |     lg: ".5rem",
402 |     full: "9999px",
403 |     none: "0"
404 |   },
405 | 
406 |   /*
407 |   |-----------------------------------------------------------------------------
408 |   | Width                                    https://tailwindcss.com/docs/width
409 |   |-----------------------------------------------------------------------------
410 |   |
411 |   | Here is where you define your width utility sizes. These can be
412 |   | percentage based, pixels, rems, or any other units. By default
413 |   | we provide a sensible rem based numeric scale, a percentage
414 |   | based fraction scale, plus some other common use-cases. You
415 |   | can, of course, modify these values as needed.
416 |   |
417 |   |
418 |   | It's also worth mentioning that Tailwind automatically escapes
419 |   | invalid CSS class name characters, which allows you to have
420 |   | awesome classes like .w-2/3.
421 |   |
422 |   | Class name: .w-{size}
423 |   |
424 |   */
425 | 
426 |   width: {
427 |     auto: "auto",
428 |     px: "1px",
429 |     "1": "0.25rem",
430 |     "2": "0.5rem",
431 |     "3": "0.75rem",
432 |     "4": "1rem",
433 |     "6": "1.5rem",
434 |     "8": "2rem",
435 |     "10": "2.5rem",
436 |     "12": "3rem",
437 |     "16": "4rem",
438 |     "24": "6rem",
439 |     "32": "8rem",
440 |     "48": "12rem",
441 |     "64": "16rem",
442 |     "1/2": "50%",
443 |     "1/3": "33.33333%",
444 |     "2/3": "66.66667%",
445 |     "1/4": "25%",
446 |     "3/4": "75%",
447 |     "1/5": "20%",
448 |     "2/5": "40%",
449 |     "3/5": "60%",
450 |     "4/5": "80%",
451 |     "1/6": "16.66667%",
452 |     "5/6": "83.33333%",
453 |     full: "100%",
454 |     screen: "100vw"
455 |   },
456 | 
457 |   /*
458 |   |-----------------------------------------------------------------------------
459 |   | Height                                  https://tailwindcss.com/docs/height
460 |   |-----------------------------------------------------------------------------
461 |   |
462 |   | Here is where you define your height utility sizes. These can be
463 |   | percentage based, pixels, rems, or any other units. By default
464 |   | we provide a sensible rem based numeric scale plus some other
465 |   | common use-cases. You can, of course, modify these values as
466 |   | needed.
467 |   |
468 |   | Class name: .h-{size}
469 |   |
470 |   */
471 | 
472 |   height: {
473 |     auto: "auto",
474 |     px: "1px",
475 |     "1": "0.25rem",
476 |     "2": "0.5rem",
477 |     "3": "0.75rem",
478 |     "4": "1rem",
479 |     "6": "1.5rem",
480 |     "8": "2rem",
481 |     "10": "2.5rem",
482 |     "12": "3rem",
483 |     "16": "4rem",
484 |     "24": "6rem",
485 |     "32": "8rem",
486 |     "48": "12rem",
487 |     "64": "16rem",
488 |     full: "100%",
489 |     screen: "100vh"
490 |   },
491 | 
492 |   /*
493 |   |-----------------------------------------------------------------------------
494 |   | Minimum width                        https://tailwindcss.com/docs/min-width
495 |   |-----------------------------------------------------------------------------
496 |   |
497 |   | Here is where you define your minimum width utility sizes. These can
498 |   | be percentage based, pixels, rems, or any other units. We provide a
499 |   | couple common use-cases by default. You can, of course, modify
500 |   | these values as needed.
501 |   |
502 |   | Class name: .min-w-{size}
503 |   |
504 |   */
505 | 
506 |   minWidth: {
507 |     "0": "0",
508 |     full: "100%"
509 |   },
510 | 
511 |   /*
512 |   |-----------------------------------------------------------------------------
513 |   | Minimum height                      https://tailwindcss.com/docs/min-height
514 |   |-----------------------------------------------------------------------------
515 |   |
516 |   | Here is where you define your minimum height utility sizes. These can
517 |   | be percentage based, pixels, rems, or any other units. We provide a
518 |   | few common use-cases by default. You can, of course, modify these
519 |   | values as needed.
520 |   |
521 |   | Class name: .min-h-{size}
522 |   |
523 |   */
524 | 
525 |   minHeight: {
526 |     "0": "0",
527 |     full: "100%",
528 |     screen: "100vh"
529 |   },
530 | 
531 |   /*
532 |   |-----------------------------------------------------------------------------
533 |   | Maximum width                        https://tailwindcss.com/docs/max-width
534 |   |-----------------------------------------------------------------------------
535 |   |
536 |   | Here is where you define your maximum width utility sizes. These can
537 |   | be percentage based, pixels, rems, or any other units. By default
538 |   | we provide a sensible rem based scale and a "full width" size,
539 |   | which is basically a reset utility. You can, of course,
540 |   | modify these values as needed.
541 |   |
542 |   | Class name: .max-w-{size}
543 |   |
544 |   */
545 | 
546 |   maxWidth: {
547 |     xs: "20rem",
548 |     sm: "30rem",
549 |     md: "40rem",
550 |     lg: "50rem",
551 |     xl: "60rem",
552 |     "2xl": "70rem",
553 |     "3xl": "80rem",
554 |     "4xl": "90rem",
555 |     "5xl": "100rem",
556 |     full: "100%"
557 |   },
558 | 
559 |   /*
560 |   |-----------------------------------------------------------------------------
561 |   | Maximum height                      https://tailwindcss.com/docs/max-height
562 |   |-----------------------------------------------------------------------------
563 |   |
564 |   | Here is where you define your maximum height utility sizes. These can
565 |   | be percentage based, pixels, rems, or any other units. We provide a
566 |   | couple common use-cases by default. You can, of course, modify
567 |   | these values as needed.
568 |   |
569 |   | Class name: .max-h-{size}
570 |   |
571 |   */
572 | 
573 |   maxHeight: {
574 |     full: "100%",
575 |     screen: "100vh"
576 |   },
577 | 
578 |   /*
579 |   |-----------------------------------------------------------------------------
580 |   | Padding                                https://tailwindcss.com/docs/padding
581 |   |-----------------------------------------------------------------------------
582 |   |
583 |   | Here is where you define your padding utility sizes. These can be
584 |   | percentage based, pixels, rems, or any other units. By default we
585 |   | provide a sensible rem based numeric scale plus a couple other
586 |   | common use-cases like "1px". You can, of course, modify these
587 |   | values as needed.
588 |   |
589 |   | Class name: .p{side?}-{size}
590 |   |
591 |   */
592 | 
593 |   padding: {
594 |     px: "1px",
595 |     "0": "0",
596 |     "1": "0.25rem",
597 |     "2": "0.5rem",
598 |     "3": "0.75rem",
599 |     "4": "1rem",
600 |     "6": "1.5rem",
601 |     "8": "2rem"
602 |   },
603 | 
604 |   /*
605 |   |-----------------------------------------------------------------------------
606 |   | Margin                                  https://tailwindcss.com/docs/margin
607 |   |-----------------------------------------------------------------------------
608 |   |
609 |   | Here is where you define your margin utility sizes. These can be
610 |   | percentage based, pixels, rems, or any other units. By default we
611 |   | provide a sensible rem based numeric scale plus a couple other
612 |   | common use-cases like "1px". You can, of course, modify these
613 |   | values as needed.
614 |   |
615 |   | Class name: .m{side?}-{size}
616 |   |
617 |   */
618 | 
619 |   margin: {
620 |     px: "1px",
621 |     "0": "0",
622 |     "1": "0.25rem",
623 |     "2": "0.5rem",
624 |     "3": "0.75rem",
625 |     "4": "1rem",
626 |     "6": "1.5rem",
627 |     "8": "2rem"
628 |   },
629 | 
630 |   /*
631 |   |-----------------------------------------------------------------------------
632 |   | Negative margin                https://tailwindcss.com/docs/negative-margin
633 |   |-----------------------------------------------------------------------------
634 |   |
635 |   | Here is where you define your negative margin utility sizes. These can
636 |   | be percentage based, pixels, rems, or any other units. By default we
637 |   | provide matching values to the padding scale since these utilities
638 |   | generally get used together. You can, of course, modify these
639 |   | values as needed.
640 |   |
641 |   | Class name: .-m{side?}-{size}
642 |   |
643 |   */
644 | 
645 |   negativeMargin: {
646 |     px: "1px",
647 |     "0": "0",
648 |     "1": "0.25rem",
649 |     "2": "0.5rem",
650 |     "3": "0.75rem",
651 |     "4": "1rem",
652 |     "6": "1.5rem",
653 |     "8": "2rem"
654 |   },
655 | 
656 |   /*
657 |   |-----------------------------------------------------------------------------
658 |   | Shadows                                https://tailwindcss.com/docs/shadows
659 |   |-----------------------------------------------------------------------------
660 |   |
661 |   | Here is where you define your shadow utilities. As you can see from
662 |   | the defaults we provide, it's possible to apply multiple shadows
663 |   | per utility using comma separation.
664 |   |
665 |   | If a `default` shadow is provided, it will be made available as the non-
666 |   | suffixed `.shadow` utility.
667 |   |
668 |   | Class name: .shadow-{size?}
669 |   |
670 |   */
671 | 
672 |   shadows: {
673 |     default: "0 2px 4px 0 rgba(0,0,0,0.10)",
674 |     md: "0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)",
675 |     lg: "0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)",
676 |     inner: "inset 0 2px 4px 0 rgba(0,0,0,0.06)",
677 |     none: "none"
678 |   },
679 | 
680 |   /*
681 |   |-----------------------------------------------------------------------------
682 |   | Z-index                                https://tailwindcss.com/docs/z-index
683 |   |-----------------------------------------------------------------------------
684 |   |
685 |   | Here is where you define your z-index utility values. By default we
686 |   | provide a sensible numeric scale. You can, of course, modify these
687 |   | values as needed.
688 |   |
689 |   | Class name: .z-{index}
690 |   |
691 |   */
692 | 
693 |   zIndex: {
694 |     auto: "auto",
695 |     "0": 0,
696 |     "10": 10,
697 |     "20": 20,
698 |     "30": 30,
699 |     "40": 40,
700 |     "50": 50
701 |   },
702 | 
703 |   /*
704 |   |-----------------------------------------------------------------------------
705 |   | Opacity                                https://tailwindcss.com/docs/opacity
706 |   |-----------------------------------------------------------------------------
707 |   |
708 |   | Here is where you define your opacity utility values. By default we
709 |   | provide a sensible numeric scale. You can, of course, modify these
710 |   | values as needed.
711 |   |
712 |   | Class name: .opacity-{name}
713 |   |
714 |   */
715 | 
716 |   opacity: {
717 |     "0": "0",
718 |     "25": ".25",
719 |     "50": ".5",
720 |     "75": ".75",
721 |     "100": "1"
722 |   },
723 | 
724 |   /*
725 |   |-----------------------------------------------------------------------------
726 |   | Packages
727 |   |-----------------------------------------------------------------------------
728 |   |
729 |   | Here is where you can define the configuration for any Tailwind packages
730 |   | you're using. These can be utility packs, component bundles, or even
731 |   | complete themes. You'll want to reference each package's
732 |   | documentation for a list of settings available for it.
733 |   |
734 |   */
735 | 
736 |   packages: {}
737 | };
738 | 


--------------------------------------------------------------------------------
/yarn-error.log:
--------------------------------------------------------------------------------
 1 | Arguments: 
 2 |   C:\Program Files\nodejs\node.exe C:\Program Files (x86)\Yarn\bin\yarn.js init
 3 | 
 4 | PATH: 
 5 |   C:\Users\Sean\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\local\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\Sean\bin;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\Intel\WiFi\bin;C:\Program Files\Common Files\Intel\WirelessCommon;C:\Program Files\Git\cmd;C:\xampp\php;C:\composer;C:\VVV\vv\vv;C:\Program Files (x86)\Yarn\bin;C:\ProgramData\chocolatey\bin;C:\Program Files\nodejs;C:\HashiCorp\Vagrant\bin;C:\tools\php72;C:\ProgramData\ComposerSetup\bin;C:\Program Files\PuTTY;C:\RailsInstaller\Git\cmd;C:\RailsInstaller\Ruby2.3.3\bin;C:\Users\Sean\AppData\Local\Programs\Python\Python36-32\Scripts;C:\Users\Sean\AppData\Local\Programs\Python\Python36-32;C:\Ruby23-x64\bin;C:\Users\Sean\Downloads\phantomjs-2.1.1-windows\bin;C:\Users\Sean\AppData\Local\Microsoft\WindowsApps;C:\Python27;C:\Program Files\Heroku\bin;C:\Program Files\MongoDB\Server\3.4\bin;C:\Program Files\Sublime Text 3;C:\Users\Sean\AppData\Roaming\Composer\vendor\bin;C:\composer;C:\Users\Sean\AppData\Local\Yarn\bin;C:\Program Files\Microsoft VS Code\bin;C:\Users\Sean\AppData\Local\Microsoft\WindowsApps;C:\gocode\bin;C:\phantomjs-2.1.1-windows\bin\phantonjs.exe;C:\Users\Sean\AppData\Roaming\npm\node_modules\casperjs\bin\casperjs;C:\Users\Sean\AppData\Roaming\npm;C:\mysql-shell-1.0.11-windows-x86-32bit\bin;C:\tools\mysql\current\bin;C:\ngrok;C:\Program Files\Git\usr\bin\vendor_perl;C:\Program Files\Git\usr\bin\core_perl
 6 | 
 7 | Yarn version: 
 8 |   1.1.0
 9 | 
10 | Node version: 
11 |   8.9.4
12 | 
13 | Platform: 
14 |   win32 x64
15 | 
16 | npm manifest: 
17 |   No manifest
18 | 
19 | yarn manifest: 
20 |   No manifest
21 | 
22 | Lockfile: 
23 |   No lockfile
24 | 
25 | Trace: 
26 |   Error: Can't answer a question unless a user TTY
27 |       at ConsoleReporter.question (C:\Program Files (x86)\Yarn\lib\cli.js:86923:59)
28 |       at Object.<anonymous> (C:\Program Files (x86)\Yarn\lib\cli.js:81471:38)
29 |       at Generator.next (<anonymous>)
30 |       at step (C:\Program Files (x86)\Yarn\lib\cli.js:92:30)
31 |       at C:\Program Files (x86)\Yarn\lib\cli.js:103:13
32 |       at <anonymous>
33 | 


--------------------------------------------------------------------------------