DEV Community

Cover image for How to Setup and Customize Tailwind in Nuxt.js
Ravgeet Dhillon
Ravgeet Dhillon

Posted on • Originally published at ravgeet.in

How to Setup and Customize Tailwind in Nuxt.js

CSS frameworks like Bootstrap, Bulma, and Materialize are hugely popular among front-end developers. They are a great way to quickly style an application on the set of standard guidelines. However, they are a little difficult to customize and bloated for small applications.

Tailwind CSS is a utility-first CSS framework. This means that instead of providing you with ready-made components, Tailwind provides utility-based CSS classes that you can use to style your components. This gives you more flexibility over your design and you can build your own UI framework on top of Tailwind CSS by extending the Tailwind classes.

In this tutorial, you’ll build a portfolio landing page that will have the author’s information and a form to subscribe to a newsletter. You’ll build the front end with Nuxt.js and style it using Tailwind CSS.

Read the full blog on Mattermost.

Thanks for reading πŸ’œ


I publish a monthly newsletter in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing the web.

Connect with me through Twitter β€’ LinkedIn β€’ GitHub or send me an Email.

β€” Ravgeet, Full Stack Developer and Technical Content Writer

Top comments (1)

Collapse
 
kissu profile image
Konstantin BIFERT

Hi, first of thanks for that blogpost! πŸ™πŸ»

I'm not sure which version of the Tailwind module you're using (and if it's Tailwind 2 or 3 behind the curtain) but looking at this page, it looks like the modules should be under modules and not buildModules.

Not sure if that one still makes a difference, it's maybe a typo regarding the configuration of Nuxt3. I saw this issue happening by the past (confusing between the both), but if it's works well without any warning I guess it's okay! πŸ‘πŸ»