DEV Community

loading...

Use Tailwind CSS with React Apps in Nx

Devin Shoemaker
Software Developer @ionicframework / Nx Plugin Author / Previous ModChat Podcast Co-host / Nx Plugins: nxtend.dev
Originally published at devinshoemaker.com ・2 min read

Tailwind is a popular utility-based CSS framework that enables developers to rapidly implement and iterate on design. Responsive design and dark mode are easier than ever to implement, and so far I have been very happy with Tailwind and even use it on my site.

Install Tailwind Dependencies

Nx 11 still uses PostCSS 7, so we have to install Tailwind dependencies in PostCSS 7 compatibility mode.

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

# or

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Enter fullscreen mode Exit fullscreen mode

Initialize Tailwind

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Purge CSS

Tailwind requires us to specify the files that we should purge the CSS from. Without purging CSS, all of the Tailwind styles are loaded into the application which is quite large. When we purge the CSS, we can remove all the unused styles.

Update tailwind.config.js:

module.exports = {
  purge: ['./apps/my-app/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Enter fullscreen mode Exit fullscreen mode

Make sure to replace my-app with the name of your application. If additional applications are added to your workspace that will use Tailwind then you will need to add another string to the purge property accordingly.

Extend Webpack Config

The default @nrwl/react Webpack config does not include the PostCSS loader, so we need to override it.

Create a file called react-tailwind.webpack.config.js:

const nrwlConfig = require('@nrwl/react/plugins/webpack.js');

module.exports = (config) => {
  nrwlConfig(config);
  return {
    ...config,
    module: {
      rules: [
        ...config.module.rules,
        {
          test: /\.css$|\.scss$|\.sass$|\.less$|\.styl$/,
          use: [
            {
              loader: 'postcss-loader',
            },
          ],
        },
      ],
    },
  };
};

Enter fullscreen mode Exit fullscreen mode

Next, update your workspace.json and replace the webpackConfig for your app:

"webpackConfig": "react-tailwind.webpack.config.js"
Enter fullscreen mode Exit fullscreen mode

Import Tailwind Styles

Next, in order to use the Tailwind styles, you must import them in your root component:

import 'tailwindcss/tailwind.css';
Enter fullscreen mode Exit fullscreen mode

Now you should be able to use Tailwind CSS classes within your Nx React application.

Discussion (0)