Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shimotaroo/next-typescirpt-tailwindcss-template
Next.js+TypeScript+Tailwind CSSのテンプレート（Vercelにデプロイ済）
https://github.com/shimotaroo/next-typescirpt-tailwindcss-template
nextjs react tailwindcss typescript vercel
Last synced: 26 days ago
JSON representation
Next.js+TypeScript+Tailwind CSSのテンプレート（Vercelにデプロイ済）
- Host: GitHub
- URL: https://github.com/shimotaroo/next-typescirpt-tailwindcss-template
- Owner: shimotaroo
- Created: 2021-11-01T15:26:33.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-21T07:44:21.000Z (over 3 years ago)
- Last Synced: 2024-11-25T09:45:31.941Z (3 months ago)
- Topics: nextjs, react, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage: https://next-type-scirpt-tailwind-css-template.vercel.app/
- Size: 206 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js + TypeScript + Tailwind CSS Template
## support
- M1 Mac
## start development server
```sh
yarn dev
```
access to http://localhost:3000/
## environment construction procedure
### create project of Next.js + TypeScript
execute the command
```sh
# yarn
yarn create next-app next-ts-tailwind --typescript
# npm
npx create-next-app@latest --ts
```
reference: https://nextjs.org/docs/basic-features/typescript
### introduction Tailwind CSS
execute the command
```sh
# yarn
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
# npm
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```
reference: https://fwywd.com/tech/next-tailwind
### create config file of Tailwind CSS
execute the command
```sh
# yarn
yarn tailwindcss init -p
# npm
npx tailwindcss init -p
```
reference: https://fwywd.com/tech/next-tailwind
### edit tailwind.config
add the code
```diff
module.exports = {
+ mode: 'jit',
- purge: [],
+ purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
```
reference: https://fwywd.com/tech/next-tailwind
### make Tailwind CSS apply globally
edit `pages/_app.tsx`
```diff
- import '../styles/globals.css'
+ import 'tailwindcss/tailwind.css';
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return
}
export default MyApp
```