DEV Community

Cover image for Setting up Next.js(CNA) with Tailwind CSS

Setting up Next.js(CNA) with Tailwind CSS

Angel Martinez on May 11, 2020

In this post i will explain the installation and configuration of TailwindCSS over Next.js project (create-next-app) in order to take full advantag...
Collapse
 
dance2die profile image
Sung M. Kim

Nice post there, Angel (read the translated version).

With Tw v1.4.x, there is no need for @fullhuman/postcss-purge because of built-in purge.
github.com/tailwindcss/tailwindcss...

Only found out as a nice person did a PR to update my package :)

github.com/dance2die/cra-template-...

Collapse
 
angelmtztrc profile image
Angel Martinez

Thank you very much for the comment, I didn't know that it was already included by default, i will read about that, greetings!

Collapse
 
dance2die profile image
Sung M. Kim

You're welcome & enjoy the update~

Thread Thread
 
angelmtztrc profile image
Angel Martinez

Article updated!

Thread Thread
 
dance2die profile image
Sung M. Kim

Thank you, Angel for updating the post and sharing~

Collapse
 
tao profile image
Lewis Lloyd • Edited

I hadn't heard of TailwindCSS until today. What's the comparison against Bootstrap, Webflow, Grid, etc?

Collapse
 
angelmtztrc profile image
Angel Martinez

Tailwind CSS is a low-level framework oriented to "utility-first". In Tailwind CSS we don't have Components, Sizes, or predefined colors in our designs. Tailwind basically allows us to create a design with our own rules

Collapse
 
tomhermans profile image
tom hermans

Just read all your Tailwind/NextJS/Twin.macro articles. Great stuff Angel !

Collapse
 
angelmtztrc profile image
Angel Martinez

Thank you, Tom! I'm happy that they have been to your liking

Collapse
 
rkrdev profile image
R K

How to modify this configuration to use styledcomponents as well.

Collapse
 
angelmtztrc profile image
Angel Martinez

Hey! I have another post where I explain how to use Tailwind with Emotion/Styled Component in a single project of React!

dev.to/angelcodes/react-app-with-t...