tailwind-css

How do I get Tailwind’s active breakpoint in JavaScript?

by

From the tailwind docs, you can import your config from the tailwindcss node module: import resolveConfig from ‘tailwindcss/resolveConfig’ import tailwindConfig from ‘./tailwind.config.js’ const fullConfig = resolveConfig(tailwindConfig) fullConfig.theme.width[4] // => ‘1rem’ fullConfig.theme.screens.md // => ‘768px’ fullConfig.theme.boxShadow[‘2xl’] // => ‘0 25px 50px -12px rgba(0, 0, 0, 0.25)’ As you can see above, you can get your breakpoints … Read more

How to scope Tailwind Css

by

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; }

Error message “Uncaught TypeError: Cannot destructure property ‘basename’ of ‘React2.useContext(…)’ as it is null” [duplicate]

by

You’re using Link from react-router-dom, which is calling useContext. The context it is looking for is provided by BrowserRouter, but your app is not wrapped by a BrowserRouter. Your index.js: import { BrowserRouter } from ‘react-router-dom’ render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById(‘root’) )

Tailwind: text-overflow: ellipsis?

by

CSS property text-overflow: ellipsis; cannot be used alone. Along with text-overflow, you should use other properties like: overflow: hidden; white-space: nowrap; You can use .truncate class to achieve this. Here is the link from the Tailwind documentation. Solution of the initial problem: &__title { @apply truncate; }

Modifying hover in Tailwindcss

by

Might be a bit late but the Tailwind team is already addressing this issue in Tailwind version 3 using a feature flag: https://github.com/tailwindlabs/tailwindcss/pull/8394 Once a new version is published with these changes Starting on tailwindcss v3.1.0, you could include a feature flag in your configuration to look like: // tailwind.config.js module.exports = { future: { … Read more

Tailwind class is not working after installed

by

You can simply change the following codes in your style.css and it will work. from this @tailwind base; @tailwind components; @tailwind utilities; to this @import “tailwindcss/base”; @import “tailwindcss/components”; @import “tailwindcss/utilities”; Rest of the codes remain same. Only the above needs to be changed and you’re good to go. This usually happens in tailwind v3. Hope … Read more