@W1zzyy
Fullstack developer python/js/ts/bootstrap/less

Стили tailwind'a в react не грузятся, что делать?

Подключил tailwind, к react'u вроде бы все делал по докам, но почему то стили грузиться не хотят на странице.
Вот конфиг и app.tsx
const plugin = require('tailwindcss/plugin');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './src/**/*.{ js, jsx, ts, tsx, html }',
    './src/*.{ js, jsx, ts, tsx }',
    './public/*.{ html }',
    './*.{ js, jsx, ts, tsx, html }',
    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {
      borderRadius: {
        'def': '5px'
      },
      colors: {
        'pink': '#FF5391',
        'yellow': '#FFD600',
        'purple': '#A500F2',
        'main-blue': '#6C63FF',
        'dark-blue': '#564FCC',
        'gray': '#23272A',
        'dark-gray': '#181818',
      },
      fontFamily: {
        sans: ['Montserrat', 'sans-serif'],
        serif: ['Abyssinica SIL', 'serif']
      },
      maxWidth: {
        'def': '1180px'
      },
      transitionDuration: {
        DEFAULT: '400ms',
      },
    },
  },
  plugins: [
    // require('flowbite/plugin'),

    plugin(function ({ addBase, addComponents, theme }) {
      addComponents({
        '.def-link': {
          color: theme('colors.white'),

          '&:hover': {
            color: theme('colors.main-blue')
          }
        }
      })
    })],
}


import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App flex">
      <span className='text-pink'>uraaaa</span>
    </div>
  );
}
export default App;
  • Вопрос задан
  • 2574 просмотра
Пригласить эксперта
Ответы на вопрос 1
@karfogent
У меня получилось исправить эту проблему при повторном вводе npm install -D tailwindcss в консоль
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы