Created tailwind and typescript starter

vercel · Dec 24, 2021 · 5585bf2 · 5585bf2
1 parent 6b86653
commit 5585bf2
Show file tree

Hide file tree

Showing 16 changed files with 276 additions and 0 deletions.
diff --git a/examples/with-typescript-tailwind/.eslintrc.json b/examples/with-typescript-tailwind/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/examples/with-typescript-tailwind/.gitignore b/examples/with-typescript-tailwind/.gitignore
@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
diff --git a/examples/with-typescript-tailwind/README.md b/examples/with-typescript-tailwind/README.md
@@ -0,0 +1,75 @@
+
+<p  align="center">
+
+<img  src="https://res.cloudinary.com/ddcg0rzlo/image/upload/v1640340715/nextjs-tailwind-typescript-banner_vslgq4.png"  alt="Next.js TypeScript Starter">
+
+</p>
+
+
+
+<br />
+
+
+
+<div  align="center"><strong>TypeScript with Tailwind starter for Next.js</strong></div>
+
+
+
+<br />
+
+
+
+## Features
+
+
+
+- ⚡️ Next.js 12
+
+- ⚛️ React 17
+
+- ⛑ TypeScript
+- <img src="https://res.cloudinary.com/ddcg0rzlo/image/upload/v1640341222/tailwindcss_nzwqt7.svg" width="" height="16" />
+- 📏 ESLint — Find and fix problems in your code
+
+
+## Quick Start
+
+
+
+The best way to start with this template is using [Create Next App](https://nextjs.org/docs/api-reference/create-next-app).
+
+
+
+```
+
+npx create-next-app --example with-typescript-tailwind with-typescript-tailwind-app
+
+or
+
+yarn create next-app --example with-typescript-tailwind with-typescript-tailwind-app
+
+```
+
+
+
+### Development
+
+
+
+To start the project locally, run:
+
+
+
+```bash
+
+yarn dev
+
+```
+
+
+
+Open `http://localhost:3000` with your browser to see the result.
+
+
+
+
diff --git a/examples/with-typescript-tailwind/components/Seo.tsx b/examples/with-typescript-tailwind/components/Seo.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import Head from "next/head";
+interface Props {
+  data: any
+}
+function SEO({ data }: Props) {
+  return (
+    <Head>
+      <title>{data.title}</title>
+      <meta name="title" content={data.title} />
+      <meta name="author" content="Hanzla Tauqeer" />
+      <meta name="description" content={data.description} />
+      <meta name="keywords" content={data.keywords.join(", ")} />
+      <link rel="canonical" href={data.url} />
+      {/* Open Graph / Facebook */}
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content={data.url} />
+      <meta property="og:title" content={data.title} />
+      <meta property="og:description" content={data.description} />
+      <meta property="og:image" content={data.image} />
+      <meta property="og:site_name" content={data.title} />
+      {/* Twitter */}
+      <meta property="twitter:card" content="summary_large_image" />
+      <meta property="twitter:url" content={data.url} />
+      <meta property="twitter:title" content={data.title} />
+      <meta property="twitter:description" content={data.description} />
+      <meta property="twitter:image" content={data.image} />
+      <meta name="robots" content="Index" />
+      <link rel="manifest" href="/manifest.json" />
+      {/* Favicon */}
+      <link rel="apple-touch-icon" sizes="120x120" href="./favicon.png" />
+      <link rel="icon" type="image/png" sizes="32x32" href="./favicon.png" />
+      <link rel="icon" type="image/png" sizes="16x16" href="./favicon.png" />
+      <script
+        async
+        src="https://code.iconify.design/1/1.0.4/iconify.min.js"
+      ></script>
+    </Head>
+  );
+}
+
+export default SEO;
diff --git a/examples/with-typescript-tailwind/next-env.d.ts b/examples/with-typescript-tailwind/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
diff --git a/examples/with-typescript-tailwind/next.config.js b/examples/with-typescript-tailwind/next.config.js
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  reactStrictMode: true,
+}
diff --git a/examples/with-typescript-tailwind/package.json b/examples/with-typescript-tailwind/package.json
@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "12.0.7",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.4",
+    "@types/react": "17.0.38",
+    "autoprefixer": "^10.4.0",
+    "eslint": "8.5.0",
+    "eslint-config-next": "12.0.7",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.7",
+    "typescript": "4.5.4"
+  }
+}
diff --git a/examples/with-typescript-tailwind/pages/_app.tsx b/examples/with-typescript-tailwind/pages/_app.tsx
@@ -0,0 +1,8 @@
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
diff --git a/examples/with-typescript-tailwind/pages/api/hello.ts b/examples/with-typescript-tailwind/pages/api/hello.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
diff --git a/examples/with-typescript-tailwind/pages/index.tsx b/examples/with-typescript-tailwind/pages/index.tsx
@@ -0,0 +1,25 @@
+/* eslint-disable @next/next/link-passhref */
+import Link from 'next/link';
+import * as React from 'react';
+
+export default function Home() {
+  return (
+      <main className="flex justify-center items-center w-full h-full">
+        <section className='bg-white flex justify-center items-center w-full'>
+          <div className=' flex flex-col text-3xl justify-center font-bold items-center min-h-screen text-center'>
+            <h1 className='text-4xl'>Next.js + Tailwind CSS + TypeScript Starter</h1>
+            <p className='mt-2 text-xl text-gray-800'>
+              A starter for Next.js, Tailwind CSS, and TypeScript with Seo.
+            </p>
+            <p className='mt-[1rem] text-lg '>
+              <Link href='https://github.com/Cyphen12/tailwind-typescript-starter'>
+                <span className='bg-green-400 p-2  text-black/70 rounded font-bold shadow-xl '>
+                See the repository
+                </span>
+              </Link>
+            </p>
+          </div>
+        </section>
+      </main>
+  );
+}
diff --git a/examples/with-typescript-tailwind/postcss.config.js b/examples/with-typescript-tailwind/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/examples/with-typescript-tailwind/public/favicon.ico b/examples/with-typescript-tailwind/public/favicon.ico
diff --git a/examples/with-typescript-tailwind/public/vercel.svg b/examples/with-typescript-tailwind/public/vercel.svg
diff --git a/examples/with-typescript-tailwind/styles/globals.css b/examples/with-typescript-tailwind/styles/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/examples/with-typescript-tailwind/tailwind.config.js b/examples/with-typescript-tailwind/tailwind.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  purge: { enabled: true, content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],},
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/examples/with-typescript-tailwind/tsconfig.json b/examples/with-typescript-tailwind/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}