Laravel 11 Tailwind CSS

I am trying (through Vite) to include into the app.css everything Tailwind has on their Docs page.

Compiling Tailwind does work because some of the features work but a great deal of them are never included in the compilation of the app.css file. Some of the flex options work but not all, some colors are there but not all, etc.

What is the process of including everything of Tailwind in the app.css? All the colors, typography, flex, grid everything?

LaryAI

1 year ago

Level 58

To ensure that all of Tailwind CSS's features are included in your app.css file when using Vite with Laravel, you need to make sure that your Tailwind CSS setup is correctly configured. Here’s a step-by-step guide to help you achieve this:

Install Tailwind CSS: Make sure you have Tailwind CSS installed in your Laravel project. You can do this via npm:
```
npm install -D tailwindcss postcss autoprefixer
```
Initialize Tailwind CSS: Create a tailwind.config.js file if you haven't already:
```
npx tailwindcss init
```
Configure Tailwind CSS: Ensure your tailwind.config.js file is set up to scan all the necessary files for Tailwind classes. This typically includes your resources/views and resources/js directories:
```
module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
Include Tailwind Directives in CSS: In your resources/css/app.css (or wherever your main CSS file is), make sure you have included the Tailwind directives:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Build with Vite: Ensure your vite.config.js is set up to process your CSS with PostCSS. Here’s a basic example:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
});

Run Vite: Use the following command to start the Vite development server or build your assets:
```
npm run dev
```
or for production:
```
npm run build
```
Check for PurgeCSS: If you are still missing some styles, ensure that your tailwind.config.js is correctly set up to include all the paths where Tailwind classes are used. This is crucial because Tailwind uses PurgeCSS to remove unused styles in production, and if paths are missing, it might remove styles you are using.

By following these steps, you should be able to include all of Tailwind's features in your app.css file. If you still encounter issues, double-check your file paths and ensure that your development environment is correctly set up to watch for changes.

yougotnet

1 year ago

Level 7

@LaryAI Ah, so only the classes I use in files will be compiled; I can't just tell it to include everything whether I use them or not?

yougotnet

1 year ago

Level 7

@LaryAI

Here is the tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme'; import forms from '@tailwindcss/forms'; const colors = require('tailwindcss/colors');

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

theme: {
    extend: {
        fontFamily: {
            sans: ['Nunito', ...defaultTheme.fontFamily.sans],
        },
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            sideblue: '#5d6e89',
            aflacblue: '#00A4DD',
            ...colors,
        },
        fontSize: {
            'xs': '0.75rem',
            'sm': '0.8rem',
            'base': '1rem',
            'lg': '1.125rem',
            'xl': '1.25rem',
            '2xl': '1.5rem',
            '3xl': '2rem',
            '4xl': '2.4rem',
            '5xl': '3rem',
        },
    },
},

plugins: [forms],

};

Here is vite.config.js:

import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import path from 'path'; import tailwindcss from 'tailwindcss';

export default defineConfig({ plugins: [ laravel({ input: ["resources/css/app.css", "resources/js/app.js", "resources/js/common.js"], refresh: true, publicDirectory: 'public_html', }), ], resolve: { alias: { "~fontawesome": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-pro"), "~progress": path.resolve(__dirname,"node_modules/@progress/kendo-theme-default/scss/"), }, }, build: { outDir: "public_html/build", }, css: { postcss: { plugins: [tailwindcss()], } } });

I tried your steps and used colors like text-teal-600 and others before npm run build and some colors work and some don't (most don't).

RemiM

1 year ago

Level 16

@yougotnet

Ah, so only the classes I use in files will be compiled;

Yes, this is one of the reason to use Tailwind CSS:

Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10kB of CSS to the client.

Please or to participate in this conversation.