I’ve found that you can use postcss-nested for this. Install the plugin, add it as the first plugin to your PostCSS config file and this should work: .tailwind { @tailwind base; @tailwind components; @tailwind utilities; @tailwind screens; }
Yes, you can use theme() directive Your colors colors: { primary: { 500: ‘#0E70ED’, 600: ‘#0552b3’ } } will be available in CSS files as .prose a.custom-link { color: theme(‘colors.primary.500’); } More info here
Add your custom color values to theme > extend > colors section in tailwind.config.js //tailwind.config.js module.exports = { theme: { extend: { colors: { ‘custom-yellow’:’#BAA333′, } }, }, }
You can also do <div class=”flex h-screen”> <div class=”m-auto”> <h3>title</h3> <button>button</button> </div> </div>