This example shows how to use Tailwind CSS (v2.1) with Next.js. It follows the steps outlined in the official Tailwind docs.
It uses the new Just-in-Time Mode for Tailwind CSS.
Deploy the example using Vercel:
Execute create-next-app with npm or Yarn to bootstrap the example:
npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-appDeploy it to the cloud with Vercel (Documentation).
> yarn create next-app --example with-tailwindcss online-classroom
yarn create v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "[email protected]" with binaries:
- create-next-app
Creating a new Next.js app in /Volumes/ROBERTO-CD2/Dev/Projetos/clouds/aws/online-classroom.
Downloading files for example with-tailwindcss. This might take a moment.
Installing packages. This might take a couple of minutes.
yarn install v1.22.10
info No lockfile found.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 77.20s.
Initialized a git repository.
Success! Created online-classroom at /Volumes/ROBERTO-CD2/Dev/Projetos/clouds/aws/online-classroom
Inside that directory, you can run several commands:
yarn dev
Starts the development server.
yarn build
Builds the app for production.
yarn start
Runs the built app in production mode.
We suggest that you begin by typing:
cd online-classroom
yarn dev
✨ Done in 85.59s.Criar o arquivos: tsconfig.json
> yarn add --dev typescript @types/react
yarn add v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
├─ @types/[email protected]
└─ [email protected]
info All dependencies
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
└─ [email protected]
✨ Done in 80.56s.
git init
git add .
git commit -m "Start Project"
git remote add origin https://github.com/optydeviocourses/online-classroom.git
git branch -M main
git push -u origin main
- Configuração:
mongodb+srv://teach-other:<password>@optydev-io-courses.nffnz.mongodb.net/test
- Instalação
> yarn add mongodb
> yarn add -D @types/mongodb
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent