There is no built-in way to solve this within VS Code. The recommended way to solve this is by making use of the Stylelint extension to handle your CSS linting (& SCSS and/or Less, etc.). It’s very powerful and likely will improve your stylesheets beyond removing these errors for you. You need to add the … Read more
I’m using tailwindcss in a react app. Tailwindcss Intellisense plugin was not working in my VSCode but then i installed HTML CSS Support extension and now i am getting suggestions of classes. HTML CSS Support
Storybook recommends using the @storybook/addon-postcss for customizing the postCSS config from now on (instead of relying on customizing the postcss-loader): Add the postCSS addon to your installation npm i -D @storybook/addon-postcss # or yarn add -D @storybook/addon-postcss Create the postcss.config.js in the project root // postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, … Read more
<div class=”flex flex-col h-screen justify-between”> <header class=”h-10 bg-red-500″>Header</header> <main class=”mb-auto h-10 bg-green-500″>Content</main> <footer class=”h-10 bg-blue-500″>Footer</footer> </div> Class justify-between is not required, but I would leave him (for other case). So, play with h-screen and mb-auto classes. And you get this UI:
If you are using v2.x, add mode: ‘jit’ to your tailwind.config.js (no mode: ‘jit’ needed in tailwind v3) module.exports = { mode: ‘jit’, …. }; And use like this: (Without space!) class=”w-[calc(100%+2rem)]” It will produce: .w-\[calc\(100\%\+2rem\)\] { width: calc(100% + 2rem); } We can use the theme variables as well: h-[calc(100%-theme(space.24))] Tailwind v3 update Now … Read more
You can also do <div class=”flex h-screen”> <div class=”m-auto”> <h3>title</h3> <button>button</button> </div> </div>
You’re integrating Tailwind with a tool that relies on an older version of PostCSS. You can use this doc https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
If you use VS Code, you can use the PostCSS Language Support plugin. Make sure you associate your scss files with PostCSS.