Tools Configurations

README.md

Tools Configuration & Code Formatters

Postcss:

yarn add -D postcss postcss-cli tailwindcss autoprefixer cssnano

Postcss Build Command:

postcss ./dev -o ./src

---

laravel-vite-plugin w/ Tailwindcss:

yarn add -D laravel-vite-plugin tailwindcss autoprefixer cssnano

Vite's Commands:

"scripts": {
    "dev":"vite",
    "build":"vite build"
}

• Don't forget to import both css and js file in your blade templates:

@vite(['resources/css/app.css', 'resources/js/app.js'])

• Full upgrade guide from laravel-mix to laravel-vite-plugin
• Tailwindcss with Vite

editorconfig

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

# quote = single

[*.md]
trim_trailing_whitespace = false

[*.{yml,yaml}]
indent_size = 2

postcss.config.js

// npx tailwindcss init -p
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {
      preset: 'default',
    }
  },
}

prettierrc

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "arrowParens": "always"
}

tailwind.config.js

module.exports = {
    content: [
        './pages/**.{js,jsx,ts,tsx}',
        './components/**/*.{js,jsx,ts,tsx}'
    ],
    theme: {
        extend: {
        },
    },
    plugins: [
        // require('@tailwindcss/typography'),
        // require('@tailwindcss/forms'),
        // require('@tailwindcss/line-clamp'),
        // require('@tailwindcss/aspect-ratio'),
    ],
}

tsconfig.json

{
    "compilerOptions": {
          /* Basic Options */
          "target": "ES2016",
          "module": "commonjs",
          "lib": ["DOM", "DOM.Iterable", "ESNext"],
          "allowJs": true,
          "checkJs": false,
          "jsx": "preserve",
          "incremental": true,
          "noEmit": true,
          "outDir": "./public",
          "rootDir": "./dev",
          "watch": true,
          
          /* Strict Type-Checking Options */
          "strict": true,
          "noImplicitAny": true,
          "strictNullChecks": true,
           
          /* Additional Checks */
          "noUnusedLocals": true,
          "noUnusedParameters": true,
          "noImplicitReturns": false,
          "noFallthroughCasesInSwitch": true,
          "allowSyntheticDefaultImports": true,
          "strictPropertyInitialization": true,
          "forceConsistentCasingInFileNames": true,
            
           /* Module Resolution Options */
          "baseUrl": ".",
          "paths": {
            /* Support absolute /imports/* with a leading '/' */
            "@/*": ["src/*"]
          },
          "moduleResolution": "Node",
          "resolveJsonModule": true,
          "types": ["node"],
          "esModuleInterop": true,
          "skipLibCheck": true,
          "isolatedModules": true
        },
      "exclude": ["node_modules"],
      "include": ["src/**/*.ts","src/**/*.tsx"]
 }

webpack.mix.js

const mix = require('laravel-mix');

//Do not put a forward slash at the start.
mix.setPublicPath('path/to/compile');
mix.options({
    processCssUrls: false
});
//Do not put a forward slash at the start.
mix.js('path/to/js', 'path/to/compiled')
    .postCss('path/to/css', 'path/to/compiled', [
        require('tailwindcss'),
        require('autoprefixer'),
        require('cssnano')({
            preset: 'default',
        }),
    ]);
mix.disableSuccessNotifications();