I know it may be a silly question but I cannot find the answer anywhere.
I'm using Tailwind with CRA and CSS modules.
I've overwritten the default theme colors to my own ones.
When I try to use the colors inside my CSS modules like this,
.amountSign {
color: theme('colors.pink');
}
it seems like theme() is not recognized and in the browser the property value seems to be invalid.
Should I import something from somewhere to make theme() recognizable? Thanks in advance
Tailwind's functions and directives only work if your CSS is proccessed by Tailwind.
From what you've shared it looks like your CSS modules aren't ran through Tailwind and so Tailwind's theme() function is never compiled down to pure CSS.
This blog outlines the steps for using Tailwind with CRA.
Related
I have a template from Codecanyon and it contains compiled SCSS file which I tried to update but it doesn't work. I tried to use CSS to update the section in which the style of the SCSS is affecting but it won't work. I cleared cookies but nothing still. Even the CSS !important doesn't seem to affect the code. Please how can I get this to work?
I also tried to recompile the SCSS code but nothing seem to work
The issue has been resolved, all I did was to change the class name of the element I want to update and add my preferred CSS styling to it. I will appreciate it if anyone can provide a more suitable solution thanks.
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 know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
I am currently using IntelliJ IDEA 13 Ultimate Edition and I use Stylus as a CSS preprocessor and I really would like to add IntelliJ support for the Stylus' #import feature
Example
colors.styl contains
$nice-color = lightgreen
and foo.styl contains
#import "colors"
body
background-color $nice-color
This will evaluate to a css like this
body {
background-color: #90EE90
}
Question
My IDE will show me a nice little color-preview box next to the line-numbers in the editor.
But this only works for the colors.styl file, where the color is defined.
(https://www.jetbrains.com/img/webhelp/colorPreview.png)
I really would love to see the same preview-box in the foo.styl file, where I import and actually use this color. I already installed the Stylus plugin for IntelliJ.
Is there any way to achieve this?
I think it is not possible without changing the source of the Stylus IDEA plugin.
The question pretty much says it all.
For instance, if I were using, say, Twitter Bootstrap, could I define classes in my own SASS stylesheet that inherit from Bootstrap's CSS classes? Or does inheritance in SASS only work within the scope of a single file?
YES! its possible.
If you want all <button> elements to inherit the .btn class from Twitter Bootstrap's Default buttons
In your styles.scss file you would have to first import _bootstrap.scss:
#import "_bootstrap.scss";
Then below the import:
button { #extend .btn; }
**I might be mistaken, but if I get what you're trying to do, can't you just use the #extend .classname; command inside the element that you'd want to extend? Naturally, you should only modify your own code to preserve updatability.
To my knowledge, you have to use #import of the file containing the classes you want to use into your SASS file in order to utilize them in that file. However, I am not a SASS/SCSS expert, so someone may know of another way to remotely use them that I am not aware of.
Just as the accepted answer has shown this is possible with #import, however #import has been deprecated by sass
The Sass team discourages the continued use of the #import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the #use rule instead.
The #use rule is better suited for use now, since it does not pollute the scope of the importing (user) module. unfortunately at the time of writing the use rule is only implemented in Dart sass.