New to Next.js/React here. I followed the Tailwind CSS for Next.js tutorial and added Tailwind to my project like so:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Then, per those instructions, modified the generated tailwind.config.js like so:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,jsx}",
"./components/**/*.{js,jsx}",
],
theme: {
extend: {},
},
plugins: [],
}
and globals.css like so:
#tailwind base;
#tailwind components;
#tailwind utilities;
...rest of my CSS styles are down here (there are many)
When I started up the dev server (npm run dev) I got errors complaining about it detecting nested CSS which led me to eventually find this article on fixing CSS nesting in Tailwind.
So I updated postcss.config.js to look like:
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
}
}
And now I am seeing these errors:
wait - compiling...
wait - compiling /404 (client and server)...
warn - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css
Warning
(42:5) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
warn - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css
Warning
(42:5) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
warn - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css
Warning
(42:5) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/myuser/workspace/myapp/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!/Users/myuser/workspace/myapp/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!/Users/myuser/workspace/myapp/styles/globals.css': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning
What is going on here, why am I seeing these errors/warnings and how can I fix them?
It seems like you've missed the last step. Step-4. Run the following command
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
step 1
npm install -D tailwindcss
npx tailwindcss init
step 2
Add the paths to all of your template files in your tailwind.config.js file.
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
step 3
Add the #tailwind directives for each of Tailwind’s layers to your main CSS file
#tailwind base;
#tailwind components;
#tailwind utilities;
step 4
Start the Tailwind CLI build process
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
I cleared up the nested CSS violations in my global.css file and Tailwind is now working perfectly.
Related
I want to switch the theme dynamically in my React project and my react app is build and served using Webpack. So I took inspiration from this starter app. This repo contains the example of switching between two themes at run time and is built using Craco. I tried to migrate from Craco to Webpack (Webpack sample).
After migrating to Webpack, theme switching is stopped working. When I inspect using the Chrome debugger, the code is changing, but the colors are not reflected in this change.
Can anyone help to resolve the issue? Thanks in advance.
carco sample -> https://github.com/bandrewfisher/theming-react-components.git
webpack sample -> https://github.com/bannarisoftwares/tailwind-theme-webpack-issue.git
This is working for tailwind css 2.X version, not working for tailwind css 3.X version
Seems like need to add for tailwind css 2.X version
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
}
in postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
autoprefixer: {},
tailwindcss: {},
}
}
does this work for you?
I have a React component library that is used in a React app. The component library is setup using Styleguidist and webpack. I've setup webpack to use absolute paths using:
webpackConfig: {
resolve: {
modules: [path.resolve(__dirname, 'src/'), 'node_modules'],
}
}
This works within the context of the component library. When I build the component library, the package looks like this:
/core
/components
/Table
/Row
When I import the components into my app, I get an error:
Module not found: Can't resolve components/Row in /Users/myusername/Sites/mysite/node_modules/#mypackage/core/components/Table
I understand why the paths don't match in the context of node_modules, but I would've expected Webpack to transform those import paths during the build process. Is there something I'm missing? Or is this not possible?
While Styleguidist uses webpack, it turns out the build script we were using does not, so the webpack config is irrelevant. Instead, our build script (https://www.npmjs.com/package/cod-scripts) uses babel.
We ended up having to add a separate babel.config.js file to define absolute paths for babel using the babel-plugin-module-resolver package.
npm install babel-plugin-module-resolver --saveDev
npm install #babel/preset-react --saveDev
babel.config.js
module.exports = {
plugins: [
[
'module-resolver',
{
root: ['./src'],
},
],
],
presets: ['#babel/preset-react'],
};
I created a module using CRA (Create-React-App) - typescript and published the same to npm.
My goal is to add the module as a component in another CRA created typescript project. When I try to import the module it fails with below error.
Cannot find module: 'fbdemots'. Make sure this package is installed.
I do see the modules in the path "node_modules\fbdemots".
I tried the below which did not help
Creating declaration files(d.ts) both in the module and the project which uses the module
Updating the TSConfig as mentioned in below link
Below links does not help, as I cannot change the
"module": "esnext", --> to "CommonJS" since CRA (Create-React-App) does not allow me to.
"moduleResolution": "node", "esModuleInterop" : "true"
`Cannot find module` for my own TypeScript module
Wait! Why I see the fbdemots of node_modules is a project, not component, and it can't be exported at all
If you want to publish a component, you can follow these common steps, of course there are other methods you can try.
If you don't want to use rollup/webpack or feel a bit complicated, you can just export your plain component, and then publish it.
1. Create a component and export it
// index.tsx
import React from 'react'
const Test = (props: {a: string})=> <div>{props.a}</div>
export default Test
2. Using rollup or Webpack to build it to make sure it would be usable for JS modules
Install some necessary modules
yarn add --dev rollup rollup-plugin-typescript2
Then create rollup.config.js file at root, if there are other files like '.css', '.scss', then you should install and add some plugins like rollup-plugin-sass or rollup-plugin-css-only...
// rollup.config.js
import typescript from 'rollup-plugin-typescript2';
// import sass from 'rollup-plugin-sass';
export default {
input: 'index.tsx', // the path of your source file
output: [
{
dir: 'lib',
format: 'cjs',
exports: 'named',
sourcemap: false,
strict: false,
},
],
plugins: [typescript()],
// plugins: [sass({ insert: true }), typescript()],
external: ['react', 'react-dom'],
};
3. Create lib
Using the command of rollup to build it
npx rollup -c
And then prepare package.json, LICENSE, README.md... into lib dir,
finally you can publish it
npm publish ./lib --access public
The end of the last, you can add it as a component in another CRA created typescript project!
I am building a very basic React app by including the React library script tags in my html page, and loading my components in script tags. I am not using modules or create-react-app. My components looks like this:
TIPS.JS
class Tips extends React.Component {
constructor() {
super()
}
render() {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
}
I have installed the babel transpolar:
npm install babel-cli#6 babel-preset-react-app#3
And now I can transpile my JSX component to normal JS with:
npx babel --watch src --out-dir . --presets react-app/prod
This is fine, but now I want to ALSO compile Typescript TSX, but these docs are a bit unclear on how to combine these. They refer to the Microsoft Typescript React Starter, but that uses Webpack, so it's not the same setup.
Typescript setup
nom install typescript
npx tsc --init
TSCONFIG.json
{
"compilerOptions": {
"rootDir": "src",
"outDir": "build"
},
}
Now I should be able to run npm run build but I can't find the settings for package.json.
Should I use tsc watch or babel watch ? Or can I just discard babel when using typescript?
In other words, what's the most basic setup to compile TSX components to javascript without using modules and webpack?
You can compile Typescript using Babel with #babel/preset-typescript.
npm install --save-dev #babel/preset-typescript
// .babelrc
{
"presets": ["#babel/preset-typescript"]
}
So just add this preset & add tsconfig.json to your project and you will able to transpile TS.
For more info
How can I test React-Bootstrap components with node.js outside the browser? I am using Webpack. Since I'm running headless, I specify the null-loader for styles in my webpack config:
{test: /(\.css|\.less)$/, loader: 'null-loader'}
Nevertheless, I get an error when I run mocha that shows that the style-loader is being used:
webpack:///./~/style-loader/addStyles.js?:14
return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
^
ReferenceError: window is not defined
at eval (webpack:///./~/style-loader/addStyles.js?:14:30)
at eval (webpack:///./~/style-loader/addStyles.js?:9:47)
at module.exports (webpack:///./~/style-loader/addStyles.js?:31:68)
at eval (webpack:///./~/bootstrap-webpack/bootstrap.config.js?./~/style-loader!./~/css-loader!./~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js:7:38)
[...]
It looks like this is because bootstrap-webpack is using the style loader even though my code isn't.
I've uploaded a full but minimal project to GitHub so you can take a look.
bootstrap-webpack allows you to override its config. Just create file bootstrap.config.js and specify it in the import:
bootstrap.config.js
module.exports = {
styleLoader: 'null-loader',
scripts: {
// add every bootstrap script you need
'transition': false
},
styles: {
// add every bootstrap style you need
"mixins": true,
"normalize": true,
"print": true,
"scaffolding": true,
"type": true,
}
};
App.jsx
import 'bootstrap-webpack!../../bootstrap.config.js';