Use the new Tailwind CSS and Next.js in your React project

Wind turbines
Wind turbines
Photo by TJ K. on Unsplash.

In the last months of 2020, a couple of great framework updates have been released. First was the release of Next.js 10, which came with a lot of nice features, like the new image component that automatically optimizes images.

Secondly, 18 months after the 1.0 release, the Tailwind team released v2.0 of their CSS framework. This new update included lots of improvements like a new color palette and dark mode support.

Using the latest version of Next.js with Tailwind CSS is a very powerful combination to create and style web applications. …


Show your project to the world

Photo by Sarah Kilian on Unsplash

A great way to show your project to the world is by sharing it on platforms like ProductHunt, Indiehackers, Reddit, etc. It’s also an easy way to get some traffic, feedback, and backlinks. Here are some great directories to submit your product.

IndieHackers

IndieHackers is a place where the founders of profitable businesses and side projects can share their stories transparently, and where entrepreneurs can come to read and learn from those examples.

Link: https://www.indiehackers.com/contribute

ProductHunt

ProductHunt is now at the forefront when it comes to showcasing your product to the startup directory world. It has a voting system that enables your…


$1,901.40 in sales after one week of early access

After many hours of work, it was finally time to give people access to my new project, a SaaS boilerplate. In the first 5 days of early access, I almost made $2k in sales.

I have made and sold a React boilerplate before, React Milkshake. In the week after launching React Milkshake I made just 29 dollars. I, later on, created upgraded versions of the boilerplate. …


Options to help you build and launch your project faster

Laptop on a table
Laptop on a table
Photo by Clay Banks on Unsplash.

Building a SaaS platform is hard, especially if you’re a solo founder who needs to build everything by yourself. But there are options to help you build and launch your project faster.

When you have a great idea and start working on it from scratch, you feel a rush of excitement. It’s great to work on an interesting idea, but instead of focusing on what makes your product unique, you first need to put in the hours to work on things that are less exciting: configuring a project, building authentication flows, integrating payments, building forms, etc.

If you want to…


Manage the content of your Next.js apps through a free Git-based CMS

Blog dashboard
Blog dashboard
Managing a blog with Next.js and Netlify CMS. Photo by the author.

If you’re starting a new React project, you might want to consider Next.js and Netlify CMS. In this article, we take a look at why this would be a great choice and walk through the process of setting up a new project using these technologies.

Why Next.js?

As I stated in a previous article:

“There are many important details you need to consider when you start a new project with React. Your code has to be bundled using a bundler like webpack and transformed using a compiler like Babel.

Create React App can be a nice tool to handle this for you…


Auth doesn't have to be hard or time-consuming

Photo by Ricardo Gomez Angel on Unsplash

Building your own authentication system can be a difficult and time-consuming task. Using existing platforms to handle your authentication flow for you will save you a lot of time and doesn’t even have to cost you any money. The free plan of Firebase, one of the most popular platforms than can handle authentication for you, allows any developer to quickly build secure authentication systems easily. It helps you build applications fast, without managing infrastructure. In this tutorial, we are going to use this platform to quickly implement our own authentication flow. We will do this using Next.js, Typescript, and TailwindCSS.


Use Tailwind CSS and Next.js in your React project

Photo by Khamkéo Vilaysing on Unsplash.

UPDATE: Tailwind CSS 2.0 has been released. Please follow this new guide to use the latest version of Tailwind with the latest version of Next.js: https://medium.com/better-programming/how-to-set-up-tailwind-css-v2-0-with-next-js-10-4a82c8f8caaa

If you’re starting a new React project, you might want to consider Next.js and Tailwind CSS. In this article, we will explain why this would be a great choice and walk you through the process of setting up a new project using these technologies.

Why Next.js?

There are many important details you need to consider when you start a new project with React. Your code has to be bundled using a bundler like webpack and transformed…


Keep everybody on the same page, in the same style

Photo by Sai Kiran Anagani on Unsplash.

Automated lint tools can help developers save time and keep everybody on the same page. When everybody on your team follows the same rules, you don’t have to waste time discussing code style issues. These tools can catch a lot of syntax and type errors.

Combining ESLint with Prettier is a nice way to perform both automated syntax scans on your code and reformatting. This will ensure that consistent rules are being followed for indentation, spacing, semicolons, etc.

Let’s set up these technologies to use them in a Next.js project that uses TypeScript. If you are starting a new project…


Photo by Victoriano Izquierdo on Unsplash

As a developer, there are many choices to make when building your next application. The rise of serverless technologies allows developers to build and run applications without thinking about servers and this also allows front-end developers to create full-stack applications and build SaaS web apps.

In Stack Choices, I take a closer look at some technologies that can help us to build these types of applications and try to make a good decision on what to use. …


Photo by Austin Distel on Unsplash

As a developer, there are many choices to make when building your next application. The rise of serverless technologies allows developers to build and run applications without thinking about servers and this also allows front-end developers to create full-stack applications and build SAAS web apps.

In Stack Choices, we take a closer look at some technologies that can help us to build these types of applications and try to make a good decision on what to use. In the last episodes, I took a look at JavaScript vs TypeScript and React vs Vue vs Angular vs Svelte. …

Jake Prins

Building products and writing articles for developers. https://jakeprins.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store