├── .gitignore
├── README.md
├── components
├── CardPost.js
├── Container.js
├── FeaturedPost.js
├── Footer.js
├── InfoPost.js
├── Layout.js
├── Navbar.js
├── PostAuthor.js
├── PostMetaTitle.js
└── SectionHeader.js
├── jsconfig.json
├── package.json
├── pages
├── _app.js
├── _document.js
├── api
│ └── hello.js
├── detail.js
├── index.js
└── posts.js
├── postcss.config.js
├── public
├── author-1.png
├── author-2.png
├── author-3.png
├── author-4.png
├── detail-image.png
├── favicon.ico
├── featured-thumbnail.png
├── thumbnail-2.png
├── thumbnail-3.png
├── thumbnail-4.png
├── thumbnail-5.png
├── thumbnail-6.png
├── thumbnail-7.png
└── vercel.svg
├── tailwind.config.js
├── utils
└── posts.json
└── yarn.lock
/.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 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Next.js + Tailwind CSS Example
2 |
3 | This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v2.2)](https://blog.tailwindcss.com/tailwindcss-2-2) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
4 |
5 | It uses the new [`Just-in-Time Mode`](https://tailwindcss.com/docs/just-in-time-mode) for Tailwind CSS.
6 |
7 | ## Preview
8 |
9 | Preview the example live on [StackBlitz](http://stackblitz.com/):
10 |
11 | [](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss)
12 |
13 | ## Deploy your own
14 |
15 | Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
16 |
17 | [](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss)
18 |
19 | ## How to use
20 |
21 | 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:
22 |
23 | ```bash
24 | npx create-next-app --example with-tailwindcss with-tailwindcss-app
25 | # or
26 | yarn create next-app --example with-tailwindcss with-tailwindcss-app
27 | ```
28 |
29 | Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
30 |
--------------------------------------------------------------------------------
/components/CardPost.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import InfoPost from '@components/InfoPost';
3 |
4 | export default function CardPost({ thumbnail, ...infoPost }) {
5 | return (
6 |
10 |
11 |
12 |
21 | {shortDescription} 22 |
23 |32 | Male sixth sea it a. Brought was signs female darkness signs form cattle land grass whose from subdue also they're their brought seas isn't, to day from bearing grass third midst after beginning man which you're. Dry, gathering beginning given made them evening. 33 |
34 |Lights dry. Thing, likeness, forth shall replenish upon abundantly our green. Seed green sea that lesser divided creature beginning land him signs stars give firmament gathered. Wherein there their morning a he grass. Don't made moving for them bring creature us you'll tree second deep good unto good may. Us yielding.
35 |Have. Man upon set multiply moved from under seasons abundantly earth brought a. They're open moved years saw isn't morning darkness. Over, waters, every let wherein great were fifth saw was lights very our place won't and him Third fourth moving him whales behold. Beast second stars lights great was don't green give subdue his. Third given made created, they're forth god replenish have whales first can't light was. Herb you'll them beast kind divided. Were beginning fly air multiply god Yielding sea don't were forth.
36 |We couldn’t find any posts with the keyword `yahahahayuk`. Please try another keyword.
23 |