├── .prettierrc
├── public
    └── favicon.ico
├── styles.css
├── pages
    ├── _app.js
    └── index.js
├── README.md
├── .gitignore
├── postcss.config.js
├── package.json
├── LICENSE
└── components
    └── nav.js


/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/statickit-projects/next-js-tailwind/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | /* purgecss start ignore */
2 | @tailwind base;
3 | @tailwind components;
4 | /* purgecss end ignore */
5 | 
6 | @tailwind utilities;
7 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles.css';
2 | 
3 | function App({ Component, pageProps }) {
4 |   return <Component {...pageProps} />;
5 | }
6 | 
7 | export default App;
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Next.js + Tailwind Starter Project
 2 | 
 3 | A bare Next.js project with Tailwind CSS installed.
 4 | 
 5 | [**Check out the guide →**](https://statickit.com/guides/next-js-tailwind)
 6 | 
 7 | ## Usage
 8 | 
 9 | To run this code:
10 | 
11 | ```
12 | git clone https://github.com/unstacked/next-js-tailwind.git
13 | cd next-js-tailwind
14 | npm install
15 | npm run dev
16 | ```
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | .env*
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: {
 3 |     tailwindcss: {},
 4 |     autoprefixer: {},
 5 |     ...(process.env.NODE_ENV === 'production'
 6 |       ? {
 7 |           '@fullhuman/postcss-purgecss': {
 8 |             content: ['./components/**/*.js', './pages/**/*.js'],
 9 |             defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
10 |           }
11 |         }
12 |       : {})
13 |   }
14 | };
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-js-tailwind",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "next": "^9.3.2",
12 |     "react": "16.9.0",
13 |     "react-dom": "16.9.0"
14 |   },
15 |   "devDependencies": {
16 |     "@fullhuman/postcss-purgecss": "^2.0.6",
17 |     "autoprefixer": "^9.7.4",
18 |     "tailwindcss": "^1.1.4"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Level Technologies, LLC
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/components/nav.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'next/link'
 3 | 
 4 | const links = [
 5 |   { href: 'https://zeit.co/now', label: 'ZEIT' },
 6 |   { href: 'https://github.com/zeit/next.js', label: 'GitHub' }
 7 | ].map(link => {
 8 |   link.key = `nav-link-${link.href}-${link.label}`
 9 |   return link
10 | })
11 | 
12 | const Nav = () => (
13 |   <nav>
14 |     <ul>
15 |       <li>
16 |         <Link href='/'>
17 |           <a>Home</a>
18 |         </Link>
19 |       </li>
20 |       {links.map(({ key, href, label }) => (
21 |         <li key={key}>
22 |           <a href={href}>{label}</a>
23 |         </li>
24 |       ))}
25 |     </ul>
26 | 
27 |     <style jsx>{`
28 |       :global(body) {
29 |         margin: 0;
30 |         font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir,
31 |           Helvetica, sans-serif;
32 |       }
33 |       nav {
34 |         text-align: center;
35 |       }
36 |       ul {
37 |         display: flex;
38 |         justify-content: space-between;
39 |       }
40 |       nav > ul {
41 |         padding: 4px 16px;
42 |       }
43 |       li {
44 |         display: flex;
45 |         padding: 6px 8px;
46 |       }
47 |       a {
48 |         color: #067df7;
49 |         text-decoration: none;
50 |         font-size: 13px;
51 |       }
52 |     `}</style>
53 |   </nav>
54 | )
55 | 
56 | export default Nav
57 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Link from 'next/link';
 3 | import Head from 'next/head';
 4 | import Nav from '../components/nav';
 5 | 
 6 | const Home = () => (
 7 |   <div>
 8 |     <Head>
 9 |       <title>Home</title>
10 |     </Head>
11 | 
12 |     <Nav />
13 | 
14 |     <div className="hero">
15 |       <h1 className="title">Welcome to Next.js!</h1>
16 |       <p className="description">
17 |         To get started, edit <code>pages/index.js</code> and save to reload.
18 |       </p>
19 | 
20 |       <div className="row">
21 |         <Link href="https://github.com/zeit/next.js#setup">
22 |           <a className="card">
23 |             <h3>Getting Started &rarr;</h3>
24 |             <p>Learn more about Next.js on GitHub and in their examples.</p>
25 |           </a>
26 |         </Link>
27 |         <Link href="https://github.com/zeit/next.js/tree/master/examples">
28 |           <a className="card">
29 |             <h3>Examples &rarr;</h3>
30 |             <p>Find other example boilerplates on the Next.js GitHub.</p>
31 |           </a>
32 |         </Link>
33 |         <Link href="https://github.com/zeit/next.js">
34 |           <a className="card">
35 |             <h3>Create Next App &rarr;</h3>
36 |             <p>Was this tool helpful? Let us know how we can improve it!</p>
37 |           </a>
38 |         </Link>
39 |       </div>
40 |     </div>
41 | 
42 |     <style jsx>{`
43 |       .hero {
44 |         width: 100%;
45 |         color: #333;
46 |       }
47 |       .title {
48 |         margin: 0;
49 |         width: 100%;
50 |         padding-top: 80px;
51 |         line-height: 1.15;
52 |         font-size: 48px;
53 |       }
54 |       .title,
55 |       .description {
56 |         text-align: center;
57 |       }
58 |       .row {
59 |         max-width: 880px;
60 |         margin: 80px auto 40px;
61 |         display: flex;
62 |         flex-direction: row;
63 |         justify-content: space-around;
64 |       }
65 |       .card {
66 |         padding: 18px 18px 24px;
67 |         width: 220px;
68 |         text-align: left;
69 |         text-decoration: none;
70 |         color: #434343;
71 |         border: 1px solid #9b9b9b;
72 |       }
73 |       .card:hover {
74 |         border-color: #067df7;
75 |       }
76 |       .card h3 {
77 |         margin: 0;
78 |         color: #067df7;
79 |         font-size: 18px;
80 |       }
81 |       .card p {
82 |         margin: 0;
83 |         padding: 12px 0 0;
84 |         font-size: 13px;
85 |         color: #333;
86 |       }
87 |     `}</style>
88 |   </div>
89 | );
90 | 
91 | export default Home;
92 | 


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