Подключил 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;