Setting up Next.js(CNA) with Tailwind CSS

In this post i will explain the installation and configuration of TailwindCSS over Next.js project (create-next-app) in order to take full advantage of all the features provided by TailwindCSS.

Create a Next.js Project

The first step, is create Next.js Project, if you have already created, you can continue with the next step.

npx create-next-app tailwind-next && cd tailwind-next

Install TailwindCSS

Now, we need to install TailwindCSS on our project, so we should enter the following command in our terminal or CMD.

npm i tailwindcss

Generate Config file for TailwindCSS

Once we have TailwindCSS installed in our project, we need to create or generate a tailwind.config.js file to get all the tailwind features.

npx tailwindcss init --full

With the --full flag, we indicated to TailwindCSS that we want the complete configuration file, so the output in the tailwind.config.js is the following code:

// tailwind.config.js
module.exports = {
  purge: [],
  target: 'relaxed',
  prefix: '',
  important: false,
  separator: ':',
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',

      black: '#000',
      white: '#fff',
    ...

Edit config file to purge the code

Now, we have the full configuration of TailwindCSS if you need to change the colors, fonts or screen breakpoint, tailwind.config.js is the file where you can do it.

But now, we need to config the "purge", that will allow us to remove the TailwindCSS code that we dont use, so that our site is lighter and faster.

In the new version of TailwindCSS we can do this without install other dependecies, so first, check out the tailwind.config.js file, the first thing we see is the "purge" which is an array, in this array we put the routes or our files where we use TailwindCSS classes, for example, to refer to each file in our pages or components folder, we must put the following code:

// tailwind.config.js
module.exports = {
  purge: [
    './components/**/*.js',
    './pages/**/*.js',
  ],
  target: 'relaxed',
  ...

So, with this code, whenever we compile our CSS with NODE_ENV set to production, TailwindCSS will automatically purge unused styles from your CSS. TailwindCSS provides us with some extra purge settings, which you can read in the official documentation.

Create CSS file

In this step we need to create a app.css file in the root directory, and we put the following code:

/* app.css */
@tailwind  base;
@tailwind  components;
@tailwind  utilities;

And absolutely you can put your own code in this file.

Include Our CSS in app.js

To use TailwindCSS inside all of the project, we need to create an _app.js file in the pages folder with the following code:

// _app.js
import '../styles.css';

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

As you can see, we import a styles.css file, but we dont have it, so lets work with that.

Install another dependecies

Finally, we need to install some dependecies, for finish the configuration of TailwindCSS, put the following commands:

npm install concurrently cross-env

The first dependency will allow us to execute several commands at once by writing a single command, and the second dependecy allows to change the NODE_ENV between production or development environments, so lets configure them.

Configure Scripts for our Project

Now, we need to configure some scripts, for compile TailwindCSS depending of the environment, so we need put the following code into the package.json in the scripts section:

// package.json
  "scripts": {
    "build-css": "cross-env NODE_ENV=production tailwindcss build app.css -o styles.css",
    "dev-css": "cross-env NODE_ENV=development tailwindcss build app.css -o styles.css",
    "next-dev": "next dev",
    "dev": "concurrently \"npm run next-dev\" \"npm run dev-css\"",
    "next-build":"next build",
    "build": "concurrently \"npm run next-build\" \"npm run build-css\"",
    "start": "next start"
  },

With this, now we will execute the script

• npm run dev when we are in development, which basically compiles our next app and will generate the complete file of TailwindCSS.

• npm run build command will build our next app and will generate the full purge styles.css for production environment.

So, We have it, TailwindCSS fully configured in our Next.js project, if you have comments or something to add, please let me know, I'm completely open to receiving them.

This publication was updated thanks to the advice of Sung M. Kim

Comments

[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-...

[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!

[Sung M. Kim]

You're welcome & enjoy the update~

[Angel Martinez]

Article updated!

[Sung M. Kim]

Thank you, Angel for updating the post and sharing~

[Lewis Lloyd]

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

[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

[tom hermans]

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

[Angel Martinez]

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

[R K]

How to modify this configuration to use styledcomponents as well.

[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...