In these days i'm struggling with the conversion from a react app to a react-native app;
in this react app i used tailwind to stylize components thus i need to convert tailwind classes to inline css so that i can convert it to react native stylesheet using a tool online.
Is there a way or tool to get css from Tailwind code?
i.e.
(Tailwind code) "w-full h-full bg-black" after conversion should be (vanilla css) { width : 100%; height : 100%; background-color : black;}
Thanks in advance!
The solution to this problem is : Tailwind-rn (as Mando replied)
Thanks to this packet it is possible to copy the entire tailwind code from react project and paste it as param of the function tailwind() which returns a react-native stylesheet object.
Here's the docs :
https://github.com/vadimdemedes/tailwind-rn
This is a very specific scenario that has a very specific solution.
In a more general case (that you really want to extract the vanilla css of any HTML file using tailwindcss), there is a quick tutorial for that.
Extracting TailwindCSS from HTML
Related
is there any lib that can take a dom element and return a string with vanilla css, to use inside a webproject?
const styles = TailwindToStyles('<div class="bg-teal-100 m-10">Lorem ipsum</div> ')
result of styles is
.bg-teall-100 {
background-color: #e6fffa;
}
.m-10{
margin: 40px
}
gregor
I was looking for a similar tool that can convert the tailwind class to CSS. I ran into one Reddit Thread. There are various tools listed out there.
The one that is simpler and closer to what I was looking for is this app to convert the tailwind class to CSS.
Here is the GitHub link: https://github.com/Devzstudio/tailwind_to_css
Live demo: https://tailwind-to-css.vercel.app/
FOR REACT NATIVE
Thanks to this packet it is possible to copy the entire tailwind code from react project and paste it as a param of the function tailwind() which returns a react-native stylesheet object.
Here's the doc :
https://github.com/vadimdemedes/tailwind-rn
I had a similar problem and solved it by
firstly create an Iframe
mount the tailwind CDN and then insert the html string to the body
extract the generated styles from the head and use.
I released a npm package that does this, check it out here https://www.npmjs.com/package/tailwind-to-css
I'm currently using bootstrap for my modal component but our current project has a css file that is using the same class with bootstrap (.Modal,.Modal-header).
The css styling of both files was messing the modal design.
Any solution for this?
Update
I use ::ng-deep to my css so I can specifically target without conflicting other css file.
I think you should not use Bootstrap components in your class. If this was not helpful, please check ask from https://stackoverflow.com/users/395910/terry or https://stackoverflow.com/users/8213994/aman-gojariya. They helped me too.
I'm going to set up a new project and would like to have these two packages together, but not sure, so the question is that using Tailwindcss with antdesign Is a good practice?
Does anyone have any experiences?
Each package has its own theme manager for instance for colors, typography, dark mode and so on. How do you manage theme, with tailwinds or antd or both? And why?
Both packages have Grid support, which one would you prefer?
Let's have your insights?
After some research, I found these results
Some examples that uses both libs:
https://github.com/plamworapot/next-antd-tailwindcss
https://github.com/dospolov/react-redux-saga-antd-tailwind-boilerplate
https://github.com/cunhamuril/pocs
It recommended trying to commit to only one framework
Tailwind is pretty much a design system using utility classes to make writing css easier therefore it can be pretty much used with any other ui library just make sure to disable the default styling that Tailwind inject into your default styling by disabling the preflight option in config :
module.exports = {
corePlugins: {
preflight: false,
}
}
One slight issue with using both ant-design and tailwind-css is tailwind's some of default styles will break ant-design components...
I recently came a cross an issue where ant-design image preview was not functioning correctly and the image was not centered.
expected result
image one
vs what I got when using tailwind with ant-design
image two
turns out tailwind will change default image display property from "inline-block" to "block" and breaks tailwind image preview component
I resolved my issue by reseting display property on images
img {
display: unset !important;
}
apart from this little tweaks you will be good to go using both of them
There's no problem to use Tailwind CSS and Ant Design together.
Tailwind CSS could be used to custom styling on Ant Design components.
Check this link to see an example with Next, Ant Design and Tailwind CSS:
https://github.com/plamworapot/next-antd-tailwindcss
You can use Bootstrap with ant design right? Think Tailwind same as Bootstrap. Tailwind is a CSS library you can use it with any setup and framework there no extra configurations needed. Just pass the Tailwind class names.
When it comes to theming. It's a context. Ant design will grab it's context and tailwind grab it's. We don't need to think or worry about it
Well for me I needed to use tailwind to override the default ant design css styling so what I ended up doing was adding important:true to the tailwind config object (as per tailwind docs tailwind config docs for important config)
module.exports = {
....,
important:true,
};
I know some people frown at using important (as do I) but I think this is one of the uses it was created for.
I have a web app built by Web app, which takes a lot of time to first loading.
After investigation- I've tried a lot of improvements, also that one of using only critical CSS on server side rendering.
but now' after SSR has finished- React generates a lot more CSS rules- which are not used at this point,
so my question is:
Is that possible to split CSS and load them on demand (i.e.: on route change)?
Any help will be appreciated.
Thanks in advance!
Try using css-modules.
/* style.css */
.className {
color: green;
}
Let's say you have the above styles file. You can use the below code to apply the styles.
import styles from "./style.css";
const ExampleComponent = () => (
<div className={styles.className}>
Hello World!
</div>
);
You should do the webpack config to make importing CSS files to work.
css-modules documentation
Dynamically imported components / Async components react loadable.
I solved the problem by using the amazing package: 'react-universal-component',
you can read about it more here and here.
You can use then the css chunks, or the way I did it-
split css files according to your components, and call them from the component itself, without using a 'wholeCss.css' file or something like this.
This way, you can be sure that no needed css was not loaded.
I am building a chrome extension that attaches a widget sort of thing to gmail message. It appears below every email (something like a gmail contextual gadget) when the user is on gmail.com site.
I looked at few css frameworks like twitter bootstrap to use in my app. When I used it in mywidget, it messed with the existing gmail styles because of css class name clash. Is there any other framework that I can use where there would be no name clash? I came across jquery-ui framework. All the classnames here start with .ui-* thereby causing no name clash. Are there any other css frameworks like this with unique class names?
Update 2: Here is a gist of v3.1.1 provided by #GFoley83
Update: The pastebin joined below is the Twitter Bootstrap version 2.0.4
You should definitively use the up-to-date version and compile it yourself.
Here is what I did with the bootstrap less files :
.tw-bs {
#import "less/bootstrap.less";
}
And this is the result : http://pastebin.com/vXgRNDSZ
Demo (jsfiddle)
If you don't like tw-bs you can easily do a find/replace, there shouldn't be any conflict.
I used #Sherbrow solution but had to add the responsive file too.
.my-bootstrap-container {
#import "less/bootstrap.less";
#import "less/responsive.less";
}
and then run
node_modules/less/bin/lessc demo.less -x > demo.css
If somebody needs the complete step by step tutorial how to compile bootstrap for your own namespaced container I made a blog post about it http://joomla.digital-peak.com/blog/151-how-to-add-bootstrap-to-your-joomla-2-5-extension
The last part is for Joomla but the beginning can be used globally. It has also a link to the latest compiled bootstrap version 2.3.2. Just make a search and replace for .dp-container.
2016 Update: A future way to mitigate this issue (rather than having to recompile bootstrap) is to take advantage of web components, specifically shadow DOM. This allows your app to be self contained (almost like an iFrame) without the web browser having to open a separate page / losing the ability to communicate between pages.
say your component is contained in <div id='plugin'>...</div>
You can move what's inside that div to a tag in your head, eg.
<template id="template"><!--Your Code Here--></template>
Your template can include all the bootstrap link tags and js you want. Then in your javascript/bookmarklet, you can write
var pluginRoot = document.querySelector('plugin').createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
pluginRoot.appendChild(clone);
You can read a lot more about Web Components (along with Shadow DOM) here: http://webcomponents.org/articles/introduction-to-shadow-dom/
I started off using jquery ui - http://jqueryui.com/ because it has its own css classes which don't clash with gmail. YUI is another such framework that I found. But Sherbrow showed how I can use bootstrap css with our own unique css style names.
The currently accepted answer did not render forms correctly (using SASS and bootstrap 4 beta). The following works for me:
.bootstrap {
#import 'bootstrap-4.0.0-beta/scss/bootstrap.scss';
box-sizing: border-box;
}
The box-sizing is important, because, when compiling your SASS stylesheet, the following will be generated.
.bootstrap html {
box-sizing: border-box;
...
}
I.e. the box-sizing property will be placed on an html element inside an element with class="bootstrap" - which of course will not exist. There may be other styles on html and body that you may want to manually add to your styles.
And now you can place content styled using bootstrap inside a bootstrap class:
<div class="bootstrap">
<div class="container">
...
</div>
</div>