How to use CSS clases with Tailwind CSS? - css

I am building a site with Next.js and Tailwind and wanted to know if there is any way you can use Tailwind CSS classes along with Next.js classes. For example:
<img src={user.picture} className="rounded"{styles.pfp}></img>
or perhaps something like
<img src={user.picture} className=`rounded{styles.pfp}`></img>
Is there any way to do that? Do let me know if there is.


Yes, the way to do it would be like this:
<img src={user.picture} className={`rounded ${styles.pfp}`}></img>
with rounded being the Tailwind class and styles.pfp being your class.

Related

Overriding all existing CSS styles?

I have one simple question that I couldn't find a definitive answer for as of yet. I want to change the styling of a website that already has extensive CSS applied. I cannot remove or edit these existing files, only add my own. Is there a way to override all existing CSS styles, or even remove them, through a new file? Or is the only solution to override each style individually, by using more specific selectors, the !important keyword, and so on?
I am very new to web design, so I hope you'll forgive this (maybe very simple) question.

yes important can override it but there are specificity overriding also.
Example
<div class="main">
<div class="test-wrapper">
<div class="box s-1 h-1">
</div>
</div>
</div>
.main .test-wrapper .box{}
if I want to override this
increase the specificity
.main .test-wrapper .box.s-1{}
https://www.w3schools.com/css/css_selectors.asp

add href to a link via CSS

Tell me how to add href to a link via CSS. How to do it in the standard way is clear.
<div>
Button
</div>
But I need pure HTML. And in CSS, specify which address to make the transition to.
<div>
<a class="button-click"></a>
</div>
.button-click a {href:"https://example.com"}
How do I specify a path in CSS?

CSS cannot be used to perform action or make changes to DOM. Its used for presentation purpose.
You can use script to do the manipulation not css.

Is there a way in CSS to move an element in the DOM

I think this is very unlikely but is there any way in CSS to achieve moving elements in the DOM? Like moving jt-menu-item-price into the jt-header in the following?
<div class='jt-row'>
<div class='jt-header'>this is what I need done</div><div class='jt-menu-item-price'>37.23</div>
</div>
<div class='jt-row'>
<div class='jt-header'>this is what I need done<div class='jt-menu-item-price'>37.23</div></div>
</div>

Not using CSS, no. You can manipulate the DOM using JavaScript, but not with CSS. You could 'visually' move it with CSS, but that wouldn't affect the DOM structure, just how it is presented.

You have to use Javascript to manipulate the DOM. CSS never affects the DOM, just let you style it.

How to achieve a text-muted effect for a label

I have the following label:
<label for="name" class="control-label"><h5 class="text-muted">Name</h5></label>.
I would like to have a text-muted effect for the label text, but my markup above does not accomplish that.
What is the right way of doing this?

I am sorry to ask, but what is your CSS of the .class-muted ?
Didn't you forget to write the code to the css file?
Here's the working fiddle
http://jsfiddle.net/2Q2Rz/1/
Update
If you are using Twitter Bootstrap 2.3.2 or older, there's no .text-muted class, it is .muted according to the documentation
The .text-muted class appears only in Twitter Bootstrap 3

CKE: How to add css to my plugin?

I've made plugin by this tutorial.
http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin
It adds this code into the cursor position:
<div class="cut" contenteditable="false" ><!-- CUT --></div>
Woundering how to add css for it.
Now I've added my own css for this into contents.css, but I'm sure there is a way to connect css from plygin's folder.
How do I?

Did you take a look at this:
http://docs.ckeditor.com/#!/api/CKEDITOR.stylesSet
I think the addExternal will do the job for you.

Resources