Некоторые классы не имеют эффекта после добавления Tailwind. css в проект Vue. js. - PullRequest
Новая
       37

Некоторые классы не имеют эффекта после добавления Tailwind. css в проект Vue. js.

0 голосов
/ 23 апреля 2020

Я пытаюсь добавить Tailwind. css в проект Vue. js. Есть много ресурсов, как это сделать, большинство из них следуют тому же пути, что и это видео . Чтобы убедиться, что я нахожусь в тех же условиях, что и в видео, я создал приложение Vue с нуля, используя vue-cli с настройками по умолчанию. После этого шага я сделал следующее:

  • npm install tailwind.css
  • create src/styles/tailwind.css

  • , добавив следующее в файл css: 

    @tailwind base;

@tailwind components;

@tailwind utilities;

  • вызов npx tailwind init для создания файла tailwind.config.js в root проекта

  • create postcss.config.js в root проекта и добавьте в этот файл следующее:

module.exports = {plugins: [require ("tailwind css"), require ("autoprefixer")],};

  • добавить пользовательский цвет в файл tailwind.config.js:

module.exports = { тема: {colors: {"awesome-color": "# 56b890",}, расширение: {},}, варианты: {}, плагины: [],};

  • добавление простого элемента <p> к компоненту HelloWorld.vue, сгенерированному vue-cli
  • , пытающимся стилизовать его, используя tailwind классы

Наконец, вот проблема: I могут применять некоторые классы, такие как bg-awesome-color или text-xl, и отображать их правильно, но многие другие классы не будут работать.

Например, удаление этих классов и попытка взамен bg-black, bg-orange-500 или text-orange-500 не имеют абсолютно никакого эффекта. Я сделал что-то неправильно ? Будет ли это проблемой совместимости между Vue. js и Tailwind. css?

Я не знаю, связано ли это, я также заметил, что после добавления Tailwind. css, Vue lo go, который раньше центрировался в исходном шаблоне vue-cli, теперь выровнен по левому краю страницы.

Большое спасибо за любую помощь!

Ответы [ 2 ]

1 голос
/ 23 апреля 2020

Если вы хотите сохранить оригинальный контент, то вы должны поместить его в «расширение». 

module.exports = { 
  theme: { 
    extend: {
      colors: { 
        "awesome-color": "#56b890", 
      }, 
    }
  }, 
  variants: {}, 
  plugins: [], 
};

Подробнее на: https://tailwindcss.com/docs/configuration/

0 голосов
/ 23 апреля 2020

Я получил ответ от сопровождающего Tailwind. css после публикации проблемы. Я на самом деле потерял объект colors в tailwind.config.js, заставив его переопределить все существующие цвета с моим, таким образом фактически удалив все существующие. Вот правильный способ добавить / переопределить цвет, не удаляя все оригинальные: 

module.exports = {
  theme: {
    extend: {
      colors: {
        "awesome-color": "#56b890",
      },
    },
  },
  variants: {},
  plugins: [],
};
...