tailwind css with css modules in next.js

Question

How to config next.js to support Simultaneous tailwind css with css modules? I want tailwindcss wrap whole project:

// /tailwind.scss
:global {
  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";
}

// /test-module.css
.example {
  font-size: 36px;
}

// /pages/_app.jsx
import '../talwind.scss';
...

And in a sample component:

// /components/my-component.jsx
import css from '../test-module.css';

const Test = () => (
  <div className={`bg-red-500` ${css.example}}>Test Tailwind with CSS</div>
);

Masih Jahangiri · Accepted Answer · 2019-11-10 10:05:31Z

5

A solution is split webpack style loader. A loader for global css another for css modules loader so webpack loader is looks like below:

{
  test: /\.s?[ac]ss$/,
  exclude: /\.global.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: !isProduction,
        reloadAll: true,
      },
    },
    // 'css-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        modules: {
          localIdentName: '[name]__[local]___[hash:base64:5]',
        },
      },
    },
    'postcss-loader',
    { loader: 'sass-loader', options: { sourceMap: true } },
  ],
},
{
  test: /\.global.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: !isProduction,
        reloadAll: true,
      },
    },
    'css-loader',
    'postcss-loader',
  ],
},

answered Nov 10, 2019 at 10:05

Masih Jahangiri

11.1k4 gold badges54 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AmerllicA Over a year ago

Why you do not mark your answer as the correct one?

Qwerty Over a year ago

Amazing, I spent two days on this! You should accept this answer.

stupidMoewe · Accepted Answer · 2022-01-20 13:51:00Z

3

I had the same problem, I did the following and it worked:

const Test = () => (
    <div className={["bg-red-500", css.example].join(" ")}>
        Test Tailwind with CSS
    </div>
);

answered Jan 20, 2022 at 13:51

stupidMoewe

412 bronze badges

Comments

Jose Fernando Garcia Parreño · Accepted Answer · 2019-11-30 19:13:49Z

1

You need to write classname like this

const App = () => {
<h1 className={[style[`bg-teal-600`], style.holi].join(' ')}>Holi</h1>;
};

answered Nov 30, 2019 at 19:13

Jose Fernando Garcia Parreño

695 bronze badges

1 Comment

Masih Jahangiri Over a year ago

Thanks for your answer. Could you describe what your config?

Collectives™ on Stack Overflow

tailwind css with css modules in next.js

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related