How to Customize Tailwind CSS?
Вставка
- Опубліковано 18 гру 2020
- This video is a basic guide for customizing Tailwind CSS based on your project. Customizing Tailwind CSS can be done in two ways:
1. Extending the existing styles
2. Overriding the existing styles
Watch to learn both the ways.
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: / shrutibalasa
Follow Thirus on Twitter: / thirusofficial
Visit my website: www.shrutibalasa.com
#tailwind #tailwindCss - Наука та технологія
![ЛЕБЕДЕВ у ДУДЯ: муху не обманешь 😁 [Пародия]](http://i.ytimg.com/vi/E74h5fvVrqs/mqdefault.jpg)
Omg, I was adding my overrides to `extend`. Thanks for the tip!
You’re welcome 😊
Thank you VERY CLEAR - we gained a lot from this.
You’re welcome 😊
Extraordinary explanation it's very useful thank you so much for your clear explanation 👌🏼👌🏼👌🏼👌🏼
You’re welcome :)
Great video, thank you.
You’re welcome!
a very helpful video for me. Thanks a lot
You’re welcome!
Great content! I have a question: I've struggled with customizing bullet points in a list to different shapes and colours, such as an arrow instead of regular dots using tailwind only?
Really great tutorial.
Thank you!
Hello respected mam thx so much, how much learn in tailwind I'm already web designer....i will wait your positive responsive thx again...
Awesome content! Thanks a lot!
A question: I defined a custom flex-2 in extend, it doesn't work, however when I take it out it and put it directly in theme works! Why so? @Thirus
Is it? Can you share a tailwind play link reproducing this?
You are amazing.
Keep posting your video .
You just need to brush your editing skill like zoom when ever require.
By the way everything is awesome
I agree. I’m using free recording softwares so far. Will invest in better tools when the time comes.
Thank you for the informative video. How to use calc in the themeing function. I tried height: {103: "calc(100px - 50px)",}, but it does not seem to work.
You have to install an npm package like postcss-calc for this
Thanks for the awesome content. I have a little question. I want to generate classes with 'vw' units for padding, margin, fontSize, width etc. Can I do it in tailwind with this customizing system?
Yes, it’s definitely possible. If you look at the existing utilities like “w-screen” - the value is 100vw
Check the “customizing” section for padding, margin etc. in the documentation and you will know how to do it.
update: you should use JIT now
not able to add custom cursor in tailwind idk whats the issue
cursor: {
'fancy': 'url(./src/images/pointer.svg), pointer',
},
added this under theme extend section
Can you share a GitHub link? You can DM @shrutibalasa on Twitter
Hello mam, I'm facing problem to add background image using tailwind css..
any help pls ?
Sure, what’s the problem? Send me a DM on Twitter @shrutibalasa. I’m more active there
Thank you for this video ma'am ! 🙏
Some days ago i started learning css seriously, my mentor told me about Tailwindcss website, you explained it very well. I subscribed !!!
I just want to ask how to decide a color set for website?, like the set of some 4 or 5 colors which match well together. I checked out tailwind css's colors page but there is collections of different shades for same color.
Thank you Vinay! I will be creating more content around Tailwind CSS in the next few days. So stay tuned.
Regarding color palette - it’s a huge topic in itself. To get a high level idea, here’s a blog post you can read - neilpatel.com/blog/website-color-scheme/
@@Thirus Sure Ma'am i'll check it out !!
thanks
Welcome!
Thank You ^^ 고마워요~~
You’re welcome
Thank You {
You’re welcome 😊
how do you add your own background color?
In the tailwind config file, within the extend block, add
color: {
‘colorName’ :
}
And then you use the class bg-colorName to get your background color
How to automatically run npm build for every changes in custom tailwindcss/tailwind.config.js?
Hi,
You can install the npm package onchange
`npm install onchange`
Add this script to `package.json` file
"watch": "onchange 'tailwind.config.js' './public/**/*.html' './src/**/*.css' -- npm run build"
(Of course please modify the file paths based on where your HTML and CSS files are)
Then you can simply use this command to watch all those files
`npm run watch`
Hope this helps
@@Thirus Nice thanks! this is me
Mam can u tell me how we calculate margin or padding in percent for tailwind blog
I didn’t understand your question. Can you explain?
@@Thirus like we want 16px margin then I calculate 16*0.0627=1rem as we want in tailwind but I don't understand how we calculate in percent
There's no calculation required. You can define your own classes with whatever name feels apt. Example, if you need to add custom margins in percentage, you could define the values something like this:
'1pc' : '1%'
And then use "m-1pc"
If you're using the latest version with 'jit' mode, you don't even need to customize it anymore. You can directly use a class like this:
m-[1%]
Does someone know how to customize classes like mx px etc?
Yes. If you want something like mx-13, you can add
‘13’ : ‘3.25rem’
in the config file under ‘margin’.
You should be able to use the class mx-13
@@Thirus Great, thanks!!!
is tailwind using react js?
I didn’t understand
How to use tailwind with sass?
There’s very little custom CSS you will write with Tailwind. Why would you want to use Sass?
@@Thirus because vscode becomes slow when installing tailwind
Just use npm watch you don't have to build every time
Yes, that could be done