I am following this example for a quick intro to postcss:
https://www.sitepoint.com/an-introduction-to-postcss/
After installing postcss and autoprefixer globally, creating a styles.css file in the root of my project and running the following command:
postcss -u autoprefixer styles.css -d public
I get the error:
Plugin Error: Cannot find module 'styles.css'
Why does it think it is is a plugin error?
Had the same issue & found this related post: Autoprefixer errors with NPM (✖ Plugin Error: Cannot find module )
The command I ran is
postcss styles.css -d dist -u autoprefixer
As the related answer shows, -u now takes multiple plugins so the order has to be modified.
Also if you use that tutorial, the example of "display: flex;" is no longer useful as it will work "as is" across browsers. Instead use
::placeholder {
color: gray;
}
to test autoprefixer
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 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
Please see https://github.com/gajus/babel-plugin-react-css-modules/issues/162 for full description of issue.
Git repo = https://github.com/basher/react-no-webpack
This is a simple POC / scaffold for a React UI lib without Webpack or Gulp but it must support CSS Modules + Sass.
I'm just trying to use Babel + Browserify.
And executing NPM scripts directly from "package.json".
I have a sample widget component that imports a CSS file, and another that imports a Sass file. The error happens when parsing the content of both CSS + Sass files - e.g. transpiler does not understand "." in the class selector.
Here's the specific error:
$ npm run watch
> react-no-webpack#1.0.0 watch C:\...path-to-project-folder...\react-no-webpack
> watchify ./src/index.js -o ./build/bundle.js -t babelify -v
C:\...path-to-project-folder...\react-no-webpack\src\lib\components\WidgetCSS\WidgetCSS.css:1
.widget {
^
ParseError: Unexpected token
Edit / Update:
I've done some more investigation, and have asked a question in react-css-modules repo too = https://github.com/gajus/react-css-modules/issues/268
ParseError: Unexpected token mean your babel not understand css syntax
react-css-modules module need transpiler css like webpack, read for more detail.
For your case you can use css-modulesify.
1) Install css modulesify
$ npm install --save css-modulesify
2) Update your package json script
"build": "browserify ./src/index.js -p [ css-modulesify -o ./build/main.css ] -o ./build/bundle.js -t babelify",
"watch": "watchify ./src/index.js -p [ css-modulesify -o ./build/main.css ] -o ./build/bundle.js -t babelify -v"
remember to include ./build/main.css to index.html for css.
Thanks #hendrathings - you are correct.
I must have misread the docs, or read about a non-webpack setup somewhere else. I've read so many articles recently that I have probably confused myself!
I have followed your suggestion - I'm now using css-modulesify.
I have a working example POC UI lib with minimal React + CSS Modules config, with both CSS and Sass syntax (using a couple of example PostCSS plugins). This can be found in my updated https://github.com/basher/react-no-webpack repo.
I have started to play with react and soemhow get stucked.
I have following code: github.com/gandra/my-lara-react-app
When I runn following code on the command-line:
npm install
webpack --config webpack.config.js
I expect to find file ./dist/bundle.js but this not happens.
Any idea why?
The file mentioned in the question, webpack.config.js contains a typo wntry, which should have been entry, i.e.
module.exports = {
entry: ['./app/main.js'],
...
}