Trying out the new React Server Components (with Next.js), but when renaming _app.tsx to _app.server.tsx, TailwindCSS styles are not loaded at all (html renders fine though).
_app.tsx is the one importing the global index.css file with all the #tailwind directives.
Tried to move this css import to ...client.tsx component, but apparently Next doesn't allow it.
Has anyone had success making Tailwind work with server components?
In the tailwind.config.js file, you should apply what folders and files tailwind needs to affect like so:
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
also, check that you followed the installation proccess of tailwind into your next.js project:
https://tailwindcss.com/docs/guides/nextjs
Related
Working on a new project setup, and trying to get figure out the configuration to get .scss files to build per component. Ideally, only the necessary css files would load per component added to a page, rather than an entire combined .css file for all components. I know this can be done with JSS, but I believe should work with webpack in a CRA app.
My current project setup is:
/src/App.js
/src/components/
index.js => exports all components for easy import to the page (i.e., import {ComponentName} from './components')
/src/components/{component-name}
{component-name.js}
{component-name.scss}
Currently trying sass#v1.56.1 and sass-loader#13.2.0, but not sure about the proper setup.
Might need to do a modular setup to accomplish this or just stick with JSS?
I have a component library using storybook & TailwindCSS and a host app that's also using TaildwindCSS itself that imports the component library. When the classes are generated, I'm seeing that they're duplicated:
Both projects import TailwindCSS standardly in their index.css files which is then imported into index.tsx using import "./index.css";:
The host app does generate all the classes from the component library when imported but due to there being duplicate classes, some are being overridden due to the order (pay attention to the source and line numbers in the above image)
The component looks correct on storybook:
Host app:
Looking for advice on how to correctly import the component library within the host app?
UPDATE:
I've figured that the component library generates it's own TailwindCSS classes as expected and that's where the "duplicate" classes (inline) come from and it's being included in a single output in index.js in the dist folder. Still need a way to avoid these duplicates when imported in the host app. May need to look at changing the component library to build a separate .css file with the styles and tell the host app to generate the component library's styles to prevent these duplicates.
After reading more on the TailwindCSS documentation, I've found a resolution. Using the following information from https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries, I was able to fix my issues.
Essentially what I've now done is, on my component library, I ensured that the.css styles are extracted into it's own file and not built into a single index.js. After that, on the host app, I set the content of tailwind config to reference my component library so that it scans the src and generates those classes itself.
I'm working on a project where I want to use scss with react.
The Problem
I'm using 3 global style files, and 1 separate scss file for each component, but they seem to apply styles that I didn't even import.
File structure
This is my doubt. Your Sass files are converted to CSS file and in react if you use CSS files imported as import './somecss.css', your styles will leak out to other components. That's why they introduced CSS modules. If you are using CSS modules, there is a difference how you apply it. It's not like how a regular CSS class/id is applied.
CSS Modules let you use the same CSS class name in different files
without worrying about naming clashes.
You can get more info from docs
In a React app, we usually import CSS files into the JavaScript components.
I thought this way we inject the CSS into the final JavaScript build.
However, it seems that React (at least create-react-app) still generates separate CSS files.
Why is that?
Is there any way to force CSS stylings to be part of the final r? Kind of CSS-In-JS?
You should eject the create-react-app and change webpack config file (style-loader similar question) to not create separate file for css bundle or use html-inline-css-webpack-plugin.
I have started learning React with the "create react app with webpack" configuration. I import css like this in react component js
import '../dist/css/bootstrap.min.css';
import '../dist/css/main.css';
but when webpack compiles the css, my main.css rule is overlapping with bootstrap.css.
How do I fix this without adding '!important' in my main.css and inline styling in .js file? I also have a global css rule to set like h1,h2,h3 dll to separate files?