Блог

Я установил Tailwind с помощью руководства и попытался обойти пользовательский конфигурационный файл tailwind, но когда я пытаюсь добавить первый, последний или групповые псевдоклассы, это не влияет на CSS. Я также ранее заметил это с inset, и я добавил раздел inset вручную. Я что-то пропустил в конфигурации или миксе?

Конфигурационный файл 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 Mix

 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'));
 

Я не эксперт в этом, но использовал Tailwind CSS из pre V1. Я заметил, что вы пытаетесь использовать функции из версии 2 (например, darkmode).

Несколько проблем:

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

очищает ли вторая очистка: [ ] первый массив?
Мой tailwind.config.js файл не содержит первых 2 строк, заканчивающихся на require(‘tailwindcss/defaultTheme’);

Я понятия не имею, на что они ссылаются, но у вас нет исходных папок для js, включенных в список очистки. Добавьте эту строку в список очистки, если ваш javascript добавляет классы

 .resources/js/**/*.js
 

Что касается webpack.mix.js файл мои последние строки таковы

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

Извините, но я не эксперт