Я хочу использовать Tailwind CSS в своем приложении React, но оно не работает. Я следовал описанию его установки на сайте Tailwind, но CSS не применяется.
App.js
// import './App.css';
import './index.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from './Home/Home'
function App() {
return (
);
}
export default App;
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./public/index.html",
],
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
package.json
{
"name": "archives",
"version": "0.1.0",
"private": true,
"dependencies": {
"@tailwindcss/postcss7-compat": "^2.2.17",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"nanoid": "^4.0.0",
"picocolors": "^1.0.0",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.7.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"source-map-js": "^1.0.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"postcss-flexbugs-fixes": "^5.0.2",
"tailwindcss": "^3.1.6"
}
}
Home.js
import React from 'react';
import '../index.css';
const Home = () => {
return (
hi
);
};
export default Home;
Подробнее здесь: https://stackoverflow.com/questions/730 ... -react-app
Tailwind CSS 3 не применяется в моем приложении React ⇐ CSS
Разбираемся в CSS
-
Anonymous
1767728030
Anonymous
Я хочу использовать Tailwind CSS в своем приложении React, но оно не работает. Я следовал описанию его установки на сайте Tailwind, но CSS не применяется.
[b]App.js[/b]
// import './App.css';
import './index.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from './Home/Home'
function App() {
return (
);
}
export default App;
[b]index.css[/b]
@tailwind base;
@tailwind components;
@tailwind utilities;
[b]tailwind.config[/b]
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./public/index.html",
],
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
[b]postcss.config.js[/b]
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
[b]package.json[/b]
{
"name": "archives",
"version": "0.1.0",
"private": true,
"dependencies": {
"@tailwindcss/postcss7-compat": "^2.2.17",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"nanoid": "^4.0.0",
"picocolors": "^1.0.0",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.7.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"source-map-js": "^1.0.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"postcss-flexbugs-fixes": "^5.0.2",
"tailwindcss": "^3.1.6"
}
}
[b]Home.js[/b]
import React from 'react';
import '../index.css';
const Home = () => {
return (
hi
);
};
export default Home;
Подробнее здесь: [url]https://stackoverflow.com/questions/73025901/tailwind-css-3-is-not-being-applied-in-my-react-app[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия