Search for a command to run...
Setting up NextJS with Typescript and TailwindCSS
I'm a UI/UX Designer and Full stack developer based in India. I'm currently a CSE undergrad at Cochin University of Science and Technology.
No comments yet. Be the first to comment.
In this series, we would be learning how to use NextJS using Typescript and TailwindCSS. We would be learning different features offered by NextJS framework. Fetching data from an API and much more!
Fetching and displaying data from API in NextJS using getStaticProps, TailwindCSS @apply directive and Typescript Interface.
Implementing the famous Wordle game in CLI
Hey everyone! It's been a while since I have written a blog post, and I'm really sorry for that. Would be getting back to writing a few posts every month. Now to address the obvious reason why I'm writing this post, I'm really excited to share with y...
Setting up project and installing required dependencies for the tutorial
This post talks about my journey on how I got into technical writing and also covers few points from the Bootcamp: Session 1
Head and Script Tag of NextJS, ESLint in NextJS and Deploying a NextJS Application
Next.js is a production-ready framework built on top of React and Node.js. It ships with all the features you need to get your React app up and running in no time.
You can use Next.js to build static or dynamic apps since it supports both client-side and server-side rendering. Next.js v9 introduced API routes, which allow you to extend your Next.js app with serverless functions built with Node.js, Express.js, GraphQL, and so on.
Next.js uses automatic code-splitting (lazy loading) to render only the JavaScript needed for your website. As an added bonus, this makes Next.js great for SEO.
TypeScript is a popular language created and maintained by Microsoft. It’s a superset of JavaScript, which makes all its features optional.
You can convert your existing JavaScript app to TypeScript and it should work as expected as long as your code is valid JavaScript. TypeScript allows you to set types on your variables and functions so you can type-check your code statically and catch errors at compile time.
You can also use modern features that are not yet supported in JavaScript. And don’t worry about browser support — TypeScript compiles to plain JavaScript, which means your TypeScript code will never ship in the browser.
TailwindCSS is a utility-first CSS framework for rapidly building custom user interfaces. You can say it is a cool way of writing inline styling and achieve an awesome interface without writing a single line of your own CSS! Tailwind isn’t the first utility CSS library, but it is the most popular at the moment and the best in my opinion.
I have created a GitHub repository with starter files you can either clone the repository(Can be used as starter files for other amazing projects! Maybe give it a ⭐ while you are at it 😃) or follow the steps below
npx create-next-app nextjs-crashcourse --ts
# or
yarn create next-app nextjs-crashcourse --typescript
Adding TailwindCSS to the project
Go inside the project folder and install the required dependencies
cd nextjs-crashcourse
// using npm
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
// using yarn
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
Creating the tailwind configuration file
npx tailwindcss init -p
This command would create a tailwind configuration file(tailwind.config.js) and a postcss configuration file(postcss.config.js)
Editing the tailwind.config.js file
Change the file to the following code snippet
// tailwind.config.js
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Adding tailwind to your CSS file
Add the following lines of code to the top of the styles/global.css file
@tailwind base;
@tailwind components;
@tailwind utilities;
And that's it! 🥳 You have successfully set up the files required for the series. Also, note that you could use this as boilerplate code for your "next" application! Meet you in the second part of the series.
If you're enjoying my articles, consider supporting me with a coffee ☕️. It really helps me a lot.
Feedback helps to improve my articles. I'd love to hear feedback and thoughts on the article. Looking forward to your views.
