├── .gitignore
├── LICENSE
├── README.md
├── components
    └── component.tsx
├── next-env.d.ts
├── next.config.js
├── now.json
├── package-lock.json
├── package.json
├── pages
    ├── _document.tsx
    └── index.tsx
├── postcss.config.js
├── public
    ├── favicon.ico
    ├── robots.txt
    └── static
    │   ├── icon-192.png
    │   ├── icon-512.png
    │   └── manifest.json
├── styles
    └── index.css
├── tailwind.config.js
├── tsconfig.json
└── tslint.json


/.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 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | # next
26 | /.next


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 xDecus
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | A ready-to-go starter for creating Single Page Applications with React, Next.js, Typescript and Tailwind.css
 2 | 
 3 | Readily configured to purge unneeded tailwind styles when building for production.
 4 | 
 5 | Fully supports the PWA standard and installs a service worker when conditions are met.
 6 | 
 7 | Scores 100 in every lighthouse audit.
 8 | 
 9 | Preconfigured to be deployed to Zeit Now (also with PWA support there!)
10 | 
11 | Have fun!
12 | 


--------------------------------------------------------------------------------
/components/component.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | export default function Component() {
4 |   return <div />;
5 | }
6 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/types/global" />
3 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | const withCSS = require("@zeit/next-css");
 2 | const withOffline = require("next-offline");
 3 | const withPlugins = require("next-compose-plugins");
 4 | 
 5 | module.exports = withPlugins([
 6 |   [withCSS],
 7 |   [
 8 |     withOffline,
 9 |     {
10 |       target: "serverless",
11 |       transformManifest: manifest => ["/"].concat(manifest), // add the homepage to the cache
12 |       workboxOpts: {
13 |         swDest: "static/service-worker.js",
14 |         runtimeCaching: [
15 |           {
16 |             urlPattern: /^https?.*/,
17 |             handler: "NetworkFirst",
18 |             options: {
19 |               cacheName: "https-calls",
20 |               networkTimeoutSeconds: 15,
21 |               expiration: {
22 |                 maxEntries: 150,
23 |                 maxAgeSeconds: 30 * 24 * 60 * 60 // 1 month
24 |               },
25 |               cacheableResponse: {
26 |                 statuses: [0, 200]
27 |               }
28 |             }
29 |           }
30 |         ]
31 |       }
32 |     }
33 |   ]
34 | ]);
35 | 


--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": 2,
 3 |   "routes": [
 4 |     {
 5 |       "src": "^/service-worker.js$",
 6 |       "dest": "/_next/static/service-worker.js",
 7 |       "headers": {
 8 |         "cache-control": "public, max-age=43200, immutable",
 9 |         "Service-Worker-Allowed": "/"
10 |       }
11 |     }
12 |   ],
13 |   "builds": [
14 |     {
15 |       "src": "next.config.js",
16 |       "use": "@now/next"
17 |     }
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-tailwind-typescript-starter",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "next",
 8 |     "build": "next build",
 9 |     "start": "next start"
10 |   },
11 |   "keywords": [],
12 |   "author": "xDecus",
13 |   "license": "MIT",
14 |   "dependencies": {
15 |     "@zeit/next-css": "^1.0.1",
16 |     "next": "^9.1.3",
17 |     "next-compose-plugins": "^2.2.0",
18 |     "next-offline": "^4.0.6",
19 |     "react": "^16.11.0",
20 |     "react-dom": "^16.11.0"
21 |   },
22 |   "devDependencies": {
23 |     "@fullhuman/postcss-purgecss": "^1.3.0",
24 |     "@types/node": "^12.12.7",
25 |     "@types/react": "^16.9.11",
26 |     "@types/react-dom": "^16.9.4",
27 |     "postcss-preset-env": "^6.7.0",
28 |     "tailwindcss": "^1.1.3",
29 |     "tslint": "^5.20.1",
30 |     "tslint-react": "^4.1.0",
31 |     "typescript": "^3.7.2"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import Document, { Head, Html, Main, NextScript } from "next/document";
 2 | 
 3 | export default class DefaultDocument extends Document {
 4 |     public render() {
 5 |         return (
 6 |             <Html lang="en">
 7 |                 <Head />
 8 |                 <body>
 9 |                     <Main />
10 |                     <NextScript />
11 |                 </body>
12 |             </Html>
13 |         );
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import "../styles/index.css";
 2 | 
 3 | import { NextPage } from "next";
 4 | import Head from "next/head";
 5 | 
 6 | const Home: NextPage = () => (
 7 |   <div>
 8 |     <Head>
 9 |       <title>Next.js Starter</title>
10 |       <link rel="manifest" href="/static/manifest.json" />
11 |       <meta name="theme-color" content="#72B340" />
12 |       <meta
13 |         name="description"
14 |         content="A quick starter Template for Next.js with Tailwind CSS and Typescript"
15 |       />
16 |     </Head>
17 |     <div className="p-4 shadow rounded bg-white">
18 |       <h1 className="text-purple-700 text-3xl ">Next.js</h1>
19 |       <p className="text-gray-800">with Tailwind CSS and Typescript</p>
20 |       <p className="text-gray-800">Made with ♥ by me at</p>
21 |       <a
22 |         className="text-purple-600 hover:text-purple-400"
23 |         href="https://github.com/xDecus"
24 |         target="blank"
25 |       >
26 |         https://github.com/xDecus
27 |       </a>
28 |     </div>
29 |   </div>
30 | );
31 | 
32 | export default Home;
33 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | const purgecss = require("@fullhuman/postcss-purgecss")({
 2 |   // Specify the paths to all of the template files in your project
 3 |   content: [
 4 |     "./pages/**/*.tsx",
 5 |     "./styles/**/*.css"
 6 |     // etc.
 7 |   ],
 8 | 
 9 |   // Include any special characters you're using in this regular expression
10 |   defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
11 | });
12 | 
13 | module.exports = {
14 |   plugins: [
15 |     require("tailwindcss"),
16 |     require("postcss-preset-env"),
17 |     ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
18 |   ]
19 | };
20 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skolldev/nextjs-tailwind-typescript-starter/a34f4667e437f1e5f1042044e50f70aa28a8f2cd/public/favicon.ico


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | 


--------------------------------------------------------------------------------
/public/static/icon-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skolldev/nextjs-tailwind-typescript-starter/a34f4667e437f1e5f1042044e50f70aa28a8f2cd/public/static/icon-192.png


--------------------------------------------------------------------------------
/public/static/icon-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skolldev/nextjs-tailwind-typescript-starter/a34f4667e437f1e5f1042044e50f70aa28a8f2cd/public/static/icon-512.png


--------------------------------------------------------------------------------
/public/static/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Next JS Starter Template",
 3 |   "short_name": "Next JS",
 4 |   "icons": [
 5 |     {
 6 |       "src": "/static/icon-192.png",
 7 |       "type": "image/png",
 8 |       "sizes": "192x192"
 9 |     },
10 |     {
11 |       "src": "/static/icon-512.png",
12 |       "type": "image/png",
13 |       "sizes": "512x512"
14 |     }
15 |   ],
16 |   "background_color": "#FFFFFF",
17 |   "description": "Portfolio Page",
18 |   "display": "fullscreen",
19 |   "start_url": "/",
20 |   "theme_color": "#000"
21 | }
22 | 


--------------------------------------------------------------------------------
/styles/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 
5 | body {
6 |   @apply bg-gray-200 p-12;
7 | }
8 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   theme: {
3 |     extend: {}
4 |   },
5 |   variants: {},
6 |   plugins: []
7 | }
8 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve"
16 |   },
17 |   "exclude": ["node_modules"],
18 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
19 | }
20 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["tslint:recommended", "tslint-react"],
 3 |   "rules": {
 4 |     "trailing-comma": false,
 5 |     "arrow-parens": false,
 6 |     "object-literal-sort-keys": false,
 7 |     "jsx-no-multiline-js": false,
 8 |     "jsx-boolean-value": false
 9 |   }
10 | }
11 | 


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