Setting up Next.js with Tailwind
Published: ....
Last modified: ....
Share this post on BlueskySee discussion on Bluesky
I've started to use Tailwind with my personal projects as a replacement for Vanilla Extract, and I've found myself copying my tailwind settings/setup across a few different projects as I'm refreshing their setups.
Since I often need to jump back into the Tailwind docs and find their Next.js setup instructions I figured I'd share my settings here (some of which might be opinionated), which should make it easier to run this process in different projects.
1. Install Dependencies:
yarn add tailwindcss postcss autoprefixer daisyui @ds-pack/daisyui2. Setup Tailwind Config:
Create the following tailwind.config.js file:
let path = require('path');
module.exports = {
content: [
'./app/**/*.tsx',
'./lib/**/*.tsx',
'./ui/**/*.tsx',
path.join(
path.dirname(require.resolve('@ds-pack/daisyui')),
'/**/*.js',
),
],
plugins: [require('@tailwindcss/typography'), require('daisyui')],
daisyui: {
logs: false,
},
};3. Run the Tailwind Setup Script:
yarn dlx tailwindcss init -p4. Configre Base Styles
Create a new globals.css file within the styles/ directory with the below
content:
@tailwind base;
@tailwind components;
@tailwind utilities;and then import that in your root layout.tsx file:
import '@styles/globals.css';All Done!
With the above, the application should be setup with Tailwind,
Daisyui, and
@ds-pack/daisyui.
I'll update my opinionated Next.js setup blog post with these details soon also!
Tags:
Related Posts
Web Development
Published: ....
I recently launched a rewrite and redesign of this personal website, I figured I'd talk a bit about the changes and new features that I added along the way!
Published: ....
A quick tip to implementing CSS theming that's compatible with Server Side Rendered applications!
Published: ....
A brief overview on how we launched The Bikeshed Podcast, including a deep dive in our recording and distribution workflows!
Published: ....
A quick tip outlining how to provide specific TypeScript type definitions for a local module!
Published: ....
Some rough thoughts on building a file-system routing based web application
Published: ....
Slicing software: why vertical is better than horizontal.
Published: ....
What if you could author an entire web application in a single file?
Published: ....
A quick way to handle resetting internal state in components when a parent form is submitted!
Published: ....
A brief look at Import Maps and package.json#imports to support isomorphic JavaScript applications!
Published: ....
A collection of tech talks that I regularly re-watch and also recommend to everyone!
Published: ....
Some features and functionality that I'd like within a React Server Component compatible framework.
Published: ....
A (running) collection of Bluesky tips, tools, packages, and other misc things!
Published: ....
A quick look at a small but powerful pattern I've been leveraging as of late!
Published: ....
A proposal for a minimal variant of TypeScript!
Published: ....
Sharing a few core recommendations when working within monorepos to make your life easier!
Published: ....
This is a quick post noting that Next.js should now work with Deno v2!
Published: ....
React components have a fundamental contract that is often unstated in their implementation, and you should know about it!
Published: ....
Replace that old useState and useEffect combo for a new and better option!
Published: ....
A quick look at the applications and tools that I (generally) use day to day for web development!
Published: ....
There are a variety of different markdown "standards" out there, and sometimes they're not all that consistent
Published: ....
Proposing a solution for sharing core "business" logic across services!
Published: ....
There's a common gotcha when creating Web Request and Response instances with Headers!
Published: ....
Feature toggles are often underused by most software development teams, and yet offer so much value during not only feature development but also refactors
Published: ....
A quick introduction to my new side project, hohoro. An incremental JS/TS library build tool!
Published: ....
Two neat tricks for enhancing your site's favicon!
Published: ....
The various risks and pitfalls of open source software run by corporations.
Published: ....
A monorepo template for managing a library and documentation together.
Published: ....
How we solved an almost show-stopping production bug, and how you can avoid it in your own projects.
Published: ....
A(nother) deep dive into one of my recent side projects; tails - a plain and simple cocktail recipe app.
Published: ....
When did semver major changes become so scary?
Published: ....
Leveraging service monitors properly to improve service observability.
Published: ....
A brief recap of how Wayfair changed it's CSS approach not once but twice in the span of 5 years!
Published: ....
A deep dive into one of my recent side projects; microfibre - a minimal text posting application
Published: ....
Pair programming can be good sometimes - but not all the time
Published: ....
A few thoughts on using Suspense with GraphQL to optimize application data loading
Published: ....
A few thoughts on what to do after you launch a new project
Published: ....
A few quick thoughts on burn out and taking a break
Published: ....
A few thoughts on managing complex UI component state within React
Published: ....
A quick overview of the new lifecycle methods introduced in React 16.3
Published: ....
A few thoughts and patterns for using styled-jsx or other CSS-in-JS solutions
Published: ....
A few thoughts on the redesign of my personal site, adopting Next.js and deploying via Now
Published: ....
A few weird things about JavaScript
Published: ....
Building a calendar web application
Next.js
Published: ....
A quick tip to implementing CSS theming that's compatible with Server Side Rendered applications!
Published: ....
Some rough thoughts on building a file-system routing based web application
Published: ....
A quick look at a small but powerful pattern I've been leveraging as of late!
Published: ....
This is a quick post noting that Next.js should now work with Deno v2!
Published: ....
Feature toggles are often underused by most software development teams, and yet offer so much value during not only feature development but also refactors
Published: ....
webpack, and tools built on it like Next.js, don't support true dynamic imports, but I found a way to trick the system!
Published: ....
A(nother) deep dive into one of my recent side projects; tails - a plain and simple cocktail recipe app.
Published: ....
A deep dive into one of my recent side projects; microfibre - a minimal text posting application
Published: ....
A few thoughts on the redesign of my personal site, adopting Next.js and deploying via Now