Export TailwindCSS CSS rules to file instead of rendering CSS rules on DOM

Question

On my project I use: TailwindCSS + Emotion + Tailwind Macro.

I just want to export TailwindCSS CSS rules to the currently generated styles.css file instead of rendering CSS rules on the DOM (html > head > style[]).

That way I would reduce the size of the app.js bundle, and of course, it will increase the size of the generated file: styles.cssbut I'm fine with that.

Any idea on how to do that?

Thanks!

Here are the config files:

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');
const { darken } = require('polished');
const colors = require('tailwindcss/colors');
const theme = require(`./offers/${process.env.OFFER}/theme`);

module.exports = {
  /**
   * Useful for arbitrary values:
   * https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
   */
  content: [ './resources/assets/js/components/**/*.js' ],
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,
      /**
       * Palette Colors from XD Mockup.
       */
      light: theme.color.light,
      neutral: theme.color.neutral,
      highlight: theme.color.highlight,
      textMedium: theme.color.textMedium,
      textMediumHover: darken(0.10, theme.color.textMedium),
      textDark: theme.color.textDark,
      focusPrimary: theme.color.focusPrimary,
      focusPrimaryHover: darken(0.10, theme.color.focusPrimary),
      focusPrimaryLight: theme.color.focusPrimaryLight,
      focusSecondary: theme.color.focusSecondary,
      focusSecondaryHover: darken(0.10, theme.color.focusSecondary),
      focusSecondaryMed: theme.color.focusSecondaryMed,
    },
    fontFamily: {
      nunito: ['Nunito', 'sans-serif'],
      opensans: ['Open Sans', 'sans-serif'],
    },
    fontSize: {
      ...defaultTheme.fontSize,
      'h1d': '40px',
      'h1m': '28px',
      'h2d': '28px',
      'h2m': '24px',
    },
    screens: {
      'sm': '640px',    // => @media (min-width: 640px) { ... }
      'md': '768px',    // => @media (min-width: 768px) { ... }
      'lg': '1024px',   // => @media (min-width: 1024px) { ... }
      'xl': '1280px',   // => @media (min-width: 1280px) { ... }
      '2xl': '1536px',  // => @media (min-width: 1536px) { ... }
    },
  },
};

webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');
const theme = require(`./offers/${process.env.OFFER}/theme.js`);
const jsConfig = require('./resources/scripts/js-config');

require("mix-tailwindcss");

/**
 * Prevent generating files: *.LICENSE.txt
 */
mix.options({
  terser: {
    extractComments: false,
    terserOptions: {
      output: {
        comments: false,
      },
    },
  },
});

/**
 * Reference:
 * https://laravel-mix.com/docs/6.0/extending-mix
 */
 mix.extend('addWebpackLoaders', (webpackConfig, loaderRules) => {
  loaderRules.forEach((loaderRule) => {
      webpackConfig.module.rules.push(loaderRule);
  });
});

mix.addWebpackLoaders([
  {
    test: /\.less$/,
    use: [
      {
        loader: 'less-loader',
      },
      {
        loader: 'text-transform-loader',
        options: {
          prependText:
            `@offer: '${process.env.OFFER}';\n` +
            `@cdn-url: '${process.env.CDN_URL}';\n`,
        },
      },
    ],
  },
]);

mix.webpackConfig(webpack => {
  return {
    output: {
      path: path.resolve(__dirname, 'public/cdn'),
      publicPath: process.env.CDN_URL + '/',
      chunkFilename: 'js/[name].js?v=##BUILD_NUMBER##',
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env.APP_ENV': `'${process.env.APP_ENV}'`,
        'process.env.THEME': JSON.stringify(theme),
        'process.env.JS_CONFIG': JSON.stringify(jsConfig(process.env.OFFER)),
      }),
    ]
  };
});

const package = require('./package.json');
const deps = Object.keys(package.dependencies);
mix.extract(deps);

mix.js('resources/assets/js/app.js', 'js');

mix
  .less('resources/assets/less/styles.less', 'css')
  .tailwind("./tailwind.config.js");

score 1 · Answer 1 · answered Apr 29 '22 at 11:54

1

back when tailwindcss was new this is how CSS was generated, now it has built into webpack so I dont even use this now days.

npx tailwindcss build src/styles/index.css -o src/styles/output.css

note this will generate all css and file size can go up to Mbs. so I recommend using postcss purgecss plugin along with this.

answered Apr 29 '22 at 11:54

bogdanoff

1,705
1
10
20

but I need to do this through reconfiguring one of both files above. I don't want to be running an extra command line command every time I compile the website – Viewsonic Apr 29 '22 at 13:38
you said compile, is that using npm like `npm run build` ? then just chain that command in package.json, something like this: ```"build" : "react-scripts build && tailwindcss build ..."``` – bogdanoff Apr 29 '22 at 15:28
@Viewsonic if your problem has been solved because of my answer then please accept it. – bogdanoff May 01 '22 at 14:10

Export TailwindCSS CSS rules to file instead of rendering CSS rules on DOM

1 Answers1