Laravel Mix and Tailwind CSS

Question

I installed Tailwind using a tutorial and tried working around with a custom tailwind config file, but when I try to add first, last, or group pseudo-classes, it doesn't affect the CSS. I also previously noticed this with inset, and I added the inset section manually. Am I missing anything in config or Mix?

Tailwind config file

const { rotate } = require('tailwindcss/defaultTheme');
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: [
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
      cursor: {
        'none': 'none'
      },
      opacity: {
        '0': '0',
        '25': '.25',
        '50': '.5',
        '75': '.75',
        '10': '.1',
        '20': '.2',
        '30': '.3',
        '40': '.4',
        '50': '.5',
        '60': '.6',
        '70': '.7',
        '80': '.8',
        '90': '.9',
        '100': '1',
      },
      zIndex: {
        '-1' : -1,
        '0': 0,
       '10': 10,
       '20': 20,
       '30': 30,
       '40': 40,
       '50': 50,
       '25': 25,
       '50': 50,
       '75': 75,
       '100': 100,
        'auto': 'auto',
      },
      inset: (theme, { negative }) => ({
        auto: 'auto',
        ...theme('spacing'),
        ...negative(theme('spacing')),
        '1/2': '50%',
        '1/3': '33.333333%',
        '2/3': '66.666667%',
        '1/4': '25%',
        '2/4': '50%',
        '3/4': '75%',
        full: '100%',
        '-1/2': '-50%',
        '-1/3': '-33.333333%',
        '-2/3': '-66.666667%',
        '-1/4': '-25%',
        '-2/4': '-50%',
        '-3/4': '-75%',
        '-full': '-100%',
      }),
      colors: {
        white:'#ffffff',
        gray: {
          100: "#D2D2D2",
          200: "#BCBCBC",
          300: "#A5A5A5",
          400: "#8F8F8F",
          500: "#797979",
          600: "#626262",
          700: "#4C4C4C",
          800: "#353535",
          900: "#1F1F1F",
        },
        orange: {
          100: "#FFDFCC",
          200: "#FFCFB3",
          300: "#FFBF99",
          400: "#FFB080",
          500: "#FFA066",
          600: "#FF904D",
          700: "#FF8033",
          800: "#FF701A",
          900: "#FF6000",
        },
      },
      rotate:{
        '-180': '-180deg',
        '-90': '-90deg',
        '-45': '-45deg',
        '0': '0',
        '45': '45deg',
        '90': '90deg',
        '135': '135deg',
        '180': '180deg',
        '270': '270deg',
        '360': '360deg'
      },
      borderWidth: {
        DEFAULT: '1px',
        '0': '0',
        '2': '2px',
        '3': '3px',
        '4': '4px',
        '6': '6px',
        '8': '8px',
        '10': '10px',
        '12': '12px',
        '14': '14px',
        '16': '16px'
      },
      extend: {
        height:{
          '5.5/6': '91.6667%'
        },
        fontFamily: {
            sans: ['Arial', ...defaultTheme.fontFamily.sans],
        },
        transitionDuration: {
          '2000': '2000ms',
          '3000' : '3000ms',
        },
        transitionProperty: {
          'top': 'top',
          'left': 'left',
        },
        lineHeight:{
          12 : '3rem',
          13: '3.25rem',
          14: '3.5rem'
        },
      },
    },
    variants: (theme) => ({
      ...theme('variants'),
      padding: ['first','last'],
      margin: ['first','last'],
      backgroundColor: ['first'],
      textColor: ['first'],
      outline: ['active','focus'],
      position: ['first','last'],
      opacity: ['responsive', 'hover', 'focus', 'disabled'],
      borderRadius: ['hover', 'focus'],
      width:['group-hover']
    }),
    plugins: [
      require('@tailwindcss/ui'),
    ],
};

Laravel Mix File

const mix = require('laravel-mix');
const atImport = require('postcss-import');
const tailwindcss = require('tailwindcss');
mix.browserSync('localhost:8000');
/*
 |--------------------------------------------------------------------------
 | 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')
    .js('resources/js/admin.js','public/js')
    .sass('resources/scss/app.scss', 'public/css')
    .sass('resources/scss/admin.scss','public/css')
    .options({
        processCssUrls: false,
        postCss: [ 
            atImport(),
            tailwindcss('./tailwind.config.js') 
        ],
    })
    .webpackConfig(require('./webpack.config'));

Answer 1

I am not an expert in this but have used Tailwind CSS from pre V1. I notice that you are trying to use features from V2, (eg darkmode).

Several issues:

purge: [
    './vendor/laravel/jetstream/**/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
],
purge: [],

does the second purge: [ ] clear the first array? My tailwind.config.js file does not have the first 2 lines ending with require('tailwindcss/defaultTheme');

I have no idea what these are referencing, but do you not have your source folders for js included in the purge list. Add this line to the purge list if your javascript adds classes

.resources/js/**/*.js

As for the webpack.mix.js file my last lines are

.options({
     processCssUrls: false,
     postCss: [ tailwindcss('./tailwind.config.js') ],
});

Sorry but I am not an expert