Tailwind CSS is a utility-first CSS framework that is being used to create markup-based designs. Next.js is a React framework with features like hybrid static and server rendering, TypeScript support, smart bundling, route pre-fetching, and more. When these technologies are combined, they can be quite useful in the development of websites and web apps.
We'll look at some of the advantages of using Tailwind CSS in this article. Then we'll learn how to build up Next.js with TypeScript and TailwindCSS. We'll start using TypeScript and then go on to TailwindCSS. The tutorial's goal is to assist you in setting up a project using these three technologies.
You'll have a working Next.js application using TypeScript and TailwindCSS once you've finished the lesson. You may extend it and turn it into a useful application!
Advantages of using Tailwind CSS
- Significant Variables - With Tailwind CSS, you just need to apply text-sm, text-lg or text-xl to your HTML elements. It indicates that you want a small, large, or extra-large font size, respectively.
- Predefined class - Tailwind has several classes related to margins like m-6 or m-8. But, it doesn't provide m-7. Another thing m-6 is equal to margin: 1.5rem; and m-8 is equal to margin: 2rem;. So you cannot specify a margin equal to 1.75rem by default (you have to make some configuration changes to use a margin equal to 1.75rem). This means that you don't have to move your pixel one by one anymore which can save you a lot of time.
- Out-of-the-box Features - The creation of reusable Tailwind components (without installing React in your project). PurgeCSS is extremely easy to set up. You can therefore remove unused CSS classes and reduce the size of your style file
Now let’s start the coding!
Create a new next.js app
Run the following command in your Terminal and follow the wizard. As a result, a new directory containing the app will be created for you.
npx create-next-app
Start the app
Run the development server and Open http://localhost:3000 with your browser to see the result.
npm run dev
Create src directory and move pages into src
The src directory is very common in many apps and Next.js supports it by default.
cd <your-app-directory>
mkdir src
mv pages src
Support TypeScript
Next.js supports TypeScript out of the box.
touch tsconfig.json
npm i -D typescript @types/react @types/node
Restart development server by running npm run dev, you will see this in the console:
We detected TypeScript in your project and created a tsconfig.json file for you.
Test TypeScript support by renaming index.js to index.tsx and restart the development server
mv src/pages/index.js src/pages/index.tsx
Integrate TailwindCSS
Install TailwindCSS and PostCSS. More information can be found in the official TailwindCSS documentation. Installation
npm i -D tailwindcss postcss-import autoprefixer
Configure PostCSS Create postcss.config.js
touch postcss.config.js
module.exports = {
plugins: [
'tailwindcss',
'autoprefixer',
]
}
Add TailwindCSS to your css
Create src/styles/index.css.
mkdir src/styles && touch src/styles/index.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* Your own custom component styles */
@import 'tailwindcss/utilities';
Create a src/pages/_app.tsx file Then add styles/index.css to your application by import the CSS file.
touch src/pages/_app.tsx
import { AppProps } from 'next/app'
import '../styles/index.css'
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default MyApp
Now that our project is ready, let’s edit the index.tsx file and put some of our own text.
export default function Home() {
return (
<div className="container flex items-center p-4 mx-auto min-h-screen justify-center">
<main>
<h1 className="font-mono text-xl code">
Welcome to <span className="text-purple-700">Nextjs</span>, <span className="text-indigo-700">TailwindCSS</span> and <span className="text-gray-700">TypeScript</span>
</h1>
</main>
</div>
)
}
Then run the developer server at http://localhost:3000 to see our result.
Thank you for reading
If you liked this post, subscribe to my newsletter to never miss out on my blogs, product launches and tech news.