title: How to use two different tailwind config on laravel project
body: <p>I am using a admin template on one of my laravel project and here are the files:</p>
  <p><strong>tailwind.config.js</strong></p>
  <pre><code>const colors = require(&quot;tailwindcss/colors&quot;);
  const {
      toRGB,
      withOpacityValue,
  } = require(&quot;@left4code/tw-starter/dist/js/tailwind-config-helper&quot;);
  
  module.exports = {
      mode: &quot;jit&quot;,
      content: [
          &quot;./resources/**/*.blade.php&quot;,
          &quot;./resources/**/*.js&quot;,
          &quot;./resources/**/*.jsx&quot;,
          &quot;./resources/**/*.vue&quot;,
      ],
      theme: {
          extend: {
              colors: {
                  rgb: toRGB(colors),
                  primary: withOpacityValue(&quot;--color-primary&quot;),
                  secondary: withOpacityValue(&quot;--color-secondary&quot;),
                  success: withOpacityValue(&quot;--color-success&quot;),
                  info: withOpacityValue(&quot;--color-info&quot;),
                  warning: withOpacityValue(&quot;--color-warning&quot;),
                  pending: withOpacityValue(&quot;--color-pending&quot;),
                  danger: withOpacityValue(&quot;--color-danger&quot;),
                  light: withOpacityValue(&quot;--color-light&quot;),
                  dark: withOpacityValue(&quot;--color-dark&quot;),
                  slate: {
                      50: withOpacityValue(&quot;--color-slate-50&quot;),
                      100: withOpacityValue(&quot;--color-slate-100&quot;),
                      200: withOpacityValue(&quot;--color-slate-200&quot;),
                      300: withOpacityValue(&quot;--color-slate-300&quot;),
                      400: withOpacityValue(&quot;--color-slate-400&quot;),
                      500: withOpacityValue(&quot;--color-slate-500&quot;),
                      600: withOpacityValue(&quot;--color-slate-600&quot;),
                      700: withOpacityValue(&quot;--color-slate-700&quot;),
                      800: withOpacityValue(&quot;--color-slate-800&quot;),
                      900: withOpacityValue(&quot;--color-slate-900&quot;),
                  },
                  darkmode: {
                      50: withOpacityValue(&quot;--color-darkmode-50&quot;),
                      100: withOpacityValue(&quot;--color-darkmode-100&quot;),
                      200: withOpacityValue(&quot;--color-darkmode-200&quot;),
                      300: withOpacityValue(&quot;--color-darkmode-300&quot;),
                      400: withOpacityValue(&quot;--color-darkmode-400&quot;),
                      500: withOpacityValue(&quot;--color-darkmode-500&quot;),
                      600: withOpacityValue(&quot;--color-darkmode-600&quot;),
                      700: withOpacityValue(&quot;--color-darkmode-700&quot;),
                      800: withOpacityValue(&quot;--color-darkmode-800&quot;),
                      900: withOpacityValue(&quot;--color-darkmode-900&quot;),
                  },
              },
              fontFamily: {
                  roboto: [&quot;Roboto&quot;],
              },
              container: {
                  center: true,
              },
              maxWidth: {
                  &quot;1/4&quot;: &quot;25%&quot;,
                  &quot;1/2&quot;: &quot;50%&quot;,
                  &quot;3/4&quot;: &quot;75%&quot;,
              },
              strokeWidth: {
                  0.5: 0.5,
                  1.5: 1.5,
                  2.5: 2.5,
              },
          },
      },
      plugins: [require(&quot;@tailwindcss/forms&quot;)],
      variants: {
          extend: {
              boxShadow: [&quot;dark&quot;],
          },
      },
  }
  
  </code></pre>
  <p>and this, is my current <strong>webpack.mix.js</strong></p>
  <pre><code>const mix = require('laravel-mix');
  mix.js('resources/admin-template/js/app.js', 'public/assets/js/admin-template.js')
      .js('resources/js/app.js', 'public/assets/js')
      .react()
      .sass('resources/sass/app.scss', 'public/assets/css')
      .postCss(&quot;resources/admin-template/css/app.css&quot;, &quot;public/assets/css/admin-template.css&quot;);
  </code></pre>
  <p>and here is my current <strong>postcss.config.js</strong></p>
  <pre><code>module.exports = {
      plugins: [
          require(&quot;postcss-import&quot;),
          require(&quot;postcss-advanced-variables&quot;),
          require(&quot;tailwindcss/nesting&quot;),
          require(&quot;tailwindcss&quot;)(&quot;./tailwind.config.js&quot;),
          require(&quot;autoprefixer&quot;),
      ],
  };
  </code></pre>
  <p>Now, I had separately created frontend design, and it has this <code>tailwind.config.js</code></p>
  <pre><code>module.exports = {
    content: ['./*.html'],
    theme: {
      extend: {
        colors: {
          'primary': '#1A1C29',
          'primary-light': '#2A2D3E',
          'theme-blue': '#2563eb',
          'theme-green':  '#06D594',
          'light-gray': '#999ba6',
          'yellow': '#FFFF00',
          'gold': '#facc15',
          'red':  '#FF0000'
        },
        fontFamily:{
          'poppins': ['Poppins', 'sans-serif'],
          'roboto' : ['Roboto', 'sans-serif']
        },
        fontSize:{
          'xxs': '.63rem',
        },
        screens:{
          'sm': '575px',
        },
      },
    },
  }
  </code></pre>
  <p>Now, I have this css on <code>resources/css/front.css</code>, now how could I compile on this laravel project by using this second tailwind config value for front .css only.</p>
  <p>I have tried this by adding this line on webpack. But, its not compiling correctly, its using different colors combination.</p>
  <pre><code>.postCss(&quot;resources/css/front.css&quot;, &quot;public/assets/css/front.css&quot;);
  </code></pre>
  <p>What would be the best and safest to handle this scenario with single <code>tailwind.config.js</code></p>