1. Set up the Next.js project
First, create-next-app use the command to create a codebase from the Next.js template.
npx create-next-app nextjs-ts-tailwind-example --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/basics-final"
When the command is completed, the code of Next.js is generated, so move the directory and check the operation.
cd nextjs-ts-tailwind-example
npm run dev
2. Set up typescript
create config files for typescript
touch tsconfig.json next-env.d.ts
Install the packages needed to run TypeScript.
npm install --save-dev typescript @types/react @types/node
add to the Typescript config file
//tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
add to the next-env.d.ts config file
/// <reference types="next" />
/// <reference types="next/types/global" />
Next, rewrite various js files to ts files by referring to the following repository.
mv components/date.js components/date.tsx
mv components/layout.js components/layout.tsx
mv lib/posts.js lib/posts.ts
mv pages/_app.js pages/_app.tsx
mv pages/index.js pages/index.tsx
mv 'pages/posts/[id].js' 'pages/posts/[id].tsx'
mv pages/api/hello.js pages/api/hello.ts
After rewriting, check the operation.
npm run dev
Check the operation with a browser and it is OK if it works without error.
3. Set up Tailwind css
npm install tailwindcss@latest postcss@latest autoprefixer@latest
generate a Tailwind CSS configuration file.
npx tailwindcss init -p
Then, tailwind.config.js the postcss.config.js two files will be generated.
//tailwind.config.js
module.exports = {
purge: [], //remove this line
purge: ['./components/**/*.tsx', './pages/**/*.tsx','./public/**/*.html'], //add this line
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
//postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Rewrite to read the CSS generated by Tailwind CSS styles/global.css.
//styles/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Now you can use Tailwind CSS!
Top comments (1)
Your example gir repo no longer exists!