How to setup your Next.js app to use Tailwind CSS and CSS-in-JS with twin.macro

Aleksandar

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Twin 101: Use Tailwind CSS + CSS-in-JS in a Next.js app with twin.macro.js. Add the Global Styles Twin comes with a GlobalStyles import that adds some base styles from tailwind together with some @keyframes for animations, and some global css variables to alleviate in your project’s root directory and add the following lines.

Twin 101: Use Tailwind CSS + CSS-in-JS in a Next.js App