Laravel Mix 和 Tailwind CSS

Question

我使用教程安装了 Tailwind，并尝试使用自定义 Tailwind 配置文件，但是当我尝试添加第一个、最后一个或组伪类时，它不会影响 CSS。我之前也注意到了这一点，我手动添加了 inset 部分。我在 config 或 Mix 中遗漏了什么吗？

Tailwind 配置文件

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 混合文件

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

我不是这方面的专家，但我使用了 V1 之前的 Tailwind CSS。我注意到您正在尝试使用 V2 中的功能（例如暗模式）。

几个问题：

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

第二个 purge: [ ] 是否清除第一个数组？ 我的 tailwind.config.js 文件没有以 require('tailwindcss/defaultTheme'); 结尾的前 2 行；

我不知道这些引用的是什么，但是您是否没有将 js 的源文件夹包含在清除列表中。如果您的 javascript 添加了类，请将此行添加到清除列表中

.resources/js/**/*.js

至于 webpack.mix.js 文件，我的最后几行是

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

对不起，我不是专家