loading...
Cover image for Setting up Next.js(CNA) with Tailwind CSS

Setting up Next.js(CNA) with Tailwind CSS

angelmtztrc profile image Angel Martinez Updated on ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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',
    ...
Enter fullscreen mode Exit fullscreen mode

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',
  ...
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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}/>
    )
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

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

Discussion

pic
Editor guide
Collapse
dance2die profile image
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-...

Collapse
angelmtztrc profile image
Angel Martinez Author

Thank you very much for the comment, I didn't know that it was already included by default, i will read about that, greetings!

Collapse
dance2die profile image
Sung M. Kim

You're welcome & enjoy the update~

Thread Thread
angelmtztrc profile image
Angel Martinez Author

Article updated!

Thread Thread
dance2die profile image
Sung M. Kim

Thank you, Angel for updating the post and sharing~

Collapse
rkrdev profile image
R K

How to modify this configuration to use styledcomponents as well.

Collapse
angelmtztrc profile image
Angel Martinez Author

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

Collapse
tomhermans profile image
tom hermans

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

Collapse
angelmtztrc profile image
Angel Martinez Author

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

Collapse
tao profile image
Lewis Lloyd

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

Collapse
angelmtztrc profile image
Angel Martinez Author

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