Setting up PostCSS for TailwindCSS in NextJS

what i'll be going through is notes from the first link in the reference below.

before you go into this, let it be known: you DON'T need to setup tailwindcss configuration if you don't need to customize the original setup, which is very very well written and acocunts for 70-80% of most use cases. When you come across something you would like to change in tailwind, that is the time when you can come back and start configuring tailwind.

tailwind is a postcss plugin

it processes your css into its css, after you've written it. that's what a postCSS plugin does (it's not _pre_CSS for instance, like SASS)

its like webpack or rollup, the compiler that powers most modern frameworks today (react, svelte, vue etc)

it allows you to do nice, modern stuff (like imports) and write beautiful code that your browser doesn't understand, and then squashes it into horribly ugly but fast code that your browser understands.

0. prerequisites

your framework of choice has to have postCSS installed.

• If you're using nextjs, you're good to go.
• If you're using gatsbyjs, do this
• If you're using Create-React-App, do this
• If you're using other frameworks, type "tailwindcss <your-framework-of-choice>" and pick a tutorial and go do it.

from now on we're going to use NextJS. if you want to follow along, setup a new nextjs project

with this npm init next-app

1. configure PostCSS

1. make a postcss.config.js file in your project root
2. add two plugins, 'tailwindcss' and 'postcss-preset-env'

like this:

module.exports = {
  plugins: ['tailwindcss', 'postcss-preset-env'],
}

2. add base tailwindcss styles

1. go make a style.css file somewhere in your project (i made mine at "/styles.index.css")
2. import the three base tailwind classes

like this:

@tailwind base;

@tailwind components;

@tailwind utilities;

3. import your css file

this is very nextjs-specific, but the gist is: import your css file somewhere so that the styles get loaded when your project starts

the nextjs way to import global styles is to make a "first point of entry" file called "_app.js" in "/pages".

1. go to "/pages" directory
2. make a file called "_app.js"
3. import your style there

like this:

import '../styles/index.css'

and because this is a first point of entry for the app, it is a React component, kinda like the root component in React apps.

add this to the same file:

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

that essentially overrides nextjs's default app.js file more here and here

Component is whatever page nextjs passes through when you click on any page (a page is a file in your "/pages" folder. except "_app.js")

pageProps is what gets passed into your page component when it loads (if you don't get getInitialProps then there's nothing inside)

4. You're done!

start using your tailwind-ified app!

try adding className="bg-red-300 hover:text-red-500" on one of your elements.

don't worry if you don't remember any of the classes, autocomplete will help you! and if that fails, check out the docs! the tailwind website has a big searchbar on top for a reason.

working effectively with tailwindcss

1. use VSCode
2. install these plugins: Tailwind CSS IntelliSense, Headwind
3. code!
4. use PurgeCSS IF your codebase gets too big
5. profit

minimal tailwindcss setup (if you want it even smaller, use the cdn version of tailwind)

1. from a root directory where you have an index.html file
2. npm install tailwindcss
3. touch styles.css to make a style.css file
4. paste @tailwind base;@tailwind components;@tailwind utilities; in your style.css file
5. npx tailwindcss build styles.css -o output.css
6. target your output.css from your index.html

problems you may face

if you happen to have this plugin installed, disable it or don't install Tailwind CSS IntelliSense, either one works, only the html-css-class-completion plugin is more generic and works by reading everything in for your .css files, which can mean it may be better for your use case.

Tailwind CSS IntelliSense shows you the style when you hover over a tailwind class though, which is very helpful when you're just learning the ropes.

ref

there are a lot of resources out there for setting up tailwind (because it's the new hotness right now as of date of publish)

tailwindcss + nextjs nextjs with tailwind already integrated tailwindcss + gatsbyjs tailwindcss + vuetify the main docss