Laravel 10 + Vite connecting to Sass Tailwind

The article offers a simple way using which PowerShell commands you can easily connect the Tailwind CSS style sheet for the Laravel 9, 10 framework.

Warning! This list of teams is current as of February 2024. At the time of writing this article, the following versions are in use:

• vite 5.1.3
• Laravel Framework 10.45.1
• node-v20.9.0

Laravel since version 9 uses the Vite builder, and it in turn provides built-in support for preprocessors

• .scss
• .sass
• .less
• .styl
• .stylus

A simple sequence of actions is described below.

1. Via the command line we install the preprocessor, in this example we select “sass”, although “less” and “stylus” are also available if desired. The team can be found on the official website page vitejs.dev/guide/features.html#css-pre-processors
2. Create a new folder, and in it a file 'resources/scss/app.scss' - a new line must be added to the file vite.config.js
3. Writing the installation command
4. On the welcome page, you can remove all content inside the page body tags, as well as the style line body, style Next in tags head you need to enter the connection string
5. Now in the body of the welcome file we can write content and set block classes. Class descriptions are recorded in the file 'resources/scss/app.scss' However, in order for the styles to be displayed on the page, you must specify the launch command
6. In another command line tab, launch the framework server and follow the link
7. On the official page tailwindcss.com/docs/guides/laravel We find commands for installing the style library. But before downloading them, you need to pause the server. Please note that in the file package.json new dependencies with the specified names have been formed
8. Create a new file postcss.config.js
9. Two configuration files appeared in our project. On the same page of the official website we find the code that needs to be added to the file tailwind.config.js
10. Changes need to be made to the file resources\css\app.css. On the same page of the official website we find a list that we add to the specified address. Please note that this entry can be left at the top of the file resources\scss\app.scss
11. After the changes have been made, run the vite compiler again

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

Ctrl + C

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ], //add this lines
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;