I am trying to make a box with display:block to display: flex. So I used tailwind and marked it as important by using !. But it is not working. I am using svelte in my project.
my code looks like this
<div class="box !flex flex-col"></div>
to install tailwind I followed this tutorial
but it doesn't work
Related
I am using Tailwind (Nativewind) with Solito (expo React Native).
I do have a styled component with some children.
The style is properly applied on the web, but in the native version only some are applied. The gap and text-center are not working, but the background color is.
The code is something like this:
<Custom className="gap-5 bg-orange-100 text-center">
<StyledText>TEST</StyledText>
<StyledTitleBig>Login Screen</StyledTitleBig>
<...>
</Custom>
This is how the native version (android) looks:
This is how the web looks (this is the objective):
I created a GitHub issue and there I got the answer that it is the expected behavior…
React Native “doesn't accept CSS inheritance”, so the only way of making it work is to add the “text-center” className for each of the text components.
I have a logo header issue - where in mobile I want the padding to be 16px - but in desktop padding to be 128px.
<header className="p-sm md:px-xl">xxx</header>
but the desktop version is still showing the mobile padding?
I can see a file where the override looks correct called globals.css -- but then I see p-sm override in another location under <styles>
its the way that next/document is being used to integrate the head - something has created various inline styles that override the tailwinds css
update
so we have made a UI lib on its own repo with tailwindcss -- and recently replaced the UI components on another repo (also its tailwindcss defined) -- I think what's happened is when we swapped over to the UI lib components which is its own node module -- it replicated the tailwindcss twice -- there is an override happening that is knocking the styling off.
It looks like you're using the wrong syntax when defining your screens.
You shouldn't use md- or lg- when creating a responsive design but md: and lg:.
Here's the documentation: Link.
Your code should look like this:
<header className="p-sm md:px-xl">xxx</header>
If you don't have custom sizing, you can use this code instead:
<header className="p-[16px] md:px-[128px]">xxx</header>
I am trying to use a Tailwindcss RTL plugin, which generates some classes starting with [dir=rtl] or [dir=ltr]. But due to Purge CSS is removing it regardless of it's use.
Here is how I solved this
Because pure CSS is dumb, it looks for the strings that match the content it needs to purge. So to fool it, we can simply add the classes or attributes which we want to be saved.
like this
<main class="[dir=rtl] [dir=ltr] container">
{some content}
</main>
I'm trying to use the foundation library in a ReactJs basic project. I installed the react-foundation and foundation-sites following this github project: https://github.com/digiaonline/react-foundation
Now the problem is i can't use the row class. Everywhere i go on the internet, in the foundation demos and documentation, i see the row class, but i have absolutely nothing for this clasd in my CSS. Instead of that, i have the grid-x, grid-y and other stuff. Is my foundation CSS incomplete?
Here's what i did exactly:
In my project i executed the commands npm install react-foundation --save and npm install foundation-sites --save. And in my index.js file i added this line import 'foundation-sites/dist/css/foundation.min.css';
In my app.js file, i have this code :
class App extends React.Component {
render() {
return (
<div class="row">
</div>
);
}
}
But when i inspect the div in Google Chrome, there's absolutely no CSS for the row class. When i use grid-x instead, i have some style.
What am i missing?
Thanks a lot
As stated react-foundation documentation, the CSS class .row no longer exists in new versions of the foundation-sites CSS. Therefore adding className="row", will not have any effect whatsoever:
Note: Newer versions of foundation-sites do not offer out of the box
support for and components. If working with a newer
version, and components should be used instead.
This can be confirmed by review the content of dist/foundation.css. Instead use components like Grid and/or Cell as specified in the documentation for react-foundation. Or you can obviously use classes grid-x that do exist in the foundation-sites CSS.
Also keep in mind, use className instead of class in React.
I am working with an angular project along with angular material. i want to use flexbox for controlling the layout.But i have encountered two types of implementation . First , directly adding the flex content as an attribute to the div tag or so . Second , declaring a separate css class in an css file. Is there any difference between the two?
I randomly tried some examples with both but they were not reflecting the same result.
First,
<div fxFlex flexLayout="row">
//contents
</div>
Second ,
<div class="sample">
//contents
</div>
//in css file
.sample
{
display : flex;
flex-directoin : row;
}
I want to if there is any notable difference between the two.
If not , what is best to use?
Using the attribute implies that you have installed the Angular flex layout library.
Using the style itself doesn't require any dependency (other than polyfills for older browsers).
There should be no difference between the end result of both.
The main differences are in the abstraction provided by the library : with it, you have access to more display options (space-around, space-evenly, space-between ...), you can use a gap between the elements, and you can easily implement breakpoints for your app.
But everything the library does can be implemented in flex boxes with CSS.