0

I found this tailwind color for tailwind css and for the material ui colors. These have nicely named color from 100 - 900 and A100 - 400 just like font. I think it would nice to use them directly on scss or css file. How would I do that/ is there a import file I can use?

coool
  • 8,085
  • 12
  • 60
  • 80
  • You could access them easily in a scss/css file if they are css variables. Sadly by default it's not the case but [this answer](https://stackoverflow.com/questions/64872861/how-to-use-css-variables-with-tailwind-css) gives a way to achieve it. – johannchopin Aug 07 '21 at 08:15

3 Answers3

4

I suggest to use LESS with TailWindCSS to benefit from Mixin.

Using Stylus:

// index.styl
$codeBackground = theme('colors.pink.800')

a
 @apply text-yellow-600 !important
 background $codeBackground !important

Output: enter image description here

WPPlumber
  • 376
  • 2
  • 9
  • thanks. I have couple of question.do you have to import some thing in index.styl for theme('colors.pink.800') to work? and would just npm install for less would make it available in my regular html/scss ? – coool Aug 11 '21 at 13:22
  • about stylus I found it working in my test without tailwind base; tailwind components; tailwind utilities; about less not tested yet in my end. see [less] (https://tailwindcss.com/docs/using-with-preprocessors#less) – WPPlumber Aug 11 '21 at 14:19
  • i don't have time right now to try if it working..but thanks for you efforts to answer – coool Aug 11 '21 at 14:43
  • don't forget to check answer as solution. – WPPlumber Aug 12 '21 at 08:24
0

I'm not sure what you're trying to do. You can just refer to the color classes in markup like..

bg-blue-400 or text-red-800

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
-5

First choose rgb in the dropdown -Step 1

Then click on any color you want. Its rgb code will be copied. Then use it anywhere in your css file without any hassle ex - color: rgb(146, 64, 14), background-color: rgb(146, 64, 14) etc.