-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
21 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,50 +1,29 @@ | ||
# Tailwind CSS example | ||
# Portfolio | ||
|
||
This is an example of using [Tailwind CSS](https://tailwindcss.com) in a Next.js project. | ||
My portfolio website made of Next.js(React). | ||
|
||
## Deploy your own | ||
<img width="100%" alt="Screen Shot 2021-07-24 at 18 43 15" src="https://user-images.githubusercontent.com/54035518/126884976-ad5789a8-4d15-4827-95b1-6544fa881d7d.png"> | ||
|
||
Deploy the example using [Vercel](https://vercel.com): | ||
## Technologies | ||
|
||
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss) | ||
### Languege/Libraries | ||
- Next.js(React) | ||
- TypeScript | ||
- TailwindCSS | ||
- Jest | ||
|
||
## How to use | ||
### Test tool | ||
- Jest | ||
|
||
### Using `create-next-app` | ||
### Format/Lint tools | ||
- ESLint | ||
- Prettier | ||
|
||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: | ||
## Features | ||
- i18n | ||
- Dark Mode | ||
- Reduced critical rendering paths by SSG | ||
- Installed PWA to avoid loading a bundle file every reloads | ||
|
||
```bash | ||
npx create-next-app --example with-tailwindcss with-tailwindcss-app | ||
# or | ||
yarn create next-app --example with-tailwindcss with-tailwindcss-app | ||
``` | ||
|
||
### Download manually | ||
|
||
Download the example: | ||
|
||
```bash | ||
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-tailwindcss | ||
cd with-tailwindcss | ||
``` | ||
|
||
Install it and run: | ||
|
||
```bash | ||
npm install | ||
npm run dev | ||
# or | ||
yarn | ||
yarn dev | ||
``` | ||
|
||
Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). | ||
|
||
## Notes | ||
|
||
This example is a basic starting point for using [Tailwind CSS](https://tailwindcss.com) with Next.js. It includes the following [PostCSS](https://github.com/postcss/postcss) plugins: | ||
|
||
- [postcss-preset-env](https://preset-env.cssdb.org/) - Adds stage 2+ features and autoprefixes | ||
|
||
To control the generated stylesheet's filesize, this example uses Tailwind CSS' [`purge` option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) to remove unused CSS. | ||
## Link | ||
- https://taichi-tsujioka.info/ |