title: focus:outline-none not working Tailwind CSS with Laravel
body: <p>I am using Tailwind CSS for my Laravel application, and want to remove the focus border on the input boxes. According to the documentation, <code>focus:outline-none</code> should achieve this, although it is not working for me and the border still appears on focus.</p>
  <p>It looks like I am targeting the wrong thing, as if I do <code>focus:outline-black</code>, I can see a black outline as well as the standard blue one on focus.</p>
  <p><code>focus:border-none</code> also does not fix the problem.</p>
  <p>Any ideas?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;input class=&quot;text-input&quot; placeholder=&quot;Your Name&quot; /&gt;
  
  .text-input {
      @apply focus:outline:none;
  }
  </code></pre>
  <p><strong>tailwind.config.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>const defaultTheme = require('tailwindcss/defaultTheme');
  const colors = require('tailwindcss/colors');
  
  module.exports = {
      mode: 'jit',
      purge: [
          './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
          './vendor/laravel/jetstream/**/*.blade.php',
          './storage/framework/views/*.php',
          './resources/views/**/*.blade.php',
      ],
  
      theme: {
          extend: {
              fontFamily: {
                  sans: ['Nunito', ...defaultTheme.fontFamily.sans],
              },            
          },
          colors: {                      
              black: colors.black,
              white: colors.white,
              gray: colors.trueGray,
              indigo: colors.indigo,
              red: colors.rose,
              yellow: colors.amber,
              blue: colors.blue,
          },
      },
  
      plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
  };
  </code></pre>
  <p><strong>webpack.mix.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>const mix = require('laravel-mix');
  
  /*
   |--------------------------------------------------------------------------
   | Mix Asset Management
   |--------------------------------------------------------------------------
   |
   | Mix provides a clean, fluent API for defining some Webpack build steps
   | for your Laravel applications. By default, we are compiling the CSS
   | file for the application as well as bundling up all the JS files.
   |
   */
  
  mix.js('resources/js/app.js', 'public/js')
      .postCss('resources/css/app.css', 'public/css', [
          require('postcss-import'),
          require('tailwindcss'),
      ]);
  
  if (mix.inProduction()) {
      mix.version();
  }
  </code></pre>