I have a next.js project. For styling I am using tailwind, scss modules and postcss. I have no overridden webpack configurations.
In development mode next.js injects styles in tags as expected, but in production it injects similar styles as *.css chunks and tag at the same time.
Next.js style duplication
Do you use Next.js' experimental optimizeCss with Tailwind or other CSS frameworks? It might be duplicating style as it injects inline CSS.
Related
How can I preload my fonts using Tailwind CSS? Perhaps in the tailwind.config.js file?
I'd like to preload fonts before UI rendering.
We are in big project like amazon. So,two branches use bootstrap 4. Now in main branch we are install tailwind css and i also added content path in tailwind.config.js. it's work perfectly...
But the problem is now getting some overwritten bootstrap by the tailwind classes...
When i remove #tailwind base, components, utilities from the global.css then bootstrap work fine. But after added those line then again bootstrap not working and it's come some tailwind classes.
So, now how can i fix it?
You can prefix all tailwind CSS classes to remove naming conflicts.
tailwind.config.js
module.exports = {
prefix: 'tw-',
}
You will need to update your classes in your codebase to reflect the prefix.
For example - <div className="flex"> would now be <div className="tw-flex">
Prefixes are only added to default tailwind classes. You need to manually prefix any custom classes or change their names to prevent conflicts with other frameworks.
Tailwind has some base styles that you can omit by disabling preflight.
tailwind.config.js
corePlugins: {
preflight: false,
}
I'm working on a project that's using the Carousel from react-bootstrap. This only works if I import "bootstrap/dist/css/bootstrap.min.css"; in the app. The issue is that doing so changes the CSS for the entire app, which has lots of existing UI that I would then need to rework. Is there a way to use the bootstrap CSS for the carousel component only, leaving the rest of my React app alone?
I've tried importing bootstrap.min.css in the file where the carousel component is used rather than in App.js. This doesn't seem to make a difference though.
Solution 1:
Bootstrap provides the option to include components selectively with scss. This requires you to have a build setup that handles scss for you, e.g. webpack, rollup or node-sass itself.
Edit: added minimal set of required scss classes. bootstrap 4.5
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/_variables";
#import "../node_modules/bootstrap/scss/_mixins";
#import "~bootstrap/scss/_carousel.scss";
The code snippet shows the main part which is required for styling the carousel. But if you have a look at the carousel.scss there are various dependencies to bootstrap functions you would have to import as well. With that it is possible to have a minimal bootstrap configuration with your required styles.
Solution 2: You might scope the component and its styles within a web component. That way the bootstrap.min.css is not leaking styles out of the carousel web component. This approach goes beyond the question and does not consider how the carousel works together with the rest of your application, as also events and JS interactions would be scoped.
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.
Is it possible to use animations and media query in react without css only using javascript or jsx?
Sure but you have to properly configure your bundler or else everything has to be inline css.