Hey everyone! Hope you're all safe and well. It's been a while since my last blog post. It's been a productive weekend and I wanted to finish it with a blog post as a cherry on top.
In this blog post, I'm gonna explain how I've bootstrapped my twitter clone project which I started working on yesterday. But first, let's talk a little about why I've chosen Next.js and Tailwind for the project.
Twitter Clone with Next.js and TailwindCSS
Next.js is a React framework. It's been out there for years now and it increases its popularity day by day. It provides various features that solve various problems and improve the development experience. Some of them are:
hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, image optimization and moreā¦
I used Next.js before but it's been a while and the library's been improved very much since then so I wanted to get my hands dirty with it.
Here is the cause of the civil war that's been going for a while now between front end devs. Let's see what Tailwind says in its docs.
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
So, basically, it allows you to write CSS rapidly in HTML by writing pre-defined classes. Some old-school folks claimed that this was no way to write css and it'd cause chaos and some other said "Just try it, man! You'll see."
So, I had tried it a while ago and it was really rapid, I mean, really. The only thing that slows you down is trying to remember some classes but otherwise your fingers are basically like Mr. Robot while hacking. And the solution for the chaos in your HTML/JSX is to export classes with but let's not get into detail and get distracted. I'll share the link to the docs at the end and you can get into it.
We're gonna use create-next-app for pre-installed dependencies and pre-created folders to save time. See the manual setup here if you like.
Run the command below.
yarn create-next-app nextjs-tailwindcss-twitter-clone
It'll install next, react and react-dom and create some directories for you.
TypeScript
Now, let's setup TypeScript. Create an empty tsconfig.json file in the root and install the dependencies.
yarn add -D typescript @types/react @types/node
Start the dev server and Next.js will write the configurations for you into tsconfig.json.
yarn run dev
Allright! Let's get to Tailwind.
# If you're on Next.js v10
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
# If you're on Next.js v9 or older
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
After the installation, let's create the configuration file for Tailwind and PostCSS.
yarn tailwindcss init -p
You'll see that two files named tailwind.config.js and postcss.config.js has been created. Those two files allow us to make configurations such as creating our own theme, using plugins and more.
For now, we're gonna add Purge CSS support to allow Tailwind to tree-shake unused styles and optimize our production build. Edit purge property in the tailwind.config.js as below.
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
You can learn more about configuring Tailwind in the configuration documentation.
ESLint
Ain't no project without ESLint. Let's install the dependencies.
yarn add -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-react
You can use the config here
Prettier
It literally makes your code prettier so let's install it.
yarn add -D prettier
Create aĀ .prettierrc file and paste the config below into it
{
"singleQuote": true,
"semi": false,
"printWidth": 100
}
You can start cracking on Tailwind CSS and Next.js.
Top comments (0)