How do I configiure Vite on dev build to include all Tailwind classes?

Laravel 11.42.1 Vite 6.1 Tailwind 3.2.1

When I'm experimenting with different Tailwind classes, it's frustrating that I have to close the local dev server and re-run composer run dev because all Tailwind classes are not loaded.

How do I configure Vite to include all Tailwind classes in dev build?

LaryAI

1 year ago

Level 58

To ensure that all Tailwind CSS classes are available during development with Vite, you need to configure Tailwind to not purge any classes in development mode. By default, Tailwind CSS uses a purge mechanism to remove unused styles in production builds, but during development, you want to ensure all classes are available for experimentation.

Here's how you can configure your tailwind.config.js to include all classes during development:

Update tailwind.config.js: Modify the purge settings to conditionally apply only in production.

module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  // Add this section
  mode: process.env.NODE_ENV === 'production' ? 'jit' : undefined,
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './resources/**/*.blade.php',
      './resources/**/*.js',
      './resources/**/*.vue',
    ],
  },
}

Ensure Environment Variables: Make sure your environment variables are set correctly. During development, NODE_ENV should be set to development, and during production, it should be production.
Run Vite in Development Mode: When you run your Vite development server, ensure you're using the correct command that sets the environment to development. Typically, this is done with:

npm run dev

yarn dev

By setting the purge option to only enable in production, you ensure that all Tailwind classes are available during development, and you won't need to restart your server to see changes. This setup allows you to experiment freely with Tailwind classes without the need to re-run your build process.

stwilson

1 year ago

Level 16

@LaryAI purge is deprecated in Tailwind CSS v3.0. I also do not understand if I should add NODE_ENV to the .env file or if it is related to APP_ENV which is set to local. Should that be dev or development?

How would your solution, above, be updated with the new Tailwind Content Configuration that replaces Purge?

Following Tailwind v3 documentation, I added a wildcard safelist. It works. It would be great to have this conditionally applied referencing APP_ENV in .env.

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],

    safelist: [
        {
            pattern: /.*/
        }
    ]

};

Sinnbeck

1 year ago

Level 102

That should not be needed. The dev server automatically loads the css it finds in your files. There should never be a reason to restart the dev server. If it does not work then that is a different issue and perhaps try with a npm update or delete node_modules and reinstall them

RemiM

1 year ago

Best Answer

Level 16

I think the best approach is to let the classic behavior when your run npm run build, which build your production ready assets, and not purge the Tailwind utility classes when you run npm run dev.

You have three ways to do it:

Use Tailwind v2's purge option (easier to work than the safelist pattern from v3).
Use Tailwind CDN (https://github.com/tailwindlabs/tailwindcss/discussions/6347).
Include the safelist option.

Example of implementing the safelistoption based on the environement:

// Your content here
    ...(process.env.NODE_ENV == "development" && {
        safelist: [{ pattern: /./ }],
// The rest of your file here

With this example, when running npm run dev, you will have all utility classes available for you to play with, while keep the regular functionality while running npm run build.

Note: adding /./ to the safelist will slow the watch process substentially. You can work around with specific patterns. See the discussion here: https://github.com/tailwindlabs/tailwindcss/discussions/6557

1 like

stwilson

1 year ago

Level 16

@RemiM Thank you, sincerely, for your help and detailed reply. You're right, wildcarding the safelist slows the watch by several seconds - not okay.

Simply using the CDN,

 <script src="https://unpkg.com/@tailwindcss/browser@4"></script>

is an easy solution to let me play with all the Tailwind classes in dev tools.

I appereciate the links to the github discussions too.

1 like

Please or to participate in this conversation.