I am using tailwindcss for the first time and especially in a react app. I followed the documentation, read some articles and watched some videos. I have my react-app running but tailwindcss classes do not reflect on the application. I have restarted the project from scratch severally but I still face the same issue.
Here is my package.json
I had to upgrade the react-scripts
npm i react-scripts#latest
This is happening because of installing tailwind in Devdependencies. Try reinstalling without -D
What I have done is
Updating version of tailwindcss,postcss,autoprefixer and react-scripts to the latest version.
Replacing tailwind.config content with
content: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"],
Try
import styles from "./index.css"
In your .js/.jsx where you want to use the Tailwindcss
your index.css must contain
#tailwind base;
#tailwind components;
#tailwind utilities;
For react applications, there are dedicated tailwind CSS docs. In tailwind.config.js inside module.exports changed the content from content: ["./src/**/*.{html,js}"] to this
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
this fixed my issue
I fixed this issue by reinstalling autoprefixer#^9.8.6. This video pointed out rightly https://youtu.be/v6Sy6VP2yOc
Firstly I have followed all the steps to install tailwind in my project using this.
And then tried to fix the issue by:
npm install tailwindcss postcss autoprefixer#^9.8.6
npm install react-scripts#latest
do
npm i tailwindcss postcss-cli autoprefixer#^9.8.6
I was only able to solve this issue by installing these into the dependencies:
npm install tailwindcss postcss autoprefixer
all the configurations from https://tailwindcss.com/docs/guides/create-react-app tailwind docs didn't work for me, then I just went to
tailwind.config file
then changed the content to link to just one tsx file
content: [
"./src/page/attendee/Home.tsx",
],
and it worked for all of my components
Installing postcss and autoprefixer to dev dependencies along with tailwindcss worked for me
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Related
I installed tailwindcss inside of my Next.js application. This was the error message that I received
error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: Cannot find module 'xwind/babel'
This is how I installed the Next.js application:
npx create-next-app -e with-tailwindcss ./
These are the dependencies I installed:
npm install graphql graphql-request html-react-parser moment react-multi-carousel sass
Happened to me as well just few minutes ago. Not sure if that is the same case for you. It created for me components folder, .babelrc file and js files in pages folder. Not sure if that is your case, but that's what happened to me. In case just follow with solution below.
Solution
Remove .bablerc file and components folder along with js files in pages folder.
More details
This is strange because if you look at the repository of Next.js example with-tailwindcss. It doesn't have those. Not sure how that happened. We can elaborate more in the comments.
Also plugin for babel xwind/babel does have dependency check to allow only tailwindcss version <2. There is an issue for that. In my opinion this repo is unmaintained and will either get forked and replaced as a main for npm package or something similar.
The create-next-app is installing with-tailwind-emotion template instead of with-tailwind for some reason.
For now, a good way is to create a normal typescript template with create-next-app and add tailwind manually.
So your steps would be:
Step 1:
without typescript:
npx create-next-app ./
or with typescript:
npx create-next-app --ts ./
Step 2:
Docs to install tailwind with next.js:
https://tailwindcss.com/docs/guides/nextjs
I am using tailwindcss for the first time and especially in a react app. I followed the documentation, read some articles and watched some videos. I have my react-app running but tailwindcss classes do not reflect on the application. I have restarted the project from scratch severally but I still face the same issue.
Here is my package.json
I had to upgrade the react-scripts
npm i react-scripts#latest
This is happening because of installing tailwind in Devdependencies. Try reinstalling without -D
What I have done is
Updating version of tailwindcss,postcss,autoprefixer and react-scripts to the latest version.
Replacing tailwind.config content with
content: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"],
Try
import styles from "./index.css"
In your .js/.jsx where you want to use the Tailwindcss
your index.css must contain
#tailwind base;
#tailwind components;
#tailwind utilities;
For react applications, there are dedicated tailwind CSS docs. In tailwind.config.js inside module.exports changed the content from content: ["./src/**/*.{html,js}"] to this
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
this fixed my issue
I fixed this issue by reinstalling autoprefixer#^9.8.6. This video pointed out rightly https://youtu.be/v6Sy6VP2yOc
Firstly I have followed all the steps to install tailwind in my project using this.
And then tried to fix the issue by:
npm install tailwindcss postcss autoprefixer#^9.8.6
npm install react-scripts#latest
do
npm i tailwindcss postcss-cli autoprefixer#^9.8.6
I was only able to solve this issue by installing these into the dependencies:
npm install tailwindcss postcss autoprefixer
all the configurations from https://tailwindcss.com/docs/guides/create-react-app tailwind docs didn't work for me, then I just went to
tailwind.config file
then changed the content to link to just one tsx file
content: [
"./src/page/attendee/Home.tsx",
],
and it worked for all of my components
Installing postcss and autoprefixer to dev dependencies along with tailwindcss worked for me
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
I'm very new to react-native, I've searched a lot about this, but it seems that link has been removed in react-native V0.69.1.
I don't know how to link custom fonts in my project.
project structure:
android
ios
src
|___assets
|___fonts/all of my fonts with '.ttf'
I've created react-native.config.js at the root of my project with:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./src/assets/fonts/'],
};
and created a <Text style={{fontFamily: 'Splash-Regular',}}>some text</Text> but no luck!
Run npx react-native-asset command instead of npx react-native link. As the link and unlink command is deprecated for the react native version 0.69
For me yarn dlx react-native-asset worked perfectly.
Your set up is ok but after Link font you need to reinstall app and then check it should work
Try this command : react-native link or npx react-native link
if this does not work try resetting the cache
For React Native
react-native start --reset-cache
for npm
npm start -- --reset-cache
// if still does not work you can try manually by copying the fonts file in following folder for android.
your_app\android\app\src\main\assets\fonts
(your_app\android\app\src\main\assets\fonts\xyz.ttf)
I had a problem following including theming in ExtReact project.
I did all of offered steps:
npm install -g #extjs/reactor # adds ext-react cli to your path
ext-react generate theme --name my-theme
and i put:
new ExtReactWebpackPlugin({
theme: './ext-react/packages/my-theme'
})
inside of webpack.config.dev.js and inside of webpack.config.dev.js
but still, it doesn't work. what do I miss?
the answer is:
JUST DO:
npm install
after that!
pure simple npm install will finish job for you.
I am newbie in react.js. I have been following instruction in how-to-do-simple-form-validation-in-reactjs and I can run http://localhost:3000/
But after adding bootstrap in index.js, I got this error
Failed to compile ./src/index.js Module not found: Can't resolve
'bootstrap/dist/css/bootstrap-theme.css' in
'C:\react-form-validation-demo\src'
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
If I remove these two lines below, it works:
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
In Bootstrap version 4, the file 'bootstrap-theme.css' has been removed, according to the issue on GitHub. See the change history for details.
If you want to continue using version 4, remove this import, else downgrade to version 3.
This error is caused by a misconfiguration, version mismatch or corrupted bootstrap install.
If you've got bootstrap and react-bootstrap installed already via some variation of:
npm install --save bootstrap#^4.0.0-alpha.6 react-bootstrap#^0.32.1
(Check if your package.json contains "bootstrap" and "react-bootstrap" if your not sure.)
Just install a different version of bootstrap and rebuild your project. That should replace or add that file (bootstrap/dist/css/bootstrap-theme.css) to that folder.
A lower version of bootstrap worked for me as recommended in my create-react-app generated README.md:
npm install --save react-bootstrap bootstrap#3
Adding Bootstrap
You don’t have to use React
Bootstrap together with React but
it is a popular library for integrating Bootstrap with React apps. If
you need it, you can integrate it with Create React App by following
these steps:
Install React Bootstrap and Bootstrap from npm. React Bootstrap does
not include Bootstrap CSS so this needs to be installed as well:
sh npm install --save react-bootstrap bootstrap#3
Alternatively you may use yarn:
sh yarn add react-bootstrap bootstrap#3
reinstall the bootstrap and don't forget to mention --save to the command to save it to the node modules this solved the problem for me.
sudo npm install bootstrap --save
Adding the solution to the cause I ran into - it was my miss, but still unclear when reading the other answers.
If react-bootstrap is installed solo like this:
npm install --save react-bootstrap
then bootstrap will be missing. Try the following to correct:
npm install --save bootstrap
The correct way to install initially is as follows:
npm install --save react-bootstrap bootstrap
Install the bootstrap using the below command.
npm install react-bootstrap bootstrap
Then include the below line in the index.js file.
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
I got the same problem and this is how I resolved the problem.
First of all delete the node_modules directory from the project and then install bootstrap with below command.
npm install
npm i bootstrap
Then, you can add the below import to the index.js
import 'bootstrap/dist/css/bootstrap.min.css';
npm install --save bootstrap#^4.0.0-alpha.6 react-bootstrap#^0.32.1
i face same problem but after installing above packages it work well,
may b you should also install same packages
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
Source: github
Remove
import 'bootstrap/dist/css/bootstrap-theme.css'
That worked for me.
I faced the same issue, but my project was not created with create-react-app, mine was using webpack.
I can answer how I resolved it for webpack, maybe you can find the changes required for create-react-app after you go through this answer.
First I installed these two modules-
style-loader
css-loader
Then I modified the webpack.config.js file and added these lines inside the module.rules array.
{
test: /\.css$/,
loader: 'style-loader'
},
{
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
This resolved the error in my project. You can also refer to this Github issue thread once, may be that may help you: https://github.com/facebook/create-react-app/issues/301
Check if you have bootstrap in package.json file .
If it is there remove and use the below commands to reinstall or install if it is not there.
npm install --save bootstrap
Some times is writing error
bootstrap/dist/css/bootstrap.min.css
boostrap/dist/css/bootstrap.min.css
check this tip, sometimes happend
You can also check that your package.json imported name of dependancy are not the same.
It is possible that when you installed bootstrap you were not in the directory that create-react-app created (that was the source of my problem). You can check with: npm list, which looks for locally installed packages.
Then scroll all the way to the top and see if you can find bootstrap listed there.
Stop the npm server than restart it. It'll be solved if you installed the packages perfectly.
Make sure bootstrap and react-bootstrap are installed.
npm install bootstrap react-bootstrap
I had simply reinstalled the previous Bootstrap version which I installed in my project folder and it worked.
from the "resource/js/app.js" remove require('./bootstrap')
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
You need to install both packages reactstrap and bootstrap by running these commands:
npm i reactstrap
npm i bootstrap