Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
taichi-t committed Jul 25, 2021
1 parent f90ea9b commit 0a30b9a
Showing 1 changed file with 21 additions and 42 deletions.
63 changes: 21 additions & 42 deletions README.md
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/

0 comments on commit 0a30b9a

Please sign in to comment.