enigmare/v2-crawler
1904
1{"id":"stack-70943054","source":"stackoverflow","questionId":70943054,"title":"Tailwind not working properly in a monorepo architecture","tags":["javascript","reactjs","next.js","tailwind-css","darkmode"],"text":"Title: Tailwind not working properly in a monorepo architecture\nTags: javascript, reactjs, next.js, tailwind-css, darkmode\nSource: Stack Overflow\n\nQuestion:\nI am using a monorepo architecture using yarn workspaces, in which Tailwind CSS is at the root of the project. In one of the workspaces I am using React and I have added Tailwind utilities into its styles. Tailwind is working fine in the project yet\n\n- Whenever I define new colors it is not working.\n\n- Moreover I also want to implement darkMode to which in `tailwind.config.js` i have added `darkMode: 'class'` and have made a context wrapper to set class='dark' to html root, on changing the theme `\nMy folder structure\n\n```\nProject\n | \n +-- packages\n | | \n | \\-- react-project-1\n | | |\n | | +--app.js\n | | +--app.css\n | | \n | \\-- react-project-2\n | \n +-- tailwind.config.js\n```\n\nMy tailwind.config.js\n\n```\nmodule.exports = {\n mode: 'jit',\n purge: [\n './packages/react-project-1/src/**/*.{js,ts,jsx,tsx}',\n './packages/react-project-2/src/**/*.{js,ts,jsx,tsx}',\n ],\n darkMode: 'class', \n theme: {\n colors: {\n orange: '#E05507',\n },\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n};\n```\n\nAny ideas?\n\n========================================\n\nTop Answer:\nAdding the colors object directly under `theme` will replace the default color set with the colors you specify. If you want to add colors to the set or override single default colors, you should put them in a `theme: { extend: { colors: { ... } } }` section. This may also fix your dark mode issue.\n\n```\ntheme: {\n extend: {\n colors: {\n orange: '#E05507',\n },\n },\n },\n```\n\nSee: https://tailwindcss.com/docs/customizing-colors#adding-additional-colors\n\nAlso, are using an older version of Tailwind? The latest, v3, no longer needs `mode: 'jit'` and uses `content:` instead of `purge:` (https://tailwindcss.com/docs/upgrade-guide#configure-content-sources).\n\n========================================\n\nCode:\n```text\nProject\n | \n +-- packages\n | | \n | \\-- react-project-1\n | | |\n | | +--app.js\n | | +--app.css\n | | \n | \\-- react-project-2\n | \n +-- tailwind.config.js\n```\n\n```text\nmodule.exports = {\n mode: 'jit',\n purge: [\n './packages/react-project-1/src/**/*.{js,ts,jsx,tsx}',\n './packages/react-project-2/src/**/*.{js,ts,jsx,tsx}',\n ],\n darkMode: 'class', \n theme: {\n colors: {\n orange: '#E05507',\n },\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ndarkMode: 'class'\n```\n\n```text\n<html class='dark'\n```\n\n```text\ndark:bg-black\n```\n\n```text\ntailwind.config.js\n```\n\n```text\npostcss.config.js\n```\n\n```json\ntheme: {\n extend: {\n colors: {\n orange: '#E05507',\n },\n },\n },\n```\n\n```text\ntheme\n```\n\n```text\ntheme: { extend: { colors: { ... } } }\n```\n\n```text\nmode: 'jit'\n```\n\n```text\ncontent:\n```\n\n```text\npurge:\n```\n\n========================================\n\nComments:\n- tried using this also, but this is also not working.\n- Did you also remove the `colors` object that was directly under `theme`?\n- I added a version question to my answer above.\n- I am using tailwind v2 . Yes have removed the older way of using colors and used this also, but not working . For the same issue , darkMode is not working or any other issue ?","metadata":{"transformedAt":"2026-08-18T18:33:42.873Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":171,"estimatedTokens":820}}2{"id":"stack-70539570","source":"stackoverflow","questionId":70539570,"title":"MDX styling (next-mdx-remote) fails after I install Tailwind css in a Next.js app","tags":["css","typescript","next.js","tailwind-css","mdxjs"],"text":"Title: MDX styling (next-mdx-remote) fails after I install Tailwind css in a Next.js app\nTags: css, typescript, next.js, tailwind-css, mdxjs\nSource: Stack Overflow\n\nQuestion:\nI'm using next-mdx-remote to make use of MDX in my Next.js project.\n\nI've been following JetBrains WebStorm guide to build this, here they've used bootstrap as their CSS but my choice of CSS framework was tailwind css.\n\nThe thing is when I install tailwind css or any other CSS based on tailwind css like flowbite, the MDX page loses it's styling.\n\nExpected \n\nWhat I Get after adding tailwind\n\n- tailwind.config.js\n\n```\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n- _app.tsx\n\n```\nimport \"../styles/globals.css\";\nimport type { AppProps } from \"next/app\";\nimport Head from \"next/head\";\nimport Script from \"next/script\";\nimport Nav from \"../components/Nav\";\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n return (\n <>\n \n {/* */}\n \n \n \n \n \n );\n}\n\nexport default MyApp;\n```\n\n- globals.css\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nhtml,\nbody {\n padding: 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n\n* {\n box-sizing: border-box;\n}\n```\n\n- [blogId].tsx\n\n```\n// import fs from \"fs\";\nimport matter from \"gray-matter\";\nimport path from \"path\";\nimport { serialize } from \"next-mdx-remote/serialize\";\nimport { MDXRemote } from \"next-mdx-remote\";\n\nimport { connectToDatabase } from \"../../utils/mongodb\";\nimport { ObjectId } from \"mongodb\";\n\nconst BlogPg = ({ frontMatter: { title }, MDXdata }) => {\n return (\n \n {title}\n\n \n \n );\n};\n\nexport const getStaticPaths = async () => {\n\n let { db } = await connectToDatabase();\n\n const posts = await db.collection(\"blogs\").find({}).toArray();\n\n const paths = posts.map((post) => ({\n params: {\n blogId: post._id.toString(),\n },\n }));\n\n return {\n paths,\n fallback: false,\n };\n};\n\nexport const getStaticProps = async ({ params: { blogId } }) => {\n // const fileContent = fs.readFileSync(\n // path.join(\"posts\", blogId) + \".mdx\",\n // \"utf-8\"\n // );\n\n let { db } = await connectToDatabase();\n\n const post = await db\n .collection(\"blogs\")\n .find({ _id: new ObjectId(blogId) })\n .toArray();\n\n const { data: frontMatter, content } = matter(post[0].text);\n const MDXdata = await serialize(content);\n\n return {\n props: {\n frontMatter,\n blogId,\n MDXdata,\n },\n };\n};\n\nexport default BlogPg;\n```\n\n========================================\n\nTop Answer:\nI managed to solve similar issue. Here's how I solve it.\n\n**Why don't I see any styling for the rendered markdown?**\nIn my global.css, there is a @tailwind base which resets the default css styling. This is why I don't see any styling for my rendered Markdown.\n\n**How do I solve this issue?**\nIn tailwind config, add this\n\n```\nplugins: [require(\"@tailwindcss/typography\")],\n```\n\nIn the html element that house the markdown, I add this class\n\n```\n\n{myMarkdownContent}\n\n```\n\nThis solution comes from: https://github.com/tailwindlabs/tailwindcss-typography/blob/master/README.md\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\nimport \"../styles/globals.css\";\nimport type { AppProps } from \"next/app\";\nimport Head from \"next/head\";\nimport Script from \"next/script\";\nimport Nav from \"../components/Nav\";\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n return (\n <>\n <Head>\n {/* <link\n rel=\"stylesheet\"\n href=\"https://unpkg.com/@themesberg/flowbite@1.2.0/dist/flowbite.min.css\"\n /> */}\n </Head>\n <Script src=\"https://unpkg.com/@themesberg/flowbite@1.2.0/dist/flowbite.bundle.js\" />\n <Nav />\n <Component {...pageProps} />\n </>\n );\n}\n\nexport default MyApp;\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nhtml,\nbody {\n padding: 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n\n* {\n box-sizing: border-box;\n}\n```\n\n```text\n// import fs from \"fs\";\nimport matter from \"gray-matter\";\nimport path from \"path\";\nimport { serialize } from \"next-mdx-remote/serialize\";\nimport { MDXRemote } from \"next-mdx-remote\";\n\nimport { connectToDatabase } from \"../../utils/mongodb\";\nimport { ObjectId } from \"mongodb\";\n\nconst BlogPg = ({ frontMatter: { title }, MDXdata }) => {\n return (\n <div className=\"px-5 md:px-80 py-10\">\n <p className=\"text-5xl mb-4\">{title}</p>\n <MDXRemote {...MDXdata} />\n </div>\n );\n};\n\nexport const getStaticPaths = async () => {\n\n let { db } = await connectToDatabase();\n\n const posts = await db.collection(\"blogs\").find({}).toArray();\n\n const paths = posts.map((post) => ({\n params: {\n blogId: post._id.toString(),\n },\n }));\n\n return {\n paths,\n fallback: false,\n };\n};\n\nexport const getStaticProps = async ({ params: { blogId } }) => {\n // const fileContent = fs.readFileSync(\n // path.join(\"posts\", blogId) + \".mdx\",\n // \"utf-8\"\n // );\n\n let { db } = await connectToDatabase();\n\n const post = await db\n .collection(\"blogs\")\n .find({ _id: new ObjectId(blogId) })\n .toArray();\n\n const { data: frontMatter, content } = matter(post[0].text);\n const MDXdata = await serialize(content);\n\n return {\n props: {\n frontMatter,\n blogId,\n MDXdata,\n },\n };\n};\n\nexport default BlogPg;\n```\n\n```text\nmodule.exports = {\n purge: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [require('@tailwindcss/typography')],\n };\n```\n\n```text\n...\n\n <div className=\"prose\">\n \n <MDXRemote {...MDXdata} /> \n </div>\n </div>\n );\n };\n\n...\n```\n\n```text\ncontent\n```\n\n```text\npurge\n```\n\n```text\nrequire('@tailwindcss/typography')\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n<MDXRemote .../>\n```\n\n```text\nprose\n```\n\n```text\nplugins: [require(\"@tailwindcss/typography\")],\n```\n\n```text\n<article className=\"prose lg:prose-xl\">\n{myMarkdownContent}\n</article>\n```\n\n========================================\n\nComments:\n- I'm having the same issue - any luck?\n- nope it's like I'm not getting what's the issue!\n- I've bailed and reverted to bootstrap and react-bootstrap, which is a bummer. I've used bootstrap for so long - was hoping to try something new and Tailwind looks great. Might give it another swing later.\n- @rtoken answer's here!","metadata":{"transformedAt":"2026-08-18T18:33:42.874Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":371,"estimatedTokens":1714}}3{"id":"stack-76113741","source":"stackoverflow","questionId":76113741,"title":"How to clamp font size using TailwindCSS?","tags":["css","reactjs","next.js","tailwind-css","clamp"],"text":"Title: How to clamp font size using TailwindCSS?\nTags: css, reactjs, next.js, tailwind-css, clamp\nSource: Stack Overflow\n\nQuestion:\nHow can the `clamp()` CSS function be used with TailwindCSS to make the `fontSize` linearly scale between a min and a max value?\n\nInterested in particular about integrating with Next.js.\n\n========================================\n\nTop Answer:\nThere is no Tailwind utility class to do this easily but you can do this by writing custom CSS with Arbitrary properties\n\nExample:\n\n```\n\n### Text\n\n```\n\n========================================\n\nCode:\n```text\nclamp()\n```\n\n```text\nfontSize\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n\n // Or if using `src` directory:\n \"./src/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n extend: {\n fontSize: {\n clamp: \"clamp(1rem, 5vw, 3rem)\",\n },\n },\n },\n plugins: [],\n};\n```\n\n```text\nclamp()\n```\n\n```text\nline-clamp\n```\n\n```text\nclamp()\n```\n\n```text\njsx\n```\n\n```text\ntsx\n```\n\n```text\ntext-clamp\n```\n\n```text\nclassName\n```\n\n```html\n<h1 class=\"[font-size:_clamp(2em,5vw,10em)]\">Text</h1>\n```\n\n```html\n<div class=\"text-[clamp(1.25rem,3cqw,3rem)]\">\n Just make sure to not have any spaces in the classname\n</div>\n```\n\n```js\nconst plugin = require('tailwindcss/plugin');\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n // ...\n plugins: [\n // ...\n plugin(({matchUtilities, theme}) => {\n matchUtilities(\n {\n clamp(value) {\n // load font sizes from theme\n const sizes = theme('fontSize');\n\n // parse the value passed in from class name\n // split it by \"-\" and compare pieces to fontSize values\n const split = value\n .split('-')\n .map(v => sizes[v] ? sizes[v]['0'] : v);\n \n // return a clamped font-size\n return {\n fontSize: `clamp(${split[0]}, ${split[1]}, ${split[2]})`,\n }\n }\n }\n );\n }),\n ]\n}\n```\n\n```html\n<div class=\"clamp-[xl-3cqw-5xl]\">\n still not beautiful, but nicer. \n</div>\n```\n\n```text\ntext-\n```\n\n```text\nfont-size\n```\n\n```text\n<p class=\"[font-size:_clamp(24px,12vw,30rem)]\">Your Text</p>\n```\n\n```text\n<p class=\"text-[clamp(24px,12vw,30rem)]\">Your Text</p>\n```\n\n========================================\n\nComments:\n- This method doesn't allow changing the values inside the clamp","metadata":{"transformedAt":"2026-08-18T18:33:42.874Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":18,"totalLines":152,"estimatedTokens":637}}4{"id":"stack-68998731","source":"stackoverflow","questionId":68998731,"title":"Vue Transition with Tailwind","tags":["html","vuejs3","tailwind-css","transition","vite"],"text":"Title: Vue Transition with Tailwind\nTags: html, vuejs3, tailwind-css, transition, vite\nSource: Stack Overflow\n\nQuestion:\nWhy do Tailwind do not work directly on element?\n\n### This does not work:\n\n```\n\n \n Test\n \n\n```\n\n### But this:\n\n```\n\n \n Test\n \n\n.fade-enter-active,\n.fade-leave-active {\n @apply transition-opacity duration-300 ease-out;\n}\n.fade-enter,\n.fade-leave-active {\n @apply opacity-0;\n}\n\n```\n\nI need to get it work like in \"But this\", because I use Nuxt with vite and I do not get scss to work, so @apply is not an option.\n\nTHanks.\n\n========================================\n\nTop Answer:\nHere are my `tailwind transition live templates` in `phpstorm`. Replace the `$SELECTION$` parameter with what you want to transition or use it as is:\n\n### FadeIn\n\n```\n\n $SELECTION$\n\n```\n\n### FadeOut\n\n```\n\n $SELECTION$\n\n```\n\n### Fade (if you need both)\n\n```\n\n $SELECTION$\n\n```\n\n### SlideIn\n\n```\n\n $SELECTION$\n\n```\n\n### SlideOut\n\n```\n\n $SELECTION$\n\n```\n\n### Slide\n\n```\n\n $SELECTION$\n\n```\n\nHope it helps.\n\n========================================\n\nCode:\n```text\n<template>\n <transition\n enter-class=\"opacity-0\"\n enter-active-class=\"transition-opacity duration-300 ease-out\"\n leave-class=\"opacity-0\"\n leave-active-class=\"transition-opacity duration-300 ease-out\"\n >\n Test\n </transition>\n</template>\n```\n\n```text\n<template>\n <transition name=\"fade\">\n Test\n </transition>\n</template>\n<style>\n.fade-enter-active,\n.fade-leave-active {\n @apply transition-opacity duration-300 ease-out;\n}\n.fade-enter,\n.fade-leave-active {\n @apply opacity-0;\n}\n</style>\n```\n\n```text\n<transition\n enter-active-class=\"duration-300 ease-out\"\n enter-from-class=\"transform opacity-0\"\n enter-to-class=\"opacity-100\"\n leave-active-class=\"duration-200 ease-in\"\n leave-from-class=\"opacity-100\"\n leave-to-class=\"transform opacity-0\"\n >\n Test\n</transition>\n```\n\n```text\n<transition\n enter-from-class=\"opacity-0\"\n enter-active-class=\"transition duration-300\">\n $SELECTION$\n</transition>\n```\n\n```text\n<transition\n leave-to-class=\"opacity-0\"\n leave-active-class=\"transition duration-300\">\n $SELECTION$\n</transition>\n```\n\n```text\n<transition\n enter-from-class=\"opacity-0\"\n leave-to-class=\"opacity-0\"\n enter-active-class=\"transition duration-300\"\n leave-active-class=\"transition duration-300\">\n $SELECTION$\n</transition>\n```\n\n```text\n<transition\n enter-from-class=\"translate-x-[150%] opacity-0\"\n enter-active-class=\"transition duration-300\">\n $SELECTION$\n</transition>\n```\n\n```text\n<transition\n leave-to-class=\"translate-x-[150%] opacity-0\"\n leave-active-class=\"transition duration-300\">\n $SELECTION$\n</transition>\n```\n\n```text\n<transition\n enter-from-class=\"translate-x-[150%] opacity-0\"\n leave-to-class=\"translate-x-[150%] opacity-0\"\n enter-active-class=\"transition duration-300\"\n leave-active-class=\"transition duration-300\">\n $SELECTION$\n</transition>\n```\n\n```text\ntailwind transition live templates\n```\n\n```text\nphpstorm\n```\n\n```text\n$SELECTION$\n```\n\n========================================\n\nComments:\n- This is great! However we cant do with tailwind is doing animations with multiple different timings and steps, right?","metadata":{"transformedAt":"2026-08-18T18:33:42.874Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":210,"estimatedTokens":798}}5{"id":"stack-70477918","source":"stackoverflow","questionId":70477918,"title":"Why does my tailwind output file not include the utilities and components","tags":["tailwind-css"],"text":"Title: Why does my tailwind output file not include the utilities and components\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've installed tailwind using `npm install tailwindcss`\nI then create my src/style.css file and include\n\n```\n`@tailwind base;`\n `@tailwind components;`\n `@tailwind utilities;`\n```\n\nWhen I run my build-css command I get a generated output.css file, but the file is only 425 lines long. It looks likes it's missing the components and the utilities. When I link my HTML to the output.css I get the base tailwind css styles applied, but utilities have absolutely no effect. I have followed the docs to the best of my ability as well as several tutorials with the same result every time. No clue what I am I doing wrong, the tuts I have watched show this file to be thousands of lines of code while mine is always 425.\n\n========================================\n\nTop Answer:\nIf you believe you have set everything up properly, check that the structure of the project directory is correct:\n\n```\nproject_directory/\n |\n |--- tailwind.config.js\n |\n |--- dist/\n | | \n | |--- output.css \n |\n |--- src/ \n |\n |--- input.css\n |\n |--- index.html\n |\n |--- main.js\n```\n\n### References\n\n- Cannot use tailwind classes\n\n========================================\n\nCode:\n```text\n`@tailwind base;`\n `@tailwind components;`\n `@tailwind utilities;`\n```\n\n```text\nnpm install tailwindcss\n```\n\n```text\ncontent\n```\n\n```text\nproject_directory/\n |\n |--- tailwind.config.js\n |\n |--- dist/\n | | \n | |--- output.css \n |\n |--- src/ \n |\n |--- input.css\n |\n |--- index.html\n |\n |--- main.js\n```\n\n```text\ncontent: [\"./src/**/*.{html,js}\"],\n```\n\n```text\nmodule.exports = {\n content: ['./app/**/*.{js,ts,jsx,tsx}'],\n //wrong content: ['./app/**/*.{js, ts, jsx, tsx}'],\n theme: {\n extend: {},\n },\n plugins: [],\n };\n```\n\n========================================\n\nComments:\n- Which version of Tailwind CSS are you using? Is it v2.x or v3?\n- I'm using tailwindcss v3\n- can you with us your taiwind.config file?\n- It only include classes you actually used in your html / css / ..\n- On step 6 of the tutorial I am following on the tailwind website here: `https://tailwindcss.com/docs/installation/using-postcss`, it adds a link element to the index.html to reference the generated main.css file. However the URL for the link reference is \"/dist/main.css\". When I reference \"/dist/main.css\" in my project, it doesn't work. When I manually go to \"/dist/main.css\" from the Chrome browser, I see the html for index.html\n- You may be following version 1 instructions, but running a newer version.\n- I don't want to learn how to configure anything, I just want to do it manually for now. Is there a way?\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.874Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":104,"estimatedTokens":768}}6{"id":"stack-74574022","source":"stackoverflow","questionId":74574022,"title":"Change the Focus Border color in Tailwind CSS","tags":["javascript","html","css","tailwind-css"],"text":"Title: Change the Focus Border color in Tailwind CSS\nTags: javascript, html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using Tailwind css with my react application. I am creating a form using tailwind and want to change focus border color of my input text box in teal which is blue.\n\n```\nfunction App() {\n return (\n \n \n \n \n \n\n### Lets Get Started\n\n We are herre to get you about our sdas no bonsdcbeagufpi feqwifheqfwe\n\n \n \n Name\n \n \n\n \n \n\n \n \n\n \n \n \n );\n}\n\nexport default App;\n```\n\nI did change teal color with focus:border-teal-500 but it is not changing to teal color when I focus or click on my text box.\n\n========================================\n\nTop Answer:\nYou need to:\n\n- Set your focus color (`focus:border-teal`)\n\n- Remove the default outline (`focus:outline-none`)\n\n- Then set (`focus:ring-0`), this removes the default ring that appears around the input element when it's focused.\n\n========================================\n\nCode:\n```text\nfunction App() {\n return (\n <div className=\"App\">\n <main className=\"h-screen flex items-center justify-center\">\n <form className=\"bg-white flex rounded-lg w-1/2\">\n <div className= \"flex-1 text-gray-700 p-20\">\n <h1 className=\"text-3xl pb-2\">Lets Get Started</h1>\n <p className=\"text-lg text-gray-500\">We are herre to get you about our sdas no bonsdcbeagufpi feqwifheqfwe</p>\n\n <div className='mt-6'>\n <div className=\"pb-4\">\n <label \n className=\"block text-sm pb-2\" \n htmlFor=\"name\"\n >Name\n </label>\n <input\n className=\"border-2 border-gray-500 p-2 rounded-md w-1/2 focus:border-teal-500\"\n type=\"text\" name=\"name\" placeholder='Enter Your Name' />\n\n </div>\n </div>\n\n\n </div>\n <div> </div>\n\n </form>\n </main>\n </div>\n );\n}\n\nexport default App;\n```\n\n```text\n<div className=\"focus:border-blue border-2 border-solid\" />\n```\n\n```text\np::focus{\n color: red;\n}\n```\n\n```text\n<input className=\"border-2 border-gray-500 p-2 rounded-md w-1/2 focus:border-teal-500 focus:outline-none\" type=\"text\" name=\"name\" placeholder='Enter Your Name' />\n```\n\n```text\nfocus:outline-none\n```\n\n```text\n<input\n className=\"border-2 border-gray-500 p-2 rounded-md w-1/2 focus:outline-teal-500\"\n type=\"text\" name=\"name\" placeholder='Enter Your Name' />\n```\n\n```text\nfocus:border-teal\n```\n\n```text\nfocus:outline-none\n```\n\n```text\nfocus:ring-0\n```\n\n```text\nfocus:ring-turquoise-500 focus:border-turquoise-500\n```\n\n```text\nfocus:ring-yellow-500\n```\n\n```text\nring\n```\n\n```text\n<input className=\"focus:outline-none focus:ring-2 focus:ring-yellow-700\" />\n```\n\n```text\n<input className=\"border-2 outline-none border-gray-500 p-2 rounded-md w-1/2 focus:border-teal-500\" type=\"text\" name=\"name\" placeholder='Enter Your Name' />\n```\n\n```text\n<input className=\"ring-1 outline-none ring-gray-500 p-2 rounded-md w-1/2 focus:ring-teal-500 invalid:ring-red-500\" type=\"text\" name=\"name\" placeholder='Enter Your Name' />\n```\n\n```text\nfocus:ring-0 focus:border-[#cfe5fb] focus:border-transparent\n```\n\n```text\nfocus:border-fuchsia-600 focus:outline-none border-2 border-solid border-slate-800\n```\n\n```text\nfocus:outline-teal-500\n```\n\n```text\nfocus:outline-2\n```\n\n```text\nfocus:outline\n```\n\n```text\n<input\n className=\"focus:outline-gray-400\"\n/>\n```\n\n========================================\n\nComments:\n- This does not answer the question (the OP asked specifically for the focus border color, not hover (see developer.mozilla.org/en-US/docs/Web/CSS/:focus)\n- Please make more obvious what additional insight you contribute beyond stackoverflow.com/a/74747503/7733418 which provides the same basic solutio (different color) and an explanation, which yours lacks.\n- simplest, cleanest solution, works for me also\n- This is the only method that worked for me.\n- this worked though but not changing colors yet\n- This should be the answer. Here's an example: `` Like what is said above, the 1st removes the default outline, the second removes the ring and the third is the color you want. In this case a very dark gray.\n- Is there a way to do this without inline css? I have all my styling in separate files from my html.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.874Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":191,"estimatedTokens":1148}}7{"id":"stack-74987006","source":"stackoverflow","questionId":74987006,"title":"TailwindCSS not working with Vite + React","tags":["javascript","reactjs","tailwind-css","vite","tailwind-css-3"],"text":"Title: TailwindCSS not working with Vite + React\nTags: javascript, reactjs, tailwind-css, vite, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI am initializing TailwindCSS using Create React App (CRA); so my project built with Vite, React, but can't get it to work.\n\nIt seems like postcss and autoprefixer is not getting installed, when I try to install manually it gives the following error:\n\n```\nwarning Pattern [\"postcss@^8.4.20\"] is trying to unpack in the same destination \"C:\\\\Users\\\\NUR\\\\AppData\\\\Local\\\\Yarn\\\\Cache\\\\v6\\\\npm-postcss-8.4.20-64c52f509644cecad8567e949f4081d98349dc56-integrity\\\\node_modules\\\\postcss\" as pattern [\"postcss@^8.4.18\",\"postcss@^8.4.20\"]. This could result in non-deterministic behavior, skipping.\n[3/4] Linking dependencies...\nwarning \" > tailwindcss@3.2.4\" has unmet peer dependency \"postcss@^8.0.9\".\n```\n\n========================================\n\nTop Answer:\nI followed the documentation to install tailwind with Vite and React and it didn't work either. Then I added these changes in vite.config.js and it worked.\n\n```\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport tailwindcss from \"tailwindcss\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n css: {\n postcss: {\n plugins: [tailwindcss()],\n },\n },\n});\n```\n\n========================================\n\nCode:\n```none\nwarning Pattern [\"postcss@^8.4.20\"] is trying to unpack in the same destination \"C:\\\\Users\\\\NUR\\\\AppData\\\\Local\\\\Yarn\\\\Cache\\\\v6\\\\npm-postcss-8.4.20-64c52f509644cecad8567e949f4081d98349dc56-integrity\\\\node_modules\\\\postcss\" as pattern [\"postcss@^8.4.18\",\"postcss@^8.4.20\"]. This could result in non-deterministic behavior, skipping.\n[3/4] Linking dependencies...\nwarning \" > tailwindcss@3.2.4\" has unmet peer dependency \"postcss@^8.0.9\".\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {}\n }\n};\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n```text\npostcss.config.cjs\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n```text\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport tailwindcss from \"tailwindcss\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n css: {\n postcss: {\n plugins: [tailwindcss()],\n },\n },\n});\n```\n\n```text\nimport tailwindcss from \"tailwindcss\";\n```\n\n```text\nvite.config.js\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nexport default {\n content: [\"./index.html\", \"./src/**/*.{html,js,ts,jsx,tsx}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\nnpm install -D tailwindcss@3 postcss autoprefixer\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n```text\ntailwind.config.js\n```\n\n```js\ncontent: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx,tsx}\",\n ],\n```\n\n```text\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n```text\nexport default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n```text\nexport default {\n content: [\"./src/**/*.{html,js,jsx}\"],\n theme: {\n extend: {},\n },\n },\n plugins: [],\n};\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\npostcss.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmain.css or index.css\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n./src/index.css\n```\n\n```text\nimport { defineConfig } from \"vite\"; \nimport react from \"@vitejs/plugin-react\"; \nimport tailwindcss from \"tailwindcss\";\n\n// https://vitejs.dev/config/ \nexport default defineConfig({ \n plugins: [react()], \n css: {\n postcss: {\n plugins: [tailwindcss()],\n }, \n }, \n});\n```\n\n```text\n<script src=\"https://cdn.tailwindcss.com\"></script>\n```\n\n```text\nindex.html\n```\n\n```js\nexport default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n }\n```\n\n```text\nnpm i postcss\n```\n\n```text\nnpm i autoprefixer\n```\n\n========================================\n\nComments:\n- Perhaps try use https://tailwindcss.com/docs/guides/vite as a reference instead of the guide for CRA.\n- @JohnLi I have tried using the vite guide , it still doesn't work and gives the same issue\n- Can you show you package.json and tailwind.config.cjs ?\n- I have copied the TailWind config exactly from the guide\n- I just tried and only one thing went wrong, there was no postcss.config.cjs Did you have it when you tried npx tailwindcss init -p ?\n- No , same for me , postcss isn't getting installed, and the config is also not generated on npx init\n- The question is too old - if you've come across it now, you're probably using TailwindCSS v4 instead of v3. This other question relates to v4: Deprecated CRA; new plugins for TailwindCSS v4\n- This question is similar to: Error: PostCSS plugin tailwindcss requires PostCSS 8. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.\n- Related for v4 with PostCSS: Error: PostCSS plugin tailwindcss requires PostCSS 8\n- In a comment, wrongly posted as an answer here, mentions \"in changing the default export to a module export, at least in my case, breaks the entire app.\"\n- and if you want to keep your postcss.config.js, you can move `tailwindcss()` from the vite config file to your separate postcss config file - for me, I had to place it before the other plugins that I am using.\n- respectfully, the language used in your answer is impossible to decipher.\n- Please explain how this addresses the issue. What have you changed? Code-only answers are not good answers\n- This vite.config.js file does the following: It integrates React support via @vitejs/plugin-react. It configures PostCSS to use Tailwind CSS for processing styles, ensuring the proper Tailwind classes are applied. It optimizes your development environment for React with fast refresh and efficient style processing.","metadata":{"transformedAt":"2026-08-18T18:33:42.874Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":29,"totalLines":234,"estimatedTokens":1480}}8{"id":"stack-71093772","source":"stackoverflow","questionId":71093772,"title":"How to truncate text in TailwindCSS?","tags":["css","tailwind-css","tailwind-css-3"],"text":"Title: How to truncate text in TailwindCSS?\nTags: css, tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI am using `truncate` in TailwindCSS to make text ellipsis if text-overflow more than one line but it does not work.\n\nMy code is below:\n\n\r\n\r\n\n```\n \n\n \n\n### Label:\n\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n \n\n```\n\n\r\n\r\n\r\n\n**How can I fix It?**\n\n========================================\n\nTop Answer:\nTruncating in bare tailwind is pretty frustrating.\nPlease use this plugin instead\n\nInstall it from npm\n\n```\nnpm install @tailwindcss/line-clamp\n```\n\nThen add it in tailwind.config.js file\n\n```\nplugins: [\n require('@tailwindcss/line-clamp')\n ],\n```\n\nTo use it just add it as a class `className=\"line-clamp-1\"`\n\nHere is the documentation\n\nhttps://tailwindcss.com/blog/multi-line-truncation-with-tailwindcss-line-clamp\n\n========================================\n\nCode:\n```html\n<script src=\"https://cdn.tailwindcss.com/3.0.22\"></script> <!-- release 2022-02-11 -->\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold\">Label:</h2>\n <p class=\"truncate\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n```\n\n```text\ntruncate\n```\n\n```html\n<div className=\"ml-1 inline-block w-[200px]\">\n <span>Label: </span>\n <span className=\"font-semibold line-clamp-1\">\n long texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt\n </span>\n</div>\n```\n\n```html\n<div className=\"ml-1 inline-block w-[200px]\">\n <span>Label: </span>\n <span className=\"font-semibold line-clamp-1\">\n long texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt\n </span>\n</div>\n```\n\n```text\nline-clamp\n```\n\n```text\nline-clamp-1\n```\n\n```text\ninline\n```\n\n```text\nspan\n```\n\n```text\nblock\n```\n\n```text\n<div className=\"ml-1 inline-block min-w-0\">\n <span>Label: </span>\n <span className=\"font-semibold truncate block\">\n long texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt\n </span>\n </div>\n```\n\n```text\nmin-width\n```\n\n```text\nnpm install @tailwindcss/line-clamp\n```\n\n```text\nplugins: [\n require('@tailwindcss/line-clamp')\n ],\n```\n\n```text\nclassName=\"line-clamp-1\"\n```\n\n```text\n<div class=\"flex flex-row flex-shrink items-center gap-1 text-base font-medium whitespace-nowrap\">\n <img class=\"w-5 h-4 flex-shrink-0\"></img>\n <p class=\"truncate\">\n Any potentially long long line here\n </p>\n</div>\n```\n\n```text\ntruncate\n```\n\n```text\n<img>\n```\n\n```text\n<p>\n```\n\n```text\n<p>\n```\n\n```text\ntruncate\n```\n\n```text\nw-full\n```\n\n```text\nLorem_ipsum_dolor_sit_amet_consectetur_adipiscing_elit_sed_do_eiusmod_tempor_incididunt_utps.pdf\n```\n\n```text\nbreak-all\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold mb-4\">Line Clamp Example</h2>\n <p class=\"line-clamp-2 text-gray-700\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.3.0\"></script>\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold mb-4\">Line Clamp Example</h2>\n <p class=\"line-clamp-2 text-gray-700\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n```\n\n```js\n/**\n * CDN @tailwindcss/line-clamp\n */\nconst lineClampPlugin = () => {\n const baseStyles = {\n overflow: \"hidden\", display: \"-webkit-box\", \"-webkit-box-orient\": \"vertical\"\n };\n\n const plugin = tailwind.plugin(function ({ matchUtilities, addUtilities, theme, variants }) {\n matchUtilities(\n {\n \"line-clamp\": (value) => ({ ...baseStyles, \"-webkit-line-clamp\": value.toString() })\n },\n { values: theme(\"lineClamp\") }\n );\n addUtilities(\n [\n { \".line-clamp-none\": { \"-webkit-line-clamp\": \"unset\" } }\n ],\n variants(\"lineClamp\")\n );\n }, \n {\n theme: {\n lineClamp: {1: \"1\", 2: \"2\", 3: \"3\", 4: \"4\", 5: \"5\", 6: \"6\"}\n },\n variants: {\n lineClamp: [\"responsive\"]\n }\n });\n \n return plugin;\n}\n\ntailwind.config = {\n plugins: [\n lineClampPlugin(),\n ],\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.2.7\"></script>\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold mb-4\">Line Clamp Example</h2>\n <p class=\"line-clamp-2 text-gray-700\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold mb-4\">Truncate Example</h2>\n <p class=\"truncate text-gray-700\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n```\n\n```text\nline-clamp-{number}\n```\n\n```text\nline-clamp\n```\n\n```text\nline-clamp-<number>\n```\n\n```text\noverflow: hidden;\n```\n\n```text\ndisplay: -webkit-box;\n```\n\n```text\n-webkit-box-orient: vertical;\n```\n\n```text\n-webkit-line-clamp: <number>;\n```\n\n```text\nline-clamp-none\n```\n\n```text\noverflow: visible;\n```\n\n```text\ndisplay: block;\n```\n\n```text\n-webkit-box-orient: horizontal;\n```\n\n```text\n-webkit-line-clamp: unset;\n```\n\n```text\nline-clamp\n```\n\n```text\n@tailwindcss/line-clamp\n```\n\n```text\nline-clamp\n```\n\n```text\nline-clamp\n```\n\n```text\n@tailwindcss/line-clamp\n```\n\n```text\n@tailwindcss/line-clamp\n```\n\n```text\n@tailwindcss/line-clamp\n```\n\n```text\n@tailwindcss/line-clamp\n```\n\n```text\n@tailwindcss/line-clamp\n```\n\n```text\ntruncate\n```\n\n```text\ntruncate\n```\n\n```text\nline-clamp\n```\n\n```text\ntruncate\n```\n\n```text\ntruncate\n```\n\n```text\nline-clamp\n```\n\n```text\ntruncate\n```\n\n```text\noverflow: hidden;\n```\n\n```text\ntext-overflow: ellipsis;\n```\n\n```text\nwhite-space: nowrap;\n```\n\n========================================\n\nComments:\n- You can use the `line-clamp` utility from v3.3 with fixed values (1-6) and from v4.0 with any dynamic value. Up to v3.2, the `@tailwindcss/line-clamp` official plugin provided the utility.\n- for small screen try: \"line-clamp-1 break-all\"\n- Worked like a charm! Just to give my two cents, this plugin is not included by default when installing Tailwind, so you don't need to install it separately.\n- From v3.3.0 was added line-clamp utilities from @tailwindcss/line-clamp to core.\n- truncate started to work when I changed from TEXT to TEXT\n\n, thx","metadata":{"transformedAt":"2026-08-18T18:33:42.874Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":59,"totalLines":401,"estimatedTokens":2169}}9{"id":"stack-65719655","source":"stackoverflow","questionId":65719655,"title":"Center Fixed Element in TailwindCSS","tags":["css","tailwind-css"],"text":"Title: Center Fixed Element in TailwindCSS\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a flash message that appears when a page is loaded on successful auth and I'm trying to figure out how I can center it horizontally on any device. I am using the TailwindCSS to adjust the placement of the div and have tried `fixed` and `absolute` to make sure it appears above my content, but using an attribute like `left:50%` moves it too far over and `margin:auto` doesn't center this element. Is there a better approach to what I am trying to do? Is it possible to do with TailwindCSS or will I have to write some CSS for this?\n\nhttps://i.sstatic.net/ZzqVG.png\n\n**Code:**\n\n```\n\n \n \n \n \n \n { body ? body : '' }\n \n \n \n ...\n \n\n```\n\n========================================\n\nTop Answer:\nFor me it worked like this (div is centered both vertically and horizontally). Also I wanted the modal content to scroll if the content was longer than the div's height:\n\n```\n\n Close me\n\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut voluptas\n omnis nemo quas minima quam, repudiandae doloremque. Sunt magnam officia\n voluptatibus nostrum eligendi dignissimos minima itaque, praesentium\n corrupti obcaecati quas. Lorem ipsum dolor sit amet consectetur\n adipisicing elit. At harum id magni consequuntur ratione aperiam! Quasi\n animi sunt molestiae eos a voluptatem exercitationem voluptate quo,\n consectetur fugit tempore impedit qui! Lorem ipsum dolor sit amet\n consectetur adipisicing elit. Ea quae dolor maiores animi dolores deleniti\n laborum quis molestias nulla, reprehenderit eos odio recusandae\n consectetur velit saepe explicabo quibusdam quidem? Corrupti.\n\n```\n\n========================================\n\nCode:\n```text\n<div>\n <div className=\"mx-auto sm:w-3/4 md:w-2/4 absolute\" id=\"signin-success-message\">\n <div className=\"bg-green-200 px-6 py-4 my-4 rounded-md text-lg flex items-center w-full\">\n <svg viewBox=\"0 0 24 24\" className=\"text-green-600 w-10 h-10 sm:w-5 sm:h-5 mr-3\">\n <path fill=\"currentColor\" d=\"M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z\"></path>\n </svg>\n <span class=\"text-green-800\">{ body ? body : '' }</span>\n </div>\n </div>\n <div>\n ...\n </div>\n</div>\n```\n\n```text\nfixed\n```\n\n```text\nabsolute\n```\n\n```text\nleft:50%\n```\n\n```text\nmargin:auto\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n<div class=\"mx-auto sm:w-3/4 md:w-2/4 fixed inset-x-0 top-10\" id=\"signin-success-message\">\n <div class=\"bg-green-200 px-6 py-4 my-4 rounded-md text-lg flex items-center w-full\">\n <svg viewBox=\"0 0 24 24\" class=\"text-green-600 w-10 h-10 sm:w-5 sm:h-5 mr-3\">\n <path fill=\"currentColor\" d=\"M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z\"></path>\n </svg>\n <span class=\"text-green-800\">{ body ? body : '' }</span>\n </div>\n</div>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n<div class=\"mx-auto sm:w-3/4 md:w-2/4 fixed inset-0 flex items-center\" id=\"signin-success-message\">\n <div class=\"bg-green-200 px-6 py-4 rounded-md text-lg flex items-center w-full\">\n <svg viewBox=\"0 0 24 24\" class=\"text-green-600 w-10 h-10 sm:w-5 sm:h-5 mr-3\">\n <path fill=\"currentColor\" d=\"M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z\"></path>\n </svg>\n <span class=\"text-green-800\">{ body ? body : '' }</span>\n </div>\n</div>\n```\n\n```text\ninset-x-0\n```\n\n```text\nmx-auto\n```\n\n```text\n<div\n v-if=\"isModalOpen\"\n class=\"fixed z-20 h-3/4 w-1/2 m-auto inset-x-0 inset-y-0 p-4 bg-white rounded-sm overflow-y-scroll\"\n>\n <button @click.prevent=\"closeModal\">Close me</button>\n\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut voluptas\n omnis nemo quas minima quam, repudiandae doloremque. Sunt magnam officia\n voluptatibus nostrum eligendi dignissimos minima itaque, praesentium\n corrupti obcaecati quas. Lorem ipsum dolor sit amet consectetur\n adipisicing elit. At harum id magni consequuntur ratione aperiam! Quasi\n animi sunt molestiae eos a voluptatem exercitationem voluptate quo,\n consectetur fugit tempore impedit qui! Lorem ipsum dolor sit amet\n consectetur adipisicing elit. Ea quae dolor maiores animi dolores deleniti\n laborum quis molestias nulla, reprehenderit eos odio recusandae\n consectetur velit saepe explicabo quibusdam quidem? Corrupti.\n</div>\n```\n\n========================================\n\nComments:\n- What about centering vertically?","metadata":{"transformedAt":"2026-08-18T18:33:42.874Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":140,"estimatedTokens":1230}}10{"id":"stack-69276276","source":"stackoverflow","questionId":69276276,"title":"Why Tailwind List Style type is not working","tags":["css","tailwind-css"],"text":"Title: Why Tailwind List Style type is not working\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have installed Tailwind CSS using npm, i am using `\"tailwindcss\": \"^2.2.15\"` version. when i am trying to apply list style type on my paragraph it's not working, it doesn't show any style type with content.\n\nHere is my code which is running fine on `play.tailwindcss.com` CODE\n\nBut when i write exact same code in my local code editor it doesn't work as intended.\n\nScreenshot of exact same code when i run it locally.\nhttps://i.sstatic.net/pWPqz.png\n\n========================================\n\nTop Answer:\nAdd utility class \"list-inside\" also to the ul class.\n\n```\n\n \n- One\n \n- Two\n \n- Three\n\n```\n\n========================================\n\nCode:\n```text\n\"tailwindcss\": \"^2.2.15\"\n```\n\n```text\nplay.tailwindcss.com\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n ul, ol {\n list-style: revert;\n }\n}\n```\n\n```text\ntailwind.css\n```\n\n```text\n<ul class=\"list-disc list-inside\">\n <li>One</li>\n <li>Two</li>\n <li>Three</li>\n</ul>\n```\n\n```html\n<ul class=\"list-disc pl-3\">\n<li>first item</li>\n<li>first second</li>\n</ul>\n\nor\n\n<ul class=\"list-disc list-inside\">\n<li>first item</li>\n<li>first second</li>\n</ul>\n```\n\n========================================\n\nComments:\n- Inspect your element that’s rendering incorrect. What does it say? Do they have the class you expected? What about the CSS file that’s loaded on the page? Does it have those style rules too?\n- when i checked inspect element, it shows list style type none, why is it so?\n- \"Ordered and unordered lists are unstyled by default\" - I'm mindblown! Thanks for pointing out the link, Mattias!\n- I think `list-decimal list-outside pl-[revert]` is what I need.\n- Lists are intentionally unstyled by default in Tailwind because many developers use lists for things like nav bar buttons, etc. The correct Tailwind way to style bulleted/numbered lists is described in the answer by @mohammed salman ali pary.\n- If you also add `@apply list-inside;` to the declaration above `ul` and `ol` will act like stock lists complete with indentation.\n- This correctly solves it but I don't know why it wasn't specified in the example in the docs to use list-inside, as list-disc was only used: tailwindcss.com/docs/list-style-type","metadata":{"transformedAt":"2026-08-18T18:33:42.874Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":89,"estimatedTokens":581}}11{"id":"stack-62346424","source":"stackoverflow","questionId":62346424,"title":"How can I make CSS grid items have auto height using tailwind?","tags":["css","css-grid","tailwind-css"],"text":"Title: How can I make CSS grid items have auto height using tailwind?\nTags: css, css-grid, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nLet's suppose I have this 2 by 2 grid layout made with the help of **Tailwindcss**:\n\n\r\n\r\n\n```\n\r\n\r\n Full name:\r\n Favoutite fruits:\r\n John Doe\r\n \r\n \r\n \n- Apples\r\n \n- Oranges\r\n \n- Bananas\r\n \r\n \r\n\n```\n\n\r\n\r\n\r\n\nThe problem with the above layout is that the rows are equal in height or, in other words, all the grid items are forced to have *the height of the tallest of them*.\n\nThe items on the first row must have the height required by only a single row of text.\n\nHow do I achieve that?\n\n========================================\n\nTop Answer:\nAs an improvement over the previous answer, also consider using **Grid Auto Rows** utility to determine the default size of the implicit created rows.\n\n\r\n\r\n\n```\n\n Full name:\n Favoutite fruits:\n John Doe\n \n \n \n- Apples\n \n- Oranges\n \n- Bananas\n \n \n\n```\n\n\r\n\r\n\r\n\nYou can find more information here\n\n========================================\n\nCode:\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css\" rel=\"stylesheet\"/>\n<div class=\"inline-grid grid-cols-2 grid-rows-2\">\n <div class=\"px-1\">Full name:</div>\n <div class=\"px-1\">Favoutite fruits:</div>\n <div class=\"px-1\">John Doe</div>\n <div class=\"px-1\">\n <ul>\n <li>Apples</li>\n <li>Oranges</li>\n <li>Bananas</li>\n </ul>\n </div>\n</div>\n```\n\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css\" rel=\"stylesheet\"/>\n<div class=\"inline-grid grid-cols-2\">\n <div class=\"px-1\">Full name:</div>\n <div class=\"px-1\">Favoutite fruits:</div>\n <div class=\"px-1\">John Doe</div>\n <div class=\"px-1\">\n <ul>\n <li>Apples</li>\n <li>Oranges</li>\n <li>Bananas</li>\n </ul>\n </div>\n</div>\n```\n\n```text\ngrid-rows-2\n```\n\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css\" rel=\"stylesheet\"/>\n<div class=\"inline-grid grid-cols-2 grid-flow-row auto-rows-min\">\n <div class=\"px-1\">Full name:</div>\n <div class=\"px-1\">Favoutite fruits:</div>\n <div class=\"px-1\">John Doe</div>\n <div class=\"px-1\">\n <ul>\n <li>Apples</li>\n <li>Oranges</li>\n <li>Bananas</li>\n </ul>\n </div>\n</div>\n```\n\n========================================\n\nComments:\n- But why adding a row definition sets a height? and is it posible to modify?\n- @GerardoBuenrostroGonzález that's how Tailwind is defined. grid-rows-2 set 2 equal height and the height is defined by the tallest one `repeat(2;minmax(0,1fr))`\n- What sorcery is this?\n- Ok, that work but I would like to says that the virtual cursor of a blind person will read informations as they come in the dom. So if it reads the Full name, the person who is blind will understand that the guy's name is \"favorite fruits\". Building a grid row instead would solve this because we would have Full name, then John Doe, favorite fruits and the list of fruits. It make sense if we want to make a correct document with a reliable use of html elements. Thanks for the trick anyways.","metadata":{"transformedAt":"2026-08-18T18:33:42.874Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":133,"estimatedTokens":773}}12{"id":"stack-64425429","source":"stackoverflow","questionId":64425429,"title":"Circle with text in Tailwind css","tags":["css","tailwind-css"],"text":"Title: Circle with text in Tailwind css\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am beginner webdeveloper.\nI have small problem with Tailwind CSS. I need this: https://ibb.co/KL8cDR2\n\nThis is my code:\n\n```\n404\n```\n\nbut it's not working :( How can I make it?\nPlease help me\n\n========================================\n\nTop Answer:\n**The position absolute way:**\n\n```\n\n \n 4\n \n\n```\n\nIn tailwind.config.js extend inset\n\n```\ntheme: {\n inset: {\n '5': '5px',\n '8': '8px'\n }\n}\n```\n\n**The flex way:**\n\n```\n\n 404\n\n \n```\n\n\r\n\r\n\n```\n\n \n \n \n\n \n 404\n\n \n\n```\n\n========================================\n\nCode:\n```text\n<div class=\"w-1/2 h-10 rounded-full bg-gray-400\" style=\"background-color:red\">404</div>\n```\n\n```html\n<div class=\"font-bold text-gray-700 rounded-full bg-white flex items-center justify-center font-mono\" style=\"height: 500px; width: 500px; font-size: 170px;\">404</div>\n```\n\n```text\nfont-mono\n```\n\n```text\n<div class=\"rounded-full border-2 flex p-3 relative\">\n <div class=\"absolute top-5 left-8\">\n 4\n </div>\n</div>\n```\n\n```text\ntheme: {\n inset: {\n '5': '5px',\n '8': '8px'\n }\n}\n```\n\n```text\n<div class=\"w-20 h-20 rounded-full flex justify-center items-center\">\n <p>404</p>\n </div>\n```\n\n```html\n<html>\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body>\n <div class=\"w-20 h-20 rounded-full border-2 border-black flex justify-center items-center\">\n <p>404</p>\n </div>\n</body>\n</html>\n```\n\n```text\n<div class=\"w-[200px] h-[200px] bg-red rounded-full flex \n justify-center items-center\">\n <p>404</p>\n</div>\n```\n\n```text\n<div class=\"flex\">\n <div class=\"m-3 flex h-20 w-20 items-center justify-center rounded-full bg-blue-600\">\n <p>Circle</p>\n </div>\n\n <div class=\"m-3 flex h-20 w-20 items-center justify-center rounded-md bg-blue-600 text-center\">\n <p>Rounded Square</p>\n </div>\n</div>\n```\n\n```text\nrounded\n```\n\n========================================\n\nComments:\n- Does this is your expectation? codepen.io/Maniraj_Murugan/pen/OJXXQWB\n- adding a line height make things a lot better. You may try it with the property 'leading' tailwindcss.com/docs/line-height","metadata":{"transformedAt":"2026-08-18T18:33:42.874Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":147,"estimatedTokens":561}}13{"id":"stack-67706691","source":"stackoverflow","questionId":67706691,"title":"Using tailwindcss in custom angular library","tags":["angular","tailwind-css"],"text":"Title: Using tailwindcss in custom angular library\nTags: angular, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using Angular 12 to create a custom library. In this library I want to use tailwindcss to style my custom component. I declared tailwindcss an a peer dependency and created the tailwinscss.config.js file in the root of the library folder and imported all necessary modules into the scss file of the component. Unfortunately tailwind classes are not loaded.\n\nThen I noted that if my application where I import my library into also uses tailwind and uses any class that is also used in the library, the custom component is styled correctly.\n\nFor example: my custom component has class `bg-green-800`. When I load this component in my app, it does not apply the background color. Then I create an element in my app and also apply `bg-green-800`. From now on both element and custom component show the correct background color.\n\nIs there a way to use tailwindcss in a custom angular library?\n\n========================================\n\nTop Answer:\nI found a solution for my own problem. One needs to create a static stylesheet file since it is not generated automatically.\n\n- Create the tailwindcss.config.js in the root of your library\n\n- From the root of the library run `npx tailwindcss-cli@latest build -o ./src/lib/tailwind.scss`\n\n- Include the `tailwind.scss` file in your component: `styleUrls: ['../tailwind.scss']`. (Careful with the path)\n\nOne still needs to run the `npx tailwindcss-cli@latest build -o ./src/lib/tailwind.scss` everytime a new class is added to a component to be included into `tailwind.scss`.\n\n========================================\n\nCode:\n```text\nbg-green-800\n```\n\n```text\nbg-green-800\n```\n\n```text\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\",\n \"./projects/ui-components/src/**/*.{html,ts}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [\n require('@tailwindcss/typography'),\n ],\n corePlugins: {\n preflight: false,\n }\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nnpx tailwindcss-cli@latest build -o ./src/lib/tailwind.scss\n```\n\n```text\ntailwind.scss\n```\n\n```text\nstyleUrls: ['../tailwind.scss']\n```\n\n```text\nnpx tailwindcss-cli@latest build -o ./src/lib/tailwind.scss\n```\n\n```text\ntailwind.scss\n```\n\n```text\nng-packagr\n```\n\n```text\npostcss\n```\n\n```text\nmodule.exports = {\n content: [\n \"./src/**/*.html\",\n \"./projects/my-fancy-library/src/**/*.html\", //just add this line\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\nmodule.exports = {\n content: [\n \"./projects/my-fancy-library/src/**/*.html\"\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\n{\n \"scripts\": {\n \"build-lib\": \"ng build my-fancy-lib\",\n \"build-tailwind\": \"tailwindcss -c ./mylib-tailwind.config.js -i ./src/tailwind-input-style.scss -o ./dist/my-fancy-lib/src/lib/my-lib-tailwind.css --minify\"\n },\n \"devDependencies\": {\n \"autoprefixer\": \"10.4.13\",\n \"postcss\": \"8.4.20\",\n \"tailwindcss\": \"3.2.4\"\n }\n }\n```\n\n```js\nmodule.exports = {\n content: [\n './projects/my-lib/**/*.{html,ts,css,scss}',\n './**/*.{html,ts,css,scss}', // optional\n ],\n};\n```\n\n```bash\nnpx tailwindcss@latest -c ./projects/my-lib/tailwind.config.js -o ./projects/my-lib/src/lib/tailwind.scss\n```\n\n```json\n{\n \"scripts\": {\n \"build:my-lib\": \"npx tailwindcss@latest -c ./projects/my-lib/tailwind.config.js -o ./projects/my-lib/src/lib/tailwind.scss & ng build my-lib\"\n }\n}\n```\n\n```text\nnpx tailwindcss-cli build\n```\n\n```text\nnpx tailwindcss\n```\n\n```text\ncontent\n```\n\n```text\ntailwind.scss\n```\n\n```text\nmy-lib/src/lib\n```\n\n```text\ntailwind.scss\n```\n\n```text\nstyleUrls: ['../tailwind.scss']\n```\n\n```text\ncontent\n```\n\n```text\ntailwind.config.js\n```\n\n```text\npackage.json\n```\n\n```css\n@import \"tailwindcss\";\n...\n@source \"../node_modules/my_package/\";\n```\n\n========================================\n\nComments:\n- I did that but the output file is 4MB (it contains all tailwind css), I'm wondering if I'm missing the \"postcss\" step after when doing this technique\n- This generated only the css that was used by the components: `npx tailwindcss -o ./src/lib/tailwind.scss`\n- but when we run `ng build` the dist/project folder's CSS file does not include the built tailwindcss but rather the source tailwindcss. so basically it does not work. Bcs for library projects angular uses ng-packgr compiler which has postcss but does not load postcss config or is not extendible in any way that we can use of tailwind's postcss plugin.\n- You can actually get around the issue you are describing by changing the tailwind config on the project using your component: `content: [ \"./src/**/*.{html,ts}\", \"./node_modules/ui-components/**/*.{html,ts,js}\", ],`\n- Unfortunately `@apply` does not work with this approach.\n- I answered another the same day :) -- stackoverflow.com/a/72208906/9404093 Agreed there's no good way.\n- @Charly I just read your answer and find it better than the accepted answer, hence I have added it as a link to my answer.\n- hi thx for your approach, I just wonder how to call bundle those tailwind when development and after build and publishing packages into npm I have and issue when I publish angular library to npm it loosing all tailwind class","metadata":{"transformedAt":"2026-08-18T18:33:42.875Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":28,"totalLines":204,"estimatedTokens":1325}}14{"id":"stack-79323991","source":"stackoverflow","questionId":79323991,"title":"How is it possible to specify a safelist in TailwindCSS v4? Is it possible to list patterns and variants instead of full class names?","tags":["tailwind-css","tailwind-css-4"],"text":"Title: How is it possible to specify a safelist in TailwindCSS v4? Is it possible to list patterns and variants instead of full class names?\nTags: tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nHow to make a `safelist` in TailwindCSS v4?\n\nAs of now tailwind v4 preferable configuration is to use CSS. Not a `.config.js` anymore. But even if I use the JS-based configuration, the `safelist` property is already disabled in it and can no longer be used from v4 onwards.\n\nIn v3 in a file `tailwind.config.js` we could do:\n\n```\nexport default {\n safelist: [\n {\n pattern: /grid-cols-+/,\n variants: [\"sm\", \"md\", \"lg\", \"xl\"],\n },\n ],\n}\n```\n\nNow my workaround is to use a dummy-styled, invisible html or combinations of CSS styles with `@apply sm:grid-cols-1 sm:grid-cols-2 lg:grid-cols-1`... etc. Unfortunately this is what my UI and user options are done.\n\nHave they dropped this feature? Can this be done \"easly\" in the TailwindCSS v4?\n\n========================================\n\nTop Answer:\n### Updated for Tailwind 4.1+\n\nI now have a very comprehensive article on doing this in Tailwind v4.1+.\n\nTailwind v4.1 introduced an easy way to handle safelisting CSS classes. Let's take a look at that!\n\nIt's as simple as using `@source inline()`, and listing the class you want to whitelist.\n\nFor example, if Tailwind can't find the `text-shadow-md` class in our source files, but you still need it to generate in our CSS, you can do this:\n\n```\n@source inline(\"text-shadow-md\");\n```\n\nI feel like the Tailwind docs on this don't do a great job of explaining how all of this works, as it's very easy to misunderstand.\n\n### Safelisting Multiple Classes\n\nWhen safelisting, we can either use separate statements or combine using spaces. You may want to consider separate statements sometimes for readability.\n\n```\n@source inline(\"text-shadow-md\");\n@source inline(\"float-left\");\n```\n\n```\n@source inline(\"text-shadow-md float-left\");\n```\n\nNote that separating with spaces works with the more advanced examples below as well.\n\n### Safelisting Multiple Utilities\n\nWe can generate multiple utilities at once using curly braces `{}`.\n\n```\n@source inline(\"text-shadow-{sm,md,lg}\");\n```\n\nFor classes that involve numbers, we can do ranges.\n\n```\n@source inline(\"p-{2..10..2}\");\n```\n\nThis takes 3 arguments: the starting number, the ending number, and what to increment by.\n\nThis will generate the classes `p-2`, `p-4`, `p-6`, `p-8`, and `p-10`.\n\nYou can also add additional values to be included by using commas. This generates the classes mentioned above, plus `p-50` and `p-100`.\n\n```\n@source inline(\"p-{50,{2..10..2},100}\");\n```\n\nThis is pretty cool. You can combine variants together. In the example below, we're safelisting both margin and padding classes, including various directions, between a number range of 0 - 100, all in one `@source` statement.\n\n```\n@source inline(\"{m,p}{x,y,t,b,l,r}-{0..100}\");\n```\n\n### Safelisting Multiple Variants\n\nYou can also generate variant classes. This will generate `hover:text-shadow-md`.\n\n```\n@source inline(\"{hover:}text-shadow-md\");\n```\n\nIf you want to generate both the normal and hover version, you can do that by adding a trailing comma.\n\n```\n@source inline(\"{hover:,}text-shadow-md\");\n```\n\nYou can also combine multiple variants. This will generate `hover:float-left` and `focus:float-left`.\n\n```\n@source inline(\"{hover:,focus:}float-left\");\n```\n\nIf you want to safelist the normal `float-left` as well, add the trailing comma.\n\n```\n@source inline(\"{hover:,focus:,}float-left\");\n```\n\nAny variant you want, and you can combine these various concepts.\n\n```\n@source inline(\"{nth-of-type-3:,}p-{50,{2..10..2},100}\");\n```\n\n### Safelisting with Breakpoints\n\nYou can apply the same ideas to breakpoints.\n\n```\n@source inline(\"{sm:,md:,lg:,xl:,2xl:,}text-shadow-md\");\n```\n\n### Excluding Classes\n\nThis concept is basically the opposite of whitelisting classes. You can also blacklist classes. You can use `@source not inline()` to exclude CSS from being generated when they otherwise would be, and this will work with any of our examples above.\n\n```\n@source not inline(\"text-shadow-md\");\n```\n\nI'm going to refrain from relisting every example above here with `not inline()`, but you get the idea.\n\n### Tailwind Source Files\n\nI wanted to mention this, even though it seems obvious to me. You can avoid whitelisting by being sure Tailwind can read your classes in your source files.\n\nFor most projects, your classes should be read automatically. If you need a specific folder that needs to be read that isn't being read, you can tell Tailwind to read it.\n\nYou can include as many of these declarations as you need. The path is relative to your CSS file.\n\n```\n@source (\"./src\");\n```\n\n```\n@source (\"../../../app/templates\");\n```\n\nYou can also set the base path when you include Tailwind in your CSS.\n\n```\n@import \"tailwindcss\" source(\"./src\");\n```\n\nYou can also disable automatic detection altogether.\n\n```\n@import \"tailwindcss\" source(none);\n```\n\nYou would then need to safelist everything you need.\n\nIf you're having trouble getting your classes to be read, be sure you explicitly have the classes in your file and don't generate them dynamically. Using a `switch` statement is a good approach.\n\n```\nlet btnClass = \"\";\n\nswitch (status) {\n case \"success\":\n btnClass = \"bg-green-500\";\n break;\n case \"error\":\n btnClass = \"bg-red-500\";\n break;\n case \"warning\":\n btnClass = \"bg-yellow-500\";\n break;\n default:\n btnClass = \"bg-gray-500\";\n break;\n}\n```\n\nYour classes won't automatically be detected if you dynamically generate them. Do NOT do this unless you want to safelist them manually.\n\n```\nlet btnClass = `bg-${status}-500`;\n```\n\n### Conclusion\n\nThis concept is pretty confusing at first, especially given that Tailwind doesn't document this very well. Although, once you get the hang of it, it's awesome!\n\nThis article is a -up to my previous article, which was released before Tailwind v4.1 was released. It may still be helpful if you have a more advanced use case.\n\n### Tailwind v4.0\n\nI wanted to add, you can obviously just have the classes readable in your source files as well. The below solution is for more advanced use cases.\n\nYou'll want to write a script that generates your classes into a txt or js file, and then include that with `@source` if needed.\n\nHere's a quick example that you can run with Node, written as an ES Module.\n\n```\nimport * as fs from \"fs\";\nimport { classes } from \"./classes.js\";\n\nfs.writeFile(\"safelist.txt\", classes.join(\"\\n\"), (err) => {\n if (err) {\n console.error(err);\n } else {\n console.log(\"Safelist created\");\n }\n});\n```\n\nThen run it: `node generate-classes.js`\n\nThen include the resulting file with `@source`:\n\n```\n@source \"safelist.txt\";\n```\n\nCheck out this extensive blog article I wrote about this.\n\n========================================\n\nCode:\n```js\nexport default {\n safelist: [\n {\n pattern: /grid-cols-+/,\n variants: [\"sm\", \"md\", \"lg\", \"xl\"],\n },\n ],\n}\n```\n\n```text\nsafelist\n```\n\n```text\n.config.js\n```\n\n```text\nsafelist\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@apply sm:grid-cols-1 sm:grid-cols-2 lg:grid-cols-1\n```\n\n```css\n@source inline('{sm:,md:,lg:,xl:,}grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}');\n```\n\n```css\n@source inline('{sm:,md:,lg:,xl:,}grid-cols-{{1..12..1}}');\n```\n\n```css\n@source inline('{sm:,md:,lg:,xl:,}grid-cols-{{1..12}}');\n```\n\n```css\n@source inline('{sm:,md:,lg:,xl:,}grid-cols-{1,{10..90..5}}');\n```\n\n```css\n@source inline('underline');\n```\n\n```css\n@source inline('{hover:,}bg-red-{50,{100..900..100},950}');\n```\n\n```css\n@source inline(\"p{x,y,t,b,l,r}-{1..10}\");\n```\n\n```css\n@source inline(\"{m,p}{x,y,t,b,l,r}-{1..10}\");\n```\n\n```text\ngrid-cols\n```\n\n```text\nplain\n```\n\n```text\ngrid-cols-{1..12}\n```\n\n```text\nsm, md, lg, or xl\n```\n\n```text\nplain\n```\n\n```text\nsm, md, lg, and xl\n```\n\n```text\n{100..900..50}\n```\n\n```text\n100, 150, 200... 850, 900\n```\n\n```text\nsafelist\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\n@source inline(…)\n```\n\n```text\n@source not inline(…)\n```\n\n```text\n@source inline()\n```\n\n```text\nsafelist\n```\n\n```text\n@source\n```\n\n```text\n@source inline\n```\n\n```text\nplain\n```\n\n```text\nhover:\n```\n\n```text\nbg-red\n```\n\n```text\n@source inline\n```\n\n```text\nunderline\n```\n\n```text\nbg-red\n```\n\n```text\n@source inline\n```\n\n```text\npt-\n```\n\n```text\npb-\n```\n\n```text\npl-\n```\n\n```text\npr-\n```\n\n```text\npx-\n```\n\n```text\npy-\n```\n\n```text\n@source inline\n```\n\n```text\nx,y,...,l,r\n```\n\n```text\np-1\n```\n\n```text\np-2\n```\n\n```text\nmargin\n```\n\n```text\npadding\n```\n\n```text\nm,p\n```\n\n```text\nx-1\n```\n\n```text\ny-2\n```\n\n```text\nsafelist\n```\n\n```text\nsafelist\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\n@source\n```\n\n```text\n@source inline\n```\n\n```css\n@source inline(\"text-shadow-md\");\n```\n\n```css\n@source inline(\"text-shadow-md\");\n@source inline(\"float-left\");\n```\n\n```css\n@source inline(\"text-shadow-md float-left\");\n```\n\n```css\n@source inline(\"text-shadow-{sm,md,lg}\");\n```\n\n```css\n@source inline(\"p-{2..10..2}\");\n```\n\n```css\n@source inline(\"p-{50,{2..10..2},100}\");\n```\n\n```css\n@source inline(\"{m,p}{x,y,t,b,l,r}-{0..100}\");\n```\n\n```css\n@source inline(\"{hover:}text-shadow-md\");\n```\n\n```css\n@source inline(\"{hover:,}text-shadow-md\");\n```\n\n```css\n@source inline(\"{hover:,focus:}float-left\");\n```\n\n```css\n@source inline(\"{hover:,focus:,}float-left\");\n```\n\n```css\n@source inline(\"{nth-of-type-3:,}p-{50,{2..10..2},100}\");\n```\n\n```css\n@source inline(\"{sm:,md:,lg:,xl:,2xl:,}text-shadow-md\");\n```\n\n```css\n@source not inline(\"text-shadow-md\");\n```\n\n```css\n@source (\"./src\");\n```\n\n```css\n@source (\"../../../app/templates\");\n```\n\n```css\n@import \"tailwindcss\" source(\"./src\");\n```\n\n```css\n@import \"tailwindcss\" source(none);\n```\n\n```js\nlet btnClass = \"\";\n\nswitch (status) {\n case \"success\":\n btnClass = \"bg-green-500\";\n break;\n case \"error\":\n btnClass = \"bg-red-500\";\n break;\n case \"warning\":\n btnClass = \"bg-yellow-500\";\n break;\n default:\n btnClass = \"bg-gray-500\";\n break;\n}\n```\n\n```js\nlet btnClass = `bg-${status}-500`;\n```\n\n```js\nimport * as fs from \"fs\";\nimport { classes } from \"./classes.js\";\n\nfs.writeFile(\"safelist.txt\", classes.join(\"\\n\"), (err) => {\n if (err) {\n console.error(err);\n } else {\n console.log(\"Safelist created\");\n }\n});\n```\n\n```css\n@source \"safelist.txt\";\n```\n\n```text\n@source inline()\n```\n\n```text\ntext-shadow-md\n```\n\n```text\n{}\n```\n\n```text\np-2\n```\n\n```text\np-4\n```\n\n```text\np-6\n```\n\n```text\np-8\n```\n\n```text\np-10\n```\n\n```text\np-50\n```\n\n```text\np-100\n```\n\n```text\n@source\n```\n\n```text\nhover:text-shadow-md\n```\n\n```text\nhover:float-left\n```\n\n```text\nfocus:float-left\n```\n\n```text\nfloat-left\n```\n\n```text\n@source not inline()\n```\n\n```text\nnot inline()\n```\n\n```text\nswitch\n```\n\n```text\n@source\n```\n\n```text\nnode generate-classes.js\n```\n\n```text\n@source\n```\n\n```css\n@import \"tailwindcss\";\n@theme static {\n --color-primary: var(--color-red-500);\n --color-secondary: var(--color-blue-500);\n}\n```\n\n```text\n@source inline(..)\n```\n\n```text\nstatic\n```\n\n```text\n@source inline(\"{sm:,md:,lg:,xl:,2xl:,}max-w-{sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl}\");\n```\n\n========================================\n\nComments:\n- Nothing yet, they recommend having a safelist.txt file for now.\n- Good point. For now I have added `@source \"../../safelist.txt\";` to file main `app.css` file. `safelist.txt` have all classes I need and it seems to work. Thanks. Also I found a Roadmap 4.0 statement that the safelist/blocklist is not implemented yet.\n- I don't understand the reason for closing this. In TailwindCSS v3, the provided code snippet allows you to safelist classes without listing specific class names. In v4, this wasn't possible for a long time, and even now, the available alternative in the CSS-first configuration is quite different. I believe the question is well-focused from the start - it's asking how the v3 example can be implemented in v4.\n- @rozsazoltan Same confusion here. I had a problem, asked, you replied. Problem solved. I see no issue with 'focus'. lol :)\n- Don't get me wrong here. The tool you've done (and linked) is great, but imo, the safelist.txt is used only for a few classes and places that the standard Tailwind v4 can't discover automatically. This automation seems like an overkill, while you can simply paste your few class names in this safelist.txt file. Cheers.\n- Exactly, @radzi0_0 is right. There's no issue with a few classes. Many people miss the patterns, like being able to set all colors as exceptions, for example, for every available screen size. All of this without having to list them out like: sm:bg-red-50, md:bg-red-50, ... xl:bg-green-500...\n- There is a class list in this tailwind discussion : github.com/tailwindlabs/tailwindcss/discussions/10379\n- This answer has now been edited to reflect the abilities of Tailwind v4.1+ and also address the points mentioned about Tailwind 4.0.\n- How can you do this with a wildcard? e.g. `text-token-*`? It doesn't work.\n- You don't have that option. The Tailwind CSS team generally takes a firm stance against this kind of syntax because, for example, with `bg-*`, imagine how many possible variations there could be - this would result in excessive, unnecessary class generation. Especially for beginners, this could lead to extremely bloated compiled CSS files, which, if downloaded frequently (e.g., daily), would mean a significant amount of unnecessary data transfer globally.\n- @MichaelGiovanniPumo If you need this many class names - especially ones that are never actually used - it might be worth considering using native CSS styling along with Tailwind CSS variables for the dynamic parts. It's absolutely fine, and even recommended, to supplement Tailwind CSS with native CSS when it leads to better or more efficient results.\n- Related: Write custom dynamically utilities instead of too much safelisted classes","metadata":{"transformedAt":"2026-08-18T18:33:42.875Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":107,"totalLines":716,"estimatedTokens":3475}}15{"id":"stack-72175358","source":"stackoverflow","questionId":72175358,"title":"How to uninstall Tailwind from React application?","tags":["reactjs","tailwind-css","react-bootstrap","tailwind-css-3"],"text":"Title: How to uninstall Tailwind from React application?\nTags: reactjs, tailwind-css, react-bootstrap, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI have installed React Bootstrap and Tailwind CSS together for my React app. I'm getting some conflict using both of them. So I want to uninstall Tailwind CSS.\n\n========================================\n\nTop Answer:\n```\nnpm uninstall tailwindcss\n```\n\n*also (uninstall tailwind dev dependencies, if no other package needs them)*\n\n```\nnpm uninstall autoprefixer\n```\n\n```\nnpm uninstall postcss\n```\n\nFor yarn users, use:\n\n```\nyarn remove PACKAGE_NAME\n```\n\n========================================\n\nCode:\n```text\nnpm uninstall tailwindcss\n```\n\n```text\nyarn remove tailwindcss\n```\n\n```text\nnpm uninstall tailwindcss\n```\n\n```text\nnpm uninstall autoprefixer\n```\n\n```text\nnpm uninstall postcss\n```\n\n```text\nyarn remove PACKAGE_NAME\n```\n\n```text\nnpm remove tailwindcss\n```\n\n========================================\n\nComments:\n- Did not mention to remove these files: `postcss.config.js`, and `tailwind.config.js`. Also `npm uninstall prettier-plugin-tailwindcss` if you have it installed. And finally remove `@tailwind base;`, `@tailwind components;` `@tailwind utilities;` from your `global.css`.\n- Please read How to Answer and edit your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- remove tailwind.config.js file too","metadata":{"transformedAt":"2026-08-18T18:33:42.875Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":68,"estimatedTokens":454}}16{"id":"stack-70504047","source":"stackoverflow","questionId":70504047,"title":"How to have a bordered text in tailwind","tags":["css","tailwind-css"],"text":"Title: How to have a bordered text in tailwind\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI need the text to have a black border.\n\nI tried this,\n\n```\n\n Hello\n \n```\n\nBut it doesn't seem put a border to the text.\n\n========================================\n\nTop Answer:\nI had this issue as well, but I did not feel that the existing answers gave me a solution that follows Tailwind's utility-first approach.\n\nInstead of creating custom css for a specific element, instead we should create a new tailwind utility class for this purpose.\n\nTo do that we alter the main.css tailwind file that holds our configuration and use the @layer base selector.\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n .font-outline-2 {\n -webkit-text-stroke: 2px black;\n }\n .font-outline-4 {\n -webkit-text-stroke: 4px black;\n }\n}\n```\n\nThis allows us to reference our new class anywhere in our project alongside default tailwind classes, and it additionally works with Tailwind state selectors.\n\n```\n\n Works as expected\n\n```\n\n========================================\n\nCode:\n```text\n<div className=\"font-bold text-2xl text-white outline-4\">\n Hello\n </div>\n```\n\n```text\ndrop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]\n```\n\n```text\nh1 {\n color: white;\n text-shadow:\n -1px -1px 0 #000, \n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000;\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n .font-outline-2 {\n -webkit-text-stroke: 2px black;\n }\n .font-outline-4 {\n -webkit-text-stroke: 4px black;\n }\n}\n```\n\n```text\n<h1 class=\"text-2xl font-bold font-outline-2 hover:font-outline-4\">\n Works as expected\n</h1>\n```\n\n```text\n<style>\n .specialtext\n {\n -webkit-text-fill-color: transparent;\n -webkit-text-stroke-width: 1px;\n }\n </style>\n```\n\n```js\nimport plugin from 'tailwindcss/plugin';\nimport flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette';\n```\n\n```js\nplugins: [\n plugin(function ({ matchUtilities, theme }) {\n matchUtilities(\n {\n 'font-stroke': (value) => ({\n '-webkit-text-stroke-width': value\n })\n },\n {\n values: {\n ...theme('borderWidth'),\n thin: 'thin',\n medium: 'medium',\n thick: 'thick'\n }\n }\n );\n }),\n plugin(function ({ matchUtilities, theme }) {\n matchUtilities(\n {\n 'font-stroke': (value) => ({\n '-webkit-text-stroke-color': value\n })\n },\n {\n values: flattenColorPalette(theme('colors'))\n }\n );\n })\n ]\n```\n\n```text\n-[]\n```\n\n```text\ntailwind.config\n```\n\n```text\nplugin\n```\n\n```text\nflattenColorPalette\n```\n\n```text\n-[]\n```\n\n```text\nThe class `font-stroke-[0.5px]` is ambiguous and matches multiple utilities\n```\n\n```text\n<span class=\"absolute font-mono top-[-32px] left-[17rem] text-2xl font-bold text-transparent \n outline-none\" style=\"-webkit-text-stroke: 2px black;\">\n```\n\n========================================\n\nComments:\n- Use the `border-2` class. \"2\" can be replaced by `4`, `8`, etc.\n- That bring border around the text like a div. But need a text outlined in black @Yousaf\n- @SaiKrishnadas Could you be more precise about the goal ? How is this supposed to look like? Maybe image resolve the problem better.... ?\n- Using text-shadow on paragraph text makes it harder to read. Best on headings and larger text content\n- Just as an update, now -webkit-text-stroke property is supported by all major browsers.\n- this works well, but the downside is that the stroke takes away from the width of the text.\n- i love simple solutions like this. Thanks","metadata":{"transformedAt":"2026-08-18T18:33:42.875Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":182,"estimatedTokens":988}}17{"id":"stack-68728360","source":"stackoverflow","questionId":68728360,"title":"tailwind css doesn't apply custom background color","tags":["tailwind-css"],"text":"Title: tailwind css doesn't apply custom background color\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\n```\nmodule.exports = {\n purge: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./layout/**/*.{js,ts,jsx,tsx}\",\n \"./const/**/*.{js,ts,jsx,tsx}\",\n \"./fonts/**/*.{js,ts,jsx,tsx,ttf}\",\n \"./utils/**/*.{js,ts,jsx,tsx}\",\n ],\n darkMode: false,\n theme: {\n extend: {\n colors: {\n \"brand-green\": \"#4DF69B\",\n \"brand-amber\": \"#FF8656\",\n \"brand-red\": \"#FF5656\",\n \"brand-gray\": \"#7E7E7E\",\n },\n width: {\n content: \"fit-content\",\n },\n top: {\n 20: \"5rem\",\n },\n fontFamily: {\n DINAlternate: [\"DINAlternate\", \"sans-serif\"],\n },\n },\n },\n variants: {\n extend: {\n borderWidth: [\"hover\"],\n textColor: [\"group-focus\"],\n },\n },\n plugins: [],\n};\n```\n\nMy config.\n\nI changed my next.config.js to to next.config.ts then it told me that it should have .js format I rewrite it and as I think after I tried to move every file to .ts format my tailwind broke. It works with margins/paddins but not with bg though it works with text-red-200\n\nIf I inspect elements I can see bg-brand-red classes but it just doesn't apply them.\nIt worked well but after I refactor code it broke but once I reset everything to prev commit I still get this problem where background colors doesn't work.\n\nIt is weird since it worked one time and in 5mins it got broken even when I rollbacked to last commit on github it still be broken\n\nHow can I know what is the problem?\n\n========================================\n\nTop Answer:\n### \"PurgeCSS\" may be the problem\n\n(you haven't provided usage in the code)\n\nwhen classes are created dynamically (interpolated), optimizer will simply not export them\n\n### force optimizer to include them always\n\nwith exact value:\n\n```\n// tailwind.config.js\nmodule.exports = {\n // ...\n safelist: [\n 'brand-red', // Add more classes as needed\n // Patterns are also supported\n 'brand-*', // Safelists all brand color utilities\n ],\n // ...\n}\n```\n\nor with regex pattern:\n\n```\n// tailwind.config.js\nmodule.exports = {\n // ...\n safelist: [\n {\n pattern: /brand-(green|amber|red|grey)-[0-9]{3}/,\n },\n ],\n // ...\n}\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n purge: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./layout/**/*.{js,ts,jsx,tsx}\",\n \"./const/**/*.{js,ts,jsx,tsx}\",\n \"./fonts/**/*.{js,ts,jsx,tsx,ttf}\",\n \"./utils/**/*.{js,ts,jsx,tsx}\",\n ],\n darkMode: false,\n theme: {\n extend: {\n colors: {\n \"brand-green\": \"#4DF69B\",\n \"brand-amber\": \"#FF8656\",\n \"brand-red\": \"#FF5656\",\n \"brand-gray\": \"#7E7E7E\",\n },\n width: {\n content: \"fit-content\",\n },\n top: {\n 20: \"5rem\",\n },\n fontFamily: {\n DINAlternate: [\"DINAlternate\", \"sans-serif\"],\n },\n },\n },\n variants: {\n extend: {\n borderWidth: [\"hover\"],\n textColor: [\"group-focus\"],\n },\n },\n plugins: [],\n};\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nbody {\n font-family: \"DIN Alternate\", sans-serif;\n font-size: 16px;\n}\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nbody {\n font-family: \"DIN Alternate\", sans-serif;\n font-size: 16px;\n}\n```\n\n```text\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\nbody {\n font-family: \"DIN Alternate\", sans-serif;\n font-size: 16px;\n}\n@import 'tailwindcss/utilities';\n```\n\n```text\ncontent: [\n \"./resources/**/*.blade.php\", \n \"./resources/**/*.js\",\n \"./resources/**/*.vue\",\n]\n```\n\n```text\ncontent: [\n \"./resources/**/*.blade.php\",\n \"./resources/**/**/**/**/*.blade.php\",\n \"./resources/**/*.js\",\n \"./resources/**/*.vue\",\n],\n```\n\n```text\nnpm run dev\n```\n\n```text\ntailwing.config.js\n```\n\n```text\n...\n\"dev\": \"tailwindcss -i ./src/input.css -o ./dist/style.css --watch\"\n...\n```\n\n```text\nnpm run dev\n```\n\n```text\nbg-green\n```\n\n```text\nbg-green-500\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n // ...\n safelist: [\n 'brand-red', // Add more classes as needed\n // Patterns are also supported\n 'brand-*', // Safelists all brand color utilities\n ],\n // ...\n}\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n // ...\n safelist: [\n {\n pattern: /brand-(green|amber|red|grey)-[0-9]{3}/,\n },\n ],\n // ...\n}\n```\n\n```text\nsafelist: [\n {\n pattern:\n /(bg|text|border)-(purple|pink|orange|yellow|green|black|gray|neutral|red|blue|white)/,\n },\n],\n```\n\n```text\n<script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: [\"Inter\", \"ui-sans-serif\", \"system-ui\", \"sans-serif\"]\n },\n colors: {\n brand: {\n DEFAULT: \"#1a237e\",\n light: \"#3949ab\"\n },\n accent: \"#ffd54f\"\n }\n }\n }\n };\n </script>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n```\n\n```text\n<script src=\"https://cdn.tailwindcss.com\"></script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: [\"Inter\", \"ui-sans-serif\", \"system-ui\", \"sans-serif\"]\n },\n colors: {\n brand: {\n DEFAULT: \"#1a237e\",\n light: \"#3949ab\"\n },\n accent: \"#ffd54f\"\n }\n }\n }\n };\n </script>\n```\n\n========================================\n\nComments:\n- I have no idea why this works, but it worked for me! Thanks so much!\n- This worked for me. It really makes no sense why that works...\n- yea, I have just put the body where it was and moved tailwind imports to the top and it worked fine. It was a weird problem. I returned to where I had, but there is no problem.\n- I did the same thing your doing when I first used it - its okay I guess, when one gets into anything complex imho one still might be better off just using scss or css.\n- That should not make a difference. `/**/` is used to match paths to any depth, hence the first should match anything the second line matches anyway.\n- in my case adding the custom colors to extend section of tailwind config worked instead of outer block\n- Many thanks, that was the problem on my end. Would have never thought about something like that.","metadata":{"transformedAt":"2026-08-18T18:33:42.875Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":18,"totalLines":310,"estimatedTokens":1580}}18{"id":"stack-71277655","source":"stackoverflow","questionId":71277655,"title":"Prevent page flash in Next.js 12 with Tailwind CSS class-based dark mode","tags":["javascript","reactjs","next.js","tailwind-css"],"text":"Title: Prevent page flash in Next.js 12 with Tailwind CSS class-based dark mode\nTags: javascript, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow can one prevent the page flash when using class-based dark mode in Tailwind CSS with Next.js v12 without using any 3rd party pkgs like next-themes?\n\nI've looked at:\n\nthis Q&A How to fix dark mode background color flicker in NextJS? and while it's a valid/working solution in Next.js tags using next/head (see inline ). Use next/script instead. See more info here: https://nextjs.org/docs/messages/no-script-tags-in-head-component`\n\n- This article https://www.vidyasource.com/blog/dark-mode-nextjs-tailwindcss-react-hooks however including the script `` still results in a page flash as it adds `defer` to it in the `head`\n\n- This official Tailwind CSS dark mode doc on what's required https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually\n\n```\n// On page load or when changing themes, best to add inline in `head` to avoid FOUC\nif (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {\n document.documentElement.classList.add('dark')\n} else {\n document.documentElement.classList.remove('dark')\n}\n```\n\nI think they restrict putting things in `Head` from v12 to prepare for Suspense / Streaming / React v18.\n\nEither way, I'm lost on how to do it without next-themes, does anyone know how can we just inject that bit of script to prevent that page flash?\n\nHope this question makes sense, if not, please give me a shout.\n\nI like simple and minimalistic things, hence the aim to reduce the dependency on 3rd party pkgs, such a simple thing should be possible without overcomplicated solution IMO.\n\n========================================\n\nTop Answer:\nNextJS 13 with App Router:\n\nAfter looking at the Page Source Code for the Twailwind website directly (by clicking `command+option+u` on Chrome MacOS), we can see that they are using the exact strategy they describe in their Dark Mode documentation.\n\nHowever, combining this with NextJs' Inline Script Optimizations will not work because they wrap the content of inline scripts inside a call to next_js, which ultimately requires the page to load NextJS before setting the dark mode (hence the FOUC).\n\nTo avoid this, we can use a plain `script` tag without optimization inside our **root** layout and set its content using the `dangerouslySetInnerHTML` property like so:\n\n```\n\n \n \n\n {/* Other Meta Tags, Links, Etc... */}\n \n \n \n {/* Content */}\n \n\n```\n\nThat way, our script will be one of the first to execute when the page loads, preventing a flash of unstyled content.\n\n**[EDIT]**:\n\nThis approach causes NextJS to throw a `Prop 'className' did not match` warning in dev mode when the \"dark\" class is present in the client HTML but not in the server-rendered HTML. This is to be expected since we changed the structure of the HTML before NextJS had a chance to verify it. We can manually suppress the warning by setting `suppressHydrationWarning` on the opening HTML tag.\n\nCheers!\n\n========================================\n\nCode:\n```js\n// On page load or when changing themes, best to add inline in `head` to avoid FOUC\nif (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {\n document.documentElement.classList.add('dark')\n} else {\n document.documentElement.classList.remove('dark')\n}\n```\n\n```text\nDo not add <script> tags using next/head (see inline <script>). Use next/script instead. See more info here: https://nextjs.org/docs/messages/no-script-tags-in-head-component\n```\n\n```text\n<Script strategy=\"beforeInteractive\" src=\"/scripts/darkMode.js\"/>\n```\n\n```text\ndefer\n```\n\n```text\nhead\n```\n\n```text\nHead\n```\n\n```js\n;(function initTheme() {\n var theme = localStorage.getItem('theme') || 'light'\n if (theme === 'dark') {\n document.querySelector('html').classList.add('dark')\n }\n})()\n```\n\n```js\nimport '../styles/globals.css'\nimport type { AppProps } from 'next/app'\nimport Head from 'next/head'\nimport Script from 'next/script'\n\nfunction App({ Component, pageProps }: AppProps) {\n return <>\n <Head>\n <meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" />\n </Head>\n <Script src=\"/theme.js\" strategy=\"beforeInteractive\" />\n <Component {...pageProps} />\n </>\n}\n\nexport default App\n```\n\n```text\ntheme.js\n```\n\n```text\npublic\n```\n\n```text\n<Script src=\"/theme.js\" strategy=\"beforeInteractive\" />\n```\n\n```text\n_app.tsx\n```\n\n```text\n_app.jsx\n```\n\n```text\n_document.tsx\n```\n\n```text\n_app.tsx\n```\n\n```text\nimport { Html, Head, Main, NextScript } from 'next/document'\nimport Script from 'next/script'\n\nexport default function Document() {\n return (\n <Html lang=\"en\">\n <Head >\n <Script src=\"/theme.js\" strategy=\"beforeInteractive\"/>\n </Head>\n <body \n <Main />\n <NextScript />\n </body>\n </Html>\n )\n}\n```\n\n```text\n<html lang=\"en\" suppressHydrationWarning>\n <head>\n <script dangerouslySetInnerHTML={{\n __html: `\n try {\n if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {\n document.documentElement.classList.add('dark')\n } else {\n document.documentElement.classList.remove('dark')\n }\n } catch (_) {}\n `\n }}/>\n\n {/* Other Meta Tags, Links, Etc... */}\n </head>\n \n <body className=\"text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-900\">\n {/* Content */}\n </body>\n</html>\n```\n\n```text\ncommand+option+u\n```\n\n```text\nscript\n```\n\n```text\ndangerouslySetInnerHTML\n```\n\n```text\nProp 'className' did not match\n```\n\n```text\nsuppressHydrationWarning\n```\n\n```text\nconst cookieStore = cookies();\n const theme = cookieStore.get(\"theme\");\n\n return (\n <html lang=\"en\" data-theme={theme}>\n ...\n```\n\n```text\ncookies()\n```\n\n```text\nRootLayout\n```\n\n========================================\n\nComments:\n- I'm getting an error: `Hydration failed because the initial UI does not match what was rendered on the server.` when refreshing the page - any ideas?\n- @jimmyNames were you able to fix that hydration failed issue?\n- @RonaldBluthl the Next.js docs say that `beforeInteractive` only works from `_document`, did you encounter any issues? nextjs.org/docs/basic-features/script#beforeinteractive\n- @jimmyNames I believe this is since the v12 update, I had this solution in place before and had no issue but since 12 I'm seeing this console log as well. It looks like we'll need to find a solution or live with the temporary error.\n- @Noitidart yes in the end the error was resulting for me due to the dark mode library i was using, in the end i followed their documentation and resolved the bug\n- I confirm it works as opposed to putting the script outside the Head tags in _document.tsx","metadata":{"transformedAt":"2026-08-18T18:33:42.875Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":25,"totalLines":242,"estimatedTokens":1730}}19{"id":"stack-67417275","source":"stackoverflow","questionId":67417275,"title":"Cards of same height in tailwind CSS","tags":["css","tailwind-css"],"text":"Title: Cards of same height in tailwind CSS\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using tailwind css. The data in cards is inconsistent. For example some card have short description while other cards have long. Some card contains 1-2 tags while others contains 5-6. I want to make all the cards of same height. Is there any way to do this?\n\n\r\n\r\n\n```\n\n \n \n \n \n \n Card Name\n \n \n Link 1\n Link 2\n \n\n Some Description\n\n \n \n Tag #1\n\n Tag #2\n\n \n \n \n \n\n```\n\n========================================\n\nTop Answer:\nBest solution, imo, is using `grid` and `auto-rows-fr`.\n\nSo, you would have:\n\n\r\n\r\n\n```\n\n This has some content.\n \n This has more content so that its significantly larger than the other\n items. Yet all items, even the one in the new line will grow to the\n size of the highest container.\n \n More content.\n First item in new line.\n\n```\n\n========================================\n\nCode:\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n<div class=\"container mx-auto p-6\">\n <div class=\"flex flex-wrap -mx-4\">\n <div class=\"w-full sm:w-1/2 md:w-1/2 xl:w-1/4 p-4\">\n <div class=\"block bg-white overflow-hidden border-2\">\n <div class=\"p-4\">\n <h2 class=\"mt-2 mb-2 font-bold text-2xl font-Headingg\">\n Card Name\n </h2>\n <div class=\"mb-4 flex flex-wrap\">\n <span class=\"mr-2\">Link 1</span>\n <span>Link 2</span>\n </div>\n\n <p class=\"text-md text-justify\">Some Description</p>\n </div>\n <div class=\"p-4 flex flex-wrap items-center\">\n <p class=\"px-1 py-2 tracking-wide text-xs mr-2 mb-2\">Tag #1</p>\n <p class=\"px-1 py-2 tracking-wide text-xs mr-2 mb-2\">Tag #2</p>\n </div>\n </div>\n </div>\n </div>\n</div>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n\n<div class=\"container mx-auto p-6\">\n <div class=\"flex items-stretch -mx-4\">\n <div class=\"flex-1 p-4\">\n <div class=\"block bg-white overflow-hidden border-2 h-full\">\n <div class=\"p-4\">\n <h2 class=\"mt-2 mb-2 font-bold text-2xl font-Headingg\">\n Card Name\n </h2>\n <div class=\"mb-4 flex flex-wrap\">\n <span class=\"mr-2\">Link 1</span>\n <span>Link 2</span>\n </div>\n\n <p class=\"text-md text-justify\">Some Description</p>\n </div>\n <div class=\"p-4 flex flex-wrap items-center\">\n <p class=\"px-1 py-2 tracking-wide text-xs mr-2 mb-2\">Tag #1</p>\n <p class=\"px-1 py-2 tracking-wide text-xs mr-2 mb-2\">Tag #2</p>\n </div>\n </div>\n </div>\n \n <div class=\"flex-1 p-4\">\n <div class=\"block bg-white overflow-hidden border-2 h-full\">\n <div class=\"p-4\">\n <h2 class=\"mt-2 mb-2 font-bold text-2xl font-Headingg\">\n Card Name\n </h2>\n <div class=\"mb-4 flex flex-wrap\">\n <span class=\"mr-2\">Link 1</span>\n <span>Link 2</span>\n </div>\n\n <p class=\"text-md text-justify\">Some Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel enim lectus.</p>\n </div>\n <div class=\"p-4 flex flex-wrap items-center\">\n <p class=\"px-1 py-2 tracking-wide text-xs mr-2 mb-2\">Tag #1</p>\n <p class=\"px-1 py-2 tracking-wide text-xs mr-2 mb-2\">Tag #2</p>\n </div>\n </div>\n </div>\n </div>\n</div>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n<div class=\"container mx-auto p-6 grid grid-cols-2 gap-4\">\n <div class=\"col-span-1 flex flex-col bg-white border-2 p-4\">\n <h2 class=\"mb-2 font-bold text-2xl\">\n Card Name\n </h2>\n <div class=\"mb-4 flex flex-wrap\">\n <span class=\"mr-2\">Link 1</span>\n <span class=\"mr-2\">Link 2</span>\n </div>\n <p class=\"text-md text-justify\">Some Description</p>\n <div class=\"flex flex-wrap mt-auto pt-3 text-xs\">\n <p class=\"mr-2 mb-2\">Tag #1</p>\n <p class=\"mr-2 mb-2\">Tag #2</p>\n </div>\n </div>\n <div class=\"col-span-1 flex flex-col bg-white border-2 p-4\">\n <h2 class=\"mb-2 font-bold text-2xl\">\n Card Name\n </h2>\n <div class=\"mb-4 flex flex-wrap\">\n <span class=\"mr-2\">Link 1</span>\n <span class=\"mr-2\">Link 2</span>\n </div>\n <p class=\"text-md text-justify\">Some Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel enim lectus.</p>\n <div class=\"flex flex-wrap mt-auto pt-3 text-xs\">\n <p class=\"mr-2 mb-2\">Tag #1</p>\n <p class=\"mr-2 mb-2\">Tag #2</p>\n </div>\n </div>\n</div>\n```\n\n```text\nitems-stretch\n```\n\n```text\nh-full\n```\n\n```text\ngrid-cols-xxx\n```\n\n```text\ncol-span-xxx\n```\n\n```html\n<div class=\"grid auto-rows-fr grid-cols-3 gap-2\">\n<!-------------- ^^^^^^^^^^^^ this part is important -->\n\n <div class=\"rounded bg-slate-100 p-3\">This has some content.</div>\n <div class=\"rounded bg-slate-100 p-3\">\n This has more content so that its significantly larger than the other\n items. Yet all items, even the one in the new line will grow to the\n size of the highest container.\n </div>\n <div class=\"rounded bg-slate-100 p-3\">More content.</div>\n <div class=\"rounded bg-slate-100 p-3\">First item in new line.</div>\n</div>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n```\n\n```text\ngrid\n```\n\n```text\nauto-rows-fr\n```\n\n========================================\n\nComments:\n- how did you make the height of the cards same? I can see that your descriptions are different but heights are of the same, and tag is fixed in that position in both of the cards\n- `items-strech` is what I was missing thanks for that\n- Thanks, this actually solved my issue. I had one card that would not stretch when it overflowed into a new row","metadata":{"transformedAt":"2026-08-18T18:33:42.875Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":223,"estimatedTokens":1448}}20{"id":"stack-69253420","source":"stackoverflow","questionId":69253420,"title":"Text Stroke (-webkit-text-stroke) css Problem","tags":["css","next.js","sass","fonts","tailwind-css"],"text":"Title: Text Stroke (-webkit-text-stroke) css Problem\nTags: css, next.js, sass, fonts, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am working on a personal project with NextJs and TailwindCSS.\n\nupon finishing the project I used a private navigator to see my progress, but it seems that the stroke is not working as it should, I encounter this in all browsers except Chrome.\n\nHere is what i get :\n\nhttps://i.sstatic.net/7lXgc.jpg\n\nHere is the desired behavior :\n\nhttps://i.sstatic.net/JxV6H.jpg\n\nCode:\n\n```\n\n Values & Process\n\n```\n\nCss:\n\n```\n.outline-title {\n color: rgba(0, 0, 0, 0);\n -webkit-text-stroke: 2px black;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n```\n\nCan someone explain or help to fix this.\n\nBrowser compatibility:\nhttps://i.sstatic.net/kN0te.jpg\n\n========================================\n\nTop Answer:\nDue to browser compatibility **-webkit-text-stroke** will not support in a few browsers. You can achieve the outline effect by using shadow.\n\nHope this works!\n\n\r\n\r\n\n```\n.outline-title {\nfont-family: sans-serif;\n color: white;\n text-shadow:\n 1px 1px 0 #000,\n -1px -1px 0 #000, \n 1px -1px 0 #000,\n -1px 1px 0 #000;\n font-size: 50px;\n}\n```\n\n\r\n\n```\n\n Values & Process\n\n```\n\n\r\n\r\n\r\n\n---- **UPDATE** ---\n\nhttps://i.sstatic.net/2HQLN.png\n\n========================================\n\nCode:\n```text\n<div className=\"outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8\">\n Values & Process\n</div>\n```\n\n```text\n.outline-title {\n color: rgba(0, 0, 0, 0);\n -webkit-text-stroke: 2px black;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n```\n\n```css\n/* latin */\n@font-face {\n font-family: \"Inter\";\n font-style: normal;\n font-weight: 100 900;\n src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwYZ90A2N58.woff2)\n format(\"woff2\");\n}\n\n@font-face {\n font-family: 'InterStatic';\n font-style: normal;\n font-weight: 700;\n src: url(https://cdn.jsdelivr.net/gh/rsms/inter@master/docs/font-files/InterDisplay-Bold.woff2) format('woff2');\n}\n\n\nbody {\n font-family: \"Inter\";\n font-size: 5em;\n color: #fff;\n -webkit-text-stroke: 0.02em red;\n}\n\n.interStatic{\n font-family: 'InterStatic';\n}\n```\n\n```html\n<h1>Values & Process</h1>\n<h1 class=\"interStatic\">Values & Process</h1>\n```\n\n```css\nbody{\n}\n\n\nh3{\n margin:0;\n}\np{\n font-size:15vmin;\n font-weight:700;\n color:transparent;\n -webkit-text-stroke: 0.02em black;\n margin:0\n}\n\n.fnt1{\n font-family:'Cormorant Garamond'\n}\n\n.fnt2{\n font-family:'Georama'\n}\n\n.fnt3{\n font-family:'Inter'\n}\n```\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&display=swap\">\n\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Georama:ital,wght@0,100..900;1,100..900&display=swap\">\n\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap\">\n\n<h3>Static </h3>\n<p class=\"fnt1\">HAR</p>\n<h3>Static </h3>\n<p class=\"fnt3\">HAR</p>\n\n<h3>Variable </h3>\n<p class=\"fnt2\">HAR</p>\n```\n\n```css\n@font-face {\n font-family: 'Roboto Flex';\n font-style: normal;\n font-weight: 100 1000;\n font-stretch: 0% 200%;\n src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format('woff2');\n}\n\nbody {\n font-family: 'Roboto Flex';\n font-weight: 500;\n font-size: 10vmin;\n margin: 2em;\n background-color: #999;\n}\n\nh3 {\n font-size: 16px;\n color: #fff\n}\n\nh1 {\n -webkit-text-stroke: 0.02em black;\n color: #fff;\n font-stretch: 0%;\n font-weight: 200;\n}\n\n\n/* render stroke behind text-fill color */\n\n.outline {\n -webkit-text-stroke: 0.04em black;\n paint-order: stroke fill;\n}\n```\n\n```html\n<h3>Stroked - showing geometry of the font</h3>\n<h1>AVATAR</h1>\n\n<h3>Outlined - stroke behind fill</h3>\n<h1 class=\"outline\">AVATAR</h1>\n```\n\n```js\naddOutlineTextData();\n\nfunction addOutlineTextData() {\n let textOutline = document.querySelectorAll(\".textOutlined\");\n textOutline.forEach((text) => {\n text.dataset.content = text.textContent;\n });\n}\n\nlet root = document.querySelector(':root');\n\n\nsampleText.addEventListener(\"input\", (e) => {\n let sampleText = e.currentTarget.textContent;\n let textOutline = document.querySelectorAll(\".textOutlined\");\n textOutline.forEach((text) => {\n text.textContent = sampleText;\n text.dataset.content = sampleText;\n });\n});\n\nstrokeWidth.addEventListener(\"input\", (e) => {\n let width = +e.currentTarget.value;\n strokeWidthVal.textContent = width + 'em'\n root.style.setProperty(\"--strokeWidth\", width + \"em\");\n});\n\nfontWeight.addEventListener(\"input\", (e) => {\n let weight = +e.currentTarget.value;\n fontWeightVal.textContent = weight;\n document.body.style.fontWeight = weight;\n});\n\nuseStatic.addEventListener(\"input\", (e) => {\n let useNonVF = useStatic.checked ? true : false;\n if (useNonVF) {\n document.body.style.fontFamily = 'Roboto';\n } else {\n document.body.style.fontFamily = 'Roboto Flex';\n }\n});\n```\n\n```css\n@font-face {\n font-family: 'Roboto Flex';\n font-style: normal;\n font-weight: 100 1000;\n font-stretch: 0% 200%;\n src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format('woff2');\n}\n\nbody {\n font-family: 'Roboto Flex';\n font-weight: 500;\n margin: 2em;\n}\n\n.p,\np {\n margin: 0;\n font-size: 10vw;\n}\n\n.label {\n font-weight: 500!important;\n font-size: 15px;\n}\n\n.resize {\n resize: both;\n border: 1px solid #ccc;\n overflow: auto;\n padding: 1em;\n width: 40%;\n}\n\n:root {\n --textOutline: #000;\n --strokeWidth: 0.1em;\n}\n\n.stroke {\n -webkit-text-stroke: var(--strokeWidth) var(--textOutline);\n color: #fff\n}\n\n.textOutlined {\n position: relative;\n color: #fff;\n}\n\n.textOutlined:before {\n content: attr(data-content);\n position: absolute;\n z-index: -1;\n color: #fff;\n top: 0;\n left: 0;\n -webkit-text-stroke: var(--strokeWidth) var(--textOutline);\n display: block;\n width: 100%;\n}\n```\n\n```html\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900\" rel=\"stylesheet\">\n<p class=\"label\">stroke width<input id=\"strokeWidth\" type=\"range\" value=\"0.3\" min='0.01' max=\"0.5\" step=\"0.001\"><span id=\"strokeWidthVal\">0.25em</span> | font-weight<input id=\"fontWeight\" type=\"range\" value=\"100\" min='100' max=\"900\" step=\"10\"><span id=\"fontWeightVal\">100</span>\n <label><input id=\"useStatic\" type=\"checkbox\">Use static Roboto</label><br><br>\n</p>\n\n\n<div id=\"sampleText\" class=\"stroke p\" contenteditable>AVATAR last <br>Airbender</div>\n<p class=\"label\">Outline via pseudo element in background</p>\n<div class=\"resize\">\n <p class=\"textOutlined\">AVATAR last Airbender\n </p>\n</div>\n```\n\n```js\nbtnConvert.onclick = () => {\n htmlText2SvgText();\n}\n\n/* when loaded instantly - wait for all fonts to be loaded\n(async () => {\n await document.fonts.ready;\n htmlText2SvgText();\n})();\n*/\n\n\n\nfunction htmlText2SvgText(selector = \".html2SvgText\") {\n let textEls = document.querySelectorAll(selector);\n\n // quit if already converted\n let processedEls = document.querySelectorAll('.svgTxt');\n if (processedEls.length) return;\n\n textEls.forEach(textEl => {\n\n // get text nodes\n let textNodes = getTextNodesInEL(textEl);\n\n textNodes.forEach(textNode => {\n\n let textParent = textNode.parentElement;\n\n // split to words to ensure line wrapping\n let words = textNode.textContent.split(' ').filter(Boolean);\n\n // get font style properties from parent\n let style = window.getComputedStyle(textParent)\n let {\n webkitTextStrokeWidth,\n webkitTextStrokeColor,\n fontSize,\n fontStretch,\n fontStyle,\n color,\n letterSpacing,\n wordSpacing,\n } = style;\n\n\n /**\n * convert property values \n * to relative em based values \n * used for SVG text conversion\n */\n let strokeWidthRel = Math.ceil(100 / parseFloat(fontSize) * parseFloat(webkitTextStrokeWidth) * 2)\n let letterSpacingRel = letterSpacing && letterSpacing !== 'normal' ? (parseFloat(letterSpacing) / parseFloat(fontSize)).toFixed(3) : 0;\n let wordSpacingRel = wordSpacing && wordSpacing != 'normal' ? +(parseFloat(wordSpacing) / parseFloat(fontSize)).toFixed(3) : 0;\n\n\n // adjust letter and word spacing for parent element \n if (letterSpacingRel || wordSpacingRel) textParent.setAttribute('style', `letter-spacing:0em; word-spacing:${(letterSpacingRel) * words.length + wordSpacingRel}em`);\n\n\n // loop words and replace them with SVG \n words.forEach((word, i) => {\n\n // add space in between word SVGs\n let space = i < words.length - 1 ? ' ' : '';\n let svg = new DOMParser().parseFromString(\n `<svg class=\"svgTxt\" viewBox=\"0 0 100 100\" style=\"overflow:visible; display:inline-block;height:1em; width:auto;line-height:1em;margin-top: -100px;\">\n <text class=\"svgTxt-text\" x=\"0\" y=\"100\" \n font-size=\"100\" \n fill=\"currentColor\" \n style=\"font-kerning:normal; font-stretch: ${fontStretch}\"\n stroke=\"${webkitTextStrokeColor}\" \n stroke-width=\"${strokeWidthRel}\"\n letter-spacing=\"${letterSpacingRel}em\" \n paint-order=\"stroke\" \n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">${word.trim()}</text>\n </svg>`,\n 'text/html'\n ).querySelector('svg');\n\n //textParent.insertAdjacentHTML('afterbegin', svg);\n textParent.insertBefore(svg, textNode);\n\n if (i < words.length - 1) {}\n // add spaces\n let spaceNode = document.createTextNode(' ');\n textParent.insertBefore(spaceNode, svg.nextSibling);\n\n\n //let svgEls = textParent.querySelectorAll('svg');\n let textSVG = svg.querySelector('text')\n\n //get bbox\n let {\n x,\n width\n } = textSVG.getBBox();\n\n // shorten by letter spacing value\n let shorten = 100 * letterSpacingRel;\n shorten = letterSpacingRel + wordSpacingRel * 2;\n svg.setAttribute('viewBox', [Math.floor(x), 0, Math.floor(width) - shorten, 100].join(' '));\n\n ({\n x,\n width\n } = textSVG.getBBox());\n svg.setAttribute('viewBox', [Math.floor(x), 0, Math.floor(width) - shorten, 100].join(' '));\n\n })\n\n // erase currenet text content\n textNode.remove();\n\n })\n })\n}\n\n\n// text helpers\nfunction getTextNodesInEL(el) {\n const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);\n const nodes = [];\n while (walker.nextNode()) {\n nodes.push(walker.currentNode);\n }\n return nodes;\n}\n```\n\n```css\n* {\n box-sizing: border-box;\n}\n\n@font-face {\n font-family: 'Roboto Flex';\n font-style: oblique 0deg 10deg;\n font-weight: 100 1000;\n font-stretch: 25% 151%;\n font-display: swap;\n src: url(https://fonts.gstatic.com/s/robotoflex/v26/NaPccZLOBv5T3oB7Cb4i0zu6RME.woff2) format('woff2');\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n\n\n/* prevent faux italicizing */\n\nem {\n font-variation-settings: 'slnt' -10;\n font-style: normal;\n}\n\nbody {\n font-family: \"Roboto\", sans-serif;\n font-family: \"Roboto Flex\", sans-serif;\n}\n\n.resize {\n font-size: 5vw;\n letter-spacing: 0.01em;\n font-stretch: 110%;\n overflow: auto;\n padding: 0.1em;\n border: 1px solid #ccc;\n width: 100%;\n resize: both;\n}\n\nh1 {\n font-size: 3em;\n line-height: 1.1em;\n font-weight: 400;\n font-stretch: 30%;\n text-transform: uppercase;\n letter-spacing: 0;\n margin: 0;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\n}\n\nstrong {\n font-stretch: 150%;\n}\n\n.stroked-text {\n -webkit-text-stroke: 2px darkred;\n color: #fff;\n}\n```\n\n```html\n<p>\n <button id=\"btnConvert\">convert HTML els to SVG</button>\n</p>\n\n<div class=\"resize\">\n <h1 class=\"html2SvgText stroked-text\">Franz Kafka <span style=\"-webkit-text-stroke-color:green; -webkit-text-stroke-width:3px;font-stretch:75%\">The\n Metamorphosis</span></h1>\n\n <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a\n <strong class=\"html2SvgText\"><em><span class=\"stroked-text\">horrible vermin.</span></em></strong> He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.\n The bedding was hardly able to cover it and seemed ready to slide off any moment.\n </p>\n\n</div>\n```\n\n```text\n-webkit-text-stroke\n```\n\n```text\nwebkit-text-stroke\n```\n\n```text\npaint-order\n```\n\n```text\npaint-order\n```\n\n```text\ncolor\n```\n\n```text\n-webkit-text-stroke\n```\n\n```text\n-webkit-text-stroke\n```\n\n```text\n<text>\n```\n\n```text\npaint-order\n```\n\n```text\nstroke-linecap\n```\n\n```text\nstroke-linejoin\n```\n\n```text\nletter-spacing\n```\n\n```text\nviewBox\n```\n\n```css\n.outline-title {\nfont-family: sans-serif;\n color: white;\n text-shadow:\n 1px 1px 0 #000,\n -1px -1px 0 #000, \n 1px -1px 0 #000,\n -1px 1px 0 #000;\n font-size: 50px;\n}\n```\n\n```html\n<div class=\"outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8\">\n Values & Process\n</div>\n```\n\n```css\n.broken {\n -webkit-text-stroke: 2px black;\n}\n\n.fixed {\n position: relative;\n /* We need double the stroke width because half of it gets covered up */\n -webkit-text-stroke: 4px black;\n}\n/* Place a second copy of the same text over top of the first */\n.fixed::after {\n content: attr(data-text);\n position: absolute;\n left: 0;\n -webkit-text-stroke: 0;\n pointer-events: none;\n}\n\n\ndiv { font-family: 'Inter var'; color: white; }\n/* (optional) adjustments to make the two approaches produce more similar shapes */\n.broken { font-weight: 800; font-size: 40px; }\n.fixed { font-weight: 600; font-size: 39px; letter-spacing: 1.2px; }\n```\n\n```html\n<link href=\"https://rsms.me/inter/inter.css\" rel=\"stylesheet\">\n\nBefore:\n<div class=\"broken\">\n Values & Process\n</div>\n\nAfter:\n<div class=\"fixed\" data-text=\"Values & Process\">\n Values & Process\n</div>\n```\n\n```css\n.broken {\n -webkit-text-stroke: 2px black;\n}\n\n.fixed {\n position: relative;\n /* We need double the stroke width because half of it gets covered up */\n -webkit-text-stroke: 4px black;\n}\n/* Place the second copy of the text over top of the first */\n.fixed span {\n position: absolute;\n left: 0;\n -webkit-text-stroke: 0;\n pointer-events: none;\n}\n\n\ndiv { font-family: 'Inter var'; color: white; }\n/* (optional) adjustments to make the two approaches produce more similar shapes */\n.broken { font-weight: 800; font-size: 40px; }\n.fixed { font-weight: 600; font-size: 39px; letter-spacing: 1.2px; }\n```\n\n```html\n<link href=\"https://rsms.me/inter/inter.css\" rel=\"stylesheet\">\n\nBefore:\n<div class=\"broken\">\n Values & Process\n</div>\n\nAfter:\n<div class=\"fixed\">\n Values & Process\n <span aria-hidden=\"true\">Values & Process</span>\n</div>\n```\n\n```text\naria-hidden\n```\n\n```text\nimport { ComponentProps } from 'react'\n\nexport const TextWithStroke = ({ text, ...props }: ComponentProps<'div'> & { text: string }) => {\n return (\n <div\n {...props}\n style={{\n position: 'relative',\n ...props.style\n }}>\n <p className=\"text-stroke\">{text}</p>\n <p className=\"top-0 absolute\">{text}</p>\n </div>\n )\n }\n```\n\n```css\n@layer utilities {\n .text-stroke {\n -webkit-text-stroke: 5px #4DDE4D;\n }\n}\n```\n\n```text\ntext-stroke\n```\n\n```text\n-webkit-text-stroke\n```\n\n```text\n<div className=\"outline-title pb-2 text-9xl font-bold text-center mb-12 mt-8 font-serif\">\n Values & Process\n </div>\n```\n\n```text\npaint-order: stroke fill;\n```\n\n```text\npaint-order\n```\n\n```text\nRGBA\n```\n\n```text\nRGBA\n```\n\n```text\ntransparent\n```\n\n========================================\n\nComments:\n- can you let me know the font which you have used? I have tried in Chrome and Safari, it's working fine codepen.io/pplcallmesatz/pen/oNeyQrv\n- font-family: \"Calibre\", \"Inter\", \"San Francisco\", \"SF Pro Text\", -apple-system, system-ui, sans-serif;\n- **-webkit-text-stroke** is supported by a lot of browsers, see the edit.\n- @agoumi can you please check the update\n- Thanks for the solution! I believe the last `1px 1px 0 #000;` is redundant?\n- Hi @Xitang , apologies for the mistake. Please ignore the last line. I will update the answer accordingly. Thanks for pointing it out!\n- @herrstrietzel Thanks for the note, I updated the answer thanks again!\n- This is a very comprehensive answer. I will add that if the text fill color is transparent, then paint order doesn't necessarily fix it. I specifically has issues on mobile, with Chrome and Opera, and the use of a static font was the only solution. Be sure to link directly to the individual font file with weight specified, like the InterStatic example above.\n- I was a little sus of this solution, but it actually works pretty well.\n- one issue I found with this is if the data attribute has a quote in it (or any other special characters for that matter), it breaks this. Trying to find a way around this. Might have to just use two elements.\n- @CRAIG You should be able to escape quotes, see developer.mozilla.org/en-US/docs/Glossary/Entity\n- This is a cool hack.\n- I think the background should have `aria-hidden=\"true\"`, not the foreground. If code changes will make them have different text contents, the foreground will likely be more legible (and thus also more likely to have been programmed to contain the desired text).\n- That's not a good answer, honestly. I'd like to keep my current font.\n- This is not a solution but you are describing your problem. The problem is with the font, you were able to change that according to your requirements but the OP needs to use that font.\n- Worked perfectly for Public Sans which had the same problem. Note in my version of FontForge, it was `Element -> Overlap -> Remove Overlap`.\n- Caution: this also introduces accessibility issues: a screen reader would read the (presumably) headings twice. However, you could mitigate this problem by adding an ARIA attribute such as `aria-hidden=\"true\"` to one of the redundant text elements.\n- Keep in mind the developer/web-designer may not *want* to change the font to an arbitrary alternative like \"serif\". Besides, other variable fonts may introduce the same issues.\n- Sounds interesting but frankly I can't reproduce it (when adding an alpha value to the RGBA color array I can still see the undesired overlapping strokes). Could you please a running snippet illustrating this approach.","metadata":{"transformedAt":"2026-08-18T18:33:42.876Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":44,"totalLines":793,"estimatedTokens":4784}}21{"id":"stack-70906977","source":"stackoverflow","questionId":70906977,"title":"Tailwind underline hover animation","tags":["css","tailwind-css"],"text":"Title: Tailwind underline hover animation\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've spent a day figuring out how to make an animation after hovering over the link by using Tailwind-CSS.\nHere is the animation I want mine link looks like the video.\nSample from Youtube\n\nI have tried using `:after`, but it didn't work out.\nHere is my link component => https://codepen.io/qqharry21/pen/xxPwqjQ\n\nI Hope can learn how to fix it, and make it works like the video by Tailwind-CSS, thanks!\n\n========================================\n\nTop Answer:\nIf you're not wanting to include a CSS file just for this functionality or you just want to do it in Tailwind - the code snippet I've posted below is based purely on Tailwind CSS.\n\n```\n\n \n This text gets 'underlined' on hover\n \n\n```\n\nCheers and happy coding!\n\n========================================\n\nCode:\n```text\n:after\n```\n\n```text\n<a href=\"#\" class=\"group text-sky-600 transition duration-300\">\nLink\n<span class=\"block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-sky-600\"></span>\n</a>\n```\n\n```css\n.link-underline {\n border-bottom-width: 0;\n background-image: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);\n background-size: 0 3px;\n background-position: 0 100%;\n background-repeat: no-repeat;\n transition: background-size .5s ease-in-out;\n }\n\n .link-underline-black {\n background-image: linear-gradient(transparent, transparent), linear-gradient(#F2C, #F2C)\n }\n\n .link-underline:hover {\n background-size: 100% 3px;\n background-position: 0 100%\n }\n```\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css\" integrity=\"sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n\n<div class=\"min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12\">\n <div class=\"relative py-3 sm:max-w-xl sm:mx-auto\">\n <a href=\"#\" class=\"font-display max-w-sm text-2xl font-bold leading-tight\">\n <span class=\"link link-underline link-underline-black text-black\"> Link Hover Effect </span>\n </a>\n </div>\n</div>\n```\n\n```html\n<a class=\"group text-pink-500 transition-all duration-300 ease-in-out\" href=\"#\">\n <span class=\"bg-left-bottom bg-gradient-to-r from-pink-500 to-pink-500 bg-[length:0%_2px] bg-no-repeat group-hover:bg-[length:100%_2px] transition-all duration-500 ease-out\">\n This text gets 'underlined' on hover\n </span>\n</a>\n```\n\n```text\n<section class=\"bg-[#0077b6] h-screen w-screen text-white flex items-center justify-center\">\n <a class=\"text-3xl relative after:bg-white after:absolute after:h-1 after:w-0 after:bottom-0 after:left-0 hover:after:w-full after:transition-all after:duration-300 cursor-pointer\">Text you want to underline in just one line</a>\n</section>\n```\n\n```text\nafter\n```\n\n========================================\n\nComments:\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- this one is actually more right because its only underline on the text we want and not the full width\n- Concise and effective! Best answer\n- For those who want the growing effect to start from the center rather than the left, `after:left-1/2 hover:after:left-0`.","metadata":{"transformedAt":"2026-08-18T18:33:42.876Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":100,"estimatedTokens":894}}22{"id":"stack-72161637","source":"stackoverflow","questionId":72161637,"title":"Unexpected unknown at-rule \"@tailwind\" scss/at-rule-no-unknown","tags":["css","sass","tailwind-css"],"text":"Title: Unexpected unknown at-rule \"@tailwind\" scss/at-rule-no-unknown\nTags: css, sass, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThis is my `stylelint.config.js`,\n\n```\nmodule.exports = {\n extends: ['stylelint-config-standard-scss'],\n rules: {\n 'at-rule-no-unknown': [\n true,\n {\n ignoreAtRules: ['tailwind']\n }\n ],\n 'declaration-block-trailing-semicolon': null,\n 'scss/at-extend-no-missing-placeholder': null,\n 'color-function-notation': 'legacy',\n 'selector-pseudo-class-no-unknown': [\n true,\n {\n ignorePseudoClasses: ['deep']\n }\n ]\n }\n}\n```\n\nAnd when I run `stylelint \"**/*.{scss,css,sass,svelte}\"`, I get the following error:\n\n```\nyarn run v1.22.17\n$ stylelint \"**/*.{scss,css,sass,svelte}\"\n\nsrc/css/app.scss\n 1:1 ✖ Unexpected unknown at-rule \"@tailwind\" scss/at-rule-no-unknown\n 2:1 ✖ Unexpected unknown at-rule \"@tailwind\" scss/at-rule-no-unknown\n 3:1 ✖ Unexpected unknown at-rule \"@tailwind\" scss/at-rule-no-unknown\n\nerror Command failed with exit code 2.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n```\n\nThis is my css file,\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n========================================\n\nTop Answer:\n### TailwindCSS v4\n\nStarting from v4, TailwindCSS no longer supports the use of Sass, Less, and Stylus preprocessors, so consider phasing them out. See:\n\n- Deprecated: preprocessors support - StackOverflow\n\n### TailwindCSS v3 and v2\n\nAlthough the specific question was about the `@tailwind` directive, I believe it might be worth documenting all other TailwindCSS-specific directives in the exception list:\n\n- Functions and Directives for TailwindCSS v3 - TailwindCSS v3 Docs\n\n- Functions and Directives for TailwindCSS v2 - TailwindCSS v2 Docs\n\n```\nrules: {\n \"at-rule-no-unknown\": null,\n \"scss/at-rule-no-unknown\": [\n true,\n {\n \"ignoreAtRules\": [\n // For TailwindCSS v3 and v2\n \"tailwind\",\n \"layer\",\n \"apply\",\n \"config\",\n\n // Extra until TailwindCSS v2\n // \"variants\",\n // \"responsive\",\n // \"screen\",\n ],\n },\n ],\n}\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n extends: ['stylelint-config-standard-scss'],\n rules: {\n 'at-rule-no-unknown': [\n true,\n {\n ignoreAtRules: ['tailwind']\n }\n ],\n 'declaration-block-trailing-semicolon': null,\n 'scss/at-extend-no-missing-placeholder': null,\n 'color-function-notation': 'legacy',\n 'selector-pseudo-class-no-unknown': [\n true,\n {\n ignorePseudoClasses: ['deep']\n }\n ]\n }\n}\n```\n\n```text\nyarn run v1.22.17\n$ stylelint \"**/*.{scss,css,sass,svelte}\"\n\nsrc/css/app.scss\n 1:1 ✖ Unexpected unknown at-rule \"@tailwind\" scss/at-rule-no-unknown\n 2:1 ✖ Unexpected unknown at-rule \"@tailwind\" scss/at-rule-no-unknown\n 3:1 ✖ Unexpected unknown at-rule \"@tailwind\" scss/at-rule-no-unknown\n\nerror Command failed with exit code 2.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nstylelint.config.js\n```\n\n```text\nstylelint \"**/*.{scss,css,sass,svelte}\"\n```\n\n```text\nrules: {\n \"at-rule-no-unknown\": null,\n \"scss/at-rule-no-unknown\": [\n true,\n {\n \"ignoreAtRules\": [\"tailwind\"]\n }\n ],\n}\n```\n\n```js\nrules: {\n \"at-rule-no-unknown\": null,\n \"scss/at-rule-no-unknown\": [\n true,\n {\n \"ignoreAtRules\": [\n // For TailwindCSS v3 and v2\n \"tailwind\",\n \"layer\",\n \"apply\",\n \"config\",\n\n // Extra until TailwindCSS v2\n // \"variants\",\n // \"responsive\",\n // \"screen\",\n ],\n },\n ],\n}\n```\n\n```text\n@tailwind\n```\n\n```text\nnpm install --save-dev stylelint-config-tailwindcss\n```\n\n```text\n# .stylelintrc.json\n\"extends\": [\n \"stylelint-config-standard\", \n \"stylelint-config-tailwindcss\" # <-- add this after your base rulesets\n],\n```\n\n========================================\n\nComments:\n- Thanks, for me \"'at-rule-no-unknown': null\" was not needed. But I don't know how I could have guessed that it needed `scss` in front of the rule name.\n- @Tonio edited answer to add source\n- Wow, Solved the issue in 1 minite","metadata":{"transformedAt":"2026-08-18T18:33:42.876Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":203,"estimatedTokens":1042}}23{"id":"stack-70713667","source":"stackoverflow","questionId":70713667,"title":"How to customize a theme in daisy-ui?","tags":["tailwind-css","daisyui"],"text":"Title: How to customize a theme in daisy-ui?\nTags: tailwind-css, daisyui\nSource: Stack Overflow\n\nQuestion:\nI want to customize a theme in daisyui. Is it possible to customize i.e. the dark theme (just fix one color, or add a further color-entry)?\n\nFurthermore: is it possible to add a new color entry to your custom theme?\n\nI.e. I tried the following without success:\n\n```\ndaisyui: {\n styled: true,\n themes: [\n \"light\", // first one will be the default theme\n \"dark\",\n {\n mytheme: {\n primary: \"#793ef9\",\n \"new-color\": \"#eff1ae\",\n \"primary-focus\": \"#570df8\",\n },\n },\n \"cupcake\",\n ],\n },\n```\n\n...but when I use the new color `new-color`, in my css (`theme(\"colors.new-color\")`). I get following error:\n\n```\n(146:7) /home/armwur/code/booking-overview/src/index.css 'colors.new-color' does not exist in your theme config. 'colors' has the following valid keys: 'inherit', 'current', 'transparent', 'black', 'white', 'neutral', 'primary', 'primary-focus', 'primary-content', 'secondary', 'secondary-focus', 'secondary-content', 'accent', 'accent-focus', 'accent-content', 'neutral-focus', 'neutral-content', 'base-100', 'base-200', 'base-300', 'base-content', 'info', 'success', 'warning', 'error'\n\n 144 | }\n 145 | .fast-table tr:hover td {\n> 146 | background-color: theme('colors.new-color');\n | ^\n 147 | }\n 148 | .fast-table th, .fast-table td {\n```\n\nI need to add a custom color-entry. How is that possible?\n\n========================================\n\nTop Answer:\n**To change a color in a default theme in DaisyUI**\n\n- Find the theme colors at: https://github.com/saadeghi/daisyui/blob/master/src/colors/themes.js\n\n- Add the *entire* theme to tailwind.config.cjs, change whatever you want.\n\n```\ndaisyui: {\n themes: [\n {'dark': {\n \"primary\": \"#793ef9\",\n \"primary-focus\": \"#570df8\",\n \"primary-content\": \"#ffffff\",\n \"secondary\": \"#f000b8\",\n \"secondary-focus\": \"#bd0091\",\n \"secondary-content\": \"#ffffff\",\n \"accent\": \"#37cdbe\",\n \"accent-focus\": \"#2aa79b\",\n \"accent-content\": \"#ffffff\",\n \"neutral\": \"#2a2e37\",\n \"neutral-focus\": \"#16181d\",\n \"neutral-content\": \"#ffffff\",\n \"base-100\": \"#3d4451\",\n \"base-200\": \"#2a2e37\",\n \"base-300\": \"#16181d\",\n \"base-content\": \"#ebecf0\",\n \"info\": \"#66c6ff\",\n \"success\": \"#87d039\",\n \"warning\": \"#e2d562\",\n \"error\": \"#ff6f6f\"\n }},\n 'light',\n ]\n }\n```\n\nI don't know how you would go about adding a new color to your theme though...\n\n========================================\n\nCode:\n```js\ndaisyui: {\n styled: true,\n themes: [\n \"light\", // first one will be the default theme\n \"dark\",\n {\n mytheme: {\n primary: \"#793ef9\",\n \"new-color\": \"#eff1ae\",\n \"primary-focus\": \"#570df8\",\n },\n },\n \"cupcake\",\n ],\n },\n```\n\n```text\n(146:7) /home/armwur/code/booking-overview/src/index.css 'colors.new-color' does not exist in your theme config. 'colors' has the following valid keys: 'inherit', 'current', 'transparent', 'black', 'white', 'neutral', 'primary', 'primary-focus', 'primary-content', 'secondary', 'secondary-focus', 'secondary-content', 'accent', 'accent-focus', 'accent-content', 'neutral-focus', 'neutral-content', 'base-100', 'base-200', 'base-300', 'base-content', 'info', 'success', 'warning', 'error'\n\n 144 | }\n 145 | .fast-table tr:hover td {\n> 146 | background-color: theme('colors.new-color');\n | ^\n 147 | }\n 148 | .fast-table th, .fast-table td {\n```\n\n```text\nnew-color\n```\n\n```text\ntheme(\"colors.new-color\")\n```\n\n```text\nmodule.exports = {\n //...\n daisyui: {\n themes: [\n {\n light: {\n ...require(\"daisyui/src/theming/themes\")[\"light\"],\n primary: \"blue\",\n \"primary-focus\": \"mediumblue\",\n },\n },\n ],\n },\n}\n```\n\n```text\n[data-theme=\"mytheme\"] .btn {\n border-width: 2px;\n border-color: black;\n}\n```\n\n```text\ndaisyui: {\n themes: [\n {'dark': {\n \"primary\": \"#793ef9\",\n \"primary-focus\": \"#570df8\",\n \"primary-content\": \"#ffffff\",\n \"secondary\": \"#f000b8\",\n \"secondary-focus\": \"#bd0091\",\n \"secondary-content\": \"#ffffff\",\n \"accent\": \"#37cdbe\",\n \"accent-focus\": \"#2aa79b\",\n \"accent-content\": \"#ffffff\",\n \"neutral\": \"#2a2e37\",\n \"neutral-focus\": \"#16181d\",\n \"neutral-content\": \"#ffffff\",\n \"base-100\": \"#3d4451\",\n \"base-200\": \"#2a2e37\",\n \"base-300\": \"#16181d\",\n \"base-content\": \"#ebecf0\",\n \"info\": \"#66c6ff\",\n \"success\": \"#87d039\",\n \"warning\": \"#e2d562\",\n \"error\": \"#ff6f6f\"\n }},\n 'light',\n ]\n }\n```\n\n```text\n//tailwind.config.js\n\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {\n colors: \n {\n \"title\": 'hsl(var(--title))', // color-variable\n }\n },\n },\n plugins: [require(\"daisyui\")],\n daisyui: {\n themes: [\n {\n light: {\n ...require(\"daisyui/src/colors/themes\")[\"[data-theme=light]\"],\n '--title': '50, 53%, 34%'\n },\n dark: {\n ...require(\"daisyui/src/colors/themes\")[\"[data-theme=dark]\"],\n '--title': '0, 0%, 100%'\n }\n }\n ]\n },\n}\n```\n\n```html\nplugins: [daisyui],\n theme: {\n extend: {\n colors: {\n \"main\": \"var(--main)\",\n },\n },\n },\n daisyui: {\n themes: [\n {\n light: {\n ...require(\"daisyui/src/theming/themes\")[\"[data-theme=light]\"],\n primary: \"#FE5C36\",\n secondary: \"#5cc7d1\",\n \"primary-content\": \"fff\",\n // expanded colors\n \"--main\": \"#ff00ff\",\n\n },\n },\n ],\n },\n```\n\n```text\nclass=\"bg-main\"\n```\n\n========================================\n\nComments:\n- You say outdated, but I used this to fix a theme that was not working. In 2.51, it seems to require the entire theme definition. This is a PITA as I want to use color-scheme based on user perference and this seems to override.\n- The link is dated. Update to github.com/saadeghi/daisyui/blob/…\n- For #2, the docs are a bit light on where to actually put that css...Still not sure myself.\n- @MichaelPaler You have to add the attribute 'data-theme=\"mytheme\"' to you root element (or just the element that you have to customize), then when you add this #2 code in your css file that is injected in your html you will see the changes. Hope this helps, if not feel free to dm me.\n- In the latest DaisyUI themes are now defined here: `\"daisyui/src/theming/themes\"`\n- Thanks for pointing out! Updated the answer.\n- It works but it seems it's overriding the daisyui light theme instead of creating another\n- For answer 1 or answer 2? Answer 1 is for modifying a selected theme of daisyUI, for answer 2 you are modifying your theme","metadata":{"transformedAt":"2026-08-18T18:33:42.876Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":253,"estimatedTokens":1732}}24{"id":"stack-68137362","source":"stackoverflow","questionId":68137362,"title":"Using Tailwind Forms Plugin with React Select","tags":["css","reactjs","tailwind-css","react-select"],"text":"Title: Using Tailwind Forms Plugin with React Select\nTags: css, reactjs, tailwind-css, react-select\nSource: Stack Overflow\n\nQuestion:\nI am trying to integrate `Select` from `react-forms` with tailwind css and the tailwind forms plugin (`@tailwindcss/forms`).\n\nWith only tailwind and react-select, the form renders correctly. However, with the plugin, an outline appears. I would like for tailwindcss forms not to interfere with `react-select` styling. Is there an effective solution to allow `react-select` styles to override tailwind plugins?\n\nhttps://i.sstatic.net/vx0TH.png\n\nAdditionally, please let me know if there are any effective solutions for styling `react-select` forms using `tailwind` without resorting to other libraries, like `emotion` or `styled-components`.\n\n========================================\n\nTop Answer:\nThanks @Bogdan for your answer, that indeed did the trick! 🎉\n\nWhat comes to the author's second question, as of version 5.7.0, React Select allows styling with classes through the `classNames` prop. Here's an example of how it can be used (from their docs):\n\n```\n\n state.isFocused ? 'border-red-600' : 'border-grey-300',\n }}\n/>\n```\n\nI've recently styled React Select with Tailwind, and it worked as expected! I also used the `unstyled` prop to eliminate the default styling. Refer to the list of available components to target the parts you want to style. For what it's worth, I also wrote a detailed article on my implementation if that's of any help.\n\nAnd oh, I also discovered an alternative method to override Tailwind forms plugin with the class styling approach. As the React Select `input` key targets the containing `div` of the actual `input` element, we can target the input element with Tailwind's arbitrary variants:\n\n```\n \"[&_input:focus]:ring-0\"\n }}\n/>\n```\n\nI still prefer the original solution by Bogdan, though, as it's a bit clearer what's going on, but your preference may vary.\n\n========================================\n\nCode:\n```text\nSelect\n```\n\n```text\nreact-forms\n```\n\n```text\n@tailwindcss/forms\n```\n\n```text\nreact-select\n```\n\n```text\nreact-select\n```\n\n```text\nreact-select\n```\n\n```text\ntailwind\n```\n\n```text\nemotion\n```\n\n```text\nstyled-components\n```\n\n```text\n<Select\n....\nstyles={{\n input: (base) => ({\n ...base,\n 'input:focus': {\n boxShadow: 'none',\n },\n }),\n}}\n\n/>\n```\n\n```text\nform-*\n```\n\n```text\nimport tw from 'twin.macro';\nimport ReactSelect, { Props } from 'react-select';\n\nconst Styled = {\n Select: tw(ReactSelect)`rounded-lg text-center border-2`\n};\n\nconst Select: React.FC<Partial<Props>> = (props) => {\n return (\n <Styled.Select {...props} />\n );\n};\n```\n\n```text\n<Select\n classNames={{\n control: (state) =>\n state.isFocused ? 'border-red-600' : 'border-grey-300',\n }}\n/>\n```\n\n```text\n<Select\n classNames={{\n input: () => \"[&_input:focus]:ring-0\"\n }}\n/>\n```\n\n```text\nclassNames\n```\n\n```text\nunstyled\n```\n\n```text\ninput\n```\n\n```text\ndiv\n```\n\n```text\ninput\n```\n\n```text\n<Select\n classNamePrefix=\"myselect\"\n options={options}\n/>\n```\n\n```text\n.myselect__input {\n @apply focus:ring-0;\n}\n```\n\n```text\nclassNamePrefix\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.876Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":22,"totalLines":165,"estimatedTokens":781}}25{"id":"stack-67289894","source":"stackoverflow","questionId":67289894,"title":"JIT tailwindcss using variable in bg-[] not rendering color","tags":["next.js","tailwind-css"],"text":"Title: JIT tailwindcss using variable in bg-[] not rendering color\nTags: next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nwhen passing my color as props like this ` and using in the code className={'bg-[${color}] '} it does not render properly.`\n\nwhen looking at chrome dev tools color are added correctly like this `bg-[#84AB86]`\n\nwhile putting the color manually without taking it from props, it does work correctly\n\nafter more testing it seems not possible either to do it like this\n\n```\nconst color = \"#84CC79\"\nclassName={`bg-[${color}]`}\n```\n\nany idea why\n\n========================================\n\nTop Answer:\nAs mentioned above tailwind engine In order to render a custom class dynamicaly:\n\nDoes not like:\n\n```\nclassName={`bg-[${custom-color}]-100`}\n```\n\nIt expects:\n\n```\nconst customBgColorLight = 'bg-custom-color-100';\n\nclassName={`${customBgColorLight} .....`}\n```\n\nFor this to work properly you have to include the name of the class in the `safelist:[]` in your `tailwind.config.js`.\nFor tailwind v.3\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: ['./src/**/*.{js,jsx,ts,tsx}'],\n safelist: [\n 'bg-custom-color-500', // your-custom-css-class\n 'text-custom-color-500',\n 'border-custom-color-500',\n ..... // other classes\n 'hover:bg-custom-color-500', // *** also include it with the selector if needed *** \n .... // other classes\n ],\n theme: {\n extend: {\n colors: {\n 'custom-color': { // you have to use quotes if key is not in camelCase format\n 100: '#d6d6d6',\n 500: '#5E8EA2',\n ..... //other variants\n },\n ...... // other colors\n```\n\nSo you can use it:\n\n```\n// if you want store the values to an object\n const yourClassObj = {\n customBgColor: 'bg-custom-color-500',\n customBrdColor: 'border-custom-color-500',\n customTxtColor: 'text-custom-color-500',\n };\n\n const { customBgColor, customBrdColor, customTxtColor } = yourClassObj;\n\n```\n\n========================================\n\nCode:\n```text\nconst color = \"#84CC79\"\nclassName={`bg-[${color}]`}\n```\n\n```text\n<List text=\"something\" color=\"#84AB86\" /> and using in the code className={'bg-[${color}] '} it does not render properly.\n```\n\n```text\nbg-[#84AB86]\n```\n\n```text\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}',\n ],\n safelist: [\n 'bg-red-500',\n 'text-3xl',\n 'lg:text-4xl',\n ]\n // ...\n}\n```\n\n```text\nbg-[#84AB86]\nbg-[#fffeee]\n\n// etc..\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n purge: {\n // Configure as you need\n content: ['./src/**/*.html'],\n // These options are passed through directly to PurgeCSS\n options: {\n // List your classes here, or you can even use RegExp\n safelist: ['bg-red-500', 'px-4', /^text-/],\n blocklist: [/^debug-/],\n keyframes: true,\n fontFace: true,\n },\n },\n // ...\n}\n```\n\n```text\nsafelist\n```\n\n```text\nsafelist.txt\n```\n\n```text\nsrc\n```\n\n```text\nsafelist.txt\n```\n\n```text\ncontent\n```\n\n```text\nsafelist\n```\n\n```text\n<div className={\n```\n\n```text\n}></div>\n```\n\n```text\n<div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div>\n```\n\n```text\nclassName={`bg-[${color}]`}\n```\n\n```text\nstyle={{\n backgroundColor: color,\n}}\n```\n\n```js\nclassName={`bg-[${custom-color}]-100`}\n```\n\n```js\nconst customBgColorLight = 'bg-custom-color-100';\n\nclassName={`${customBgColorLight} .....`}\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: ['./src/**/*.{js,jsx,ts,tsx}'],\n safelist: [\n 'bg-custom-color-500', // your-custom-css-class\n 'text-custom-color-500',\n 'border-custom-color-500',\n ..... // other classes\n 'hover:bg-custom-color-500', // *** also include it with the selector if needed *** \n .... // other classes\n ],\n theme: {\n extend: {\n colors: {\n 'custom-color': { // you have to use quotes if key is not in camelCase format\n 100: '#d6d6d6',\n 500: '#5E8EA2',\n ..... //other variants\n },\n ...... // other colors\n```\n\n```js\n// if you want store the values to an object\n const yourClassObj = {\n customBgColor: 'bg-custom-color-500',\n customBrdColor: 'border-custom-color-500',\n customTxtColor: 'text-custom-color-500',\n };\n\n const { customBgColor, customBrdColor, customTxtColor } = yourClassObj;\n\n<YourComponent\n className={`mb-2 font-semibold py-2 px-4 rounded-lg\n ${ conditionGoesHere ? `${customBgColor} text-white cursor-default`\n : `${customTxtColor} border ${customBrdColor} \n bg-transparent hover:border-transparent \n hover:${customBgColor} hover:text-white`\n }`}\n />\n```\n\n```text\nsafelist:[]\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nstyle={{backgroundColor:`${color}`}}\n```\n\n```text\nclassName={`bg-[${color}]`}\n```\n\n========================================\n\nComments:\n- Pretty sure because JIT uses same mechanic as PurgeCSS. So as Tailwind site says about purging (tailwindcss.com/docs/optimizing-for-production) - As long as a class name appears in your template in its entirety, PurgeCSS will not remove it. In your case there is no class `bg-[#84CC79]` in your template itself - this class was rendered by Next. Check your compiled CSS class","metadata":{"transformedAt":"2026-08-18T18:33:42.876Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":25,"totalLines":255,"estimatedTokens":1307}}26{"id":"stack-79499818","source":"stackoverflow","questionId":79499818,"title":"How to use custom color themes in TailwindCSS v4","tags":["reactjs","next.js","tailwind-css","tailwind-css-4"],"text":"Title: How to use custom color themes in TailwindCSS v4\nTags: reactjs, next.js, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nMy `tailwind.config.js` in v3 looks like this, but I can't find a way to use it in v4:\n\n```\ntheme: {\n extend: {\n colors: {\n lightHover: '#fcf4ff',\n darkHover: '#2a004a',\n darktheme: '#11001f',\n },\n fontFamily: {\n Outfit: [\"Outfit\", \"sans-serif\"],\n Ovo: [\"Ovo\", \"serif\"]\n },\n boxShadow: {\n 'black': '4px 4px 0 #000',\n 'white': '4px 4px 0 #fff',\n },\n gridTemplateColumns: {\n 'auto': 'repeat(auto-fit, minmax(200px, 1fr))'\n }\n },\n},\ndarkMode: 'selector',\n```\n\nThis is a piece of code for v3,and I can customize the color of the dark theme instead of using black like this:\n\n```\n\n```\n\nBut how can I do the same thing in v4? Does anyone have the same problem? Just write `bg-black`?\n\nCan't find detailed `tailwind.config.js` documentation.\n\n========================================\n\nTop Answer:\n### `light-dark()` CSS function\n\nWith `light-dark()`, a color can be tied to the `color-scheme`. Based on the `color-scheme`, the browser selects the color corresponding to the current scheme. This essentially simplifies the declaration of light and dark themes, allowing it to be done in a single place, within `@theme`.\n\n```\n@theme {\n --color-pink: light-dark(#eb6bd8, #8e0d7a);\n --color-tsunami: light-dark(#77b4ea, #0d84ec);\n}\n```\n\n**Attention**: TailwindCSS is shipped under the hood with LightningCSS. While LightningCSS does provide a fallback for older browsers to replace `light-dark()`, TailwindCSS does not apply it due to an open issue, meaning it is not available. TailwindCSS officially guarantees support starting from Baseline 2023, but `light-dark()` is a CSS function that was only stably introduced in Baseline 2024. This means that if you use it, your minimum browser version requirements will rise to the level where `light-dark()` was introduced. More details:\n\n- https://tailwindcss.com/docs/compatibility (Baseline 2023)\n\n- https://caniuse.com/?search=light-dark (Baseline 2024)\n\n- Question for `light-dark()` using in older browsers (In the question, the functionality is explained with many references and version numbers)\n\n```\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```\n\n/* changed the behavior of dark: (default: based on prefers-color-scheme) to work based on the presence of the .dark parent class */\n@custom-variant dark (&:where(.dark, .dark *));\n\n/* WARNING: This way, instead of Chrome 111, at least Chrome 123 will be required, and instead of Safari 16.4, Safari 17.5 will be needed for it to work. */\n@theme {\n --color-pink: light-dark(#eb6bd8, #8e0d7a);\n --color-tsunami: light-dark(#77b4ea, #0d84ec);\n}\n\n* {\n color-scheme: light; /* apply \"light\" (first) color from light-dark() */\n \n @variant dark {\n color-scheme: dark; /* apply \"dark\" (second) color from light-dark() */\n }\n}\n\nClick Here\n\n Lorem Ipsum\n\n```\n\n### `var(--tw-light, ...) var(--tw-dark, ...)` alternative\n\nThe previously mentioned question has an answer that explains how the behavior of `light-dark()` can be replicated with a little extra work. This way, you can avoid raising the minimum browser version requirement in your project.\n\n- How can I safely introduce the use of `light-dark()` without increasing the minimum browser version requirement?\n\n```\n@theme inline {\n --color-pink: var(--tw-light, #eb6bd8) var(--tw-dark, #8e0d7a);\n --color-tsunami: var(--tw-light, #77b4ea) var(--tw-dark, #0d84ec);\n}\n```\n\n**Note**: Since `@theme` ships the given value into a global variable, the value cannot be a variable itself; otherwise, CSS cannot properly track the fallback values. Therefore, you should always use `@theme inline`. `@theme inline` does not embed the values into a global variable. However, it isn't necessary, since later on we don't want to override the color for other themes, as each theme can be declared locally in a single line.\n\n```\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```\n\n/* changed the behavior of dark: (default: based on prefers-color-scheme) to work based on the presence of the .dark parent class */\n@custom-variant dark (&:where(.dark, .dark *));\n\n/* NOTE: It still works starting from Chrome 111 and Safari 16.4. */\n@theme inline {\n --color-pink: var(--tw-light, #eb6bd8) var(--tw-dark, #8e0d7a);\n --color-tsunami: var(--tw-light, #77b4ea) var(--tw-dark, #0d84ec);\n}\n\n* {\n color-scheme: light;\n --tw-light: initial;\n --tw-dark: ;\n \n @variant dark {\n color-scheme: dark;\n --tw-light: ;\n --tw-dark: initial;\n }\n}\n\nClick Here\n\n Lorem Ipsum\n\n```\n\n========================================\n\nCode:\n```js\ntheme: {\n extend: {\n colors: {\n lightHover: '#fcf4ff',\n darkHover: '#2a004a',\n darktheme: '#11001f',\n },\n fontFamily: {\n Outfit: [\"Outfit\", \"sans-serif\"],\n Ovo: [\"Ovo\", \"serif\"]\n },\n boxShadow: {\n 'black': '4px 4px 0 #000',\n 'white': '4px 4px 0 #fff',\n },\n gridTemplateColumns: {\n 'auto': 'repeat(auto-fit, minmax(200px, 1fr))'\n }\n },\n},\ndarkMode: 'selector',\n```\n\n```html\n<div className=\"dark:bg-darktheme\"></div>\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nbg-black\n```\n\n```text\ntailwind.config.js\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n --font-display: \"Satoshi\", \"sans-serif\";\n --breakpoint-3xl: 120rem;\n --color-avocado-100: oklch(0.99 0 0);\n --color-avocado-200: oklch(0.98 0.04 113.22);\n --color-avocado-300: oklch(0.94 0.11 115.03);\n --color-avocado-400: oklch(0.92 0.19 114.08);\n --color-avocado-500: oklch(0.84 0.18 117.33);\n --color-avocado-600: oklch(0.53 0.12 118.34);\n --ease-fluid: cubic-bezier(0.3, 0, 0, 1);\n --ease-snappy: cubic-bezier(0.2, 0, 0, 1);\n /* ... */\n}\n```\n\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser\"></script>\n<style type=\"text/tailwindcss\">\n/* changed the behavior of dark: (default: based on prefers-color-scheme) to work based on the presence of the .dark parent class */\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-pink: #eb6bd8;\n}\n\n@layer theme {\n :root, :host {\n @variant dark {\n --color-pink: #8e0d7a;\n }\n }\n}\n</style>\n\n<button class=\"size-20 bg-pink dark:text-white\">Click Here</button>\n<div class=\"w-50 h-12 bg-purple-200 dark:bg-purple-900 dark:text-white\">\n Lorem Ipsum\n</div>\n```\n\n```js\ndocument.querySelector('#toggle-dark').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n document.documentElement.classList.remove('coffee');\n});\n\ndocument.querySelector('#toggle-coffee').addEventListener('click', () => {\n document.documentElement.classList.toggle('coffee');\n document.documentElement.classList.remove('dark');\n});\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant dark (&:where(.dark, .dark *));\n@custom-variant coffee (&:where(.coffee, .coffee *));\n\n@theme {\n --color-pink: #eb6bd8;\n --color-tsunami: #77b4ea;\n}\n\n@layer theme {\n :root, :host {\n @variant dark {\n --color-pink: #8e0d7a;\n --color-tsunami: #0d84ec;\n }\n @variant coffee {\n --color-pink: #a67ca8;\n --color-tsunami: #b57913;\n }\n }\n}\n</style>\n\n<div class=\"mb-4\">\n <button id=\"toggle-dark\" class=\"px-4 py-2 bg-sky-600 hover:bg-sky-950 text-white cursor-pointer rounded-lg\">Toggle Dark</button>\n <button id=\"toggle-coffee\" class=\"px-4 py-2 bg-amber-600 hover:bg-amber-950 text-white cursor-pointer rounded-lg\">Toggle Coffee</button>\n</div>\n\n<button class=\"size-20 bg-pink dark:text-white coffee:text-amber-50\">Hello World</button>\n<div class=\"w-50 h-12 bg-tsunami dark:text-white coffee:text-orange-200\">\n Lorem Ipsum\n</div>\n```\n\n```text\ninit\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@tailwind\n```\n\n```text\n@theme\n```\n\n```text\n@theme\n```\n\n```text\n@custom-variant\n```\n\n```text\ndark:\n```\n\n```text\ncoffee:\n```\n\n```text\n@custom-variant\n```\n\n```text\n@variant\n```\n\n```text\ndark:\n```\n\n```text\n.system\n```\n\n```text\ndark:\n```\n\n```text\n.system\n```\n\n```text\n.dark\n```\n\n```text\n@theme\n```\n\n```text\n@layer theme\n```\n\n```text\n:root\n```\n\n```text\n*\n```\n\n```text\n:root, :host\n```\n\n```text\n@variant dark\n```\n\n```text\n@theme\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n```text\nlight-dark()\n```\n\n```text\nlight:\n```\n\n```text\ndark:\n```\n\n```css\n@theme {\n --color-pink: light-dark(#eb6bd8, #8e0d7a);\n --color-tsunami: light-dark(#77b4ea, #0d84ec);\n}\n```\n\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser\"></script>\n<style type=\"text/tailwindcss\">\n/* changed the behavior of dark: (default: based on prefers-color-scheme) to work based on the presence of the .dark parent class */\n@custom-variant dark (&:where(.dark, .dark *));\n\n/* WARNING: This way, instead of Chrome 111, at least Chrome 123 will be required, and instead of Safari 16.4, Safari 17.5 will be needed for it to work. */\n@theme {\n --color-pink: light-dark(#eb6bd8, #8e0d7a);\n --color-tsunami: light-dark(#77b4ea, #0d84ec);\n}\n\n* {\n color-scheme: light; /* apply \"light\" (first) color from light-dark() */\n \n @variant dark {\n color-scheme: dark; /* apply \"dark\" (second) color from light-dark() */\n }\n}\n</style>\n\n<button class=\"size-20 bg-pink dark:text-white\">Click Here</button>\n<div class=\"w-50 h-12 bg-tsunami dark:text-white\">\n Lorem Ipsum\n</div>\n```\n\n```css\n@theme inline {\n --color-pink: var(--tw-light, #eb6bd8) var(--tw-dark, #8e0d7a);\n --color-tsunami: var(--tw-light, #77b4ea) var(--tw-dark, #0d84ec);\n}\n```\n\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser\"></script>\n<style type=\"text/tailwindcss\">\n/* changed the behavior of dark: (default: based on prefers-color-scheme) to work based on the presence of the .dark parent class */\n@custom-variant dark (&:where(.dark, .dark *));\n\n/* NOTE: It still works starting from Chrome 111 and Safari 16.4. */\n@theme inline {\n --color-pink: var(--tw-light, #eb6bd8) var(--tw-dark, #8e0d7a);\n --color-tsunami: var(--tw-light, #77b4ea) var(--tw-dark, #0d84ec);\n}\n\n* {\n color-scheme: light;\n --tw-light: initial;\n --tw-dark: ;\n \n @variant dark {\n color-scheme: dark;\n --tw-light: ;\n --tw-dark: initial;\n }\n}\n</style>\n\n<button class=\"size-20 bg-pink dark:text-white\">Click Here</button>\n<div class=\"w-50 h-12 bg-tsunami dark:text-white\">\n Lorem Ipsum\n</div>\n```\n\n```text\nlight-dark()\n```\n\n```text\nlight-dark()\n```\n\n```text\ncolor-scheme\n```\n\n```text\ncolor-scheme\n```\n\n```text\n@theme\n```\n\n```text\nlight-dark()\n```\n\n```text\nlight-dark()\n```\n\n```text\nlight-dark()\n```\n\n```text\nlight-dark()\n```\n\n```text\nvar(--tw-light, ...) var(--tw-dark, ...)\n```\n\n```text\nlight-dark()\n```\n\n```text\nlight-dark()\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n```text\n@theme inline\n```\n\n```css\n@theme inline {\n --color-pink: var(--tw-light, #eb6bd8) var(--tw-dark, #8e0d7a) var(--tw-coffee, #a67ca8);\n --color-tsunami: var(--tw-light, #77b4ea) var(--tw-dark, #0d84ec) var(--tw-coffee, #b57913);\n}\n```\n\n```js\ndocument.querySelector('#toggle-dark').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n document.documentElement.classList.remove('coffee');\n});\n\ndocument.querySelector('#toggle-coffee').addEventListener('click', () => {\n document.documentElement.classList.toggle('coffee');\n document.documentElement.classList.remove('dark');\n});\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant dark (&:where(.dark, .dark *));\n@custom-variant coffee (&:where(.coffee, .coffee *));\n\n/* NOTE: It still works starting from Chrome 111 and Safari 16.4. */\n@theme inline {\n --color-pink:\n var(--tw-light, #eb6bd8)\n var(--tw-dark, #8e0d7a)\n var(--tw-coffee, #a67ca8);\n --color-tsunami:\n var(--tw-light, #77b4ea)\n var(--tw-dark, #0d84ec)\n var(--tw-coffee, #b57913);\n}\n\n* {\n color-scheme: light;\n --tw-light: initial;\n --tw-dark: ;\n --tw-coffee: ;\n \n @variant dark {\n color-scheme: dark;\n --tw-light: ;\n --tw-dark: initial;\n --tw-coffee: ;\n }\n \n @variant coffee {\n /* You can keep the value on \"light\" or \"dark\" as needed. */\n /* color-scheme: coffee; is invalid. */\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#syntax */\n color-scheme: light;\n --tw-light: ;\n --tw-dark: ;\n --tw-coffee: initial;\n }\n}\n</style>\n\n<div class=\"mb-4\">\n <button id=\"toggle-dark\" class=\"px-4 py-2 bg-sky-600 hover:bg-sky-950 text-white cursor-pointer rounded-lg\">Toggle Dark</button>\n <button id=\"toggle-coffee\" class=\"px-4 py-2 bg-amber-600 hover:bg-amber-950 text-white cursor-pointer rounded-lg\">Toggle Coffee</button>\n</div>\n\n<button class=\"size-20 bg-pink dark:text-white coffee:text-amber-50\">Hello World</button>\n<div class=\"w-50 h-12 bg-tsunami dark:text-white coffee:text-orange-200\">\n Lorem Ipsum\n</div>\n```\n\n```text\nvar(--tw-light, ...) var(--tw-dark, ...)\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n```text\n@theme inline\n```\n\n```text\nlight-dark()\n```\n\n========================================\n\nComments:\n- Starting from TailwindCSS v4, a CSS-first configuration is preferred. Check my answer to see what this means. I also explain how you can still use tailwind.config.js in v4.\n- I needed to ask a clarification (about dynamically switched themes), but it was too bulky as a comment. So I posted a new question: stackoverflow.com/questions/79620901/…. Would you be kind enough to take a look!\n- If you use the second \"*`var(--tw-light, ...) var(--tw-dark, ...)` alternative*\" option, please give feedback on whether it works fully as expected.\n- You can inject multiple variables, allowing us to cover several templates: How to use custom color themes in TailwindCSS v4","metadata":{"transformedAt":"2026-08-18T18:33:42.876Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":66,"totalLines":636,"estimatedTokens":3543}}27{"id":"stack-73584046","source":"stackoverflow","questionId":73584046,"title":"NativeWind not working when used with React Navigation","tags":["javascript","reactjs","react-native","navigation","tailwind-css"],"text":"Title: NativeWind not working when used with React Navigation\nTags: javascript, reactjs, react-native, navigation, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nNativeWind it's not working.\nIt was working when the content of the file tailwind.config.js was './App,{js,jsx,ts,tsx}' but not anymore since I implemented the React Navigation.\n\ntailwind.config.js:\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./App.{js,jsx,ts,tsx}\", \"./screens/**/*.{js,jsx,ts,tsx}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\npackage.json:\n\n```\n{\n \"name\": \"inovarlagos\",\n \"version\": \"1.0.0\",\n \"main\": \"node_modules/expo/AppEntry.js\",\n \"scripts\": {\n \"start\": \"expo start\",\n \"android\": \"expo start --android\",\n \"ios\": \"expo start --ios\",\n \"web\": \"expo start --web\"\n },\n \"dependencies\": {\n \"@react-navigation/native\": \"^6.0.12\",\n \"@react-navigation/native-stack\": \"^6.8.0\",\n \"expo\": \"~46.0.9\",\n \"expo-status-bar\": \"~1.4.0\",\n \"nativewind\": \"^2.0.7\",\n \"react\": \"18.0.0\",\n \"react-native\": \"0.69.5\",\n \"react-native-safe-area-context\": \"4.3.1\",\n \"react-native-screens\": \"~3.15.0\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.12.9\",\n \"tailwindcss\": \"^3.1.8\"\n },\n \"private\": true\n}\n```\n\nApp.js:\n\n```\nimport * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport HomeScreen from './screens/HomeScreen';\n\nconst Stack = createNativeStackNavigator();\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n\nexport default App;\n```\n\n./screens/HomeScreen.js:\n\n```\nimport { View, Text } from 'react-native';\nimport React from 'react';\n\nconst HomeScreen = () => {\n return (\n \n Futuristik Lagos- Home \n \n );\n};\n\nexport default HomeScreen;\n```\n\nProject structure:\n\nhttps://i.sstatic.net/Nn5r0.png\n\nResult (TailWind not working):\n\nhttps://i.sstatic.net/UbEV1.png\n\n========================================\n\nTop Answer:\nif you are using Expo, just put below code simply in your app.js\n\n```\nimport { NativeWindStyleSheet } from \"nativewind\";\n\nNativeWindStyleSheet.setOutput({\n default: \"native\",\n});\n```\n\n========================================\n\nCode:\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./App.{js,jsx,ts,tsx}\", \"./screens/**/*.{js,jsx,ts,tsx}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n{\n \"name\": \"inovarlagos\",\n \"version\": \"1.0.0\",\n \"main\": \"node_modules/expo/AppEntry.js\",\n \"scripts\": {\n \"start\": \"expo start\",\n \"android\": \"expo start --android\",\n \"ios\": \"expo start --ios\",\n \"web\": \"expo start --web\"\n },\n \"dependencies\": {\n \"@react-navigation/native\": \"^6.0.12\",\n \"@react-navigation/native-stack\": \"^6.8.0\",\n \"expo\": \"~46.0.9\",\n \"expo-status-bar\": \"~1.4.0\",\n \"nativewind\": \"^2.0.7\",\n \"react\": \"18.0.0\",\n \"react-native\": \"0.69.5\",\n \"react-native-safe-area-context\": \"4.3.1\",\n \"react-native-screens\": \"~3.15.0\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.12.9\",\n \"tailwindcss\": \"^3.1.8\"\n },\n \"private\": true\n}\n```\n\n```text\nimport * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport HomeScreen from './screens/HomeScreen';\n\nconst Stack = createNativeStackNavigator();\n\nfunction App() {\n return (\n <NavigationContainer>\n <Stack.Navigator>\n <Stack.Screen name=\"Home\" component={HomeScreen} />\n </Stack.Navigator>\n </NavigationContainer>\n );\n}\n\nexport default App;\n```\n\n```text\nimport { View, Text } from 'react-native';\nimport React from 'react';\n\nconst HomeScreen = () => {\n return (\n <View className=\"flex-1 items-center justify-center bg-black\">\n <Text className=\"text-red-200\">Futuristik Lagos- Home</Text> \n </View>\n );\n};\n\nexport default HomeScreen;\n```\n\n```text\nexpo start\n```\n\n```text\nexpo start -c\n```\n\n```text\nexpo start -c\n```\n\n```text\nreact-native start --reset-cache\n```\n\n```text\nimport { NativeWindStyleSheet } from \"nativewind\";\n\nNativeWindStyleSheet.setOutput({\n default: \"native\",\n});\n```\n\n```text\nplugins: [\"nativewind/babel\"],\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: ['./App.{js,jsx,ts,tsx}', './<custom-folder>/**/*.{js,jsx,ts,tsx}'],\n// Change ./<custom-folder> to ./app (in my case)\n theme: {\n extend: {}\n },\n plugins: []\n}\n```\n\n```text\napp\n```\n\n```text\ncontent\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n<custom-folder>\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./App.{js,jsx,ts,tsx}\",\n \"./<custom directory>/**/*.{js,jsx,ts,tsx}\",\n \"./<custom directory>/**/**/*.{js,jsx,ts,tsx}\"\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./App.{js,jsx,ts,tsx}\", \"./src/**/*.{js,jsx,ts,tsx}\", \"./src/**/**/*.{js,jsx,ts,tsx}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\nmodule.exports = {\n content: [\"./App.{js,jsx,ts,tsx}\", \"./src/screens/**/*.{js,jsx,ts,tsx}\", \"./src/components/**/*.{js,jsx,ts,tsx}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nnpm install expo-cli --global\n```\n\n```text\nexpo start -c\n```\n\n```text\nreact-native start --reset-cache\n```\n\n```text\nnpm i tailwindcss@3.3.2\n```\n\n```text\nnpm start -- --reset-cache\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nApp.tsx\n```\n\n```text\nsrc/\n```\n\n```text\nsrc/\n```\n\n```text\ncontent\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nglobals.css\n```\n\n```text\nsrc/\n```\n\n```text\nglobals.css\n```\n\n```text\nmetro.config.js\n```\n\n```text\nglobals.css\n```\n\n========================================\n\nComments:\n- Where's the setup they use in the docs? They style Views etc with their own methods. nativewind.dev/overview\n- Thanks! This fixed my problem.. totally overlooked the components folder.\n- Can you please let me know how did you used global.css with this changes in bare react-native? Since I am also facing the same issue in react native web.","metadata":{"transformedAt":"2026-08-18T18:33:42.876Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":34,"totalLines":360,"estimatedTokens":1546}}28{"id":"stack-74914969","source":"stackoverflow","questionId":74914969,"title":"Override 65ch max-width in Tailwind CSS Typography","tags":["css","tailwind-css","extend","typography","prose"],"text":"Title: Override 65ch max-width in Tailwind CSS Typography\nTags: css, tailwind-css, extend, typography, prose\nSource: Stack Overflow\n\nQuestion:\nI am using a Jekyll template with Tailwind and Typography, and I am interested in overriding the default max-width 65ch limit on each line.\n\nThe default setting was `max-w-prose`, and I have tried setting `max-w-none` to the parent element, along with `prose`, but it doesn't seem to work (although it messes with the alignment). I have also tried setting the `max-w-none` with `prose` in every element (wary of unwanted overrides to 65ch) but this also isn't cutting it.\n\nI am thinking this could be done via the tailwind.config.js file, like:\n\n```\ntheme: {\n extend: {\n typography: {\n DEFAULT: {\n css: {\n 'prose': {\n 'max-width': '100ch'\n },\n 'max-w-prose': {\n 'max-width': '100ch'\n },\n ...\n```\n\nbut I can't figure it out. Any tips are super welcome!\n\n========================================\n\nTop Answer:\nAn easier solution is to add another class with an importance flag using \"!\".\n\nTake a look at below:\n\n```\n\n \n\n```\n\n========================================\n\nCode:\n```text\ntheme: {\n extend: {\n typography: {\n DEFAULT: {\n css: {\n 'prose': {\n 'max-width': '100ch'\n },\n 'max-w-prose': {\n 'max-width': '100ch'\n },\n ...\n```\n\n```text\nmax-w-prose\n```\n\n```text\nmax-w-none\n```\n\n```text\nprose\n```\n\n```text\nmax-w-none\n```\n\n```text\nprose\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n typography: {\n DEFAULT: {\n css: {\n maxWidth: '100ch', // add required value here\n }\n }\n }\n },\n },\n plugins: [\n require('@tailwindcss/typography'),\n ],\n}\n```\n\n```text\n.prose\n```\n\n```text\n<section className=\"prose prose-sm !max-w-none\">\n <PrismicRichText field={caption} />\n</section>\n```\n\n========================================\n\nComments:\n- As mentioned in the tailwind documentation: overriding max width, setting `max-w-none` on the parent element next to `prose` is the way to go. But I wonder whether you wanted to unset the 65 character limit or you wanted to override it with the new setting of 100 character limit. I came across the same problem and I just wanted to unset the 65 character limit, so I added `max-w-none` next to my `prose` class and it worked nicely.\n- Tailwind has documentation for updating max width, this is the recommended solution: tailwindcss.com/docs/typography-plugin#overriding-max-width\n- Setting it in your Tailwind config would be easier for overriding it for every use of `prose`.\n- This would be better explained by specifying explicitly the file to update (at least two files are discussed in this question) and showing a code block with multiple lines to make it clearer where the exclamation mark is inserted.\n- It worked for me `!max-w-none`! ty","metadata":{"transformedAt":"2026-08-18T18:33:42.876Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":116,"estimatedTokens":722}}29{"id":"stack-66402879","source":"stackoverflow","questionId":66402879,"title":"In Vite2, How to import an ESModule in tailwind.config.js","tags":["javascript","tailwind-css","vite"],"text":"Title: In Vite2, How to import an ESModule in tailwind.config.js\nTags: javascript, tailwind-css, vite\nSource: Stack Overflow\n\nQuestion:\nBuilding a Vite2 app.\n\ntried to import an `ESModule` in `tailwind.config.js`.\nThe Module was exported like:\n\n```\nexport default xxx;\n```\n\nThen I imported the module in `tailwind.config.js` like:\n\n```\nconst xx = require('./xx/xxx');\n```\n\nBut I got an Error:\n\n```\n[plugin:vite:css] Cannot use import statement outside a module\n```\n\nHow do I fix this?\n\n========================================\n\nCode:\n```text\nexport default xxx;\n```\n\n```text\nconst xx = require('./xx/xxx');\n```\n\n```text\n[plugin:vite:css] Cannot use import statement outside a module\n```\n\n```text\nESModule\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nexport default {\n purge: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx,css}'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nimport tailwind from 'tailwindcss'\nimport autoprefixer from 'autoprefixer'\nimport tailwindConfig from './tailwind.config.js'\n\nexport default {\n plugins: [tailwind(tailwindConfig), autoprefixer],\n}\n```\n\n```text\ncss: {\n postcss,\n},\n```\n\n```text\nimport\n```\n\n```text\nimport postcss from './postcss.config.js'\n```\n\n========================================\n\nComments:\n- Thank you very much! BTW, can use `.mjs` extension for webpack: `await import('./postcss.config.mjs').then((m) => m.default)`\n- I wonder why the Tailwind Vue 3 and Vite official installation guide tailwindcss.com/docs/guides/vite doesn't mention these essential steps?\n- Indeed it seems to work even though Tailwind authors say it's not supported github.com/tailwindlabs/tailwindcss/issues/…\n- It's not worked for me unfortunately, glad you got it fixed though.","metadata":{"transformedAt":"2026-08-18T18:33:42.876Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":100,"estimatedTokens":460}}30{"id":"stack-67960681","source":"stackoverflow","questionId":67960681,"title":"Trying to put a tailwindcss icon into input","tags":["html","css","reactjs","icons","tailwind-css"],"text":"Title: Trying to put a tailwindcss icon into input\nTags: html, css, reactjs, icons, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to put an icon inside an input, to the left. tailwindcss has a library for ReactJS with SVG and components as icons: https://heroicons.com/.\n\nMy component:\n\n```\nimport React from 'react'\nimport { MailIcon } from '@heroicons/react/solid'\n\nconst BlogPost = () => (\n \n \n\n### Check my blogpost\n\n \n \n \n \n \n \n \n)\n\nexport default BlogPost\n```\n\nAs you see, the MailIcon components can receive tailwindcss. Any idea to incrust the icon inside the input?\n\n========================================\n\nTop Answer:\nI did this way (using tailwindcss):\n\n```\n\n \n \n\n```\n\n========================================\n\nCode:\n```text\nimport React from 'react'\nimport { MailIcon } from '@heroicons/react/solid'\n\nconst BlogPost = () => (\n <section className=\"container-full flex flex-col m-20\">\n <h2 className=\"mx-auto uppercase font-bold\">Check my blogpost</h2>\n <form action=\"POST\" className=\"mx-auto mt-5 w-6/12\">\n <label htmlFor=\"email\">\n <MailIcon className=\"w-8 h-8\" />\n <input className=\"form-input w-full\" type=\"email\" name=\"email\" id=\"email\" placeholder=\"email@kemuscorp.com\" />\n </label>\n </form>\n </section>\n)\n\nexport default BlogPost\n```\n\n```text\n<label htmlFor=\"email\" className=\"relative text-gray-400 focus-within:text-gray-600 block\">\n\n <MailIcon className=\"pointer-events-none w-8 h-8 absolute top-1/2 transform -translate-y-1/2 left-3\" />\n\n <input type=\"email\" name=\"email\" id=\"email\" placeholder=\"email@kemuscorp.com\" className=\"form-input w-full\">\n</label>\n```\n\n```text\nposition: absolute\n```\n\n```text\npointer-events-none\n```\n\n```text\n<div class=\"w-2/3 flex justify-end items-center relative\">\n <input\n placeholder=\"Pesquisar\"\n class=\"border border-gray-400 rounded-lg p-4 w-full\"\n />\n <img src=\"/icons/search.svg\" class=\"absolute mr-2 w-10\" alt=\"Search Icon\" />\n</div>\n```\n\n========================================\n\nComments:\n- Thanks, that help me a lot.\n- If I already have a associated label tag, and I still want a like $ dollar sign. Is there any specific browser standards to keep in mind?","metadata":{"transformedAt":"2026-08-18T18:33:42.876Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":99,"estimatedTokens":550}}31{"id":"stack-61039259","source":"stackoverflow","questionId":61039259,"title":"Disable Tailwind on a div or component","tags":["tailwind-css"],"text":"Title: Disable Tailwind on a div or component\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIs there a way to disable Tailwind's Preflight on a specific div or component? For example a WYSIWYG editor, or wanting to migrate gradually to Tailwind.\n\n========================================\n\nTop Answer:\nSearch about 'unreset tailwind'.\n\nhttps://www.swyx.io/tailwind-unreset/\n\ndownload file unreset.scss from https://raw.githubusercontent.com/ixkaito/unreset-css/master/_unreset.scss\n\ncopy it over to your tailwind.scss and namespace it under an unreset class.\n\n.unreset { // paste unreset.scss here! }\n\n- And then in your JSX, you can add that unreset class in:\n\ndiv className=\"unreset\" dangerouslySetInnerHTML={{ __html: post.contents }}\n\nhttps://www.youtube.com/watch?v=iLEYtgBezhs\n\n========================================\n\nCode:\n```text\n<div className=\"prose prose-lg\" dangerouslySetInnerHTML={{ __html: markdownDesc }} />\n```\n\n```text\n@tailwind/typography\n```\n\n```text\n<h6> <b>\n```\n\n```text\nnpm i @tailwindcss/typography\n```\n\n```text\nrequire(\"@tailwindcss/typography\")\n```\n\n```text\nprose prose-lg\n```\n\n```text\n.element-selector {\n\n all: revert;\n}\n```\n\n```text\nall\n```\n\n```text\ninitial\n```\n\n```text\ninherit\n```\n\n```text\nrevert\n```\n\n```scss\n.reset-tw,\n.reset-tw * {\n all: revert !important;\n}\n```\n\n```html\n<div class=\"reset-tw\">Your content with browser native styling</div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.877Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":86,"estimatedTokens":349}}32{"id":"stack-70420827","source":"stackoverflow","questionId":70420827,"title":"Combining two transitions properties in Tailwind CSS","tags":["tailwind-css"],"text":"Title: Combining two transitions properties in Tailwind CSS\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI wanna have `transition-transform` and `transition-shadow`, not neither `transition-all` nor only one. Putting the two not effecting, i couldn't find doc for it, i tried playing around like: `transition-[transform, shadow]` and obviously didn't work.\n\nBasically, i have cards, you hover on it, it scale up a bit and drops a shadow.\n\n`className='hover:scale-105 hover:shadow-2xl transition-transform transition-shadow'`\n\nHow to put transition properties `transform` and `shadow` together?\n\nMy app has white and black theme, that's way i don't want just to put `transition-all` because it flashes when switching the theme.\n\n========================================\n\nTop Answer:\nI needed to do `transition-[transform,box-shadow]` not `shadow`\n\n========================================\n\nCode:\n```text\ntransition-transform\n```\n\n```text\ntransition-shadow\n```\n\n```text\ntransition-all\n```\n\n```text\ntransition-[transform, shadow]\n```\n\n```text\nclassName='hover:scale-105 hover:shadow-2xl transition-transform transition-shadow'\n```\n\n```text\ntransform\n```\n\n```text\nshadow\n```\n\n```text\ntransition-all\n```\n\n```text\ntransition-[transform,shadow]\n// or\ntransition-[transform,_shadow]\n```\n\n```text\n[transition:transform_1s,shadow_2s]\n```\n\n```html\n<div class=\"grid grid-cols-[1fr_500px_2fr]\">\n <!-- compiled to -- grid-template-columns: 1fr 500px 2fr; -->\n</div>\n```\n\n```html\n<div class=\"bg-[url('/what_a_rush.png')]\">\n <!-- compiled to -- background-image: url('/what_a_rush.png'); -->\n</div>\n```\n\n```html\n<div class=\"before:content-['hello\\_world']\">\n <!-- compiled to -- content: var('hello_world'); -->\n</div>\n```\n\n```text\ntransition-[transform, shadow]\n```\n\n```text\ntransition-[transform,\n```\n\n```text\nshadow]\n```\n\n```text\n_\n```\n\n```text\n_\n```\n\n```text\ntransition-[transform,box-shadow]\n```\n\n```text\nshadow\n```\n\n```text\nbefore:[transition:_color_0.1s,transform_0.2s_ease-out]\n```\n\n========================================\n\nComments:\n- It should be `transition-[transform,shadow]`, i.e. without the space in-between.\n- @brc-dd oh yeah it worked. One more question, how can i give different duration for these transition properties?\n- I dont think transition-[transform_1s,shadow_2s] works. Tried it on play.tailwindcss.com and it's interpreted as transition-property:transform 1s,shadow 2s (which is completely wrong)\n- @mr1031011 Ah yeah. You need to do: `[transition:transform_1s,shadow_2s]`\n- In addition to customizing the duration, can one specify the delay for each transition?\n- @greener Refer developer.mozilla.org/en-US/docs/Web/CSS/transition#syntax -- `[transition:transform_1s_100ms]` (here 1s is the duration, 100ms is the delay)","metadata":{"transformedAt":"2026-08-18T18:33:42.877Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":124,"estimatedTokens":687}}33{"id":"stack-71538223","source":"stackoverflow","questionId":71538223,"title":"tailwind.css not being generated in a Rails 7 project in Heroku","tags":["ruby-on-rails","tailwind-css","ruby-on-rails-7"],"text":"Title: tailwind.css not being generated in a Rails 7 project in Heroku\nTags: ruby-on-rails, tailwind-css, ruby-on-rails-7\nSource: Stack Overflow\n\nQuestion:\nI have a Rails 7 project using TailwindCSS deployed to Heroku that is not building `tailwind.css` during `rake asset:precompile` and I don't know why. When I try to access the application, it crashes with this error:\n\n```\nI, [2022-03-23T17:35:18.429029 #8] INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Started GET \"/\" for XX.XX.XX.XX at 2022-03-23 17:35:18 +0000\nI, [2022-03-23T17:35:18.433526 #8] INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Processing by StaticController#index as HTML\nI, [2022-03-23T17:35:18.439133 #8] INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Rendered static/index.html.erb within layouts/application (Duration: 0.6ms | Allocations: 184)\nI, [2022-03-23T17:35:18.446294 #8] INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Rendered layout layouts/application.html.erb (Duration: 7.8ms | Allocations: 1205)\nI, [2022-03-23T17:35:18.446595 #8] INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Completed 500 Internal Server Error in 13ms (Allocations: 2512)\nF, [2022-03-23T17:35:18.447716 #8] FATAL -- : [4f6eaac8-942c-4ee5-af10-172663b1a292]\n[4f6eaac8-942c-4ee5-af10-172663b1a292] ActionView::Template::Error (The asset \"tailwind.css\" is not present in the asset pipeline.\n):\n[4f6eaac8-942c-4ee5-af10-172663b1a292] 12: \n[4f6eaac8-942c-4ee5-af10-172663b1a292] 13: \n[4f6eaac8-942c-4ee5-af10-172663b1a292] 14: \n[4f6eaac8-942c-4ee5-af10-172663b1a292] 15: \n[4f6eaac8-942c-4ee5-af10-172663b1a292] 16: \n[4f6eaac8-942c-4ee5-af10-172663b1a292] 17: \n[4f6eaac8-942c-4ee5-af10-172663b1a292] 18: \n[4f6eaac8-942c-4ee5-af10-172663b1a292]\n[4f6eaac8-942c-4ee5-af10-172663b1a292] app/views/layouts/application.html.erb:15\n```\n\nI actually have two projects that are set up pretty much identically (they have different functionality though) and the other one works.\n\nI have added\n\n```\nconfig.assets.css_compressor = nil\n```\n\nto `production.rb`, `test.rb` and `development.rb` (just in case).\n\nI'm installing the latest `tailwindcss-rails` at the time of this writing, 2.0.8. I'm also installing `sassc-rails` because it's needed for `rails_admin` but that's also true for the other project where that is needed.\n\nHere's the curious thing. If I open a console to that Heroku project and run `rake asset:precompile` it actually finishes creating the missing files:\n\n```\n~ $ rake assets:precompile\n+ /app/vendor/bundle/ruby/3.1.0/gems/tailwindcss-rails-2.0.8-x86_64-linux/exe/x86_64-linux/tailwindcss -i /app/app/assets/stylesheets/application.tailwind.css -o /app/app/assets/builds/tailwind.css -c /app/config/tailwind.config.js --minify\n\nDone in 821ms.\nW, [2022-03-19T12:38:43.514430 #6] WARN -- : Removed sourceMappingURL comment for missing asset 'rails_admin/popper.js.map' from /app/vendor/bundle/ruby/3.1.0/gems/rails_admin-3.0.0.rc4/vendor/assets/javascripts/rails_admin/popper.js\nW, [2022-03-19T12:38:43.534443 #6] WARN -- : Removed sourceMappingURL comment for missing asset 'rails_admin/bootstrap.js.map' from /app/vendor/bundle/ruby/3.1.0/gems/rails_admin-3.0.0.rc4/vendor/assets/javascripts/rails_admin/bootstrap.js\nI, [2022-03-19T12:38:43.744157 #6] INFO -- : Writing /app/public/assets/tailwind-0c01c3e907ab268dbd4dcaa14542a12d0388cfbeb5733a183e88e1b26ef30afb.css\nI, [2022-03-19T12:38:43.744385 #6] INFO -- : Writing /app/public/assets/tailwind-0c01c3e907ab268dbd4dcaa14542a12d0388cfbeb5733a183e88e1b26ef30afb.css.gz\n~ $\n```\n\nWhy didn't that work during deployment? I can see it's running it:\n\n```\nUsing stimulus-rails 1.0.4\n Using tailwindcss-rails 2.0.8 (x86_64-linux)\n Bundle complete! 28 Gemfile dependencies, 90 gems now installed.\n Gems in the groups 'development' and 'test' were not installed.\n Bundled gems are installed into `./vendor/bundle`\n Bundle completed (0.38s)\n Cleaning up the bundler cache.\n Removing bundler (2.2.33)\n-----> Detecting rake tasks\n-----> Preparing app for Rails asset pipeline\n Running: rake assets:precompile\n \n Done in 788ms.\n Asset precompilation completed (3.58s)\n Cleaning assets\n Running: rake assets:clean\n-----> Detecting rails configuration\n-----> Discovering process types\n Procfile declares types -> release, web, worker\n Default types for buildpack -> console, rake\n-----> Compressing...\n Done: 78.7M\n-----> Launching...\n```\n\n========================================\n\nTop Answer:\nrails assets:clean assets:precompile\n\nthis command helped me to resolved this issue.\n\n========================================\n\nCode:\n```text\nI, [2022-03-23T17:35:18.429029 #8] INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Started GET \"/\" for XX.XX.XX.XX at 2022-03-23 17:35:18 +0000\nI, [2022-03-23T17:35:18.433526 #8] INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Processing by StaticController#index as HTML\nI, [2022-03-23T17:35:18.439133 #8] INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Rendered static/index.html.erb within layouts/application (Duration: 0.6ms | Allocations: 184)\nI, [2022-03-23T17:35:18.446294 #8] INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Rendered layout layouts/application.html.erb (Duration: 7.8ms | Allocations: 1205)\nI, [2022-03-23T17:35:18.446595 #8] INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Completed 500 Internal Server Error in 13ms (Allocations: 2512)\nF, [2022-03-23T17:35:18.447716 #8] FATAL -- : [4f6eaac8-942c-4ee5-af10-172663b1a292]\n[4f6eaac8-942c-4ee5-af10-172663b1a292] ActionView::Template::Error (The asset \"tailwind.css\" is not present in the asset pipeline.\n):\n[4f6eaac8-942c-4ee5-af10-172663b1a292] 12: <meta name=\"theme-color\" content=\"#ffffff\">\n[4f6eaac8-942c-4ee5-af10-172663b1a292] 13: <%= csrf_meta_tags %>\n[4f6eaac8-942c-4ee5-af10-172663b1a292] 14: <%= csp_meta_tag %>\n[4f6eaac8-942c-4ee5-af10-172663b1a292] 15: <%= stylesheet_link_tag \"tailwind\", \"inter-font\", \"data-turbo-track\": \"reload\" %>\n[4f6eaac8-942c-4ee5-af10-172663b1a292] 16: <%= stylesheet_link_tag \"application\", \"data-turbo-track\": \"reload\" %>\n[4f6eaac8-942c-4ee5-af10-172663b1a292] 17: <%= javascript_importmap_tags %>\n[4f6eaac8-942c-4ee5-af10-172663b1a292] 18: </head>\n[4f6eaac8-942c-4ee5-af10-172663b1a292]\n[4f6eaac8-942c-4ee5-af10-172663b1a292] app/views/layouts/application.html.erb:15\n```\n\n```rb\nconfig.assets.css_compressor = nil\n```\n\n```text\n~ $ rake assets:precompile\n+ /app/vendor/bundle/ruby/3.1.0/gems/tailwindcss-rails-2.0.8-x86_64-linux/exe/x86_64-linux/tailwindcss -i /app/app/assets/stylesheets/application.tailwind.css -o /app/app/assets/builds/tailwind.css -c /app/config/tailwind.config.js --minify\n\nDone in 821ms.\nW, [2022-03-19T12:38:43.514430 #6] WARN -- : Removed sourceMappingURL comment for missing asset 'rails_admin/popper.js.map' from /app/vendor/bundle/ruby/3.1.0/gems/rails_admin-3.0.0.rc4/vendor/assets/javascripts/rails_admin/popper.js\nW, [2022-03-19T12:38:43.534443 #6] WARN -- : Removed sourceMappingURL comment for missing asset 'rails_admin/bootstrap.js.map' from /app/vendor/bundle/ruby/3.1.0/gems/rails_admin-3.0.0.rc4/vendor/assets/javascripts/rails_admin/bootstrap.js\nI, [2022-03-19T12:38:43.744157 #6] INFO -- : Writing /app/public/assets/tailwind-0c01c3e907ab268dbd4dcaa14542a12d0388cfbeb5733a183e88e1b26ef30afb.css\nI, [2022-03-19T12:38:43.744385 #6] INFO -- : Writing /app/public/assets/tailwind-0c01c3e907ab268dbd4dcaa14542a12d0388cfbeb5733a183e88e1b26ef30afb.css.gz\n~ $\n```\n\n```text\nUsing stimulus-rails 1.0.4\n Using tailwindcss-rails 2.0.8 (x86_64-linux)\n Bundle complete! 28 Gemfile dependencies, 90 gems now installed.\n Gems in the groups 'development' and 'test' were not installed.\n Bundled gems are installed into `./vendor/bundle`\n Bundle completed (0.38s)\n Cleaning up the bundler cache.\n Removing bundler (2.2.33)\n-----> Detecting rake tasks\n-----> Preparing app for Rails asset pipeline\n Running: rake assets:precompile\n \n Done in 788ms.\n Asset precompilation completed (3.58s)\n Cleaning assets\n Running: rake assets:clean\n-----> Detecting rails configuration\n-----> Discovering process types\n Procfile declares types -> release, web, worker\n Default types for buildpack -> console, rake\n-----> Compressing...\n Done: 78.7M\n-----> Launching...\n```\n\n```text\ntailwind.css\n```\n\n```text\nrake asset:precompile\n```\n\n```text\nproduction.rb\n```\n\n```text\ntest.rb\n```\n\n```text\ndevelopment.rb\n```\n\n```text\ntailwindcss-rails\n```\n\n```text\nsassc-rails\n```\n\n```text\nrails_admin\n```\n\n```text\nrake asset:precompile\n```\n\n```text\napp/assets/builds/.keep\n```\n\n```text\napp/assets/build\n```\n\n```text\ntailwind.css\n```\n\n```text\nrake assets:precompile\n```\n\n```text\ngem install bundler\nbundle update --bundler\nbundle lock --add-platform x86_64-linux\n```\n\n```text\nconfig.assets.debug = true\n```\n\n```text\nconfig/environments/development.rb\n```\n\n========================================\n\nComments:\n- Check you command? guides.rubyonrails.org/asset_pipeline.html#precompiling-asse‌​ts\n- @Nuclearman: what do you mean by check? if I'm running the right command? Heroku runs it automatically, I don't have control over it.\n- I've run that, it's still failing with the same error.\n- Thank you very, very much! I already spent 3 days looking for a solution, and you saved me!\n- It also worked for me! Thax!\n- Do you run that locally, or do you have to run that from the heroku side?\n- @Slaknation Run it on heroku server.\n- @JigarBhatt How do you do that (as in, how do you run that command from the heroku server)?\n- Login to heroku server by using CMD and try these commands.","metadata":{"transformedAt":"2026-08-18T18:33:42.877Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":231,"estimatedTokens":2406}}34{"id":"stack-76508244","source":"stackoverflow","questionId":76508244,"title":"Shadcn UI installation breaks Tailwind CSS","tags":["next.js","tailwind-css","shadcnui"],"text":"Title: Shadcn UI installation breaks Tailwind CSS\nTags: next.js, tailwind-css, shadcnui\nSource: Stack Overflow\n\nQuestion:\nShadcn UI was working fine for a couple weeks until yesterday, when I ran my NextJS app in my localhost and none of the tailwind was working.\n\nTo debug the issue, I created a blank NextJS 13 app in a completely new file location, and everything worked fine; tailwind was working on the default NextJS 13 page. I then ran\n\n```\nnpx shadcn-ui init\n```\n\nwithout installing any of the components. Which did not spit out any errors, but then none of the tailwind styling worked anymore.\n\nmy `tailwind.config.js` after installation:\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: [\"class\"],\n content: [\n './pages/**/*.{ts,tsx}',\n './components/**/*.{ts,tsx}',\n './app/**/*.{ts,tsx}',\n ],\n theme: {\n container: {\n center: true,\n padding: \"2rem\",\n screens: {\n \"2xl\": \"1400px\",\n },\n },\n extend: {\n colors: {\n border: \"hsl(var(--border))\",\n input: \"hsl(var(--input))\",\n ring: \"hsl(var(--ring))\",\n background: \"hsl(var(--background))\",\n foreground: \"hsl(var(--foreground))\",\n primary: {\n DEFAULT: \"hsl(var(--primary))\",\n foreground: \"hsl(var(--primary-foreground))\",\n },\n secondary: {\n DEFAULT: \"hsl(var(--secondary))\",\n foreground: \"hsl(var(--secondary-foreground))\",\n },\n destructive: {\n DEFAULT: \"hsl(var(--destructive))\",\n foreground: \"hsl(var(--destructive-foreground))\",\n },\n muted: {\n DEFAULT: \"hsl(var(--muted))\",\n foreground: \"hsl(var(--muted-foreground))\",\n },\n accent: {\n DEFAULT: \"hsl(var(--accent))\",\n foreground: \"hsl(var(--accent-foreground))\",\n },\n popover: {\n DEFAULT: \"hsl(var(--popover))\",\n foreground: \"hsl(var(--popover-foreground))\",\n },\n card: {\n DEFAULT: \"hsl(var(--card))\",\n foreground: \"hsl(var(--card-foreground))\",\n },\n },\n borderRadius: {\n lg: \"var(--radius)\",\n md: \"calc(var(--radius) - 2px)\",\n sm: \"calc(var(--radius) - 4px)\",\n },\n keyframes: {\n \"accordion-down\": {\n from: { height: 0 },\n to: { height: \"var(--radix-accordion-content-height)\" },\n },\n \"accordion-up\": {\n from: { height: \"var(--radix-accordion-content-height)\" },\n to: { height: 0 },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n },\n },\n },\n plugins: [require(\"tailwindcss-animate\")],\n}\n```\n\nmy `utils.ts` after installation:\n\n```\nimport { ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n \nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n```\n\nThe default page after installation:\n\nEDIT: after some testing, the issue seems to be coming from the `globals.css` and `tailwind.config.js`, still not sure what about them though.\n\n========================================\n\nTop Answer:\nIf your case is similar to mine and you used the `src` folder to wrap the `app` folder, the problem comes from the tailwind config file.\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: [\"class\"],\n content: [\n './pages/**/*.{ts,tsx}',\n './components/**/*.{ts,tsx}',\n './app/**/*.{ts,tsx}',\n ],\n```\n\nThis is what you have. However, the content maps to the wrong directories.\nUpdate the strings in the content array like this:\n\n```\ncontent: [\n './src/app/**/*.{ts,tsx}',\n './src/components/**/*.{ts,tsx}',\n ],\n```\n\n========================================\n\nCode:\n```bash\nnpx shadcn-ui init\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: [\"class\"],\n content: [\n './pages/**/*.{ts,tsx}',\n './components/**/*.{ts,tsx}',\n './app/**/*.{ts,tsx}',\n ],\n theme: {\n container: {\n center: true,\n padding: \"2rem\",\n screens: {\n \"2xl\": \"1400px\",\n },\n },\n extend: {\n colors: {\n border: \"hsl(var(--border))\",\n input: \"hsl(var(--input))\",\n ring: \"hsl(var(--ring))\",\n background: \"hsl(var(--background))\",\n foreground: \"hsl(var(--foreground))\",\n primary: {\n DEFAULT: \"hsl(var(--primary))\",\n foreground: \"hsl(var(--primary-foreground))\",\n },\n secondary: {\n DEFAULT: \"hsl(var(--secondary))\",\n foreground: \"hsl(var(--secondary-foreground))\",\n },\n destructive: {\n DEFAULT: \"hsl(var(--destructive))\",\n foreground: \"hsl(var(--destructive-foreground))\",\n },\n muted: {\n DEFAULT: \"hsl(var(--muted))\",\n foreground: \"hsl(var(--muted-foreground))\",\n },\n accent: {\n DEFAULT: \"hsl(var(--accent))\",\n foreground: \"hsl(var(--accent-foreground))\",\n },\n popover: {\n DEFAULT: \"hsl(var(--popover))\",\n foreground: \"hsl(var(--popover-foreground))\",\n },\n card: {\n DEFAULT: \"hsl(var(--card))\",\n foreground: \"hsl(var(--card-foreground))\",\n },\n },\n borderRadius: {\n lg: \"var(--radius)\",\n md: \"calc(var(--radius) - 2px)\",\n sm: \"calc(var(--radius) - 4px)\",\n },\n keyframes: {\n \"accordion-down\": {\n from: { height: 0 },\n to: { height: \"var(--radix-accordion-content-height)\" },\n },\n \"accordion-up\": {\n from: { height: \"var(--radix-accordion-content-height)\" },\n to: { height: 0 },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n },\n },\n },\n plugins: [require(\"tailwindcss-animate\")],\n}\n```\n\n```js\nimport { ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n \nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nutils.ts\n```\n\n```text\nglobals.css\n```\n\n```text\ntailwind.config.js\n```\n\n```js\nmodule.exports = {\n darkMode: [\"class\"],\n content: [\n './pages/**/*.{ts,tsx}',\n './components/**/*.{ts,tsx}',\n './app/**/*.{ts,tsx}',\n './@/**/*.{ts,tsx}', // <- HERE\n ],\n```\n\n```text\ntailwind.config.js\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: [\"class\"],\n content: [\n './pages/**/*.{ts,tsx}',\n './components/**/*.{ts,tsx}',\n './app/**/*.{ts,tsx}',\n ],\n```\n\n```js\ncontent: [\n './src/app/**/*.{ts,tsx}',\n './src/components/**/*.{ts,tsx}',\n ],\n```\n\n```text\nsrc\n```\n\n```text\napp\n```\n\n```js\nmodule.exports = {\n // ...\n plugins: [require(\"@tailwindcss/forms\"), require(\"tailwindcss-animate\")],\n}\n```\n\n```text\nplugins\n```\n\n```text\n@tailwindcss/forms\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ndarkMode\n```\n\n```text\nmedia\n```\n\n```text\nclass\n```\n\n```text\nnpx shadcn-ui init\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nnpx shadcn-ui@latest init\n```\n\n```text\nglobals.css\n```\n\n```text\nsrc/layout.tsx\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: [\"class\"],\n content: [\n './pages/**/*.{ts,tsx}',\n './components/**/*.{ts,tsx}',\n './app/**/*.{ts,tsx}',\n './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',\n './@/**/*.{ts,tsx}',\n ],\n```\n\n```text\nmodule.exports = {\n content: [\n './pages/**/*.{ts,tsx,js}',\n './components/**/*.{ts,tsx,js}',\n './app/**/*.{ts,tsx,js}',\n './@/**/*.{ts,tsx,js}',\n ],\n...\n}\n```\n\n```text\nnpx shadcn-ui@latest init\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ncss\n```\n\n```text\nmain.tsx\n```\n\n```text\nApp.js\n```\n\n```text\nimport './index.css\n```\n\n```text\ncomponents.json\n```\n\n```text\ncss\n```\n\n```text\n\"css\": \"src/index.css\"\n```\n\n========================================\n\nComments:\n- I think you would want this `import { clsx, type ClassValue } from \"clsx\"` in your utils.ts?\n- This sadly did not resolve my issue. For some reason, it turned out I had to add the line @import './globals.css' in my index.css that resided in my src folder. For context, my src folder was on the same level as all my configs + held the globals.css file. So if anyone is still having issues, maybe try this?\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- Can you add more details to this answer?","metadata":{"transformedAt":"2026-08-18T18:33:42.877Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":36,"totalLines":406,"estimatedTokens":2064}}35{"id":"stack-72272821","source":"stackoverflow","questionId":72272821,"title":"Tailwind css table with fixed header and scrolling tbody vertically","tags":["css","tailwind-css","tailwind-css-3"],"text":"Title: Tailwind css table with fixed header and scrolling tbody vertically\nTags: css, tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI have the code below for a table based on tailwind css.\n\nIf I remove the `block` class, the table is not scrollable anymore.\n\nAdding the `block` class to `tbody` breaks the `thead`. See Images attached.\n\nCodePen if you want to play with the code. https://codepen.io/hirani89/pen/wvyJKqO?editors=1010\n\n```\n\n \n\n### Recipient\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Select\n \n \n Company\n \n \n Address\n \n \n \n \n \n \n \n \n \n BATHURST \n Address Here Address Here Address Here Address Here Address Here Address Here \n \n \n \n \n \n \n BATHURST\n \n Address Here Address Here Address Here Address Here Address Here Address Here \n \n \n \n \n \n \n MUDGEE\n \n Address Here Address Here Address Here Address Here Address Here Address Here \n \n \n \n \n \n \n ORANGE\n \n Address Here Address Here Address Here Address Here Address Here Address Here \n \n \n \n \n \n \n TAREN POINT\n \n Address Here Address Here Address Here Address Here Address Here Address Here \n \n \n \n \n \n \n \n \n \n\n```\n\nWithout `block` class in `tbody` (disables scroll)\nhttps://i.sstatic.net/HJHqz.png\n\nWith `block` class in `tbody` (scroll works but header breaks)\n\nhttps://i.sstatic.net/8RdbG.png\n\n========================================\n\nTop Answer:\nThis is the solution i come up with .\n\n\r\n\r\n\n```\n\n \n\n### Recipient\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Select\n Company\n Address\n \n \n \n \n \n \n \n \n BATHURST\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n \n \n BATHURST\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n \n \n MUDGEEEE\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n \n \n ORANGE\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n \n \n TAREN POINT\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n \n \n TAREN POINT\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n \n \n TAREN POINT\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n \n \n BATHURST\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n \n \n BATHURST\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n \n \n MUDGEE\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n \n \n ORANGE\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n \n \n TAREN POINT\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n \n \n TAREN POINT\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n \n \n TAREN POINT\n Address Here Address Here Address Here Address Here Address Here Address Here\n \n \n \n\n \n \n\n```\n\n========================================\n\nCode:\n```text\n<div class=\"address\">\n <h1 class=\"font-medium leading-tight text-3xl mt-0 mb-2\">Recipient</h1>\n <div class=\"item mb-2 md:flex md:flex-wrap md:justify-between\">\n <div wire:id=\"rbWM5jbW8w1GcT2ql3DF\" class=\"container w-full px-4 sm:px-8\">\n <div class=\"my-2 flex sm:flex-row flex-col\">\n <div class=\"block w-1/3 relative\">\n <span class=\"h-full absolute inset-y-0 left-0 flex items-center pl-2\">\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 fill-current text-gray-500\">\n <path d=\"M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z\">\n </path>\n </svg>\n </span>\n <input autocomplete=\"off\" wire:model.debounce.500ms=\"query\" placeholder=\"Search\" class=\"appearance-none rounded-r rounded-l border border-gray-400 border-b block pl-8 pr-6 py-2 w-full bg-white text-sm placeholder-gray-400 text-gray-700 focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none\">\n </div>\n </div>\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto sm:-mx-6 lg:-mx-8\">\n <div class=\"py-2 inline-block w-full sm:px-6 lg:px-8\">\n <div class=\"overflow-hidden\">\n <table class=\"w-full\">\n <thead class=\"bg-white border-b\">\n <tr>\n <th scope=\"col\" class=\"text-md font-medium text-gray-900 px-6 py-4 text-left\">\n Select\n </th>\n <th scope=\"col\" class=\"text-md font-medium text-gray-900 px-6 py-4 text-left\">\n Company\n </th>\n <th scope=\"col\" class=\"text-md font-medium text-gray-900 px-6 py-4 text-left\">\n Address\n </th>\n </tr>\n </thead>\n <tbody class=\"h-96 block overflow-y-auto\">\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"1\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n BATHURST </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"2\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n BATHURST\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"3\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n MUDGEE\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"4\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n ORANGE\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"5\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n TAREN POINT\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n```\n\n```text\nblock\n```\n\n```text\nblock\n```\n\n```text\ntbody\n```\n\n```text\nthead\n```\n\n```text\nblock\n```\n\n```text\ntbody\n```\n\n```text\nblock\n```\n\n```text\ntbody\n```\n\n```text\n<div class=\"table-wrp block max-h-96\">\n <table class=\"w-full\">\n <thead class=\"bg-white border-b sticky top-0\">\n <!-- table head content -->\n </thead>\n <tbody class=\"h-96 overflow-y-auto\">\n <!-- table body content -->\n </tbody>\n </table>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<div class=\"min-h-screen bg-gray-100\">\n\n <main>\n <div class=\"py-12\">\n <div class=\"max-w-7xl mx-auto sm:px-6 lg:px-8\">\n <div class=\"bg-white overflow-hidden shadow-xl sm:rounded-lg py-4 px-4\">\n <form class=\"mb-4\" method=\"POST\" action=\"https://shipping.local/login\">\n\n <div class=\"address\">\n\n <div class=\"item mb-2 md:flex md:flex-wrap md:justify-between\">\n <div wire:id=\"rbWM5jbW8w1GcT2ql3DF\" class=\"container w-full px-4 sm:px-8\">\n\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto sm:-mx-6 lg:-mx-8\">\n <div class=\"py-2 inline-block w-full sm:px-6 lg:px-8\">\n\n <div class=\"table-wrp block max-h-96\">\n <table class=\"w-full\">\n <thead class=\"bg-white border-b sticky top-0\">\n <tr>\n <th scope=\"col\" class=\"text-md font-medium text-gray-900 px-6 py-4 text-left\">\n Select\n </th>\n <th scope=\"col\" class=\"text-md font-medium text-gray-900 px-6 py-4 text-left\">\n Company\n </th>\n <th scope=\"col\" class=\"text-md font-medium text-gray-900 px-6 py-4 text-left\">\n Address\n </th>\n </tr>\n </thead>\n <tbody class=\"h-96 overflow-y-auto\">\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"1\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n BATHURST </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"2\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n BATHURST\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"3\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n MUDGEE\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"4\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n ORANGE\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"5\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n TAREN POINT\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"1\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n BATHURST </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"2\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n BATHURST\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"3\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n MUDGEE\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"4\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n ORANGE\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"5\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n TAREN POINT\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"1\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n BATHURST </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"2\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n BATHURST\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"3\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n MUDGEE\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"4\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n ORANGE\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n <tr class=\"bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n <input type=\"checkbox\" name=\"address\" value=\"5\">\n </td>\n <td class=\"text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap\">\n TAREN POINT\n </td>\n <td class=\"text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap\">Address Here Address Here Address Here Address Here Address Here Address Here </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n <!-- Livewire Component wire-end:rbWM5jbW8w1GcT2ql3DF -->\n\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </main>\n</div>\n```\n\n```text\n.table-wrp {\n max-height: 75vh;\n overflow-y: auto;\n display:block;\n}\nthead{\n position:sticky;\n top:0\n}\n```\n\n```text\nmax-height\n```\n\n```text\nposition:sticky\n```\n\n```text\ntop:0\n```\n\n```text\nthead\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<div class=\"container p-4\">\n <h1 class=\"mt-0 mb-2 text-3xl font-medium leading-tight\">Recipient</h1>\n <div class=\"item mb-2 md:flex md:flex-wrap md:justify-between\">\n <div wire:id=\"rbWM5jbW8w1GcT2ql3DF\" class=\"container w-full px-4 sm:px-8\">\n <div class=\"my-2 flex flex-col sm:flex-row\">\n <div class=\"relative block w-1/3\">\n <span class=\"absolute inset-y-0 left-0 flex h-full items-center pl-2\">\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 fill-current text-gray-500\">\n <path d=\"M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z\"></path>\n </svg>\n </span>\n <input autocomplete=\"off\" wire:model.debounce.500ms=\"query\" placeholder=\"Search\" class=\"block w-full appearance-none rounded-r rounded-l border border-b border-gray-400 bg-white py-2 pl-8 pr-6 text-sm text-gray-700 placeholder-gray-400 focus:bg-white focus:text-gray-700 focus:placeholder-gray-600 focus:outline-none\" />\n </div>\n </div>\n <table class=\" border-[1px] border-black text-left\">\n <thead class=\"\">\n <tr class=\"text-left flex justify-items-start\">\n <th class=\"text-md px-6 py-4 font-medium text-gray-900 \">Select</th>\n <th class=\"text-md px-6 py-4 font-medium text-gray-900\">Company</th>\n <th class=\"text-md px-6 py-4 font-medium text-gray-900\">Address</th>\n </tr>\n </thead>\n <!-- Remove the nasty inline CSS fixed height on production and replace it with a CSS class — this is just for demonstration purposes! -->\n <tbody class=\"flex flex-col items-center justify-items-start overflow-y-scroll bg-white text-gray-400\" style=\"height: 50vh;\">\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"1\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">BATHURST</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"2\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">BATHURST</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"3\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">MUDGEEEE</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"4\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">ORANGE</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"5\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">TAREN POINT</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"5\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">TAREN POINT</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"5\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">TAREN POINT</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"1\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">BATHURST</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"2\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">BATHURST</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"3\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">MUDGEE</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"4\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">ORANGE</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"5\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">TAREN POINT</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"5\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">TAREN POINT</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n <tr class=\"border-b bg-white transition duration-300 ease-in-out hover:bg-gray-100\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">\n <input type=\"checkbox\" name=\"address\" value=\"5\" />\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-extrabold text-gray-900\">TAREN POINT</td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900\">Address Here Address Here Address Here Address Here Address Here Address Here</td>\n </tr>\n </tbody>\n </table>\n</div>\n </div>\n </div>\n</div>\n```\n\n========================================\n\nComments:\n- but `border-b` is not fixed it just scroll up! which is kind of not a good looking effect.\n- @Dreamer64: sorry I can't reproduce this effect. Feel free to post an example codepen/fiddle etc and I have a look at it. `` should stay fixed/sticky when running the example snippet (...even in safari). Could it be you've applied any overflow properties in your actual code?\n- it is in ur example look at `` u will see bottom border is not there or might scrolled up!\n- I see that't indeed a limitation of the `´ element. I'm afraid there's not much we can do about apart from changing the display to a non-table mode. This obviously introduces other challenges","metadata":{"transformedAt":"2026-08-18T18:33:42.877Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":747,"estimatedTokens":8378}}36{"id":"stack-70665302","source":"stackoverflow","questionId":70665302,"title":"Getting the error \"Nested CSS was detected, but CSS nesting has not been configured correctly\" in React app?","tags":["reactjs","tailwind-css","postcss"],"text":"Title: Getting the error \"Nested CSS was detected, but CSS nesting has not been configured correctly\" in React app?\nTags: reactjs, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI've been upgrading my CRA project to TailwindCSS 3, but now CSS nesting no longer works. Upon starting the server, the console spits out:\n\n```\n(8:3) Nested CSS was detected, but CSS nesting has not been configured correctly.\nPlease enable a CSS nesting plugin *before* Tailwind in your configuration.\nSee how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting\n```\n\nHowever, I don't see what must be done to correct this. I've tried setting up a plain CRA project with Tailwind (following this guide) just to make sure I have no conflicts, and still no success.\n\npostcss.config.js:\n\n```\nmodule.exports = {\n plugins: {\n \"tailwindcss/nesting\": {},\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\nAs you can see, I have added the nesting plugin before Tailwind. It appears to me as if the plugin isn't being detected whatsoever. I've also tried replacing it with `postcss-nesting` with same outcome.\n\nNote: I've also tried using the array syntax with `require('tailwind/nesting')` like the guide suggests.\n\nInterestingly, removing all plugins from postcss.config.js (or using a `require` that fails to resolve) still outputs the same error, implying that this file isn't needed to get Tailwind to load. Maybe I am missing something that causes the whole postcss.config.js file to not be loaded in the first place?\n\nindex.js:\n\n```\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\n\nReactDOM.render(\n \n \n aaa\n bbb\n \n ,\n document.getElementById(\"root\")\n);\n```\n\nindex.css:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n.a {\n @apply text-blue-500;\n\n .b {\n @apply text-green-500;\n }\n}\n```\n\npackage.json: (omitted things for brevity)\n\n```\n{\n \"name\": \"tailwindtest\",\n \"dependencies\": {\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-scripts\": \"5.0.0\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.2\",\n \"postcss\": \"^8.4.5\",\n \"tailwindcss\": \"^3.0.12\"\n }\n}\n```\n\n========================================\n\nTop Answer:\nI use CRA and to fix the issue I used `postinstall` to run a script after `npm install` or `yarn`. The script is changing the web pack config of CRA after all dependencies are installed(a temporary solution of cause).\nYou can find the web pack config in `node_modules/react-scripts/config/webpack.config.js`.\nThe script adds my postcss packages to the actual CRA web pack config.\n\nWHY? CRA does not respect any postcss config in your repo\n\nHave also a look at this comment to see how you should use `postinstall` https://github.com/facebook/create-react-app/issues/2133#issuecomment-347574268.\n\nI also added `tailwindcss/nesting` before `tailwindcss` because tailwind is throwing a warning when it sees any nested css. The warning was blocking my CI since CI=true in CRA means all warnings are treated as errors.\n\nHere is the script that is running in my repo.\n\n```\nFILE=\"node_modules/react-scripts/config/webpack.config.js\"\n\nfunction replace {\n TARGET_FILE=$1\n PATTERN_TO_FIND=$2\n VALUE_FOR_REPLACEMENT=$3\n\n OLD_FILE_CONTENT=$(cat \"$TARGET_FILE\") # we need to collect the content of the file so we can overwrite it in the next command\n echo \"$OLD_FILE_CONTENT\" | sed -e \"s/$PATTERN_TO_FIND/$VALUE_FOR_REPLACEMENT/g\" > \"$TARGET_FILE\"\n}\n\n# add postcss-nesting\nreplace \"$FILE\" \"'postcss-flexbugs-fixes',\" \"'postcss-flexbugs-fixes','postcss-nesting',\"\n\n# add tailwind/nesting\nreplace \"$FILE\" \"'tailwindcss',\" \"'tailwindcss\\/nesting', 'tailwindcss',\"\n```\n\n========================================\n\nCode:\n```text\n(8:3) Nested CSS was detected, but CSS nesting has not been configured correctly.\nPlease enable a CSS nesting plugin *before* Tailwind in your configuration.\nSee how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting\n```\n\n```js\nmodule.exports = {\n plugins: {\n \"tailwindcss/nesting\": {},\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n```text\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\n\nReactDOM.render(\n <React.StrictMode>\n <div className=\"a\">\n aaa\n <div className=\"b\">bbb</div>\n </div>\n </React.StrictMode>,\n document.getElementById(\"root\")\n);\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n.a {\n @apply text-blue-500;\n\n .b {\n @apply text-green-500;\n }\n}\n```\n\n```json\n{\n \"name\": \"tailwindtest\",\n \"dependencies\": {\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-scripts\": \"5.0.0\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.2\",\n \"postcss\": \"^8.4.5\",\n \"tailwindcss\": \"^3.0.12\"\n }\n}\n```\n\n```text\npostcss-nesting\n```\n\n```text\nrequire('tailwind/nesting')\n```\n\n```text\nrequire\n```\n\n```text\nnpm run eject\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwindcss\n```\n\n```text\npostcss\n```\n\n```text\npostcss.config.js\n```\n\n```text\nconfig/webpack.config.js\n```\n\n```text\npostcss-loader\n```\n\n```text\npostcss-preset-env\n```\n\n```text\nFILE=\"node_modules/react-scripts/config/webpack.config.js\"\n\nfunction replace {\n TARGET_FILE=$1\n PATTERN_TO_FIND=$2\n VALUE_FOR_REPLACEMENT=$3\n\n OLD_FILE_CONTENT=$(cat \"$TARGET_FILE\") # we need to collect the content of the file so we can overwrite it in the next command\n echo \"$OLD_FILE_CONTENT\" | sed -e \"s/$PATTERN_TO_FIND/$VALUE_FOR_REPLACEMENT/g\" > \"$TARGET_FILE\"\n}\n\n# add postcss-nesting\nreplace \"$FILE\" \"'postcss-flexbugs-fixes',\" \"'postcss-flexbugs-fixes','postcss-nesting',\"\n\n# add tailwind/nesting\nreplace \"$FILE\" \"'tailwindcss',\" \"'tailwindcss\\/nesting', 'tailwindcss',\"\n```\n\n```text\npostinstall\n```\n\n```text\nnpm install\n```\n\n```text\nyarn\n```\n\n```text\nnode_modules/react-scripts/config/webpack.config.js\n```\n\n```text\npostinstall\n```\n\n```text\ntailwindcss/nesting\n```\n\n```text\ntailwindcss\n```\n\n```text\n\"scripts\": { \n \"postinstall\": \"node script.js\",\n ...\n }\n```\n\n```text\nconst fs = require('fs');\n\nfs.readFile('node_modules/react-scripts/config/webpack.config.js', 'utf8', (err, data) => {\n if (err) {\n return console.log(err);\n }\n const result = data.replace(\"'postcss-flexbugs-fixes',\", \"'postcss-flexbugs-fixes','postcss-nesting',\").replace(\"'tailwindcss',\", \"'tailwindcss/nesting', 'tailwindcss',\");\n\n fs.writeFile('node_modules/react-scripts/config/webpack.config.js', result, 'utf8', (err) => {\n if (err) {\n return console.log(err);\n }\n return console.log(true);\n });\n return console.log(true);\n});\n```\n\n```text\nnpm install postcss postcss-nested --save-dev\n```\n\n```text\nexport default {\n plugins: {\n \"tailwindcss/nesting\": {},\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n```text\npostcss.config.js\n```\n\n========================================\n\nComments:\n- Doesn't your package.json should include @tailwindcss/nesting ?\n- @ClémentBaconnier According to the link in the error: `It’s included directly in the tailwindcss package itself, so to use it all you need to do is add it to your PostCSS configuration, somewhere before Tailwind`\n- I have no idea then, I have never done that before. I found a similar issue #5896 Also the pulls that are relevant: #5489 and #6011\n- From my previous github link, based on adam's #5896 comment and the detect-nesting.test.js file, I think it safe to assume that tailwind does not expect nested CSS. Even if you remove the plugin, it would warn with that error message. In my opinion, it means that somehow, the `postcss-nested` or `tailwindcss/nesting` plugin did not worked or partially worked, right?\n- @ClémentBaconnier I agree that the `tailwind` at-rules are not meant to be nested. My intention is to use nested `apply` at-rules, which is supported and worked fine in Tailwind 2. The issue is that they have a guide on how to achieve this for v3 but that guide isn't working for me.\n- I understand that. I tried to give you an input to help you debugging and find a solution and perhaps submitting an issue to tailwindlabs. As I understand how it's working; the plugins work like a pipeline and `tailwindcss/nesting` should translate the nested css input to inline css, then passing the inline css output to `tailwindcss`, and so on. Per my last comment, I assume that something is not translated by `tailwindcss/nesting` or `postcss-nested`. Perhaps you could try withtout `apply` at-rules to see if it's working, If not, it *could* be degression to report, assuming the doc is right.\n- @ClémentBaconnier I appreciate your inputs, they certainly help. I'm afraid the issue remains with just a single class selector within another, so the at-rules aren't directly related. What I've found out though is that Create React App v5, which was recently released, has Tailwind officially supported and as a dependency. Perhaps the issue is that this version is overriding the one I've installed, and that my configs are never loaded for a related reason.\n- I have the same problem and couldnt find a solution. I think the tailwind doesnt react postcss config file and always the same error. I tried different solutions but it didnt change so I convert my nested css to css because I spent 2 days unfortunately.\n- Great detective work, thanks. I had a suspicion something funky was going on. I even joined the Tailwind Discord server to ask a few times without any clear answers (although I never directed it at Adam himself). Luckily I can wait with using nesting and see if they update CRA, so I prefer that over ejecting.\n- Thanks for this, it helped a lot. Based on your answer, I published a fork of create-react-app to enable use of tailwind/nesting without ejecting github.com/facebook/create-react-app/pull/…","metadata":{"transformedAt":"2026-08-18T18:33:42.877Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":29,"totalLines":344,"estimatedTokens":2504}}37{"id":"stack-67344478","source":"stackoverflow","questionId":67344478,"title":"How to apply background image with linear gradient in Tailwind CSS?","tags":["css","tailwind-css","tailwind-in-js"],"text":"Title: How to apply background image with linear gradient in Tailwind CSS?\nTags: css, tailwind-css, tailwind-in-js\nSource: Stack Overflow\n\nQuestion:\nI want to apply a linear gradient to my background image. on tailwind config file I wrote a custom rule like this:\n\n```\ntheme: {\n extend: {\n backgroundImage: (theme) => ({\n 'hero-pattern': \"url('../src/images/icon-bg.jpg')\",\n \n }),\n },\n },\n```\n\nIt works. but when I try to apply a linear gradient it didn't woork.\n\nFor applying linear-gradient, what I have tried is this:\n\n```\ntheme: {\n extend: {\n backgroundImage: (theme) => ({\n \n 'hero-pattern':\n \"linear-gradient(to right bottom, rgba('#7ed56f',0.8), rgba('#28b485',0.8)), url('../src/images/icon-bg.jpg')\",\n }),\n },\n },\n```\n\nBut it didn't work.\n\n========================================\n\nTop Answer:\ndon't use function. just try as a utility\n\n```\ntheme: {\n extend: {\n backgroundImage: {\n 'hero-pattern': \"linear-gradient(to right bottom, rgba('#7ed56f',0.8), rgba('#28b485',0.8)), url('../src/images/icon-bg.jpg')\",\n },\n },\n },\n```\n\nhere is a working example https://play.tailwindcss.com/uHp6pKIKEc\n\n========================================\n\nCode:\n```text\ntheme: {\n extend: {\n backgroundImage: (theme) => ({\n 'hero-pattern': \"url('../src/images/icon-bg.jpg')\",\n \n }),\n },\n },\n```\n\n```text\ntheme: {\n extend: {\n backgroundImage: (theme) => ({\n \n 'hero-pattern':\n \"linear-gradient(to right bottom, rgba('#7ed56f',0.8), rgba('#28b485',0.8)), url('../src/images/icon-bg.jpg')\",\n }),\n },\n },\n```\n\n```text\nrgba\n```\n\n```text\ntheme: {\n extend: {\n backgroundImage: {\n 'hero-pattern': \"linear-gradient(to right bottom, rgba('#7ed56f',0.8), rgba('#28b485',0.8)), url('../src/images/icon-bg.jpg')\",\n },\n },\n },\n```\n\n```text\nbg-[linear-gradient(to_right_bottom,rgba(49,84,44,0.8),rgba(16,71,52,0.8)),url('../src/images/icon-bg.jpg')]\n```\n\n========================================\n\nComments:\n- According to docs you only need to add background image to config file. you can use the `linear-gradient` classes directly in your element. tailwindcss.com/docs/background-image#background-images\n- Any way to do this using utility classes? Not being able to use the `background` shorthand syntax seems like a shortcoming.","metadata":{"transformedAt":"2026-08-18T18:33:42.877Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":102,"estimatedTokens":574}}38{"id":"stack-70561989","source":"stackoverflow","questionId":70561989,"title":"Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'","tags":["npm","tailwind-css","postcss","vite","autoprefixer"],"text":"Title: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'\nTags: npm, tailwind-css, postcss, vite, autoprefixer\nSource: Stack Overflow\n\nQuestion:\nThis is my first Tailwind CSS project and started with CDN, but I did not always have internet, so I tried it installing using PostCSS, and I am using Vite as my server.\n\nFollowed this video from CodeWithHarry https://www.youtube.com/watch?v=aUunolbb1xU&list=PLu0W_9lII9ahwFDuExCpPFHAK829Wto2O&index=3\n\nI first initiated the project by\n\n```\nnpm init -y\n```\n\nand installed required packages by\n\n```\nnpm install -D tailwind postcss autoprefixer vite\n```\n\nand then initiated the Tailwind CSS by\n\n```\nnpx tailwindcss init -p\n```\n\nand also I entered @tailwind directives in a input.css file.\n\nBut when I ran:\n\n```\nnpm start\n```\n\nMy vite server greeted me with this error:\n\n```\n[plugin:vite:css] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'\nRequire stack:\n - C:\\projects\\2 Shidhu\\twproject\\noop.js\n \n (@C:\\projects\\2 Shidhu\\twproject\\postcss.config.js)\n```\n\nhttps://i.sstatic.net/sumN5.png\n\nMy index.html:\n\n```\n\n \n \n \n \n My first tailwindcss project\n\n \n \n \n \n \n- Home\n \n- About Us\n \n- Contact Us\n \n- Blog\n \n \n \n \n \n RubyMine\n\n RubyMine is a dedicated Ruby and Rails development environment. The IDE provides a wide range of essential tools for Ruby developers, tightly integrated together to create a convenient environment for productive Ruby development and Web development with Ruby on Rails. RubyMine is available for a free 30-day evaluation.\n\n \n \n \n \n \n\n```\n\nMy tailwind.config.js:\n\n```\nmodule.exports = {\n content: [\"*\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nMy postcss.config.js:\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\nMy package.json:\n\n```\n{\n \"name\": \"twproject\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"vite\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.1\",\n \"postcss\": \"^8.4.5\",\n \"tailwind\": \"^4.0.0\",\n \"vite\": \"^2.7.10\"\n }\n}\n```\n\nHow can I solve this?\n\n========================================\n\nTop Answer:\nCreate React App does not support custom PostCSS configurations and is incompatible with many important tools in the PostCSS ecosystem, like `postcss-import`.\n\nhttps://tailwindcss.com/docs/guides/create-react-app\n\n========================================\n\nCode:\n```text\nnpm init -y\n```\n\n```text\nnpm install -D tailwind postcss autoprefixer vite\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n```text\nnpm start\n```\n\n```none\n[plugin:vite:css] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'\nRequire stack:\n - C:\\projects\\2 Shidhu\\twproject\\noop.js\n \n (@C:\\projects\\2 Shidhu\\twproject\\postcss.config.js)\n```\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" href=\"input.css\">\n <title>My first tailwindcss project</title>\n</head>\n<body>\n <nav class=\"bg-purple-900 text-white flex justify-between\">\n \n <img src=\"./assets/logo.png\" alt=\"logo\" class=\"h-20 px-3 py-4\">\n <ul class=\"flex space-x-11 justify-end pt-6 px-8 font-bold \">\n <li><a href=\"#\" class=\"hover:border-b-2 hover:text-fuchsia-600 hover:border-fuchsia-600\">Home</a></li>\n <li><a href=\"#\" class=\"hover:border-b-2 hover:text-fuchsia-600 hover:border-fuchsia-600\">About Us</a></li>\n <li><a href=\"#\" class=\"hover:border-b-2 hover:text-fuchsia-600 hover:border-fuchsia-600\">Contact Us</a></li>\n <li><a href=\"#\" class=\"hover:border-b-2 hover:text-fuchsia-600 hover:border-fuchsia-600\">Blog</a></li>\n </ul>\n </nav>\n <main>\n <div class=\"bg-fuchsia-200 pb-8 flex justify-between\">\n <div>\n <p class=\"font-bold text-3xl px-8 py-10\">RubyMine</p>\n <p class=\"mx-8 w-80\">RubyMine is a dedicated Ruby and Rails development environment. The IDE provides a wide range of essential tools for Ruby developers, tightly integrated together to create a convenient environment for productive Ruby development and Web development with Ruby on Rails. RubyMine is available for a free 30-day evaluation.</p>\n </div>\n <img src=\"./assets/logo.png\" alt=\"logo\" class=\"h-60 pt-16 pr-16\">\n </div>\n <hr>\n </main>\n</body>\n</html>\n```\n\n```js\nmodule.exports = {\n content: [\"*\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```json\n{\n \"name\": \"twproject\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"vite\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.1\",\n \"postcss\": \"^8.4.5\",\n \"tailwind\": \"^4.0.0\",\n \"vite\": \"^2.7.10\"\n }\n}\n```\n\n```text\nnpm install -D tailwindcss postcss autoprefixer vite\nnpm tailwindcss init\n```\n\n```text\nnpm install -D tailwind postcss autoprefixer vite\n```\n\n```text\ntailwindcss\n```\n\n```text\ntailwind\n```\n\n```text\npostcss-import\n```\n\n========================================\n\nComments:\n- I had same issue but with autoprefixer, yarn add fixed it. Thanks.\n- Hi, what should be the name of the tailwind config file please ? tailwind.config.js or tailwindcss.config.js ?\n- @GBETNKOMNJIFON the name of the tailwindcss config file need to be `tailwind.config.js`\n- \"npx tailwindcss init\" would be better","metadata":{"transformedAt":"2026-08-18T18:33:42.878Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":271,"estimatedTokens":1400}}39{"id":"stack-65917029","source":"stackoverflow","questionId":65917029,"title":"Tailwind CSS: display text on image hover","tags":["css","tailwind-css"],"text":"Title: Tailwind CSS: display text on image hover\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow can I show text on image hover, using Tailwind CSS: display text on image hover?\n\nHere is my image? I want text \"mammals\" to be displayed when user hovers image?\n\n```\n\n```\n\n========================================\n\nTop Answer:\nI prefer to play around with position relative and absolute because it gives me more options to work with. Check out this code Display text on hover\n\n```\n\n \n Dwayne\n\n```\n\n========================================\n\nCode:\n```text\n<img src=\"/img/cat/categories/mammals.png\" alt=\"mammals\" class=\"max-w-full max-h-full\">\n```\n\n```text\n<img src=\"/img/cat/categories/mammals.png\" alt=\"mammals\" class=\"max-w-full max-h-full\" title=\"mammals\">\n```\n\n```text\n<div class=\"w-64 h-64 bg-red-100 relative\">\n <div class=\"absolute inset-0 bg-cover bg-center z-0\" style=\"background-image: url('https://upload.wikimedia.org/wikipedia/en/3/3c/JumanjiTheNextLevelTeaserPoster.jpg')\"></div>\n <div class=\"opacity-0 hover:opacity-100 duration-300 absolute inset-0 z-10 flex justify-center items-center text-6xl text-white font-semibold\">Dwayne</div>\n</div>\n```\n\n```text\n<div class=\"relative \">\n <a class=\"absolute inset-0 z-10 bg-white text-center flex flex-col items-center justify-center opacity-0 hover:opacity-100 bg-opacity-90 duration-300\">\n <h1 class=tracking-wider >Title</h1>\n <p class=\"mx-auto\">Description</p>\n </a>\n <a href=\"#\" class=\"relative\">\n <div class=\"h-48 flex flex-wrap content-center\">\n <img src=\"/image_url\" class=\"mx-auto \" alt=\"\">\n </div>\n </a>\n </div>\n```\n\n```css\n.as-console-wrapper {\n display: none !important;\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"w-64 bg-red-100 relative group\">\n <img src=\"https://upload.wikimedia.org/wikipedia/en/3/3c/JumanjiTheNextLevelTeaserPoster.jpg\" />\n <div class=\"opacity-0 group-hover:opacity-100 duration-300 absolute inset-x-0 bottom-0 flex justify-center items-end text-xl bg-gray-200 text-black font-semibold\">Dwayne</div>\n</div>\n```\n\n```text\ngroup-hover\n```\n\n========================================\n\nComments:\n- Replace `alt` attribute by `title`.\n- I am going to show the title on hover opacity. Is it possible in Tailwind CSS? prntscr.com/12qt4k5\n- @ExpertWeblancer Sure you can. Please create a seperate question for this. That way this is not hidden in some thread's comment. Making it easier for others to .\n- I adapted this solution for my case in which I pass dynamically text and img as props in React, as said with some \"adaption\" works as charm\n- I adapted the solution to pass clickable svg icons and text labels for them","metadata":{"transformedAt":"2026-08-18T18:33:42.878Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":84,"estimatedTokens":677}}40{"id":"stack-68138453","source":"stackoverflow","questionId":68138453,"title":"How create a TRUE sticky header/ footer using Tailwindcss (sticks to bottom even if scroll)?","tags":["tailwind-css","sticky-footer"],"text":"Title: How create a TRUE sticky header/ footer using Tailwindcss (sticks to bottom even if scroll)?\nTags: tailwind-css, sticky-footer\nSource: Stack Overflow\n\nQuestion:\nLot of blogs and posts purport to create a \"sticky footer\" using Tailwindcss, but none that I can find *thought* about the case where there is more than a short \"hello world\" line of content:\n\nFor example in *none* of these examples does the footer \"stick\" if the main area is tall enough to scroll.\n\nhttps://www.gomasuga.com/blog/creating-a-sticky-footer-with-tailwind\n\nTailwindcss: fixed/sticky footer on the bottom\n\nhttps://medium.com/@milanchheda/sticky-footer-using-tailwind-css-1c757ea729e2\n\n... and several codepen examples.\n\nIs there a way with Tailwindcss to create a small footer that is alway sidsplaye don the screen regardless of how long the main content area is?\n\n========================================\n\nTop Answer:\nI solved this issue mostly using flex with the outermost div using the `min-h-screen` class and the content of the page using the `flex-grow` class.\n\nThis solution does not show the scroll bar for something small like a hello world page, but shows a scroll bar if the content of the page expands enough.\n\n\r\n\r\n\n```\n\n \n header contents\n \n \n \n \n \n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat quos dignissimos doloremque enim necessitatibus accusamus dolorum aperiam, at tempora vel?\n \n \n \n \n footer contents\n \n\n```\n\n\r\n\r\n\r\n\nFeel free to play around with it yourself:\n\nhttps://play.tailwindcss.com/3MEiKoraDl\n\n@JHeth was close but the scroll bar is always there if you use their solution.\n\n========================================\n\nCode:\n```text\noverflow-hidden\n```\n\n```text\nh-screen\n```\n\n```text\noverflow-y-scroll\n```\n\n```text\nfixed bottom-0 left-0 w-full\n```\n\n```text\nflex flex-col min-h-screen\n```\n\n```text\nflex-1\n```\n\n```text\nsticky top-0 left-0 w-full\n```\n\n```text\n<div class=\"fixed inset-x-0 top-0 left-0 py-5 px-4 bg-cyan-300\">Menu</div>\n <div class=\"flex flex-col bg-green-300 p-16 min-h-screen\">\n <div class=\"flex flex-col items-start\">\n <div class=\"my-32 h-64 w-64 bg-green-400\">hello</div>\n </div>\n <div class=\"flex flex-col items-end\">\n <div class=\"m-32 h-64 w-64 bg-blue-400\">hellos</div>\n </div>\n </div>\n <div class=\"fixed inset-x-0 bottom-0 left-0 py-5 px-4 bg-cyan-300\">\n Menu\n </div>\n</div>\n```\n\n```html\n<div class=\"flex flex-col min-h-screen\">\n <header class=\"sticky z-50 bg-gray-300 top-0 p-4\">\n header contents\n </header>\n <div class=\"flex-grow\">\n <main>\n <div>\n <!-- ADD MORE TEXT FOR THE SCROLL BAR TO APPEAR -->\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat quos dignissimos doloremque enim necessitatibus accusamus dolorum aperiam, at tempora vel?\n </div>\n </main>\n </div>\n <footer class=\"sticky z-50 bg-gray-300 bottom-0 p-4\">\n footer contents\n </footer>\n</div>\n```\n\n```text\nmin-h-screen\n```\n\n```text\nflex-grow\n```\n\n========================================\n\nComments:\n- This explanation helped me solve a similar problem. Thank you for your insight @JHeth\n- Thanks so much for that playground demo. Exactly what I wanted. :-)","metadata":{"transformedAt":"2026-08-18T18:33:42.878Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":137,"estimatedTokens":793}}41{"id":"stack-75446831","source":"stackoverflow","questionId":75446831,"title":"How disabled dark mode in tailwind css","tags":["laravel-8","tailwind-css","laravel-livewire","darkmode"],"text":"Title: How disabled dark mode in tailwind css\nTags: laravel-8, tailwind-css, laravel-livewire, darkmode\nSource: Stack Overflow\n\nQuestion:\nI'm using the package laravel livewire table ([laravel livewire table][1]\n\n[1]: https://github.com/rappasoft/laravel-livewire-tables) on my laravel app (v8).\n\nI also use tailwind CSS on v3.\n\nBy default this package add some tailwind class for dark mode on tables. But I don't want to use dark mode. I want my site to stay light whatever the browser configuration.\n\nI read that I have to set it on tailwind.config.js so I try some things like :\n\n```\nmodule.exports = {\n\n plugins: [require('@tailwindcss/forms')],\n darkMode: false,\n};\n```\n\n```\nmodule.exports = {\n\n plugins: [require('@tailwindcss/forms')],\n darkMode: 'class',\n};\n```\n\n```\nmodule.exports = {\n\n plugins: [require('@tailwindcss/forms')],\n darkMode: 'media',\n};\n```\n\nNo one works for disabling dark mode...\n\nDo you know how to do it?\n\n========================================\n\nTop Answer:\nchanges\n\n```\ndarkMode: false,\n```\n\nto\n\n```\ndarkMode: 'false',\n```\n\nits work for me\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n\n plugins: [require('@tailwindcss/forms')],\n darkMode: false,\n};\n```\n\n```js\nmodule.exports = {\n\n plugins: [require('@tailwindcss/forms')],\n darkMode: 'class',\n};\n```\n\n```js\nmodule.exports = {\n\n plugins: [require('@tailwindcss/forms')],\n darkMode: 'media',\n};\n```\n\n```js\nmodule.exports = {\n darkMode: 'class',\n // ...\n}\n```\n\n```js\nlocalStorage.theme = 'light'\n```\n\n```text\ndark\n```\n\n```text\nlight\n```\n\n```text\nlight\n```\n\n```text\ndarkMode: false,\n```\n\n```text\ndarkMode: 'false',\n```\n\n```text\n@layer base {\n html {\n color-scheme: light !important;\n }\n}\n```\n\n```text\ndata-theme=\"light\"\n```\n\n```text\n<html>\n```\n\n```text\nexport default {\ncontent: [\n\n],\n\ndarkMode: 'false',\n\ntheme: {\n extend: {\n fontFamily: {\n sans: ['Figtree', ...defaultTheme.fontFamily.sans],\n },\n },\n},\n\nplugins: [forms, typography],\n};\n```\n\n```text\ndarkMode: 'false',\n```\n\n========================================\n\nComments:\n- where?!! file name please\n- tailwind.config.js\n- When Typescript is employed in the project, it will not like it.\n- Adding this now generates a warning: tailwindcss.com/docs/…","metadata":{"transformedAt":"2026-08-18T18:33:42.878Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":165,"estimatedTokens":569}}42{"id":"stack-71315620","source":"stackoverflow","questionId":71315620,"title":"add root class to Laravel / Inertia","tags":["laravel","vue.js","tailwind-css","inertiajs"],"text":"Title: add root class to Laravel / Inertia\nTags: laravel, vue.js, tailwind-css, inertiajs\nSource: Stack Overflow\n\nQuestion:\nok, I am going MAD...\n\nI need to add `class=\"h-full\"` to the root div inside Laravel Jetstream using Inertia. The reason for this is inside a vue file using Tailwind UI, it wants the following\n\nhttps://i.sstatic.net/4opPQ.png\n\nHowever, anytime I change anything inside app.blade.php, the @inertia overrides it. I can add it manually using web inspector which resolves it but I do not get where to make modifications to it inside the app. I am not sure why.\n\nPlease see the highlighted web inspector screenshot to see where it needs to go\n\nhttps://i.sstatic.net/4O0GQ.png\n\nthe code below is the app.blade.php file.\n\n```\n\ngetLocale()) }}\" class=\"h-full\">\n \n \n \n\n {{ config('app.name', 'Laravel') }}\n\n \n \n \n\n \n \n\n \n @routes\n \n \n \n @inertia\n\n @env ('local')\n \n @endenv\n \n\n```\n\nWhere am I supposed to put the class as I am just not mentally getting this.\n\n========================================\n\nTop Answer:\nUntil this issue is fixed, I suggest a less...intrusive fix.\n\nIn your `tailwind.css` add\n\n```\n#app {\n @apply h-full; /* feel free to add more classes */\n}\n```\n\nThis **is better** @ArcticMediaRyan solution cause\n\n- SSR is not broken, if you ever need it\n\n- Inertia may receive an important update to the `@inertia` directive, that we don't want to miss.\n\n- Quite neat, I love plug-n-play nature of it :D\n\nMy personal tailwind.css looks like this (I've faced the same issue)\n\n```\n/* nothing new should without a good damn reason */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/*\nfixme not able to add classes easily to the root component\n https://github.com/inertiajs/inertia-laravel/issues/370\n*/\n#app {\n @apply h-full;\n}\n```\n\n========================================\n\nCode:\n```text\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\" class=\"h-full\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <title inertia>{{ config('app.name', 'Laravel') }}</title>\n\n <!-- Fonts -->\n <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap\">\n <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Audiowide&display=swap\">\n\n <!-- Styles -->\n <link rel=\"stylesheet\" href=\"{{ mix('css/app.css') }}\">\n\n <!-- Scripts -->\n @routes\n <script src=\"{{ mix('js/app.js') }}\" defer></script>\n </head>\n <body class=\"font-sans antialiased h-full\">\n @inertia\n\n @env ('local')\n <script src=\"http://localhost:3000/browser-sync/browser-sync-client.js\"></script>\n @endenv\n </body>\n</html>\n```\n\n```text\nclass=\"h-full\"\n```\n\n```text\n<body class=\"h-full font-sans antialiased\">\n <div id=\"app\" class=\"h-full\" data-page=\"{{ json_encode($page) }}\"></div>\n\n @env ('local')\n <script src=\"http://localhost:3000/browser-sync/browser-sync-client.js\"></script>\n @endenv\n </body>\n```\n\n```text\n@inertia\n```\n\n```text\n<div id=\"app\">\n```\n\n```text\n#app {\n @apply h-full; /* feel free to add more classes */\n}\n```\n\n```text\n/* nothing new should without a good damn reason */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/*\nfixme not able to add classes easily to the root component\n https://github.com/inertiajs/inertia-laravel/issues/370\n*/\n#app {\n @apply h-full;\n}\n```\n\n```text\ntailwind.css\n```\n\n```text\n@inertia\n```\n\n```text\n//\n// Inertia's `app.js` file\n// The DOM has been mounted by the time this function is called\n// hence we can manipulate it with JavaScript:\ncreateInertiaApp({\n id: 'app',\n resolve: async(name) => {\n\n // your logic goes here, import.meta.glob();, etc.\n\n document.getElementById('app').classList.add('h-full');\n\n // more logic?\n\n return page;\n },\n setup({ el, App, props, plugin }).mount(el);\n});\n```\n\n```text\n\"app\"\n```\n\n```text\n<div>\n```\n\n```text\nimport './bootstrap'\nimport '../css/app.css'\n\nimport { createApp, h } from 'vue'\nimport { createInertiaApp } from '@inertiajs/vue3'\nimport { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'\nimport { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'\n\nconst appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel'\n\ncreateInertiaApp({\n title: title => `${title} - ${appName}`,\n resolve: name => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),\n setup ({ el, App, props, plugin }) {\n return createApp({\n render: () => {\n el.classList.add('h-full') // <---\n return h(App, props)\n }\n })\n .use(plugin)\n .use(ZiggyVue, Ziggy)\n .mount(el)\n },\n progress: {\n color: '#4B5563'\n }\n})\n```\n\n========================================\n\nComments:\n- Did you try to write css for #app or body tag?\n- I love this solution for sure. The solution I provided was given to me on discord by the creator of Inertia. Yours however does fix things cleanly!\n- @ArcticMediaRyan 🙏❤️\n- You're saying to simply add styles to the element? Madness :-) Yeah, I was needlessly wracking my brain on this one too.\n- @SpencerWilliams nah, every simple solution took 5-10 hours of perfectionism and banging head over the keyboard : D\n- Option #2 is not correct. That comment was recommending where this config item could potentially be added if Inertia were going to implement something for this use case. Right now...only option #1 is really viable.\n- in my case #app was not sufficent so i end up seting the h-full to html&body at app.css. html,body,#app { @apply h-full }","metadata":{"transformedAt":"2026-08-18T18:33:42.878Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":243,"estimatedTokens":1431}}43{"id":"stack-72649576","source":"stackoverflow","questionId":72649576,"title":"How to force dark-mode using TailwindCSS on browsers?","tags":["javascript","html","css","user-interface","tailwind-css"],"text":"Title: How to force dark-mode using TailwindCSS on browsers?\nTags: javascript, html, css, user-interface, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a website with proper implementation for dark/light UI using TailwindCSS.\n\nI was wondering if there is a way to force the website to load in dark mode until the user specifically toggles light mode on by clicking the toggle button.\n\nWhy? Cause I prefer how the website looks in dark mode, but since the light/dark themeing is properly implemented I'd rather keep it and force it to load in dark mode despite user's browser settings.\n\n========================================\n\nTop Answer:\nI tried the method of setting `darkMode` to `class` in the `tailwind.config.js` file as was suggested in another answer, but despite taking all the steps, this wasn't working for me.\n\nIn my case, all I needed to force dark mode in my app was to adjust the media queries in my `main.css` (AKA `globals.css` or whatever else you've called it).\n\n```\n/* main.css */\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* All your tailwind definitions with @apply rules are here */\n\n/* If the user prefers dark mode, \nwe of course apply color-scheme: dark, as usual */\n@media (prefers-color-scheme: dark) {\n html {\n color-scheme: dark;\n }\n}\n\n/* If the user prefers light mode, \nwe still enforce color-scheme: dark, despite the user preference */\n@media (prefers-color-scheme: light) {\n html {\n color-scheme: dark;\n }\n}\n```\n\nThat's it. I didn't need to mess about in my `tailwind.config.js` or anywhere else.\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n darkMode: 'class',\n // ...\n}\n```\n\n```text\n<html className=\"dark\">\n<body>\n <!-- Will be black -->\n <div className=\"bg-white dark:bg-black\">\n <!-- ... -->\n </div>\n</body>\n</html>\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ndarkMode\n```\n\n```text\nclass\n```\n\n```text\ndarkMode\n```\n\n```text\nClassName\n```\n\n```text\ndark\n```\n\n```text\nhtml\n```\n\n```text\nlight\n```\n\n```text\nClassName\n```\n\n```text\ndark\n```\n\n```text\nhtml\n```\n\n```css\n/* main.css */\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* All your tailwind definitions with @apply rules are here */\n\n\n/* If the user prefers dark mode, \nwe of course apply color-scheme: dark, as usual */\n@media (prefers-color-scheme: dark) {\n html {\n color-scheme: dark;\n }\n}\n\n/* If the user prefers light mode, \nwe still enforce color-scheme: dark, despite the user preference */\n@media (prefers-color-scheme: light) {\n html {\n color-scheme: dark;\n }\n}\n```\n\n```text\ndarkMode\n```\n\n```text\nclass\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmain.css\n```\n\n```text\nglobals.css\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nsavedTheme=localStorage.getItem('theme');\n\nif (!savedTheme) {\n document.documentElement.classList.add('dark')\n};\n\nonMounted(()=>{\n const savedTheme=localStorage.getItem('theme');\n\n if (!savedTheme||savedTheme==='dark') { \n document.documentElement.classList.add('dark');\n } else { \n document.documentElement.classList.remove('dark');\n }\n});\n```\n\n========================================\n\nComments:\n- Official documentation: tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually\n- What in the world is a `css` file that has `js` and a html file with `className`?\n- @Phil the `className` is in a React or Next js project very similar to the `class` attribute in html;\n- @Phil the file is actually `tailwind.config.js`, I've proposed an edit to the answer.\n- Use 3 ` for a code block 🙂\n- Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. **Would you kindly edit your answer to include additional details for the benefit of the community?**","metadata":{"transformedAt":"2026-08-18T18:33:42.878Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":189,"estimatedTokens":989}}44{"id":"stack-79498214","source":"stackoverflow","questionId":79498214,"title":"How to fix Tailwind PostCSS plugin error?","tags":["reactjs","tailwind-css","vite","postcss","tailwind-css-4"],"text":"Title: How to fix Tailwind PostCSS plugin error?\nTags: reactjs, tailwind-css, vite, postcss, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nNot one LLM was able to help me fix this issue, so here I am. I'm building a Vite + React + TS project and it fails to build because of this error: [plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration. The first one is a\n\nI have tried:\n\n- uninstalling tailwindcss/postcss\nreconfiguring the plugin array inside postcss from\n`require('tailwindcss') to require('@tailwindcss/postcss')`\n\n- adding import @tailwindcss to my global css\n\nMy PostCSS file\n\n```\nplugins: {\n '@tailwindcss/postcss': {},\n autoprefixer: {},\n },\n}\n```\n\nMy Vite file\n\n```\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vite.dev/config/\nexport default defineConfig({\n plugins: [\n react(),\n tailwindcss(),\n ],\n})\n```\n\nmy index.css (snippet)\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n html {\n```\n\nAppreciate any help\n\n========================================\n\nTop Answer:\nYou seem to be using some v3 configs with some v4 configs at the same time.\n\nConsidering you want to use latest tailwindcss v4 with vite, you do not need to handle PostCSS manually.\n\nUninstall PostCSS, delete the PostCSS file and the steps here.\n\nYour vite file seems to be correct.\n\nYour index.css can lose the old v3 @tailwind directives in favour of the new @import \"tailwindcss\";\n\n========================================\n\nCode:\n```none\nplugins: {\n '@tailwindcss/postcss': {},\n autoprefixer: {},\n },\n}\n```\n\n```none\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vite.dev/config/\nexport default defineConfig({\n plugins: [\n react(),\n tailwindcss(),\n ],\n})\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\n@layer base {\n html {\n```\n\n```text\ntailwindcss\n```\n\n```text\n@tailwindcss/postcss\n```\n\n```text\nrequire('tailwindcss') to require('@tailwindcss/postcss')\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```text\nnpm install -D tailwindcss@3\n```\n\n```text\n@tailwindcss/vite\n```\n\n```text\n@tailwind\n```\n\n========================================\n\nComments:\n- What's your TailwindCSS version? It looks like you're trying to install v4 based on v3 practices, using the new `@tailwindcss/postcss` and `@tailwindcss/vite` packages created for v4. These two packages can only be used with v4. In TailwindCSS v3, PostCSS support was still implemented directly, and Vite support didn’t even exist yet. Read more in my answer.\n- I'm using Tailwind v4 (@tailwindcss/vite@4.0.12 @tailwindcss/node@4.0.12/ tailwindcss@4.0.12)\n- Well, if you really want to use v4, just my answer and integrate it with Vite using the steps I've outlined. One very important change is that the `tailwind.config.js` file is gone, and instead, a CSS-first configuration has been introduced. The `@tailwind` directive (which you're using) has been removed, and instead, they introduced `@import \"tailwindcss\"`. I really tried to provide sources for everything in my answer.\n- I did the following for v4, installed tailwindcss and @tailwindcss/vite via npm, added @tailwindcss/vite plugin to my vite.config, and used @import \"tailwindcss\" for my CSS. The error persisted, but let me go through your answer in detail.\n- Starting from v4, TailwindCSS can communicate directly with Vite through the @tailwindcss/vite plugin, so you no longer need PostCSS. Also, you no longer need autoprefixer, as it has been integrated into v4. --- So, delete the `postcss.config.js` file. Everything you've done is correct. Now, just remove the 3 `@tailwind` lines from your CSS file and replace them with: `@import \"tailwindcss\"`;\n- More example: From this answer can read \"TailwindCSS v4\" section or can read How can I integrate TailwindCSS for React project with Vite?\n- It worked! Thank you so much.","metadata":{"transformedAt":"2026-08-18T18:33:42.878Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":138,"estimatedTokens":1036}}45{"id":"stack-67891200","source":"stackoverflow","questionId":67891200,"title":"Apply style on parent when hovering over a specific child element using tailwind","tags":["tailwind-css"],"text":"Title: Apply style on parent when hovering over a specific child element using tailwind\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have something like this:\n\n```\n\n \n \n \n \n\n```\n\nHow would I go about applying `.bg-blue-100` to the `#parent` only when hovering over `#child`?\n\n(I understand that the opposite could be achieved using `group` on the parent, and `group-hover` on the child.)\n\n========================================\n\nTop Answer:\nIn case you also want to style the parent whenever the child is focused, just add\n\n```\n\"focus-within:bg-indigo-500\"\n```\n\n(Obviously replacing \"bg-indigo-500\" by your style)\n\nThis would work when it happens for every child or if you only have one tho.\n\n========================================\n\nCode:\n```html\n<main id=\"parent\" class=\"h-screen flex justify-center items-center\">\n \n <div id=\"child\" class=\"bg-red-200 w-96 h-72 flex\">\n </div>\n \n</main>\n```\n\n```text\n.bg-blue-100\n```\n\n```text\n#parent\n```\n\n```text\n#child\n```\n\n```text\ngroup\n```\n\n```text\ngroup-hover\n```\n\n```text\n<main id=\"parent\" class=\"h-screen flex justify-center items-center\nhover:bg-blue-100 pointer-events-none\">\n <div id=\"child\" class=\"bg-red-200 w-96 h-72 flex pointer-events-auto\">\n </div>\n</main>\n```\n\n```text\npointer-events-none\n```\n\n```text\npointer-events-auto\n```\n\n```text\nhover:bg-100\n```\n\n```text\n\"focus-within:bg-indigo-500\"\n```\n\n```text\n<tr \n v-for=\"song of songs\"\n :key=\"song.id\"\n class=\"group/row\"\n>\n <td class=\"group-hover/row:bg-zinc-900\">{{ song.name }}</td>\n</tr>\n```\n\n========================================\n\nComments:\n- Awesome way to hack it. In the other hand it does not seem to work with focus: classes if the parent can't be focused (Use case: style parent when the child is focused)\n- @LoïcV for that you can use `focus-within` on the parent and add a tabindex to the child so it can be focused. play.tailwindcss.com/ujBKWsj3Yo\n- @LoïcV saw your answer after commenting, yes that lol.\n- Can you give some explanation please as to who should get this class? The parent or the child? What does it actually do? How does it work?\n- This apply the style on the child when hovering over the parent element. It does not answer the question, but still awesome though.","metadata":{"transformedAt":"2026-08-18T18:33:42.878Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":107,"estimatedTokens":559}}46{"id":"stack-64974790","source":"stackoverflow","questionId":64974790,"title":"Disable 2xl breakpoint for container class","tags":["nuxt.js","tailwind-css"],"text":"Title: Disable 2xl breakpoint for container class\nTags: nuxt.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nTailwind 2.0.1 has a `2xl` breakpoint set to `1536px`. I would like to disable this breakpoint and set the max `container` width to the `xl` breakpoint. According to the docs, I can disable all responsive variants for the `container`, but I just want to disable this single breakpoint. Instead I have tried to disable the `2xl` breakpoint by updating the Tailwind configuration as follows:\n\n```\nmodule.exports = {\n theme: {\n screens: {\n '2xl': '1280px'\n }\n }\n}\n```\n\nThis does not work, nor do I think this would be correct when I only want to target a single class and a single breakpoint.\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n theme: {\n screens: {\n '2xl': '1280px'\n }\n }\n}\n```\n\n```text\n2xl\n```\n\n```text\n1536px\n```\n\n```text\ncontainer\n```\n\n```text\nxl\n```\n\n```text\ncontainer\n```\n\n```text\n2xl\n```\n\n```text\nmodule.exports = {\n theme: {\n container: {\n screens: {\n 'sm': '640px',\n 'md': '768px',\n 'lg': '1024px',\n 'xl': '1280px',\n }\n }\n }\n}\n```\n\n```text\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nlet containerScreens = Object.assign({}, defaultTheme.screens)\n\n// Delete the 2xl breakpoint from the object\ndelete containerScreens['2xl']\n\nmodule.exports = {\n theme: {\n container: {\n screens: containerScreens\n }\n }\n},\n```\n\n```text\ntheme.container.screens\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.878Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":91,"estimatedTokens":391}}47{"id":"stack-71862913","source":"stackoverflow","questionId":71862913,"title":"How to apply inset to shadow utility?","tags":["css","tailwind-css"],"text":"Title: How to apply inset to shadow utility?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nTailwindCSS Docs talk about `inset box shadow` so briefly that I couldn't find out a way to apply a custom inset box-shadow to an element.\n\nAlso `shadow-inner-[0px_-2px_4px_rgba(0,0,0,0.6)]` does not work.\n\nOnly the default `shadow-inner` works on the element\nIs there a way to apply a *custom `shadow-inner`* to an element?\n\n========================================\n\nCode:\n```text\ninset box shadow\n```\n\n```text\nshadow-inner-[0px_-2px_4px_rgba(0,0,0,0.6)]\n```\n\n```text\nshadow-inner\n```\n\n```text\nshadow-inner\n```\n\n```text\nshadow-[inset_0_-2px_4px_rgba(0,0,0,0.6)]\n```\n\n```text\nbox-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.6)\n```\n\n========================================\n\nComments:\n- one thing to note, make sure there are zero spaces. my setup wasn't working and I realized i had spaces between the commas. once i got rid of them it worked perfectly.","metadata":{"transformedAt":"2026-08-18T18:33:42.878Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":43,"estimatedTokens":239}}48{"id":"stack-70142734","source":"stackoverflow","questionId":70142734,"title":"TailwindCSS, change default border color for dark theme?","tags":["css","user-interface","tailwind-css"],"text":"Title: TailwindCSS, change default border color for dark theme?\nTags: css, user-interface, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using TailwindCSS for my project, I want to set a default border color, for the normal theme I did this via:\n\n```\nmodule.exports = {\n mode: \"jit\",\n purge: [\"{pages,app}/**/*.{jsx,tsx}\", \"node_modules/react-toastify/**\"],\n darkMode: \"media\",\n theme: {\n extend: {\n borderColor: (theme) => ({\n DEFAULT: theme(\"colors.gray.100\"), // Light theme default border color\n dark: {\n DEFAULT: theme(\"colors.gray.800\"), // Dark theme default border color NOT WORKING\n },\n }),\n // ...\n}\n```\n\nFor the light theme, it is working fine, however, for the dark theme, I cannot seem to find a way to apply a default value, any ideas of how to make this work?\n\nThanks a lot!\n\n========================================\n\nTop Answer:\nSimply use\n\n```\n@layer base {\n *,\n ::before,\n ::after {\n @apply dark:border-gray-600;\n }\n}\n```\n\nBecause Tailwind implements `border-color` by default. It works!\n\n**Edit**\n\nIf you use `preflight: false`, `@layer base` probably won't work. Try removing `@layer base` block and use it directly.\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n mode: \"jit\",\n purge: [\"{pages,app}/**/*.{jsx,tsx}\", \"node_modules/react-toastify/**\"],\n darkMode: \"media\",\n theme: {\n extend: {\n borderColor: (theme) => ({\n DEFAULT: theme(\"colors.gray.100\"), // Light theme default border color\n dark: {\n DEFAULT: theme(\"colors.gray.800\"), // Dark theme default border color NOT WORKING\n },\n }),\n // ...\n}\n```\n\n```text\nconst colors = require(\"tailwindcss/colors\");\n\nmodule.exports = {\n mode: \"jit\",\n darkMode: \"media\",\n content: [\"./src/**/*.{js,jsx}\", \"./public/index.html\"],\n theme: {\n extend: {\n colors: {\n gray: colors.gray,\n light: {\n primary: colors.orange,\n },\n dark: {\n primary: colors.green,\n },\n },\n /* Add any default values here */\n /* borderWidth: {\n DEFAULT: \"4px\",\n },*/\n },\n },\n plugins: [],\n};\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n /* Can directly apply colors : hard coded values for light and dark */\n .bg-color {\n @apply bg-white dark:bg-black;\n }\n\n /* Can use custom color defined in the tailwind.config.css file */\n .bg-text {\n @apply text-light-primary-800 dark:text-dark-primary-500;\n }\n\n /* This is how you apply the border-color for both light and dark mode */\n .border-color {\n @apply border-black dark:border-white;\n }\n}\n```\n\n```text\nimport React from \"react\";\n\nconst DarkMode = () => {\n return (\n <div className=\" min-h-screen min-w-full bg-color\">\n <div className=\"border-color border-4 bg-text font-bold\">\n Hello\n </div>\n </div>\n );\n};\n\nexport default DarkMode;\n```\n\n```text\n.border-color {\n @apply border-gray-100 dark:border-gray-800;\n }\n```\n\n```text\nindex.css\n```\n\n```text\ntailwind.config.js\n```\n\n```css\n@layer components {\n .border,\n .border-r,\n .border-l,\n .border-t,\n .border-b,\n .border-x,\n .border-y {\n @apply dark:border-dark-600;\n }\n}\n```\n\n```text\n@layer base {\n *,\n ::before,\n ::after {\n @apply dark:border-gray-600;\n }\n}\n```\n\n```text\nborder-color\n```\n\n```text\npreflight: false\n```\n\n```text\n@layer base\n```\n\n```text\n@layer base\n```\n\n```text\nconst config = {\n darkMode: ['class'],\n // ...\n theme: {\n extend: {\n colors: {\n 'my-border-color': 'var(--my-border-color)'\n },\n },\n },\n // ...\n}\n```\n\n```text\n@layer base {\n :root {\n --my-border-color: #e9f1fa;\n }\n\n .dark {\n --my-border-color: #192734;\n }\n}\n\n@layer base {\n * {\n @apply border-my-border-color;\n }\n}\n```\n\n```text\nglobals.css\n```\n\n```text\ntailwind.config.ts\n```\n\n```text\nclass\n```\n\n```text\nborder-foobar\n```\n\n```text\nglobals.css\n```\n\n```text\ntailwind.config.ts\n```\n\n```text\nglobals.css\n```\n\n========================================\n\nComments:\n- You have the right way to handle it currently, but there is really no way to set the default for dark mode. Tailwind sets reasonable defaults for light mode, but not dark mode. IE: `` looks fine for light mode, but has too much contrast in dark mode. There should be a way to do what is being asked here, but there isn't yet.\n- I love this method, its simple and it works!","metadata":{"transformedAt":"2026-08-18T18:33:42.878Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":22,"totalLines":256,"estimatedTokens":1103}}49{"id":"stack-66572968","source":"stackoverflow","questionId":66572968,"title":"Design system: styles override using TailwindCSS","tags":["javascript","css","reactjs","tailwind-css"],"text":"Title: Design system: styles override using TailwindCSS\nTags: javascript, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to create a Design System using ReactJS and TailwindCSS.\n\nI created a default `Button` component with basic styling as :\n\n```\nimport React from \"react\";\nimport classNames from \"classnames\";\n\nconst Button = React.forwardRef(\n ({ children, className = \"\", onClick }, ref) => {\n const buttonClasses = classNames(\n className,\n \"w-24 py-3 bg-red-500 text-white font-bold rounded-full\"\n );\n\n const commonProps = {\n className: buttonClasses,\n onClick,\n ref\n };\n\n return React.createElement(\n \"button\",\n { ...commonProps, type: \"button\" },\n children\n );\n }\n);\n\nexport default Button;\n```\n\nI then use the `Button` in my page like:\n\n```\nimport Button from \"../src/components/Button\";\n\nexport default function IndexPage() {\n return (\n \n console.log(\"TODO\")}>Vanilla Button\n \n console.log(\"TODO\")}\n >\n Custom Button\n \n \n );\n}\n```\n\nThis is what is displayed:\n\nhttps://i.sstatic.net/MxCh0.png\n\nSome attributes are overridden like the `background-color` but some aren't (the rest).\n\nThe reason is the classes provided by TailwindCSS are written in an order where `bg-blue-500` is placed after `bg-red-500`, therefore overriding it. On the other hand, the other classes provided in the custom button are written before the classes on the base button, therefore not overriding the styles.\n\nThis behavior is happening with TailwindCSS but might occurs with any other styling approach as far as the class order can produce this scenario.\n\nDo you have any workaround / solution to enable this kind of customisation?\n\nHere is a full CodeSanbox if needed.\n\n========================================\n\nTop Answer:\nArbitrary variants can be used to increase the specificity of the generated selector to allow later classes to always be applied.\n\nIn this scenario, for instance, the `[&&]:py-2` class can be used to overwrite the styles from the `py-3` class. To overwrite this again, just add more ampersands (`&`), e.g. adding the `[&&&]:py-0` class after the previous two classes would remove the vertical padding.\n\nFinally, in special cases, the `!important` modifier can be applied to override nearly anything else. This can be done by adding `!` in front of the class name, e.g. `!py-2`. **Use this sparingly**, as it can make styles difficult to maintain and modify later on.\n\nFor an explanation of why this phenomenon occurs, see the Multiple Same CSS Classes issue.\n\n========================================\n\nCode:\n```js\nimport React from \"react\";\nimport classNames from \"classnames\";\n\nconst Button = React.forwardRef(\n ({ children, className = \"\", onClick }, ref) => {\n const buttonClasses = classNames(\n className,\n \"w-24 py-3 bg-red-500 text-white font-bold rounded-full\"\n );\n\n const commonProps = {\n className: buttonClasses,\n onClick,\n ref\n };\n\n return React.createElement(\n \"button\",\n { ...commonProps, type: \"button\" },\n children\n );\n }\n);\n\nexport default Button;\n```\n\n```js\nimport Button from \"../src/components/Button\";\n\nexport default function IndexPage() {\n return (\n <div>\n <Button onClick={() => console.log(\"TODO\")}>Vanilla Button</Button>\n <div className=\"h-2\" />\n <Button\n className=\"w-6 py-2 bg-blue-500 rounded-sm\"\n onClick={() => console.log(\"TODO\")}\n >\n Custom Button\n </Button>\n </div>\n );\n}\n```\n\n```text\nButton\n```\n\n```text\nButton\n```\n\n```text\nbackground-color\n```\n\n```text\nbg-blue-500\n```\n\n```text\nbg-red-500\n```\n\n```css\n/* main.css */\n\n@layer components {\n .base-button {\n @apply w-24 py-3 bg-red-500 text-white font-bold rounded-full;\n }\n}\n```\n\n```js\n// Button.js\n\nconst Button = React.forwardRef(({ children, className = \"\", onClick }, ref) => {\n const buttonClasses = classNames(\"base-button\", className);\n\n // ...\n);\n```\n\n```text\n@apply\n```\n\n```text\ncomponents\n```\n\n```text\nbase-button\n```\n\n```text\nButton\n```\n\n```text\n.button {\n width: 2rem;\n background-color: red;\n border-radius: 0.25rem;\n}\n```\n\n```text\n!important\n```\n\n```text\nw-6\n```\n\n```text\nw-24\n```\n\n```text\nw-24\n```\n\n```text\nw-6\n```\n\n```text\n!important\n```\n\n```text\nexport function classNames(...classes: (false | null | undefined | string)[]) {\n return classes.filter(Boolean).join(\" \");\n}\n```\n\n```text\nmodule.exports = {\n important: true\n}\n```\n\n```text\n!important\n```\n\n```text\nmodule.exports\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nimport { twMerge } from 'tailwind-merge'\n\ntwMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')\n// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'\n```\n\n```text\n[&&]:py-2\n```\n\n```text\npy-3\n```\n\n```text\n&\n```\n\n```text\n[&&&]:py-0\n```\n\n```text\n!important\n```\n\n```text\n!\n```\n\n```text\n!py-2\n```\n\n```css\n-:w-24 -:py-3 -:bg-red-500 -:text-white -:font-bold -:rounded-full\n```\n\n```text\ntw-merge\n```\n\n========================================\n\nComments:\n- Thank you for you quick answer. Indeed I know that the problem is linked to the CSS precedence, that is what I am also explaining in the question itself. Thank you anyway for the effort.\n- @Florian_L Sorry, I didn't read your whole question and thought I knew it all. Updated my answer.\n- yes I know how to solve this ordering issue with a regular css approach. However, when using tailwindcss.com, as an utility first framework, you are not the one writing the CSS but more composing your style using the defined classes. Want I want to know is if there is any option for me accomplishing what I with TailwindCSS using at 100%.\n- @Florian_L I don't think you can have base styles just using Tailwind. Check out the docs on that subject: tailwindcss.com/docs/adding-base-styles They recommend using their Preflight style sheet for that.\n- Yes I agree. The way to go was to use tailwindcss.com/docs/extracting-components\n- Thank I found the use of @apply in the doc this morning but didn't had the time to try it out until now. Your answer is confirming that is should be the right way to handle this. Testing it right away.\n- Confirming that it is working as expected and seems the right approach to solve this ty.\n- Any way of doing this with Styled Components in a Next app? Tried using the directive from within the parent styled component and it doesn't do anything\n- The classNames package on npm already does this and is being used in the original post.\n- This has an effect for my context: a browser extension that dynamically injects new HTML+tailwind onto webpages. For many webpage's, their original CSS (like Bootstrap) was overriding much of the core Tailwind classes. This solution seems to fix some problematic webpage instances. Still though, some webpage's custom classes are *not* being overridden by TW core classes =(.\n- This is max dope. Now we can control specificity just by adding more &s!","metadata":{"transformedAt":"2026-08-18T18:33:42.878Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":35,"totalLines":300,"estimatedTokens":1714}}50{"id":"stack-60989191","source":"stackoverflow","questionId":60989191,"title":"PurgeCSS whitelist patterns with TailwindCSS","tags":["css","tailwind-css","css-purge"],"text":"Title: PurgeCSS whitelist patterns with TailwindCSS\nTags: css, tailwind-css, css-purge\nSource: Stack Overflow\n\nQuestion:\nI am trying to preserve all TailwindCSS colour classes (i.e bg-green, bg-red, text-green, text-red) when it is processed via PurgeCSS. These colour classes are set in the CMS rather than code so we cannot search the code for them as they don't (all) exist here.\n\nTherefore I want to use the whitelisting feature of PurgeCSS to retain all classes that beging with 'bg-' or 'text-'. However, the pattern I have below doesn't seem to be doing the trick? Any ideas how to tweak it?\n\n```\nwhitelistPatterns: ['^bg\\-', '^text\\-'],\n```\n\n========================================\n\nTop Answer:\nIf you run newer versions of tailwind: **whitelist** and **whitelistPatterns** merged into **safelist**. This info cost me a day of research.\n\n```\npurge: {\n options: {\n safelist: [\"bg-red-50\"],\n },\n // ... or even\n options: {\n safelist: [/^bg-/, /^text-/]\n },\n\n}\n```\n\n========================================\n\nCode:\n```text\nwhitelistPatterns: ['^bg\\-', '^text\\-'],\n```\n\n```text\nwhitelistPatterns: [/^bg-/, /^text-/], // Retain all classes starting with...\n```\n\n```text\nwhitelistPatterns: [/\\-blue\\-/],\nwhitelistPatterns: [/\\-pink\\-/],\n...etc\n```\n\n```text\n.xl\\:hover\\:bg-pink-900:hover\n```\n\n```text\n.xl\\:bg-cover\n```\n\n```text\npurge: {\n options: {\n safelist: [\"whitelisted\"],\n },\n // ...\n}\n```\n\n```text\npurge: {\n options: {\n safelist: [\"bg-red-50\"],\n },\n // ... or even\n options: {\n safelist: [/^bg-/, /^text-/]\n },\n\n}\n```\n\n```text\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}',\n ],\n safelist: [\n 'text-2xl',\n 'text-3xl',\n {\n pattern: /bg-(red|green|blue)-(100|200|300)/,\n variants: ['lg', 'hover', 'focus', 'lg:hover'],\n },\n ],\n // ...\n}\n```\n\n```text\nmodule.exports = {\n // ...\n safelist: [\n {\n pattern: /bg-+/\n },\n {\n pattern: /text-+/\n },\n ],\n // ...\n```\n\n========================================\n\nComments:\n- I too wasted a day on this, but with react-bootstrap\n- is there a way to adjust this pattern to include ALL colours, rather than specifying individually?\n- @dungey_140 this answer should help: stackoverflow.com/a/73936087/12440036\n- What about pseudo selectors? For example \"hover:border-t-${color}\"?","metadata":{"transformedAt":"2026-08-18T18:33:42.878Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":117,"estimatedTokens":582}}51{"id":"stack-65097746","source":"stackoverflow","questionId":65097746,"title":"SVG color fill on hover using Tailwind","tags":["html","css","svg","tailwind-css"],"text":"Title: SVG color fill on hover using Tailwind\nTags: html, css, svg, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've been trying to get my svg to fill in with black on hover but can't seem to do it.\n\nI want it to have black outline like this\nhttps://i.sstatic.net/LXHth.png.\n\nAnd then fill like this https://i.sstatic.net/zNdtG.png.\n\nThis is the code I would expect to work to fill it in on hover. However, it doesn't quite work. If I take the `hover:` off of `hover:fill-current` then it just fills in black the whole time.\n\n```\n\n \n\n```\n\nAny ideas?\n\n========================================\n\nTop Answer:\n### Styling based on parent state\n\nYou can use `group` modifier if you can/want to rely on parent state. Add `\"group\"` to parent element class and `\"group-hover:fill-black\"` to svg class.\n\n```\n\n \n \n \n Hello color\n\n```\n\nIn above example there is a div with icon and text. On div hover icon fills with black and text change color to orange (amber-500).\n\n========================================\n\nCode:\n```text\n<svg class=\"h-6 w-6 text-black hover:fill-current\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"\n stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n</svg>\n```\n\n```text\nhover:\n```\n\n```text\nhover:fill-current\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n },\n },\n variants: {\n fill: ['hover', 'focus'], // this line does the trick\n },\n plugins: [],\n}\n```\n\n```text\n<svg class=\"h-6 w-6 text-black hover:fill-current hover:text-black\" ... />\n</svg>\n```\n\n```text\n:hover\n```\n\n```text\nfill-current\n```\n\n```html\n<div class=\"group text-black\">\n <svg class=\"h-6 w-6 group-hover:fill-black\" \n xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"\n stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00- \n 7-7z\" />\n </svg>\n <p class=\"group-hover:text-amber-500\">Hello color</p>\n</div>\n```\n\n```text\ngroup\n```\n\n```text\n\"group\"\n```\n\n```text\n\"group-hover:fill-black\"\n```\n\n```text\n<svg> \n <path \n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"/> \n </svg>\n```\n\n========================================\n\nComments:\n- its working my code.. `variants: { fill: ['hover', 'focus'], // this line does the trick },`","metadata":{"transformedAt":"2026-08-18T18:33:42.879Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":122,"estimatedTokens":620}}52{"id":"stack-67133460","source":"stackoverflow","questionId":67133460,"title":"How to make a triangle shape with Tailwind?","tags":["css","tailwind-css","css-shapes"],"text":"Title: How to make a triangle shape with Tailwind?\nTags: css, tailwind-css, css-shapes\nSource: Stack Overflow\n\nQuestion:\n```\n\n \n \n \n\n```\n\nhow to make a triangle with tailwindCss without plugin ??\n\n========================================\n\nTop Answer:\nYou can also try using borders\n\ntailwind playground\n\n```\n\n```\n\n========================================\n\nCode:\n```text\n<div class=\"\">\n <div class=\"w-16 h-16 border-b-30 border-l-30 border-solid border-black\">\n <div class=\"h-16 w-16 border-t-30 border-r-30 bg-transparent\"></div>\n </div>\n</div>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n<div class=\"w-16 overflow-hidden inline-block\">\n <div class=\" h-11 w-11 bg-black rotate-45 transform origin-bottom-left\"></div>\n</div>\n\n<div class=\"w-16 overflow-hidden inline-block\">\n <div class=\" h-11 w-11 bg-black -rotate-45 transform origin-top-left\"></div>\n</div>\n\n<div class=\"w-11 overflow-hidden inline-block\">\n <div class=\" h-16 bg-black -rotate-45 transform origin-top-right\"></div>\n</div>\n\n<div class=\"w-11 overflow-hidden inline-block\">\n <div class=\" h-16 bg-black rotate-45 transform origin-top-left\"></div>\n</div>\n\n<div class=\"w-11 overflow-hidden inline-block\">\n <div class=\" h-16 bg-black -rotate-45 transform origin-bottom-right\"></div>\n</div>\n\n<div class=\"w-11 overflow-hidden inline-block\">\n <div class=\" h-16 bg-black rotate-45 transform origin-bottom-left\"></div>\n</div>\n\n<div class=\"w-11 overflow-hidden inline-block\">\n <div class=\" h-16 bg-black -rotate-45 transform origin-top-left\"></div>\n</div>\n\n<div class=\"w-11 overflow-hidden inline-block\">\n <div class=\" h-16 bg-black rotate-45 transform origin-top-right\"></div>\n</div>\n```\n\n```text\n<!-- down -->\n<div class=\"border-solid border-t-black border-t-8 border-x-transparent border-x-8 border-b-0\"></div>\n<!-- up -->\n<div class=\"border-solid border-b-black border-b-8 border-x-transparent border-x-8 border-t-0\"></div>\n<!-- left -->\n<div class=\"border-solid border-r-black border-r-8 border-y-transparent border-y-8 border-l-0\"></div>\n<!-- right -->\n<div class=\"border-solid border-l-black border-l-8 border-y-transparent border-y-8 border-r-0\"></div>\n```\n\n```html\n<div class=\"group relative mt-4 ml-4 inline-block\">\n <button type=\"button\" class=\"rounded-md border border-neutral-600 px-1\">...</button>\n\n <!-- container for triangle and the menu ↓-->\n <div class=\"invisible absolute left-0 -mt-[2px] flex flex-col group-focus-within:visible group-active:visible\">\n <div class=\"ml-2 -mb-[1px] inline-block overflow-hidden\"> <!-- ← triangle container -->\n <!-- triangle ↓ -->\n <div class=\"h-3 w-3 origin-bottom-left rotate-45 transform border border-neutral-500 bg-neutral-100\"></div>\n </div>\n\n <!-- menu ↓ -->\n <div class=\"flex min-w-max flex-col rounded-md border border-neutral-500 bg-neutral-100 px-2 py-1\">\n <div class=\"cursor-pointer hover:underline\">Do amazing stuff</div>\n <div class=\"cursor-pointer hover:underline\">Go back</div>\n </div>\n </div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<div>small triangle:</div>\n<div class=\"flex gap-x-1\">\n <div class=\"before:content-['▴']\"></div>\n <div class=\"before:content-['▾']\"></div>\n <div class=\"before:content-['◂']\"></div>\n <div class=\"before:content-['▸']\"></div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div>normal triangle:</div>\n<div class=\"flex gap-x-1\">\n <div class=\"before:content-['▲']\"></div>\n <div class=\"before:content-['▼']\"></div>\n <div class=\"before:content-['◀']\"></div>\n <div class=\"before:content-['▶']\"></div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<div>triangle by border</div>\n<div class=\"flex gap-x-3\">\n <div class=\"w-0 h-0 border-8 border-solid border-transparent border-b-black\"></div>\n <div class=\"w-0 h-0 border-8 border-solid border-transparent border-t-black\"></div>\n <div class=\"w-0 h-0 border-8 border-solid border-transparent border-r-black\"></div>\n <div class=\"w-0 h-0 border-8 border-solid border-transparent border-l-black\"></div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div>triangle by border (simplify)</div>\n<style type=\"text/tailwindcss\">\n @layer components { .triangle { @apply w-0 h-0 border-8 border-solid border-transparent } }\n</style>\n<div class=\"flex gap-x-3\">\n <div class=\"triangle border-b-black\"></div>\n <div class=\"triangle border-t-black\"></div>\n <div class=\"triangle border-r-black\"></div>\n <div class=\"triangle border-l-black\"></div>\n</div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.879Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":151,"estimatedTokens":1154}}53{"id":"stack-53620422","source":"stackoverflow","questionId":53620422,"title":"TailwindCSS: SVG icon won't resize properly","tags":["html","css","svg","tailwind-css"],"text":"Title: TailwindCSS: SVG icon won't resize properly\nTags: html, css, svg, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have been trying to resize the icon in this example.\n\n\r\n\r\n\n```\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n Some demo text\r\n \r\n \r\n\n```\n\n\r\n\r\n\r\n\nBut, whatever I try I can't get the svg to resize. What am I doing wrong?\n\n========================================\n\nTop Answer:\n### Changing SVG width and height in TailwindCSS\n\nAdam Wathan (TailwindCSS creator) solution for working with SVGs is presented in a video here. His solution is as follows:\n\n### Steps to change SVG element\n\n- Remove width and height attributes\n\n- Add TailwindCSS width and height classes\n\n### Example of SVG in question\n\nI've taken the SVG in the question and paired it down to just the SVG and abbreviated the path. Then making the above changes.\n\nBefore\n\n```\n \n \n\n```\n\nAfter\n\n```\n\n \n\n```\n\nHe doesn't mention the viewbox other than to say it's easier if you keep it square.\n\n========================================\n\nCode:\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css\" rel=\"stylesheet\"/>\n<div class=\"bg-indigo-dark\">\n <div class=\"flex text-grey-lighter\">\n <svg class=\"flex-no-shrink fill-current\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 100 100\" width=\"100px\" height=\"100px\">\n <path d=\"M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z\"/>\n </svg>\n <div class=\"leading-normal\">\n Some demo text\n </div>\n </div>\n</div>\n```\n\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div class=\"bg-indigo-dark\">\n <div class=\"flex text-grey-lighter\">\n\n <svg \n class=\"flex-no-shrink fill-current\" \n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 80 80\" \n width=\"100px\" \n height=\"100px\"\n >\n <path d=\"M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z\"/>\n </svg>\n\n <div class=\"leading-normal\">\n Some demo text\n </div>\n </div>\n</div>\n```\n\n```text\nviewBox\n```\n\n```text\n<svg class=\"flex-no-shrink fill-current\" fill=\"none\" xmlns=\n\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" width=\"50px\" height=\"50px\">\n```\n\n```text\nwidth\n```\n\n```text\nheight\n```\n\n```js\nfunction changeHandler(event){\n var svg = document.getElementById('svg');\n svg.setAttribute(\"width\", event.target.value + 'px');\n svg.setAttribute(\"height\", event.target.value + 'px');\n}\n```\n\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css\" rel=\"stylesheet\" />\n<input type=\"number\" value=\"20\" onchange=\"changeHandler(event)\" />\n<div class=\"bg-indigo-dark\">\n <div class=\"flex text-grey-lighter\">\n <svg id=\"svg\" class=\"flex-no-shrink fill-current\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" width=\"20px\" height=\"20px\">\n <path d=\"M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z\"/>\n </svg>\n <div class=\"leading-normal\">\n Some demo text\n </div>\n </div>\n\n</div>\n```\n\n```html\n<svg class=\"flex-no-shrink fill-current\"\n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 100 100\"\n width=\"100px\" height=\"100px\"> <!-- 1. Remove width and height attributes -->\n <path d=\"M5 5a5 5 0 0 1 10 0v2A5...\"/>\n</svg>\n```\n\n```html\n<!-- \\/---- 2. Add tailwindcss width and height classes -->\n<svg class=\"h-4 w-4 flex-no-shrink fill-current\"\n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 100 100\">\n <path d=\"M5 5a5 5 0 0 1 10 0v2A5...\"/>\n</svg>\n```\n\n========================================\n\nComments:\n- There's width and height attributes on the svg element. You can change those...\n- Yeah but still something looks wrong. When I change it to for example width=\"200px\" height=\"200px\" the svg becomes bigger but I also see a large padding on the bottom and to the right. Where does that come from?\n- @sanders I see what you mean. It's something to do with the SVG, because when I try a jpg, that doesn't happen.\n- @sanders I had better luck when I changed the `viewBox`, `width`, `height`settings while also applying a `scale()` to the path in the SVG:\n- It's now flex-shrink-0 github.com/tailwindlabs/tailwindcss.com/pull/85","metadata":{"transformedAt":"2026-08-18T18:33:42.879Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":176,"estimatedTokens":1095}}54{"id":"stack-61104498","source":"stackoverflow","questionId":61104498,"title":"TypeError: Invalid PostCSS Plugin found at: plugins[0]","tags":["next.js","postcss","tailwind-css"],"text":"Title: TypeError: Invalid PostCSS Plugin found at: plugins[0]\nTags: next.js, postcss, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI cloned this repo https://github.com/tailwindcss/setup-examples/tree/master/examples/nextjs then I updated `tailwind.config.js`\n\n```\ntheme: {\n extend: {\n color: {\n primary: \"#730000\",\n secondry: \"#efefef\",\n },\n },\n },\n variants: {},\n plugins: [],\n};\n```\n\nthen run the command `postcss css/tailwind.css -o generated.css`\nterminal throws an error `TypeError: Invalid PostCSS Plugin found at: plugins[0]`\ncan anyone please help me to fix it. Thank you.\n\n========================================\n\nTop Answer:\n### Same error, possibly different issue as OP\n\nI had this issue when attempting to install Storybook alongside Tailwind and Nextjs. I was able to fix the error after adding `\"tailwindcss\": {},` to my `postcss.config.js`.\n\nTo be clear, I have not and did not experience this issue as you did, without attempting to add storybook to the workflow.\n\n### My solution's working configuration files\n\nBelow are working configurations for postcss, tailwind, storybook, using defaults for Nextjs. I am using the standard `create-next-app` workflow and based on the `--example with-storybook`.\n\nIn particular, all of the files below are placed in my project root directory and I used storybook >= 6.0.0.\n\n⚠️ See Next.js documentation, *near the bottom in a note section*, which highlights the need for object syntax in configuration files when adding non-Next.js tools, such as storybook.\n\n`postcss.config.js`\n\n```\nmodule.exports = {\n plugins: {\n \"tailwindcss\": {},\n 'postcss-flexbugs-fixes': {},\n 'postcss-preset-env': {\n autoprefixer: {\n flexbox: 'no-2009',\n },\n stage: 3,\n features: {\n 'custom-properties': false,\n },\n },\n },\n}\n```\n\n`tailwind.config.js`\n\n```\nmodule.exports = {\n future: {\n removeDeprecatedGapUtilities: true,\n purgeLayersByDefault: true\n },\n purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {\n colors: {\n 'accent-1': '#333',\n },\n },\n },\n}\n```\n\n`.storybook/main.js`\n\n```\nmodule.exports = {\n stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'],\n addons: ['@storybook/addon-actions', '@storybook/addon-links'],\n}\n```\n\n`.storybook/preview.js`\n\n```\nimport '../styles/index.css';\n```\n\nwhere `index.css` is as instructed via the Tailwindcss docs.\n\n========================================\n\nCode:\n```text\ntheme: {\n extend: {\n color: {\n primary: \"#730000\",\n secondry: \"#efefef\",\n },\n },\n },\n variants: {},\n plugins: [],\n};\n```\n\n```text\ntailwind.config.js\n```\n\n```text\npostcss css/tailwind.css -o generated.css\n```\n\n```text\nTypeError: Invalid PostCSS Plugin found at: plugins[0]\n```\n\n```text\nmodule.exports = {\n plugins: [\n \"postcss-import\",\n \"tailwindcss\",\n \"autoprefixer\",\n ]\n};\n```\n\n```text\nmodule.exports = {\n plugins: [\n require(\"postcss-import\"),\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ]\n};\n```\n\n```js\nmodule.exports = {\n plugins: {\n \"tailwindcss\": {},\n 'postcss-flexbugs-fixes': {},\n 'postcss-preset-env': {\n autoprefixer: {\n flexbox: 'no-2009',\n },\n stage: 3,\n features: {\n 'custom-properties': false,\n },\n },\n },\n}\n```\n\n```js\nmodule.exports = {\n future: {\n removeDeprecatedGapUtilities: true,\n purgeLayersByDefault: true\n },\n purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {\n colors: {\n 'accent-1': '#333',\n },\n },\n },\n}\n```\n\n```js\nmodule.exports = {\n stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'],\n addons: ['@storybook/addon-actions', '@storybook/addon-links'],\n}\n```\n\n```js\nimport '../styles/index.css';\n```\n\n```text\n\"tailwindcss\": {},\n```\n\n```text\npostcss.config.js\n```\n\n```text\ncreate-next-app\n```\n\n```text\n--example with-storybook\n```\n\n```text\npostcss.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n.storybook/main.js\n```\n\n```text\n.storybook/preview.js\n```\n\n```text\nindex.css\n```\n\n```sh\nnpm i postcss-cli@latest\n\nnpm i tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\n```js\nmodule.exports = {\n plugins: [\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ],\n};\n```\n\n```text\nmodule.exports = {\n plugins: [\n require(\"postcss-import\"),\n require(\"tailwindcss\"),\n require('autoprefixer'),\n require('cssnano')({\n preset: 'default',\n }),\n ],\n}\n```\n\n```text\nrequire(\"postcss-import\")\n```\n\n```text\npostcss.config.js\n```\n\n```text\nnpm i postcss-cli@latest autoprefixer@latest\n```\n\n```text\npostcss.config.js\n```\n\n========================================\n\nComments:\n- did you find any solution?\n- No, then I switched to another solution if you want I can create a quick repo for u. Still, there is a problem compiler does not watch the changes.\n- hey, i guess i found the solution, could you please update the question and also provide your `postcss.config.js` file content?\n- could u please you solution?\n- of course, ill write it as answer\n- this works for me, but then production build has all the CSS approximately 60000 lines\n- yes, to solve it you must use `purge css`, it documented well here Tailwind-Nextjs-PurgeCSS","metadata":{"transformedAt":"2026-08-18T18:33:42.879Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":26,"totalLines":283,"estimatedTokens":1296}}55{"id":"stack-72353450","source":"stackoverflow","questionId":72353450,"title":"How can I disable the ring shadow with TailwindCSS?","tags":["css","reactjs","material-ui","tailwind-css","input-field"],"text":"Title: How can I disable the ring shadow with TailwindCSS?\nTags: css, reactjs, material-ui, tailwind-css, input-field\nSource: Stack Overflow\n\nQuestion:\nThis is how my problem looks like (see the ring) :\n\nView Image\n\nUsing the Chrome's inspector found that it is related to `--tw-ring-shadow`.\nSo I tried adding classes like `ring-0` and `ring-offset-0` (as you can see below) but it didn't work!!\n\n```\nimport { TextField } from \"@mui/material\";\n \n \n function ContactForm(): JSX.Element {\n return (\n \n \n \n \n \n );\n }\n \n export default ContactForm;\n```\n\nDo you have any idea for how can I get rid of this annoying border that overlaps the input field??\n\nI'd appreciate your help!\n\n========================================\n\nTop Answer:\nTry adding focus: before your classes like this:\n\n```\n\n```\n\nThis change makes sure that the styles 'ring-offset-0' and 'ring-0' are applied when you click on the input field.\n\n========================================\n\nCode:\n```text\nimport { TextField } from \"@mui/material\";\n \n \n function ContactForm(): JSX.Element {\n return (\n <div className=\"form-container pt-12 flex flex-col items-center\">\n <div className=\"input-row\">\n <TextField\n className=\"ring-offset-0 ring-0\"\n label=\"First Name\"\n variant=\"outlined\"\n />\n </div>\n </div>\n );\n }\n \n export default ContactForm;\n```\n\n```text\n--tw-ring-shadow\n```\n\n```text\nring-0\n```\n\n```text\nring-offset-0\n```\n\n```css\ninput {\n --tw-ring-shadow: 0 0 #000 !important;\n}\n```\n\n```css\ninput {\n @apply ring-offset-0 ring-0\n}\n```\n\n```text\n<Textfield>\n```\n\n```text\n<input>\n```\n\n```text\n@apply\n```\n\n```text\n<TextField \nclassName=\"focus:ring-offset-0 focus:ring-0\" \nlabel=\"First Name\" \nvariant=\"outlined\" />\n```\n\n========================================\n\nComments:\n- Did you tried to apply `shadow-none`?\n- Hi Levi, I've just tried now. Unfortunately, it didn't work. is there a way to edit via the tailwind.config.js?\n- if I disable --tw-ring-shadow via the inspector it works.. so annoying see here: i.imgur.com/tVObEDa.png\n- It worked! just tried the first solution you suggested. Thank you!","metadata":{"transformedAt":"2026-08-18T18:33:42.879Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":118,"estimatedTokens":545}}56{"id":"stack-70401077","source":"stackoverflow","questionId":70401077,"title":"Rails 7 asset pipeline SassC::SyntaxError with Tailwind","tags":["ruby-on-rails","build","asset-pipeline","tailwind-css","ruby-on-rails-7"],"text":"Title: Rails 7 asset pipeline SassC::SyntaxError with Tailwind\nTags: ruby-on-rails, build, asset-pipeline, tailwind-css, ruby-on-rails-7\nSource: Stack Overflow\n\nQuestion:\nI'm working on getting a new Rails 7 project deployed to production (trying on both Heroku and Render.com) and am getting the following error during build:\n\n```\n$ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css\n\n Done in 408ms.\n Done in 0.90s.\n rake aborted!\n SassC::SyntaxError: Error: Function rgb is missing argument $green.\n on line 428 of stdin\n >> color: rgb(29 78 216 / var(--tw-text-opacity));\n\n ---------^\n stdin:428\n```\n\nThat's what I *think* is the relevant part, but here's a bit more context of the output if it's helpful.\n\n```\nPreparing app for Rails asset pipeline\n Running: rake assets:precompile\n yarn install v1.22.17\n [1/4] Resolving packages...\n [2/4] Fetching packages...\n [3/4] Linking dependencies...\n [4/4] Building fresh packages...\n Done in 5.10s.\n yarn run v1.22.17\n $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds\n \n app/assets/builds/application.js 185.5kb\n app/assets/builds/application.js.map 301.0kb\n \n Done in 0.10s.\n yarn install v1.22.17\n [1/4] Resolving packages...\n success Already up-to-date.\n Done in 0.12s.\n yarn run v1.22.17\n $ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css\n \n Done in 408ms.\n Done in 0.90s.\n rake aborted!\n SassC::SyntaxError: Error: Function rgb is missing argument $green.\n on line 428 of stdin\n >> color: rgb(29 78 216 / var(--tw-text-opacity));\n \n ---------^\n stdin:428\n /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sassc-2.4.0/lib/sassc/engine.rb:50:in `render'\n /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sassc-rails-2.1.2/lib/sassc/rails/compressor.rb:29:in `call'\n /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sprockets-4.0.2/lib/sprockets/sass_compressor.rb:30:in `call'\n /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sprockets-4.0.2/lib/sprockets/processor_utils.rb:84:in `call_processor'\n```\n\nI set up the project using `rails new project_name -j esbuild --css tailwind`. Development mode works fine, just production deployment.\n\nI'm not really sure where to even begin debugging this.\n\n========================================\n\nTop Answer:\nFrom rails tailwind readme\n\nTailwind uses modern CSS features that are not recognized by the sassc-rails extension that was included by default in the Gemfile for Rails 6. In order to avoid any errors like SassC::SyntaxError, you must remove that gem from your Gemfile.\n\nhttps://github.com/rails/tailwindcss-rails\n\n========================================\n\nCode:\n```text\n$ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css\n\n Done in 408ms.\n Done in 0.90s.\n rake aborted!\n SassC::SyntaxError: Error: Function rgb is missing argument $green.\n on line 428 of stdin\n >> color: rgb(29 78 216 / var(--tw-text-opacity));\n\n ---------^\n stdin:428\n```\n\n```text\nPreparing app for Rails asset pipeline\n Running: rake assets:precompile\n yarn install v1.22.17\n [1/4] Resolving packages...\n [2/4] Fetching packages...\n [3/4] Linking dependencies...\n [4/4] Building fresh packages...\n Done in 5.10s.\n yarn run v1.22.17\n $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds\n \n app/assets/builds/application.js 185.5kb\n app/assets/builds/application.js.map 301.0kb\n \n Done in 0.10s.\n yarn install v1.22.17\n [1/4] Resolving packages...\n success Already up-to-date.\n Done in 0.12s.\n yarn run v1.22.17\n $ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css\n \n Done in 408ms.\n Done in 0.90s.\n rake aborted!\n SassC::SyntaxError: Error: Function rgb is missing argument $green.\n on line 428 of stdin\n >> color: rgb(29 78 216 / var(--tw-text-opacity));\n \n ---------^\n stdin:428\n /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sassc-2.4.0/lib/sassc/engine.rb:50:in `render'\n /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sassc-rails-2.1.2/lib/sassc/rails/compressor.rb:29:in `call'\n /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sprockets-4.0.2/lib/sprockets/sass_compressor.rb:30:in `call'\n /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sprockets-4.0.2/lib/sprockets/processor_utils.rb:84:in `call_processor'\n```\n\n```text\nrails new project_name -j esbuild --css tailwind\n```\n\n```text\nconfig.assets.css_compressor = nil\n```\n\n```text\nconfig.assets.css_compressor = nil\n```\n\n```text\nconfig/environments/production.rb\n```\n\n```text\napplication.rb\n```\n\n```text\nsassc-rails\n```\n\n```text\nbundle remove sassc-rails\nrails css:install:sass\n```\n\n```js\n\"scripts\": {\n \"build:css\": \"sass ... && tailwindcss ...\",\n \"build\": \"node ./esbuild.config.js\"\n }\n```\n\n```text\nsassc-rails\n```\n\n```text\npackage.json\n```\n\n```text\n&&\n```\n\n```text\n<%= stylesheet_link_tag \"application\" %>\n```\n\n```text\nlayout/application.html\n```\n\n```text\n//= link_directory ../stylesheets .css\n//= link_tree ../builds\n```\n\n```text\n# config/initializers/dartsass.rb \nRails.application.config.dartsass.builds = {\n \"../sass/application.scss\" => \"application.css\",\n # other files in ../sass\n}\n```\n\n```text\ndartsass-rails\n```\n\n```text\nmanifest.js\n```\n\n```text\napplication.*css\n```\n\n```text\nstylesheets\n```\n\n```text\napp/assets/sass\n```\n\n```rb\n# Required to stop Sprockets attempting to compress Tailwind CSS\n\nrequire \"sprockets/sass_compressor\"\n\nmodule SkipSassCompressionForTailwind\n TAILWIND_SEARCH = \"! tailwindcss\".freeze\n\n def call(input)\n if skip_compression?(input[:data])\n input[:data]\n else\n super\n end\n end\n\n def skip_compression?(body)\n body.include?(TAILWIND_SEARCH)\n end\nend\n\nSprockets::SassCompressor.prepend SkipSassCompressionForTailwind\n```\n\n```text\nSprockets::SassCompressor\n```\n\n```text\nrgb\n```\n\n```text\nRGB\n```\n\n========================================\n\nComments:\n- If I do that, then I get a new error: `LoadError: cannot load such file -- sassc`\n- do you know that there is a gem for sassc?\n- You may have a dependency that depends on sassc. Check your Gemfile.lock\n- I was also getting `LoadError: cannot load such file -- sassc` as well even after setting `config.assets.css_compressor = nil`. The problem was I still had `scaffolds.scss` in my application so Sprockets would still load the `Sprockets::SassCompressor`\n- This has worked for me, thanks - would be lovely to get a bit more info on the answer as to why it works and any drawbacks @VincentBakker :)\n- This works because sassc-rails tries to compress tailwindCSS files, which is not desirable since TailwindCSS is designed to be used without compression. So sassc-rails tries to compress tailwind, and this causes a conflict, and errors. So by disabling css compression, it solves the conflict. However, this means that CSS assets(not tailwind) will not be compressed, resulting in larger CSS files, which could potentially effect performance. I believe the more elegant fix is the gems need to be re-worked to play nicely whether you're using tailwind, or sass/css. But that's easier said than done.\n- That worked for me for `Unable to resolve 'tailwindcss/base' for missing asset 'tailwindcss/base' in application.tailwind.css`\n- This feels the right answer to me - unfortunately, I've a dependency that includes `sassc-rails` so haven't cracked the problem this way yet, but wanted to say a big thanks and +1 on this :)\n- I did the same as you but did not manage to make it work with `--watch` parameter for development environment. Did you create 4 separate scripts (2 for dev and 2 for prod -saas and tailwind)?","metadata":{"transformedAt":"2026-08-18T18:33:42.879Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":26,"totalLines":266,"estimatedTokens":1991}}57{"id":"stack-71715157","source":"stackoverflow","questionId":71715157,"title":"Tailwinds + Ant design : Button color is white but has own color wnen I hover it","tags":["next.js","antd","tailwind-css"],"text":"Title: Tailwinds + Ant design : Button color is white but has own color wnen I hover it\nTags: next.js, antd, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI applied the tailwind CSS and Ant design with my Next.js project.\n\nI found the primary button got a white color.\n\nhttps://i.sstatic.net/Y7319.png\n\nBut it shows own primary button color when the mouse over.\n\nhttps://i.sstatic.net/pbDub.png\n\nglobal.css\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n h1 {\n @apply text-2xl;\n }\n h2 {\n @apply text-xl;\n }\n\n /* ... */\n }\n\n@import '~antd/dist/antd.css';\n```\n\nHome.module.css\n\n```\n.container {\n padding: 0 2rem;\n}\n\n.main {\n min-height: 100vh;\n padding: 4rem 0;\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.footer {\n display: flex;\n flex: 1;\n padding: 2rem 0;\n border-top: 1px solid #eaeaea;\n justify-content: center;\n align-items: center;\n}\n\n.footer a {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n}\n\n.title a {\n color: #0070f3;\n text-decoration: none;\n}\n\n.title a:hover,\n.title a:focus,\n.title a:active {\n text-decoration: underline;\n}\n\n.title {\n margin: 0;\n line-height: 1.15;\n font-size: 4rem;\n}\n\n.title,\n.description {\n text-align: center;\n}\n\n.description {\n margin: 4rem 0;\n line-height: 1.5;\n font-size: 1.5rem;\n}\n\n.code {\n background: #fafafa;\n border-radius: 5px;\n padding: 0.75rem;\n font-size: 1.1rem;\n font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,\n Bitstream Vera Sans Mono, Courier New, monospace;\n}\n\n.grid {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n max-width: 800px;\n}\n\n.card {\n margin: 1rem;\n padding: 1.5rem;\n text-align: left;\n color: inherit;\n text-decoration: none;\n border: 1px solid #eaeaea;\n border-radius: 10px;\n transition: color 0.15s ease, border-color 0.15s ease;\n max-width: 300px;\n}\n\n.card:hover,\n.card:focus,\n.card:active {\n color: #0070f3;\n border-color: #0070f3;\n}\n\n.card h2 {\n margin: 0 0 1rem 0;\n font-size: 1.5rem;\n}\n\n.card p {\n margin: 0;\n font-size: 1.25rem;\n line-height: 1.5;\n}\n\n.logo {\n height: 1em;\n margin-left: 0.5rem;\n}\n\n@media (max-width: 600px) {\n .grid {\n width: 100%;\n flex-direction: column;\n }\n}\n```\n\nJSX code is like the following.\n\n```\nimport * as React from \"react\";\nimport { Button, Table } from \"antd\";\nimport FishbowlLayout from \"../../components/FishbowlLayout\";\n\nexport function Index() {\n \n\n return (\n \n # FishbowlLayout uses Layout from Ant design.\n . \n \n\n # Button\n \n New project\n \n\n # Table\n \n ;\n \n \n\n \n \n );\n}\n\nexport default Index;\n```\n\n========================================\n\nTop Answer:\nI also encounter the question recently, after deeper investigation, I think it is better resolve by **postcss plugin**, So I created the plugin `postcss-antd-fixed`.\n\nIt will add **excluded pseudo class** for button related selectors now from tailwind preflight.css\n\nFor example, Transform the code\n\n```\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button;\n background-color: transparent;\n background-image: none;\n}\n```\n\nto\n\n```\nbutton:where(:not([class^=\"ant\"])),\n[type='button']:where(:not([class^=\"ant\"])),\n[type='reset']:where(:not([class^=\"ant\"])),\n[type='submit']:where(:not( [class^=\"ant\"])) {\n -webkit-appearance: button;\n background-color: transparent;\n background-image: none;\n}\n```\n\nOnline example: https://stackblitz.com/edit/postcss-antd-fixes?file=postcss.config.js\n\nIt make **antd + tailwindcss** works smoothly, at least for me.\n\nMoreover, the plugin support custom `prefixCls` and `hashPriority`, check out type definition about `PluginCreator`\n\n========================================\n\nCode:\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\n@layer base {\n h1 {\n @apply text-2xl;\n }\n h2 {\n @apply text-xl;\n }\n\n /* ... */\n }\n\n\n@import '~antd/dist/antd.css';\n```\n\n```text\n.container {\n padding: 0 2rem;\n}\n\n.main {\n min-height: 100vh;\n padding: 4rem 0;\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.footer {\n display: flex;\n flex: 1;\n padding: 2rem 0;\n border-top: 1px solid #eaeaea;\n justify-content: center;\n align-items: center;\n}\n\n\n\n.footer a {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n}\n\n.title a {\n color: #0070f3;\n text-decoration: none;\n}\n\n.title a:hover,\n.title a:focus,\n.title a:active {\n text-decoration: underline;\n}\n\n.title {\n margin: 0;\n line-height: 1.15;\n font-size: 4rem;\n}\n\n.title,\n.description {\n text-align: center;\n}\n\n.description {\n margin: 4rem 0;\n line-height: 1.5;\n font-size: 1.5rem;\n}\n\n.code {\n background: #fafafa;\n border-radius: 5px;\n padding: 0.75rem;\n font-size: 1.1rem;\n font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,\n Bitstream Vera Sans Mono, Courier New, monospace;\n}\n\n.grid {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n max-width: 800px;\n}\n\n.card {\n margin: 1rem;\n padding: 1.5rem;\n text-align: left;\n color: inherit;\n text-decoration: none;\n border: 1px solid #eaeaea;\n border-radius: 10px;\n transition: color 0.15s ease, border-color 0.15s ease;\n max-width: 300px;\n}\n\n.card:hover,\n.card:focus,\n.card:active {\n color: #0070f3;\n border-color: #0070f3;\n}\n\n.card h2 {\n margin: 0 0 1rem 0;\n font-size: 1.5rem;\n}\n\n.card p {\n margin: 0;\n font-size: 1.25rem;\n line-height: 1.5;\n}\n\n.logo {\n height: 1em;\n margin-left: 0.5rem;\n}\n\n@media (max-width: 600px) {\n .grid {\n width: 100%;\n flex-direction: column;\n }\n}\n```\n\n```text\nimport * as React from \"react\";\nimport { Button, Table } from \"antd\";\nimport FishbowlLayout from \"../../components/FishbowlLayout\";\n\nexport function Index() {\n \n\n return (\n <div>\n # FishbowlLayout uses Layout from Ant design.\n <FishbowlLayout>. \n <div className=\"grid grid-cols-6 gap-4\">\n\n # Button\n <Button className=\"col-end-6 col-span-1 ...\" type=\"primary\">\n New project\n </Button>\n\n # Table\n <div className=\"col-span-5 \">\n <Table dataSource={dataSource} columns={columns} />;\n </div>\n </div>\n\n\n </FishbowlLayout>\n </div>\n );\n}\n\nexport default Index;\n```\n\n```text\ncorePlugins: {\n preflight: false\n}\n```\n\n```css\n.ant-btn:not([disabled]):hover {\n background:#faad14 !important;\n}\n```\n\n```css\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button;\n background-color: transparent;\n background-image: none;\n}\n```\n\n```css\nbutton:where(:not([class^=\"ant\"])),\n[type='button']:where(:not([class^=\"ant\"])),\n[type='reset']:where(:not([class^=\"ant\"])),\n[type='submit']:where(:not( [class^=\"ant\"])) {\n -webkit-appearance: button;\n background-color: transparent;\n background-image: none;\n}\n```\n\n```text\npostcss-antd-fixed\n```\n\n```text\nprefixCls\n```\n\n```text\nhashPriority\n```\n\n```text\nPluginCreator<{ prefixes?: (string | PrefixItem)[] }>\n```\n\n```js\n'use client';\nimport { type PropsWithChildren, useState } from 'react';\nimport { useServerInsertedHTML } from 'next/navigation';\nimport { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';\n\nexport const AntdRootStyleRegistry = ({ children }: PropsWithChildren) => {\n const [cache] = useState(() => createCache());\n\n useServerInsertedHTML(() => {\n return (\n <script\n dangerouslySetInnerHTML={{\n __html: `</script>${extractStyle(cache)}<script>`,\n }}\n />\n );\n });\n\n return (\n <StyleProvider cache={cache} ssrInline hashPriority={'high'}>\n {children}\n </StyleProvider>\n );\n};\n```\n\n```js\nimport { type PropsWithChildren } from 'react';\nimport { ConfigProvider } from 'antd';\nimport { antdThemeConfig } from '@/app/antdThemeConfig'; // it's where you store your Antd theme config\nimport { AntdRootStyleRegistry } from '@/app/[locale]/AntdRootStyle';\n\nexport function AntdProviders({ children }: PropsWithChildren) {\n // see https://stackoverflow.com/questions/75867259/next-js-13-with-ant-design-5-components-and-pages-render-before-styles-load-ca\n return (\n <ConfigProvider theme={antdThemeConfig}>\n <AntdRootStyleRegistry>{children}</AntdRootStyleRegistry>\n </ConfigProvider>\n );\n}\n```\n\n```text\nantd\n```\n\n```text\n<Button type=\"primary\">Click me</Button>\n```\n\n```text\n.ant-btn-primary:not([disabled]) {\n background:#1677ff !important;\n}\n.ant-btn-primary:not([disabled]):hover {\n background:#1f4ce0 !important;\n}\n```\n\n```text\nantd-btn-dangerous\n```\n\n```text\nantd-btn-primary\n```\n\n```text\npreflight: false\n```\n\n========================================\n\nComments:\n- Can you the react code where you're inserting this button component in your page?\n- I added my JSX code too.\n- You can simply use tailwind components from `taiblocks` tailblocks.cc or from `flowbite` flowbite.com/docs/components/buttons\n- The issue is caused by how Tailwind CSS and Ant Design use CSS layers. Instead of using !important or other hacks, you only need to configure the correct layer order, both in Tailwind CSS v4 and Tailwind CSS v3.\n- You should not use camelCase: `preflight: false` and it works fine. Thank you for the tip\n- It will not work if you upgrade an existing project\n- Thanks. It worked for me but it doesn't affect other things?\n- It may help for new projects. But it breaks some default styles of tailwind. And if you implement it on ongoing project you should check all you components.\n- My \"Ok\" button background for date picker from ant-design was transparent because of tailwind base styling; your plugin solved this issue. Thank you so much","metadata":{"transformedAt":"2026-08-18T18:33:42.879Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":544,"estimatedTokens":2417}}58{"id":"stack-75706164","source":"stackoverflow","questionId":75706164,"title":"Problem with Tailwind CSS when using the react-markdown component","tags":["reactjs","tailwind-css","react-markdown"],"text":"Title: Problem with Tailwind CSS when using the react-markdown component\nTags: reactjs, tailwind-css, react-markdown\nSource: Stack Overflow\n\nQuestion:\nThe markdown is not working except for italic and bold. I have figured out that the problem is caused by Tailwind CSS because of how it handles text-size and other styles. If I comment out the `index.css` import (which defines the directives for Tailwind) in my `index.jsx`, all markdown types like heading, code, etc. work fine.\n\n**News.jsx**\n\n```\nimport ReactMarkdown from 'react-markdown';\nimport { useState } from 'react';\n\nfunction News() {\n const [markdown, setMarkdown] = useState('# I am heading');\n \n return (\n \n setMarkdown(e.target.value)} />\n {markdown}\n \n );\n}\n\nexport default News;\n```\n\n`index.css`\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n**index.js**\n\n```\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { BrowserRouter as Router } from \"react-router-dom\";\nimport './index.css'\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n \n \n \n \n \n);\n```\n\n========================================\n\nTop Answer:\nFor any other viewers, i actually had to both...\n\n- install `@tailwindcss/typography` as eric suggested.\n\n- set `# Heading 1` as denis suggested.\n\n========================================\n\nCode:\n```text\nimport ReactMarkdown from 'react-markdown';\nimport { useState } from 'react';\n\nfunction News() {\n const [markdown, setMarkdown] = useState('# I am heading');\n \n return (\n <div>\n <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />\n <ReactMarkdown>{markdown}</ReactMarkdown>\n </div>\n );\n}\n\nexport default News;\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { BrowserRouter as Router } from \"react-router-dom\";\nimport './index.css'\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n <React.StrictMode>\n <Router>\n <App />\n </Router>\n </React.StrictMode>\n);\n```\n\n```text\nindex.css\n```\n\n```text\nindex.jsx\n```\n\n```text\nindex.css\n```\n\n```js\nmodule.exports = {\n theme: {\n // ...\n },\n plugins: [\n require('@tailwindcss/typography'),\n // ...\n ],\n}\n```\n\n```text\n<div class=\"prose lg:prose-xl\">\n {{ markdown }}\n</div>\n```\n\n```text\nnpm install -D @tailwindcss/typography\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nimport { useState } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\n\nconst defaultMd = `# iam heading`;\n\nconst ExampleComponent = () => {\n const [markdownSource, setMarkdownSource] = useState(defaultMd);\n\n const onChange = ({ currentTarget: { value } }) => {\n setMarkdownSource(value);\n };\n\n return (\n <>\n <textarea\n onChange={onChange}\n value={markdownSource}\n className=\"\n font-mono\n overflow-auto\n whitespace-pre\n border-solid\n border\n border-gray-300\n resize\n w-full\n \"\n />\n <ReactMarkdown className=\"prose\">{markdownSource}</ReactMarkdown>\n </>\n );\n};\n\nconst App = () => (\n <div className=\"App\">\n <ExampleComponent />\n </div>\n);\n\nexport default App;\n```\n\n```text\nprose\n```\n\n```text\n@tailwindcss/typography\n```\n\n```text\n<ReactMarkdown className=\"prose\"># Heading 1</ReactMarkdown>\n```\n\n```text\nnpm install -D @tailwindcss/typography\n```\n\n```text\nconst Typography = require(\"@tailwindcss/typography\");\n\nmodule.exports = Typography;\n```\n\n```text\n@plugin \"./typography.js\";\n```\n\n```text\n<div className=\"prose lg:prose-xl\">\n{{ markdown }}\n</div>\n```\n\n```text\nprose lg:prose-xl\n```\n\n========================================\n\nComments:\n- here is a link tailwindcss.com/docs/preflight#headings-are-unstyled\n- you could also import the react-markdown styles in the tailwind.css...\n- @DenisTsoi how?\n- check the answer below - this might help (i.e. `prose` isn't included in Reactmarkdown\n- I get some quite unexplainable gaps in my tables in the mobile version. I'm using next js, would you have any idea why this could be happening?\n- indeed it work, but any explanation or links would be nice to understand deeply.\n- tailwindcss.com/docs/typography-plugin\n- thanks a lot! It works well!\n- Worked for me! Thanks for clear and simple instructions.","metadata":{"transformedAt":"2026-08-18T18:33:42.879Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":236,"estimatedTokens":1101}}59{"id":"stack-66914169","source":"stackoverflow","questionId":66914169,"title":"Can I create a Masonry layout using Tailwind CSS utility classes?","tags":["html","css","tailwind-css"],"text":"Title: Can I create a Masonry layout using Tailwind CSS utility classes?\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to create a Masonry layout using Tailwind CSS utility classes (not plain CSS), but going through all the official Tailwind documentation it seems there is not a way to do it already provided by the framework.\n\nBootstrap 5 allows you to do it but requires JavaScript libraries.\nhttps://getbootstrap.com/docs/5.0/examples/masonry/\n\nIs there a way to do it with Tailwind CSS without using any extra JavaScript library?\n\n========================================\n\nTop Answer:\nIt looks like that only this is required nowadays to do a proper masonry layout without the need to add any libraries:\n\n```\n.container {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: masonry;\n}\n```\n\nSo, you could probably extend Tailwind's capabilities with few grid values.\n\nMore details on this article: https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/\n\nCurrent status of this can be found here: https://drafts.csswg.org/css-grid-3/\n\nWes Bos also do have a free CSS grid course on which, he emulates that kind of behavior with only CSS grid (no `masonry` prop).\n\nEDIT: Masonry is not easy because it depends on what you're looking for exactly but even `columns` can be useful in some cases !\n\n========================================\n\nCode:\n```text\n@layer utilities {\n @variants responsive {\n .masonry-3-col {\n column-count: 3;\n column-gap: 1em;\n }\n .masonry-2-col {\n column-count: 2;\n column-gap: 1em;\n }\n .break-inside {\n break-inside: avoid;\n }\n }\n}\n```\n\n```text\n<div class=\"md:masonry-2-col lg:masonry-3-col box-border mx-auto before:box-inherit after:box-inherit\">\n <div class=\"break-inside p-8 my-6 bg-gray-100 rounded-lg\">\n <p>Really long content</p>\n </div>\n <div class=\"break-inside p-8 my-6 bg-gray-100 rounded-lg\">\n <p>Really long content</p>\n </div>\n <div class=\"break-inside p-8 my-6 bg-gray-100 rounded-lg\">\n <p>Really long content</p>\n </div>\n <div class=\"break-inside p-8 my-6 bg-gray-100 rounded-lg\">\n <p>Really long content</p>\n </div>\n <div class=\"break-inside p-8 my-6 bg-gray-100 rounded-lg\">\n <p>Really long content</p>\n </div>\n</div>\n```\n\n```html\n<div class=\"relative flex min-h-screen flex-col justify-center py-6 sm:py-12\">\n <div\n class=\"columns-2 2xl:columns-3 gap-10 [column-fill:_balance] box-border mx-auto before:box-inherit after:box-inherit\">\n <div class=\"break-inside-avoid p-8 mb-6 bg-gray-100 rounded-lg\">\n <p>Really long content</p>\n </div>\n <div class=\"break-inside-avoid p-8 mb-6 bg-gray-100 rounded-lg\">\n <p>Really long content</p>\n <p>Really long content</p>\n <p>Really long content</p>\n <p>Really long content</p>\n </div>\n <div class=\"break-inside-avoid p-8 mb-6 bg-gray-100 rounded-lg\">\n <p>Really long content</p>\n <p>Really long content</p>\n </div>\n <div class=\"break-inside-avoid p-8 mb-6 bg-gray-100 rounded-lg\">\n <p>Really long content</p>\n <p>Really long content</p>\n <p>Really long content</p>\n <p>Really long content</p>\n <p>Really long content</p>\n </div>\n <div class=\"break-inside-avoid p-8 mb-6 bg-gray-100 rounded-lg\">\n <p>Really long content</p>\n <p>Really long content</p>\n <p>Really long content</p>\n </div>\n</div>\n</div>\n```\n\n```css\n.container {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: masonry;\n}\n```\n\n```text\nmasonry\n```\n\n```text\ncolumns\n```\n\n========================================\n\nComments:\n- This post is being discussed on Meta.\n- The solution you provided below using Tailwind doesn't seem to be novel/unique to Tailwind, but rather using generic CSS classes with a custom mixin so that you can just say you're \"using Tailwind\". I'm voting to close this again as a duplicate of the appropriate questions. Feel free to provide that solution on the canonical target instead, if you think others might find a custom Tailwind mixin useful.\n- Thank you for your answer! Very interesting approach. I found also another strategy using css that is a little different and I'm working on it now. I will it here later\n- Will be glad to see what this one is ! :3 Btw, I've edited my answer to incorporate `columns`, another neat CSS property that may be useful.\n- \"grid-template-rows: masonry\" is not a valid property. It does not work\n- @MatthewC more details on MDN.\n- @kissu `grid-template-rows` is widely supported, but the `masonry` value is basically completely unsupported right now.\n- The problem with this is if you are trying to show items in date order, you will get all your latest items in the left column, and then older items at the top of the page in columns 2 and 3. It's a nice idea but just doesn't work in reality.\n- I'll suggest instead using my-6 on blocks, mb-6 will make more sense to line them up more precisely togethor\n- @YodasMyDad It works in reality, just not for ordering by dates.\n- Here is a playground of masonry grid with Tailwind v3: play.tailwindcss.com/waaDDm3Gg6","metadata":{"transformedAt":"2026-08-18T18:33:42.879Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":139,"estimatedTokens":1309}}60{"id":"stack-68661059","source":"stackoverflow","questionId":68661059,"title":"TailwindCC: no-underline class does not work for my tag?","tags":["html","css","tailwind-css"],"text":"Title: TailwindCC: no-underline class does not work for my tag?\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to avoid having underlines under my `` tags. I have added the class `\"no-underline\"` as per the docs but I'm still getting the underlines under my links? I have added the code im using below:\n\n```\n\n \n {% for tag in tags %}\n \n {{ tag }}\n \n {% empty %} No tags yet {% endfor %}\n \n\nThanks for the help!\n```\n\n========================================\n\nCode:\n```text\n<div\n class=\"\n my-3\n flex flex-wrap\n -m-1\n text-center\n justify-center\n items-center\n no-underline\n \"\n>\n <div class=\"m-auto\">\n {% for tag in tags %}\n <a\n href=\"{% routablepageurl blog_page 'post_by_tag' tag.slug %}\"\n class=\"no-underline\"\n >\n <span\n class=\"\n font-mono\n m-1\n bg-gray-200\n hover:bg-gray-300\n rounded-full\n px-2\n py-1\n font-bold\n text-sm\n leading-loose\n cursor-pointer\n shadow-lg\n no-underline\n \"\n >{{ tag }}</span\n >\n </a>\n {% empty %} No tags yet {% endfor %}\n </div>\n</div>\n\nThanks for the help!\n```\n\n```text\n<a>\n```\n\n```text\n\"no-underline\"\n```\n\n```text\n<div class=\"m-auto\">\n```\n\n```text\nstyle=\"text-decoration: none !important;\"\n```\n\n```text\nno-underline\n```\n\n```text\nunderline\n```\n\n========================================\n\nComments:\n- What is the stylesheet for that class? Typically it's `text-decoration: none;`\n- Another observation is your class has so many classes and `hover:bg-gray-300` this isn't a class\n- @Bharat, I am using tailwindCSS, the classes you mentioned are built-in with the naming convention that I am using.\n- Ahh I get it. Thank you\n- I added `style=\"text-decoration: none !important;\"` to my a tag, thanks for helping me out here.","metadata":{"transformedAt":"2026-08-18T18:33:42.879Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":99,"estimatedTokens":468}}61{"id":"stack-66396425","source":"stackoverflow","questionId":66396425,"title":"Create top-down slide animation using `Transition` from `@headlessui/react` using Tailwind CSS","tags":["javascript","html","reactjs","tailwind-css"],"text":"Title: Create top-down slide animation using `Transition` from `@headlessui/react` using Tailwind CSS\nTags: javascript, html, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to create the following effect:\n\nCurrently, I have this weird effect:\n\nI am using Transition from `@headlessui/react`.\n\nMy code looks like:\n\n```\n\n```\n\nHow do I achieve it?\n\n========================================\n\nTop Answer:\nI know this is some time ago but i managed to do something like the wanted behavior. I wrapped a Disclosure.Panel element in Transition:\n\n```\n\n```\n\nIf your content is taller than max-h-96 (height: 24rem; /* 384px */). You will have to customise the tailwind config to include a higher max-h.\n\nYou can also use max-h-['number'px] like so:\n\n```\n\n```\n\nShow the animation, horrible quality\n\n========================================\n\nCode:\n```text\n<Transition\n show={app.theme !== 'light'}\n enter=\"transition ease duration-700 transform\"\n enterFrom=\"opacity-0 -translate-y-full\"\n enterTo=\"opacity-100 translate-y-0\"\n leave=\"transition ease duration-1000 transform\"\n leaveFrom=\"opacity-100 translate-y-0\"\n leaveTo=\"opacity-0 -translate-y-full\"\n>\n```\n\n```text\n@headlessui/react\n```\n\n```text\n{theme.type !== \"light\" && theme.color !== null && (\n <div\n className={`mt-4 mx-2 flex items-center space-x-2 transition-all ease-out duration-700 h-10 ${\n isDarkTheme ? \"opacity-100\" : \"opacity-0\"\n }`}\n >\n <label className=\"flex items-center justify-between w-1/2 h-full px-4 py-6 text-lg font-medium leading-4 text-gray-400 border-2 border-gray-800 bg-gray-800 rounded-md cursor-pointer\">\n <span>Dim</span>\n <input\n type=\"radio\"\n name=\"darkOption\"\n className=\"w-4 h-4\"\n value=\"dim\"\n checked={theme.color === \"dim\"}\n onChange={() => {\n updateTheme({\n color: \"dim\",\n })\n }}\n />\n </label>\n <label className=\"flex items-center justify-between w-1/2 h-full px-4 py-6 text-lg font-medium leading-4 text-gray-400 border-2 border-gray-800 rounded-md cursor-pointer bg-black\">\n <span>Lights Out</span>\n <input\n type=\"radio\"\n name=\"darkOption\"\n className=\"w-4 h-4\"\n value=\"lights-out\"\n checked={theme.color === \"lights-out\"}\n onChange={() => {\n updateTheme({\n color: \"lights-out\",\n })\n }}\n />\n </label>\n </div>\n)}\n```\n\n```text\n<Transition\n enter=\"transition ease duration-500 transform\"\n enterFrom=\"opacity-0 -translate-y-12\"\n enterTo=\"opacity-100 translate-y-0\"\n leave=\"transition ease duration-300 transform\"\n leaveFrom=\"opacity-100 translate-y-0\"\n leaveTo=\"opacity-0 -translate-y-12\"\n >\n```\n\n```text\n<Transition\n className=\"transition-all duration-500 overflow-hidden\"\n enterFrom=\"transform scale-95 opacity-0 max-h-0\"\n enterTo=\"transform scale-100 opacity-100 max-h-96\"\n leaveFrom=\"transform scale-100 opacity-100 max-h-96\"\n leaveTo=\"transform scale-95 opacity-0 max-h-0\"\n>\n```\n\n```text\n<Transition\n className=\"transition-all duration-500 overflow-hidden\"\n enterFrom=\"transform scale-95 opacity-0 max-h-0\"\n enterTo=\"transform scale-100 opacity-100 max-h-[1000px]\"\n leaveFrom=\"transform scale-100 opacity-100 max-h-[1000px]\"\n leaveTo=\"transform scale-95 opacity-0 max-h-0\"\n>\n```\n\n```text\n<>\n <Disclosure.Button className=\"flex w-full justify-between rounded-lg bg-purple-100 px-4 py-2 text-left text-sm font-medium text-purple-900 hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75\">\n <span>What is your refund policy?</span>\n <i\n className={`${\n open\n ? \"rotate-180 transition-transform ease-linear\"\n : \"transition-transform ease-linear\"\n } mi-chevron-up icon-small ml-2 my-auto text-purple-500`}\n />\n </Disclosure.Button>\n <Transition\n className=\"overflow-hidden\"\n enter=\"transition-all ease-in-out duration-[900ms] delay-[200ms]\"\n enterFrom=\"transform max-h-0\"\n enterTo=\"transform max-h-[1000px]\"\n leave=\"transition-all ease-in-out duration-[600ms]\"\n leaveFrom=\"transform max-h-[1000px]\"\n leaveTo=\"transform max-h-0\"\n >\n <Disclosure.Panel className=\"px-4 pt-4 pb-2 text-sm text-gray-500\">\n If you're unhappy with your purchase for any reason, email\n us within 90 days and we'll refund you in full, no questions\n asked.\n </Disclosure.Panel>\n </Transition>\n</>\n```\n\n========================================\n\nComments:\n- can you provide a codesandbox with what you have currently?\n- @TiagoCoelho found the solution already. will post it soon :)\n- Actually, you did not solve your original question with the slide animation. Its just opacity.\n- @DanielSzy can you post the solution then? unless i use opacity, it will overlap anyways so i don't know what's the problem. in any case, would love your solution :)\n- It took me a while to figure things out, I found this library and example for my usecase: framer.com/docs/examples/#shared-layout-animations :)\n- oh nice, that's a great one. i'll update the answer if i use it in that way :)","metadata":{"transformedAt":"2026-08-18T18:33:42.879Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":168,"estimatedTokens":1356}}62{"id":"stack-65374790","source":"stackoverflow","questionId":65374790,"title":"Can you modify NextJS mount element or add classes to __next div?","tags":["javascript","css","next.js","jsx","tailwind-css"],"text":"Title: Can you modify NextJS mount element or add classes to __next div?\nTags: javascript, css, next.js, jsx, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nLong story short is I'm working on a project where I want to have the content \"fill\" the vertical space below the static header. I've done this in React with tailwind like this:\n\n```\n\n \n {/* header menu options */}\n \n \n {/* page content */}\n \n```\n\nBut with NextJS it seems to put the mounting div (i.e. ``) between the body and the wrest of the content. If I modify the CSS to give `#__next { height: %100 }` but that makes the fill not work correctly, it overflows. So it looks like this:\n\n```\n\n \n \n {/* header menu options */}\n \n \n {/* page content */}\n \n \n```\n\nHere are screenshots to visually see why the extra div is causing problems: https://i.sstatic.net/xZloH.jpg\n\nThe two possible options to solve this problem that theoretically might work are add classes to the `#__next` div or mount to body instead of the `#__next` div. Does anyone know how to achieve either of those?\n\nEdit: Yes, I think I could change the layout to a fixed header and padding on top of the content element and that'd sidestep the problem and that may end up being the workaround I need but I'm still interested in knowing if either of the solutions I've mentioned are possible because if they aren't that's a technical limitation of NextJS that doesn't get much attention.\n\n========================================\n\nTop Answer:\nThere is no need to inject elements between or replace NextJS' technical root element (`#__next`). Just stretch all parent elements of your app's root element to take all the screen height with `100vh` (vh is \"vertical height\", a unit which is 1% of the viewport height).\n\n```\nhtml, body, #__next, #app {\n min-height: 100vh;\n}\n```\n\nYour HTML might look like this:\n\n```\n\n \n \n \n\n```\n\n========================================\n\nCode:\n```text\n<body class=\"flex flex-col h-screen text-gray-600 work-sans leading-normal text-base tracking-normal\">\n <header class=\"flex h-18 bg-white shadow-md\">\n {/* header menu options */}\n </header>\n <div class=\"flex flex-1 h-full bg-gray-200 p-6\">\n {/* page content */}\n </div>\n```\n\n```text\n<body class=\"flex flex-col h-screen text-gray-600 work-sans leading-normal text-base tracking-normal\">\n <div id=\"__next\">\n <header class=\"flex h-18 bg-white shadow-md\">\n {/* header menu options */}\n </header>\n <div class=\"flex flex-1 h-full bg-gray-200 p-6\">\n {/* page content */}\n </div>\n </div>\n```\n\n```text\n<div id=\"__next\">\n```\n\n```text\n#__next { height: %100 }\n```\n\n```text\n#__next\n```\n\n```text\n#__next\n```\n\n```text\n@tailwind base;\n\n/* Write your own custom base styles here */\n/* #__next {\n height: 100%;\n} */\n\n/* Start purging... */\n@tailwind components;\n/* Stop purging. */\n\nhtml,\nbody {\n @apply bg-gray-50 dark:bg-gray-900;\n}\n\n#__next {\n @apply flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal;\n}\n\n/* Write your own custom component styles here */\n.btn-blue {\n @apply px-4 py-2 font-bold text-white bg-blue-500 rounded;\n}\n\n/* Start purging... */\n@tailwind utilities;\n/* Stop purging. */\n\n/* Your own custom utilities */\n```\n\n```text\n#__next {\n @apply flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal;\n}\n```\n\n```text\nuseEffect(() => {\n document.querySelector(\"#__next\").className =\n \"flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal\";\n }, []);\n```\n\n```text\n#__next\n```\n\n```text\nstyles/index.css\n```\n\n```text\n#__next\n```\n\n```text\nbody\n```\n\n```text\n@apply\n```\n\n```text\n#__next\n```\n\n```text\ncomponentDidMount()\n```\n\n```text\nuseEffect\n```\n\n```text\nMain\n```\n\n```text\nNextScript\n```\n\n```text\nimport Document, { Html, Head, Main, NextScript } from 'next/document'\n\nclass CustomDocument extends Document {\n static async getInitialProps(ctx) {\n const initialProps = await Document.getInitialProps(ctx)\n return { ...initialProps }\n }\n\n render() {\n return (\n <Html>\n <Head />\n <body className=\"custom-class-name\">\n <Main />\n <NextScript />\n </body>\n </Html>\n )\n }\n}\n\nexport default CustomDocument\n```\n\n```text\nhtml\n```\n\n```text\nbody\n```\n\n```text\n./pages/_document.js\n```\n\n```text\n<Html>\n```\n\n```text\n<Head />\n```\n\n```text\n<Main />\n```\n\n```text\n<NextScript />\n```\n\n```css\nhtml, body, #__next, #app {\n min-height: 100vh;\n}\n```\n\n```html\n<html>\n<head><!-- head content --></head>\n<body>\n <div id=\"__next\">\n <div id=\"app\"><!-- this is your app's top element --></div>\n </div>\n</body>\n</html>\n```\n\n```text\n#__next\n```\n\n```text\n100vh\n```\n\n```text\n/*\n Extend the top most enclosing elements to entire height of the screen \n to allow for the background image to fill the entire screen\n*/\nhtml,\nbody,\n#__next {\n height: 100%;\n}\n```\n\n```text\nstyles/globals.css\n```\n\n```text\nglobal.css\n```\n\n```text\n_app.tsx\n```\n\n========================================\n\nComments:\n- set __next height 100% and box-sizing: border-box; padding and margin on 0\n- and body, html height 100%\n- @Robert The result is the same as the overflow picture I posted to imgur\n- your header is fixed height. h-18, so just calc(100% - 18px) should be fine, or put this layer as absolute top 0 and min-height 100% should work as well. (but in second case you have to change zindex of header)\n- or better. if header is always on top just make it fixed mean position: fixed and top: 0. this will remove it from __nav and height of 100 % will treated as 100% of page not plus height of header\n- I've never seen calc(100% - 18px). I'll have to give it a try. That's a good point, I could change the way I put the navigation header at the top but then I'd have to compensate by adding a top padding to the content space. Thanks for your suggestions! I'll report back.\n- I have a custom document like outlined here and in the documentation but Nextjs still inserts a div with the id __next between body and the page content.\n- I see. That element with the __next id is just what the element renders, and it's required for the main app to be mounted on. So you can't remove it or edit it. I think you can add some css in _document.js that targets #__next, using the @apply directive from tailwind might be the way to go instead of editing the HTML of the element (since it doesn't seem to be possible)\n- That's unfortunate. I almost think that it'd be better to either have the mount point configurable or mount to body rather than an arbitrary div that is inserted.\n- I think this may be the closest thing to actually solving the problem but not exactly what I was looking for. I'm new to Nextjs and it seems like it arbitrarily adds the #__next div to mount the Nextjs to and it doesn't seem configurable at all. I was hoping to get some insight into the inner workings of Nextjs or possibly a possible improvement that could be made.\n- As you've mentioned n your question title: \" or add classes to __next div? \" these are the ways you can achieve your goal.\n- While it doesn't settle my creative/intellectual query about Nextjs, this solved my problem so I'm going to give you the reward.\n- I'm glad I could help!","metadata":{"transformedAt":"2026-08-18T18:33:42.880Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":35,"totalLines":303,"estimatedTokens":1802}}63{"id":"stack-72982577","source":"stackoverflow","questionId":72982577,"title":"Tailwindcss show/hide transition","tags":["javascript","css","reactjs","tailwind-css","headless-ui"],"text":"Title: Tailwindcss show/hide transition\nTags: javascript, css, reactjs, tailwind-css, headless-ui\nSource: Stack Overflow\n\nQuestion:\nI'm making a react app with `tailwindcss`, and I want to make a hidden mobile navbar and when the user click on the icon it appears.\n\nSo I want to make a transition while the menu appears.\n\nI use:\n\n- React\n\n- Tailwindcss\n\n- Headlessui\n\nMy Code:\n\nMobileMenu.js:\n\n```\nfunction MobileMenu() {\n return (\n \n \n \n \n\n### Elon Musk\n\n \n \n \n \n\n### Home\n\n \n \n \n \n\n### Friends\n\n \n \n \n \n\n### My Profile\n\n \n \n );\n}\n\nexport default MobileMenu;\n```\n\nHow I show it in Navbar.js:\n\n```\nfunction Navbar() {\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n return (\n <>\n \n {/* Mobile Menu Icon */}\n setMobileMenuOpen(!mobileMenuOpen)}\n >\n \n \n \n {/* Mobile Menu */}\n {mobileMenuOpen && }\n \n );\n}\n\nexport default Navbar;\n```\n\nThanks in advance!\n\n========================================\n\nTop Answer:\nYou can use `@framer/motion` package that allows you easily animate elements.\n\n```\nconst menuVariants = {\n open: {\n opacity: 1,\n x: 0,\n },\n closed: {\n opacity: 0,\n x: '-100%',\n },\n }\n```\n\nAnimations can be changed however you want according to `@framer/motion` docs.\n\nAnd attach variants to your `` component.\n\n```\nfunction MobileMenu({isMenuOpen}) {\n return (\n className=\"block md:hidden px-4 py-3 text-white w-full bg-gray-800 border-t border-opacity-70 border-slate-700\">\n \n \n \n\n### Elon Musk\n\n \n \n \n \n\n### Home\n\n \n \n \n \n\n### Friends\n\n \n \n \n \n\n### My Profile\n\n \n \n );\n}\n\nexport default MobileMenu;\n```\n\nAnd you can pass `isMenuOpen` variable as a prop.\n\n```\nfunction Navbar() {\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n return (\n <>\n \n {/* Mobile Menu Icon */}\n setMobileMenuOpen(!mobileMenuOpen)}\n >\n \n \n \n {/* Mobile Menu */}\n {mobileMenuOpen && }\n \n );\n}\n\nexport default Navbar;\n```\n\n========================================\n\nCode:\n```js\nfunction MobileMenu() {\n return (\n <div className=\"block md:hidden px-4 py-3 text-white w-full bg-gray-800 border-t border-opacity-70 border-slate-700\">\n <div className=\"flex items-center mb-3 pb-3 border-b border-slate-700\">\n <img\n src=\"https://africaprime.com/wp-content/uploads/2020/04/ElonMusk.jpg\"\n className=\"rounded-full w-8 h-8 cursor-pointer\"\n />\n <h6 className=\"ml-5 cursor-pointer\">Elon Musk</h6>\n </div>\n <div className=\"mobile-nav-icon\">\n <ImHome size={20} />\n <h4 className=\"ml-5\">Home</h4>\n </div>\n <div className=\"mobile-nav-icon\">\n <HiUsers size={20} />\n <h4 className=\"ml-5\">Friends</h4>\n </div>\n <div className=\"mobile-nav-icon\">\n <CgProfile size={20} />\n <h4 className=\"ml-5\">My Profile</h4>\n </div>\n </div>\n );\n}\n\nexport default MobileMenu;\n```\n\n```js\nfunction Navbar() {\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n return (\n <>\n <nav className=\"flex justify-between items-center px-4 lg:px-8 py-3 bg-gray-900 text-white\">\n {/* Mobile Menu Icon */}\n <div\n className=\"block md:hidden p-2 cursor-pointer rounded-full hover:bg-gray-700 transition-2\"\n onClick={() => setMobileMenuOpen(!mobileMenuOpen)}\n >\n <FiMenu size={20} />\n </div>\n </nav>\n {/* Mobile Menu */}\n {mobileMenuOpen && <MobileMenu />}\n </>\n );\n}\n\nexport default Navbar;\n```\n\n```text\ntailwindcss\n```\n\n```js\n// MobileMenu.js\nimport { ImHome } from \"react-icons/im\";\nimport { CgProfile } from \"react-icons/cg\";\nimport { HiUsers } from \"react-icons/hi\";\nimport { clsx } from \"clsx\";\n\nfunction MobileMenu({ visible }) {\n return (\n <div\n className={clsx(\n \"relative block px-4 py-3 text-white w-full bg-gray-800 border-t border-opacity-70 border-slate-700 flex flex-col space-y-5\",\n \"transition duration-200 -z-10 ease-out\",\n {\n \"ease-out\": visible,\n \"ease-in\": !visible,\n \"opacity-0\": !visible,\n \"opacity-100\": visible,\n \"-translate-y-full\": !visible,\n \"translate-y-0\": visible,\n }\n )}\n >\n <div className=\"flex items-center pb-3 border-b border-slate-700\">\n <img\n src=\"https://placehold.co/32x32\"\n className=\"rounded-full w-8 h-8 cursor-pointer\"\n />\n <h6 className=\"ml-5 cursor-pointer\">Elon Musk</h6>\n </div>\n <div className=\"flex items-center\">\n <ImHome size={20} />\n <h4 className=\"ml-5\">Home</h4>\n </div>\n <div className=\"flex items-center\">\n <HiUsers size={20} />\n <h4 className=\"ml-5\">Friends</h4>\n </div>\n <div className=\"flex items-center\">\n <CgProfile size={20} />\n <h4 className=\"ml-5\">My Profile</h4>\n </div>\n </div>\n );\n}\n\nexport default MobileMenu;\n```\n\n```js\n// Navbar.js\nimport React, { useState } from \"react\";\nimport { FiMenu } from \"react-icons/fi\";\nimport MobileMenu from \"./MobileMenu\";\n\nfunction Navbar() {\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n return (\n <>\n <nav className=\"relative flex justify-between items-center px-4 lg:px-8 py-3 bg-gray-900 text-white z-10\">\n {/* Mobile Menu Icon */}\n <div\n className=\"block md:hidden p-2 cursor-pointer rounded-full hover:bg-gray-700\"\n onClick={() => setMobileMenuOpen(!mobileMenuOpen)}\n >\n <FiMenu size={20} />\n </div>\n </nav>\n {/* Mobile Menu */}\n <MobileMenu visible={mobileMenuOpen} />\n </>\n );\n}\n\nexport default Navbar;\n```\n\n```text\ntransition\n```\n\n```text\ntransition-opacity\n```\n\n```text\ntransition-transform\n```\n\n```text\nduration-300\n```\n\n```text\nvisible\n```\n\n```text\nNavbar\n```\n\n```text\nease-out\n```\n\n```text\nease-in\n```\n\n```text\nconst menuVariants = {\n open: {\n opacity: 1,\n x: 0,\n },\n closed: {\n opacity: 0,\n x: '-100%',\n },\n }\n```\n\n```text\nfunction MobileMenu({isMenuOpen}) {\n return (\n <motion.div animate={isMenuOpen ? 'open' : 'closed'}\n variants={menuVariants}> className=\"block md:hidden px-4 py-3 text-white w-full bg-gray-800 border-t border-opacity-70 border-slate-700\">\n <div className=\"flex items-center mb-3 pb-3 border-b border-slate-700\">\n <img\n src=\"https://africaprime.com/wp-content/uploads/2020/04/ElonMusk.jpg\"\n className=\"rounded-full w-8 h-8 cursor-pointer\"\n />\n <h6 className=\"ml-5 cursor-pointer\">Elon Musk</h6>\n </div>\n <div className=\"mobile-nav-icon\">\n <ImHome size={20} />\n <h4 className=\"ml-5\">Home</h4>\n </div>\n <div className=\"mobile-nav-icon\">\n <HiUsers size={20} />\n <h4 className=\"ml-5\">Friends</h4>\n </div>\n <div className=\"mobile-nav-icon\">\n <CgProfile size={20} />\n <h4 className=\"ml-5\">My Profile</h4>\n </div>\n </div>\n );\n}\n\nexport default MobileMenu;\n```\n\n```text\nfunction Navbar() {\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n return (\n <>\n <nav className=\"flex justify-between items-center px-4 lg:px-8 py-3 bg-gray-900 text-white\">\n {/* Mobile Menu Icon */}\n <div\n className=\"block md:hidden p-2 cursor-pointer rounded-full hover:bg-gray-700 transition-2\"\n onClick={() => setMobileMenuOpen(!mobileMenuOpen)}\n >\n <FiMenu size={20} />\n </div>\n </nav>\n {/* Mobile Menu */}\n {mobileMenuOpen && <MobileMenu isMenuOpen={mobileMenuOpen}/>}\n </>\n );\n}\n\nexport default Navbar;\n```\n\n```text\n@framer/motion\n```\n\n```text\n@framer/motion\n```\n\n```text\n<MobileMenu />\n```\n\n```text\nisMenuOpen\n```\n\n```text\n<div className=\"block md:hidden p-2 cursor-pointer rounded-full hover:bg-gray-700 transition-2\" onClick={() => setMobileMenuOpen(prevState => !prevState)}>\n```\n\n========================================\n\nComments:\n- It doesn't work, I think because isMenuOpen prop is always true.\n- It doesn't make sense. You defined in `useState` as `false`. Only way to it can be `true` if you click the div using `setMobileMenuOpen(!mobileMenuOpen)` function. Be sure your MobileMenu's initial position is `l-[-100%] absolute`. If this not solves your problem, what is exactly happening on screen?\n- it works normally without any transition, but when I log the isMenuOpen prop into console it always be true, but when log it form the parent components `Navbar.js` it will be false or true depends on the click.\n- I don't use relative and absolute method by the way\n- I even forgot what I was building, but this helped me thx!","metadata":{"transformedAt":"2026-08-18T18:33:42.880Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":433,"estimatedTokens":2128}}64{"id":"stack-52515760","source":"stackoverflow","questionId":52515760,"title":"Why is there a back slash in tailwind css class names?","tags":["css","tailwind-css"],"text":"Title: Why is there a back slash in tailwind css class names?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to learn and use a new utility framework which is getting very popular these days. TailwindCSS\n\nWhen I compiled my css using the instructions in the docs, I saw a lot of css class names have colon `:` in them and it is preceded by a back slash `\\`\n\nWhy is that? Is that to make CSS understand that there is a `:` there and not to escape it?\n\n========================================\n\nCode:\n```text\n:\n```\n\n```text\n\\\n```\n\n```text\n:\n```\n\n```text\ntablet:bold\n```\n\n```text\n<p class=\"one:two\"></p>\n```\n\n```text\n.one\\:two\n```\n\n```text\nbold\n```\n\n```text\ntablet\n```\n\n========================================\n\nComments:\n- Very useful and simple answer\n- It actually takes two backslashes in javascript: `document.querySelector(\".one\\\\:two\");`developer.mozilla.org/en-US/docs/Web/API/Document/querySelec‌​tor\n- @GregGum, important to note. Jaascript also uses the slash escape character for interpolating non-printable characters into a string, such as a `tab` character. So when you use a string to specify the selecor you need to escape the escape character for ti to actually work. Passing around escape sequences with wild abandon can be difficult to debug.","metadata":{"transformedAt":"2026-08-18T18:33:42.880Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":52,"estimatedTokens":324}}65{"id":"stack-61171101","source":"stackoverflow","questionId":61171101,"title":"Problem with tailwind css responsive flex direction","tags":["css","flexbox","tailwind-css"],"text":"Title: Problem with tailwind css responsive flex direction\nTags: css, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've been working on a side project to learn tailwind css and i'm facing an issue with the responsiveness of my flexbox direction. \n\nFrom what i've read you can make an html tag responsive by adding `sm: md: lg:`\nso it will use the corresponding class based on the screen resolution. But when i try this with flexbox it doesn't work.\n\nThis is a piece of my code: ``. \n\nAs you can see i want to use flex-row on a screen larger than `md:`. But it keeps using `flex-col` even when i exceed the `md:` resolution which is 768px.\n\nFull code: https://codesandbox.io/s/pedantic-hoover-lr93g?file=/index.html\n\nThis is how it looks when i remove `flex-col` and only use `flex`: \nhttps://i.sstatic.net/lR4C4.jpg\n\n========================================\n\nCode:\n```text\nsm: md: lg:\n```\n\n```text\n<div class=\"flex-col md:flex-row h-screen w-screen m-3\">\n```\n\n```text\nmd:\n```\n\n```text\nflex-col\n```\n\n```text\nmd:\n```\n\n```text\nflex-col\n```\n\n```text\nflex\n```\n\n```text\n<div class=\"flex-col md:flex-row h-screen w-screen m-3\">\n```\n\n```text\n<div class=\"flex flex-col md:flex-row h-screen w-screen m-3\">\n```\n\n========================================\n\nComments:\n- It has nothing to do with flex-col md:flex-row because if you will check debugger then styles are changing correctly. It's hard to help here because codepen uses undefinied colors so everything is just white.\n- @chojnicki I moved the project to another site which is working now. codesandbox.io/s/pedantic-hoover-lr93g?file=/index.html\n- Now much better ;)","metadata":{"transformedAt":"2026-08-18T18:33:42.880Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":64,"estimatedTokens":406}}66{"id":"stack-65292601","source":"stackoverflow","questionId":65292601,"title":"Tailwind css translate-y-full does not work","tags":["transform","tailwind-css"],"text":"Title: Tailwind css translate-y-full does not work\nTags: transform, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHere is an original code from compiled TailwindCSS file:\n\n```\n.translate-y-full {\n --transform-translate-y: 100%; \n}\n```\n\nIt does not work. The syntax of CSS is incorrect. When I changed it to:\n\n```\n.translate-y-full {\n transform: translateY(100%);\n /* --transform-translate-y: 100%; */\n}\n```\n\nIt started to work.\n\nMaybe I am missing something but it seems to be bug and a big one...???\n\n========================================\n\nTop Answer:\nMaybe you forgot to put this line below in your css codes\n\n```\n@tailwind base;\n```\n\n========================================\n\nCode:\n```text\n.translate-y-full {\n --transform-translate-y: 100%; \n}\n```\n\n```text\n.translate-y-full {\n transform: translateY(100%);\n /* --transform-translate-y: 100%; */\n}\n```\n\n```text\ntransform\n```\n\n```text\n<img class=\"transform translate-y-full\" ...>\n```\n\n```css\n@tailwind base;\n```\n\n```css\n.translate-y-full {\n --tw-translate-y: 100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n```\n\n```css\n:root {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n}\n```\n\n```text\n3.2.7\n```\n\n```text\n.translate-y-full\n```\n\n```text\n--tw-translate-y\n```\n\n```text\n@tailwind base\n```\n\n```text\n@tailwind base\n```\n\n```js\n// tailwind.config.js\n\ncorePlugins: { \n preflight: false \n}\n```\n\n```text\n@tailwind base;\n```\n\n```text\n@tailwind base;\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- This did not seem to work for me. Do you remember which tailwind version you were using or what the `transform` utility class is supposed to do?\n- Is there a way to make this work without importing @tailwind base? As I am using a component library right now which implicitly says not to import base if using with tailwind.\n- You need to set `corePlugins: { preflight: false }` in `tailwind.config.js`: tailwindcss.com/docs/preflight#disabling-preflight\n- Thanks bro, that's exactly what I needed","metadata":{"transformedAt":"2026-08-18T18:33:42.880Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":129,"estimatedTokens":560}}67{"id":"stack-74979020","source":"stackoverflow","questionId":74979020,"title":"Convert TailwindCSS to native CSS?","tags":["tooling-recommendation","css","tailwind-css"],"text":"Title: Convert TailwindCSS to native CSS?\nTags: tooling-recommendation, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have been given an html file that is written using TailwindCSS and I am trying to figure out how to convert all there stuff to native CSS.\n\nI have found a convert that will just do the class but that requires me to extract thousands of classes from the code manually and then repast it. Is there some tool where I can just upload the whole html file and it spit out a CSS version of it for me or do I have to manually do this whole conversion?\n\nI would prefer something online as I don't want to go though having to install a bunch of 3rd party tools, learning there system, do the convert, and then uninstall everything.\n\n========================================\n\nTop Answer:\nTL;DR: I had to write the first answer with PurgeCSS because many unused variables and classes ended up in the build.\n\n- The unused classes are removed by using the `.gitignore` file (see the Update section).\n\n- The unused CSS variables are removed starting from version 4.0.5 (see the Update section).\n\nSo, the code in the first part of the answer works with PurgeCSS, while the updated version at the end of the answer works without PurgeCSS.\n\n### Solution with Tailwind CSS v4\n\nIn both TailwindCSS v3 and v4, it is possible to generate classes via the CLI. However, this approach injects a lot of \"unnecessary\" classes and styling rules into the final output, which could already be used in production. I wanted to find a solution where only the actually used classes and variables are kept in the output.\n\nFor this, in TailwindCSS v4, we will need PostCSS and the `@tailwindcss/postcss` plugin. Additionally, we will need to use `@fullhuman/postcss-purgecss` and write two custom PostCSS plugins. My answer includes all of this. The solution sounds complicated, but it is actually simple. In the final result, we will only see the essential CSS variables and classes.\n\nNote: You will need to specify in PurgeCSS where your CSS classes are used in your files, so it can filter out unnecessary styling rules.\n\nNote: Starting from TailwindCSS v4.0.5 and using a `.gitignore` file, PurgeCSS is no longer necessary, see the \"Without PurgeCSS\" section below.\n\n### Install dependencies\n\n```\nnpm install tailwindcss @tailwindcss/postcss postcss @fullhuman/postcss-purgecss\n```\n\n- Get started Tailwind CSS using PostCSS - TailwindCSS v4 Docs\n\n- Get started Purge CSS - PurgeCSS Docs\n\n### Create a converter solution\n\nThe different PostCSS plugins will run sequentially, utilizing the results of each other. First, we start the process with `.process` and inject the CSS code needed for TailwindCSS, so there's no need for a separate `style.css` where you'd have to do this manually.\n\nWhy don't we use the `@import \"tailwindcss\"` recommended in the documentation? Because this brings in three different imports, one of which is `preflight.css`. However, `preflight.css` isn't necessary because it injects a CSS reset solution into the final result. See here: Preflight - TailwindCSS v4 Docs\n\nFirst, the TailwindCSS Plugin runs, collecting all the used classes and variables, and passes them along with its own default parameters.\n\n(Until v4.0.4) It is necessary to filter out the unnecessary classes (e.g., `h-auto`, `w-auto`, which are not present in the example file). To do this, we use the PurgeCSS Plugin. We simply configure it to search for CSS class usage in specified files. Based on this, it will retain only the used classes and variables.\n\nTailwindCSS also adds `@layer`, `@property` directives and comments to the result. We remove these using our own plugins: `removeLayerRules`, `removePropertyRules` and `removeCommentRules`. (See: \"`@layer` and `@property` supports\" section below)\n\nExtra: The `prettier()` function is necessary because the TailwindCSS PostCSS-plugin returns incorrectly indented results with the `optimize: true` and `minify: false` settings. It can be omitted if you don't mind the incorrect line indentation.\n\nFinally, we output the result to the `output.css` file.\n\n```\n// convert-tailwind-to-css.js\n\nimport fs from 'fs';\nimport postcss from 'postcss';\nimport tailwindcssPlugin from '@tailwindcss/postcss';\nimport { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';\n\n// Minify?\nconst args = process.argv.slice(2);\nlet minify = false;\nif (args.includes('--minify')) {\n minify = true;\n}\n// Generated CSS indent spaces count\nconst indentSpaces = 2;\n// Generated CSS output file\nconst outputCSS = './output.css';\n\n// Custom PostCSS plugin to remove comments\nconst removeCommentRules = (root) => {\n root.walkComments((comment) => {\n comment.remove();\n });\n};\n\n// CSS Prettier (TailwindCSS with LightningCSS returns incorrectly formatted results with the settings optimize: true and minify: false)\nconst prettier = (css, indent = 2) => {\n const lines = css.split('\\n');\n let indentLevel = 0;\n\n return lines\n .map((line) => {\n const trimmed = line.trim();\n\n if (trimmed.endsWith('}')) {\n indentLevel = Math.max(indentLevel - 1, 0);\n }\n\n const formattedLine = ' '.repeat(indentLevel * indent) + trimmed;\n\n if (trimmed.endsWith('{')) {\n indentLevel++;\n }\n\n return formattedLine;\n })\n .join('\\n');\n};\n\n// Convert Tailwind CSS to native CSS\npostcss([\n tailwindcssPlugin({\n optimize: {\n minify, // minify or not?\n },\n }),\n purgeCSSPlugin({\n content: [\n './**/*.html',\n './**/*.js',\n './**/*.jsx',\n './**/*.ts',\n './**/*.tsx',\n './**/*.vue',\n ],\n defaultExtractor: content => content.match(/[\\w-/:.\\[\\]\\(\\)_]+(? {\n let formattedCSS;\n if (! minify) {\n // Format CSS (The optimize result returns the output with incorrect indentation.)\n formattedCSS = prettier(result.css, indentSpaces);\n }\n \n // Write the generated CSS to a file\n fs.writeFileSync(outputCSS, formattedCSS || result.css, 'utf8');\n console.log(`Native CSS generated: ${outputCSS}`);\n })\n .catch((err) => console.error('An error occurred:', err));\n```\n\nFor my example, I used the following `index.html`:\n\n```\n\n Hello, World!\n\n```\n\nThe expected result with my solution:\n\n```\nnode convert-tailwind-to-css.js\n```\n\n```\n@layer theme {\n :root, :host {\n --color-red-500: oklch(.637 .237 25.331);\n --color-blue-500: oklch(.623 .214 259.815);\n --spacing: .25rem;\n --font-weight-bold: 700;\n }\n}\n\n@layer base, components;\n\n@layer utilities {\n :where(.space-y-6 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n \n .text-center {\n text-align: center;\n }\n \n .text-\\[2rem\\] {\n font-size: 2rem;\n }\n \n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n \n .text-red-500 {\n color: var(--color-red-500);\n }\n \n @media (width >= 48rem) {\n @media (hover: hover) {\n .md\\:hover\\:first\\:text-blue-500:hover:first-child {\n color: var(--color-blue-500);\n }\n }\n }\n \n @media (width >= 64rem) {\n .lg\\:text-left {\n text-align: left;\n }\n \n .lg\\:text-\\[4rem\\] {\n font-size: 4rem;\n }\n }\n}\n\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false\n}\n```\n\nAnd minified result with `--minify` flag:\n\n```\nnode convert-tailwind-to-css.js --minify\n```\n\n```\n@layer theme{:root,:host{--color-red-500:oklch(.637 .237 25.331);--color-blue-500:oklch(.623 .214 259.815);--spacing:.25rem;--font-weight-bold:700}}@layer base,components;@layer utilities{:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.text-center{text-align:center}.text-\\[2rem\\]{font-size:2rem}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.text-red-500{color:var(--color-red-500)}@media (width>=48rem){@media (hover:hover){.md\\:hover\\:first\\:text-blue-500:hover:first-child{color:var(--color-blue-500)}}}@media (width>=64rem){.lg\\:text-left{text-align:left}.lg\\:text-\\[4rem\\]{font-size:4rem}}}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-font-weight{syntax:\"*\";inherits:false}\n```\n\n### Update\n\n### Refactor in automatic-source-detection\n\nStarting from v4, there's no need to specify the sources, as the TailwindCSS engine automatically detects them, even in the `node_modules` folder. This is how unused classes might end up being included in the build. Using PurgeCSS to avoid unused classes can almost entirely be avoided by adding the exclusion of the `node_modules` folder to the `.gitignore`. The v4 engine takes the contents of the `.gitignore` into account when searching for sources.\n\n- How classes are detected - TailwindCSS v4 Docs\n\nBut you can still specify individual sources using the `@source` directive.\n\n### Tailwind CSS v4.0.5\n\n- `tailwindlabs/tailwindcss` PR #16211 - fix: only expose used CSS variable\n\nWith the fix released in version v4.0.5, unused CSS variables are no longer included in the output generated by Tailwind CSS. However, PurgeCSS is still necessary to remove completely unused classes that are unnecessarily included in the output.\n\n### Without PurgeCSS\n\n**.gitignore**\n\n```\n/node_modules/\n```\n\n**convert-tailwind-to-css.js**\n\n```\n// convert-tailwind-to-css.js\n\nimport fs from 'fs';\nimport postcss from 'postcss';\nimport tailwindcssPlugin from '@tailwindcss/postcss';\n\n// Minify?\nconst args = process.argv.slice(2);\nlet minify = false;\nif (args.includes('--minify')) {\n minify = true;\n}\n// Generated CSS indent spaces count\nconst indentSpaces = 2;\n// Generated CSS output file\nconst outputCSS = './output.css';\n\n// Custom PostCSS plugin to remove comments\nconst removeCommentRules = (root) => {\n root.walkComments((comment) => {\n comment.remove();\n });\n};\n\n// CSS Prettier (TailwindCSS with LightningCSS returns incorrectly formatted results with the settings optimize: true and minify: false)\nconst prettier = (css, indent = 2) => {\n const lines = css.split('\\n');\n let indentLevel = 0;\n\n return lines\n .map((line) => {\n const trimmed = line.trim();\n\n if (trimmed.endsWith('}')) {\n indentLevel = Math.max(indentLevel - 1, 0);\n }\n\n const formattedLine = ' '.repeat(indentLevel * indent) + trimmed;\n\n if (trimmed.endsWith('{')) {\n indentLevel++;\n }\n\n return formattedLine;\n })\n .join('\\n');\n};\n\n// Convert Tailwind CSS to native CSS\npostcss([\n tailwindcssPlugin({\n optimize: {\n minify, // minify or not?\n },\n }),\n removeCommentRules,\n])\n .process(`\n @layer theme, base, components, utilities;\n @import \"tailwindcss/theme.css\" layer(theme);\n\n /* preflight: Not required, it only creates rules for CSS reset. */\n /* @import \"tailwindcss/preflight.css\" layer(base); */\n\n @import \"tailwindcss/utilities.css\" layer(utilities);\n `, { from: './src' })\n .then((result) => {\n let formattedCSS;\n if (! minify) {\n // Format CSS (The optimize result returns the output with incorrect indentation.)\n formattedCSS = prettier(result.css, indentSpaces);\n }\n \n // Write the generated CSS to a file\n fs.writeFileSync(outputCSS, formattedCSS || result.css, 'utf8');\n console.log(`Native CSS generated: ${outputCSS}`);\n })\n .catch((err) => console.error('An error occurred:', err));\n```\n\n### Known issues\n\n- Without PurgeCSS, two unused variables still appear: `--font-sans`, `--font-mono`.\n\n### `@layer` and `@property` supports\n\nAlthough in the first version of my answer I ignored these CSS at-rules, I later thought that anyone actually using v4 wouldn't need to ignore them. Originally, I decided to remove these for optimal size minimization, which was achieved by these two very simple PostCSS plugins:\n\n```\n// Custom PostCSS plugin to remove `@layer` rules but keep the CSS inside\nconst removeLayerRules = (root) => {\n root.walkAtRules('layer', (rule) => {\n rule.replaceWith(rule.nodes);\n });\n};\n\n// Custom PostCSS plugin to remove `@property` rules\nconst removePropertyRules = (root) => {\n root.walkAtRules('property', (rule) => {\n rule.remove();\n });\n};\n```\n\n- `@layer` - MDN Docs (since 2022)\n\n- `@property` - MDN Docs (since 2024)\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n corePlugins: {\n preflight: false,\n }\n}\n```\n\n```text\npreflight = false\n```\n\n```html\n<!-- index.html -->\n\n<div class=\"text-center text-red-500 font-bold text-[2rem] lg:text-[4rem] lg:text-left\">\n Hello, World!\n</div>\n```\n\n```none\nnpm install tailwindcss@3 postcss\n```\n\n```js\n// tailwind.config.js\n\nmodule.exports = {\n content: ['./src/**/*.{js,ts,vue}', './index.html'],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```js\n// convert-tailwind-to-css.js\n\nimport { fileURLToPath } from 'url';\nimport { dirname, resolve } from 'path';\nimport fs from 'fs';\nimport postcss from 'postcss';\nimport tailwindcss from 'tailwindcss';\n\n// Generated CSS indent spaces count\nconst indentSpaces = 2;\n// Generated CSS output file\nconst outputCSS = './output.css';\n\n// Load tailwind.config.js\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\nconst configPath = resolve(__dirname, './tailwind.config.js');\n\n// Convert Tailwind CSS to native CSS\npostcss([ \n tailwindcss(configPath),\n])\n .process('@tailwind utilities; @tailwind components;', { from: undefined })\n .then((result) => {\n // Format and write the CSS output\n const formattedCSS = result.css\n .replaceAll(' '.repeat(4), ' '.repeat(indentSpaces)) // Handle indentation\n .replace(/([^{;\\s]+:[^;}]+)(\\s*?)\\n(\\s*})/g, '$1;\\n$3'); // Insert semicolon before newline and closing brace, preserving indentation\n \n fs.writeFileSync(outputCSS, formattedCSS, 'utf8');\n console.log(`Native CSS generated: ${outputCSS}`);\n })\n .catch((err) => console.error('An error occurred:', err));\n```\n\n```none\nnode convert-tailwind-to-css.js\n```\n\n```css\n.text-center {\n text-align: center;\n}\n.text-\\[2rem\\] {\n font-size: 2rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n@media (min-width: 1024px) {\n .lg\\:text-left {\n text-align: left;\n }\n .lg\\:text-\\[4rem\\] {\n font-size: 4rem;\n }\n}\n```\n\n```text\noutput.css\n```\n\n```text\ninput.css\n```\n\n```text\nindex.html\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nconvert-tailwind-to-css.js\n```\n\n```text\n2\n```\n\n```text\ntailwind.config.js\n```\n\n```none\nnpm install tailwindcss @tailwindcss/postcss postcss @fullhuman/postcss-purgecss\n```\n\n```js\n// convert-tailwind-to-css.js\n\nimport fs from 'fs';\nimport postcss from 'postcss';\nimport tailwindcssPlugin from '@tailwindcss/postcss';\nimport { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';\n\n// Minify?\nconst args = process.argv.slice(2);\nlet minify = false;\nif (args.includes('--minify')) {\n minify = true;\n}\n// Generated CSS indent spaces count\nconst indentSpaces = 2;\n// Generated CSS output file\nconst outputCSS = './output.css';\n\n// Custom PostCSS plugin to remove comments\nconst removeCommentRules = (root) => {\n root.walkComments((comment) => {\n comment.remove();\n });\n};\n\n// CSS Prettier (TailwindCSS with LightningCSS returns incorrectly formatted results with the settings optimize: true and minify: false)\nconst prettier = (css, indent = 2) => {\n const lines = css.split('\\n');\n let indentLevel = 0;\n\n return lines\n .map((line) => {\n const trimmed = line.trim();\n\n if (trimmed.endsWith('}')) {\n indentLevel = Math.max(indentLevel - 1, 0);\n }\n\n const formattedLine = ' '.repeat(indentLevel * indent) + trimmed;\n\n if (trimmed.endsWith('{')) {\n indentLevel++;\n }\n\n return formattedLine;\n })\n .join('\\n');\n};\n\n// Convert Tailwind CSS to native CSS\npostcss([\n tailwindcssPlugin({\n optimize: {\n minify, // minify or not?\n },\n }),\n purgeCSSPlugin({\n content: [\n './**/*.html',\n './**/*.js',\n './**/*.jsx',\n './**/*.ts',\n './**/*.tsx',\n './**/*.vue',\n ],\n defaultExtractor: content => content.match(/[\\w-/:.\\[\\]\\(\\)_]+(?<!:)/g) || [],\n variables: true, // Remove unused CSS variables\n keyframes: true, // Remove unused animations\n fontFace: true, // Remove unused font faces\n }),\n removeCommentRules,\n])\n .process(`\n @layer theme, base, components, utilities;\n @import \"tailwindcss/theme.css\" layer(theme);\n\n /* preflight: Not required, it only creates rules for CSS reset. */\n /* @import \"tailwindcss/preflight.css\" layer(base); */\n\n @import \"tailwindcss/utilities.css\" layer(utilities);\n `, { from: './src' })\n .then((result) => {\n let formattedCSS;\n if (! minify) {\n // Format CSS (The optimize result returns the output with incorrect indentation.)\n formattedCSS = prettier(result.css, indentSpaces);\n }\n \n // Write the generated CSS to a file\n fs.writeFileSync(outputCSS, formattedCSS || result.css, 'utf8');\n console.log(`Native CSS generated: ${outputCSS}`);\n })\n .catch((err) => console.error('An error occurred:', err));\n```\n\n```html\n<!-- index.html -->\n\n<div class=\"text-center text-red-500 font-bold text-[2rem] lg:text-[4rem] lg:text-left md:hover:first:text-blue-500\">\n Hello, World!\n</div>\n```\n\n```none\nnode convert-tailwind-to-css.js\n```\n\n```css\n@layer theme {\n :root, :host {\n --color-red-500: oklch(.637 .237 25.331);\n --color-blue-500: oklch(.623 .214 259.815);\n --spacing: .25rem;\n --font-weight-bold: 700;\n }\n}\n\n@layer base, components;\n\n@layer utilities {\n :where(.space-y-6 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n \n .text-center {\n text-align: center;\n }\n \n .text-\\[2rem\\] {\n font-size: 2rem;\n }\n \n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n \n .text-red-500 {\n color: var(--color-red-500);\n }\n \n @media (width >= 48rem) {\n @media (hover: hover) {\n .md\\:hover\\:first\\:text-blue-500:hover:first-child {\n color: var(--color-blue-500);\n }\n }\n }\n \n @media (width >= 64rem) {\n .lg\\:text-left {\n text-align: left;\n }\n \n .lg\\:text-\\[4rem\\] {\n font-size: 4rem;\n }\n }\n}\n\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false\n}\n```\n\n```none\nnode convert-tailwind-to-css.js --minify\n```\n\n```css\n@layer theme{:root,:host{--color-red-500:oklch(.637 .237 25.331);--color-blue-500:oklch(.623 .214 259.815);--spacing:.25rem;--font-weight-bold:700}}@layer base,components;@layer utilities{:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.text-center{text-align:center}.text-\\[2rem\\]{font-size:2rem}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.text-red-500{color:var(--color-red-500)}@media (width>=48rem){@media (hover:hover){.md\\:hover\\:first\\:text-blue-500:hover:first-child{color:var(--color-blue-500)}}}@media (width>=64rem){.lg\\:text-left{text-align:left}.lg\\:text-\\[4rem\\]{font-size:4rem}}}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-font-weight{syntax:\"*\";inherits:false}\n```\n\n```text\n/node_modules/\n```\n\n```js\n// convert-tailwind-to-css.js\n\nimport fs from 'fs';\nimport postcss from 'postcss';\nimport tailwindcssPlugin from '@tailwindcss/postcss';\n\n// Minify?\nconst args = process.argv.slice(2);\nlet minify = false;\nif (args.includes('--minify')) {\n minify = true;\n}\n// Generated CSS indent spaces count\nconst indentSpaces = 2;\n// Generated CSS output file\nconst outputCSS = './output.css';\n\n// Custom PostCSS plugin to remove comments\nconst removeCommentRules = (root) => {\n root.walkComments((comment) => {\n comment.remove();\n });\n};\n\n// CSS Prettier (TailwindCSS with LightningCSS returns incorrectly formatted results with the settings optimize: true and minify: false)\nconst prettier = (css, indent = 2) => {\n const lines = css.split('\\n');\n let indentLevel = 0;\n\n return lines\n .map((line) => {\n const trimmed = line.trim();\n\n if (trimmed.endsWith('}')) {\n indentLevel = Math.max(indentLevel - 1, 0);\n }\n\n const formattedLine = ' '.repeat(indentLevel * indent) + trimmed;\n\n if (trimmed.endsWith('{')) {\n indentLevel++;\n }\n\n return formattedLine;\n })\n .join('\\n');\n};\n\n// Convert Tailwind CSS to native CSS\npostcss([\n tailwindcssPlugin({\n optimize: {\n minify, // minify or not?\n },\n }),\n removeCommentRules,\n])\n .process(`\n @layer theme, base, components, utilities;\n @import \"tailwindcss/theme.css\" layer(theme);\n\n /* preflight: Not required, it only creates rules for CSS reset. */\n /* @import \"tailwindcss/preflight.css\" layer(base); */\n\n @import \"tailwindcss/utilities.css\" layer(utilities);\n `, { from: './src' })\n .then((result) => {\n let formattedCSS;\n if (! minify) {\n // Format CSS (The optimize result returns the output with incorrect indentation.)\n formattedCSS = prettier(result.css, indentSpaces);\n }\n \n // Write the generated CSS to a file\n fs.writeFileSync(outputCSS, formattedCSS || result.css, 'utf8');\n console.log(`Native CSS generated: ${outputCSS}`);\n })\n .catch((err) => console.error('An error occurred:', err));\n```\n\n```js\n// Custom PostCSS plugin to remove `@layer` rules but keep the CSS inside\nconst removeLayerRules = (root) => {\n root.walkAtRules('layer', (rule) => {\n rule.replaceWith(rule.nodes);\n });\n};\n\n// Custom PostCSS plugin to remove `@property` rules\nconst removePropertyRules = (root) => {\n root.walkAtRules('property', (rule) => {\n rule.remove();\n });\n};\n```\n\n```text\n.gitignore\n```\n\n```text\n@tailwindcss/postcss\n```\n\n```text\n@fullhuman/postcss-purgecss\n```\n\n```text\n.gitignore\n```\n\n```text\n.process\n```\n\n```text\nstyle.css\n```\n\n```text\n@import \"tailwindcss\"\n```\n\n```text\npreflight.css\n```\n\n```text\npreflight.css\n```\n\n```text\nh-auto\n```\n\n```text\nw-auto\n```\n\n```text\n@layer\n```\n\n```text\n@property\n```\n\n```text\nremoveLayerRules\n```\n\n```text\nremovePropertyRules\n```\n\n```text\nremoveCommentRules\n```\n\n```text\n@layer\n```\n\n```text\n@property\n```\n\n```text\nprettier()\n```\n\n```text\noptimize: true\n```\n\n```text\nminify: false\n```\n\n```text\noutput.css\n```\n\n```text\nindex.html\n```\n\n```text\n--minify\n```\n\n```text\nnode_modules\n```\n\n```text\nnode_modules\n```\n\n```text\n.gitignore\n```\n\n```text\n.gitignore\n```\n\n```text\n@source\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\n--font-sans\n```\n\n```text\n--font-mono\n```\n\n```text\n@layer\n```\n\n```text\n@property\n```\n\n```text\n@layer\n```\n\n```text\n@property\n```\n\n========================================\n\nComments:\n- I know you were primarily thinking of online solutions, and I understand that you don't want to require too much extra knowledge to complete the process. This can be done using PostCSS and TailwindCSS without needing to inject any extra frameworks behind it. You just need to create a very simple JS file that you can run with Node.js at any time, even automatically.\n- I have updated my solution, so now you can find my guide for both Tailwind v3 to native CSS and Tailwind v4 to native CSS.\n- That is the tool I talked about. I ahve to manually extract all the classes for that to work I can't just paste the HTML doc on there and get it convertred. It would take me hours to extract every single tailwindCSS, convert it and past it back in.\n- It not recognize the hover: classes :(\n- Doesn't recognize custom classes like `min-h-[150px]`\n- The mentioned issue still exists to this day. I don't understand it. TailwindCSS is inherently capable of interpreting these, so the website should work as well.\n- I have an improved version (which I opened as PR, but the maintainer is delayed in merging it). Here it is: tailwind-to-css-three.vercel.app\n- Although the asker was primarily looking for an online solution, I believe this turned out to be somewhat too manual, losing the one advantage of development: automation.","metadata":{"transformedAt":"2026-08-18T18:33:42.880Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":61,"totalLines":938,"estimatedTokens":6063}}68{"id":"stack-61303798","source":"stackoverflow","questionId":61303798,"title":"How can I change the underline color in tailwind css","tags":["tailwind-css"],"text":"Title: How can I change the underline color in tailwind css\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThe default underline color in tailwind css is black. How can I change this color for example to a light green.\nThey have listed a way for one to change the default link underline color in the base style as below\n\n```\n@tailwind base;\n\na {\n color: theme('colors.blue');\n text-decoration: underline;\n}\n\n@tailwind components;\n@tailwind utilities;\n```\n\nHow would one go about changing the default normal underline color for say a `span` tag\n\n========================================\n\nTop Answer:\nIf you are using v3 of tailwind you can use `decoration-{color}`.\n\nFor example:\n\n```\n\n my link text\n\n```\n\nHere are the docs:\nhttps://tailwindcss.com/docs/text-decoration-color\n\n========================================\n\nCode:\n```text\n@tailwind base;\n\na {\n color: theme('colors.blue');\n text-decoration: underline;\n}\n\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nspan\n```\n\n```css\n.underline {\n text-decoration-color: red;\n text-decoration: underline;\n}\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {}\n },\n variants: {},\n plugins: [\n function ({addUtilities}) {\n const extendUnderline = {\n '.underline': {\n 'textDecoration': 'underline',\n 'text-decoration-color': 'red',\n },\n }\n addUtilities(extendUnderline)\n }\n ]\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n<a href=\"#\" class=\"underline decoration-green\">\n my link text\n</a>\n```\n\n```text\ndecoration-{color}\n```\n\n========================================\n\nComments:\n- file should be `tailwind.config.js`, not `tailwind.config.css`\n- This is possible in tailwind v3 tailwindcss.com/docs/text-decoration-color","metadata":{"transformedAt":"2026-08-18T18:33:42.880Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":103,"estimatedTokens":456}}69{"id":"stack-79427624","source":"stackoverflow","questionId":79427624,"title":"Cannot apply unknown utility class rounded-r-lg, but it's a valid TailwindCSS class","tags":["vue.js","tailwind-css","flowbite","tailwind-css-3"],"text":"Title: Cannot apply unknown utility class rounded-r-lg, but it's a valid TailwindCSS class\nTags: vue.js, tailwind-css, flowbite, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI've started a new project and wanted to use VueJS as frontend and TailwindCSS/FlowbiteVue for design.\nI followed the installation-instructions but always get the same error:\n\nInternal server error: Cannot apply unknown utility class: `rounded-r-lg`\n\nI'm not sure how to fix it. It only appears when I include the following file into my main.css:\n\n```\n@import '../../node_modules/flowbite-vue/dist/index.css';\n```\n\nIn this index.css the class `rounded-r-lg` is assigned to some elements. But on the `node_modules/tailwind-files` I can't find any class named like `rounded-r-lg`.\n\nRegarding to the official TailwindCSS Docs this is a valid class-name.\nI've tried several times to delete and install TailwindCSS and Flowbite, also setting up a complete new Vue project. But the error is still the same.\n\nDoes anyone have an idea?\n\n========================================\n\nTop Answer:\nI had the same problem; maybe this can answer it.\n\nYou can use the `@reference` syntax, like this:\n\n```\n// styles.scss\n\n@reference \"tailwindcss\";\n\n.some__class {\n @apply rounded-r-lg;\n}\n```\n\nYou can read the documentation here.\n\n========================================\n\nCode:\n```css\n@import '../../node_modules/flowbite-vue/dist/index.css';\n```\n\n```text\nrounded-r-lg\n```\n\n```text\nrounded-r-lg\n```\n\n```text\nnode_modules/tailwind-files\n```\n\n```text\nrounded-r-lg\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```css\n@reference \"tailwindcss\"; /* include default TailwindCSS variables and utilities */\n\n.hero {\n @apply rounded-r-lg;\n}\n```\n\n```css\n@reference \"./../global.css\";\n\n.hero {\n @apply rounded-r-lg;\n}\n```\n\n```text\nnpm install tailwindcss@3\n```\n\n```text\n@reference\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```text\n<style>\n```\n\n```text\npackage.json\n```\n\n```text\n@reference\n```\n\n```text\nnpm install tailwindcss\n```\n\n```text\ntailwindlabs/tailwindcss.com\n```\n\n```text\n// styles.scss\n\n@reference \"tailwindcss\";\n\n.some__class {\n @apply rounded-r-lg;\n}\n```\n\n```text\n@reference\n```\n\n```text\nError: Cannot apply unknown utility class: bg-theme\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n --color-black: #18181C;\n --color-theme: #FAFAFA;\n}\n\nbody {\n @apply bg-theme;\n}\n```\n\n```css\n@import \"tailwindcss\";\n@import \"../../globals.css\";\n```\n\n```text\nbg-theme\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@theme\n```\n\n```text\nglobals.css\n```\n\n```text\nglobals.css\n```\n\n```text\n@layer base {\n .button {\n @apply text-4xl font-bold;\n }\n}\n```\n\n========================================\n\nComments:\n- The Flowbite installer is faulty. If I had to guess, you probably installed v4 by mistake instead of v3. You can install v3 like this: `npm install tailwindcss@3`.\n- Flowbite has properly updated its guide for v4. You can now review the breaking changes (drop tailwind.config.js; use CSS-first configuration; discover automatic source detection; etc.) and the use of `@reference` directive.\n- Thanks for that update. I've upgraded flowbite and tailwind and it now works\n- There's no need to import TailwindCSS twice. Make sure to import TailwindCSS only in your main CSS file. See more: tailwindcss.com/docs/theme#sharing-across-projects\n- Although I don't think this is directly related to the question, it's a good idea - whenever possible, put the reset CSS into a layer to avoid overly strong unlayered CSS declarations. See more: From v4 the reset style cannot be overridden by TailwindCSS classes","metadata":{"transformedAt":"2026-08-18T18:33:42.880Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":28,"totalLines":193,"estimatedTokens":890}}70{"id":"stack-73142994","source":"stackoverflow","questionId":73142994,"title":"Error: Cannot find module 'tailwindcss' (Next.js application)","tags":["npm","webpack","next.js","node-modules","tailwind-css"],"text":"Title: Error: Cannot find module 'tailwindcss' (Next.js application)\nTags: npm, webpack, next.js, node-modules, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI recently updated my Node Package Manager in accordance with this post. However, now when I create a new Next.js app and run it using `npm run dev`, I get the following error:\n\n```\nerror - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css\nError: Cannot find module 'tailwindcss'\nRequire stack:\n- E:\\Code\\testing\\node_modules\\next\\dist\\build\\webpack\\config\\blocks\\css\\plugins.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\build\\webpack\\config\\blocks\\css\\index.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\build\\webpack\\config\\index.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\build\\webpack-config.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\server\\dev\\hot-reloader.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\server\\dev\\next-dev-server.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\server\\next.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\server\\lib\\start-server.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\cli\\next-dev.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\bin\\next\n at Array.map ()\n```\n\nWhat is causing the error and how do I fix it ? I don't want to build my project using TailwindCSS and hence, do not want to install it.\n\nEdit: I had run the `npm install -D tailwindcss@latest postcss@latest autoprefixer@latest` command previously to fix the error. It didn't help. I tried uninstalling it and that didn't help either.\n\n========================================\n\nTop Answer:\nIn my case, I was build a multi stage Docker build which had tailwindcss as a devDependecy in the package builder step. The packages were being installed using yarn wokspaces focus --all --production. As the second stage was being build, tailwindcss was missing since as a devDependency and it wasn't being installed and this error did pop up.\n\n========================================\n\nCode:\n```text\nerror - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css\nError: Cannot find module 'tailwindcss'\nRequire stack:\n- E:\\Code\\testing\\node_modules\\next\\dist\\build\\webpack\\config\\blocks\\css\\plugins.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\build\\webpack\\config\\blocks\\css\\index.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\build\\webpack\\config\\index.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\build\\webpack-config.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\server\\dev\\hot-reloader.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\server\\dev\\next-dev-server.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\server\\next.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\server\\lib\\start-server.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\cli\\next-dev.js\n- E:\\Code\\testing\\node_modules\\next\\dist\\bin\\next\n at Array.map (<anonymous>)\n```\n\n```text\nnpm run dev\n```\n\n```text\nnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\n```text\nnode_modules\n```\n\n```text\n.next\n```\n\n```text\nnpm install -D tailwindcss postcss autoprefixer\n```\n\n```text\nnpm install --include=dev\n```\n\n```text\n--include=dev\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\nexport default {\n plugins: {\n \"postcss-import\": {},\n tailwindcss: {},\n autoprefixer: {}, \n },\n};\n```\n\n```text\nexport default {\n plugins: {\n \"@tailwindcss/postcss\": {}\n }\n};\n```\n\n```text\npostcss.config.mjs\n```\n\n========================================\n\nComments:\n- Have you tried that? 'npm uninstall tailwindcss' and then 'rm -rf node_modules package-lock.json' and then 'npm install'.\n- It didn't help. Actually, I don't want to use TailwindCSS in my project at all. I ran my server without modifying the default Next.js installation and the error showed up.\n- So what's the solution? your answer could add actionable steps to fix the issue","metadata":{"transformedAt":"2026-08-18T18:33:42.880Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":119,"estimatedTokens":1049}}71{"id":"stack-69746121","source":"stackoverflow","questionId":69746121,"title":"Using NextJS, how can you import in CSS using tailwind css?","tags":["tailwind-css"],"text":"Title: Using NextJS, how can you import in CSS using tailwind css?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nJust started using tailwindcss in a Next.js project.\n\nI set it up through my CSS file, and was trying to setup some basics for headers `h1`, `h2`, ... but I like separating the logic a bit so it doesn't get too messy, so I tried to `@import './typography.css' which includes some tailwind, but it doesn't work.\n\nHere is my base CSS file:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@tailwind variants;\n\n@import './typography.css';\n```\n\nMy typography:\n\n```\nh1 {\n @apply text-6xl font-normal leading-normal mt-0 mb-2;\n}\n...\n```\n\nAny ideas on how I can get this to work?\n\n**Update**\n\nI've tried:\n\n- Added `@layer base` in my typography.css file, but receive an error: `Syntax error: /typography.css \"@layer base\" is used but no matching @tailwind base`\n\n- Also tried do it at the import layer, eg `@layer base { @import(\"typography.css\") }`, that doesn't create an error but the styles aren't applied.\n\n========================================\n\nTop Answer:\nYou need set the target layer for this to work.\nSince you want to change the base html elements in your `typography.css` file do:\n\n```\n@layer base {\n h1 {\n @apply text-6xl font-normal leading-normal mt-0 mb-2;\n }\n}\n```\n\nMore details in the documentation here: https://tailwindcss.com/docs/adding-base-styles\n\n========================================\n\nCode:\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@tailwind variants;\n\n@import './typography.css';\n```\n\n```css\nh1 {\n @apply text-6xl font-normal leading-normal mt-0 mb-2;\n}\n...\n```\n\n```text\nh1\n```\n\n```text\nh2\n```\n\n```text\n@layer base\n```\n\n```text\nSyntax error: /typography.css \"@layer base\" is used but no matching @tailwind base\n```\n\n```text\n@layer base { @import(\"typography.css\") }\n```\n\n```text\nnpm install -D postcss-import\n```\n\n```js\n// /postcss.config.js\nmodule.exports = {\n plugins: {\n \"postcss-import\": {}, // <= Add this\n tailwindcss: {},\n autoprefixer: {}\n }\n}\n```\n\n```css\n@import \"tailwindcss/base\"; // <= used to be `@tailwind base;`\n@import \"./custom-base-styles.css\";\n\n@import \"tailwindcss/components\"; // <= used to be `@tailwind components;`\n@import \"./custom-components.css\";\n\n@import \"tailwindcss/utilities\"; // <= used to be `@tailwind utilities;`\n@import \"./custom-utilities.css\";\n```\n\n```css\n@layer base {\n h1 {\n @apply text-3xl text-slate-800;\n }\n}\n```\n\n```text\npostcss.config.js\n```\n\n```text\ntailwindcss\n```\n\n```text\n@import base;\n```\n\n```text\n@import \"tailwindcss/base\";\n```\n\n```text\ncomponents\n```\n\n```text\nutilities\n```\n\n```text\nbase\n```\n\n```text\nbase\n```\n\n```text\ncomponents\n```\n\n```text\ncomponents\n```\n\n```text\ncustom-base-styles.css\n```\n\n```css\n@layer base {\n h1 {\n @apply text-6xl font-normal leading-normal mt-0 mb-2;\n }\n}\n```\n\n```text\ntypography.css\n```\n\n```js\n.postCss('resources/css/app.css', 'public/css', [\n require('postcss-import'), // <------------ add postcss-import here\n require('tailwindcss'),\n])\n```\n\n```text\npostcss-import\n```\n\n```text\n.postCss(....)\n```\n\n```text\npostcss.config.js\n```\n\n```text\n@tailwind base;\n```\n\n```text\ntypography.css\n```\n\n```css\n@import \"./tailwind-base-statement.css\";\n@import \"./typography.css\";\n```\n\n```text\n@tailwind base;\n```\n\n```css\n@import 'tailwindcss/base' layer(Base);\n@import './base/typography.css' layer(Base);\n\n@import 'tailwindcss/components' layer(Components);\n\n@import 'tailwindcss/utilities' layer(Utilities);\n\n@layer Base {\n #root {\n @apply some-styles;\n }\n}\n```\n\n```css\n...\n@import 'baz.css' layer(baz-layer);\n...\n```\n\n```text\nlayer()\n```\n\n```text\n@import\n```\n\n```text\nlayer()\n```\n\n```text\n@import 'tailwindcss/base' layer(Base).\n```\n\n```text\n@layers\n```\n\n```text\nlayer\n```\n\n```text\npostcss.config.js\n```\n\n```text\n@import './typography.css';\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nnpm i postcss-import\nnpm i postcss-nesting\n```\n\n```text\nmodule.exports = {\n plugins: {\n 'postcss-import': {},\n 'tailwindcss/nesting': 'postcss-nesting',\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n========================================\n\nComments:\n- So, I put `@layer base {... }` inside my typography.css file and I'm now getting this error: `Syntax error: /typography.css \"@layer base\" is used but no matching`@tailwind base` directive is present.`\n- PS I also tried doing `@layer base { @import(\"typography.css\") }`, which doesn't create an error but it doesn't apply the style.\n- This didn't work in my setup when I attempted it. `custom-base-styles.css '@layer base' is used but no matching '@tailwind base' directive is present.` I believe the purpose of @layer is to more the css to the location the @tailwind directive is called. So if you import your custom styles under the tailwind @imports then you shouldn't need to use @layers. Also note that using the @tailwind directives within a custom file duplicates the definitions for all the css.\n- I've updated the title to make it more clear, this should work for Next JS projects, not sure about Create React App.","metadata":{"transformedAt":"2026-08-18T18:33:42.880Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":44,"totalLines":300,"estimatedTokens":1281}}72{"id":"stack-54784225","source":"stackoverflow","questionId":54784225,"title":"Aligning two elements, one left and the other right","tags":["html","css","tailwind-css"],"text":"Title: Aligning two elements, one left and the other right\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm experimenting with TailwindCSS for the first time and I'm trying to customize the table in the last row of the temple below.\n\nhttps://www.tailwindtoolbox.com/templates/admin-template-demo.php\n\nI'd like to add a circle in the right-hand side of the header. Something like\n\nhttps://i.sstatic.net/sbhTa.png\n\nI have tried different solutions and the one that gets closer to what I want is\n\n```\n\n \n\n### \n\n \n \n```\n\nWhich places the green dot over the lower border. Clearly `float-right` isn't the right approach but I can't figure out a way to make it work.\n\nAny ideas?\n\n========================================\n\nCode:\n```text\n<div class=\"border-b-2 rounded-tl-lg rounded-tr-lg p-2\">\n <h5 class=\"uppercase\"><%= host.name %></h5>\n <span class=\"rounded-full px-2 py-2 float-right\"></span>\n </div>\n```\n\n```text\nfloat-right\n```\n\n```text\n<div class=\"border-b-2 rounded-tl-lg rounded-tr-lg p-2 clearfix\">\n <h5 class=\"uppercase float-left\"><%= host.name %></h5>\n <div class=\"rounded-full h-3 w-3 circle bg-green float-right\"></div>\n</div>\n```\n\n```text\n<div class=\"border-b-2 rounded-tl-lg rounded-tr-lg p-2 flex\">\n <h5 class=\"uppercase flex-1 text-center\"><%= host.name %></h5>\n <div class=\"rounded-full h-3 w-3 circle bg-green\"></div>\n</div>\n```\n\n```text\n<span>\n```\n\n```text\n<div>\n```\n\n```text\n<span>\n```\n\n```text\n<h5>\n```\n\n```text\nclearfix\n```\n\n```text\npx-2\n```\n\n```text\nh-*\n```\n\n```text\nw-*\n```\n\n```text\nbg-green\n```\n\n```text\nflex\n```\n\n========================================\n\nComments:\n- I used the second and it's work.. so upvoted.","metadata":{"transformedAt":"2026-08-18T18:33:42.880Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":101,"estimatedTokens":420}}73{"id":"stack-67002320","source":"stackoverflow","questionId":67002320,"title":"How to make only placeholder italics in tailwind css?","tags":["html","css","tailwind-css"],"text":"Title: How to make only placeholder italics in tailwind css?\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to have an input text box that has only the placeholder as italics but not the text content.\n\nI know we can do this using normal css like so:\n\n```\n::-webkit-input-placeholder {\n font-style: italic;\n}\n```\n\nBut how to do it in tailwind way?\n\n========================================\n\nTop Answer:\nI'm not found an existing Tailwind utility to change the font-style property, but in Tailwind you can create your custom utilities.\n\n```\n@layer utilities {\n .italic-plc::placeholder {\n font-style: italic;\n }\n}\n```\n\nTailwindCSS related doc page: https://tailwindcss.com/docs/adding-new-utilities\n\n========================================\n\nCode:\n```text\n::-webkit-input-placeholder {\n font-style: italic;\n}\n```\n\n```html\n<input type=\"text\" class=\"placeholder:italic\" />\n```\n\n```css\n@layer utilities {\n .placeholder-italic::placeholder{\n @apply italic\n }\n}\n```\n\n```html\n<input type=\"text\" class=\"placeholder-italic\" />\n```\n\n```css\n@layer utilities {\n .italic-plc::placeholder {\n font-style: italic;\n }\n}\n```\n\n```text\nplaceholder-shown:italic\n```\n\n```text\n<input class=\"placeholder:italic placeholder:text-gray-400\" />\n```\n\n```text\n<input type=\"text\" class=\"placeholder:font-bold\" />\n```\n\n========================================\n\nComments:\n- This will also make the value italic; not just the placeholder\n- @tauzN you're right, I forgot to add `::placeholder`. Now I've correct my answer","metadata":{"transformedAt":"2026-08-18T18:33:42.881Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":82,"estimatedTokens":381}}74{"id":"stack-75954438","source":"stackoverflow","questionId":75954438,"title":"How to make a shadow from one side with tailwind","tags":["tailwind-css"],"text":"Title: How to make a shadow from one side with tailwind\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to make a shadow from one side only, from the right side with tailwind. If I use `shadow-xl` it adds the shadow to all sides.\n\n========================================\n\nTop Answer:\nOr you could use the Tailwind plugin, `tailwind-extended-shadows`; it adds utilities for specifying box-shadow `x` + `y` offsets (i.e. directions), and shadow `spread`. They work alongside the built-in `shadow-{size}` (controls `blur`) and `shadow-{color}` classes, so you have full control over your shadows via utility classes.\n\nFor example:\n\n```\n...\n```\n\nGithub: https://github.com/kaelansmith/tailwind-extended-shadows\n\nPlayground: https://play.tailwindcss.com/9X5nqVNd1d\n\n========================================\n\nCode:\n```text\nshadow-xl\n```\n\n```text\n<div class=\"relative h-screen bg-red-50\">\n <div class=\"absolute inset-20 h-12 w-36 rounded-lg bg-indigo-500 shadow-[rgba(0,0,15,0.5)_10px_5px_4px_0px]\">shadow</div>\n</div>\n```\n\n```html\n<div class=\"shadow-lg shadow-slate-900/20 shadow-b-2 shadow-r-[3px] -shadow-spread-2\">...</div>\n```\n\n```text\ntailwind-extended-shadows\n```\n\n```text\nx\n```\n\n```text\ny\n```\n\n```text\nspread\n```\n\n```text\nshadow-{size}\n```\n\n```text\nblur\n```\n\n```text\nshadow-{color}\n```\n\n```text\n\"shadow-[0_0_20px] shadow-green-400/20\"\n```\n\n========================================\n\nComments:\n- Please disclose your affiliation to the linked repository within your answer. Also, note that linking to something you made is allowed, but linking to it too much can get your answers deleted as spam. See how to not be a spammer.\n- Thanks - I appreciate this (don't see it it as too spammy, but fair warned). I wouldn't have known it existed, if it wasn't for this very search result. I need a way to shift the shadow based on the size of the shadow, eg `shadow-md`, - an issue that this plugin solves quite tidily.\n- This lib has not been updated to TailwindCSS v4 as of May 2025, just in case anyone is looking to use this. The issue tracking this is here","metadata":{"transformedAt":"2026-08-18T18:33:42.881Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":77,"estimatedTokens":518}}75{"id":"stack-77195390","source":"stackoverflow","questionId":77195390,"title":"You're importing a component that imports react-dom/server","tags":["reactjs","typescript","email","tailwind-css","next.js13"],"text":"Title: You're importing a component that imports react-dom/server\nTags: reactjs, typescript, email, tailwind-css, next.js13\nSource: Stack Overflow\n\nQuestion:\nI am having the following error when I use the react-email package in my next.js project the problem is caused by the Tailwind component so when I comment it out it works but since I want to apply some classes to style my email any way I can get around this would be appreciated, thanks in advance!\n\n```\nFailed to compile\n./node_modules\\@react-email\\tailwind\\dist\\index.mjs\nReactServerComponentsError:\n\nYou're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials\n\nMaybe one of these should be marked as a client entry \"use client\":\n ./node_modules\\@react-email\\tailwind\\dist\\index.mjs\n ./email\\contact-form-email.tsx\n ./actions\\sendEmail.ts\n```\n\ncontact-form-email.tsx\n\n```\nimport React from 'react'\nimport {\n Html,Body,Head,Heading,Hr,Container,Preview,Section,Text\n} from '@react-email/components';\n// import {Tailwind} from '@react-email/tailwind'\n\ntype ContactFormEmailProps = {\n message: string;\n email: string;\n}\n\nexport default function ContactFormEmail({message,email}: ContactFormEmailProps) {\n return (\n \n \n New message from your portfolio website\n {/* */}\n \n \n \n You received the following message from the contact form.\n {message}\n \n The sender's email is: {email}\n \n \n \n {/* */}\n \n )\n}\n```\n\n========================================\n\nTop Answer:\nDowngrade `react-email/tailwind` to `^0.0.8`. I encountered this when I used the latest version `react-email/tailwind`.\n\n========================================\n\nCode:\n```text\nFailed to compile\n./node_modules\\@react-email\\tailwind\\dist\\index.mjs\nReactServerComponentsError:\n\nYou're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials\n\nMaybe one of these should be marked as a client entry \"use client\":\n ./node_modules\\@react-email\\tailwind\\dist\\index.mjs\n ./email\\contact-form-email.tsx\n ./actions\\sendEmail.ts\n```\n\n```text\nimport React from 'react'\nimport {\n Html,Body,Head,Heading,Hr,Container,Preview,Section,Text\n} from '@react-email/components';\n// import {Tailwind} from '@react-email/tailwind'\n\ntype ContactFormEmailProps = {\n message: string;\n email: string;\n}\n\nexport default function ContactFormEmail({message,email}: ContactFormEmailProps) {\n return (\n <Html>\n <Head />\n <Preview>New message from your portfolio website</Preview>\n {/* <Tailwind> */}\n <Body className=\"bg-gray-100 text-black\">\n <Container>\n <Section className=\"bg-white borderBlack my-10 px-10 py-4 rounded-md\">\n <Heading className=\"leading-tight\">You received the following message from the contact form.</Heading>\n <Text>{message}</Text>\n <Hr />\n <Text>The sender's email is: {email}</Text>\n </Section>\n </Container>\n </Body>\n {/* </Tailwind> */}\n </Html>\n )\n}\n```\n\n```text\nconst nextConfig = {\n ...,\n experimental: {\n ...,\n serverComponentsExternalPackages: [\n '@react-email/components',\n '@react-email/render',\n '@react-email/tailwind'\n ]\n }\n};\n```\n\n```text\nreact-email/tailwind\n```\n\n```text\n^0.0.8\n```\n\n```text\nreact-email/tailwind\n```\n\n```text\nreactServerComponents: {\nuse: [\"@react-email/tailwind\"]}\n```\n\n========================================\n\nComments:\n- But what does `@/lib/utils` import? Because if that's a catch-all utils file, good bet that either directly or indirectly imports `react-dom/server`.\n- @Mike'Pomax'Kamermans i add `@/lib/utils` file to the question so that you can see it has not caused the issue.\n- Then the next action is going to have to be turning your code in a minimal reproducible example, so that you can show enough code in your post that folks can copy, and see reproduce the same error (although it's entirely possible that while forcing yourself to form that MCVE, you're going to find the error already)\n- @Mike'Pomax'Kamermans so, what are you saying, make it clear. I already give the necessary code?\n- No, what I'm saying is to read the minimal reproducible example article, and then applying that to your case by further reducing the fairly large amount of code you're showing into a single, small, piece of code that still reproduces the problem. You're currently showing a number of files because you don't know where the problem is. Running through the MCVE exercise helps with that (it helps with that so well, in fact, that it usually makes you discover the problem on your own, no longer needing folks on SO to help. But in the rare cases that doesn't happen, the now minimal code is perfect for putting in your post)\n- please carefully read my question from top to bottom, I now what caused the error and in fact I mentioned it at the very top, I guess you do not seem to read it and you think it is caused by `@/lib/utils`,so i provided it to show you it did not caused the error. Then why I provided other files here because as you might have guessed it I needed to show every body how they use the `contact-form-emial.tsx` file so that it is clear.\n- No, I'm not, I want you to edit your post to focus *on that*: if you know it's the tailwind component, then show the smallest possible bit of code that *shows that happening* to folks who copy-paste that code. E.g. a single self-contained `App` that does nothing except show an `` or something, imports tailwind, and shows that error happening when we copy your code and run it. If it is what you say, then none of the code you're currently showing are necessary, but a minimal reproducible example is.\n- Note that this is more of an anecdote than an answer: *why* should folks downgrade? EI.e. what changed in the newer version(s) to cause this, and do you have links to issues that talk about that, or even official docs, etc?\n- i already tried to use 'use client' directive on `contact-form-email.tsx` but that does not work since i am importing and using that client component in sendEmail.tsx which is a server component because i am using serverActions which is not possible.please tell me how could i disable the eslint rule for that one file\n- Any luck on this?\n- sorry for late replay, I was having some hardware issue with my pc. Indeed it works.\n- First I tried adding this to my main project's next.config, and it didn't work. I had to specifically add it to the next.config of the .react-email folder, that's generated when running `pnpm email` for the first time.\n- Probably the worst answer I have ever heard. Don't fix the problem, just mark them as external. WTF?\n- This could lead to a whole slew of other problems and things exposed. This is a shitty answer and should never have been accepted.\n- @JacquesKoekemoer could you elaborate","metadata":{"transformedAt":"2026-08-18T18:33:42.881Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":162,"estimatedTokens":1792}}76{"id":"stack-72380072","source":"stackoverflow","questionId":72380072,"title":"Specifying grid column/row size in tailwindcss","tags":["tailwind-css"],"text":"Title: Specifying grid column/row size in tailwindcss\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI would like to create a grid with tailwind css where the first column is very narrow and the second one is very wide. Normally I find the tailwind docs very intuitive but I'm not understanding this one. Using `grid-cols-{n}` I can create equally sized columns but I don't understand how to make differently sized columns. How can I go about this?\n\n========================================\n\nTop Answer:\nIf you want create columns with different widths then it will be an implicitly-created grid.\n\n```\n\n \n Hello 1\n Hello 2\n Hello 3\n \n\n```\n\nhttps://play.tailwindcss.com/7XjBZDzwml\n\nThis is the relevant documentation here:\nhttps://tailwindcss.com/docs/grid-auto-columns\n\nAnd it explains how you can customize your theme if needed too.\n\n========================================\n\nCode:\n```text\ngrid-cols-{n}\n```\n\n```html\n<div class=\"grid grid-cols-[max-content_1fr] gap-x-4\">\n <div class=\"bg-red-200 p-4\">Column 1</div>\n <div class=\"bg-green-200 p-4\">Column 2</div>\n</div>\n```\n\n```html\n<div class=\"grid grid-cols-12 gap-x-4 text-center\">\n <div class=\"bg-slate-400 p-4\">Col</div>\n <div class=\"bg-slate-400 p-4 col-span-2\">Col</div>\n <div class=\"bg-slate-400 p-4\">Col</div>\n <div class=\"bg-slate-400 p-4\">Col</div>\n <div class=\"bg-slate-400 p-4\">Col</div>\n <div class=\"bg-slate-400 p-4 col-span-4\">Col</div>\n <div class=\"bg-slate-400 p-4\">Col</div>\n <div class=\"bg-slate-400 p-4\">Col</div>\n </div>\n```\n\n```html\n<div class=\"grid grid-cols-12 gap-x-4 text-center\">\n <div class=\"bg-slate-400 p-4 col-span-4\">Col</div>\n <div class=\"bg-slate-400 p-4 col-span-8\">Col</div>\n</div>\n```\n\n```html\n<div class=\"p-5 bg-slate-200\">\n <div class=\"grid grid-flow-col auto-cols-max gap-x-5\">\n <div class=\"bg-white w-20\">Hello 1</div>\n <div class=\"bg-white w-40\">Hello 2</div>\n <div class=\"bg-white\">Hello 3</div>\n </div>\n</div>\n```\n\n```text\ngrid grid-cols-[2rem,8fr]\n```\n\n========================================\n\nComments:\n- Your link just shows a single row, which is not a grid. I do want to create a responsive grid where my child divs have a specified width, and I want the grid to wrap and create as many rows as necessary.\n- I posted a question: stackoverflow.com/questions/77181779/…\n- I ended up using a similar solution as you proposed in your first example using a slightly different syntax `grid grid-cols-[2rem,8fr]`\n- That's almost identical to the first example in my answer: `grid-cols-[max-content_1fr]`\n- is the syntax where you use an underline an alternative to using a comma?\n- Correct, in the end the example I shared compiles to: `grid-template-columns: max-content 1fr;`, you can validate this yourself using Tailwind Play\n- Ah okay, that's what was tripping me up - I will mark yours as the answer then","metadata":{"transformedAt":"2026-08-18T18:33:42.881Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":87,"estimatedTokens":715}}77{"id":"stack-74621735","source":"stackoverflow","questionId":74621735,"title":"Form field layout and placeholder issues after adding TailwindCSS v3","tags":["javascript","angular","angular-material","tailwind-css","tailwind-css-3"],"text":"Title: Form field layout and placeholder issues after adding TailwindCSS v3\nTags: javascript, angular, angular-material, tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI am using Angular 15 with Angular Material 15, then I have added Tailwind CSS as per the instruction https://v3.tailwindcss.com/docs/guides/angular.\n\nThe material component design got mismatched as shown below:\n\nhttps://i.sstatic.net/efYBq.png\n\nThe placeholder name is truncated as it should be:\n\nhttps://i.sstatic.net/eXFVn.png\n\nThe line appears in the text box.\n\n**style.scss**\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n**tailwind.config.js**\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n========================================\n\nTop Answer:\nYou must add into your `tailwind.config.js` in `module.exports` the next config:\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n corePlugins: {\n preflight: false\n },\n}\n```\n\nUsing the above solution can cause some problems with TailwindCSS classes. For this reason it is better to add the following lines in `style.scss`:\n\n```\n.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {\n border-right-style: hidden;\n}\n```\n\n========================================\n\nCode:\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```css\n*, ::before, ::after {\n border-style: none;\n}\n```\n\n```css\n.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {\n border-right-style: hidden;\n}\n```\n\n```text\nborder-style: none;\n```\n\n```text\nmat-forms-field > mat-label\n```\n\n```text\n*, ::before, ::after {\n border-style: none;\n}\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n corePlugins: {\n preflight: false\n },\n}\n```\n\n```css\n.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {\n border-right-style: hidden;\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmodule.exports\n```\n\n```text\nstyle.scss\n```\n\n```text\n//*******************************\n//** Material / tailwind fixes **\n//*******************************\n.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field\n .mdc-notched-outline__notch {\n border-right-style: hidden;\n}\n\n.mat-mdc-input-element {\n box-shadow: none !important;\n}\n\n.sticky {\n position: sticky !important;\n}\n\n[type='text'],\n[type='email'],\n[type='url'],\n[type='password'],\n[type='number'],\n[type='date'],\n[type='datetime-local'],\n[type='month'],\n[type='search'],\n[type='tel'],\n[type='time'],\n[type='week'],\n[multiple],\ntextarea,\nselect {\n padding: 0;\n border: none;\n}\n```\n\n```text\ncorePlugins: { preflight: false },\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./src/**/*.{html,ts}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n corePlugins: { preflight: false },\n};\n```\n\n========================================\n\nComments:\n- having same issue, did you get to solve it?\n- @add9 Nope I haven't found the solution till yet\n- stackoverflow.com/a/74501000/649419 here is one solution worked for me\n- @add9 That seems to be working fine for the border, however, the padding for placeholder is not working.\n- I am unable to reproduce the placeholder issue, can you post the HTML and any custom CSS you are using for the form field\n- I also had to add this: .mat-mdc-input-element { box-shadow: none !important; }\n- Not working, it creates a space at the border.\n- I just had the exact same problem in a new project with angular 15.1.0 and tailwind 3.2.6 and the above code fixed the problem again.\n- There's little value in reposting a correct answer. Use the upvote/downvote functions to express how useful an answer is to others.","metadata":{"transformedAt":"2026-08-18T18:33:42.881Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":202,"estimatedTokens":1036}}78{"id":"stack-79450336","source":"stackoverflow","questionId":79450336,"title":"How can I setup tailwind.config.js with Angular & TailwindCSS v4 application","tags":["angular","tailwind-css","tailwind-css-4"],"text":"Title: How can I setup tailwind.config.js with Angular & TailwindCSS v4 application\nTags: angular, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI used this setup guide for setting TailwindCSS with my Angular application. However there is no `tailwind.config.js`. I tried a lot of online blogs but didn't work. How can I setup `tailwind.config.js` and customize the behavior. Is there a another way to customize tailwind with Angular.\n\nI even added `tailwind.config.js` manually but when I use those configuration, it didn't work. These are the version I m using.\n\n- Angular v19.1\n\n- TailwindCSS v4.0\n\nTailwindCSS is working in my application but Is there a way to configure with `tailwind.config.js`.\n\n========================================\n\nCode:\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@config \"../../tailwind.config.js\";\n```\n\n```text\n@config\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@config\n```\n\n```text\nnpx tailwindcss\n```\n\n```text\nnpx @tailwindcss/cli\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@config\n```\n\n```text\n@config\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@theme\n```\n\n```text\n@plugin\n```\n\n========================================\n\nComments:\n- sorry ,but where is the problem , what is working and not working I don't get your point if the setup guid was working for you ??\n- I want to customise styles like defining my own colors or spaces. When I was using vite and react , i would get tailwind.config.js and I used to define. Now using this setup , I am not able to customize coz no tailwind config file\n- @MuhammedAlbarmavi It works, but the question is whether it could be configured with a tailwind.config.js file, as it is currently using v4 without one. They manually created the config file, but from v4 onward, this is irrelevant. Starting with v4, they are moving away from JS-based configuration, so even though they created the file and added content to it, v4 did not take it into account. However, there is still a way to force JS-based configuration using the `@config` directive.\n- Is it considered bad practice to use config and directive, ie `@config \"../../tailwind.config.js\";` to extend tailwind? For example, I want to add a `max-w-9xl: 96rem` to the config file, pipe it in with the `@config` directive, then in `globals.css`be able to override it `@theme { --max-w-9xl: 92rem; }`","metadata":{"transformedAt":"2026-08-18T18:33:42.881Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":17,"totalLines":93,"estimatedTokens":622}}79{"id":"stack-77742654","source":"stackoverflow","questionId":77742654,"title":"TailwindCSS: How to do a light mode only modification?","tags":["tailwind-css","darkmode","lightmode"],"text":"Title: TailwindCSS: How to do a light mode only modification?\nTags: tailwind-css, darkmode, lightmode\nSource: Stack Overflow\n\nQuestion:\nI would like to do a light mode only modification of a style.\n\nUnfortunately, it doesn't seem like `light:` exists.\n\nI know that the default approach is to style the light styles and then override in dark mode.\n\nHowever, my styles come from a library, so in order to achieve the override I want, I'd have to read the source code of the styling library, and then manually set the `dark:` value to what it was. Something like `light:` would make the code much cleaner.\n\nIs there anything like it?\n\nI tried Google, looking for SO and the Tailwind docs, but couldn't find anything like it.\n\nI also couldn't find an \"inversion\" modifier (e.g. `non:dark:`).\n\n========================================\n\nTop Answer:\n`addVariant` is probably your best bet as it does not involve installing any new dependencies. Here's the documentation if you're interested. (Note that you don't actually need to import the `plugin` function like they do in the examples. You can use an anonymous function instead like I do in the examples below)\n\nTailwindCSS Playground with a working example.\n\n```\nconst config: Config = {\n darkMode: ['selector'],\n \n theme: {\n // ...\n },\n\n plugins: [\n function ({ addVariant }) {\n /**\n * If you have a .light class\n */\n addVariant('light', '.light &')\n \n /**\n * If you only have .dark to work with, simply swap out\n * `html` in the example below with the parent tag where\n * you are applying the .dark class\n */\n addVariant('light', 'html:not(.dark) &')\n\n /**\n * Uses system default preference.\n */\n addVariant('light', '@media (prefers-color-scheme: light)')\n },\n ],\n};\n```\n\nGood luck!\n\n========================================\n\nCode:\n```text\nlight:\n```\n\n```text\ndark:\n```\n\n```text\nlight:\n```\n\n```text\nnon:dark:\n```\n\n```text\nconst { themeVariants, prefersLight, prefersDark } = require(\"tailwindcss-theme-variants\");\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n theme: {\n // ...\n },\n plugins: [\n themeVariants({\n themes: {\n light: {\n mediaQuery: prefersLight /* \"@media (prefers-color-scheme: light)\" */,\n },\n dark: {\n mediaQuery: prefersDark /* \"@media (prefers-color-scheme: dark)\" */,\n },\n },\n }),\n ],\n}\n```\n\n```text\n<div class=\"dark:bg-black light:bg-red-300 py-6\">\n\n...\n\n</div>\n```\n\n```text\nconst { themeVariants } = require(\"tailwindcss-theme-variants\");\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n theme: {\n // ...\n },\n\n plugins: [\n themeVariants({\n themes: {\n light: {\n selector: \".light-theme\",\n },\n dark: {\n selector: \".dark-theme\",\n },\n },\n }),\n ],\n};\n```\n\n```text\n:root.light-theme .light\\:bg-red-300{\n --tw-bg-opacity: 1;\n background-color: rgb(252 165 165 / var(--tw-bg-opacity))\n}\n```\n\n```text\nlight:\n```\n\n```text\ndark:\n```\n\n```text\nlight:\n```\n\n```text\nhtml\n```\n\n```js\nconst config: Config = {\n darkMode: ['selector'],\n \n theme: {\n // ...\n },\n\n plugins: [\n function ({ addVariant }) {\n /**\n * If you have a .light class\n */\n addVariant('light', '.light &')\n \n /**\n * If you only have .dark to work with, simply swap out\n * `html` in the example below with the parent tag where\n * you are applying the .dark class\n */\n addVariant('light', 'html:not(.dark) &')\n\n /**\n * Uses system default preference.\n */\n addVariant('light', '@media (prefers-color-scheme: light)')\n },\n ],\n};\n```\n\n```text\naddVariant\n```\n\n```text\nplugin\n```\n\n```css\n@custom-variant light (html:not(.dark) &);\n```\n\n```html\n<div class=\"light:bg-red-500\">Hello world!!!</div>\n```\n\n```text\nindex.css\n```\n\n```text\nbg-white dark:bg-black coffee:bg-orange-800\n```\n\n```text\nbg-black light:bg-white coffee:bg-orange-800\n```\n\n```js\nconst prefersLightScheme = window.matchMedia('(prefers-color-scheme: light)').matches;\nconst prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;\n\nif (prefersLightScheme) {\n console.log(\"> The user prefers a LIGHT color scheme.\");\n} else if (prefersDarkScheme) {\n console.log(\"> The user prefers a DARK color scheme.\");\n} else {\n console.log(\"> The user has no preference for a color scheme.\");\n}\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant light (@media (prefers-color-scheme: light));\n</style>\n\n<div class=\"w-72 h-32 text-gray-500 border-2 bg-black light:bg-white\">\n ...\n</div>\n```\n\n```js\nlet currentTheme;\nconst body = document.body;\n\nfunction setLightTheme() {\n body.setAttribute('data-theme', 'light');\n currentTheme = 'light';\n}\n\nfunction setDarkTheme() {\n body.setAttribute('data-theme', 'dark');\n currentTheme = 'dark';\n}\n\nfunction setCoffeeTheme() {\n body.setAttribute('data-theme', 'coffee');\n currentTheme = 'coffee';\n}\n\nfunction toggleTheme() {\n if (currentTheme === 'light') {\n setDarkTheme(); // Switch to dark theme\n } else if (currentTheme === 'dark') {\n setCoffeeTheme(); // Switch to coffee theme\n } else {\n setLightTheme(); // Switch to light theme\n }\n}\n\n// This way, we can set themes based on custom parameters. For example, you can take into account the browser's preferred light/dark mode, the favorite theme saved by a logged-in user, etc.\nsetDarkTheme(); // Set dark theme first time\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n\n<style type=\"text/tailwindcss\">\n/* Detect variant by classname */\n@custom-variant light (&:where(.light, .light *));\n@custom-variant coffee (&:where(.coffee, .coffee *));\n\n/* Detect variant by data-theme attribute */\n@custom-variant light (&:where([data-theme=light], [data-theme=light] *));\n@custom-variant coffee (&:where([data-theme=coffee], [data-theme=coffee] *));\n\n/* You can use either one, both, or another custom solution. If you use both at the same time, both will work, and the stronger CSS specificity will win, determining how the theme will appear. */\n/* https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity */\n</style>\n\n<div class=\"flex flex-col gap-4 m-4\">\n <button\n class=\"px-4 py-2 rounded-lg border\n bg-black light:bg-white coffee:bg-orange-950\n text-white light:text-black coffee:text-orange-200\n cursor-pointer\n \"\n onclick=\"toggleTheme()\"\n >\n Toggle light/dark/coffee mode\n </button>\n <p\n class=\"\n p-4 rounded-lg\n bg-black light:bg-white coffee:bg-orange-950\n text-white light:text-black coffee:text-orange-200\n \"\n >\n This is a themed paragraph. The theme changes dynamically.\n </p>\n</div>\n```\n\n```text\nlight\n```\n\n```text\ndark\n```\n\n```text\nlight:\n```\n\n```text\nbg-red-300 dark:bg-red-800\n```\n\n```text\nbg-red-800 light:bg-red-300\n```\n\n```text\nlight:\n```\n\n```text\naddVariant\n```\n\n```text\n@custom-variant\n```\n\n```text\n@custom-variant\n```\n\n```text\n@media prefers-color-scheme\n```\n\n```text\n@custom-variant\n```\n\n```text\nprefers-color-scheme\n```\n\n```text\nprefers-color-scheme\n```\n\n```text\ndark\n```\n\n```text\ndark\n```\n\n```text\nlight\n```\n\n```text\n.light\n```\n\n```text\ndata-theme=\"light\"\n```\n\n```text\ncoffee\n```\n\n```text\n@custom-variant\n```\n\n```js\nplugins: [\n ({ addVariant }: any) => addVariant(\"light\", \".light &\"),\n],\n```\n\n```html\n<button class=\"light:bg-[red]\">Submit</button>\n```\n\n```html\n<html class=\"light\"></html>\n```\n\n```css\n@media (prefers-color-scheme: light) {\n .your-class {\n /* light mode only styles */\n }\n}\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n // ... other extensions\n },\n },\n plugins: [\n function({ addVariant }) {\n addVariant('light', '@media (prefers-color-scheme: light)')\n }\n ]\n}\n```\n\n```html\n<div class=\"light:bg-white\">\n <!-- This will only apply in light mode -->\n</div>\n```\n\n```html\n<div class=\":not(.dark):bg-white\">\n <!-- This will only apply when dark class is not present -->\n</div>\n```\n\n```text\nlight:\n```\n\n```text\ndark:\n```\n\n```text\ndark:\n```\n\n```text\n@media (prefers-color-scheme: light)\n```\n\n```text\n:not()\n```\n\n```text\ndark:\n```\n\n========================================\n\nComments:\n- There is `dark:`: tailwindcss.com/docs/dark-mode#basic-usage everything you add without the dark: variant will apply to both light and dark.\n- @CornelRaiu I know, but that's the point of the question. I don't want to add something to BOTH light and dark, but to light ONLY, without having to then override dark again. Maybe my question wasn't clear enough, but the library I use adds a style for both dark and light, and I only want to override the light style.\n- The equivalent of the `addVariant` function mentioned in v3 will be the `@custom-variant` directive in the v4 CSS-first configuration. Read more.\n- In this case, the default classes (without `light` and `dark` variants) should be considered dark mode styles. The `light:` variant would only apply when deviating from the dark theme. This principle is implemented in my solution: instead of `bg-red-300 dark:bg-red-800`, use `bg-red-800 light:bg-red-300`.\n- Would really be great to find a solution that doesn't require pulling in another dependency\n- The equivalent of the `addVariant` function mentioned in v3 will be the `@custom-variant` directive in the v4 CSS-first configuration. Read more.\n- And if for whatever reason you can't change the config, you can do `[html:not(.dark)_&]:bg-red-500`","metadata":{"transformedAt":"2026-08-18T18:33:42.881Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":57,"totalLines":474,"estimatedTokens":2375}}80{"id":"stack-67798540","source":"stackoverflow","questionId":67798540,"title":"Tailswind css - \"list-disc\" is not styling bullets correctly (double bullet symbols)","tags":["tailwind-css","tailwind-in-js"],"text":"Title: Tailswind css - \"list-disc\" is not styling bullets correctly (double bullet symbols)\nTags: tailwind-css, tailwind-in-js\nSource: Stack Overflow\n\nQuestion:\nHow does one use the list-disc class to style bullets, using Tailwindscss?\n\nMy package.json includes:\n\n```\n\"@tailwindcss/aspect-ratio\": \"^0.2.0\",\n \"@tailwindcss/forms\": \"^0.3.2\",\n \"@tailwindcss/line-clamp\": \"^0.2.0\",\n \"@tailwindcss/typography\": \"^0.4.0\",\n \"tailwindcss\": \"^2.1.1\",\n \"tailwindcss-stimulus-components\": \"^2.1.2\",\n```\n\nI try using `` both without and with the /typography plugin's `class=\"prose\"` and they look different but neither is as expected, and Firefox and Chrome looks the same:\n\nhttps://i.sstatic.net/vJqTS.jpg\n\nWithout a container (List 1) with `class=\"prose\"` the bullets are completely unstyled, no indent, and show browsers default bullet point.\n\nWith the `class=\"prose\"` container (List 2) it *does* create a hanging indent, *and* a lighter bullet point *but* also has the browser default bullet point (so double bullet symbol):\n\nHere's the HTML of creating that view:\n\n```\n\n \n\n### List 1\n\n \n \n \n- Bullet one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence.\n \n- Shorter second sentence.\n \n \n\n \n\n### List 2\n\n \n \n \n- Bullet one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence.\n \n- Shorter second sentence.\n \n \n \n```\n\nI'm fairly new to Tailwindcss, so I might have missed some parent element that \"resets\" the default bullets?\n\nPOSSIBLE CULPRIT: The culprit is the `m-4` class in the container div, adding margin exposes a browser-default bullet that is dangling off-screen, unless there is any padding or margin in which case it is no longer off-screen.\n\n========================================\n\nTop Answer:\nBy default Tailwind will set ``'s left padding to zero. That's why bullets are not showing by default. Try adding `pl-5` for example to it and that would solve the problem.\n\n```\n\n \n- Item\n\n```\n\n========================================\n\nCode:\n```text\n\"@tailwindcss/aspect-ratio\": \"^0.2.0\",\n \"@tailwindcss/forms\": \"^0.3.2\",\n \"@tailwindcss/line-clamp\": \"^0.2.0\",\n \"@tailwindcss/typography\": \"^0.4.0\",\n \"tailwindcss\": \"^2.1.1\",\n \"tailwindcss-stimulus-components\": \"^2.1.2\",\n```\n\n```text\n<div class=\"container mx-auto m-4\">\n <h3>List 1</h3>\n <div>\n <ul class=\"list-disc\">\n <li>Bullet one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence.</li>\n <li>Shorter second sentence. </li>\n </ul>\n </div>\n\n <h3>List 2</h3>\n <div class=\"prose\">\n <ul class=\"list-disc\">\n <li>Bullet one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence, one long sentence.</li>\n <li>Shorter second sentence. </li>\n </ul>\n </div>\n </div>\n```\n\n```text\n<ul class=\"list-disc\">\n```\n\n```text\nclass=\"prose\"\n```\n\n```text\nclass=\"prose\"\n```\n\n```text\nclass=\"prose\"\n```\n\n```text\nm-4\n```\n\n```text\nPreflight\n```\n\n```text\nlist-disc\n```\n\n```text\nlist-decimal\n```\n\n```text\nlist-disc\n```\n\n```text\nlist-decimal\n```\n\n```text\nlist-style-type\n```\n\n```text\n::marker\n```\n\n```text\n::marker\n```\n\n```text\nlist-style-type\n```\n\n```text\n::before\n```\n\n```text\nlist-disc\n```\n\n```text\n::marker\n```\n\n```text\nlist-disc\n```\n\n```text\n::before\n```\n\n```text\nlist-disc\n```\n\n```text\n<ul class=\"list-disc list-inside\">\n ...\n <li>...<li>\n ...\n</ul>\n```\n\n```html\n<ul class=\"pl-5 list-disc\">\n <li>Item</li>\n</ul>\n```\n\n```text\n<ul>\n```\n\n```text\npl-5\n```\n\n========================================\n\nComments:\n- play.tailwindcss.com/8dgGwBhAOU?file=config has you can see i added all plugins but not stimulus , you might check if it doesn't add some extra styling\n- that is cool I didnt realize you could do that.\n- had a similar issue, but had a link embedded to an outdated minified version on a cdn for the typography plugin but also had it properly setup in the tailwind config and saw this exact behaviour. It was a residual from trying out the prose plugin before properly configuring the whole setup. Removing the hard link to the css in the head section fixed it.\n- It seems like styling the ::before pseudo is not possible when using the typography plugin?\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- haha thanks somehow this is the only one that worked for me\n- Certainly in the conversation for the dumbest default setting for list items I have ever seen.","metadata":{"transformedAt":"2026-08-18T18:33:42.881Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":26,"totalLines":218,"estimatedTokens":1377}}81{"id":"stack-72926946","source":"stackoverflow","questionId":72926946,"title":"How can I change themes using daisyUI and tailwindcss in a react project?","tags":["reactjs","tailwind-css","daisyui"],"text":"Title: How can I change themes using daisyUI and tailwindcss in a react project?\nTags: reactjs, tailwind-css, daisyui\nSource: Stack Overflow\n\nQuestion:\nI can't seem to find a solution to this on any of the documentation. All I want is have a button toggle to switch between a light and dark mode.\n\n========================================\n\nTop Answer:\nInstall the package called `theme-change`\nhttps://www.npmjs.com/package/theme-change and then for react\n\n**index.tsx**\n\n```\nimport { themeChange } from 'theme-change';\n\n/*Initialize under useEffect */\n\nuseEffect(() => {\n themeChange(false);\n }, []);\n```\n\nThen on navigation menu or top bar\n\n```\n\n \n Pick a theme\n \n Default\n Light\n Retro\n Dracula\n Cyberpunk\n \n```\n\nMake sure to check the docs for more info on https://github.com/saadeghi/theme-change\n\n========================================\n\nCode:\n```text\nplugins: [require('daisyui')],\ndaisyui: {\n themes: ['light', 'dark'],\n},\n```\n\n```text\nfunction MyAwesomeThemeComponent() {\n const [theme, setTheme] = React.useState('light');\n const toggleTheme = () => {\n setTheme(theme === 'dark' ? 'light' : 'dark');\n };\n // initially set the theme and \"listen\" for changes to apply them to the HTML tag\n React.useEffect(() => {\n document.querySelector('html').setAttribute('data-theme', theme);\n }, [theme]);\n return (\n <label className=\"swap swap-rotate\">\n <input onClick={toggleTheme} type=\"checkbox\" />\n <div className=\"swap-on\">DARKMODE</div>\n <div className=\"swap-off\">LIGHTMODE</div>\n </label>\n );\n}\n```\n\n```text\ntailwind.config.cjs\n```\n\n```js\nimport { themeChange } from 'theme-change';\n\n/*Initialize under useEffect */\n\nuseEffect(() => {\n themeChange(false);\n }, []);\n```\n\n```js\n<select className=\"gradientselect\" data-choose-theme>\n <option disabled value=\"\">\n Pick a theme\n </option>\n <option value=\"\">Default</option>\n <option value=\"light\">Light</option>\n <option value=\"retro\">Retro</option>\n <option value=\"dracula\">Dracula</option>\n <option value=\"cyberpunk\">Cyberpunk</option>\n </select>\n```\n\n```text\ntheme-change\n```\n\n```text\nimport { Theme, Button } from 'react-daisyui'\n\nexport default (props) => {\n return (\n <>\n <Theme dataTheme=\"dark\">\n <Button color=\"primary\">Click me, dark!</Button>\n </Theme>\n\n <Theme dataTheme=\"light\">\n <Button color=\"primary\">Click me, light!</Button>\n </Theme>\n </>\n )\n}\n```\n\n```text\nconst [theme, setTheme] = useState(localStorage.getItem(\"theme\") ?? \"light\");\n```\n\n```text\nconst handleToggle = (e: any) => {\n if (e.target.checked) {\n setTheme(\"winter\");\n } else {\n setTheme(\"night\");\n }\n};\n```\n\n```text\nuseEffect(() => {\n localStorage.setItem('theme', theme!)\n const localTheme = localStorage.getItem('theme')\n document.querySelector('html')?.setAttribute('data-theme', localTheme!)\n}, [theme]);\n```\n\n```text\n<label className=\"swap swap-rotate\">\n {/* this hidden checkbox controls the state */}\n <input type=\"checkbox\" onChange={handleToggle} />\n {/* sun icon */}\n <svg className=\"swap-on fill-current w-10 h-10\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z\"/></svg>\n {/* moon icon */}\n <svg className=\"swap-off fill-current w-10 h-10\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z\"/></svg>\n</label>\n```\n\n```css\n@import \"tailwindcss\";\n@plugin \"daisyui\" {\n themes: autumn --default, coffee;\n}\n```\n\n```js\n... //other imports\nimport { useEffect, useState } from \"react\";\n\nconst Navbar = () => {\n const [isDark, setIsDark] = useState(\n localStorage.getItem(\"isDark\") === \"true\"\n );\n useEffect(() => {\n localStorage.setItem(\"isDark\", isDark);\n }, [isDark]);\n const handleChange = () => {\n setIsDark(!isDark);\n };\n return (\n ...\n <label className=\"swap swap-rotate\">\n <input\n type=\"checkbox\"\n className=\"theme-controller\"\n value=\"coffee\"\n onChange={handleChange}\n checked={isDark}\n />\n <FaMoon className=\"swap-on h-6 w-6\" />\n <IoMdSunny className=\"swap-off h-6 w-6\" />\n </label>\n ...\n );\n}\nexport default Navbar;\n```\n\n```text\nindex.css\n```\n\n```text\nautumn\n```\n\n```text\ncoffee\n```\n\n```text\nNavbar.jsx\n```\n\n```text\nFaMoon\n```\n\n```text\nIoMdSunny\n```\n\n```text\nreact-icons\n```\n\n```text\nlocalStorage\n```\n\n```text\nswap\n```\n\n```text\ntheme-controller\n```\n\n```text\nswap\n```\n\n========================================\n\nComments:\n- Maybe this tutorial is helping? levelup.gitconnected.com/dark-mode-in-react-533faaee3c6e\n- From TailwindCSS v4 and DaisyUI v5 related question: DaisyUI themes are not working for Vite + React project\n- + If anyone wants to use `DaisyUI`'s `ThemeController` component it won't trigger the swap. Hide the `theme-change` default btn + programmatically trigger it on the `hidden` checkbox click (Angular example) - `` data-theme attr--> ``\n- works like a charm. thank you so much, really wasn't so easy to understand from the docs\n- Very inuitive answer! Instead of going for other new package (as daisyUI docs say), using already available things.👏\n- How to store and retrieve previously set theme from local storage?\n- @ameya just initialize the theme differently: ```` const themeFromLocalStorage = localStorage.getItem(\"theme\") || \"light\" const [theme, setTheme] = React.useState(themeFromLocalStorage); ```` And when you're changing the theme, store it to localStorage ```` localStorage.setItem(\"theme\", theme === \"light\" ? \"dark\" : \"light\"); setTheme(theme === \"light\" ? \"dark\" : \"light\"); ````","metadata":{"transformedAt":"2026-08-18T18:33:42.881Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":24,"totalLines":248,"estimatedTokens":1622}}82{"id":"stack-71037854","source":"stackoverflow","questionId":71037854,"title":"Easiest way to check if Tailwind is installed","tags":["tailwind-css"],"text":"Title: Easiest way to check if Tailwind is installed\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am playing around with Tailwind and `Next.js,` but I am having trouble figuring out if it's installed or not. Even when I go to https://play.tailwindcss.com/ and try the following HTML element styled with Tailwind.\n\n```\n\n Hello world!\n\n```\n\nIt doesn't render it underlined or even an `h1` element. I the instructions at https://tailwindcss.com/docs/guides/nextjs verbatim. Any ideas?\n\n========================================\n\nCode:\n```text\n<h1 className=\"text-3xl font-bold underline\">\n Hello world!\n</h1>\n```\n\n```text\nNext.js,\n```\n\n```text\nh1\n```\n\n```text\n<h1 class=\"text-3xl font-bold underline\">\n Hello world!\n</h1>\n```\n\n```text\nnpm view tailwindcss version\n```\n\n```text\nnpm info tailwindcss version\n```\n\n```text\nnpx gvi tailwindcss\n```\n\n```text\nclassName\n```\n\n```text\nclass\n```\n\n========================================\n\nComments:\n- `className` is used in react, but in real HTML, it's just `class`.\n- @Alejandro Yes, but you were testing it out on play.tailwindcss.com as well.","metadata":{"transformedAt":"2026-08-18T18:33:42.881Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":63,"estimatedTokens":276}}83{"id":"stack-70506975","source":"stackoverflow","questionId":70506975,"title":"Issues installing Tailwindcss, specifically with \"npx tailwindcss init\"","tags":["tailwind-css","tailwind-css-3"],"text":"Title: Issues installing Tailwindcss, specifically with \"npx tailwindcss init\"\nTags: tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI'm following the documentation, however when use:\n\n```\nnpx tailwindcss init\n```\n\nNot working:\n\nError: Cannot find module 'C:\\path\\to\\project\\tailwindcss\\lib\\cli.js'\n\n========================================\n\nTop Answer:\n**Step : 1**\nCorrect you directory path like this `C:\\Users\\user\\Documents\\Web Dev\\Tailwindcss_AlpineJs\\pratice tailwind` then try this command `npx tailwindcss init`\n\n**Step : 2**\nNot working above **step : 1** then try this command : `npx tailwindcss-cli@latest init -p`.\n\n========================================\n\nCode:\n```none\nnpx tailwindcss init\n```\n\n```sh\n$/> npm init -y\n```\n\n```sh\n$/> npm i -D tailwindcss\n```\n\n```text\npackage.json\n```\n\n```text\nC:\\Users\\user\\Documents\\Web Dev\\Tailwindcss_AlpineJs\\pratice tailwind\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\nnpx tailwindcss-cli@latest init -p\n```\n\n```text\nnpm init -y \nnpm install -D tailwindcss@3 @tailwindcss/postcss postcss\nnpx tailwindcss init -p\n```\n\n```none\nnpm install tailwindcss@3\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ninit\n```\n\n```text\nnpx tailwindcss\n```\n\n```text\n@tailwindcss/cli\n```\n\n```text\nnpx @tailwindcss/cli\n```\n\n```text\nnpm install -D tailwindcss@3 postcss autoprefixer\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n========================================\n\nComments:\n- Is your `practice tailwind` directory initialized as node project?\n- @Soyokaze yes it is\n- I dont know why but changing the directory worked.\n- yeah cuz some commands run on the basis of current directory\n- Since January 2025, this a relevant answer for v4: Problem installing TailwindCSS with Vite, after \"npx tailwindcss init -p\" command\n- Yeah i already did that.\n- I am setting up a Laravel package with tailwindcss and couldn't figure out why I was getting a 'command not found: tailwindcss' when trying to initialize tailwindcss. Needed to initialize and get a package.json file created. Thanks!\n- @mmv_sat From January 2025, you install v4 by default in TailwindCSS, and Laravel has supported this since v12. Simply put, the explanation is just the removal of the `init` process, because JS-based configuration is no longer needed. See: Problem installing TailwindCSS after `npx tailwindcss init` command - tailwindcss not recognized - NPM error could not determine executable to run and maybe related for you: What's breaking changes from v4?\n- i am having the same issue in tailwind 4\n- @kode for TailwindCSS v4 just a newer answer: stackoverflow.com/a/79545848/15167500\n- npx tailwindcss-cli@latest init -p - works for me, Thanks\n- From January 2025, you install v4 by default in TailwindCSS. Simply put, the explanation is just the removal of the `init` process, because JS-based configuration is no longer needed. See: Problem installing TailwindCSS after `npx tailwindcss init` command - tailwindcss not recognized - NPM error could not determine executable to run and maybe related for you: What's breaking changes from v4?\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- Since January 2025, this a relevant answer for v4: Problem installing TailwindCSS with Vite, after \"npx tailwindcss init -p\" command\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- From January 2025, you install v4 by default in TailwindCSS. Simply put, the explanation is just the removal of the init process, because JS-based configuration is no longer needed. See: Problem installing TailwindCSS after npx tailwindcss init command - tailwindcss not recognized - NPM error could not determine executable to run and maybe related for you: What's breaking changes from v4?\n- Recommending the installation of a version that is no longer actively maintained has never been worthwhile or useful. Especially without an explanation, your answer is misleading, and I do not recommend using it. Use v4: stackoverflow.com/a/79545848/15167500","metadata":{"transformedAt":"2026-08-18T18:33:42.881Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":117,"estimatedTokens":1102}}84{"id":"stack-76569879","source":"stackoverflow","questionId":76569879,"title":"Tailwind 3.3.2 - module is not defined","tags":["javascript","tailwind-css","es6-modules","commonjs"],"text":"Title: Tailwind 3.3.2 - module is not defined\nTags: javascript, tailwind-css, es6-modules, commonjs\nSource: Stack Overflow\n\nQuestion:\nI am stuck on a tutorial which is incorporating Tailwind, which in this case is tailwind 3.3.2.\n\nPer the tutorial, I am supposed to open a file called tailwind.config.js and paste the below code from https://tailwindcss.com/docs/installation:\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nI immediately get the red squiggly line under \"module\", with an error that reads as follows:\n\nhttps://i.sstatic.net/vOV8d.png\n\nWhat did I do wrong? The tutorial did not encounter this error.\n\n========================================\n\nTop Answer:\nAssuming you haven't figured it out, convert `module.exports` to `export default`. That's should fix your issue\n\n========================================\n\nCode:\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nno-undef\n```\n\n```text\n/*eslint-env node*/\n```\n\n```text\nmodule.exports\n```\n\n```text\nexport default\n```\n\n========================================\n\nComments:\n- Well, I used your suggestion and the error is gone. Thank you.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.881Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":66,"estimatedTokens":401}}85{"id":"stack-61949967","source":"stackoverflow","questionId":61949967,"title":"How do I add tailwindcss to vite version 0 to 3? (not including V4)","tags":["vue.js","tailwind-css","vite"],"text":"Title: How do I add tailwindcss to vite version 0 to 3? (not including V4)\nTags: vue.js, tailwind-css, vite\nSource: Stack Overflow\n\nQuestion:\nI'm using vite `0.16.6` and wanted to migrated a vuepress site to using vite.\n\nHowever I was unsure how to configure vite to using tailwindcss.\n\nin my `index.css`\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n#app {\n font-family: Avenir, Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-align: center;\n color: #2c3e50;\n margin-top: 60px;\n}\n```\n\n========================================\n\nTop Answer:\nVite has built-in support for PostCSS:\n\n```\nnpm -D install tailwindcss autoprefixer\n```\n\nvite.config.ts\n\n```\nimport { defineConfig } from \"vite\"\nimport tailwind from \"tailwindcss\";\nimport autoprefixer from \"autoprefixer\";\n\nexport default defineConfig({\n css: {\n postcss: {\n plugins: [tailwind, autoprefixer],\n }\n }\n})\n```\n\n========================================\n\nCode:\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n#app {\n font-family: Avenir, Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-align: center;\n color: #2c3e50;\n margin-top: 60px;\n}\n```\n\n```text\n0.16.6\n```\n\n```text\nindex.css\n```\n\n```text\nmodule.exports = {\n plugins: [\n // ...\n require('tailwindcss'),\n require('autoprefixer'),\n // ...\n ]\n}\n```\n\n```text\npostcss.config.js\n```\n\n```text\nyarn add tailwindcss @tailwindcss/typography @tailwindcss/ui -D\n```\n\n```text\nmodule.exports={\n plugins: [\n require('tailwindcss'),\n require('autoprefixer'),\n ]\n }\n```\n\n```text\n@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n```\n\n```text\nyarn tailwind init\n```\n\n```text\npostcss.config.js\n```\n\n```text\n$ npm create-vite-tailwind\n...\n$ npm run dev\n```\n\n```bash\nnpm -D install tailwindcss autoprefixer\n```\n\n```text\nimport { defineConfig } from \"vite\"\nimport tailwind from \"tailwindcss\";\nimport autoprefixer from \"autoprefixer\";\n\nexport default defineConfig({\n css: {\n postcss: {\n plugins: [tailwind, autoprefixer],\n }\n }\n})\n```\n\n```none\nnpm install tailwindcss @tailwindcss/vite\n```\n\n```js\nimport { defineConfig } from 'vite'\nimport tailwindcss from '@tailwindcss/vite'\nexport default defineConfig({\n plugins: [\n tailwindcss(),\n ],\n})\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```text\n@tailwindcss/vite\n```\n\n========================================\n\nComments:\n- From TailwindCSS v4 can use separated `@tailwindcss/vite` plugin for this.\n- doc tailwindcss.com/docs/guides/vite is missing this part =.=\"\n- putting the `postcss.config.js` in the app root was what fixed it for me. Optionally, you can edit your `vite.config.js` to specify the location of your `postcss.config.js` file. vitejs.dev/config/#css-postcss\n- I love how after 2 years this answer is still applicable :D\n- this worked after i migrated from create-react-app v5 to vite\n- agreed - I've updated the title to ensure it's V0-V3","metadata":{"transformedAt":"2026-08-18T18:33:42.882Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":174,"estimatedTokens":760}}86{"id":"stack-66567306","source":"stackoverflow","questionId":66567306,"title":"Why are level 1 headings the same size as other headings?","tags":["html","tailwind-css"],"text":"Title: Why are level 1 headings the same size as other headings?\nTags: html, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI just created a new react app and installed tailwindcss and antd libraries. For some reason, my header tags are not changing the font. My code is:\n\n```\nimport { Button } from \"antd\";\n\nfunction PageHeader() {\n return (\n <>\n \n \n\n### Hello\n\n \n \n );\n}\n\nexport default PageHeader;\n```\n\nHowever, the font size doesn't change at all and is still as small as a \n\n tag.\n\n========================================\n\nTop Answer:\nThe `@tailwind base` adds base styles (preflight) to your h1,h2,h3... elements because of which they look like regular text.\nThis is how tailwind does it:\n\n```\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n```\n\nHowever, the font size doesn't change at all and is still as small as a tag.\n\nNow, to set it to default browser styles just add the following property to your `tailwind.config.js` file\n\n```\ncorePlugins: {\n preflight: false,\n },\n```\n\nNote: This affects other base styles as well.\n\n========================================\n\nCode:\n```text\nimport { Button } from \"antd\";\n\nfunction PageHeader() {\n return (\n <>\n <div className=\"flex flex-wrap\">\n <h1 className=\"p-5\">Hello</h1>\n </div>\n </>\n );\n}\n\nexport default PageHeader;\n```\n\n```text\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nplugins: [require(\"tailwindcss-animate\"), require('@tailwindcss/typography'),],\n```\n\n```text\nnpm install -D @tailwindcss/typography\n```\n\n```text\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n```\n\n```text\ncorePlugins: {\n preflight: false,\n },\n```\n\n```text\n@tailwind base\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- ...then don't forget to add the prose style to your className !","metadata":{"transformedAt":"2026-08-18T18:33:42.882Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":118,"estimatedTokens":464}}87{"id":"stack-69856261","source":"stackoverflow","questionId":69856261,"title":"Tailwind bg opacity","tags":["css","background","opacity","tailwind-css","tailwind-ui"],"text":"Title: Tailwind bg opacity\nTags: css, background, opacity, tailwind-css, tailwind-ui\nSource: Stack Overflow\n\nQuestion:\nI was curious about the CSS behind tailwinds bg opacity. I could only find 'opacity' in pure CSS but that affects everything rather than just the background. Could somebody please explain this?\n\n========================================\n\nTop Answer:\nSee Here in the tailwind docs. The second number indicates the opacity.\n\n```\n\n```\n\n========================================\n\nCode:\n```css\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgba(0,0,0,var(--tw-bg-opacity));\n}\n```\n\n```css\n.bg-opacity-50 {\n --tw-bg-opacity: 0.5;\n}\n```\n\n```css\nbackground-color: rgba(0,0,0,0.5)\n```\n\n```text\nrgba(red, green, blue, opacity)\n```\n\n```text\n.bg-black\n```\n\n```text\nbg-opacity-50\n```\n\n```text\n--tw-bg-opacity\n```\n\n```text\n<button class=\"bg-sky-500/100 ...\"></button>\n<button class=\"bg-sky-500/75 ...\"></button>\n<button class=\"bg-sky-500/50 ...\"></button>\n```\n\n```text\n<div className=\"bg-[rgb(255,0,0)]/50\">\n```\n\n```text\ntailwind.config.css\n```\n\n```text\n<button class=\"bg-sky-500/100 ...\"></button>\n```\n\n```text\n<div class=\"bg-sky-500/[.06] ...\"></div>\n```\n\n```text\nexport const darkThemeColorPalette = {\n \"--primary-50\": \"7, 28, 51\", // RGB values of the color\n // Rest of the colours should be added here with the above format\n};\n```\n\n```js\nmodule.exports = {\n content: [\"./src/**/*.{js,jsx,ts,tsx}\"],\n theme: {\n extend: {\n colors: {\n primary: {\n 50: \"rgba(var(--primary-50))\",\n // ADD THE REST OF THE COLORS HERE\n }, \n },\n },\n },\n plugins: [],\n};\n```\n\n```js\nimport React from \"react\";\nimport { BrowserRouter as Router } from \"react-router-dom\";\n\nimport { darkThemeColorPalette } from \"./constants/common/colorPalette\";\nimport Routes from \"./Routes\";\n\nconst App = () => (\n <div style={darkThemeColorPalette} className=\"\">\n <Router>\n <Routes />\n </Router>\n </div>\n);\n\nexport default App;\n```\n\n```text\ncolorPalette.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nrgba()\n```\n\n```text\n:root {\n --primary: 182, 11, 195;\n --secondary: 193, 106, 241;\n --tertiary: 255, 109, 0;\n }\n```\n\n```text\ntheme: {\n extend: {\n colors: {\n primaryColor: \"rgba(var(--primary), <alpha-value>)\",\n secondaryColor: \"rgba(var(--secondary), <alpha-value>)\",\n tertiary: \"rgba(var(--tertiary), <alpha-value>)\", ...\n```\n\n```text\n<Button variant=\"outline\" className=\"border border-primaryColor bg-primaryColor/15\">\n <FiPlusCircle className=\"bg-tertiary/70 text-secondaryColor/50\" /> create new Task\n </Button>\n```\n\n========================================\n\nComments:\n- Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer.\n- Related from v4: The `bg-opacity-*` utility no longer exists as of v4 - how could it still be created?\n- Do you the pros of this approach rather than not setting `--tw-bg-opacity` in `.bg-black` and using a default value in `background-color`, cause that would make the css not dependant on the declaration order\n- Deprecated in Tailwind v4\n- This is the way in tailwind v4, as the `bg-opacity-*` and other similar constructs were deprecated tailwindcss.com/docs/upgrade-guide#removed-deprecated-utilit‌​ies","metadata":{"transformedAt":"2026-08-18T18:33:42.882Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":159,"estimatedTokens":828}}88{"id":"stack-67063939","source":"stackoverflow","questionId":67063939,"title":"Tailwind - Override default transition duration","tags":["tailwind-css"],"text":"Title: Tailwind - Override default transition duration\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nDefault is 150ms, was looking to extend this to 250ms as an application default.\n\nTried everything I could think of, last attempt being\n\n```\ntransitionDuration: {\n DEFAULT: '250ms'\n},\n```\n\nin `tailwind.config.js` under `theme`, `theme.extend`, `variants`, and `variants.extend`.\n\nAny help would be appreciated!\n\n========================================\n\nTop Answer:\nJust like ptts answered before me, inserting an override in the `theme` section of your `tailwind.config.js` will do the trick.\n\nWhat I'd like to add is that the new value for `transitionDuration` will completely replace Tailwind’s default configuration for that key, and the initial transition duration utilities will not be generated. So if you only define `DEFAULT` under the `transitionDuration` key, your classes like `.duration-500` will not work.\n\nThe solution is to define the full set of duration values you might use. For your convenience, here's the full set from the default theme:\n\n```\ntransitionDuration: {\n DEFAULT: '150ms',\n 75: '75ms',\n 100: '100ms',\n 150: '150ms',\n 200: '200ms',\n 300: '300ms',\n 500: '500ms',\n 700: '700ms',\n 1000: '1000ms',\n},\n```\n\nIf you want to update the `DEFAULT` while still retaining all of the other durations, use something like:\n\n```\ntransitionDuration: {\n DEFAULT: '500ms',\n 75: '75ms',\n 100: '100ms',\n 150: '150ms',\n 200: '200ms',\n 300: '300ms',\n 500: '500ms',\n 700: '700ms',\n 1000: '1000ms',\n},\n```\n\n========================================\n\nCode:\n```text\ntransitionDuration: {\n DEFAULT: '250ms'\n},\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntheme\n```\n\n```text\ntheme.extend\n```\n\n```text\nvariants\n```\n\n```text\nvariants.extend\n```\n\n```js\n// tailwind.config.js\n\nmodule.exports = {\n theme: {\n extend: {\n transitionDuration: {\n DEFAULT: \"250ms\",\n },\n },\n },\n};\n```\n\n```json\ntheme: {\n transitionDuration: {\n DEFAULT: '250ms'\n }\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nnpx tailwindcss init --full\n```\n\n```text\ntransitionDuration: {\n DEFAULT: '150ms',\n 75: '75ms',\n 100: '100ms',\n 150: '150ms',\n 200: '200ms',\n 300: '300ms',\n 500: '500ms',\n 700: '700ms',\n 1000: '1000ms',\n},\n```\n\n```text\ntransitionDuration: {\n DEFAULT: '500ms',\n 75: '75ms',\n 100: '100ms',\n 150: '150ms',\n 200: '200ms',\n 300: '300ms',\n 500: '500ms',\n 700: '700ms',\n 1000: '1000ms',\n},\n```\n\n```text\ntheme\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntransitionDuration\n```\n\n```text\nDEFAULT\n```\n\n```text\ntransitionDuration\n```\n\n```text\n.duration-500\n```\n\n```text\nDEFAULT\n```\n\n```text\ntheme: {\n extend: {\n transitionDuration: {\n DEFAULT: '2500ms'\n },\n },\n},\n```\n\n```text\nextend\n```\n\n========================================\n\nComments:\n- theme.extend is ok. you probably just not recompiled changes\n- I am super confused as that's exactly what I had, but it does work now. I'm doing it in Angular and maybe was an issue with the new JIT compiler. After restarting the local dev server, it has picked it up.\n- Here 2025: doesn't work. Solved with this: stackoverflow.com/a/79756880/1252920\n- You could add the value to `theme.extend.transitionDuration.DEFAULT`. It will leave the default theme intact and only replace the default value. Can also add to them as I have with `slow` and `fast` for some 'aliased standards' for your application.\n- Have you tried adding to `theme.extend` and verified that it works? I had tried it before and it didn't work, but perhaps I was doing something else wrong...\n- Yup, I add a few to extends and it keeps the original built-ins. My issue originally was an early version of the JIT compiler and caching - it seems if you added it to the theme (not extend), it would override, but if you then moved it to extend, the compiled output would be cached, leaving the built-ins wiped out. At least at the time, I had to delete `.angular` directory to remove the cache. Don't know if it's still an issue.\n- Ug I was wondering why other durations were not working on some of my configs and setting a custom value for the `DEFAULT` without defining the other durations was the culprit. Thank you","metadata":{"transformedAt":"2026-08-18T18:33:42.882Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":197,"estimatedTokens":1049}}89{"id":"stack-61425153","source":"stackoverflow","questionId":61425153,"title":"Loading custom fonts in Nuxt/Tailwind Project","tags":["nuxt.js","tailwind-css"],"text":"Title: Loading custom fonts in Nuxt/Tailwind Project\nTags: nuxt.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHi everybody and sorry my english.\n\nI have created a nuxt.js project with Tailwind. I´d like to custom my font family, so I downloaded some font files from Google Fonts. I have been reading Tailwind docs, but i can´t understand where do i have to place the font files and how to config Tailwind for loading the files.\n\nI´d be very gratefull if somebody could help me.\n\n========================================\n\nTop Answer:\nNuxt 2.12 and Tailwind 1.4.0 (assume you're using @nuxtjs/tailwind):\n\ntailwind.css:\n\n```\n/* purgecss start ignore */\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n/* purgecss end ignore */\n@import 'tailwindcss/utilities';\n\n/* add fonts here */\n@import '~assets/css/fonts';\n```\n\nfonts.css:\n\n```\n@font-face {\n font-family: Underground;\n font-weight: 400;\n src: url('~assets/fonts/Roboto.woff2') format('woff2'),\n url('~assets/fonts/Roboto.woff') format('woff');\n}\n```\n\nAnd in tailwind.config.js:\n\n```\nmodule.exports = {\n theme: {\n fontFamily: {\n roboto: ['Roboto']\n }\n },\n variants: {},\n plugins: []\n}\n```\n\nThen you can use this font globally, in your default.vue layout:\n\n```\n\n \n \n \n\n```\n\nBTW, static is not for assets, like fonts, it's for files, like robots.txt, sitemap.xml\n\n========================================\n\nCode:\n```css\n@include font-face( KapraNeuePro, '~/assets/fonts/KapraNeueProFamily/Kapra-Neue-Pro-Regular', 400, normal, otf);\n@include font-face( KapraNeuePro, '~/assets/fonts/KapraNeueProFamily/Kapra-Neue-Pro-Medium', 600, medium, otf);\n```\n\n```js\nmodule.exports = {\n theme: {\n fontFamily: {\n sans: [\"KapraNeuePro\"],\n serif: [\"KapraNeuePro\"],\n mono: [\"KapraNeuePro\"],\n display: [\"KapraNeuePro\"],\n body: [\"KapraNeuePro\"]\n },\n variants: {},\n plugins: []\n }\n};\n```\n\n```text\nnpm run build\n```\n\n```text\nfonts\n```\n\n```text\nassets\n```\n\n```text\n~/css/tailwind.css\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nfont-family\n```\n\n```text\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n\n@font-face {\n font-family: 'Roboto';\n font-weight: 700;\n src: url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');\n}\n@font-face {\n font-family: 'OpenSans';\n font-weight: 500;\n src: url('/fonts/OpenSans/OpenSans-Medium.ttf') format('truetype');\n}\n```\n\n```text\ntheme: {\n extend: {\n fontFamily: {\n heading: ['Roboto', 'sans-serif'],\n body: ['OpenSans', 'sans-serif']\n }\n }\n}\n```\n\n```css\n/* purgecss start ignore */\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n/* purgecss end ignore */\n@import 'tailwindcss/utilities';\n\n/* add fonts here */\n@import '~assets/css/fonts';\n```\n\n```css\n@font-face {\n font-family: Underground;\n font-weight: 400;\n src: url('~assets/fonts/Roboto.woff2') format('woff2'),\n url('~assets/fonts/Roboto.woff') format('woff');\n}\n```\n\n```js\nmodule.exports = {\n theme: {\n fontFamily: {\n roboto: ['Roboto']\n }\n },\n variants: {},\n plugins: []\n}\n```\n\n```js\n<template>\n <div class=\"container mx-auto font-roboto\">\n <nuxt />\n </div>\n</template>\n```\n\n```js\ngoogleFonts: {\n families: {\n 'Architects Daughter': true,\n // or:\n // Lato: [100, 300],\n // Raleway: {\n // wght: [100, 400],\n // ital: [100]\n // },\n },\n },\n```\n\n```js\nfontFamily: {\n handwritten: ['Architects Daughter'],\n },\n```\n\n```html\n<h2 class=\"font-handwritten\">\n This is a custom font\n </h2>\n```\n\n```text\nyarn add --dev @nuxtjs/google-fonts\n```\n\n```text\nnuxt.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- If anyone else is confused by this, nuxtjs/tailwindcss no longer generates a tailwind.css file by default: github.com/nuxt-community/tailwindcss-module/issues/253","metadata":{"transformedAt":"2026-08-18T18:33:42.882Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":224,"estimatedTokens":975}}90{"id":"stack-70274350","source":"stackoverflow","questionId":70274350,"title":"Headless UI open one of the Disclosure's on init","tags":["tailwind-css","headless","tailwind-ui","headless-ui"],"text":"Title: Headless UI open one of the Disclosure's on init\nTags: tailwind-css, headless, tailwind-ui, headless-ui\nSource: Stack Overflow\n\nQuestion:\nI'm having trouble opening one of the 2 Disclosure.\n\nAttached below is what trying to achieve this and when I add the `static` prop it keeps it open indefinitely.\n\nhttps://i.sstatic.net/NyEDL.png\n\n========================================\n\nCode:\n```text\nstatic\n```\n\n```text\n<Disclosure defaultOpen>\n```\n\n========================================\n\nComments:\n- It's not clear to me what you're asking for here. Can you post your code?","metadata":{"transformedAt":"2026-08-18T18:33:42.882Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":26,"estimatedTokens":144}}91{"id":"stack-71384038","source":"stackoverflow","questionId":71384038,"title":"Many Tailwind CSS classes do not work on my Angular 12 project","tags":["css","angular","tailwind-css"],"text":"Title: Many Tailwind CSS classes do not work on my Angular 12 project\nTags: css, angular, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am developing an Angular 12 project with Tailwind CSS installed. I have followed the official docs and it seems everything works; but I can´t understand why some classes work and others not.\n\nFor example, I can have this piece of code, trying to add two Tailwind classes on my div:\n\n```\n\n \n\n### Please go back to login\n\n```\n\nAnd the text-center class works, but the mt-2 doesn´t. This kind of things is happening on the whole project. The way I had to solve it is using traditional CSS or mixing it with Tailwind, like this:\n\n```\n\n \n\n### Please go back to login\n\n```\n\nAnd on the css:\n\n```\n#back-to-login{\n \n margin-top: 40px;\n\n}\n```\n\nThen it works fine and the margin-top is applied.\n\nDo you know what could be happening?\n\nReinstalling node_modules like suggested here doesn´t solve it.\n\nThanks a lot.\n\nI add the code of the styles.css and tailwind.config\n\nstyles.css\n\n```\n/* You can add global styles to this file, and also import other style files */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@font-face {\n font-family: \"firechat\";\n src: url(./assets/fonts/blazed/Blazed.ttf);\n}\n\n/*\n to change the default h1 styles on tailwind\n\n https://tailwindcss.com/docs/preflight#extending-preflight\n\n*/\n@layer base {\n h1 {\n @apply text-6xl;\n }\n}\n\n/*tailwind and own styles*/\n\n#firechat-font{\n font-family: \"firechat\";\n color:red;\n}\n\n.custom-links{\n color:red;\n font-weight: bold;\n}\n```\n\nTailwind config file:\n\n```\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\"\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nEDIT: What I am seeing now is that for example mt-2 applies and appear on devTools (maybe problem was it was to small change to notice, my fault), but a bigger margin like mt-4 or mt-6 doesn´t. It happened also with other properties.\n\n========================================\n\nTop Answer:\nFor some reason, in my **styles.scss**, I had to import the variables as follows\n\n```\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\ninstead of\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nreload and it worked. Angular version 14.1.0, Tailwindcss version 3.1.7\n\n========================================\n\nCode:\n```text\n<div class=\"text-center mt-2\">\n\n <h2>Please go back to <a class=\"custom-links\" href=\"./login\">login</a></h2>\n</div>\n```\n\n```text\n<div id=\"back-to-login\" class=\"text-center\">\n\n <h2>Please go back to <a class=\"custom-links\" href=\"./login\">login</a></h2>\n</div>\n```\n\n```text\n#back-to-login{\n \n margin-top: 40px;\n\n}\n```\n\n```text\n/* You can add global styles to this file, and also import other style files */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@font-face {\n font-family: \"firechat\";\n src: url(./assets/fonts/blazed/Blazed.ttf);\n}\n\n/*\n to change the default h1 styles on tailwind\n\n https://tailwindcss.com/docs/preflight#extending-preflight\n\n*/\n@layer base {\n h1 {\n @apply text-6xl;\n }\n}\n\n/*tailwind and own styles*/\n\n#firechat-font{\n font-family: \"firechat\";\n color:red;\n}\n\n.custom-links{\n color:red;\n font-weight: bold;\n}\n```\n\n```text\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\"\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\ncontent: [ \n\"../src/**/*.html\"\n]\n```\n\n```text\n@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n```\n\n```text\nmodule.exports = {\nplugins: {\n tailwindcss: {},\n autoprefixer: {},\n }\n}\n```\n\n```text\n\"scripts\": {\n\"ng\": \"nx\",\n\"serve\": \"ng serve --configuration=dev\",\n\"start\": \"npm-run-all --parallel serve tailwind\", \n\"tailwind\": \"npx tailwindcss --postcss -i ./src/tailwind.scss -o ./src/app/scss/tailwind.css --watch\"\n }\n```\n\n```text\n\"styles\": [\n \"src/app/scss/tailwind.css\"\n ]\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\n module.exports = {\n content: ['./src/**/*.{html,ts}', './projects/**/*.{html,ts}'],\n theme: {\n extend: {},\n },\n plugins: [],\n }\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\"\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n important: true\n}\n```\n\n```text\nimportant: true\n```\n\n```text\n/* You can add global styles to this file, and also import other style files */\n```\n\n```text\n@tailwind base; @tailwind components; @tailwind utilities;\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n\"styles\": [\n \"src/styles.css\",\n \"node_modules/tailwindcss/base.css\",\n \"node_modules/tailwindcss/components.css\",\n \"node_modules/tailwindcss/utilities.css\"\n ],\n```\n\n```js\nconst { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');\nconst { join } = require('path');\n\nconst c = [join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), ...createGlobPatternsForDependencies(__dirname)]\nconsole.log(c)\nmodule.exports = {\n // content: ['./src/**/*.{html,ts}', './projects/**/*.{html,ts}'],\n content: c,\n theme: {\n extend: {},\n // colors: [],\n },\n\n variants: {\n extend: {\n textColor: ['visited', 'group-over'],\n opacity: ['group-over'],\n backgroundColor: ['even'],\n },\n },\n plugins: [\n // ...\n require('@tailwindcss/forms'),\n ],\n // corePlugins: {\n // preflight: false,\n // },\n};\n```\n\n========================================\n\nComments:\n- style.scss where you have added tailwind and tailwind config file\n- @zainhassan thanks, it is done. It is not added in any scss file, but on the global style.css for the project.\n- can you see `mt-2` is applied to your div in devTools?\n- @MaksatRahmanov I edited main post. What I am seeing now is that for example mt-2 applies and appear on devTools (maybe problem was it was to small change to notice, my fault), but a bigger margin like mt-4 or mt-6 doesn´t. It happened also with other properties.\n- This is strange but it seems that you've installed the latest version of tailwind with angular12 maybe something is wrong with it? Is it possible to install tailwind v2 and quickly check if it works.\n- @MaksatRahmanov you got it :) I will answer the question or I can delete it and you can answer if you want to get the point because you gave the solution.\n- @FranP posted my answer. So happy it helped\n- While going to v2 works, you will be using JIT (if you are using it) as experimental stage since and probably have to set TAILWIND_MODE=watch, v3 is when it was release officially. JIT is on by default on v3 this was an known issue, it was fixed in angular@13.2 and tailwind@3.0.17. I would suggest to upgrade to angular if you can.\n- @penleychan yeah, you are right, upgrading angular worked and now it seems the things didn´t worked (like `mt-6`) work now with v3 :) Many thanks\n- Also, as @penleychan added, it is a good idea to upgrade angular, then it will work better with Tailwind v3\n- Any idea why though ?\n- @Shrihari. It's the same way you'd reference the package name for bulma / bootstrap / material for sass files. That's why Angular introduced the shortened imports in scss files.\n- Oh yeah totally forgot. Thanks ! Checked my other projects, I was using @import .\n- You add the answer and saved me from searching elsewhere. I have a `projects` structure. The normal tailwind configuration didn't have that. A good thing you put it here. Even if one has a different approach it is worth it to leave a solution than may help someone later. Thank you.\n- Well done boy, good find.","metadata":{"transformedAt":"2026-08-18T18:33:42.882Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":344,"estimatedTokens":1959}}92{"id":"stack-64688211","source":"stackoverflow","questionId":64688211,"title":"Dynamic class + variables in VueJS / Tailwind","tags":["vue.js","variables","dynamic","tailwind-css"],"text":"Title: Dynamic class + variables in VueJS / Tailwind\nTags: vue.js, variables, dynamic, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to add dynamic variables (props) on a Tailwind class but something is wrong :\n\n```\n:class=\"`w-${percent}/12: ${show}`\"\n```\n\nThis is the output of this code :\n\n```\n\n```\n\nI don't understand why ':true' is added.\n\nThanks for your help.\n\nNb: https://fr.vuejs.org/v2/guide/class-and-style.html\n\n========================================\n\nCode:\n```text\n:class=\"`w-${percent}/12: ${show}`\"\n```\n\n```text\n<div class=\"w-0 h-2 transition-all duration-1000 ease-out bg-indigo-600 rounded-lg w-11/12: true\"></div>\n```\n\n```text\n<div\n class=\"w-0 h-2 transition-all duration-1000 ease-out bg-indigo-600 rounded-lg\"\n :class=\"{ [`w-${percent}/12`]: show }\"\n>\n YOUR CONTENT\n</div>\n```\n\n```text\nstring\n```\n\n```text\nshow\n```\n\n```text\ntrue\n```\n\n```text\n\"true\"\n```\n\n```text\nshow\n```\n\n```text\nobject\n```\n\n========================================\n\nComments:\n- when true is gone do you get what you want ?\n- If i delete : ${show} yes but I need this to make the transition work (the value of show depend on scroll position).\n- If i use v-if=‘show’ for ex it will work but without the wanted transition.\n- i am sorry i am not familiar with tailwind, i am trying to understand what do you want to see in $show ? just show ?\n- Note that you shouldn't use interpolated class names with tailwind. Always use e.g. `w-8/12` over `w-{percent}/12`: tailwindcss.com/docs/content-configuration#dynamic-class-nam‌​es","metadata":{"transformedAt":"2026-08-18T18:33:42.882Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":75,"estimatedTokens":386}}93{"id":"stack-67244926","source":"stackoverflow","questionId":67244926,"title":"How to override @apply directives in tailwindcss","tags":["html","css","tailwind-css"],"text":"Title: How to override @apply directives in tailwindcss\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIs it possible to override @apply directives?\n\nI have this example: https://play.tailwindcss.com/kyu6CxnBzB\n\n```\n.item {\n @apply text-black font-light text-opacity-80 py-4 bg-gray-100;\n}\n```\n\n```\n\n \n- About Us\n \n- Success stories\n \n- Contact\n \n- Blog\n\n```\n\nwith this result:\n\nhttps://i.sstatic.net/WmFeL.png\n\nwhen I expected\n\nhttps://i.sstatic.net/G9c1c.png\n\nit seems like the value in the first class define with apply (item) takes precedence over any other class specified afterwards\n\nhow would you solve a scenerio like that? creating a component (I'm working with svelte) seems like an overwkill for this, and I´d like some way to avoid duplicating stuff like \"font-sans text-black text-black text-opacity-80 my-4 hover:text-gray-800 hover:text-underline etc...\"\n\n========================================\n\nCode:\n```css\n.item {\n @apply text-black font-light text-opacity-80 py-4 bg-gray-100;\n}\n```\n\n```html\n<ul>\n <li class=\"item\">About Us</li>\n <li class=\"item\">Success stories</li>\n <li class=\"item text-red-50 bg-red-800\">Contact</li>\n <li class=\"item\">Blog</li>\n</ul>\n```\n\n```text\n@layer components {\n .item {\n @apply text-black font-light text-opacity-80 py-4 bg-gray-100;\n }\n}\n```\n\n```text\n@layer\n```\n\n========================================\n\nComments:\n- Thanks a lot for your reply, so if I understand correctly, the layer fecines the order in which they are defined in the resulting css, and hacing no layer means it goes to the end. right?\n- The directive simply tells tailwind to move the contents to wherever you are loading tailwind (`@tailwind components;` in this case). It will end up looking the same if you declared your class after `@tailwind components;` but before `@tailwind utilities;`\n- This works perfectly if only one class is used as selector. But if using chained selectors this doesn't work anymore. Don't know exactly how to work around this. play.tailwindcss.com/2nmGe5yad3\n- @Fabius did you ever find a solution to this? I've run into the same issue\n- @NicholasBetsworth not exactly a solution, but a workaround. If you're using JIT mode, you can prefix inline classes with `!` to mark them as important. There are other more intrusive ways of doing this, like setting all utilities as important in the tailwind config, but i dont like that very much and you can encounter unexpected behaviors if you didnt write your classes with that option in mind from the beginning. Check this question i asked and also the comments to the answer: stackoverflow.com/questions/69825111\n- I understand @Layers, but that is overriding global with global. Instead, how do you override a global directly in an HTML element with TW classes?","metadata":{"transformedAt":"2026-08-18T18:33:42.882Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":79,"estimatedTokens":697}}94{"id":"stack-74500132","source":"stackoverflow","questionId":74500132,"title":"Angular 15 Material bug input on focus when using Tailwindcss","tags":["angular","angular-material","tailwind-css"],"text":"Title: Angular 15 Material bug input on focus when using Tailwindcss\nTags: angular, angular-material, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nBefore focusing:\n\nhttps://i.sstatic.net/OmoBT.png\n\nAfter focusing:\n\nhttps://i.sstatic.net/JJvvc.jpg\n\nProblem:\n\nUsing angular mat v. 15 and latest tailwindcss there is a bug when focusing input field.\n\nTo reproduce the problem:\n\n```\nng new angular-test\ncd angular-test\nng add @angular/material\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init\n```\n\n**tailwind.config.js**\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n**styles.scss**\n\n```\n[...]\n\n/* You can add global styles to this file, and also import other style files */\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n**app.component.html**\n\n```\n\n Favorite food\n \n\n```\n\nAny ideas how to solve the problem?\n\n========================================\n\nCode:\n```text\nng new angular-test\ncd angular-test\nng add @angular/material\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n[...]\n\n/* You can add global styles to this file, and also import other style files */\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n<mat-form-field appearance=\"outline\">\n <mat-label>Favorite food</mat-label>\n <input matInput placeholder=\"Ex. Pizza\" value=\"Sushi\">\n</mat-form-field>\n```\n\n```css\n.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {\n border-right-style: hidden;\n}\n```\n\n========================================\n\nComments:\n- This seems to be working for border, however, for the padding the issue still exists stackoverflow.com/questions/74621735/…\n- is also had to add this: .mat-mdc-input-element { box-shadow: none !important; }","metadata":{"transformedAt":"2026-08-18T18:33:42.882Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":117,"estimatedTokens":521}}95{"id":"stack-66186842","source":"stackoverflow","questionId":66186842,"title":"mini-css-extract plugin with postcss throws this.getOptions is not a function","tags":["reactjs","webpack","tailwind-css","postcss","mini-css-extract-plugin"],"text":"Title: mini-css-extract plugin with postcss throws this.getOptions is not a function\nTags: reactjs, webpack, tailwind-css, postcss, mini-css-extract-plugin\nSource: Stack Overflow\n\nQuestion:\nI'm trying to set up a tailwind css for my personal project. It's a react SSR application. I'm having an issue with postcss setup under the webpack configuration. It throws the same error on every *.css file (even on the empty ones).\n\nIt looks like it can't resolve the configuration file or default options? Tried different configurations, but no effect. Initially, I thought that it could be something with my css files, but they all valid and compile if I remove postcss plugin\n\n**webpack config**\n\n```\nconst path = require('path');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst CopyWebpackPlugin = require('copy-webpack-plugin');\nconst ESLintPlugin = require('eslint-webpack-plugin');\n\nconst paths = require('./paths');\n\nmodule.exports = {\n entry: {\n index: path.resolve(paths.projectSrc, 'index.js'),\n },\n resolve: {\n alias: {\n '@src': paths.projectSrc,\n },\n },\nmodule: {\n rules: [\n {\n test: /.js$/,\n exclude: /node_modules/,\n use: {\n loader: 'babel-loader',\n },\n },\n {\n test: /\\.html$/,\n use: [\n {\n loader: 'html-loader',\n options: { minimize: true },\n },\n ],\n exclude: /node_modules/,\n },\n {\n exclude: /node_modules/,\n test: /\\.css$/,\n use: [\n {\n loader: MiniCssExtractPlugin.loader,\n options: {\n publicPath: path.resolve(__dirname, './client-build/css/'),\n },\n },\n {\n loader: 'css-loader',\n options: { importLoaders: 1 },\n },\n {\n loader: 'postcss-loader',\n options: {\n postcssOptions: {\n config: path.resolve(__dirname, 'postcss.config.js'),\n },\n },\n },\n ],\n },\n {\n test: /\\.(woff2?|ttf|otf|eot|png|jpg|svg|gif)$/,\n exclude: /node_modules/,\n loader: 'file-loader',\n options: {\n name: './assets/[name].[ext]',\n },\n },\n],\n},\n plugins: [\n new ESLintPlugin(),\n new HtmlWebpackPlugin({\n template: path.resolve(paths.public, 'index.html'),\n filename: 'index.html',\n }),\n new MiniCssExtractPlugin({\n filename: '[name].bundle.css',\n chunkFilename: '[id].css',\n }),\n new CopyWebpackPlugin({\n patterns: [{ from: path.resolve(paths.public, 'assets'), to: 'assets' }],\n }),\n ],\n devtool: 'inline-source-map',\n};\n```\n\n**postcss.config.js**\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n**console output**\n\nhttps://i.sstatic.net/jNLI5.png\n\n========================================\n\nCode:\n```text\nconst path = require('path');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst CopyWebpackPlugin = require('copy-webpack-plugin');\nconst ESLintPlugin = require('eslint-webpack-plugin');\n\nconst paths = require('./paths');\n\nmodule.exports = {\n entry: {\n index: path.resolve(paths.projectSrc, 'index.js'),\n },\n resolve: {\n alias: {\n '@src': paths.projectSrc,\n },\n },\nmodule: {\n rules: [\n {\n test: /.js$/,\n exclude: /node_modules/,\n use: {\n loader: 'babel-loader',\n },\n },\n {\n test: /\\.html$/,\n use: [\n {\n loader: 'html-loader',\n options: { minimize: true },\n },\n ],\n exclude: /node_modules/,\n },\n {\n exclude: /node_modules/,\n test: /\\.css$/,\n use: [\n {\n loader: MiniCssExtractPlugin.loader,\n options: {\n publicPath: path.resolve(__dirname, './client-build/css/'),\n },\n },\n {\n loader: 'css-loader',\n options: { importLoaders: 1 },\n },\n {\n loader: 'postcss-loader',\n options: {\n postcssOptions: {\n config: path.resolve(__dirname, 'postcss.config.js'),\n },\n },\n },\n ],\n },\n {\n test: /\\.(woff2?|ttf|otf|eot|png|jpg|svg|gif)$/,\n exclude: /node_modules/,\n loader: 'file-loader',\n options: {\n name: './assets/[name].[ext]',\n },\n },\n],\n},\n plugins: [\n new ESLintPlugin(),\n new HtmlWebpackPlugin({\n template: path.resolve(paths.public, 'index.html'),\n filename: 'index.html',\n }),\n new MiniCssExtractPlugin({\n filename: '[name].bundle.css',\n chunkFilename: '[id].css',\n }),\n new CopyWebpackPlugin({\n patterns: [{ from: path.resolve(paths.public, 'assets'), to: 'assets' }],\n }),\n ],\n devtool: 'inline-source-map',\n};\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n```text\npostcss-loader\n```\n\n```text\nwebpack\n```\n\n```text\nwebpack\n```\n\n```text\n5\n```\n\n```text\npostcss-loader\n```\n\n```text\nwebpack\n```\n\n```text\nwebpack\n```\n\n```text\npostcss-loader\n```\n\n```text\nwebpack\n```\n\n```text\npackage.json\n```\n\n```text\npackage.lock.json\n```\n\n```text\nnode_modules\n```\n\n```text\nnpm install\n```\n\n```text\nng serve\n```\n\n```text\nng build\n```\n\n========================================\n\nComments:\n- I was using `less-loader` at version 8, and my solution was similar: I had to downgrade to version 7 to be able to use with Webpack 4.","metadata":{"transformedAt":"2026-08-18T18:33:42.882Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":17,"totalLines":280,"estimatedTokens":1255}}96{"id":"stack-75422265","source":"stackoverflow","questionId":75422265,"title":"next/font works everywhere except one specific component","tags":["javascript","css","next.js","fonts","tailwind-css"],"text":"Title: next/font works everywhere except one specific component\nTags: javascript, css, next.js, fonts, tailwind-css\nSource: Stack Overflow\n\nQuestion:\n### next/font\n\n### Uses Next.js with TypeScript and Tailwind CSS\n\nThis is my first time using the new `next/font` package. I followed Next.js' tutorial, and it was easy to set up. I'm using both Inter and a custom local typeface called App Takeoff. To actually use both of these typefaces, I'm using Tailwind CSS, where Inter is connected to `font-sans` and App Takeoff is connected to `font-display`.\n\n### Everything works except in one spot\n\nI have done plenty of testing between files, and for some reason both typefaces work everywhere except my `Modal` component. (See **Helpful Update** at the bottom for why it doesn't work in the `Modal` component.)\n\n### Example\n\n**index.tsx**\n\nhttps://i.sstatic.net/8MyTU.png\n\n**modal.tsx via index.tsx**\n\nhttps://i.sstatic.net/YrMVA.png\n\nAs you can see, the typefaces work just fine when they aren't inside the modal, but as soon as they're in the modal they don't work.\n\n### Here's some relevant code:\n\n```\n// app.tsx\n\nimport '@/styles/globals.css'\nimport type { AppProps } from 'next/app'\n\nimport { Inter } from 'next/font/google'\nconst inter = Inter({\n subsets: ['latin'],\n variable: '--font-inter'\n})\n\nimport localFont from 'next/font/local'\nconst appTakeoff = localFont({\n src: [\n {\n path: '../fonts/app-takeoff/regular.otf',\n weight: '400',\n style: 'normal'\n },\n {\n path: '../fonts/app-takeoff/regular.eot',\n weight: '400',\n style: 'normal'\n },\n {\n path: '../fonts/app-takeoff/regular.woff2',\n weight: '400',\n style: 'normal'\n },\n {\n path: '../fonts/app-takeoff/regular.woff',\n weight: '400',\n style: 'normal'\n },\n {\n path: '../fonts/app-takeoff/regular.ttf',\n weight: '400',\n style: 'normal'\n }\n ],\n variable: '--font-app-takeoff'\n})\n\nconst App = ({ Component, pageProps }: AppProps) => {\n return (\n \n \n \n )\n}\n\nexport default App\n```\n\n```\n// modal.tsx\n\nimport type { FunctionComponent } from 'react'\nimport type { Modal as ModalProps } from '@/typings/components'\nimport React, { useState } from 'react'\nimport { Fragment } from 'react'\nimport { Transition, Dialog } from '@headlessui/react'\n\nconst Modal: FunctionComponent = ({ trigger, place = 'bottom', className, addClass, children }) => {\n\n const [isOpen, setIsOpen] = useState(false),\n openModal = () => setIsOpen(true),\n closeModal = () => setIsOpen(false)\n\n const Trigger = () => React.cloneElement(trigger, { onClick: openModal })\n\n const enterFrom = place === 'center'\n ? '-translate-y-[calc(50%-12rem)]'\n : 'translate-y-full sm:-translate-y-[calc(50%-12rem)]'\n\n const mainPosition = place === 'center'\n ? '-translate-y-1/2'\n : 'translate-y-0 sm:-translate-y-1/2'\n\n const leaveTo = place === 'center'\n ? '-translate-y-[calc(50%+8rem)]'\n : 'translate-y-full sm:-translate-y-[calc(50%+8rem)]'\n\n return (\n <>\n \n \n\n \n\n {/* Backdrop */}\n \n\n \n {children}\n \n \n\n \n Close\n \n\n \n\n \n )\n}\n\nexport default Modal\n```\n\nI hope this information helps. Let me know if there's anything else that would be helpful to know.\n\n### Helpful Update\n\nThank you **Jonathan Wieben** for explanation of why this isn't working (See Explanation). The issue simply has to do with the scope of the applied styles, and Headless UI's usage of the React `Portal` component. If anyone has some ideas of how I can either change where the `Portal` is rendered or change the scope of the styles, that would be super helpful. **Jonathan Wieben** pointed out a way to do this, however—from my testing—it doesn't work with Tailwind CSS.\n\n========================================\n\nTop Answer:\nI had the exact same problem with headlessui, tailwind and nextjs.\nI found the solution that was marked correctly way too complicated for something as simple as modal.\nWhat worked for me is to insert the same font into the Modal component:\n\n\r\n\r\n\n```\n//Modal.tsx\nimport { Dialog, Transition } from '@headlessui/react';\nimport { Rubik } from '@next/font/google';\n\nconst rubik = Rubik({\n subsets: ['latin'],\n variable: '--font-rubik',\n});\n\ntype Props = {\n children: React.ReactNode;\n isOpen: boolean;\n closeModal: any;\n};\n\nconst Modal = ({ children, isOpen, closeModal }: Props) => {\n return (\n <>\n \n \n ...\n \n ...\n \n \n \n \n );\n};\nexport default Modal;\n```\n\n\r\n\r\n\r\n\nWorked like a charm.\n\n========================================\n\nCode:\n```text\n// app.tsx\n\nimport '@/styles/globals.css'\nimport type { AppProps } from 'next/app'\n\nimport { Inter } from 'next/font/google'\nconst inter = Inter({\n subsets: ['latin'],\n variable: '--font-inter'\n})\n\nimport localFont from 'next/font/local'\nconst appTakeoff = localFont({\n src: [\n {\n path: '../fonts/app-takeoff/regular.otf',\n weight: '400',\n style: 'normal'\n },\n {\n path: '../fonts/app-takeoff/regular.eot',\n weight: '400',\n style: 'normal'\n },\n {\n path: '../fonts/app-takeoff/regular.woff2',\n weight: '400',\n style: 'normal'\n },\n {\n path: '../fonts/app-takeoff/regular.woff',\n weight: '400',\n style: 'normal'\n },\n {\n path: '../fonts/app-takeoff/regular.ttf',\n weight: '400',\n style: 'normal'\n }\n ],\n variable: '--font-app-takeoff'\n})\n\nconst App = ({ Component, pageProps }: AppProps) => {\n return (\n <div className={`${inter.variable} font-sans ${appTakeoff.variable}`}>\n <Component {...pageProps} />\n </div>\n )\n}\n\nexport default App\n```\n\n```text\n// modal.tsx\n\nimport type { FunctionComponent } from 'react'\nimport type { Modal as ModalProps } from '@/typings/components'\nimport React, { useState } from 'react'\nimport { Fragment } from 'react'\nimport { Transition, Dialog } from '@headlessui/react'\n\nconst Modal: FunctionComponent<ModalProps> = ({ trigger, place = 'bottom', className, addClass, children }) => {\n\n const [isOpen, setIsOpen] = useState(false),\n openModal = () => setIsOpen(true),\n closeModal = () => setIsOpen(false)\n\n const Trigger = () => React.cloneElement(trigger, { onClick: openModal })\n\n const enterFrom = place === 'center'\n ? '-translate-y-[calc(50%-12rem)]'\n : 'translate-y-full sm:-translate-y-[calc(50%-12rem)]'\n\n const mainPosition = place === 'center'\n ? '-translate-y-1/2'\n : 'translate-y-0 sm:-translate-y-1/2'\n\n const leaveTo = place === 'center'\n ? '-translate-y-[calc(50%+8rem)]'\n : 'translate-y-full sm:-translate-y-[calc(50%+8rem)]'\n\n return (\n <>\n \n <Trigger />\n\n <Dialog open={isOpen} onClose={closeModal} className='z-50'>\n\n {/* Backdrop */}\n <div className='fixed inset-0 bg-zinc-200/50 dark:bg-zinc-900/50 backdrop-blur-sm cursor-pointer' aria-hidden='true' />\n\n <Dialog.Panel\n className={`\n ${className || `\n fixed left-1/2\n ${\n place === 'center'\n ? 'top-1/2 rounded-2xl'\n : 'bottom-0 sm:bottom-auto sm:top-1/2 rounded-t-2xl xs:rounded-b-2xl'\n }\n bg-zinc-50 dark:bg-zinc-900\n w-min\n -translate-x-1/2\n overflow-hidden\n px-2 xs:px-6\n shadow-3xl shadow-primary-400/10\n `}\n ${addClass || ''}\n `}\n >\n {children}\n \n </Dialog.Panel>\n\n <button\n onClick={closeModal}\n className='\n fixed top-4 right-4\n bg-primary-600 hover:bg-primary-400\n rounded-full\n h-7 w-7 desktop:hover:w-20\n overflow-x-hidden\n transition-[background-color_width] duration-300 ease-in-out\n group/button\n '\n aria-role='button'\n >\n Close\n </button>\n\n </Dialog>\n\n </>\n )\n}\n\nexport default Modal\n```\n\n```text\nnext/font\n```\n\n```text\nfont-sans\n```\n\n```text\nfont-display\n```\n\n```text\nModal\n```\n\n```text\nModal\n```\n\n```text\nPortal\n```\n\n```text\nPortal\n```\n\n```text\nDialog\n```\n\n```text\ndiv\n```\n\n```text\nApp\n```\n\n```text\n/**\n * ### Add Class\n * - Adds the specified classes to the specified elements\n * @param {Element|HTMLElement|HTMLElement[]|NodeList|string|undefined} elements An HTML Element, an array of HTML Elements, a Node List, a string (as a selector for a querySelector)\n * @param {string|string[]} classes A string or an array of classes to add to each element\n */\nexport const addClass = (elements: Element | HTMLElement | HTMLElement[] | NodeList | string, classes: string | string[]) => {\n\n const elementsType = elements.constructor.name,\n classesType = classes.constructor.name\n\n let elementList: HTMLElement[] | undefined,\n classesList: string[] | undefined\n\n // * Convert elements to array\n // @ts-ignore elementsType verifies type\n if (elementsType === 'String') elementList = Array.from(document.querySelectorAll(elements)) // Selector\n // @ts-ignore elementsType varfies type\n if (elementsType.startsWith('HTML')) elementList = [elements] // One HTML Element\n // @ts-ignore elementsType verifies type\n if (elementsType === 'NodeList') elementList = Array.from(elements) // Multiple HTML Elements\n // @ts-ignore elementsType verifies type\n if (elementsType === 'Array') elementList = elements // Array of Elements\n\n // * Convert classes to array\n // @ts-ignore classesType verifies type\n if (classesType === 'String' && classes.split(' ')) classesList = classes.split(' ')\n // @ts-ignore classesType verifies type\n if (classesType === 'Array') classesList = classes\n\n if (elementList && classesList) elementList.forEach((element: HTMLElement) =>\n classesList!.forEach((classItem: string) => {\n if (hasClass(element, classItem)) return\n element.classList.add(classItem)\n })\n )\n}\n```\n\n```text\n// app.tsx\n\nimport '@/styles/globals.css'\nimport type { AppProps } from 'next/app'\n\nimport { Inter } from 'next/font/google'\nconst inter = Inter({\n subsets: ['latin'],\n variable: '--font-inter'\n})\n\nimport localFont from 'next/font/local'\nconst appTakeoff = localFont({\n src: [\n {\n path: '../fonts/app-takeoff/regular.otf',\n weight: '400',\n style: 'normal'\n },\n {\n path: '../fonts/app-takeoff/regular.eot',\n weight: '400',\n style: 'normal'\n },\n {\n path: '../fonts/app-takeoff/regular.woff2',\n weight: '400',\n style: 'normal'\n },\n {\n path: '../fonts/app-takeoff/regular.woff',\n weight: '400',\n style: 'normal'\n },\n {\n path: '../fonts/app-takeoff/regular.ttf',\n weight: '400',\n style: 'normal'\n }\n ],\n variable: '--font-app-takeoff'\n})\n\nimport { useEffect, useMemo } from 'react'\n\nimport { addClass } from '@/utils/class-management'\n\nconst App = ({ Component, pageProps }: AppProps) => {\n\n // Set an array of the classes (use string with classList.add())\n const typefaceClasses = useMemo(() => [\n inter.variable,\n appTakeoff.variable,\n 'font-sans'\n ], [])\n\n useEffect(() => {\n // First we make sure the window is defined\n if (typeof window) {\n // Get the body element\n const body = document.querySelector('body')\n // If the body element is truthy, we add all of the classes to it\n // Otherwise null\n body ? addClass(body, typefaceClasses) : null\n }\n }, [typefaceClasses])\n\n return (\n <Component {...pageProps} />\n )\n}\n\nexport default App\n```\n\n```text\nnext/font\n```\n\n```text\n@headlessui/react\n```\n\n```text\nModal\n```\n\n```text\n<body>\n```\n\n```text\nnext/font\n```\n\n```text\nCSS\n```\n\n```text\n<body>\n```\n\n```text\n<div>\n```\n\n```text\nApp\n```\n\n```text\nnext/font\n```\n\n```text\n<div>\n```\n\n```text\nJavaScript\n```\n\n```text\ndocument.querySelector('body')\n```\n\n```text\nclassName.add()\n```\n\n```text\naddClass\n```\n\n```text\nbody.classList.add(typefaceClasses)\n```\n\n```text\naddClass\n```\n\n```text\nuseEffect\n```\n\n```text\n<body>\n```\n\n```js\n//Modal.tsx\nimport { Dialog, Transition } from '@headlessui/react';\nimport { Rubik } from '@next/font/google';\n\nconst rubik = Rubik({\n subsets: ['latin'],\n variable: '--font-rubik',\n});\n\ntype Props = {\n children: React.ReactNode;\n isOpen: boolean;\n closeModal: any;\n};\n\nconst Modal = ({ children, isOpen, closeModal }: Props) => {\n return (\n <>\n <Transition ...>\n <Dialog ...>\n ...\n <Dialog.Panel\n className={`${rubik.variable} font-sans ...`}>\n ...\n </Dialog.Panel>\n </Dialog>\n </Transition>\n </>\n );\n};\nexport default Modal;\n```\n\n```text\n/********* external libraries ****************/\n/********* external libraries ****************/\n\n/********* internal libraries ****************/\nimport { Noto_Sans_TC } from '@next/font/google';\nimport CustomFont from '@next/font/local';\nimport type { NextPage } from 'next';\nimport type { AppProps } from 'next/app';\nimport Head from 'next/head';\nimport type { ReactElement, ReactNode } from 'react';\nimport './styles.css';\n\n/********* internal libraries ****************/\n\nexport type NextPageWithLayout<P = unknown, IP = P> = NextPage<P, IP> & {\n getLayout?: (page: ReactElement) => ReactNode;\n};\n\ntype AppPropsWithLayout = AppProps & {\n Component: NextPageWithLayout;\n};\n\nconst notoSansTC = Noto_Sans_TC({\n weight: ['300', '400', '700', '900'],\n subsets: ['chinese-traditional'],\n display: 'swap',\n});\n\nconst chappaFont = CustomFont({\n src: '../public/fonts/chappa-Black.ttf',\n variable: '--font-chappa',\n});\nconst cubic11 = CustomFont({\n src: '../public/fonts/Cubic_11_1.013_R.ttf',\n variable: '--font-cubic11',\n});\n\nexport default function CustomApp({\n Component,\n pageProps: { session, ...pageProps },\n}: AppPropsWithLayout) {\n const getLayout = Component.getLayout ?? ((page) => page);\n\n return (\n <>\n <style jsx global>{`\n .body {\n font-family: ${notoSansTC.style.fontFamily};\n }\n\n .font-cubic11 {\n font-family: ${cubic11.style.fontFamily};\n }\n\n .font-chappa {\n font-family: ${chappaFont.style.fontFamily};\n }\n `}</style>\n <Head>\n <title>Welcome</title>\n </Head>\n <div\n className={`${chappaFont.variable} ${cubic11.variable} ${notoSansTC.className}`}\n >\n {getLayout(<Component {...pageProps} />)}\n </div>\n </>\n );\n}\n```\n\n========================================\n\nComments:\n- tailwindcss.com/docs/guides/nextjs have u add tailwindcss plugin for postcss ?\n- Yep. I use that exact documentation from Tailwind. Is there anything you think I should add to the `postcss.config.js` file, that would make it work?\n- This makes sense, but this doesn't seem to work with TailwindCSS, unless I'm just doing it wrong. Do you know of a way to apply this on the TailwindCSS level?\n- This is much better, and so simple. Thank you!","metadata":{"transformedAt":"2026-08-18T18:33:42.886Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":35,"totalLines":686,"estimatedTokens":3661}}97{"id":"stack-79412989","source":"stackoverflow","questionId":79412989,"title":"How to configure TailwindCSS 4 to work with an Angular 19 app that uses Sass","tags":["angular","sass","tailwind-css","tailwind-css-4"],"text":"Title: How to configure TailwindCSS 4 to work with an Angular 19 app that uses Sass\nTags: angular, sass, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI have an Angular 19 app which uses SCSS and I have TailwindCSS 3.4.17 setup and it works.\n\nNow I want to upgrade to TailwindCSS v4. I the official instructions to install it on Angular from here and I get errors.\n\n[WARNING] Deprecation [plugin angular-sass]\n\n```\nsrc/styles/_tailwind.scss:1:8:\n 1 │ @import \"tailwindcss\";\n ╵ ^\n```\n\nI can add `@use \"tailwindcss\";` and that resolves that error. But I also get another error:\n\nX [ERROR] Cannot apply unknown utility class: bg-gray-100 [plugin angular-sass]\n\n```\nnode_modules/tailwindcss/dist/lib.js:17:296:\n 17 │ ...r,{onInvalidCandidate:x=>{throw new Error(`Cannot apply\n```\n\nunknown...\n╵\n\nSo I removed all the `@apply` declarations in my `.scss` files, which cleared up the error, but then the `tailwind.config.js` was not used.\n\nThe docs says:\n\nJavaScript config files are still supported for backward compatibility, but they are no longer detected automatically in v4.\n\nIf you still need to use a JavaScript config file, you can load it explicitly using the @config directive:\n\nCSS\n@config \"../../tailwind.config.js\";\n\nSo I added the `@config` file to `_tailwindcss.scss` which is included in my `styles.scss` file, and I got errors again:\n\nThe plugin \"angular-sass\" was triggered by this import\n\n```\nangular:styles/global:styles:2:8:\n 2 │ @import 'src/styles.scss';\n```\n\nHow am I supposed to configure Tailwind 4 to work with Angular 19 apps using Sass?\n\n========================================\n\nTop Answer:\nI'm using Angular v19, Angular Material v19 & Parts of Tailwind CSS v4.\n\nDocs:\n\n- Tailwind + Angular\n\n- Upgrade Guide\n\nRun to upgrade\n\n```\nnpx @tailwindcss/upgrade@next\n```\n\nRun to install\n\n```\nnpm install tailwindcss @tailwindcss/postcss postcss --force\n```\n\nAdd `.postcssrc.json`\n\n```\n{\n \"plugins\": {\n \"@tailwindcss/postcss\": {}\n }\n}\n```\n\nI added `themes/_tailwind.css`\n\n```\n@import \"tailwindcss/theme\";\n@import \"tailwindcss/utilities\";\n```\n\nAnd updated my `styles.scss` to include\n\n```\n@use \"themes/tailwind\";\n```\n\nThis also helped me fix auto-complete issue for VS Code `tailwindcss/intellisense` extension.\n\n========================================\n\nCode:\n```text\nsrc/styles/_tailwind.scss:1:8:\n 1 │ @import \"tailwindcss\";\n ╵ ^\n```\n\n```text\nnode_modules/tailwindcss/dist/lib.js:17:296:\n 17 │ ...r,{onInvalidCandidate:x=>{throw new Error(`Cannot apply\n```\n\n```text\nangular:styles/global:styles:2:8:\n 2 │ @import 'src/styles.scss';\n```\n\n```text\n@use \"tailwindcss\";\n```\n\n```text\n@apply\n```\n\n```text\n.scss\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@config\n```\n\n```text\n_tailwindcss.scss\n```\n\n```text\nstyles.scss\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n --color-neutral-0: #111;\n}\n```\n\n```css\n@use \"custom.scss\";\n\n$primary: #42b883;\n\nbody {\n background: $primary;\n}\n```\n\n```js\nimport \"./main.scss\";\nimport \"./tailwind.css\";\n```\n\n```text\n.scss\n```\n\n```text\n.less\n```\n\n```text\n.css\n```\n\n```text\n.scss\n```\n\n```text\n.css\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\nstyles.scss\n```\n\n```text\ntailwind.css\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\n.scss\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\n.scss\n```\n\n```text\n*.module.css\n```\n\n```text\n<style>\n```\n\n```text\n@reference\n```\n\n```text\n@apply\n```\n\n```bash\nnpx @tailwindcss/upgrade@next\n```\n\n```bash\nnpm install tailwindcss @tailwindcss/postcss postcss --force\n```\n\n```json\n{\n \"plugins\": {\n \"@tailwindcss/postcss\": {}\n }\n}\n```\n\n```css\n@import \"tailwindcss/theme\";\n@import \"tailwindcss/utilities\";\n```\n\n```scss\n@use \"themes/tailwind\";\n```\n\n```text\n.postcssrc.json\n```\n\n```text\nthemes/_tailwind.css\n```\n\n```text\nstyles.scss\n```\n\n```text\ntailwindcss/intellisense\n```\n\n```coffee\nnpm install tailwindcss @tailwindcss/postcss postcss --force\n```\n\n```scss\n@use \"tailwindcss\";\n```\n\n```text\n.postcssrc.json\n```\n\n```text\n@tailwindcss/postcss\n```\n\n========================================\n\nComments:\n- At least in the docs, they suggest you \"Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.\"\n- That is horrible. A library shouldn't dictate how the framework is setup. They don't support a feature of angular. So either support everything in angular, or don't support angular at all. This is unacceptable imo. Thanks for the link. I didn't see it before. I won't use tailwindcss 4 and I'll use another library from now on.\n- @arm It's not at all unacceptable that a framework doesn't go out of its way to be compatible with another framework, especially a direct competitor. If you want two competing frameworks to be compatible with each other, you should expect to have to modify them yourself, file a pull request on the repository to add that functionality into TailwindCSS v4, or just don't use it since it doesn't fit your use case.\n- That is pretty sad. Firstly, we can't predict what browser our client is using, from phones to TVs or other devices and they wont always support nesting. So I rather convert my SCSS nested stuff to CSS. Secondly some people use Material Desing lib in React or Angular and they work with SCSS mixins for theming. I am using Tailwind for their flex, margin and padding utilities for my convenience. So this is now no longer possible. That is a bit unacceptable. I am getting tired of libraries just making a UTurn and then we developers who maintain big software have to migrate to another tool\n- Thanks for clarification. I always make my own styles using scss, because I like we have that per component styles in Angular, but wanted to try primeng with tailwind for new project in new year. But after reading this... no, thank you.\n- @Mattijs well said, stuck in material with layout setup\n- I have it working... with inline utility classes - but @apply is not working in scss files for me: Cannot apply unknown utility class: mt-4 [plugin angular-sass]\n- @Demiro-FE-Architect - Deprecated: Sass, Less and Stylus preprocessors support\n- @Demiro-FE-Architect you need to migrate your apply use cases to normal css statements by using the tailwind css variables. makes it also a lot more readable","metadata":{"transformedAt":"2026-08-18T18:33:42.886Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":43,"totalLines":306,"estimatedTokens":1571}}98{"id":"stack-75536819","source":"stackoverflow","questionId":75536819,"title":"Auto-add \"tw-\" prefix to existing codebase","tags":["reactjs","tailwind-css","postcss"],"text":"Title: Auto-add \"tw-\" prefix to existing codebase\nTags: reactjs, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nTailwind CSS has clear documentation on how one can generate prefixes for all Tailwind classes to better isolate the styles of a particular app from its context. However, I can't seem to find a straight answer on how I can transform the existing code to use the prefix. The documentation (https://tailwindcss.com/docs/configuration) shows how to generate the \"tw-\" classes, but **not** how to modify the existing codebase to prepend this \"tw-\" prefix to the code itself.\n\nI have a lot of these classes and it isn't feasible to manually go through and add the \"tw-\" prefix to the existing classes.\n\nAm I missing something? How do I transform the existing codebase to use the generated class prefix without having to manually edit all tailwind classes myself?\n\n========================================\n\nCode:\n```js\ndocument.querySelectorAll(\"a.block\").forEach(elem => {\n if (elem.innerText.startsWith(\".\")){\n console.log(elem.innerText);\n }\n});\n```\n\n========================================\n\nComments:\n- Hi @camelCaseCowboy, please were you able to find a resolution on this? I am in the same boat currently.\n- I think the only thing you are missing is it is designed to be used from the outset of a project. If it is not feasible to update the existing codebase manually there are other ways to isolate the styles such as using `postcss-prefix-selector`.","metadata":{"transformedAt":"2026-08-18T18:33:42.886Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":27,"estimatedTokens":372}}99{"id":"stack-64257049","source":"stackoverflow","questionId":64257049,"title":"How to fill up the rest of the screen height using TailwindCSS","tags":["html","css","tailwind-css"],"text":"Title: How to fill up the rest of the screen height using TailwindCSS\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using Vue with Tailwind and want to create a \"NotFound\" view page. The content on this router view should be in the center on the screen. Above the router view is a navbar component so I have to take care for the height when centering it.\n\nFirst, I tried to use `h-screen` for the router view\n\n\r\n\r\n\n```\n\n \n my navbar\n \n \n this content is not centered on screen\n \n\n```\n\n\r\n\r\n\r\n\nbut as you can see the content in the green container is not in the center of the screen. Next I tried to work with `h-full`\n\n\r\n\r\n\n```\n\n \n my navbar\n \n \n this content is not centered on screen\n \n\n```\n\n\r\n\r\n\r\n\nbut unfortunately this still doesn't fix it. Does someone know how to correctly fill up the rest of the screen height so the router view will have a height of `100% - navbarComponentHeight`?\n\n========================================\n\nCode:\n```html\n<link href=\"https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n<div>\n <div class=\"bg-yellow-400 py-8\">\n my navbar\n </div>\n <div class=\"bg-green-400 flex justify-center items-center h-screen\">\n this content is not centered on screen\n </div>\n</div>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css\" rel=\"stylesheet\" />\n<div class=\"h-screen\">\n <div class=\"bg-yellow-400 py-8\">\n my navbar\n </div>\n <div class=\"bg-green-400 flex justify-center items-center h-full\">\n this content is not centered on screen\n </div>\n</div>\n```\n\n```text\nh-screen\n```\n\n```text\nh-full\n```\n\n```text\n100% - navbarComponentHeight\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n<div class=\"flex flex-col h-screen\">\n <div class=\"bg-yellow-400 py-8\">\n my navbar\n </div>\n <div class=\"bg-green-400 flex justify-center items-center flex-grow\">\n this content is centered on screen\n </div>\n</div>\n```\n\n========================================\n\nComments:\n- Now what if you have a nav bar in one div, but then 2 divs within the nav bars sibling div? How could we go about making sure the 1st child div of the nav bar's sibling div takes up the rest of the screen height? My head is spinning.","metadata":{"transformedAt":"2026-08-18T18:33:42.886Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":104,"estimatedTokens":568}}100{"id":"stack-71035013","source":"stackoverflow","questionId":71035013,"title":"How to create a TailwindCSS grid with a dynamic amount of grid columns?","tags":["javascript","html","css","tailwind-css"],"text":"Title: How to create a TailwindCSS grid with a dynamic amount of grid columns?\nTags: javascript, html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using Vue3 with TailwindCSS and want to create a grid with a dynamic `grid-cols-{n}` class. I know that TailwindCSS supports up to 12 columns by default but I can't customize the theme because the amount of columns is completely dynamic.\n\nGiven the following plain HTML / Js example\n\n\r\n\r\n\n```\nconst amountOfItemsPerRow = 16;\n\nconst container = document.getElementById(\"container\");\n\nfor (let i = 0; i \n\n```\n\n\r\n\r\n\r\n\nThis code works fine if `amountOfItemsPerRow` is smaller or equal than 12, otherwise the CSS is broken.\n\nDo I have to write code to setup plain CSS solving this or is there a dynamic Tailwind solution?\n\n**Another approach:**\n\nBased on the docs I tried to replace the line\n\n```\ncontainer.classList.add(`grid-cols-${amountOfItemsPerRow}`);\n```\n\nwith\n\n```\ncontainer.classList.add(`grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))`);\n```\n\nto come up with a \"native\" approach but that didn't help.\n\n========================================\n\nTop Answer:\nHere for React.js & Next.js:\n\n```\nimport { AllHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\n\n// @interface IGrid extends all properties\ninterface IGrid extends AllHTMLAttributes {}\n\nexport default function Grid({\n className = \"\",\n cols = 8,\n rows = 4,\n ...rest\n}: IGrid) {\n const props = { className: classNames(className, \"grid\"), ...rest };\n const gridTemplateColumns = `repeat(${cols}, 1fr)`;\n\n const gridItems = new Array(cols * rows)\n .fill(\"\")\n .map((_, i) => {i});\n\n return (\n \n {gridItems}\n \n );\n}\n```\n\n✅ Tested in: `tailwindcss@3.3.3` without additional configuration.\n\n⚠️ It isn't a best practice though:\n\nMicrosoft Edge Tools: (no-inline-styles)\n\n========================================\n\nCode:\n```js\nconst amountOfItemsPerRow = 16;\n\nconst container = document.getElementById(\"container\");\n\nfor (let i = 0; i < amountOfItemsPerRow; i++) {\n const item = document.createElement(\"div\");\n item.innerText = i;\n container.appendChild(item);\n}\n\ncontainer.classList.add(`grid-cols-${amountOfItemsPerRow}`); // this doesn't work if the value is greater than 12\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div id=\"container\" class=\"grid\"></div>\n```\n\n```text\ncontainer.classList.add(`grid-cols-${amountOfItemsPerRow}`);\n```\n\n```text\ncontainer.classList.add(`grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))`);\n```\n\n```text\ngrid-cols-{n}\n```\n\n```text\namountOfItemsPerRow\n```\n\n```css\n.grid-columns-12 {\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n```\n\n```js\nfunction setDynamicColumns(cols) {\n document\n .querySelector('#elementWithDynamicGrid')\n .style['grid-template-columns'] = `repeat(${cols}, minmax(0, 1fr))`\n}\n```\n\n```js\ncontainer.classList.add(`grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))`)\n```\n\n```js\nmodule.exports = { \n theme: { \n extend: { \n gridTemplateColumns: { \n // Simple 16 column grid \n '16': 'repeat(16, minmax(0, 1fr))', \n } \n } \n }\n}\n```\n\n```js\n//tailwind.config.js\nfunction generateGridColumns(lastValue) {\n let obj = {}\n for(let i = 13; i < lastValue; i++) {\n obj[`${i}`] = `repeat(${i}, minmax(0, 1fr))`\n }\n return obj\n}\n\n\nmodule.exports = { \n theme: { \n extend: { \n gridTemplateColumns: {\n ...generateGridColumns(100) // This generates the columns from 12 until 100\n } \n } \n }\n}\n```\n\n```text\n.grid-columns-12\n```\n\n```text\nstyle\n```\n\n```text\nclass\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ngrid-columns-*\n```\n\n```text\nconst amountOfRows = 16;\nconst amountOfCellsPerRow = 16;\n\nconst container = document.getElementById(\"container\");\n\nfor (let rowIndex = 0; rowIndex < amountOfRows; rowIndex++) {\n for (let columnIndex = 0; columnIndex < amountOfCellsPerRow; columnIndex++) {\n const cell = document.createElement(\"div\");\n cell.innerText = rowIndex + \"|\" + columnIndex;\n container.appendChild(cell);\n }\n}\n\ncontainer.classList.add(`grid-cols-[${amountOfCellsPerRow}]`)\n```\n\n```text\n[\n```\n\n```text\n]\n```\n\n```text\nimport { AllHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\n\n// @interface IGrid extends all <div /> properties\ninterface IGrid extends AllHTMLAttributes<HTMLDivElement> {}\n\nexport default function Grid({\n className = \"\",\n cols = 8,\n rows = 4,\n ...rest\n}: IGrid) {\n const props = { className: classNames(className, \"grid\"), ...rest };\n const gridTemplateColumns = `repeat(${cols}, 1fr)`;\n\n const gridItems = new Array(cols * rows)\n .fill(\"\")\n .map((_, i) => <div key={`gridItem-${i}`}>{i}</div>);\n\n return (\n <div {...props} style={{ gridTemplateColumns }}>\n {gridItems}\n </div>\n );\n}\n```\n\n```text\ntailwindcss@3.3.3\n```\n\n========================================\n\nComments:\n- Another solution would be to create a grid component and use that based on the amount of data columns returned from API, etc. You would end up with multiple 12 column grids.\n- but what needs to be done after wrapping it inside `[]`? I think the required css would be `grid-template-columns: repeat(amountOfCellsPerRow, minmax(0, 1fr));`\n- @medsmh Does my works fine?\n- sorry, no. I tested it with the CDN example from above\n- interesting. My approach `container.classList.add(`grid-template-columns:repeat(${amoun‌​tOfItemsPerRow},minm‌​ax(0,1fr))`)` didn't work. But yours `container.style['grid-template-columns'] =`repeat(${amountOfItemsPerRow},minmax(0,1fr))`` does ... reproduced it with jsfiddle.net/t94gfops/3\n- Because we're dynamically setting the `style` attribute from the HTML. You were on the right path but setting a class that didn't exist\n- It's sad, that it does not work with TailwindCSS, because apparently it's integrated via postCSS. Since I am working on a custom calendar (existing ones do not fit my needs), I have a particular amount of grid column templates (2 to 8 columns), which I could add as custom templates and ensure I include those in the `safelist`. Thanks!","metadata":{"transformedAt":"2026-08-18T18:33:42.886Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":263,"estimatedTokens":1535}}101{"id":"stack-67910118","source":"stackoverflow","questionId":67910118,"title":"How can I set min-height in Tailwind?","tags":["css","tailwind-css"],"text":"Title: How can I set min-height in Tailwind?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've got an inline-block that should be at least 1 rem high but will expand if the content doesn't fit. Without Tailwind, I'd solve it the following way.\n\n```\n\n content...\n\n```\n\nHowever, the only min-h classes supplied by Tailwind are `min-h-0`, `min-h-full`, and `min-h-screen`. So which class should I add here to write it the \"Tailwind way\"?\n\n```\n\n content...\n\n```\n\n========================================\n\nCode:\n```text\n<div style=\"display:inline-block; min-height:1rem;\">\n content...\n</div>\n```\n\n```text\n<div class=\"inline-block ???\">\n content...\n</div>\n```\n\n```text\nmin-h-0\n```\n\n```text\nmin-h-full\n```\n\n```text\nmin-h-screen\n```\n\n```text\n<div class=\"inline-block min-h-[1rem]\">\n content...\n</div>\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n minHeight: (theme) => ({\n ...theme('spacing'),\n }),\n }\n },\n}\n```\n\n```text\n<div class=\"inline-block min-h-4\">\n content...\n</div>\n```\n\n```text\nmin-height\n```\n\n```text\nmin-h-4\n```\n\n```text\nmin-height\n```\n\n========================================\n\nComments:\n- Checkout tailwind \"JIT (just-in-time)\" feature. You can do crazy things like class=\"h-[1rem]\"\n- Thanks @MinSomai I'll check it out! I figured this would be such a common use-case that I'm missing something. This is my first \"real\" project with Tailwind.\n- We used to code custom css for things which are of arbitrary values. Anyway, this new tailwind feature solves most of these cases.\n- @MinSomai Just checked it out, I see that JIT was introduced in Tailwind 2.1. Unfortunately this project is using 2.0 at the moment and it's not in my power to bump that!\n- you have two options AFAIK: define your own min-h-1rem or something in tailwind.config.js or write a new class.\n- Thanks you! I ended up extending the config. Thanks a lot for your example code!\n- This is great. Would love see the `Extending the config` solution become default!\n- why though isn't setting an integer value for `min-h-` the default behavior like it is with `height` and `width`? Is it not very common or perhaps discouraged?","metadata":{"transformedAt":"2026-08-18T18:33:42.886Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":95,"estimatedTokens":539}}102{"id":"stack-71377814","source":"stackoverflow","questionId":71377814,"title":"Prettier code formatting is not splitting classNames in JSX or HTML","tags":["reactjs","visual-studio-code","tailwind-css","prettier"],"text":"Title: Prettier code formatting is not splitting classNames in JSX or HTML\nTags: reactjs, visual-studio-code, tailwind-css, prettier\nSource: Stack Overflow\n\nQuestion:\nI have the Prettier VSCode extension enabled and my local .prettierrc file has `\"printWidth\": 70` as one of the options, however, when I have a long list of classNames in my JSX (or plain HTML) file, Prettier does not honor the `printWidth` setting and lets the list of classes run on indefinitely without breaking the line. This is only an issue because I use Headwind, which is a Tailwind class sorting extension and when running `Headwind:Sort` it takes my multi line classes and puts them back on one line. Running `Prettier:Format` should then split this long line up again, but alas, it does not.\n\nExample starting code:\n\n```\n\n```\n\nThen `Headwind:Sort` is run which puts all the classes on a single, long line:\n\n```\n\n```\n\nThen after running `Prettier:Format` all of the code is *still* one one line even though my `printWidth` option is set to 70 characters.\n\nIs there a way to get Prettier to split these lines up again? And if not, is there another solution?\n\nThank you!\n\n========================================\n\nTop Answer:\nThe accepted answer mentions a link where the creator of Tailwind mentions about a plugin could be released in future and they released prettier-plugin-tailwindcss plugin 4 months before the accepted answer is written. i think lot of people are unaware of it so i'm writing this answer.\n\nHere is my simplied answer from my public gist\n\ninstall prettier\n\n```\npnpm add -D prettier\n```\n\nTo automatically sort tailwind classes with prettier\n\n```\npnpm add -D prettier-plugin-tailwindcss\n```\n\nCreate a `.prettierrc.json` file in your root directory\n\n```\ntouch .prettierrc.json\n```\n\nAdd the installed plugin to your .prettierrc.json config file\n\n```\n{\n \"trailingComma\": \"es5\",\n \"semi\": true,\n \"tabWidth\": 2,\n \"singleQuote\": true,\n \"jsxSingleQuote\": true,\n \"plugins\": [\"prettier-plugin-tailwindcss\"]\n\n}\n```\n\n### OP's code before auto tailwind class sorting\n\n```\n\n```\n\n### OP's code after sorted by prettier-plugin-tailwindcss\n\nThis plugin sort the classes in the following order\n\n`base layer classes | components layer classes | utility layer classes`\n\n```\n\n```\n\n### one more cool thing\n\nwrite your break point prefixes(`md:` `lg:` `xl:`) in new line and manually indent them then the plugin will only sort classes on each line(its not perfect but we almost there 😊)\n\n```\n\n```\n\n========================================\n\nCode:\n```text\n<div className=\"flex flex-col w-full p-6 border-r-2 items-start\nw-1/2 bg-white rounded shadow h-1/3 hover:bg-slate-50 active:bg-slate-100\">\n```\n\n```text\n<div className=\"flex flex-col w-full p-6 border-r-2 items-start w-1/2 bg-white rounded shadow h-1/3 hover:bg-slate-50 active:bg-slate-100\">\n```\n\n```text\n\"printWidth\": 70\n```\n\n```text\nprintWidth\n```\n\n```text\nHeadwind:Sort\n```\n\n```text\nPrettier:Format\n```\n\n```text\nHeadwind:Sort\n```\n\n```text\nPrettier:Format\n```\n\n```text\nprintWidth\n```\n\n```text\npnpm add -D prettier\n```\n\n```text\npnpm add -D prettier-plugin-tailwindcss\n```\n\n```text\ntouch .prettierrc.json\n```\n\n```text\n{\n \"trailingComma\": \"es5\",\n \"semi\": true,\n \"tabWidth\": 2,\n \"singleQuote\": true,\n \"jsxSingleQuote\": true,\n \"plugins\": [\"prettier-plugin-tailwindcss\"]\n\n}\n```\n\n```html\n<div className=\"flex flex-col w-full p-6 border-r-2 items-start\nw-1/2 bg-white rounded shadow h-1/3 hover:bg-slate-50 active:bg-slate-100\">\n```\n\n```html\n<div className='flex h-1/3 w-full w-1/2 flex-col items-start rounded border-r-2 bg-white p-6 shadow hover:bg-slate-50 active:bg-slate-100'></div>\n```\n\n```html\n<div\n className='flex h-1/3 w-full w-1/2 flex-col items-start rounded border-r-2\n md:h-1 md:bg-red-400 md:bg-transparent md:p-1\n lg:h-10 lg:bg-blue-400 lg:p-5'\n></div>\n```\n\n```text\n.prettierrc.json\n```\n\n```text\nbase layer classes | components layer classes | utility layer classes\n```\n\n```text\nmd:\n```\n\n```text\nlg:\n```\n\n```text\nxl:\n```\n\n```text\nclassName\n```\n\n========================================\n\nComments:\n- Did Prettier break up any of your long strings before you added Headwind? Can you turn Headwind off and test this?\n- Ended up enabling Word Wrap which was the simplest way to get the wrapping to work. Thanks!\n- @Matt refer my answer below. stackoverflow.com/a/75498001/12719767\n- How does that solve the full long lines?\n- I use this plugin, but adding breakpoint prefixes doesn't solve the issue","metadata":{"transformedAt":"2026-08-18T18:33:42.886Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":22,"totalLines":201,"estimatedTokens":1116}}103{"id":"stack-79393540","source":"stackoverflow","questionId":79393540,"title":"How to use @keyframes in Tailwind CSS version 4?","tags":["tailwind-css","tailwind-css-4"],"text":"Title: How to use @keyframes in Tailwind CSS version 4?\nTags: tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI just started learning Tailwind and I watched a tutorial. At first, the command `npx tailwindcss init`, which creates a file `tailwind.config.js`, didn't work for me. Error: Invalid command: init. This wasn't a problem, though, because I was able to use Tailwind classes normally. But when I wanted to create a keyframe, I saw that it should be created in `tailwind.config.js`.\n\nI created the file manually and added the keyframe, but the keyframe didn’t work in the HTML.\n\n```\n// tailwind.config.js\nmodule.exports = {\n purge: {\n content: ['./build/*.html', './build/js/*.js'],\n safelist: ['animate-open-menu'], // Ensure your custom animation isn't purged\n },\n theme: {\n extend: {\n animation: {\n // Custom animation using the defined keyframes\n 'open-menu': 'open-menu .5s ease-in-out forwards',\n },\n keyframes: {\n // Custom keyframes definition\n 'open-menu': {\n '0%': { transform: 'scaleY(0)' },\n '80%': { transform: 'scaleY(1.2)' },\n '100%': { transform: 'scaleY(1)' },\n },\n },\n },\n },\n variants: {},\n plugins: [],\n};\n```\n\n========================================\n\nCode:\n```js\n// tailwind.config.js\nmodule.exports = {\n purge: {\n content: ['./build/*.html', './build/js/*.js'],\n safelist: ['animate-open-menu'], // Ensure your custom animation isn't purged\n },\n theme: {\n extend: {\n animation: {\n // Custom animation using the defined keyframes\n 'open-menu': 'open-menu .5s ease-in-out forwards',\n },\n keyframes: {\n // Custom keyframes definition\n 'open-menu': {\n '0%': { transform: 'scaleY(0)' },\n '80%': { transform: 'scaleY(1.2)' },\n '100%': { transform: 'scaleY(1)' },\n },\n },\n },\n },\n variants: {},\n plugins: [],\n};\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n --animate-fade-in-scale: fade-in-scale 0.3s ease-out;\n\n @keyframes fade-in-scale {\n 0% {\n opacity: 0;\n transform: scale(0.95);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n }\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@config\n```\n\n```text\n@theme\n```\n\n```text\n@theme\n```\n\n```text\n@keyframes\n```\n\n```text\ncorePlugins\n```\n\n```text\nsafelist\n```\n\n```text\nseparator\n```\n\n```text\n@config\n```\n\n========================================\n\nComments:\n- Have you checked the documentation for tailwind v4?\n- Related: `tailwindlabs/tailwindcss` discussion #19020 - Which TailwindCSS v4 namespace matches a given TailwindCSS v3's theme keys?","metadata":{"transformedAt":"2026-08-18T18:33:42.886Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":140,"estimatedTokens":697}}104{"id":"stack-71629911","source":"stackoverflow","questionId":71629911,"title":"Why can't Prettier find the \"prettier-plugin-tailwindcss\" plugin on a Remix app?","tags":["tailwind-css","prettier","remix.run"],"text":"Title: Why can't Prettier find the \"prettier-plugin-tailwindcss\" plugin on a Remix app?\nTags: tailwind-css, prettier, remix.run\nSource: Stack Overflow\n\nQuestion:\n### Background\n\nI'm trying to setup a Remix app using Tailwind CSS for styling and Prettier for styling. Recently the Tailwind team released their official classes-sorting plugin but for some reason Prettier says it \"can't find it\".\n\nThe error looks like the following in the Prettier output:\n\n```\n[\"INFO\" - 1:17:09 PM] Formatting file:///home/juanzitelli/dev/human-decode/burger-reviews-hd/app/routes/dashboard/index.tsx\n [\"ERROR\" - 1:17:09 PM] Error resolving prettier configuration for /home/juanzitelli/dev/human-decode/burger-reviews-hd/app/routes/dashboard/index.tsx\n```\n\nMy file structure (files related to the problem) looks like this:\n\n```\n/prettier.config.js\n /tailwind.config.js\n```\n\n`/package.json`\n\n```\n\"devDependencies\": {\n \"@remix-run/dev\": \"^1.1.3\",\n \"@remix-run/serve\": \"^1.2.2\",\n \"@types/node\": \"^17.0.21\",\n \"@types/react\": \"^17.0.24\",\n \"@types/react-dom\": \"^17.0.9\",\n \"autoprefixer\": \"^10.4.2\",\n \"concurrently\": \"^7.0.0\",\n \"dotenv\": \"^16.0.0\",\n \"postcss\": \"^8.4.6\",\n \"prettier\": \"^2.5.1\",\n \"prettier-plugin-tailwindcss\": \"^0.1.8\",\n \"prisma\": \"^3.10.0\",\n \"tailwindcss\": \"^3.0.23\",\n \"typescript\": \"^4.1.2\"\n },\n \"engines\": {\n \"node\": \">=14\",\n \"yarn\": \"1.22.17\"\n },\n\nPrettier config \n\n`/prettier.config.js`\n\n module.exports = {\n plugins: [require('prettier-plugin-tailwindcss')],\n };\n\n> When hovering over that \"require\" I get an error that says:\n\nmodule \"/home/juanzitelli/dev/human-decode/burger-reviews-hd/node_modules/prettier-plugin-tailwindcss/dist/index\"\nCould not find a declaration file for module 'prettier-plugin-tailwindcss'. '/home/juanzitelli/dev/human-decode/burger-reviews-hd/node_modules/prettier-plugin-tailwindcss/dist/index.js' implicitly has an 'any' type.\n Try `npm i --save-dev @types/prettier-plugin-tailwindcss` if it exists or add a new declaration (.d.ts) file containing `declare module 'prettier-plugin-tailwindcss';`ts(7016)```\n```\n\n========================================\n\nTop Answer:\nI just encountered this problem even though I had everything installed and setup correctly. It got resolved after reloading VS Code through \"Command Palette (CTRL + SHIFT + P) > Reload Window\". Hope this helps!\n\n========================================\n\nCode:\n```sh\n[\"INFO\" - 1:17:09 PM] Formatting file:///home/juanzitelli/dev/human-decode/burger-reviews-hd/app/routes/dashboard/index.tsx\n [\"ERROR\" - 1:17:09 PM] Error resolving prettier configuration for /home/juanzitelli/dev/human-decode/burger-reviews-hd/app/routes/dashboard/index.tsx\n```\n\n```text\n/prettier.config.js\n /tailwind.config.js\n```\n\n```text\n\"devDependencies\": {\n \"@remix-run/dev\": \"^1.1.3\",\n \"@remix-run/serve\": \"^1.2.2\",\n \"@types/node\": \"^17.0.21\",\n \"@types/react\": \"^17.0.24\",\n \"@types/react-dom\": \"^17.0.9\",\n \"autoprefixer\": \"^10.4.2\",\n \"concurrently\": \"^7.0.0\",\n \"dotenv\": \"^16.0.0\",\n \"postcss\": \"^8.4.6\",\n \"prettier\": \"^2.5.1\",\n \"prettier-plugin-tailwindcss\": \"^0.1.8\",\n \"prisma\": \"^3.10.0\",\n \"tailwindcss\": \"^3.0.23\",\n \"typescript\": \"^4.1.2\"\n },\n \"engines\": {\n \"node\": \">=14\",\n \"yarn\": \"1.22.17\"\n },\n\nPrettier config \n\n`/prettier.config.js`\n\n module.exports = {\n plugins: [require('prettier-plugin-tailwindcss')],\n };\n\n\n> When hovering over that \"require\" I get an error that says:\n\nmodule \"/home/juanzitelli/dev/human-decode/burger-reviews-hd/node_modules/prettier-plugin-tailwindcss/dist/index\"\nCould not find a declaration file for module 'prettier-plugin-tailwindcss'. '/home/juanzitelli/dev/human-decode/burger-reviews-hd/node_modules/prettier-plugin-tailwindcss/dist/index.js' implicitly has an 'any' type.\n Try `npm i --save-dev @types/prettier-plugin-tailwindcss` if it exists or add a new declaration (.d.ts) file containing `declare module 'prettier-plugin-tailwindcss';`ts(7016)```\n```\n\n```text\n/package.json\n```\n\n```text\nnpm install -D tailwindcss postcss autoprefixer concurrently\n```\n\n```text\nnpm install -D prettier prettier-plugin-tailwindcss\n```\n\n```text\nversion 18\n```\n\n```text\nversion 2.8.3\n```\n\n```text\n.prettierrc\n```\n\n```text\n\"plugins\": [\"prettier-plugin-tailwindcss\"]\n```\n\n```text\nCTRL + SHIFT + P\n```\n\n========================================\n\nComments:\n- How did you run the Prettier? The plugin only works in my Ubuntu machine using `npx prettier --write index.html`. However, when I hit save in VScode, Prettier works but the prettier-plugin-tailwindcss doesn't sort the Tailwind classes as expected.\"\n- My problem was that I didn't have Prettier configured for .js files. I had to use `Ctrl+Shift+P` -> `Format Document` and select prettier.\n- It's incredible how long I've spent trying to sort this out... Thanks, good sir! 👌","metadata":{"transformedAt":"2026-08-18T18:33:42.886Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":156,"estimatedTokens":1217}}105{"id":"stack-72783634","source":"stackoverflow","questionId":72783634,"title":"Text and icon on the same line with Tailwind CSS?","tags":["html","css","tailwind-css"],"text":"Title: Text and icon on the same line with Tailwind CSS?\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to get the text on the left side and the icon on the right side, but right now the icon is above the text, see the first image. I want the icon to be in the top right corner to the right of “Project name”, and the text to be like the second image.\n\n\r\n\r\n\n```\n\n \n \n \n \n\n### Project name\n\n Explaination of the project\n\n Tag, tag, tag\n\n```\n\n\r\n\r\n\r\n\nhttps://i.sstatic.net/n3Zj9.png\n\nhttps://i.sstatic.net/ljX0h.png\n\n========================================\n\nTop Answer:\nSolutions provided here are full of boilerplate code. Here is simple solution using **inline-flex** and **span**:\n\n```\n\nToday I spent most of the day researching ways to ...\n\n \n Kramer\n\nkeeps telling me there is no way to make it work, that ...\n\n```\n\n========================================\n\nCode:\n```html\n<!-- Tailwind -->\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n\n<!-- Body -->\n<div class=\"flex card bg-neutral h-48 px-3 hover:bg-primary\">\n <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" />\n </svg>\n <h2 class=\"text-2xl font-bold text-white py-3\">Project name</h2>\n <p class=\"text-left py-4 font-bold group-hover:bg-primary\">Explaination of the project</p>\n <p class=\"text-left pb-4 font-bold\">Tag, tag, tag</p>\n</div>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n\n<div class=\"card bg-neutral h-48 px-3 hover:bg-primary\">\n <div class=\"flex justify-between\">\n <h2 class=\"text-2xl font-bold text-white py-3\">Project name</h2>\n <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" />\n </svg>\n </div>\n <p class=\"text-left py-4 font-bold group-hover:bg-primary\">Explaination of the project</p>\n <p class=\"text-left pb-4 font-bold\">Tag, tag, tag</p>\n</div>\n```\n\n```text\ndiv\n```\n\n```text\nflex\n```\n\n```text\njustify-between\n```\n\n```text\nitems-center\n```\n\n```text\n<div class=\"flex items-center\">\n <svg class=\"h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"11\" />\n <path d=\"m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9\" fill=\"none\" />\n </svg>\n <p class=\"ml-4\">\n Icons\n <code class=\"text-sm font-bold text-gray-900\">Next to Text...!</code> file\n </p>\n </div>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n<div class=\"card bg-neutral h-48 px-3 hover:bg-primary\">\n <div class=\"flex justify-between items-center\">\n <h2 class=\"text-2xl font-bold text-dark py-3\">Project name</h2>\n <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" />\n </svg>\n </div>\n <p class=\"text-left py-4 font-bold group-hover:bg-primary\">Explaination of the project</p>\n <p class=\"text-left pb-4 font-bold\">Tag, tag, tag</p>\n</div>\n```\n\n```text\nitems-center\n```\n\n```text\njustify-between\n```\n\n```text\n<p>\nToday I spent most of the day researching ways to ...\n<span class=\"inline-flex items-baseline\">\n <img src=\"path/to/image.jpg\" alt=\"\" class=\"self-center w-5 h-5 rounded-full mx-1\" />\n <span>Kramer</span>\n</span>\nkeeps telling me there is no way to make it work, that ...\n</p>\n```\n\n```html\n<!DOCTYPE html>\n\n<head>\n <title>Example 2</title>\n <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/js/all.min.js\"></script>\n</head>\n\n<body class=\"flex flex-col items-center justify-center min-h-screen bg-gray-100\">\n <h1 class=\"text-green-500 text-4xl font-bold mb-4\">Hello</h1>\n <h3 class=\"text-gray-700 text-2xl mb-6\">Using Inline-Block and Align-Middle</h3>\n\n <div>\n <i class=\"fab fa-github text-gray-800 text-3xl inline-block align-middle\"></i>\n <span class=\"text-lg text-gray-700 inline-block align-middle ml-2\">Contribute on GitHub</span>\n </div>\n</body>\n\n</html>\n```\n\n========================================\n\nComments:\n- the CSS for us to help with this?\n- @CanO'Spam this was specifically labeled as `tailwind`. There probably is no CSS and for a question labeled with a framework should also not be necessary.\n- maybe add `items-center` as well to have the icon and the text vertically centered on the same line\n- @CornelRaiu Thank you, mentioned in the answer and gave you credit.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- Please credit and state your source and don't just answer the question with a code snippet without giving any further context. Source for the code: geeksforgeeks.org/… The exact same example has already been given\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.886Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":178,"estimatedTokens":1474}}106{"id":"stack-74780955","source":"stackoverflow","questionId":74780955,"title":"Tailwind being installed as dev dependency rather than dependency","tags":["reactjs","npm","frontend","tailwind-css"],"text":"Title: Tailwind being installed as dev dependency rather than dependency\nTags: reactjs, npm, frontend, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am developing a project using ReactJs and Tailwind CSS but the Tailwind is installed as dev-dependency in my project. And I am a little bit worried that it won't be available in the production when my application is deployed .\nI have used the Tailwind's installation documentation for ReactJs to save the Tailwind as dependency , But it is shown as dev-dependency in the package.json file.\n\nWhat to do ?\nSo that it would be installed as dependency .\n\n========================================\n\nTop Answer:\nAccording to the Tailwind CSS official documentation, It must be installed as a dev-dependency. For more details please checkout the following link.\n\nhttps://tailwindcss.com/docs/guides/create-react-app\n\n========================================\n\nComments:\n- very late to the party, but if you want to install it as a regular dependecy (not recommened, as answered below), you would just do the npm i tailwind without (--dev or -D)\n- Will it be available when I deploy my application ? PS : Thanks for responding : )\n- When you will build your project for production, it will add all of the CSS your app needs.\n- Wrong. I'm writing a CI/CD pipeline and the build process is keep failing. Why? `npm install --omit=dev` is the install step. This prevents installing of tailwind. Therefore application could not be built. I think the proper answer is \"...it depends\". Depends upon the requirement. For my case, normal dependencies means every dependency that is required to build the app.","metadata":{"transformedAt":"2026-08-18T18:33:42.887Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":0,"totalLines":25,"estimatedTokens":411}}107{"id":"stack-70323225","source":"stackoverflow","questionId":70323225,"title":"How to add spacing to a table using tailwind","tags":["javascript","html","css","flexbox","tailwind-css"],"text":"Title: How to add spacing to a table using tailwind\nTags: javascript, html, css, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI was trying to add space to the table but I was unable to do it. I have tried using `space-x-`, padding but I was not getting the output I was anticipated.\n\nLink\n\n\r\n\r\n\n```\n\n \n\n \n 42.80\n 42.80\n 52.51\n 60.40\n 96.28\n 69.18\n 54.43\n 69.18\n 96.28\n 60.40\n \n \n 42.80\n 42.80\n 52.51\n 60.40\n 96.28\n 69.18\n 54.43\n 69.18\n 96.28\n 60.40\n \n\n \n```\n\n\r\n\r\n\r\n\nExpected output:\n\nhttps://i.sstatic.net/uTyiL.png\n\n========================================\n\nTop Answer:\nIf you apply padding to the `` tag like this:\n\n```\n\n```\n\nThis won't work, you need to add the `border-separate` property in addition, and we will finally have:\n\n```\n\n```\n\n========================================\n\nCode:\n```html\n<html>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n<table class=\"table-auto\">\n <tr class=\"row space-x-3\">\n <td class=\"col bg-blue-500\">42.80</td>\n <td class=\"col bg-blue-500\">42.80</td>\n <td class=\"col bg-blue-500\">52.51</td>\n <td class=\"col bg-blue-500\">60.40</td>\n <td class=\"col bg-blue-500\">96.28</td>\n <td class=\"col bg-blue-500\">69.18</td>\n <td class=\"col bg-blue-500\">54.43</td>\n <td class=\"col bg-blue-500\">69.18</td>\n <td class=\"col bg-blue-500\">96.28</td>\n <td class=\"col bg-blue-500\">60.40</td>\n </tr>\n <tr class=\"row\">\n <td class=\"col bg-blue-500\">42.80</td>\n <td class=\"col bg-blue-500\">42.80</td>\n <td class=\"col bg-blue-500\">52.51</td>\n <td class=\"col bg-blue-500\">60.40</td>\n <td class=\"col bg-blue-500\">96.28</td>\n <td class=\"col bg-blue-500\">69.18</td>\n <td class=\"col bg-blue-500\">54.43</td>\n <td class=\"col bg-blue-500\">69.18</td>\n <td class=\"col bg-blue-500\">96.28</td>\n <td class=\"col bg-blue-500\">60.40</td>\n </tr>\n</table>\n </html>\n```\n\n```text\nspace-x-\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n .my-table-spacing {\n border-spacing: theme(\"spacing.3\");\n }\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<table class=\"border-separate [border-spacing:0.75rem]\">\n <tr class=\"row\">\n <td class=\"col bg-blue-500\">42.80</td>\n <td class=\"col bg-blue-500\">42.80</td>\n <td class=\"col bg-blue-500\">52.51</td>\n <td class=\"col bg-blue-500\">60.40</td>\n <td class=\"col bg-blue-500\">96.28</td>\n <td class=\"col bg-blue-500\">69.18</td>\n <td class=\"col bg-blue-500\">54.43</td>\n <td class=\"col bg-blue-500\">69.18</td>\n <td class=\"col bg-blue-500\">96.28</td>\n <td class=\"col bg-blue-500\">60.40</td>\n </tr>\n <tr class=\"row\">\n <td class=\"col bg-blue-500\">42.80</td>\n <td class=\"col bg-blue-500\">42.80</td>\n <td class=\"col bg-blue-500\">52.51</td>\n <td class=\"col bg-blue-500\">60.40</td>\n <td class=\"col bg-blue-500\">96.28</td>\n <td class=\"col bg-blue-500\">69.18</td>\n <td class=\"col bg-blue-500\">54.43</td>\n <td class=\"col bg-blue-500\">69.18</td>\n <td class=\"col bg-blue-500\">96.28</td>\n <td class=\"col bg-blue-500\">60.40</td>\n </tr>\n</table>\n```\n\n```text\nborder-separate\n```\n\n```text\nborder-spacing\n```\n\n```text\nspace-x-3\n```\n\n```text\nmargin-left: 0.75rem;\n```\n\n```text\nborder-spacing: 0.75rem\n```\n\n```text\n<table class=\"border-separate my-table-spacing\">\n```\n\n```text\n[border-spacing:0.75rem]\n```\n\n```html\n<table class=\"p-8\"><table/>\n```\n\n```html\n<table class=\"border-separate p-8\"><table/>\n```\n\n```text\n<table><table/>\n```\n\n```text\nborder-separate\n```\n\n```css\n@layer utilities {\n .table {\n :where(th, td) {\n @apply p-1;\n }\n }\n}\n```\n\n========================================\n\nComments:\n- You would add `border-separate` to the table class.\n- The short answer is to add both `border-separate` and `border-spacing-*` classes to the table element. The first class gives each cell its own border and the second lets you specify the space between them.\n- It seems border spacing utilities are available now tailwindcss.com/docs/border-spacing","metadata":{"transformedAt":"2026-08-18T18:33:42.887Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":208,"estimatedTokens":999}}108{"id":"stack-75933212","source":"stackoverflow","questionId":75933212,"title":"Can I pass additional classes to an Astro component from parent?","tags":["html","css","tailwind-css","astrojs"],"text":"Title: Can I pass additional classes to an Astro component from parent?\nTags: html, css, tailwind-css, astrojs\nSource: Stack Overflow\n\nQuestion:\nI'm working with an Astro component that already has some classes in its template. I'm looking to reuse this component in a different view to alter the color of its header exclusively for that view.\n\nAccording to the documentation, passing a `class` prop makes adding classes from a parent to a child possible. However, I'm finding it challenging to retain the existing classes in the component while overriding or adding another class.\n\n```\n\n \n\n```\n\n`ExpansionQuestion` root element:\n\n```\n\n```\n\nMy goal is to add a `bg-secondary` class to the `details` element in one specific view while ensuring the rest of the classes remain unchanged across all views.\n\nIs it possible to do this?\n\n========================================\n\nTop Answer:\nAccept a `class` prop in the child component and apply it to the root element. You must rename it when destructuring because `class` is a reserved word in JavaScript. Also, this patch of the docs on Oct 13, 2023, highlighted that you should also use the rest parameter so that scoped styling works.\n\nChild component:\n\n```\n---\nconst { class: className, ...rest } = Astro.props\n---\n\n Child component\n\n.child-component {\n border: 2px solid blue;\n}\n\n```\n\nUsing it from parent:\n\n```\n---\nimport ChildComponent from '...'\n---\n\n \n\n.my-child-component {\n background: red;\n}\n\n```\n\nMore on that in docs\n\n========================================\n\nCode:\n```html\n<ExpansionQuestion question={question.question}>\n <Fragment slot=\"body\" set:html={question.answer} />\n</ExpansionQuestion>\n```\n\n```html\n<details class=\"group bg-blue-gray duration-300 rounded-lg p-4 w-full shadow-md focus:outline-none focus:ring-0\">\n```\n\n```text\nclass\n```\n\n```text\nExpansionQuestion\n```\n\n```text\nbg-secondary\n```\n\n```text\ndetails\n```\n\n```text\n<ExpansionQuestion question={question.question} bg=\"bg-secondary\">\n <Fragment slot=\"body\" set:html={question.answer} />\n</ExpansionQuestion>\n```\n\n```text\n---\nconst { bg } = Astro.props;\n---\n<details\n class:list={[\n \"group duration-300 rounded-lg p-4 w-full\",\n \"shadow-md focus:outline-none focus:ring-0\",\n bg || \"bg-blue-gray\"\n ]}\n>\n```\n\n```text\nclass:list\n```\n\n```text\nbg\n```\n\n```text\nExpansionQuestion.astro\n```\n\n```text\nclass:list\n```\n\n```text\nbg\n```\n\n```js\n---\nconst { class: className, ...rest } = Astro.props\n---\n\n<div class:list={['child-component', className]} {...rest}>\n Child component\n</div>\n\n<style>\n.child-component {\n border: 2px solid blue;\n}\n</style>\n```\n\n```js\n---\nimport ChildComponent from '...'\n---\n\n<div class=\"parent\">\n <ChildComponent class=\"my-child-component\"/>\n</div>\n\n<style>\n.my-child-component {\n background: red;\n}\n</style>\n```\n\n```text\nclass\n```\n\n```text\nclass\n```\n\n```html\n---\nexport interface Props {\n class?: string;\n}\n\nconst { class: className = 'inline-flex bg-red-500 rounded p-4' } = Astro.props;\n---\n\n<button type=\"button\" class={className}>\nDelete\n</button>\n```\n\n```html\n---\nimport DeleteButton from \"../components/DeleteButton.astro\";\n---\n\n<form>\n <DeleteButton class=\"bg-red-800 inline-flex\">\n</form>\n```\n\n```text\nAstro.props\n```\n\n```text\nDeleteButton.astro\n```\n\n```text\nclass\n```\n\n```text\nDeleteButton.astro\n```\n\n```text\ninline-flex bg-red-500 rounded p-4\n```\n\n```text\nclass\n```\n\n========================================\n\nComments:\n- Worked perfectly! I did notice the `class:list` directive, but I thought the list would get overwritten if I passed something to it; I didn't think of using a `prop` as a control for specific classes only\n- This will not work because you are passing a scoped style. Astro uses the `data-astro-cid-*` attribute while applying styles, so you will need to get that id from parent, which you can do by using `...rest`. It is mentioned in the docs link you provided.\n- Hmm it wasn't like that when I last used this. I checked the docs repo, what you mentioned was added last week so now it should probably be used differently. At the time of writing my code worked, I have to update the answer.\n- I testet it, and it work. Also with the current version of Astro 3.4.0.\n- @AlexSedeke Probably because I already updated the answer, you can check the Edit History if you're curious about this\n- I think this is the right answer!","metadata":{"transformedAt":"2026-08-18T18:33:42.887Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":25,"totalLines":227,"estimatedTokens":1078}}109{"id":"stack-68400074","source":"stackoverflow","questionId":68400074,"title":"how to apply transition effects when switching from light mode to dark in tailwind 2.0?","tags":["javascript","vue.js","tailwind-css","tailwind-in-js"],"text":"Title: how to apply transition effects when switching from light mode to dark in tailwind 2.0?\nTags: javascript, vue.js, tailwind-css, tailwind-in-js\nSource: Stack Overflow\n\nQuestion:\nSo I'm building a small-ish project with tailwindCSS and thought of implementing the dark mode. I made a button and mapped it to put the `dark` class in the html tag. After testing for a bit, I realized that switching looked kind of odd because it is happening instantaneously. Is there a way to apply a transition duration or timing function to this change?\n\nHere's the basic logic of how I'm handling the change (also I'm using vue):\n\n```\n\n  -->\n \n\nexport default {\n name: \"darkModeToggle\",\n methods: {\n darkClassToggle() {\n const toggle = document.querySelector(\".toggle\");\n const html = document.firstElementChild;\n if (toggle.checked) {\n html.classList.remove(\"dark\");\n } else {\n html.classList.add(\"dark\");\n }\n },\n },\n};\n\n```\n\nThank you for any help\n\n========================================\n\nTop Answer:\nJust add `transition-colors duration-1000` classes to body like this:\n\n```\n\n ...\n\n```\n\n========================================\n\nCode:\n```js\n<template>\n <!-- <span class=\"material-icons\"></span> -->\n <input @click=\"darkClassToggle\" id=\"toggle\" class=\"toggle\" type=\"checkbox\" />\n</template>\n\n<script>\nexport default {\n name: \"darkModeToggle\",\n methods: {\n darkClassToggle() {\n const toggle = document.querySelector(\".toggle\");\n const html = document.firstElementChild;\n if (toggle.checked) {\n html.classList.remove(\"dark\");\n } else {\n html.classList.add(\"dark\");\n }\n },\n },\n};\n</script>\n```\n\n```text\ndark\n```\n\n```css\nbody * {\n @apply transition-colors duration-200;\n}\n```\n\n```text\ntransition\n```\n\n```text\nduration-300\n```\n\n```text\ndark:\n```\n\n```text\nindex.css\n```\n\n```text\nbody\n```\n\n```text\n<body class=\"transition-colors duration-1000\">\n ...\n</body>\n```\n\n```text\ntransition-colors duration-1000\n```\n\n========================================\n\nComments:\n- On any element you want a transition to happen on just add the classes `transition` (or any other transition class) and `duration-300` (or your preferred speed) it will apply for theme changes as well since all that is changing usually with dark mode is colors. If however you have other things transitioning as well you'll need to enable them in your tailwind config file.\n- Thank you! I figured it out and got it working. I was applying transition to html tag instead of body where I had declared the dark theme.\n- This worked method works for me, vey nice\n- This was great to test and debug, but for some reason it was causing me so many issues on elements where there were already transition classes applied on hover, including several animations running on series instead of parallel. So in my experience: **better apply transitions more selectively**\n- Note that this causes the page to transition every time you navigate aswell.\n- Unfortunately doesn't work, because transition effects are not automatically cascaded down to child elements. This would only work if the color is set in the body element and then the child elements inherit the color. But the transition class itself is not inherited","metadata":{"transformedAt":"2026-08-18T18:33:42.887Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":120,"estimatedTokens":810}}110{"id":"stack-71232601","source":"stackoverflow","questionId":71232601,"title":"How to use tailwind css gem in a rails 7 engine?","tags":["ruby-on-rails","tailwind-css","rails-engines","ruby-on-rails-7"],"text":"Title: How to use tailwind css gem in a rails 7 engine?\nTags: ruby-on-rails, tailwind-css, rails-engines, ruby-on-rails-7\nSource: Stack Overflow\n\nQuestion:\nHow to use tailwind in a rails engine? According to the documentation supplying a css argument to the Rails generator should work\n\nRails 7.0.2.2 engine generated using\n\n```\nrails plugin new tailtest --mountable --full -d postgresql --css tailwind\n```\n\nThis generates the engine with Postgresql but does nothing with tailwind at all, and following manual installation instructions fail too.\n\nRunning, as per documentation, `bundle add tailwindcss-rails` adds tailwind to the gemfile rather than the engines tailtest.gemspec\nSo after adding the dependency to the gemspec\n\n```\nspec.add_dependency \"tailwindcss-rails\", \"~> 2.0\"\n```\n\nand running `bundle install` does install the engine however the rest of the manual installation fails\n\nthen adding the require to lib/engine.rb\n\n```\nrequire \"tailwindcss-rails\"\nmodule Tailtest\n class Engine then running the install process fails\n\n```\nrails tailwindcss:install\nResolving dependencies...\nrails aborted!\nDon't know how to build task 'tailwindcss:install' (See the list of available tasks with `rails --tasks`)\nDid you mean? app:tailwindcss:install\n```\n\nObviously the `app:tailwindcss:install` command fails too.\n\nSo I am probably missing an initializer of some sort in the engine.rb file but no idea on what it should be.\n\n========================================\n\nTop Answer:\nThat answer by Alex is really good, i wish i had it when starting out. (But i didn't even have the question to google)\nJust want to add two things:\n\n1- a small simplification. I just made a script to run tailwind in the engine\n\n```\n#!/usr/bin/env sh\n# Since tailwind does not install into the engine, this will\n# watch and recompile during development\n# tailwindcss executable must exist (by bundling tailwindcss-rails eg)\n\ntailwindcss -i app/assets/stylesheets/my_engine.tailwind.css \\\n -o app/assets/stylesheets/my_engine/my_engine.css \\\n -c config/tailwind.config.js \\\n -w\n```\n\n2- For usage in an app, that obviously also uses tailwind, i was struggling, since the two generated css's were biting each other and i could not get both styles to work in one page. Always one or the other (app or engine) was not styled right. Until i got the app's tailwind to pick up the engines classes.\nLike so:\n\nAdd to the app's tailwind.config.js: before the *module*\n\n```\nconst execSync = require('child_process').execSync;\nconst output = execSync('bundle show my_engine', { encoding: 'utf-8' });\n```\n\nAnd then inside the *content* as last line\n\n```\noutput.trim() + '/app/**/*.{erb,haml,html,rb}'\n```\n\nThen just include the apps generated tailwind css in the layout, like the installer will. Don't include the engines stylesheet in the layout, or add it to the asset\n\n========================================\n\nCode:\n```text\nrails plugin new tailtest --mountable --full -d postgresql --css tailwind\n```\n\n```text\nspec.add_dependency \"tailwindcss-rails\", \"~> 2.0\"\n```\n\n```text\nrequire \"tailwindcss-rails\"\nmodule Tailtest\n class Engine < ::Rails::Engine\n isolate_namespace Tailtest\n end\nend\n```\n\n```text\nrails tailwindcss:install\nResolving dependencies...\nrails aborted!\nDon't know how to build task 'tailwindcss:install' (See the list of available tasks with `rails --tasks`)\nDid you mean? app:tailwindcss:install\n```\n\n```text\nbundle add tailwindcss-rails\n```\n\n```text\nbundle install\n```\n\n```text\napp:tailwindcss:install\n```\n\n```text\n# my_engine/my_engine.gemspec\n\nspec.add_dependency \"tailwindcss-rails\"\n```\n\n```text\n# my_engine/lib/my_engine/engine.rb\n\nmodule MyEngine\n class Engine < ::Rails::Engine\n isolate_namespace MyEngine\n\n # NOTE: add engine manifest to precompile assets in production, if you don't have this yet.\n initializer \"my-engine.assets\" do |app|\n app.config.assets.precompile += %w[my_engine_manifest]\n end\n end\nend\n```\n\n```js\n# my_engine/app/assets/config/my_engine_manifest.js\n\n//= link_tree ../builds/ .css\n```\n\n```html\n# my_engine/app/views/layouts/my_engine/application.html.erb\n\n<!DOCTYPE html>\n<html>\n <head>\n <%# \n NOTE: make sure this name doesn't clash with anything in the main app.\n think of it as `require` and `$LOAD_PATH`,\n but instead it is `stylesheet_link_tag` and `manifest.js`.\n %>\n <%= stylesheet_link_tag \"my_engine\", \"data-turbo-track\": \"reload\" %>\n </head>\n <body> <%= yield %> </body>\n</html>\n```\n\n```sh\n$ bundle show tailwindcss-rails\n/home/alex/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/tailwindcss-rails-2.0.8-x86_64-linux\n```\n\n```sh\n$ cp $(bundle show tailwindcss-rails)/lib/install/tailwind.config.js config/tailwind.config.js\n```\n\n```sh\n$ cp $(bundle show tailwindcss-rails)/lib/install/application.tailwind.css app/assets/stylesheets/application.tailwind.css\n```\n\n```sh\n$ $(bundle show tailwindcss-rails)/exe/tailwindcss -i app/assets/stylesheets/application.tailwind.css -o app/assets/builds/my_engine.css -c config/tailwind.config.js --minify\n```\n\n```sh\n$ $(bundle show tailwindcss-rails)/exe/tailwindcss -i app/assets/stylesheets/application.tailwind.css -o app/assets/builds/my_engine.css -c config/tailwind.config.js --minify -w\n```\n\n```text\n# my_engine/lib/tasks/my_engine.rake\n\ntask :tailwind_engine_watch do\n require \"tailwindcss-rails\"\n # NOTE: tailwindcss-rails is an engine\n system \"#{Tailwindcss::Engine.root.join(\"exe/tailwindcss\")} \\\n -i #{MyEngine::Engine.root.join(\"app/assets/stylesheets/application.tailwind.css\")} \\\n -o #{MyEngine::Engine.root.join(\"app/assets/builds/my_engine.css\")} \\\n -c #{MyEngine::Engine.root.join(\"config/tailwind.config.js\")} \\\n --minify -w\"\nend\n```\n\n```sh\n$ bin/rails app:tailwind_engine_watch\n+ /home/alex/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/tailwindcss-rails-2.0.8-x86_64-linux/exe/x86_64-linux/tailwindcss -i /home/alex/code/stackoverflow/my_engine/app/assets/stylesheets/application.tailwind.css -o /home/alex/code/stackoverflow/my_engine/app/assets/builds/my_engine.css -c /home/alex/code/stackoverflow/my_engine/config/tailwind.config.js --minify -w\n\nRebuilding...\nDone in 549ms.\n```\n\n```text\ndesc \"Install tailwindcss into our engine\"\ntask :tailwind_engine_install do\n require \"tailwindcss-rails\"\n\n # NOTE: use default app template, which will fail to modify layout, manifest,\n # and the last command that compiles the initial `tailwind.css`.\n # It will also add `bin/dev` and `Procfile.dev` which we don't need.\n # Basically, it's useless in the engine as it is.\n template = Tailwindcss::Engine.root.join(\"lib/install/tailwindcss.rb\")\n\n # TODO: better to copy the template from \n # https://github.com/rails/tailwindcss-rails/blob/v2.0.8/lib/install/tailwindcss.rb\n # and customize it\n # template = MyEngine::Engine.root(\"lib/install/tailwindcss.rb\")\n\n require \"rails/generators\"\n require \"rails/generators/rails/app/app_generator\"\n \n # NOTE: because the app template uses `Rails.root` it will run the install\n # on our engine's dummy app. Just override `Rails.root` with our engine\n # root to run install in the engine directory.\n Rails.configuration.root = MyEngine::Engine.root\n\n generator = Rails::Generators::AppGenerator.new [Rails.root], {}, { destination_root: Rails.root }\n generator.apply template\nend\n```\n\n```html\n<!-- blep/app/views/blep/_partial.html.erb -->\n\n<div class=\"bg-red-500 sm:bg-blue-500\"> red never-blue </div>\n```\n\n```html\n<!-- app/views/home/index.html.erb -->\n\n<%= stylesheet_link_tag \"blep\", \"data-turbo-track\": \"reload\" %>\n<%= stylesheet_link_tag \"tailwind\", \"data-turbo-track\": \"reload\" %>\n\n<!-- output generated css in the same order as above link tags -->\n<% require \"open-uri\" %>\n<b>Engine css</b>\n<pre><%= URI.open(asset_url(\"blep\")).read %></pre>\n<b>Main app css</b>\n<pre><%= URI.open(asset_url(\"tailwind\")).read %></pre>\n\n<div class=\"bg-red-500\"> red </div> <!-- this generates another bg-red-500 -->\n<br>\n<%= render \"blep/partial\" %>\n```\n\n```css\n/* Engine css */\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity))\n}\n\n@media (min-width: 640px) {\n .sm\\:bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n }\n}\n\n/* Main app css */\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity))\n}\n```\n\n```html\n<div class=\"bg-red-500\"> red </div>\n<br>\n<div class=\"bg-red-500 sm:bg-blue-500\"> red never-blue </div>\n```\n\n```text\nmodule.exports = {\n content: [\n \"./app/**/*\",\n \"/just/type/the/path/to/engine/views\",\n \"/or/see/updated/task/below\",\n ],\n}\n```\n\n```rb\nnamespace :tailwindcss do\n # # The default behaviour merge both the parent's app task with this one. If needed, you can override the task completely by clearing it before redefining.\n # Rake::Task[:watch].clear\n # Rake::Task[:build].clear\n\n desc \"Build your Tailwind CSS + Engine\"\n task :watch do |_, args|\n # NOTE: there have been some updates, there is a whole Commands class now\n # lets copy paste and modify. (debug = no --minify)\n command = Tailwindcss::Commands.watch_command(debug: true, poll: false)\n\n # --content /path/to/app/**/*,/path/to/engine/**/*\n command << \"--content\"\n command << [\n Rails.root.join(\"app/views/home/*\"),\n Blep::Engine.root.join(\"app/views/**/*.erb\")\n ].join(\",\")\n\n p command\n system(*command)\n end\n\n # same for build, just call `compile_command`\n # task :build do |_, args|\n # command = Tailwindcss::Commands.compile_command(debug: false)\n # ...\nend\n```\n\n```text\nrails plugin new\n```\n\n```text\n--css\n```\n\n```text\nrails plugin new -h\n```\n\n```text\nbundle show\n```\n\n```text\ntailwindcss-rails\n```\n\n```text\ntailwindcss-rails\n```\n\n```text\n-w\n```\n\n```text\nstylesheet_link_tag \"my_engine\"\n```\n\n```text\nEngine.root\n```\n\n```text\nbg-red-500\n```\n\n```text\nsm:bg-blue-500\n```\n\n```text\nmt-1\n```\n\n```text\nm-2\n```\n\n```text\n@layer\n```\n\n```text\n--content\n```\n\n```text\ncontent\n```\n\n```text\n#!/usr/bin/env sh\n# Since tailwind does not install into the engine, this will\n# watch and recompile during development\n# tailwindcss executable must exist (by bundling tailwindcss-rails eg)\n\ntailwindcss -i app/assets/stylesheets/my_engine.tailwind.css \\\n -o app/assets/stylesheets/my_engine/my_engine.css \\\n -c config/tailwind.config.js \\\n -w\n```\n\n```text\nconst execSync = require('child_process').execSync;\nconst output = execSync('bundle show my_engine', { encoding: 'utf-8' });\n```\n\n```text\noutput.trim() + '/app/**/*.{erb,haml,html,rb}'\n```\n\n========================================\n\nComments:\n- This just wasn't implemented yet, at all. You would have to do everything manually, to a point that you would have to replicate build tasks like `rails tailwindcss:build`\n- @user9114945 Thank you for your pointer, I'll give that a go and if I manage to achieve this manually then I'll answer my own question, off to do some research on the steps used in the build tasks. Becoming very delusioned with Rails hasty implementations lately\n- By the way, I think it's not just Rails 7 but also the Tailwind Gem itself that doesn't support engines. For example the tailwindcss:build task uses only `Rails.root` paths.. I suspect that the tailwind gem only supports builds for the Root app anyway (where it searches for tailwind class definitions to generate the slimmed down tailwind css file). I have the same exact problem and I made it work by just manually installing tailwind in the Engine, and then adding tailwind.css to the mainfest.js file. This works, but without stripping/compiling. Might as well use CDN Tailwind instead of that..\n- @user9114945, could you document the manual process you followed as your answer to this question please and I'll mark it as accepted. Much appreciated\n- Sorry just saw this now. Did you ever find a solution? Mine turned out to be a mess\n- @user9114945, no, doesn't seem possible right now\n- I'm just using it via CDN at the moment.. sad\n- @user9114945 it feels like something has changed in the Rails team, not for the better, the tailwind gem is not the only thing suffering and I'm starting to wonder about the future, I'm starting to think about finding an alternative language/framework, the thing is, I love Ruby so much and really hope they sort themselves out quickly\n- Yes exactly! Honestly, we are probably at the last station of the Rails train\n- @user9114945 I now have a solution as per the extremely detailed and accepted answer from Alex\n- Yes, remarkable, however my head hurts just looking at it ;). Did you have success with it?\n- Upstream discussion about engine support is here: github.com/rails/tailwindcss-rails/discussions/355\n- Hi Alex, I wanted to thank you for your dedication in tracking down my unanswered questions and providing solutions for me. I want to the results of the efforts of all your hard work. I am a member of a WhatsApp group in the UK dedicated to helping Ukranian refugees and those sponsoring refugees and opening up their homes this providing a means of escape. Group members have had a lot of national press across all media National T.V. news and local radio.\n- We so far have helped uncountable people to reach the UK, We have members on the polish boarders helping to match the displaced with UK sponsors and we are in contact with Ukranians that are in desperate need of help and hiding out in occupied towns. The site that I have written is together-for-ukraine.co.uk/about it is a CMS site and volunteers in the group are working on the content. You have made the development of this project so much easier for me and I thought you deserved to know how much of a difference your help has made.Thank you from the bottom of my heart\n- Great work and patience in explaining it. I had even figured most of this out, alas... Normal assets rules do not seem to apply with the engines generated css, WHEN the app also uses tailwind. Whatever i do, i can not get the apps tailwind styles AND the engines tailwind styles to work at the same time. I tried switching preflight off in both, ordered them this and that way, but to no avail. The problem seems to be that some media classes, eg .lg\\:grid-cols-5 just don't apply, even they are there. Any help or insight appreciated\n- @Torsten see the update, I only have an explanation but no good solution. I'm pretty sure the only way is to compile styles as one by watching the engine directory.\n- @alex good of you to have a look. My step 2 is to the same effect, just in javascript.\n- such a great answer!\n- @Alex investigated further, my tasks were merging (parent one + engine one) and reloading wasn't effective on the engine's files. Rake::Task[:watch].clear / Rake::Task[:build].clear to the rescue\n- Just for anyone actually attempting this, i would recommend staying away from solution 1. Ie don't have a separate engine stylesheet at al (unless you develop a admin of sorts, that is really seperate from the app). Just go with solution 2, let the app's tailwind get all styles. The reasonn being that i keep forgetting to actually maually start the script, and so the styles don't get updated, and i wonder and wonder. Whereas with 2, foreman does it in the course of normal procedure","metadata":{"transformedAt":"2026-08-18T18:33:42.887Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":44,"totalLines":436,"estimatedTokens":3823}}111{"id":"stack-71413730","source":"stackoverflow","questionId":71413730,"title":"Conditionally set background color in React component with Tailwind CSS","tags":["reactjs","tailwind-css"],"text":"Title: Conditionally set background color in React component with Tailwind CSS\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to use a hex color code passed through props to set the background color of a div. These are one-off colors that are generated dynamically, so cannot be added as a theme extension in `tailwind.config`.\n\nI thought a template literal would be the best way to achieve this, but have not been able to get this to work with arbitrary color values in Tailwind CSS.\n\n```\ninterface Props {\n color: string;\n}\n\nconst ColorSwatch = ({ color }: Props) => {\n return (\n \n \n {color}\n\n \n );\n};\n\nexport default ColorSwatch;\n```\n\nPasting the hex color code directly into the className list produces expected results, but trying to use the prop value in a template literal results in a transparent background (no background effect applied).\n\nLooking for advice on how to correct this or different approaches to dynamically setting background color with a hex code passed through props.\n\n========================================\n\nTop Answer:\nFrom tailwind docs:\n\nDynamic class names\n\nIf you use string interpolation or concatenate partial class names\ntogether, Tailwind will not find them and therefore will not generate\nthe corresponding CSS:\n\n**Don't construct class names dynamically**\n\n```\n\n```\n\nIn the example above, the strings `text-red-600` and `text-green-600` do\nnot exist, so Tailwind will not generate those classes.\n\nInstead, make sure any class names you’re using exist in full:\n\n**Always use complete class names**\n\n```\n\n```\n\n**Always map props to static class names**\n\n```\nfunction Button({ color, children }) { const colorVariants = {\n blue: 'bg-blue-600 hover:bg-blue-500',\n red: 'bg-red-600 hover:bg-red-500', }\n\n return (\n \n {children}\n ) }\n```\n\n========================================\n\nCode:\n```text\ninterface Props {\n color: string;\n}\n\nconst ColorSwatch = ({ color }: Props) => {\n return (\n <div className=\"flex flex-col gap-1 p-2\">\n <div\n className={`h-20 w-20 border border-gray-400 shadow-md bg-[${color}]`}\n ></div>\n <p className=\"text-center\">{color}</p>\n </div>\n );\n};\n\nexport default ColorSwatch;\n```\n\n```text\ntailwind.config\n```\n\n```text\ninterface Props {\n color: string;\n}\n\nconst ColorSwatch = ({ color }: Props) => {\n return (\n <div className=\"flex flex-col gap-1 p-2\">\n <div\n className=\"h-20 w-20 border border-gray-400 shadow-md\"\n style={{backgroundColor: color}}\n ></div>\n <p className=\"text-center\">{color}</p>\n </div>\n );\n};\n\nexport default ColorSwatch;\n```\n\n```text\nclassName\n```\n\n```text\nclassName\n```\n\n```text\nstyle\n```\n\n```text\n<div class=\"text-{{ error ? 'red' : 'green' }}-600\"></div>\n```\n\n```text\n<div class=\"{{ error ? 'text-red-600' : 'text-green-600' }}\"></div>\n```\n\n```text\nfunction Button({ color, children }) { const colorVariants = {\n blue: 'bg-blue-600 hover:bg-blue-500',\n red: 'bg-red-600 hover:bg-red-500', }\n\n return (\n <button className={`${colorVariants[color]} ...`}>\n {children}\n </button> ) }\n```\n\n```text\ntext-red-600\n```\n\n```text\ntext-green-600\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.887Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":156,"estimatedTokens":785}}112{"id":"stack-68981642","source":"stackoverflow","questionId":68981642,"title":"Display hidden not working with flex in Tailwind","tags":["html","css","laravel","tailwind-css"],"text":"Title: Display hidden not working with flex in Tailwind\nTags: html, css, laravel, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to hide a div in mobile, and display flex with md screen & above, here's my code:\n\n```\n\n Home \n Shop \n About Us \n Contact \n \n```\n\nApparently, the div is hidden all the time whether it's a md or sm or xl screen\nHow can I fix this in Tailwind?\n\n========================================\n\nTop Answer:\ntry the opposite:\n\n```\n\n```\n\n========================================\n\nCode:\n```text\n<div class=\"hidden md:flex\">\n <x-navbar.nav-links :href=\"route('welcome')\"> Home </x-navbar.nav-links>\n <x-navbar.nav-links :href=\"route('welcome')\"> Shop </x-navbar.nav-links>\n <x-navbar.nav-links :href=\"route('welcome')\"> About Us </x-navbar.nav-links>\n <x-navbar.nav-links :href=\"route('welcome')\"> Contact </x-navbar.nav-links> \n </div>\n```\n\n```text\nclass=\"invisible md:visible md:flex\"\n```\n\n```text\n<div class=\"hidden md:visible\">\n```\n\n```none\nnpx tailwindcss -i ./src/input.css -o ./dist/output.css --watch\n```\n\n```text\ninput.css\n```\n\n```text\noutput.css\n```\n\n```text\n<div class=\"hidden sm:flex\">\n```\n\n```text\n<div class=\"invisible sm:visible\">\n```\n\n```text\n<div class=\"hidden md:block/flex/\">\n```\n\n```text\nimport NavBar from \"@/shared/components/layout/navBar\";\nimport \"./globals.scss\";\n```\n\n```text\nimport \"./globals.scss\";\nimport NavBar from \"@/shared/components/layout/navBar\";\n```\n\n```text\n<div class=\"flex max-md:hidden\">\n```\n\n```text\nimport './globals.css';\nimport '@author/package/dist/index.css';\n```\n\n```text\nimport type { Config } from 'tailwindcss';\n\nconst config: Config = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx,mdx}',\n './components/**/*.{js,ts,jsx,tsx,mdx}',\n './app/**/*.{js,ts,jsx,tsx,mdx}',\n ],\n theme: {\n extend: {}\n },\n plugins: [],\n important: true, // <<<< HERE\n};\n\nexport default config;\n```\n\n```text\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css\" />\n<link rel=\"stylesheet\" href=\"dist.css\" />\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@tailwind screens;\n```\n\n```text\nmd:before:hidden\n```\n\n```html\n<div class=\"flex\">\n <div class=\"hidden\">\n Class hidden will work in flex class\n </div>\n</div>\n```\n\n```text\n<div class=\"md:hidden\">\n <div class=\"flex\">\n </div>\n</div>\n```\n\n========================================\n\nComments:\n- It is pretty simple, use chrome or firefox console, you can inspect in any width... and also see the active classes...\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- Yes, I meant Class. was working on Reactjs this morning. that's why. but invisible has a problem that the tag can't be seen but it still affect the layout. So in this case I think we have to customs @media query css for it, to overwrite tailwind.\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- I'm not sure where that is documented, but it worked.\n- This works for chrome as well perfectly\n- Would you kindly edit your answer to include additional details for the benefit of the community? Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.887Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":158,"estimatedTokens":1002}}113{"id":"stack-76616735","source":"stackoverflow","questionId":76616735,"title":"Tailwind backdrop not applying to dialog element","tags":["reactjs","dialog","tailwind-css"],"text":"Title: Tailwind backdrop not applying to dialog element\nTags: reactjs, dialog, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to add a backdrop behind a `` in a React component in a NextJS app. I'm using Tailwind v3.3.2 and all my other styles are applying correctly, but the styles for `backdrop:bg-gray-500` aren't applying any styles in the browser.\n\nI've written a React component that renders the following:\n\n```\n\n This is a dialog\n \n```\n\nI would expect this to add a gray backdrop behind the element, but nothing is being applied to the element.\n\nI've looked through the Tailwind docs and this looks like what I've tried: https://tailwindcss.com/docs/hover-focus-and-other-states#dialog-backdrops\n\n========================================\n\nCode:\n```text\n<dialog className=\"backdrop:bg-gray-50\" open={true}>\n This is a dialog\n </dialog>\n```\n\n```text\n<dialog>\n```\n\n```text\nbackdrop:bg-gray-500\n```\n\n```js\nfunction App() {\n const dialog = React.useRef();\n \n React.useLayoutEffect(() => {\n dialog.current.showModal();\n }, [dialog]);\n \n return (\n <dialog className=\"backdrop:bg-gray-50\" ref={dialog}>\n This is a dialog\n </dialog>\n );\n}\nReactDOM.createRoot(document.getElementById('app')).render(<App/>);\n```\n\n```html\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js\" integrity=\"sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js\" integrity=\"sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div id=\"app\"></div>\n\nContent\n```\n\n```text\nopen\n```\n\n```text\n<dialog>\n```\n\n```text\nopen\n```\n\n```text\n.showModal()\n```\n\n```text\nHTMLDialogElement\n```\n\n```text\n::backdrop\n```\n\n```text\n<dialog>\n```\n\n```text\nHTMLDialogElement.showModal()\n```\n\n========================================\n\nComments:\n- This one got nearly a full hour out of me lol. Toggling the 'open' attribute is not the same\n- This one saved my morning from being a complete waste of time. Like the previous comment says, toggling the 'open' attribute was not enough. Thank you!\n- I never would have guessed this! Confusing behavior.","metadata":{"transformedAt":"2026-08-18T18:33:42.887Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":101,"estimatedTokens":612}}114{"id":"stack-70890444","source":"stackoverflow","questionId":70890444,"title":"Can't figure out why my Tailwind borders aren't showing","tags":["tailwind-css"],"text":"Title: Can't figure out why my Tailwind borders aren't showing\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to apply a simple border to my elements. Granted it's been a while since I touched this project, it appears to build the CSS and output what it's meant to but I can't see the border in the browser.\n\nAm I missing something super obvious?\n\nHere we have the Tailwind config file\n\n```\nmodule.exports = {\n mode: 'jit',\n purge: ['./templates/**/*.twig', './js/**/*.{js,vue}'],\n corePlugins: {\n preflight: false\n },\n prefix: 'tw-',\n important: true,\n darkMode: false, // or 'media' or 'class'\n theme: {\n screens: {\n sm: '640px',\n md: '768px',\n lg: '1024px',\n xl: '1240px',\n '2xl': '1536px'\n },\n // prettier-ignore\n\n fontFamily: {\n sans: [\n 'Nunito',\n '-apple-system',\n 'BlinkMacSystemFont',\n 'Avenir Next',\n 'Avenir',\n 'Segoe UI',\n 'Lucida Grande',\n 'Helvetica Neue',\n 'Helvetica',\n 'Fira Sans',\n 'Roboto',\n 'Noto',\n 'Droid Sans',\n 'Cantarell',\n 'Oxygen',\n 'Ubuntu',\n 'Franklin Gothic Medium',\n 'Century Gothic',\n 'Liberation Sans',\n 'Arial',\n 'sans-serif'\n ]\n },\n fontSize: {\n tiny: '.8125rem', // 13px\n xs: '.875rem', // 14px\n sm: '.9375rem', // 15px\n base: '1rem', // 16px\n lg: '1.125rem', // 18px\n xl: '1.25rem', // 20px\n '2xl': '2rem', // 32px\n '3xl': '2.75rem' // 44px\n },\n extend: {\n colors: {\n primary: '#E76A52',\n 'primary-soft': '#FBF0EE'\n }\n }\n },\n variants: {\n extend: {}\n },\n plugins: [require('@tailwindcss/typography')]\n}\n```\n\nI'm declaring the Tailwind classes on the element by using `class=\"tw-border-primary tw-border-2\"` and Chrome's dev tools show\n\n```\n.tw-border-primary {\n --tw-border-opacity: 1 !important;\n border-color: rgba(231, 106, 82, var(--tw-border-opacity)) !important;\n}\n\n.tw-border-2 {\n border-width: 2px !important;\n}\n```\n\nI can't make sense of it. It's definitely not a cache thing as all browsers are the same.\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n mode: 'jit',\n purge: ['./templates/**/*.twig', './js/**/*.{js,vue}'],\n corePlugins: {\n preflight: false\n },\n prefix: 'tw-',\n important: true,\n darkMode: false, // or 'media' or 'class'\n theme: {\n screens: {\n sm: '640px',\n md: '768px',\n lg: '1024px',\n xl: '1240px',\n '2xl': '1536px'\n },\n // prettier-ignore\n\n fontFamily: {\n sans: [\n 'Nunito',\n '-apple-system',\n 'BlinkMacSystemFont',\n 'Avenir Next',\n 'Avenir',\n 'Segoe UI',\n 'Lucida Grande',\n 'Helvetica Neue',\n 'Helvetica',\n 'Fira Sans',\n 'Roboto',\n 'Noto',\n 'Droid Sans',\n 'Cantarell',\n 'Oxygen',\n 'Ubuntu',\n 'Franklin Gothic Medium',\n 'Century Gothic',\n 'Liberation Sans',\n 'Arial',\n 'sans-serif'\n ]\n },\n fontSize: {\n tiny: '.8125rem', // 13px\n xs: '.875rem', // 14px\n sm: '.9375rem', // 15px\n base: '1rem', // 16px\n lg: '1.125rem', // 18px\n xl: '1.25rem', // 20px\n '2xl': '2rem', // 32px\n '3xl': '2.75rem' // 44px\n },\n extend: {\n colors: {\n primary: '#E76A52',\n 'primary-soft': '#FBF0EE'\n }\n }\n },\n variants: {\n extend: {}\n },\n plugins: [require('@tailwindcss/typography')]\n}\n```\n\n```text\n.tw-border-primary {\n --tw-border-opacity: 1 !important;\n border-color: rgba(231, 106, 82, var(--tw-border-opacity)) !important;\n}\n\n.tw-border-2 {\n border-width: 2px !important;\n}\n```\n\n```text\nclass=\"tw-border-primary tw-border-2\"\n```\n\n```text\ntw-border-solid\n```\n\n========================================\n\nComments:\n- tailwindcss.com/docs/content-configuration#dynamic-class-nam‌​es was helpful for my case.\n- This happened because you set `preflight: false` in your config. Tailwind's preflight styles set `border-style` for every element as `solid` tailwindcss.com/docs/preflight#border-styles-are-reset-globa‌​lly\n- great spot, I didn't think about that. Obviously need to use that to not clash with our custom CSS. Life much easier with TW.\n- Where did you add the class? I tired on but still didn´t work. I use cdn.tailwindcss.com is it possible to configure preflight for cdn?\n- there is no class called `tw-border-solid` - steven grant is using his special prefixed version. he means if you have preflight disabled you have to add `border-solid` everywhere you use `border`.","metadata":{"transformedAt":"2026-08-18T18:33:42.887Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":194,"estimatedTokens":1188}}115{"id":"stack-70969973","source":"stackoverflow","questionId":70969973,"title":"How to integrate Storybook with Tailwind CSS, Create Next App & TypeScript","tags":["typescript","next.js","tailwind-css","storybook","postcss"],"text":"Title: How to integrate Storybook with Tailwind CSS, Create Next App & TypeScript\nTags: typescript, next.js, tailwind-css, storybook, postcss\nSource: Stack Overflow\n\nQuestion:\n**The following question is related to a previous question I asked, so apologies in advance if I'm being repetitive, but I still haven't been able to resolve my issue.*\n\nI'm trying to get Storybook to work with Tailwind CSS to no avail so far. These are the steps I've followed:\n\nI have created a new TypeScript project from scratch, bootstrapping\nit with Create Next App. I followed the instructions on Tailwinds website. Tailwind works fine on the App.\n\n- I set up Storybook following the instructions on their website. Storybook starts up fine on port 6006.\n\n- I configured the main.js file accordingly to incorporate PostCSS for Tailwind to work within Storybook:\n\n```\nmodule.exports = {\n \"stories\": [\n \"../stories/**/*.stories.mdx\",\n \"../stories/**/*.stories.@(js|jsx|ts|tsx)\"\n ],\n \"addons\": [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/addon-postcss\"\n ],\n \"framework\": \"@storybook/react\"\n}\n```\n\nDespite doing all these, I don't see any effect of Tailwind on the story components—only in the application.\n\nI tried testing if Tailwind works by putting in a small element in a Storybook component. I don't see it rendered as expected:\n\n```\n\n Tailwind Works!\n\n```\n\nLink to Github repo: https://github.com/TRahulSam1997/storybook-tailwind-next-typescript-v2\n\nAny help would be much appreciated!\n\n========================================\n\nTop Answer:\nAdd the path to the stories folder in the tailwind.config.js file.\n\n\r\n\r\n\n```\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./stories/**/*.{js,ts,jsx,tsx}\", //instruct tailwind to read the stories folder\n ],\n theme: {},\n plugins: [],\n}\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n \"stories\": [\n \"../stories/**/*.stories.mdx\",\n \"../stories/**/*.stories.@(js|jsx|ts|tsx)\"\n ],\n \"addons\": [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/addon-postcss\"\n ],\n \"framework\": \"@storybook/react\"\n}\n```\n\n```text\n<h1 className=\"text-3xl font-bold underline\">\n Tailwind Works!\n</h1>\n```\n\n```text\nimport 'tailwindcss/tailwind.css';\n```\n\n```js\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./stories/**/*.{js,ts,jsx,tsx}\", //instruct tailwind to read the stories folder\n ],\n theme: {},\n plugins: [],\n}\n```\n\n========================================\n\nComments:\n- thank you, for me was the path to the globals.css created by next with tailwind, `import 'src/app/globals.css';`","metadata":{"transformedAt":"2026-08-18T18:33:42.887Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":109,"estimatedTokens":684}}116{"id":"stack-65554596","source":"stackoverflow","questionId":65554596,"title":"PurgeCSS and Tailwind CSS, how to preserve responsive classes using the Command Line Interface?","tags":["node.js","command-line-interface","tailwind-css","css-purge"],"text":"Title: PurgeCSS and Tailwind CSS, how to preserve responsive classes using the Command Line Interface?\nTags: node.js, command-line-interface, tailwind-css, css-purge\nSource: Stack Overflow\n\nQuestion:\nI have the \"full\" 3.9 MB Tailwind CSS file and successfully applied PurgeCSS to reduce it to 9 kB. But it also purged all responsive classes like `md:px-6`, they don't show up in my purged version.\n\nNote: this question is for using the command line interface (CLI)\n\nThis is what I did:\n\n```\npurgecss --css ~/Desktop/Projects/Flask/Project1/build/static/css/main.css --content ~/Desktop/Projects/Flask//Project1/build/**/*.html --output ~/Desktop/Projects/Flask/Project2/static/css/main.css\n```\n\nI chose to create the output file in a different folder (`Project2`) so that I could check on the input vs output.\n\nOne thing I tried is to add `--safelist [/md/]`, but didn't help. In fact the safelist didn't seem to be used at all.\n\n(I use CLI since it is part of a bigger Python Flask project)\n\n========================================\n\nTop Answer:\nNote: I want to comment on accepted answer, but my reputation is not enough for comment.\n\nI am working on a project written bootstrap and partially inject tailwind classes in it. Tailwind now not uses PurgeCSS, it compiles the classes Just In Time, and many fancy characters added to selectors. Normally you dont require use the PurgeCSS because tailwind only generates what you need, but if you are working on a legacy project and need purging but not purging generated tailwind classes the extractor must have all the fancy characters. I start with default Extractor and added every character in the group with prefixed a backslash like this: `\\!`\n\n- important `!`\n\n- arbitrary values `[]`\n\n- custom media queries `min-w-[400px]:`\n\n- ampersand and greater than for immediate child selectors `[&>p]`\n\n- percent values in arbitrary values `w-[19%]`\n\n- rgb, or hsl arbitrary values requires parantheses `bg-[rgba(0,0,0,0.5)]`\n\n- arbitrary values sometimes requires \"dot\" in selector `.`\n\n- asterisk for targeting every child selector `[&>*]`\n\nOh man, so many possibilities in arbitrary values!\n\nResult is:\n\n```\ndefaultExtractor: (content) => {\n const defaultSelectors = content.match(/[A-Za-z0-9_-]+/g) || [];\n const extendedSelectors = content.match(/[^<>\"=\\s]+/g) || [];\n return defaultSelectors.concat(extendedSelectors);\n},\n```\n\nEdited: I write much simpler, blacklist approach regex.\n\n========================================\n\nCode:\n```none\npurgecss --css ~/Desktop/Projects/Flask/Project1/build/static/css/main.css --content ~/Desktop/Projects/Flask//Project1/build/**/*.html --output ~/Desktop/Projects/Flask/Project2/static/css/main.css\n```\n\n```text\nmd:px-6\n```\n\n```text\nProject2\n```\n\n```text\n--safelist [/md/]\n```\n\n```js\n(content) => content.match(/[\\w-/:]+(?<!:)/g) || []\n```\n\n```js\n// purgecss.config.js\nmodule.exports = {\n content: ['build/**/*.html'],\n css: ['build/static/css/main.css'],\n defaultExtractor: (content) => content.match(/[\\w-/:]+(?<!:)/g) || [],\n output: 'static/css/main.css',\n};\n```\n\n```bash\npurgecss --config ./purgecss.config.js\n```\n\n```js\n(content) => content.match(/[\\w-/:.]+(?<!:)/g) || []\n```\n\n```text\n:\n```\n\n```text\nmd:px-6\n```\n\n```text\nhover:bg-gray-500\n```\n\n```text\ndefaultExtractor\n```\n\n```text\npurgecss.config.js\n```\n\n```text\npx-2.5\n```\n\n```text\n.\n```\n\n```js\ndefaultExtractor: (content) => {\n const defaultSelectors = content.match(/[A-Za-z0-9_-]+/g) || [];\n const extendedSelectors = content.match(/[^<>\"=\\s]+/g) || [];\n return defaultSelectors.concat(extendedSelectors);\n},\n```\n\n```text\n\\!\n```\n\n```text\n!\n```\n\n```text\n[]\n```\n\n```text\nmin-w-[400px]:\n```\n\n```text\n[&>p]\n```\n\n```text\nw-[19%]\n```\n\n```text\nbg-[rgba(0,0,0,0.5)]\n```\n\n```text\n.\n```\n\n```text\n[&>*]\n```\n\n```text\nmodule.exports = {\n module: {},\n entry: {\n app: './app.js',\n stylesBootstrap: './bootstrap.scss',\n stylesTailwind: './tailwind.css',\n },\n plugins: [\n new PurgeCssPlugin({\n paths: glob.sync([\n path.join(__dirname, 'app/**/*.js'),\n ]),\n only: [\n 'app',\n 'stylesBootstrap',\n // 'stylesTailwind', - don't purge that bundle\n ]\n })\n ]\n};\n```\n\n```text\nwebpack.config.js\n```\n\n========================================\n\nComments:\n- I see I made a typo in the question itself, with a double slash in a file path, please ignore that. Question still holds\n- Related: Convert **TailwindCSS v3** to native CSS with purge and Convert **TailwindCSS v4** to native CSS with purge\n- Great, thanks! Works like a charm. I had to change the `output` folder in the `purgecss.config.js` file to make everything work in my specific flow, but that is a minor detail.\n- to also include classes such as `px-2.5` you'll want to match for `.` too, like so: `content.match(/[\\w-:./]+(?<!:)/g) || []` (src: stackoverflow.com/a/60552953/827129)\n- To use classes like `.max-w-[800px]`, the extractor should be updated to `(content) => content.match(/[\\w\\-:.\\/\\[#%\\]]+(?<!:)/g) || []`\n- With that setting, `space-x-*` and `space-y-*` don't work. Maybe because of `& > :not(:last-child)`?\n- This still removes `space-x-*` and `space-y-*`, probably because `&>:not(:last-child)`.\n- \"Tailwind 4 doesn't generate unused classes\" - In fact, this worked the same way in v3 as well; btw yeah.\n- @rozsazoltan Correct, updated the answer.","metadata":{"transformedAt":"2026-08-18T18:33:42.888Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":27,"totalLines":210,"estimatedTokens":1338}}117{"id":"stack-79540647","source":"stackoverflow","questionId":79540647,"title":"How to define custom colors and use them in dark, light mode without using :dark?","tags":["reactjs","typescript","tailwind-css","vite","tailwind-css-4"],"text":"Title: How to define custom colors and use them in dark, light mode without using :dark?\nTags: reactjs, typescript, tailwind-css, vite, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI am using **Tailwind CSS v4** and want to define **custom colors** that automatically switch between **light** and **dark** modes. Instead of using the `dark:` prefix for every class, I want to manage color changes through CSS variables in my React project.\n\nHere’s what I’m trying to achieve:\n\n- Define custom colors (e.g., `primary`, `baseColor`, `textColor`).\n\n- Automatically switch these values based on light or dark mode.\n\n- Avoid using `dark:` in every class for better maintainability.\n\nI’ve tried adding CSS variables via `:root` and the `dark` class but want to ensure I’m following best practices for Tailwind v4.\n\nHow can I configure **tailwind.config.ts** and global CSS to achieve this?\n\n========================================\n\nCode:\n```text\ndark:\n```\n\n```text\nprimary\n```\n\n```text\nbaseColor\n```\n\n```text\ntextColor\n```\n\n```text\ndark:\n```\n\n```text\n:root\n```\n\n```text\ndark\n```\n\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser\"></script>\n<style type=\"text/tailwindcss\">\n/* changed the behavior of dark: (default: based on prefers-color-scheme) to work based on the presence of the .dark parent class */\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-pink: #eb6bd8;\n}\n\n@layer theme {\n :root, :host {\n @variant dark {\n --color-pink: #8e0d7a;\n }\n }\n}\n</style>\n\n<button class=\"size-20 bg-pink dark:text-white\">Click Here</button>\n<div class=\"w-50 h-12 bg-purple-200 dark:bg-purple-900 dark:text-white\">\n Lorem Ipsum\n</div>\n```\n\n```js\ntailwind.config = {\n darkMode: 'class', // from v3.4.1 can use 'selector' instead of this\n theme: {\n extend: {\n colors: {\n pink: 'var(--color-pink)',\n },\n },\n },\n};\n\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<style type=\"text/tailwindcss\">\n:root {\n --color-pink: #eb6bd8;\n}\n\n.dark:root {\n --color-pink: #8e0d7a;\n}\n</style>\n\n<button class=\"size-20 bg-pink dark:text-white\">Click Here</button>\n<div class=\"w-50 h-12 bg-purple-200 dark:bg-purple-900 dark:text-white\">\n Lorem Ipsum\n</div>\n```\n\n```text\ndark:\n```\n\n```text\n@variant dark\n```\n\n```text\nbg-pink\n```\n\n```text\n@custom-variant\n```\n\n```text\n@variant\n```\n\n```text\n@theme\n```\n\n```text\ndark:\n```\n\n```text\n.system\n```\n\n```text\ndark:\n```\n\n```text\n.system\n```\n\n```text\n.dark\n```\n\n```text\ndark:\n```\n\n```text\n.dark { ... }\n```\n\n```text\nbg-pink\n```\n\n========================================\n\nComments:\n- Possible duplicated: How to use custom color themes in TailwindCSS v4 - Related: TailwindCSS v4 dark theme by class not working without dark tag\n- How to manually toggle dark mode in TailwindCSS v4\n- Tailwind doesn't overwrite standard CSS (as far as I understand) so you could just use `background-color: light-dark(var(--bg-light), var(--bg-dark));`\n- This approach makes us use the namespace, e.g. as you have `--color-pink`. But what if I want to have utility class like `button-background-color`. If I use the suggested approach I will have to do: `--color-button-background-color`. But then this will also become available as `text-button-background-color` right? (due to namespaces). Which does not make much sense, does it? i.e. to have text color named as background color.\n- Yes. Although I like the new concept, many people prefer usage-based naming, and in those cases it does make sense that the color shouldn't work across different utilities (text, bg, etc.). In v4, there is an undocumented but working feature that allows the color only within the desired utility: github.com/tailwindlabs/tailwindcss.com/pull/2247\n- But what would be the official (documented) way if I want to use approach like I mentioned e.g. `button-background-color` (without it affecting other utility classes like text) and then also override it for dark theme?\n- Basically, you could create a custom `button-*` utility where you declare your own unique namespace and list all its properties; you can also define the dark variant there. The answer would be a bit long to explain in a comment - maybe I can a playground instead. --- UP --- I was a bit overzealous - this would probably require an additional plugin as well: play.tailwindcss.com/NvurAtvsJC?file=css\n- The idea of declaring namespaces sounded good in my head, but unfortunately, it's not possible to assign different values to multiple properties. Maybe the functionality could be extended with a plugin. In the meantime, you can declare your own utilities - although it seems like quite a bit of work: play.tailwindcss.com/nVw4kmzEoM?file=css\n- Thanks but in your last example, why did you put `button-background-color` under `theme` you did not use any namespace did you?\n- The variable is declared - it's nothing more than a `:root` variable for now. You're right, maybe it's a bit over the top; I just modified the original code. Yes, until there’s a way to assign different CSS properties under the `--button-*` namespace value, it sounds like an unnecessary declaration. play.tailwindcss.com/F5nHpuQDRO?file=css (UP)\n- I decided to explore this topic a little bit further, I think you might be interested here, and in the response the person suggests we should wrap the `@variant dark` inside `*{...}` which this answer does not have.\n- I think you gave me a good review. I also highlighted this version in another reply. I believe using the theme layer is a more refined way to achieve the goal.\n- do you plan to update your answer with the solution you provided in the comment before your last comment? It might be useful to some. I have used it here, though it seems I have to use the @utility separately for each class right (the way I have it)?\n- @gmoniava Yes, thank you for bringing it to my attention again. I definitely want to include it in the answer. I think I'll write the necessary update today.\n- @gmoniava - I tried to capture the essence of your example, where instead of the usual `--property-name` or `--utility-property-name` structure, you wanted to create a configuration using the `--component-name-property` pattern. I believe this deviates quite a bit from the main focus of the current question - and from TailwindCSS's core concept, which might be confusing for beginners - enough that I'll address it in a separate question. You can check it out here: stackoverflow.com/q/79690477/15167500 - If you want, feel free to write your own answer or edit it in.\n- Just note. I would love to see some special syntax implemented via a plugin that could extend the usage of `--value` better, so fewer utilities would need to be written. e.g.: Example#1 or Example#2\n- Related: In v3, using `:root` was sufficient - so from v4 why do I now need to use both `@theme` and `@layer theme`? - `@theme` vs `@layer theme` vs `:root`\n- Related: Should I use `@theme` or `@theme inline`?","metadata":{"transformedAt":"2026-08-18T18:33:42.888Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":25,"totalLines":193,"estimatedTokens":1798}}118{"id":"stack-72680086","source":"stackoverflow","questionId":72680086,"title":"No utility classes were detected in your source files ,double-check the `content`","tags":["tailwind-css","tailwind-ui"],"text":"Title: No utility classes were detected in your source files ,double-check the `content`\nTags: tailwind-css, tailwind-ui\nSource: Stack Overflow\n\nQuestion:\nI am trying to setup tailwind 3 , but i got the next warning .\n\n```\nNo utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.\n```\n\nthis is my project structure\n\n```\n|_public : \n |_index.html , \n |_output.css // this css file generated after i run the command | npx tailwindcss -i ./src/input.css -o ./public/output.css --watch\n|_src\n |_input.css\n```\n\ntailwind.config.js\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n========================================\n\nTop Answer:\n### Why does this error occur ?\n\nWhen specified content path in the `tailwind.config.css` doesn't have any `html/js` file\n\nOR\n\nif you are not using `tailwind-css classes` in your `html` file\n\n```\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"], 👈 Your html and js files which is users of tailwind classes\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\nThis states I want to use the tailwind classes for `html/js` files under `src` directory. ***But src doesn't have any `html/js` file.***\n\n### Solution:\n\n- Change `content` in `tailwind.config.css` to have right path\n\n- Have `html/js` files in the specified directory.\n\n### Extra : Proper approach to when using `Tailwind-CLI`\n\n### 1. Know about your file structure. Use:\n\n```\npublic\n|_ tailwind_base.css \n 👆 File from which the output.css is produced\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n|_ output.css\nsrc\n|_ index.html \n 👆 Link with the output.css using \n \n```\n\n### Watch it as\n\n```\nnpx tailwindcss -i ./public/tailwind_base.css -o ./public/output.css --watch\n```\n\n### Specify your `html/js` in `tailwind.config.js`\n\n```\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n### index.html file\n\n```\n\n \n \n \n \n Hello\n \n\n```\n\nUse `tailwindcss classes` happily in your `index.html` file 😇\n\n========================================\n\nCode:\n```text\nNo utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.\n```\n\n```text\n|_public : \n |_index.html , \n |_output.css // this css file generated after i run the command | npx tailwindcss -i ./src/input.css -o ./public/output.css --watch\n|_src\n |_input.css\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nsrc\n```\n\n```text\npublic\n```\n\n```text\noutput.css\n```\n\n```text\nnpx tailwindcss -i ./src/input.css -o ./public/output.css --watch\n```\n\n```text\ngit clone https://github.com/abrahamebij/tailwind-boilerplate\n```\n\n```text\nnpm install\n```\n\n```text\nnpm run css\n```\n\n```text\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"], 👈 Your html and js files which is users of tailwind classes\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\npublic\n|_ tailwind_base.css \n 👆 File from which the output.css is produced\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n|_ output.css\nsrc\n|_ index.html \n 👆 Link with the output.css using \n <link href=\"../public/output.css\" rel=\"stylesheet\" />\n```\n\n```text\nnpx tailwindcss -i ./public/tailwind_base.css -o ./public/output.css --watch\n```\n\n```text\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\n<html lang=\"en\">\n <head>\n <link href=\"../public/output.css\" rel=\"stylesheet\" />\n </head>\n <body class=\"text-8xl\">\n Hello\n </body>\n</html>\n```\n\n```text\ntailwind.config.css\n```\n\n```text\nhtml/js\n```\n\n```text\ntailwind-css classes\n```\n\n```text\nhtml\n```\n\n```text\nhtml/js\n```\n\n```text\nsrc\n```\n\n```text\nhtml/js\n```\n\n```text\ncontent\n```\n\n```text\ntailwind.config.css\n```\n\n```text\nhtml/js\n```\n\n```text\nTailwind-CLI\n```\n\n```text\nhtml/js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwindcss classes\n```\n\n```text\nindex.html\n```\n\n```json\n\"scripts\": {\n \"build-css\": \"npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch\"\n },\n```\n\n```text\nnpx tailwindcss -i ./src/input.css -o ./dist/output.css --watch\n```\n\n```js\nexport default function Page() {\n return (\n <div className=\"bg-red-600\">Hello World</h1>\n )\n}\n```\n\n```text\ncontent: [\"./src/\\*.{html,js}\", \"./public/*.{html,js,jsx}\"]\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ncd into project root directory\n\nrm -rf .angular\n\nng serve\n```\n\n========================================\n\nComments:\n- According to your config, html and js files should be in `src` directory\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.888Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":36,"totalLines":318,"estimatedTokens":1273}}119{"id":"stack-63198462","source":"stackoverflow","questionId":63198462,"title":"Nextjs hot reloading taking 8-10 secs on every change of tailwind css","tags":["reactjs","next.js","tailwind-css"],"text":"Title: Nextjs hot reloading taking 8-10 secs on every change of tailwind css\nTags: reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am learning Nextjs and trying to use tailwind css with it for the first time.\nI notice that every change I make to the index.css file on the class selector with @apply directive of tailwind is taking 8-10s to compile and show on the browser.\n\nSteps to reproduce :\n\n- Run the command\n\nnpx create-next-app --example with-tailwind-css test-app\n\nCreate a button in pages/index.js and give it the classname btn-blue.\n\nRun the server using below command\n\nnpm run dev\n\n- Change any property inside styles/index.css file for the btn-blue selector (Ex: change bg-blue-400 to bg-red-400 or so, anything to trigger a re-compile). And observe the time it takes to reflect the changes on the localhost at browser.\n\nSome of my observation after experimenting :\n\nThis slowness is only when making changes into the @apply style. If I comment all the tailwind code in the index.css and write my own pure css style and change it, the hot reload is instantaneous\n\nThe hot reload is instant even when changing/adding any tailwind class to the classname of the element in index.js file (Inline styling).\n\nSo the issue seems to be only when using tailwind css from an external css file.\n\nI hope you can check and help me on this. Thanks !\n\n========================================\n\nTop Answer:\nHad a similar issue. The only thing that fixed it for me was:\n\n- **upgrade nextjs** to the latest\n\n- **delete** `package.lock` or `yarn.lock` file depending on whichever package manager you use\n\n- **delete** your entire `node_modules/` folder\n\n- reinstall the entire project again (`npm install` or `yarn install`)\n\n- now re-run the project. Builds should be near-instant now.\n\n========================================\n\nCode:\n```text\nnpx create-next-app --example with-tailwindcss with-tailwindcss-app\n```\n\n```text\nmode: 'jit',\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmodule.exports = {\n```\n\n```text\npackage.lock\n```\n\n```text\nyarn.lock\n```\n\n```text\nnode_modules/\n```\n\n```text\nnpm install\n```\n\n```text\nyarn install\n```\n\n```text\nimport dynamic from 'next/dynamic'\nimport { LucideProps } from 'lucide-react';\nimport dynamicIconImports from 'lucide-react/dynamicIconImports';\n\ninterface IconProps extends LucideProps {\n name: keyof typeof dynamicIconImports;\n}\n\nconst Icon = ({ name, ...props }: IconProps) => {\n const LucideIcon = dynamic(dynamicIconImports[name])\n\n return <LucideIcon {...props} />;\n};\n\nexport default Icon;\n```\n\n========================================\n\nComments:\n- Same issue here, but even if I comment out all Tailwind CSS styles, the dev time 20+ seconds\n- @georgekrax This is fixed with latest tailwind update. You can checkout my edit below for more details on how to fix this.\n- btw you can check a new issue I have created on next.js's repository about the slow development","metadata":{"transformedAt":"2026-08-18T18:33:42.888Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":110,"estimatedTokens":732}}120{"id":"stack-70728985","source":"stackoverflow","questionId":70728985,"title":"vite does not build tailwind css","tags":["html","css","tailwind-css","vite"],"text":"Title: vite does not build tailwind css\nTags: html, css, tailwind-css, vite\nSource: Stack Overflow\n\nQuestion:\nI installed tailwind and other tools using `npm install -D tailwindcss postcss autoprefixer vite`\n\nI created tailwind and postcss config files using `npx tailwindcss init -p`\n\n`tailwind.config.js` contains:\n\n```\nmodule.exports = {\n content: [],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n`postcss.config.js` contains:\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\nMy CSS file exits in css\\tailwind.css and contains:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nThe CSS file is linked to my HTMl page using ``\n\nWhen I run vite, my app starts without build errors but tailwind output is not generated.\n\n========================================\n\nTop Answer:\nThis works for me. Once you've done what Tailwindcss says in its docs, in your `vite.config.js` (I tried this on JavaScript file. I am not sure if this works on TypeScript in the same way) import tailwindcss:\n\n```\nimport tailwindcss from 'tailwindcss'\n```\n\nThen add tailwindcss as a PostCSS plugin like this:\n\n```\ncss: {\n postcss: {\n plugins: [tailwindcss],\n },\n}\n```\n\nOnce you've done that your `vite.config.js` will look like this:\n\n```\n/*Other imports*/\nimport tailwindcss from 'tailwindcss'\n\nexport default defineConfig({\n plugins: [],\n resolve: {\n /*something*/\n },\n css: {\n postcss: {\n plugins: [tailwindcss],\n },\n },\n});\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n content: [],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nnpm install -D tailwindcss postcss autoprefixer vite\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n```text\ntailwind.config.js\n```\n\n```text\npostcss.config.js\n```\n\n```text\n<link href=\"/css/tailwind.css\" rel=\"stylesheet\" >\n```\n\n```js\nmodule.exports = {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```html\n// Open terminal\nnpm run dev\n```\n\n```html\n<h1 class=\"text-3xl text-blue-700\">Testing</h1>\n```\n\n```js\nimport tailwindcss from 'tailwindcss'\n```\n\n```js\ncss: {\n postcss: {\n plugins: [tailwindcss],\n },\n}\n```\n\n```js\n/*Other imports*/\nimport tailwindcss from 'tailwindcss'\n\nexport default defineConfig({\n plugins: [],\n resolve: {\n /*something*/\n },\n css: {\n postcss: {\n plugins: [tailwindcss],\n },\n },\n});\n```\n\n```text\nvite.config.js\n```\n\n```text\nvite.config.js\n```\n\n========================================\n\nComments:\n- Have you actually used any of html classes? And you also need to configure `content` property to tell Tailwind where to find the files with classes\n- looks like the OP already has done all that things\n- @Nikita no, he did not tell Tailwind where to look for class names to include (see the `content: [ // add your sources here ]` list\n- Thank a ton. Found this answer after 2 days and it worked like a charm. When using backend integration feature of vite, it is required to set `css.postcss.plugins` property to `tailwindcss` in vite.config.js file.\n- thanks, this saved me! might be useful to have the `import { defineConfig } from 'vite'` at the top of your `vite.config.js` example :-)\n- working for me with a vite react project, thanks\n- I could not find this *anywhere* in the documentation. thank you! I'm sure it's on the interwebs somewhere but I didn't see it.","metadata":{"transformedAt":"2026-08-18T18:33:42.888Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":199,"estimatedTokens":896}}121{"id":"stack-67905596","source":"stackoverflow","questionId":67905596,"title":"How to use justify-between vertically with Tailwind?","tags":["css","tailwind-css"],"text":"Title: How to use justify-between vertically with Tailwind?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a flex-col container I do not know the height of. I should be able to use justify-between in the container to separate two divs, on to the top and one to the bottom of the div, as its main axis is defined as vertical, and justify-between is used to 'justify items along the container’s main axis' according to the docs.\n\nThis code works horizontally:\n\n```\n\n \n 1\n 3\n \n\n```\n\nHowever, if we change the second div to a 'flex-col' justify-between doesn't work along the vertical axis. Why is this?\n\n```\n\n \n 1\n 3\n \n\n```\n\nPlayground here: https://play.tailwindcss.com/41DdUFN3Fw\n\nHow can I achieve this, please?\n\n========================================\n\nCode:\n```text\n<div class=\"w-screen h-screen bg-blue-200\">\n <div class=\"flex justify-between\">\n <div>1</div>\n <div>3</div>\n </div>\n</div>\n```\n\n```text\n<div class=\"w-screen h-screen bg-blue-200\">\n <div class=\"flex flex-col justify-between\">\n <div>1</div>\n <div>3</div>\n </div>\n</div>\n```\n\n```text\n<div class=\"w-screen h-screen bg-blue-200\">\n <div class=\"flex flex-col justify-between\" style=\"height:100vh\">\n <div>1</div>\n <div>3</div>\n </div>\n</div>\n```\n\n========================================\n\nComments:\n- Instead of `height:100vh` you can just add the class `h-full`.\n- I suppose it's because with a div being a block element, it naturally expands horizontally to fill its container. However, in flex-col mode, a div still 'behaves' horizontally ie. it still expands horizontally, not vertically, somewhat changing the expected behaviour of flex-col and justify-between","metadata":{"transformedAt":"2026-08-18T18:33:42.888Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":68,"estimatedTokens":426}}122{"id":"stack-72500936","source":"stackoverflow","questionId":72500936,"title":"Tailwind: same space before and after divider line","tags":["css","user-interface","tailwind-css"],"text":"Title: Tailwind: same space before and after divider line\nTags: css, user-interface, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to have the same space (and configurable) before and after the divider line. However I cannot seem to get the spacing after the divider line.\n\n```\n\n Hello\n World\n hi\n\n```\n\nIt looks like this:\nhttps://i.sstatic.net/bsmqC.png\n\nHow can I get the same spacing before and after the divider line? Ideally without needing to touch the children styles (i.e. remove the pb-#)?\n\n========================================\n\nCode:\n```text\n<div class=\"grid grid-cols-1 divide-y divide-solid\">\n <div class=\"pb-5\">Hello</div>\n <div class=\"pb-5\">World</div>\n <div class=\"pb-5\">hi</div>\n</div>\n```\n\n```text\n<div class=\"grid grid-cols-1 divide-y divide-solid bg-gray-500\">\n <div class=\"py-2 first:pt-0\">Hello</div>\n <div class=\"py-2\">World</div>\n <div class=\" py-2 last:pb-0\">hi</div>\n</div>\n```\n\n========================================\n\nComments:\n- Make `pb-5` `py-2`?\n- Also, if they had been `pt-5`, then you could have added `gap-5` to `.grid`.\n- @brc-dd py-2 works except then the first and last item has padding-top and padding-bottom respectively. Is there a way to remove the padding-top from first and padding-bottom from last?\n- You can try something like this: play.tailwindcss.com/wIErADXAjp","metadata":{"transformedAt":"2026-08-18T18:33:42.888Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":46,"estimatedTokens":339}}123{"id":"stack-57671255","source":"stackoverflow","questionId":57671255,"title":"Keeping one column fixed while th other scrolls","tags":["tailwind-css"],"text":"Title: Keeping one column fixed while th other scrolls\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm playing around with Tailwind CSS 1.1.2 and wondering how to create a two-column layout where one column is fixed while the other scrolls vertically.\n\nSee https://vimeo.com/350933479#t=46s for reference.\n\n========================================\n\nTop Answer:\nWanted to respond for any poor souls that stumble upon this page.\n\nu/JHeth solution works, but it looks like a weird solution and is only fit for that type of application.\n\nGiving a solution that seems more reasonable for people that have a grid layout in mind that needs to scale for either multiple columns or mobile response.\n\n```\n\n \n LEFT COLUMN CONTENT HERE THAT DOESNT MOVE\n \n \n SCROLLY CONTENT HERE\n SCROLLY DIV 1\n SCROLLY DIV 2\n \n\n```\n\nSome Context: Sticky makes the left column interact with the grid system. Fixed will for some reason break its flow and ignore the width.\n\nYou can make this as many columns as you want by changing grid-cols-x in the parent and giving every direct child whatever span you want. I recommend watching a 30 second video on the tailwind grid-system.\n\nI also like this approach more because its easier to set up breakpoints for when you want the columns to merge into single column instead of 20%-80%.\n\nHeres a sample: https://play.tailwindcss.com/UHE4fA6ot4\n\n========================================\n\nCode:\n```text\n<div class=\"h-screen flex\">\n <!-- Fixed sidebar -->\n <div class=\"bg-gray-600 w-64\">\n <!-- Sidebar content -->\n </div>\n <!-- Scroll wrapper -->\n <div class=\"flex-1 flex overflow-hidden\">\n <!-- Scrollable container -->\n <div class=\"flex-1 overflow-y-scroll\">\n <!-- Your content -->\n </div>\n </div>\n</div>\n```\n\n```text\n<div class=\"grid grid-cols-2 bg-sky-700\">\n <div class=\"sticky top-0 col-span-1 h-screen bg-blue-500\">\n LEFT COLUMN CONTENT HERE THAT DOESNT MOVE\n </div>\n <div class=\"col-span-1 bg-slate-800\">\n SCROLLY CONTENT HERE\n <div class=\"h-dvh bg-blue-800\">SCROLLY DIV 1</div>\n <div class=\"h-dvh bg-red-500\">SCROLLY DIV 2</div>\n </div>\n</div>\n```\n\n========================================\n\nComments:\n- Thanks for your help. Is there a way to add a navbar to the layout without having the 2 scrollbars? jsfiddle.net/ybo6L1pd/1 The navbar should stick to the top jsfiddle.net/ybo6L1pd/2 and, not to show any scrollbar when there is no need (content in the scrollable container doesn't need to be scrolled) jsfiddle.net/1ts75wu8/1\n- In your example you have a nav outside of an h-screen content block so it makes the window object have scroll bars. There is some rearranging to do, and you need the main element to have flex-col so the navbar stays above the main content area and sidebar. To make the scrollbar not show inside the nested area when content isn't overflowed you need to change overflow-y-scroll to overflow-y-auto and make sure you move the overflow hidden up to the top of main content area like this (use toggle button to change content length) jsfiddle.net/JHeth/d8vj6ncg/19","metadata":{"transformedAt":"2026-08-18T18:33:42.888Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":2,"totalLines":76,"estimatedTokens":767}}124{"id":"stack-75535246","source":"stackoverflow","questionId":75535246,"title":"Angular mat-form-field not working properly - A border line appears inside the field","tags":["angular","angular-material","tailwind-css"],"text":"Title: Angular mat-form-field not working properly - A border line appears inside the field\nTags: angular, angular-material, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWhile implementing the angular's material library to make form fields and form fields I am getting this unsual ui issue, where when implemented, a line appears in the form field which should not happen.\n\nUI specifications:\n\n- TailwindCSS\n\n- DaisyUI (Component library)\n\n- Angular Material\n\n**Following is the code that I have written:**\n\n```\n\n \n \n Email\n \n \n Email \n \n \n \n Email is required\n \n \n Invalid Email structure\n \n \n \n \n Sign Up\n \n \n\n```\n\n**app.module.ts:**\n\n```\nimports: [\n BrowserModule,\n AppRoutingModule,\n MatIconModule,\n BrowserAnimationsModule,\n MatFormFieldModule,\n MatInputModule,\n FormsModule,\n ReactiveFormsModule,\n ],\n providers: [],\n bootstrap: [AppComponent],\n```\n\n**What is showing:**\nThis the result that is showing, as you can see there is a red line inside the form-field deviding the field into two sections\n\n**What should be showing:**\nThis is the image taken from official docs. As you can see that there is no inner line inside the form-field\n\n========================================\n\nTop Answer:\nTailwindcss conflicts with Angular Material css class `mdc-notched-outline__notch`. `border-style: solid` rule is defined in Tailwindcss base.css file. You can solve this problem by overriding the Tailwindcss `border-style: solid`.\n\n========================================\n\nCode:\n```text\n<form\n [formGroup]=\"UserSignUp\"\n (ngSubmit)=\"submitForm()\"\n id=\"sign-in-form\"\n onsubmit=\"return false\"\n novalidate\n >\n <div class=\"form-control w-full\">\n <label class=\"label\">\n <span class=\"label-text font-semibold text-lg\">Email</span>\n </label>\n <mat-form-field appearance=\"outline\">\n <mat-label> Email </mat-label>\n <input\n formControlName=\"email\"\n placeholder=\"Enter your email...\"\n [(ngModel)]=\"obj.email\"\n matInput\n />\n </mat-form-field>\n <mat-error\n class=\"mt-1\"\n *ngIf=\"isSubmitted && errorControl['email'].errors?.['required']\"\n >\n Email is required\n </mat-error>\n <mat-error\n class=\"mt-1\"\n *ngIf=\"isSubmitted && errorControl['email'].errors?.['pattern']\"\n >\n Invalid Email structure\n </mat-error>\n </div>\n <a routerLink=\"/dashboard\">\n <button class=\"bg-primary text-white py-3 w-full rounded-lg\">\n Sign Up\n </button>\n </a>\n</form>\n```\n\n```text\nimports: [\n BrowserModule,\n AppRoutingModule,\n MatIconModule,\n BrowserAnimationsModule,\n MatFormFieldModule,\n MatInputModule,\n FormsModule,\n ReactiveFormsModule,\n ],\n providers: [],\n bootstrap: [AppComponent],\n```\n\n```text\n.mdc-notched-outline__notch\n{\n border-right: none;\n}\n```\n\n```text\n::ng-deep .mdc-notched-outline__notch {\n border-right: none !important;\n}\n```\n\n```text\nmdc-notched-outline__notch\n```\n\n```text\nborder-style: solid\n```\n\n```text\nborder-style: solid\n```\n\n```text\n@tailwind base\n@tailwind components\n@tailwind utilities\n\n@layer base\n *, ::before, ::after\n border-style: none\n```\n\n========================================\n\nComments:\n- Are you using tailwindcss? See more recent comments under Mr.Sharp's solution.\n- that's right @AdamCox, I use tailwind css and angular material. Thanks for letting me know about other recent comment discussions. I've read the discussion on Github, really explain what happened\n- Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you edit your answer to include an explanation of what you're doing** and why you believe it is the best approach?\n- Consider github.com/tailwindlabs/tailwindcss/discussions/9993","metadata":{"transformedAt":"2026-08-18T18:33:42.888Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":172,"estimatedTokens":1041}}125{"id":"stack-66801706","source":"stackoverflow","questionId":66801706,"title":"Use Sveltekit and Tailwind CSS","tags":["svelte","tailwind-css","svelte-3","sveltekit"],"text":"Title: Use Sveltekit and Tailwind CSS\nTags: svelte, tailwind-css, svelte-3, sveltekit\nSource: Stack Overflow\n\nQuestion:\nSveltekit is finally in public beta. Does anyone know how to use it with Tailwind CSS? There aren't any official docs for this integration.\n\n========================================\n\nTop Answer:\nLuckily, setting up Tailwind CSS in Sveltekit is easy.\n\n### 1. Install Sveltekit\n\nIf you don't have a Sveltekit project already, now's the time to create one.\n\n```\nnpm init svelte@next\nnpm install\n```\n\n### 2. Install Tailwind CSS\n\nAssuming you already have Svelte\n\n```\nnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\nIf you want to use just in type compilation for Tailwind, install that, too.\n\n```\nnpm install -D @tailwindcss/jit\n```\n\n### 3. Run Tailwind setup\n\n```\nnpx tailwindcss init -p\n```\n\nNext, change the created `tailwind.config.js` to a commonjs module by renaming it to `tailwind.config.cjs`. You just need to change the extension to `cjs`.\n\nThen, inside the config, setup which pages/components to purge from.\n\n```\n// tailwind.config.cjs\nmodule.exports = {\n purge: ['src/app.html', 'src/**/*.svelte'],\n...\n}\n```\n\n### 4. Create styles.css\n\nCreate a `styles.css` file in the src folder.\n\n```\n// ./src/style.css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nNow, create a layout component to import the styles from.\n\n```\n// ./src/routes/$layout.svelte\n\n import '../style.css';\n\n```\n\n### 5. Connect Sveltekit with Tailwind\n\nThis is the final step.\n\nIn your `svelte.config.cjs` file, add postcss as a preprocessor.\n\n```\n// svelte.config.cjs\nmodule.exports = {\n // add this\n preprocess: sveltePreprocess({\n postcss: true,\n defaults: {\n style: 'postcss',\n },\n }),\n}\n```\n\nAnd create a `postcss.config.cjs` file in the root of the project.\n\n```\n// postcss.config.cjs\nmodule.exports = {\n plugins: {\n 'tailwindcss': {},\n autoprefixer: {},\n },\n};\n```\n\n*If you're using `@tailwindcss/jit`, replace `tailwindcss` above with `@tailwindcss/jit`.*\n\nThat's it! You're now ready to use Sveltekit and Tailwind CSS.\n\n*P.S. Credit goes to Matt Lehrer for writing a great blog post on the subject.*\n\n========================================\n\nCode:\n```text\nnpm init svelte@next\n```\n\n```text\nnpx svelte-add tailwindcss # --jit\n```\n\n```text\nnpm init svelte@next\nnpm install\n```\n\n```text\nnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\n```text\nnpm install -D @tailwindcss/jit\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n```text\n// tailwind.config.cjs\nmodule.exports = {\n purge: ['src/app.html', 'src/**/*.svelte'],\n...\n}\n```\n\n```css\n// ./src/style.css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n// ./src/routes/$layout.svelte\n<script>\n import '../style.css';\n</script>\n```\n\n```js\n// svelte.config.cjs\nmodule.exports = {\n // add this\n preprocess: sveltePreprocess({\n postcss: true,\n defaults: {\n style: 'postcss',\n },\n }),\n}\n```\n\n```js\n// postcss.config.cjs\nmodule.exports = {\n plugins: {\n 'tailwindcss': {},\n autoprefixer: {},\n },\n};\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.cjs\n```\n\n```text\ncjs\n```\n\n```text\nstyles.css\n```\n\n```text\nsvelte.config.cjs\n```\n\n```text\npostcss.config.cjs\n```\n\n```text\n@tailwindcss/jit\n```\n\n```text\ntailwindcss\n```\n\n```text\n@tailwindcss/jit\n```\n\n========================================\n\nComments:\n- almost too easy! Seriously though, very nice! was excited to see a similar adder for Bulma.io\n- Just a note there's currently a bug with it: github.com/svelte-add/tailwindcss/issues/…","metadata":{"transformedAt":"2026-08-18T18:33:42.888Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":224,"estimatedTokens":901}}126{"id":"stack-75496331","source":"stackoverflow","questionId":75496331,"title":"Tailwind CSS checkbox styles are not working","tags":["html","checkbox","next.js","jsx","tailwind-css"],"text":"Title: Tailwind CSS checkbox styles are not working\nTags: html, checkbox, next.js, jsx, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a checkbox in my Next.js project and after adding some Tailwind utility classes nothing takes effect except changes to width, height and cursor. Color, bg, border, etc. don't work.\n\n```\n\n \n \n \n\n### Filter 1\n\n \n \n \n \n Subfilter 1\n \n\n \n \n \n \n \n```\n\n`cursor-pointer`, `h-8` and `w-8` are the only utility classes that are working in the checkbox. `color` still defaults to blue, there's no ring appearing on focus, and `bg` still white.\n\nOthers elements in the example code like `p`, `div` and `h1` are working perfectly.\n\n========================================\n\nTop Answer:\nThe key here is appearance CSS property - set it to `none` to kinda reset default browser styling\n\nThe appearance CSS property is used to control native appearance of UI controls, that are based on operating system's theme\n\nIn Tailwind it is `appearance-none` utility\n\nUse appearance-none to reset any browser specific styling on an element.\n\n```\n\n```\n\nDEMO\n\n========================================\n\nCode:\n```text\n<div className=\"flex py-4 m-auto w-2/3 justify-between items-start\">\n <div className=\"w-1/7\">\n <div className=\"border-b pb-4\">\n <h1 className=\"mb-2 font-medium\">Filter 1</h1>\n <label htmlFor=\"c1\">\n <div className=\"flex group active:ring-2 ring-black rounded\">\n <input\n id=\"c1\"\n type=\"checkbox\"\n className=\"rounded-full h-8 w-8 cursor-pointer bg-red-100 border-red-300 text-red-600 focus:ring-red-200\"\n />\n <p className=\"pl-2 text-reg cursor-pointer group-hover:underline decoration-solid\">\n Subfilter 1\n </p>\n </div>\n </label>\n </div>\n </div>\n </div>\n```\n\n```text\ncursor-pointer\n```\n\n```text\nh-8\n```\n\n```text\nw-8\n```\n\n```text\ncolor\n```\n\n```text\nbg\n```\n\n```text\np\n```\n\n```text\ndiv\n```\n\n```text\nh1\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n // ...\n },\n },\n plugins: [require(\"@tailwindcss/forms\")],\n};\n```\n\n```text\ntailwindcss/forms\n```\n\n```text\nconfig\n```\n\n```html\n<input\n type=\"checkbox\"\n class=\"appearance-none ...\"\n/>\n```\n\n```text\nnone\n```\n\n```text\nappearance-none\n```\n\n```text\naccent-color\n```\n\n```text\n<input type=\"checkbox\" class=\"accent-pink-500\" checked>\n```\n\n```css\n/* checkbox.css */\n\ninput[type=\"checkbox\"] {\n @apply relative bg-none;\n\n &::after {\n content: '';\n @apply block w-full h-full z-10\n scale-0 opacity-0 transition-all duration-400 ease-in-out\n absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2\n bg-current pointer-events-none;\n\n mask-size: 120%;\n mask-position: center;\n mask-repeat: no-repeat;\n mask-image: url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\");\n }\n\n &:checked::after {\n @apply opacity-100 scale-100 transition-all duration-400 ease-in-out pointer-events-none;\n }\n}\n```\n\n```js\n<input\n checked={true} \n type=\"checkbox\"\n className=\"w-5 h-5\n bg-zinc-900 checked:bg-sky-500 disabled:bg-zinc-700 after:bg-transparent\n checked:after:text-sky-950 disabled:after:text-zinc-500\"\n/>\n```\n\n```css\n.checked\\:after\\:text-sky-950 {\n &:checked {\n &::after {\n content: var(--tw-content);\n color: var(--color-sky-950) /* oklch(0.293 0.066 243.157) = #052f4a */;\n }\n }\n}\n```\n\n```text\n@tailwindcss/form\n```\n\n```text\nimg-src 'self' data:;\n```\n\n```text\nchecked:after:text-sky-950\n```\n\n========================================\n\nComments:\n- thank you very much! I'm new with Tailwind and I didn't know that I needed to install forms to style some basic html elements, hope this doesn't change others styles in my application but al least the checkboxes are customizable now\n- Happy it worked for you :) You can view all the form elements that are added with the plugin: github.com/tailwindlabs/tailwindcss-forms#basic-usage\n- Thanks for sharing this solution, it can be very useful and I didn't even know about it. I'm still giving a chance to tailwind forms in order to use some of its utilities but this simple solution that doesn't affect the rest of the code is something that I will definitely take into account.\n- my unchecked boxes still have white as a background\n- @bilogic Make sure you are using dark variants if you have any theming functionality. Also a reproducible code snippet.","metadata":{"transformedAt":"2026-08-18T18:33:42.889Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":23,"totalLines":215,"estimatedTokens":1182}}127{"id":"stack-75328959","source":"stackoverflow","questionId":75328959,"title":"Tailwind CSS: change parent label style when a child checkbox is checked","tags":["css","reactjs","tailwind-css"],"text":"Title: Tailwind CSS: change parent label style when a child checkbox is checked\nTags: css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to add a border to my checkbox container when the checkbox is checked.\n\nCurrently, I have this:\n\n```\n\n \n Check me\n\n```\n\nI want something like the below:\n\nHowever, I am unable to change the label styles when I put my input inside the label.\n\n========================================\n\nTop Answer:\nFirst off, it's important to remember that the `peer` functionality in tailwind doesn't target parents (which is what you currently have). You can only target elements that are next to one another.\n\nAdditionally, because of how the CSS `:peer` combinator works you can only target *previous* components, meaning the checkbox MUST come before the peer who's state you want to affect when the checkbox is checked.\n\n```\n\n \n \n Check me\n\n```\n\nHere's an example that works using pure tailwind/css, assuming you don't want to handle the state in your react component, as per @Vikesir's comment (though that was my first thought as well and it's a good idea).\n\nYou'll notice I'm fudging in an empty div and using that to simulate the background and border changing. I also wrapped the label text in a span to make sure I could change it's z-index so that both the checkbox and the text were visible above the div that handles the state change.\n\n**EDIT:**\n\nHere is a version using a pseudo-element built off of the span holding the label text if you don't want the empty `div` in your code:\n\n```\n\n \n Check me\n\n```\n\n========================================\n\nCode:\n```html\n<label\n htmlFor=\"choose-me\"\n className=\n 'flex w-fit items-center justify-evely p-3 border-2 border-grey-4 text-grey-8 \n peer-checked:bg-light-indigo peer-checked:text-medium-indigo peer-checked:border-medium-indigo'>\n <input type=\"checkbox\" id=\"choose-me\" className=\"peer mr-3 \" />\n Check me\n</label>\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n .checkbox-label:has(input:checked) {\n @apply border-blue-800 bg-blue-400 text-blue-800;\n }\n}\n```\n\n```html\n<label className=\"checkbox-label justify-evely border-grey-4 text-grey-8 flex w-fit items-center gap-x-2 border-2 p-3\">\n <input type=\"checkbox\" id=\"choose-me\" />\n Check me\n</label>\n```\n\n```text\n:has\n```\n\n```text\n:has\n```\n\n```text\nconst [isactive,setActive] = useState(false)\n```\n\n```text\n<label\n onClick={()=>setActive(isactive?false:true)}\n className= {`${isactive?'active-style':'normal-style'} extra-style-classes`}\n>\n <input type=\"checkbox\" id=\"choose-me\" className= {`${isactive?'active-style':'normal-style'} extra-style-classes`} />\n Check me\n</label>\n```\n\n```html\n<label\n htmlFor=\"choose-me\"\n class=\n 'flex w-fit items-center justify-evely p-3 text-grey-8 relative'\n>\n <input type=\"checkbox\" id=\"choose-me\" class=\"peer mr-3 relative z-10\" />\n <div class=\"absolute inset-0 border-2 border-grey-4 peer-checked:bg-indigo-200 peer-checked:text-indigo-800 peer-checked:border-indigo-800 peer-checked:block z-0\"></div>\n <span class=\"relative z-10\">Check me</span>\n</label>\n```\n\n```text\n<label\n htmlFor=\"choose-me\"\n class=\n 'flex w-fit items-center justify-evely text-grey-8 relative'\n>\n <input type=\"checkbox\" id=\"choose-me\" class=\"peer mr-3 absolute left-2.5 z-20\" />\n <span class=\"relative z-10 inset-0 py-3 pr-3 pl-8 before:-z-10 before:content-[''] before:absolute before:inset-0 before:h-full before:w-full before:border-2 before:border-grey-4 peer-checked:before:bg-indigo-200 peer-checked:before:text-indigo-800 peer-checked:before:border-indigo-800 peer-checked:before:block\">Check me</span>\n</label>\n```\n\n```text\npeer\n```\n\n```text\n:peer\n```\n\n```text\ndiv\n```\n\n```text\nSTEP 1: Update checkbox-label in the label tag\n <label className=\"checkbox-label\">\n \n STEP 2: add below code in index.css file\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n @layer components {\n .checkbox-label:has(input:checked) {\n @apply text-gray-700;\n }\n }\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n theme: {\n extend: {},\n },\n plugins: [\n function({ addVariant }) {\n addVariant('child-checked', '&:has(> input:checked)');\n }\n ],\n}\n```\n\n```html\n<div className=\"child-checked:bg-red\">\n <input type=\"radio\" checked />\n</div>\n```\n\n========================================\n\nComments:\n- Does this answer your question? Is there a CSS parent selector?\n- Handle it using useState\n- `has()` is now fully supported in Firefox, as well as all other major browsers.\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.889Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":183,"estimatedTokens":1208}}128{"id":"stack-70907369","source":"stackoverflow","questionId":70907369,"title":"Color classes of Tailwind CSS not working when appended","tags":["javascript","html","css","tailwind-css","tailwind-in-js"],"text":"Title: Color classes of Tailwind CSS not working when appended\nTags: javascript, html, css, tailwind-css, tailwind-in-js\nSource: Stack Overflow\n\nQuestion:\nThere is a login page that is built with Tailwind CSS v3, all the styles for nice and fine. But on the login page, I want to have timer alerts that will display if any error occurs like invalid email, email already in use like that way.\n\nWhat is done:\nSo I created a `` in the login page just above the submit button which will be empty by default, whenever an error occurs, js creates an element and appends it to the div present with Tailwind CSS classes in it.\n\nBut the problem is, classes like padding, margin, text size and all work fine, but text-color, bg-color classes do not work.\nCode:-\n\n```\nparentElement = document.querySelector(\"#su-error-container\");\nalertMainDiv = document.createElement(\"div\");\nalertSpan = document.createElement(\"span\");\nalertMainDiv.className = \"mb-10 bg-red-500\";\nalertSpan.className = \"font-medium\";\ntitleTextNode = document.createTextNode(title);\nmessageTextNode = document.createTextNode(message);\nalertSpan.appendChild(titleTextNode);\nalertMainDiv.appendChild(alertSpan);\nalertMainDiv.appendChild(messageTextNode);\nparentElement.appendChild(alertMainDiv);\n```\n\nElement copied from Dev Tools Chrome:\n\n```\nSign Up Error: Invalid Email Address\n```\n\nOther classes work, but colour classes, comment if any extra info is needed!\n\ntailwind.config.js\n\n```\nmodule.exports = {\n content: [\"./*.html\", \"./assets/**/*.js\"],\n \n theme: {\n screens: {\n sm: \"540px\",\n // => @media (min-width: 576px) { ... }\n md: \"720px\",\n // => @media (min-width: 768px) { ... }\n\n lg: \"960px\",\n // => @media (min-width: 992px) { ... }\n\n xl: \"1140px\",\n // => @media (min-width: 1200px) { ... }\n\n \"2xl\": \"1320px\",\n // => @media (min-width: 1400px) { ... }\n },\n container: {\n center: true,\n padding: \"16px\",\n },\n extend: {\n colors: {\n black: \"#212b36\",\n dark: \"#090E34\",\n \"dark-700\": \"#090e34b3\",\n primary: \"#3056D3\",\n secondary: \"#13C296\",\n \"body-color\": \"#637381\",\n warning: \"#FBBF24\",\n },\n boxShadow: {\n input: \"0px 7px 20px rgba(0, 0, 0, 0.03)\",\n pricing: \"0px 39px 23px -27px rgba(0, 0, 0, 0.04)\",\n \"switch-1\": \"0px 0px 5px rgba(0, 0, 0, 0.15)\",\n testimonial: \"0px 60px 120px -20px #EBEFFD\",\n },\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n========================================\n\nTop Answer:\nAs Sohel Shekh said the problem is that Tailwind scan HTML and load only present classes\n\nYes, you can create hidden `div` and add necessary classes there to force load, but I solve this issue by changing of `tailwind.config.js`\n\nIn my project I use different alerts: warning, failure and success. For this purpose I use different colors\n\nFinally I've added such config\n\n```\nmodule.exports = {\n //\n safelist: [\n 'bg-amber-700',\n 'bg-emerald-700',\n 'bg-red-700',\n ],\n //\n}\n```\n\nAfter that I can dynamically add classes with JS\n\nIt is also possible to use Regexp such way\n\n```\nmodule.exports = {\n //\n safelist: [\n {\n pattern: /bg-(amber|emerald|red)-700/,\n }\n ],\n //\n}\n```\n\nPlease read more about safelist\n\nHope this helps you\n\n========================================\n\nCode:\n```text\nparentElement = document.querySelector(\"#su-error-container\");\nalertMainDiv = document.createElement(\"div\");\nalertSpan = document.createElement(\"span\");\nalertMainDiv.className = \"mb-10 bg-red-500\";\nalertSpan.className = \"font-medium\";\ntitleTextNode = document.createTextNode(title);\nmessageTextNode = document.createTextNode(message);\nalertSpan.appendChild(titleTextNode);\nalertMainDiv.appendChild(alertSpan);\nalertMainDiv.appendChild(messageTextNode);\nparentElement.appendChild(alertMainDiv);\n```\n\n```text\n<div class=\"mb-10 bg-red-500\"><span>Sign Up Error: </span>Invalid Email Address</div>\n```\n\n```text\nmodule.exports = {\n content: [\"./*.html\", \"./assets/**/*.js\"],\n \n theme: {\n screens: {\n sm: \"540px\",\n // => @media (min-width: 576px) { ... }\n md: \"720px\",\n // => @media (min-width: 768px) { ... }\n\n lg: \"960px\",\n // => @media (min-width: 992px) { ... }\n\n xl: \"1140px\",\n // => @media (min-width: 1200px) { ... }\n\n \"2xl\": \"1320px\",\n // => @media (min-width: 1400px) { ... }\n },\n container: {\n center: true,\n padding: \"16px\",\n },\n extend: {\n colors: {\n black: \"#212b36\",\n dark: \"#090E34\",\n \"dark-700\": \"#090e34b3\",\n primary: \"#3056D3\",\n secondary: \"#13C296\",\n \"body-color\": \"#637381\",\n warning: \"#FBBF24\",\n },\n boxShadow: {\n input: \"0px 7px 20px rgba(0, 0, 0, 0.03)\",\n pricing: \"0px 39px 23px -27px rgba(0, 0, 0, 0.04)\",\n \"switch-1\": \"0px 0px 5px rgba(0, 0, 0, 0.15)\",\n testimonial: \"0px 60px 120px -20px #EBEFFD\",\n },\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\n<div id=\"su-error-container\">\n```\n\n```text\nbg-red-300\n```\n\n```text\ntext-red-500\n```\n\n```js\nalertMainDiv.className += \"mb-10 bg-red-500\";\n```\n\n```js\nalertSpan.class = \"font-medium\";\n```\n\n```js\nalertMainDiv.className = \"mb-10 bg-red-500\";\nalertSpan.className = \"font-medium\";\n```\n\n```text\n=\n```\n\n```text\n+=\n```\n\n```text\nclassName\n```\n\n```js\nmodule.exports = {\n //\n safelist: [\n 'bg-amber-700',\n 'bg-emerald-700',\n 'bg-red-700',\n ],\n //\n}\n```\n\n```text\nmodule.exports = {\n //\n safelist: [\n {\n pattern: /bg-(amber|emerald|red)-700/,\n }\n ],\n //\n}\n```\n\n```text\ndiv\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmodule.exports = {\n content: [\"./views/**/*.ejs\"],\n textColor: [{white: #fff, black: #000}],\n theme: {\n extend: {\n colors: {}\n }\n},\nvariants: {},\nplugins: [\n require(\"tailwindcss\"),\n]};\n```\n\n```text\nmodule.exports = {\n content: [\"./views/**/*.ejs\"],\n theme: {\n extend: {\n colors: {}\n }\n},\nvariants: {},\nplugins: [\n require(\"tailwindcss\"),\n]};\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- I corrected the assignment problem, classes like mb-10, font-medium worked but bg-red-500 or text-green-500 (Color Classes) didn't worked at all. Is this something problem because appending element through js and tailwind not able to apply the color classes, clueless about the problem.\n- And for alertSpan it was a typo, updated that in the code, but the color class still not working\n- when using += space between classes are not added. hence it wont work.\n- this was the right answer\n- I came across this issue with all the `w-[]` classes. But the problem is that my project can use arbitrary values. How do I account for that?\n- @Crypto it is possible to use regexp and safelist config. Please see my answer\n- I hate with a passion that the workaround here is to create a hidden div. There has to be a way to force TW to preload specific colors. Edit: ahh, I see mechnicov's answer about `safelist`!","metadata":{"transformedAt":"2026-08-18T18:33:42.889Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":311,"estimatedTokens":1708}}129{"id":"stack-70885944","source":"stackoverflow","questionId":70885944,"title":"Nuxt 3 app with tailwind css how to edit the main body element?","tags":["vuejs3","tailwind-css","nuxt3.js"],"text":"Title: Nuxt 3 app with tailwind css how to edit the main body element?\nTags: vuejs3, tailwind-css, nuxt3.js\nSource: Stack Overflow\n\nQuestion:\nI am learning VueJS with the help of NuxtJS and Tailwindcss for a hobby project.\nSince tailwindcss makes it really easy to edit for darkmode i ran in to a problem on the safari browser.\n\nWhenever you scroll or drag the browser in darkmode down or up, you always see a white background. This is the body and i cannot change it.\n\nWhat i have tried is to add Body tag in to my main app VueJS file where i combine my components to build the page. But this results in a Body tag inside the Main app Div.\nThat would mean that i have two body tags like this\n\n```\n -> Main body from the Nuxt app\n -> div to wrap components in\n -> Body that i added in the main Vue app file (its double)\n\n```\n\nIf i look at the website of tailwind and inspect the website i see that there website uses the Tailwindcss classes on they main Body element.\n\n**My question is where is this placed? or how can i access it.**\n\n========================================\n\nTop Answer:\nIf you wish to apply this change globally, inside `.nuxt.config.ts` you can add:\n\n```\nexport default defineNuxtConfig({\n //.. other fields\n app: {\n head: {\n bodyAttrs: {\n class: 'bg-gray-100',\n },\n },\n },\n})\n```\n\nhttps://nuxt.com/docs/getting-started/seo-meta\n\n========================================\n\nCode:\n```text\n<body> -> Main body from the Nuxt app\n<Div> -> div to wrap components in\n<body> -> Body that i added in the main Vue app file (its double)\n</body>\n</div>\n</body>\n```\n\n```text\nexport default {\n setup () {\n useMeta({\n bodyAttrs: {\n class: 'dark:some-tailwind-class...'\n }\n })\n }\n}\n```\n\n```text\nsetup\n```\n\n```js\nexport default defineNuxtConfig({\n //.. other fields\n app: {\n head: {\n bodyAttrs: {\n class: 'bg-gray-100',\n },\n },\n },\n})\n```\n\n```text\n.nuxt.config.ts\n```\n\n```text\nconst colorMode = useColorMode();\n\nuseHead({\n bodyAttrs: {\n class: [\n isScrolled.value ? \"\" : \"banner-in-viewport\",\n colorMode.value === \"dark\" ? \"theme-dark\" : \"theme-light\",\n ].join(\" \"),\n },\n});\n```\n\n```text\nexport default defineNuxtConfig({\n app: {\n head: {\n bodyAttrs: {\n id: 'your-body-id', // Replace with your desired ID\n }\n }\n }\n})\n```\n\n```text\nnuxt.config.ts\n```\n\n========================================\n\nComments:\n- `useMeta` is deprecated as of today, use `useHead` instead.","metadata":{"transformedAt":"2026-08-18T18:33:42.889Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":122,"estimatedTokens":616}}130{"id":"stack-72919826","source":"stackoverflow","questionId":72919826,"title":"how to use tailwind with bun","tags":["reactjs","tailwind-css","bun"],"text":"Title: how to use tailwind with bun\nTags: reactjs, tailwind-css, bun\nSource: Stack Overflow\n\nQuestion:\nI'm creating a react app using bun.sh.\n\nBut I also use tailwindcss for styling and tailwind has no official solution for bun. How can use these two together?\n\nI know bun is not ready for production but I'm still looking for a solution if its possible.\n\n========================================\n\nTop Answer:\nTo use Tailwind with bun, use the Tailwind CLI and import the processed .css file. Learn more: https://tailwindcss.com/docs/installation\n\n```\nnpx tailwindcss -i ./src/input.css -o ./dist/output.css --watch\n```\n\nor\n\n```\nbun tailwindcss -i ./src/input.css -o ./dist/output.css --watch\nbun run tailwindcss -i ./src/input.css -o ./dist/output.css --watch\n```\n\nUse that output.css in your main file and done!\n\n========================================\n\nCode:\n```text\nbun run\n```\n\n```text\nbun add -d tailwindcss\n```\n\n```text\nbun run tailwindcss init\n```\n\n```text\nnpx tailwindcss -i ./src/input.css -o ./dist/output.css --watch\n```\n\n```text\nbun tailwindcss -i ./src/input.css -o ./dist/output.css --watch\nbun run tailwindcss -i ./src/input.css -o ./dist/output.css --watch\n```\n\n```text\nimport type { BunPlugin } from 'bun';\nimport postcss from 'postcss';\nimport tailwindcss from '@tailwindcss/postcss';\n\nconst styleFilter = /.\\.(css)$/;\n\nexport const cssPlugin: BunPlugin = {\n name: 'CSS Loader',\n setup(build) {\n build.onLoad({ filter: styleFilter }, async (args) => {\n const css = await Bun.file(args.path).text();\n const result = await postcss([tailwindcss]).process(css, { from: args.path });\n\n return {\n contents: result.css,\n loader: 'text',\n };\n });\n },\n};\n```\n\n========================================\n\nComments:\n- in cra, it is compiled automatically, is that possible with bun without any effort?\n- @TayfunErbilen with a plugin, yes.","metadata":{"transformedAt":"2026-08-18T18:33:42.889Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":81,"estimatedTokens":472}}131{"id":"stack-70049558","source":"stackoverflow","questionId":70049558,"title":"How to start react app on custom port with CRACO?","tags":["css","reactjs","create-react-app","tailwind-css","craco"],"text":"Title: How to start react app on custom port with CRACO?\nTags: css, reactjs, create-react-app, tailwind-css, craco\nSource: Stack Overflow\n\nQuestion:\nI want to use Tailwind CSS for my react apps. The problem is `CRACO start` starts the app on the default port, which is 3000 and I want to have custom ports but I can't figure out what is the right approach. ( Can't find anything about this in their documentation )\n\nI tried something like `PORT=5000 CRACO start` inside the `scripts` field of the `package.json` file but doesn't work.\nAny idea?\n\n========================================\n\nTop Answer:\nThe accepted answer contains links to the relevant information, but in case they become invalid or you are too lazy to look at them here is the config you need to add to your `craco.config.js` file.\n\n```\nmodule.exports = {\n devServer: {\n port: 5000\n }\n}\n```\n\nNote that devServer is a top level property in the config.\n\n========================================\n\nCode:\n```text\nCRACO start\n```\n\n```text\nPORT=5000 CRACO start\n```\n\n```text\nscripts\n```\n\n```text\npackage.json\n```\n\n```text\ndevServer\n```\n\n```js\nmodule.exports = {\n devServer: {\n port: 5000\n }\n}\n```\n\n```text\ncraco.config.js\n```\n\n========================================\n\nComments:\n- Any quick explanations as to why devServer is top-level instead of under `webpack: config`?\n- craco.js.org/docs/configuration/devserver","metadata":{"transformedAt":"2026-08-18T18:33:42.889Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":65,"estimatedTokens":346}}132{"id":"stack-68083319","source":"stackoverflow","questionId":68083319,"title":"Tailwind CSS - How to make content height fit to screen","tags":["html","css","flexbox","tailwind-css"],"text":"Title: Tailwind CSS - How to make content height fit to screen\nTags: html, css, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm working on an admin dashboard with tailwind css. I want to make the height of Nav and Content fit to the screen.\n\nI know this will do the trick `relative flex min-h-screen` but by doing so I'm getting the scroll bar because of the height of App Bar.\n\nHow can I make the content height 100% without getting the scroll bar?\n\nMinus App Bar height somehow ?\n\n```\n<>\n \n App Bar\n \n \n \n Navbar\n \n \n Content will go here\n \n \n\n```\n\n========================================\n\nTop Answer:\nTry this, for the responsive app :)\n\nDemo here. :)\n\n```\n\n App Bar\n \n Navbar\n \n Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat.\n \n \n\n```\n\nHappy coding :)\n\n========================================\n\nCode:\n```text\n<>\n <div className='bg-blue-700 px-8 flex items-center justify-between py-4 shadow-sm text-white'>\n App Bar\n </div>\n <div className='relative flex'>\n <nav className='bg-white shadow-sm p-6 space-y-6 w-64'>\n Navbar\n </nav>\n <main className='bg-gray-100 flex-1 p-6'>\n Content will go here\n </main>\n </div>\n</>\n```\n\n```text\nrelative flex min-h-screen\n```\n\n```text\n<div class=\"min-h-screen flex flex-col\">\n <div class='bg-blue-700 px-8 flex items-center justify-between py-4 shadow-sm text-white'> App Bar </div>\n <div class='relative flex flex-grow'>\n <nav class='bg-white shadow-sm p-6 space-y-6 w-64'> Navbar </nav>\n <main class='bg-gray-100 flex-1 p-6'> Content will go here </main>\n </div>\n</div>\n```\n\n```text\nmin-h-screen flex flex-col\n```\n\n```text\nflex-grow\n```\n\n```text\n<div class=\"flex flex-col w-full min-h-screen overflow-x-hidden\">\n <div class=\"bg-blue-700 px-6 items-center justify-between py-4 shadow-sm text-white\">App Bar</div>\n <div class=\"flex flex-col sm:flex-row\">\n <nav class=\"w-full sm:w-1/6 bg-white shadow-sm p-6 space-y-6\">Navbar</nav>\n <main class=\"flex bg-gray-100 w-full h-auto p-6\">\n Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat.</div>\n </main>\n </div>\n</div>\n```\n\n========================================\n\nComments:\n- Thanks for your help. can you please any good resource to learn more about flexbox?\n- My favorite is flexboxfroggy.com or these Tailwind layouts using flexbox\n- you're a legend, I'll pray to you every night. you are my new God.\n- there are also css units that deal with this viewport conundrum: `svh`, `lvh`, and `dvh`. They are the smallest viewport, largest, and dynamic viewport units, respectively, made to deal with the app bar and such. In tailwind, you can use `h-dvh` to set the height to the dynamic viewport size, meaning it will be the height of the small viewport on load, and when scrolling will fill the large viewport once the bar goes away\n- thanks for your efforts. by default Navbar is hidden on phones. I've added a menu icon in the app bar for phones. you can toggle the Navbar by clicking it.","metadata":{"transformedAt":"2026-08-18T18:33:42.889Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":111,"estimatedTokens":759}}133{"id":"stack-67446381","source":"stackoverflow","questionId":67446381,"title":"How in tailwindcss table hide column on small devices?","tags":["tailwind-css"],"text":"Title: How in tailwindcss table hide column on small devices?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWith tailwindcss 2 I want to hide some columns in the table on small devices using `sm:hidden`:\n\n```\n\n \n \n Name\n Active\n Type\n Category\n Mailchimp Id\n \n \n \n \n\n \n \n Name content\n \n \n Active content\n \n \n Typecontent\n \n\n \n Category content\n \n\n \n mailchimp content\n \n```\n\nI expected that on devices 640px and smaller 2 columns would be hidden, but failed.\n\nWhich syntax is correct?\n\nThanks\n\n========================================\n\nTop Answer:\nas a more general answer, not regarding table cells, another display type can be chosen to overwrite hidden.\n\nhttps://tailwindcss.com/docs/display\n\nexample:\n\n```\nOnly visible on larger than lg\n\n```\n\n========================================\n\nCode:\n```html\n<table class=\"table-auto\">\n <thead class=\"bg-gray-700 border-b-2 border-t-2 border-gray-300\">\n <tr>\n <th class=\"py-2\">Name</th>\n <th class=\"py-2\">Active</th>\n <th class=\"py-2\">Type</th>\n <th class=\"py-2 sm:hidden\">Category</th>\n <th class=\"py-2 sm:hidden\">Mailchimp Id</th>\n <th class=\"py-2\"></th>\n </tr>\n </thead>\n <tbody>\n\n <tr>\n <td class=\"\">\n Name content\n </td>\n <td class=\"\">\n Active content\n </td>\n <td class=\"\">\n Typecontent\n </td>\n\n <td class=\" sm:hidden\">\n Category content\n </td>\n\n <td class=\"sm:hidden\">\n mailchimp content\n </td>\n```\n\n```text\nsm:hidden\n```\n\n```text\nhidden\n```\n\n```text\nsm\n```\n\n```text\nmd\n```\n\n```text\nlg\n```\n\n```text\nxl\n```\n\n```text\n2xl\n```\n\n```text\nsm:hidden\n```\n\n```text\nhidden md:table-cell\n```\n\n```text\nsm\n```\n\n```html\n<table class=\"whitespace-nowrap\">\n <thead>\n <tr>\n <th>Name</th>\n <th>Active</th>\n <th class=\"hidden md:table-cell\">Type</th>\n <th class=\"hidden md:table-cell\">Category</th>\n <th class=\"hidden lg:table-cell\">Mailchip</th>\n <th class=\"hidden lg:table-cell\">other</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Name content</td>\n <td>Active content</td>\n <td class=\"hidden md:table-cell\">Type content only in md</td>\n <td class=\"hidden md:table-cell\">Category content only in md</td>\n <td class=\"hidden lg:table-cell\">Mailchip content only in lg</td>\n <td class=\"hidden lg:table-cell\">other content only in lg</td>\n </tr>\n </tbody>\n</table>\n```\n\n```text\nsm:\n```\n\n```text\nmd:\n```\n\n```text\nlg:\n```\n\n```text\nxl:\n```\n\n```text\n2xl:\n```\n\n```html\n<p class=\"hidden lg:flex\">Only visible on larger than lg</p>\n```\n\n```html\n<div class=\"max-md:hidden\">\nOnly show on screens larger than md size\n</div>\n// OR\n<div class=\"max-xl:collapse\">\nOnly show on screens larger than XL\n</div>\n```\n\n```text\nmobile first\n```\n\n========================================\n\nComments:\n- Thanks! But after some testing looks like I need \"hidden md:table-cell\". Looks like table uses \"table-cell\" ?\n- Right, I just realize it's a table. I have updated my answer. Could you mark the answer as answered please.","metadata":{"transformedAt":"2026-08-18T18:33:42.889Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":206,"estimatedTokens":758}}134{"id":"stack-74728073","source":"stackoverflow","questionId":74728073,"title":"VScode Tailwind CSS Intellisense plugin only works when I add a space before class names","tags":["css","reactjs","visual-studio-code","next.js","tailwind-css"],"text":"Title: VScode Tailwind CSS Intellisense plugin only works when I add a space before class names\nTags: css, reactjs, visual-studio-code, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI followed the tailwind installation guide for nextjs\n\nBelow is my `tailwind.config.js` file\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./app/**/*.{js,ts,jsx,tsx}\",\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nBut the intellisense only works when I start my class names with a space.\n\nhttps://i.sstatic.net/S4JTG.gif\n\nBelow is my vscode settings.json file. I thought something there might be causing the bug, but commenting out the entire file does nothing to solve the problem.\n\n```\n{\n \"color-highlight.markerType\": \"dot-before\",\n \"explorer.confirmDelete\": false,\n \"javascript.updateImportsOnFileMove.enabled\": \"always\",\n \"autoprefixer.formatOnSave\": true,\n \"autoprefixer.browsers\": [\n \"last 4 versions\",\n \"ie >= 9\",\n \"> 5%\"\n ],\n \"liveServer.settings.donotShowInfoMsg\": true,\n \"editor.detectIndentation\": false,\n \"editor.tabSize\": 2,\n \"liveServer.settings.donotVerifyTags\": true,\n \"emmet.includeLanguages\": {\n \"javascript\": \"javascriptreact\"\n },\n \"scss.format.newlineBetweenRules\": false,\n \"editor.formatOnSave\": true,\n \"editor.defaultFormatter\": \"dbaeumer.vscode-eslint\",\n \"vetur.format.defaultFormatter.js\": \"prettier-eslint\",\n \"workbench.settings.openDefaultKeybindings\": true,\n \"[typescriptreact]\": {\n \"editor.defaultFormatter\": \"vscode.typescript-language-features\"\n },\n \"window.zoomLevel\": 1,\n}\n```\n\n========================================\n\nTop Answer:\nIn VSCode settings search for: **quick suggestions**\nand turn on strings suggestions\nlike this\n\n========================================\n\nCode:\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./app/**/*.{js,ts,jsx,tsx}\",\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n{\n \"color-highlight.markerType\": \"dot-before\",\n \"explorer.confirmDelete\": false,\n \"javascript.updateImportsOnFileMove.enabled\": \"always\",\n \"autoprefixer.formatOnSave\": true,\n \"autoprefixer.browsers\": [\n \"last 4 versions\",\n \"ie >= 9\",\n \"> 5%\"\n ],\n \"liveServer.settings.donotShowInfoMsg\": true,\n \"editor.detectIndentation\": false,\n \"editor.tabSize\": 2,\n \"liveServer.settings.donotVerifyTags\": true,\n \"emmet.includeLanguages\": {\n \"javascript\": \"javascriptreact\"\n },\n \"scss.format.newlineBetweenRules\": false,\n \"editor.formatOnSave\": true,\n \"editor.defaultFormatter\": \"dbaeumer.vscode-eslint\",\n \"vetur.format.defaultFormatter.js\": \"prettier-eslint\",\n \"workbench.settings.openDefaultKeybindings\": true,\n \"[typescriptreact]\": {\n \"editor.defaultFormatter\": \"vscode.typescript-language-features\"\n },\n \"window.zoomLevel\": 1,\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```json\n{\n \"editor.quickSuggestions\": {\n \"strings\": true\n }\n}\n```\n\n```text\n.vscode/settings.json\n```\n\n```text\n\"editor.quickSuggestions\": {\n \"strings\": true\n }\n```\n\n```text\nctrl + shift + p\n```\n\n========================================\n\nComments:\n- check the property of that particular Eslint in your vscode. There might be some by default has been selected so you have to do it manually.\n- I disabled Eslint to check for this but the problem persists.\n- Same problem here. What I do is `CTRL + Space` to \"activate\" intellisense and then, type\n- I'm on a mac so `CTRL + Space` seems to be `Command + Space` for me which just opens my Spotlight searchbar...why is tailwind so hard to use.\n- Have you tried adding a VSCode config setting for `editor.quickSuggestions` (github.com/tailwindlabs/…)?\n- You can refer to this doc tailwindcss.com/docs/editor-setup and needs to fix your vs code extension config setting.\n- Hi, please note, the accepted answer has this exact code","metadata":{"transformedAt":"2026-08-18T18:33:42.889Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":151,"estimatedTokens":989}}135{"id":"stack-74350677","source":"stackoverflow","questionId":74350677,"title":"hover OR focus in Tailwind CSS","tags":["html","css","tailwind-css"],"text":"Title: hover OR focus in Tailwind CSS\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nSo I want to change the color of the text on `hover` **or** `focus`\n\n```\nfoo bar\n```\n\nBut I was wondering if is possible to compress all in one statement, so I would not need to repeat the `text-green-500` for both. I tried the code below, but it becomes an **and** statement instead of **or**.\n\n```\nfoo bar\n```\n\nIn pure CSS, what I'm looking for to do would be something like this:\n\n```\ndiv:hover, div:focus {\n color: green\n}\n```\n\nIs that possible in Tailwind CSS?\n\n========================================\n\nTop Answer:\nYou can `@apply` to re-use existing tailwind styles so that you don't end-up writing `color: green` or whatever extra you would otherwise be writing in plain CSS>\n\nhttps://tailwindcss.com/docs/functions-and-directives#apply\n\n```\ndiv:hover, div:focus {\n @apply text-green-500;\n}\n```\n\nThis way, you will also end up having less code in your `class` attribute.\n\n========================================\n\nCode:\n```html\n<div class=\"hover:text-green-500 focus:text-green-500\">foo bar</div>\n```\n\n```html\n<div class=\"hover:focus:text-green-500\">foo bar</div>\n```\n\n```css\ndiv:hover, div:focus {\n color: green\n}\n```\n\n```text\nhover\n```\n\n```text\nfocus\n```\n\n```text\ntext-green-500\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n\n<input class=\"hocus:text-green-500\" value=\"foo bar\" />\n\n<style type=\"text/tailwindcss\">\n@custom-variant hocus (&:hover, &:focus);\n</style>\n```\n\n```js\ntailwind.config = {\n plugins: [\n tailwind.plugin(function({ addVariant }) {\n addVariant('hocus', ['&:hover', '&:focus'])\n }),\n ],\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.4.5\"></script>\n\n<input class=\"hocus:text-green-500\" value=\"foo bar\" />\n```\n\n```text\n@custom-variant\n```\n\n```text\naddVariant()\n```\n\n```text\ndiv:hover, div:focus {\n @apply text-green-500;\n}\n```\n\n```text\n@apply\n```\n\n```text\ncolor: green\n```\n\n```text\nclass\n```\n\n```text\naddVariant(\"group-hocus\", [\".group:hover &\", \".group:focus &\"]);\n```\n\n```text\nfocus\n```\n\n```text\nfocus-visible\n```\n\n```html\n<div className=\"hover:text-green-500 focus:text-gray-500\">Your Text</div>\n```\n\n```text\n.hover-focus-text:hover,\n.hover-focus-text:focus {\n @apply text-green-500;\n}\n```\n\n```text\n<div className=\"hover-focus-text\">Your Text</div>\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant hocus {\n @media (hover: hover) {\n &:hover {\n @slot; /* apply when hovered and hover is avaliable */\n }\n }\n &:focus {\n @slot; /* or apply when focused */\n }\n}\n</style>\n\n<input class=\"hocus:text-green-500\" value=\"foo bar\" />\n```\n\n```text\n@custom-variant\n```\n\n```text\n@media (hover: hover)\n```\n\n```text\nhover\n```\n\n========================================\n\nComments:\n- fwiw using @apply is actively discouraged unless you are making common utilities, like say a `btn` style\n- Why is this better than @KarsonJo's answer, whose TailwindCSS plugin dynamically handles the combination of hover and focus, which you can then use for anything without writing CSS?","metadata":{"transformedAt":"2026-08-18T18:33:42.889Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":25,"totalLines":185,"estimatedTokens":785}}136{"id":"stack-78128286","source":"stackoverflow","questionId":78128286,"title":"Shadcn select default value","tags":["reactjs","tailwind-css","shadcnui"],"text":"Title: Shadcn select default value\nTags: reactjs, tailwind-css, shadcnui\nSource: Stack Overflow\n\nQuestion:\nI'm using React with Shadcn, here is the code:\n\n```\n\n \n \n \n \n \n \n Apples\n Bananas\n Mangos\n \n \n \n \n```\n\nHow to make a `default value` to be selected when the component is rendered? For example I want `apples` to be selected?\n\n========================================\n\nTop Answer:\nHere is a more complete example setting a default value and controlling the state:\n\n```\nimport React, { useState } from 'react'\n\nimport { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../ui/select'\n\nconst [selectedOption, setSelectedOption] = useState('apple')\n\n {\n setSelectedOption(value)\n }}\n>\n \n \n \n \n \n Apple\n Banana\n Blueberry\n Grapes\n Pineapple\n \n \n\n```\n\n========================================\n\nCode:\n```text\n<div className={'mb-8'}>\n <Select>\n <SelectTrigger className=\"w-[300px] text-foreground\">\n <SelectValue/>\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectItem value=\"apples\">Apples</SelectItem>\n <SelectItem value=\"bananas\">Bananas</SelectItem>\n <SelectItem value=\"mangos\">Mangos</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n </div>\n```\n\n```text\ndefault value\n```\n\n```text\napples\n```\n\n```text\nexport default function ControlledSelect() {\n return (\n <Select defaultValue=\"apple\">\n <SelectTrigger className=\"w-[300px] text-foreground\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectItem value=\"apple\">Apple</SelectItem>\n <SelectItem value=\"banana\">Banana</SelectItem>\n <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n <SelectItem value=\"grapes\">Grapes</SelectItem>\n <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n );\n}\n```\n\n```text\nexport default function ControlledSelect() {\n const [selectedOption, setSelectedOption] = useState('apple');\n\n return (\n <Select\n value={selectedOption}\n onValueChange={(value) => {\n setSelectedOption(value);\n }}\n >\n <SelectTrigger className=\"w-[300px] text-foreground\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectItem value=\"apple\">Apple</SelectItem>\n <SelectItem value=\"banana\">Banana</SelectItem>\n <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n <SelectItem value=\"grapes\">Grapes</SelectItem>\n <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n );\n}\n```\n\n```text\n<Select defaultValue='apples'>\n ...\n</Select>\n```\n\n```text\n<Select>\n```\n\n```text\ndefaultValue\n```\n\n```js\nimport React, { useState } from 'react'\n\nimport { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../ui/select'\n\nconst [selectedOption, setSelectedOption] = useState('apple')\n\n<Select\n value={selectedOption}\n onValueChange={(value) => {\n setSelectedOption(value)\n }}\n>\n <SelectTrigger className=\"w-[180px]\">\n <SelectValue placeholder=\"Select a fruit\" />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectItem value=\"apple\">Apple</SelectItem>\n <SelectItem value=\"banana\">Banana</SelectItem>\n <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n <SelectItem value=\"grapes\">Grapes</SelectItem>\n <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n </SelectGroup>\n </SelectContent>\n</Select>\n```\n\n```html\nfunction SelectMenu({\n name,\n data,\n value,\n onValueChange,\n defaultValue,\n}: ISelectMenu) {\n return (\n <label className=\"w-full relative\">\n <span className=\"absolute p-[5px] bg-black text-mySelect text-xs font-medium -top-[15px] left-5\">\n {name}\n </span>\n <Select onValueChange={onValueChange} value={value}>\n <SelectTrigger className=\"w-full text-myText rounded-[15px] py-5 px-[20px]\">\n <SelectValue className={\"text-white\"} aria-label={value} />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n {data?.map((item, index) => (\n <SelectItem value={item.value} key={index}>\n {item.item}\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n </label>\n );\n}\n```\n\n```text\n<Select>\n<SelectTrigger className=\"w-[118px] text-slate-400 \">\n<SelectValue placeholder=\"Apple\">Apple</SelectValue>\n</SelectTrigger>\n<SelectContent>\n<SelectGroup>\n<SelectLabel>Apple</SelectLabel>\n<SelectItem value=\"apple\">Apple</SelectItem>\n<SelectItem value=\"banana\">Banana</SelectItem>\n<SelectItem value=\"blueberry\">Blueberry</SelectItem>\n<SelectItem value=\"grapes\">Grapes</SelectItem>\n<SelectItem value=\"pineapple\">Pineapple</SelectItem>\n</SelectGroup>\n</SelectContent>\n</Select>\n```\n\n========================================\n\nComments:\n- This does not work, either that or the answer is not complete\n- This does work. There are two ways to use the select input: controlled and uncontrolled. The author of the question was using the select input uncontrolled. Your answer shows how to use it controlled.\n- Uncontrolled didn't work for me either - there were no default value. Controlled example by @Bersan did work\n- If you set the `value` and `onValueChange` props on the Select, setting the `defaultValue` prop won't work. Uncontrolled does work, as shown in this example.\n- Very detailed and helpful answer\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.889Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":235,"estimatedTokens":1529}}137{"id":"stack-72432862","source":"stackoverflow","questionId":72432862,"title":"How to set min-content for a column in tailwind CSS Grid?","tags":["css","reactjs","tailwind-css"],"text":"Title: How to set min-content for a column in tailwind CSS Grid?\nTags: css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nMy Layout looks like this https://i.sstatic.net/TD37E.png\n\nLayout Code:\n\n```\nconst Layout = ({ children }: { children: ReactNode }) => {\nreturn (\n \n \n Ystream\n \n\n Sidebar\n\n \n \n \n\n {children}\n \n);\n};\n```\n\nIn this grid with 3 blocks, I have 2 columns and I want the width for the first column (Sidebar) to be `min-content` so that I have flexibility to set the width of the side bar the way I want.\n\nTo be precise, in CSS you'd do something like `grid-template-columns: min-content 1fr`.\n\nHow do replicate this in Tailwind?\n\n========================================\n\nCode:\n```text\nconst Layout = ({ children }: { children: ReactNode }) => {\nreturn (\n <div className=\"grid grid-cols-2 grid-rows-2\">\n <Head>\n <title>Ystream</title>\n </Head>\n\n <nav className=\"row-span-2\">Sidebar</nav>\n\n <header>\n <Navbar />\n </header>\n\n <main>{children}</main>\n </div>\n);\n};\n```\n\n```text\nmin-content\n```\n\n```text\ngrid-template-columns: min-content 1fr\n```\n\n```text\n.grid-cols-\\[min-content_1fr\\] {\n grid-template-columns: min-content 1fr;\n}\n```\n\n```text\ngrid-cols-[min-content_1fr]\n```\n\n========================================\n\nComments:\n- another variation worked for me going off of this example. i needed two columns of text to fit to the content. `grid-cols-[max-content_max-content]`\n- this was the perfect solution I was looking for!","metadata":{"transformedAt":"2026-08-18T18:33:42.889Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":81,"estimatedTokens":382}}138{"id":"stack-74271099","source":"stackoverflow","questionId":74271099,"title":"tailwindcss: animate-spin not showing up","tags":["reactjs","tailwind-css","vite","tailwind-ui","daisyui"],"text":"Title: tailwindcss: animate-spin not showing up\nTags: reactjs, tailwind-css, vite, tailwind-ui, daisyui\nSource: Stack Overflow\n\nQuestion:\nI wanted to include a loading spinner from tailwind-css and according to tailwindcss documentation, this should be available with the className=\"animate-spin\".\n\nI'm using React18 created from Vite. I've also installed daisyui in addition to tailwindcss.\n\nWhen I apply \"animate-spin\" and inspect in the browser, I can see that it's been added when I select the spinner. It's definitely there and spinning in my button element, but for some reason, it just doesn't show up/is transparent.\n\nHere is my code:\n`\n\n```\n\n \n \n Loading...\n \n \n```\n\n`\n\nI've tried taking out \"border-transparent\" from the button className, but it still didn't show.\n\nAppreciate any help from anybody who knows Tailwind. Both my App.css and index.css are blank aside from the tailwind imports and applying a universal font.\n\nI've tried adjusting the color and background-color properties of the svg element with the spinner. So far only making the background-color white has made it shown up but only as a spinning squre.\n\nI've tried adjusting text-white to the svg element but it doesn't show up and changing the color property doesn't make it show up.\n\n========================================\n\nTop Answer:\nYour svg element has nothing in it.\nYou would need to add a path for example.\n\nIf you want to have the exact same svg from tailwind website, check the code down below:\n\n```\n\n \n \n \n \n\n```\n\n========================================\n\nCode:\n```text\n<div className=\"bg-gray-50 px-4 py-3 text-right sm:px-6\">\n <button\n type=\"submit\"\n className=\"inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\"\n >\n <svg className=\"animate-spin h-5 w-5 mr-3\"></svg>\n Loading...\n </button>\n </div>\n```\n\n```text\n<button type=\"button\" className=\"bg-indigo-500\" disabled>\n <svg class=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n</button>\n```\n\n========================================\n\nComments:\n- Hi, first of all, super grateful for your time looking at this. I've tried this: And it appears as a spinning square when it should appear like this: tailwindcss.com/docs/animation Do you have any experience getting this to work?\n- you can use some icon library like font awesome to get circle icon like in tailwind doc. Or you can extract svg icon directly with devtool stackoverflow.com/questions/43804171/… when you done get the icon, just put `animate-spin` class to that icon element\n- Thanks so much! I got it working with this.","metadata":{"transformedAt":"2026-08-18T18:33:42.889Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":2,"totalLines":80,"estimatedTokens":832}}139{"id":"stack-74599313","source":"stackoverflow","questionId":74599313,"title":"Change border color of parent div if child input is focused - TailwindCSS","tags":["html","css","tailwind-css"],"text":"Title: Change border color of parent div if child input is focused - TailwindCSS\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI know TailwindCSS have class `group` to use but that is only use for change styles of child element when the parent element activate some event, but I want it in vise versa.\n\n```\n \n \n \n\n```\n\nAnd I don't want to re-write css classes. Just use TailwindCSS.\n\n========================================\n\nTop Answer:\nYou could use JavaScript for that. I assume your input gets focused by clicking. You can catch the click argument and add a class to the parent.\n\n```\n\nfunction focusFunction() {\n document.getElementByClass(\"parent\").classList.add(\"focusclass\");\n}\n\n```\n\nEverytime you click the Input, your `focusFuncition` is called. This function searches for the `parent` class and adds the `focusclass` to the class attribute. Of course you can change the naming of the classes.\n\nMaybe you have to give your parent an unique id to select it with `getElementByID` instead of class if you use the `parent` class more than once.\n\n========================================\n\nCode:\n```html\n<div class=\"parent\"> <!-- border color should be red when child is focused -->\n <img class=\"icon\">\n <input class=\"child\" type=\"text\">\n</div>\n```\n\n```text\ngroup\n```\n\n```html\n<!-- border will be red when input focuesd -->\n<div class=\"focus-within:border-red-500 border\">\n <img class=\"icon\">\n <input class=\"\" type=\"text\">\n</div>\n```\n\n```text\n<input class=\"child\" type=\"text\" onclick=\"focusFunction()\">\n\n<script>\nfunction focusFunction() {\n document.getElementByClass(\"parent\").classList.add(\"focusclass\");\n}\n</script>\n```\n\n```text\nfocusFuncition\n```\n\n```text\nparent\n```\n\n```text\nfocusclass\n```\n\n```text\ngetElementByID\n```\n\n```text\nparent\n```\n\n```text\npeer\n```\n\n```text\npeer\n```\n\n```text\npeer-*\n```\n\n```text\npeer\n```\n\n========================================\n\nComments:\n- Look for the `:focus-within` pseudo-class.\n- Does this answer your question? CSS: Change parent on focus of child\n- @Plastic Yes, but I wonder if is it already has some tailwind class or need to re-write manually. Thank you btw.","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":107,"estimatedTokens":532}}140{"id":"stack-70662382","source":"stackoverflow","questionId":70662382,"title":"Couldn't deploy Rails + Tailwind on Heroku","tags":["ruby-on-rails","heroku","tailwind-css"],"text":"Title: Couldn't deploy Rails + Tailwind on Heroku\nTags: ruby-on-rails, heroku, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI deploy the rails + tailwind app on Heroku but I failed with the below error.\n\n```\nSassC::SyntaxError: Error: Function rgb is missing argument $green.\n on line 607 of stdin\n>> color: rgb(239 68 68 / var(--tw-text-opacity));\n```\n\nHere's how I installed Tailwind to the app.\n\n```\nbin/bundle add tailwindcss-rails\nbin/rails tailwindcss:install\n```\n\n========================================\n\nTop Answer:\nYou can check the comment here https://github.com/rails/tailwindcss-rails with regards to `sassc-rails`. It seems like there's an incompatibility with that gem. For example, you may have to remove sass-rails ¯_(ツ)_/¯\n\n========================================\n\nCode:\n```text\nSassC::SyntaxError: Error: Function rgb is missing argument $green.\n on line 607 of stdin\n>> color: rgb(239 68 68 / var(--tw-text-opacity));\n```\n\n```text\nbin/bundle add tailwindcss-rails\nbin/rails tailwindcss:install\n```\n\n```text\nconfig.assets.css_compressor = nil\n```\n\n```text\nconfig/environments/production.rb\n```\n\n```text\nsassc-rails\n```\n\n========================================\n\nComments:\n- Hey, mate, did you find a solution for your problem?\n- Probably Tailwind produces too modern CSS for SASSC though I need SASSC. Is there a solution for Sprockets to pick the Tailwind.css file without having SASSC to read it ? I have been thinking of exporting Tailwind.css strait to public but I am not a great fan of this.","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":56,"estimatedTokens":383}}141{"id":"stack-60618671","source":"stackoverflow","questionId":60618671,"title":"TailwindCSS - adding fontSize","tags":["tailwind-css"],"text":"Title: TailwindCSS - adding fontSize\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nTailwindCSS 1.2.0\n\nWhat I'm doing wrong? if I add fontSize as below text-7xl doesn't show up as the new optional value and text-6xl disappear.\n\n```\nmodule.exports = {\n important: true,\n theme: {\n fontFamily: {\n 'theme-f1': ['\"Oswald\"', \"sans-serif\"],\n 'theme-f2': ['\"Lora\"', \"serif\"],\n 'theme-f3': ['\"Bebas Kai\"', \"sans-serif\"],\n 'theme-f4': ['\"Open Sans\"', \"sans-serif\"],\n },\n fontSize: {\n '7xl': '7rem',\n },\n extend: {\n colors: {\n 'theme-c1': '#006c32',\n 'theme-c1-b': '#6c8213',\n 'theme-c2': '#000000',\n 'theme-c3': '#ffffff',\n }\n },\n },\n variants: {\n letterSpacing: ['responsive', 'hover', 'focus'],\n },\n plugins: [],\n}\n```\n\n========================================\n\nTop Answer:\nYou can customize font sizes in `tailwind.config.js` by extending the `theme`.\n\n**Steps to Customize Font Size in Tailwind**\n\n- Open `tailwind.config.js`.\n\n- Inside the `theme.extend` section, add your custom font sizes.\n\n- Use the new sizes in your project.\n\n**Example Configuration**\n\n```\nmodule.exports = {\n theme: {\n extend: {\n fontSize: {\n 'tiny': '0.7rem', // Custom tiny font\n 'huge': '5rem', // Custom huge font\n },\n },\n },\n plugins: [],\n};\n```\n\n**Usage in Components**\n\n```\nThis is tiny text\n\n### Huge Heading\n\n```\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n important: true,\n theme: {\n fontFamily: {\n 'theme-f1': ['\"Oswald\"', \"sans-serif\"],\n 'theme-f2': ['\"Lora\"', \"serif\"],\n 'theme-f3': ['\"Bebas Kai\"', \"sans-serif\"],\n 'theme-f4': ['\"Open Sans\"', \"sans-serif\"],\n },\n fontSize: {\n '7xl': '7rem',\n },\n extend: {\n colors: {\n 'theme-c1': '#006c32',\n 'theme-c1-b': '#6c8213',\n 'theme-c2': '#000000',\n 'theme-c3': '#ffffff',\n }\n },\n },\n variants: {\n letterSpacing: ['responsive', 'hover', 'focus'],\n },\n plugins: [],\n}\n```\n\n```text\nmodule.exports = {\n important: true,\n theme: {\n fontFamily: {\n 'theme-f1': ['\"Oswald\"', \"sans-serif\"],\n 'theme-f2': ['\"Lora\"', \"serif\"],\n 'theme-f3': ['\"Bebas Kai\"', \"sans-serif\"],\n 'theme-f4': ['\"Open Sans\"', \"sans-serif\"],\n },\n extend: {\n fontSize: {\n '7xl': '7rem',\n },\n colors: {\n 'theme-c1': '#006c32',\n 'theme-c1-b': '#6c8213',\n 'theme-c2': '#000000',\n 'theme-c3': '#ffffff',\n }\n },\n },\n variants: {\n letterSpacing: ['responsive', 'hover', 'focus'],\n },\n plugins: [],\n}\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n theme: {\n extend: {\n // Adds a new breakpoint in addition to the default breakpoints\n screens: {\n '2xl': '1440px',\n }\n }\n }\n}\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n fontSize: {\n 'tiny': '0.7rem', // Custom tiny font\n 'huge': '5rem', // Custom huge font\n },\n },\n },\n plugins: [],\n};\n```\n\n```text\n<p className=\"text-tiny\">This is tiny text</p>\n<h1 className=\"text-huge font-bold\">Huge Heading</h1>\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntheme\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntheme.extend\n```\n\n========================================\n\nComments:\n- Welcome to SO! Please read \"How to Ask\", \"Stack Overflow question checklist\", \"minimal reproducible example\" and their linked pages. We need sufficient code and input to duplicate the problem on our own machines.","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":190,"estimatedTokens":913}}142{"id":"stack-65112052","source":"stackoverflow","questionId":65112052,"title":"I want to make my custom tailwind classes use media prefixes","tags":["tailwind-css"],"text":"Title: I want to make my custom tailwind classes use media prefixes\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am building a website with tailwind as a css framework, but I ran into the problem that when I try to use the media query prefixes of tailwind (sm:, lg:, etc.) this error is thrown:\n\n`@apply` cannot be used with `.sm\\:` because `.sm\\:` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.sm\\:` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.\n\nCan someone explain how one should use these prefixes with own custom classes?\nThank you for your help already! <3\n\n========================================\n\nTop Answer:\nAlthough Josh's answer is not bad and highlights the use of the `@variant` directive introduced in TailwindCSS v4's CSS-first configuration, I must mention that they can be nested. So, it's enough to declare the class once and then customize it within using `@variant`.\n\n- `@variant` directive - TailwindCSS v4 Docs\n\n\r\n\r\n\n```\n\n/* Solution #1 */\n.custom {\n background-color: #9F1239;\n \n @variant sm {\n background-color: #E11D48;\n }\n}\n\n/* Solution #2 */\n@variant lg {\n .custom {\n background-color: #FB7185;\n }\n}\n\n```\n\n\r\n\r\n\r\n\n- How to use `@screen` in TailwindCSS? - StackOverflow\n\n- How can I convert `print:` and `screen:` to the new CSS-first configuration? - StackOverflow\n\nAnd you can combine this in any way you like; in fact, with `@custom-variant`, you can declare an unlimited number of `@variants` for yourself. By default, `@variant dark` works based on the `prefers-color-scheme`, but in my example, I override this so that it takes effect when the parent element has the `.dark` class.\n\n- `@custom-variant` directive - TailwindCSS v4 Docs\n\n- Toggling dark mode manually by `@custom-variant` - TailwindCSS v4 Docs\n\n\r\n\r\n\n```\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n\r\n\n```\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n/* Solution #1 */\n.custom {\n background-color: #9F1239;\n @variant dark {\n background-color: #064E3B;\n }\n \n @variant sm {\n background-color: #E11D48;\n @variant dark {\n background-color: #059669;\n }\n }\n}\n\n/* Solution #2 */\n@variant lg {\n .custom {\n background-color: #FB7185;\n }\n}\n@variant dark {\n @variant lg {\n .custom {\n background-color: #34D399;\n }\n }\n}\n\nToggle\n```\n\n\r\n\r\n\r\n\nRelated questions for how to make own `@custom-variant`:\n\n- How to access all the direct children of a div in Tailwind CSS? - StackOverflow\n\n- How to use custom color themes in TailwindCSS v4 by `@variant dark`? - StackOverflow\n\n- TailwindCSS v4 hover cannot be applied to child elements - StackOverflow\n\n========================================\n\nCode:\n```text\n@apply\n```\n\n```text\n.sm\\:\n```\n\n```text\n.sm\\:\n```\n\n```text\n.sm\\:\n```\n\n```text\n@import\n```\n\n```text\n@apply\n```\n\n```text\n.your-class {\n @apply your-rules\n\n @screen sm {\n @apply your-rules-for-the-sm-breakpoint-and-above\n }\n\n @screen md {\n @apply your-rules-for-the-md-breakpoint-and-above\n }\n /* etc... */\n}\n```\n\n```css\n.your-class {\n @apply your-rules\n}\n\n@screen sm {\n .your-class {\n @apply your-rules-for-the-sm-breakpoint-and-above\n }\n}\n\n@screen md {\n .your-class {\n @apply your-rules-for-the-md-breakpoint-and-above\n }\n}\n /* etc... */\n```\n\n```text\n@screen\n```\n\n```text\n@apply\n```\n\n```text\n.your-class {\n @apply your-rules\n}\n\n@variant sm {\n .your-class {\n @apply your-rules-for-the-sm-breakpoint-and-above\n }\n}\n\n@variant md {\n .your-class {\n @apply your-rules-for-the-md-breakpoint-and-above\n }\n}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n/* Solution #1 */\n.custom {\n background-color: #9F1239;\n \n @variant sm {\n background-color: #E11D48;\n }\n}\n\n/* Solution #2 */\n@variant lg {\n .custom {\n background-color: #FB7185;\n }\n}\n</style>\n\n<div class=\"custom w-32 h-32\"></div>\n```\n\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant dark (&:where(.dark, .dark *));\n\n/* Solution #1 */\n.custom {\n background-color: #9F1239;\n @variant dark {\n background-color: #064E3B;\n }\n \n @variant sm {\n background-color: #E11D48;\n @variant dark {\n background-color: #059669;\n }\n }\n}\n\n/* Solution #2 */\n@variant lg {\n .custom {\n background-color: #FB7185;\n }\n}\n@variant dark {\n @variant lg {\n .custom {\n background-color: #34D399;\n }\n }\n}\n</style>\n\n<button class=\"custom w-32 h-32 font-bold cursor-pointer\">Toggle</button>\n```\n\n```text\n@variant\n```\n\n```text\n@variant\n```\n\n```text\n@variant\n```\n\n```text\n@screen\n```\n\n```text\nprint:\n```\n\n```text\nscreen:\n```\n\n```text\n@custom-variant\n```\n\n```text\n@variants\n```\n\n```text\n@variant dark\n```\n\n```text\nprefers-color-scheme\n```\n\n```text\n.dark\n```\n\n```text\n@custom-variant\n```\n\n```text\n@custom-variant\n```\n\n```text\n@custom-variant\n```\n\n```text\n@variant dark\n```\n\n========================================\n\nComments:\n- I get \"@apply is not supported within nested at-rules like @screen\" when trying this :/\n- From v4 onwards, the `@screen` variant has been removed in the CSS-first configuration and replaced with `@custom-variant` and introduced `@variant`, which allows you to create any variant: How can I convert @screen to new CSS-first configuration? and How to use `@variant {screensize}`.","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":29,"totalLines":334,"estimatedTokens":1437}}143{"id":"stack-75096854","source":"stackoverflow","questionId":75096854,"title":"Create a show / hide transition with Tailwind and Next","tags":["css","reactjs","next.js","tailwind-css"],"text":"Title: Create a show / hide transition with Tailwind and Next\nTags: css, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIs there any way to create a display or visibility transition using Tailwind and a conditional code at Next? I'm trying something like this, what I would like to achieve is a smooth fade in effect when the backend returns a exception message under the responseError object (using Context in Next) but there's no transition effect at all:\n\n```\n{\n responseError ?\n \n username or password incorrect\n \n : null\n }\n```\n\nor\n\n```\n{\n responseError ?\n \n { responseError.message }\n \n : null\n}\n```\n\n========================================\n\nCode:\n```text\n{\n responseError ?\n <span className={`${ responseError ? \"visible transition-all ease-in-out delay-150 duration-300\" : \"invisible\"} pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>\n username or password incorrect\n </span>\n : null\n }\n```\n\n```text\n{\n responseError ?\n <span className={`${ responseError ? \"visible transition-all ease-in-out delay-150 duration-300\" : \"invisible\"} pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>\n { responseError.message }\n </span>\n : null\n}\n```\n\n```text\n<span className={`${ responseError ? \"opacity-100\" : \"opacity-0\"} transition-opacity ease-in-out delay-150 duration-300 pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>\n { responseError ? responseError.message : '' }\n</span>\n```\n\n```text\nopacity\n```\n\n```text\nvisibility\n```\n\n```text\nvisibility\n```\n\n```text\nopacity\n```\n\n```text\ntransition\n```\n\n```text\nresponseError\n```\n\n```text\n<span>\n```\n\n```text\n<span>\n```\n\n```text\nresponseError\n```\n\n========================================\n\nComments:\n- This is a good answer, thought I would add, the opacity-0 element is still going to get in the way on your layout, whereas the hidden class gives you that space back as it's display:none. That means if you want to use opacity-0 to 100 transitions for slideshows and the likes, you will have to use absolute positioning to overlay anything and handle any widths/heights some other way.\n- @JohnLewis that's a valid concern that can be easily handled by adding Tailwind's `invisible` and `visible` classes.\n- @jpmelanson thats a false. visible or invisible still affect the layout.","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":100,"estimatedTokens":573}}144{"id":"stack-72831003","source":"stackoverflow","questionId":72831003,"title":"Tailwind custom theme color opacity not being applied","tags":["frontend","tailwind-css"],"text":"Title: Tailwind custom theme color opacity not being applied\nTags: frontend, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm working on a **Reactjs** project that uses **Tailwind CSS** as my CSS framework and I'm trying to build a theme with custom colors.\n\nI defined the colors as CSS variables in the `index.css` file, but setting alpha values does not work for those colors.\n\nHere is the CSS for my color values:\n\n```\n@layer base {\n :root {\n --base: 26 27 27;\n --light: 43 43 43;\n --lighter: 81 81 81;\n --text-base: 235 235 235;\n --text-inverted: 71 72 72;\n --color-primary: 241 218 19;\n --color-primary-light: 245 226 66;\n --color-danger: 243 75 19;\n --color-danger-light: 245 111 66;\n --color-accent: 242 142 19;\n --color-accent-light: 245 165 66;\n --color-secondary: 235 235 235\n }\n }\n```\n\nI configured a custom theme in the `tailwind.config.js` file like below:\n\n```\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {\n colors: {\n skin: {\n base: 'rgb(var(--base) / )',\n light: 'rgb(var(--light) / )',\n primary:'rgb(var(--color-primary) / )',\n lprimary: 'rgb(var(--color-primary-light) / )',\n danger: 'rgb(var(--color-danger) / )',\n dangerLight: 'rgb(var(--color-danger-light) / )',\n accent: 'rgb(var(--color-accent) / )',\n laccent: 'rgb(var(--color-accent-light) / )',\n secondary: 'rgb(var(--color-secondary) / )'\n }\n },\n backgroundColor: {\n skin: {\n base: 'rgb(var(--base) / )',\n light: 'rgb(var(--light) / )',\n primary:'rgb(var(--color-primary) / )',\n lprimary: 'rgb(var(--color-primary-light) / )',\n danger: 'rgb(var(--color-danger) / )',\n ldanger:'rgb(var(--color-danger-light) / )',\n secondary: 'rgb(var(--color-secondary) / )',\n accent: 'rgb(var(--color-accent) / )',\n laccent: 'rgb(var(--color-accent-light) / )',\n }\n },\n textColor: {\n skin: {\n base: 'rgb(var(--text-base) / )',\n inverted: 'rgb(var(--text-inverted) / )',\n primary: 'rgb(var(--color-primary) / )',\n hover: 'rgb(var(--color-primary-light) / )',\n secondary: 'rgb(var(--color-secondary) / )',\n }\n },\n borderColor: {\n skin: {\n primary: 'rgb(var(--color-primary) / )',\n hover: 'rgb(var(--color-primary-light) / )',\n }\n }\n },\n }};\n```\n\nHowever, when I use a class like `bg-skin-base-100` the alpha value is not applied.\n\nDoes anybody know why it's behaving like this?\n\n========================================\n\nTop Answer:\nI think you are close, but you need add a function for that in your `tailwind.config.js`. Here is a playground from Tailwind Labs, with a function called `withOpacity` in the config. In your tailwind config you can call it when defining a color:\n\n```\nbase: withOpacity('--base'),\n```\n\nYou can see the working in this video, from around 17 minutes until the end. They also explain why you should do it this way.\n\nHope this helps.\n\nEdit: as suggested by Ed Lucas, from Tailwind 3.1 on you can use a different approach.\n\n========================================\n\nCode:\n```css\n@layer base {\n :root {\n --base: 26 27 27;\n --light: 43 43 43;\n --lighter: 81 81 81;\n --text-base: 235 235 235;\n --text-inverted: 71 72 72;\n --color-primary: 241 218 19;\n --color-primary-light: 245 226 66;\n --color-danger: 243 75 19;\n --color-danger-light: 245 111 66;\n --color-accent: 242 142 19;\n --color-accent-light: 245 165 66;\n --color-secondary: 235 235 235\n }\n }\n```\n\n```js\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {\n colors: {\n skin: {\n base: 'rgb(var(--base) / <alpha-value>)',\n light: 'rgb(var(--light) / <alpha-value>)',\n primary:'rgb(var(--color-primary) / <alpha-value>)',\n lprimary: 'rgb(var(--color-primary-light) / <alpha-value>)',\n danger: 'rgb(var(--color-danger) / <alpha-value>)',\n dangerLight: 'rgb(var(--color-danger-light) / <alpha-value>)',\n accent: 'rgb(var(--color-accent) / <alpha-value>)',\n laccent: 'rgb(var(--color-accent-light) / <alpha-value>)',\n secondary: 'rgb(var(--color-secondary) / <alpha-value>)'\n }\n },\n backgroundColor: {\n skin: {\n base: 'rgb(var(--base) / <alpha-value>)',\n light: 'rgb(var(--light) / <alpha-value>)',\n primary:'rgb(var(--color-primary) / <alpha-value>)',\n lprimary: 'rgb(var(--color-primary-light) / <alpha-value>)',\n danger: 'rgb(var(--color-danger) / <alpha-value>)',\n ldanger:'rgb(var(--color-danger-light) / <alpha-value>)',\n secondary: 'rgb(var(--color-secondary) / <alpha-value>)',\n accent: 'rgb(var(--color-accent) / <alpha-value>)',\n laccent: 'rgb(var(--color-accent-light) / <alpha-value>)',\n }\n },\n textColor: {\n skin: {\n base: 'rgb(var(--text-base) / <alpha-value>)',\n inverted: 'rgb(var(--text-inverted) / <alpha-value>)',\n primary: 'rgb(var(--color-primary) / <alpha-value>)',\n hover: 'rgb(var(--color-primary-light) / <alpha-value>)',\n secondary: 'rgb(var(--color-secondary) / <alpha-value>)',\n }\n },\n borderColor: {\n skin: {\n primary: 'rgb(var(--color-primary) / <alpha-value>)',\n hover: 'rgb(var(--color-primary-light) / <alpha-value>)',\n }\n }\n },\n }};\n```\n\n```text\nindex.css\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nbg-skin-base-100\n```\n\n```text\nbg-skin-base/50\n```\n\n```text\n.5\n```\n\n```text\ncolor: rgb(26 27 27/.5)\n```\n\n```text\nbase: withOpacity('--base'),\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nwithOpacity\n```\n\n```text\n<!-- Styles -->\n @livewireStyles\n```\n\n========================================\n\nComments:\n- Are you using the latest version of Tailwind, 3.14? The `` approach was just added in v3.1 (tailwindcss.com/blog/…).\n- I'm using version 3.1.4\n- For anyone else that ends up here (using Tailwind V4.2), you can't use HEX values for custom colors if you want opacity to work as expected, you need to use RGB values `rgb(3, 98, 255)`. Which makes a tonne of sense, but yeah... I was using HEX codes.\n- This is no longer necessary in Tailwind CSS version 3.1+. tailwindcss.com/blog/…\n- Thanks, @EdLucas! Always nice to learn something when trying to help someone else :-)\n- Thanks for your answer. I saw that video and used the `withOpacity` function. I think the problem was with how I added opacity. I saw tailwind documentation and there was suggested to apply opacity using a `-`\n- Thanks, @EdLucas. Using bg-skin-base/50 applied opacity value to my elements!","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":228,"estimatedTokens":1735}}145{"id":"stack-57572997","source":"stackoverflow","questionId":57572997,"title":"Fractional classes with Tailwind CSS inside a HAML file","tags":["ruby","haml","tailwind-css"],"text":"Title: Fractional classes with Tailwind CSS inside a HAML file\nTags: ruby, haml, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to use the `w-2/3` class from Tailwind CSS with HAML in a Rails `.html.haml` file. The forward slash is causing Rails (or HAML) to throw an exception and I don't know how to format it so it's accepted.\n\nIs there a way to use the `w-2/3` etc classes or will I have to go back to using `.html.erb`?\n\n========================================\n\nTop Answer:\nThe class names used in Tailwind can be overwritten. This might help if you tend to use these classes frequently and don't want to write the extended version (`%div{class: 'w-1/2'}` or `%div(class=\"w-1/2\")`.\n\nTo overwrite the width classes to use `_` instead of `/`, use the following configuration in your `tailwind.config.js`:\n\n```\nmodule.exports = {\n theme: {\n extend: {},\n width: (theme) => ({\n auto: 'auto',\n ...theme('spacing'),\n '1_2': '50%',\n '1_3': '33.333333%',\n '2_3': '66.666667%',\n '1_4': '25%',\n '2_4': '50%',\n '3_4': '75%',\n '1_5': '20%',\n '2_5': '40%',\n '3_5': '60%',\n '4_5': '80%',\n '1_6': '16.666667%',\n '2_6': '33.333333%',\n '3_6': '50%',\n '4_6': '66.666667%',\n '5_6': '83.333333%',\n '1_12': '8.333333%',\n '2_12': '16.666667%',\n '3_12': '25%',\n '4_12': '33.333333%',\n '5_12': '41.666667%',\n '6_12': '50%',\n '7_12': '58.333333%',\n '8_12': '66.666667%',\n '9_12': '75%',\n '10_12': '83.333333%',\n '11_12': '91.666667%',\n full: '100%',\n screen: '100vw',\n }),\n }\n}\n```\n\nObviously, this duplicates information from Tailwind and might make framework upgrades more cumbersome.\n\n========================================\n\nCode:\n```text\nw-2/3\n```\n\n```text\n.html.haml\n```\n\n```text\nw-2/3\n```\n\n```text\n.html.erb\n```\n\n```text\n%div{ class: \"w-2/3\" }\n```\n\n```text\n.foo{ class: \"w-2/3\" }\n```\n\n```text\n.foo(class=\"w-2/3\")\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {},\n width: (theme) => ({\n auto: 'auto',\n ...theme('spacing'),\n '1_2': '50%',\n '1_3': '33.333333%',\n '2_3': '66.666667%',\n '1_4': '25%',\n '2_4': '50%',\n '3_4': '75%',\n '1_5': '20%',\n '2_5': '40%',\n '3_5': '60%',\n '4_5': '80%',\n '1_6': '16.666667%',\n '2_6': '33.333333%',\n '3_6': '50%',\n '4_6': '66.666667%',\n '5_6': '83.333333%',\n '1_12': '8.333333%',\n '2_12': '16.666667%',\n '3_12': '25%',\n '4_12': '33.333333%',\n '5_12': '41.666667%',\n '6_12': '50%',\n '7_12': '58.333333%',\n '8_12': '66.666667%',\n '9_12': '75%',\n '10_12': '83.333333%',\n '11_12': '91.666667%',\n full: '100%',\n screen: '100vw',\n }),\n }\n}\n```\n\n```text\n%div{class: 'w-1/2'}\n```\n\n```text\n%div(class=\"w-1/2\")\n```\n\n```text\n_\n```\n\n```text\n/\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- Awesome! Thanks for your reply. I'll give it a go when I'm back near my development machine and then accept your answer.\n- Thanks so much. This is also incredibly helpful!","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":154,"estimatedTokens":748}}146{"id":"stack-59184942","source":"stackoverflow","questionId":59184942,"title":"TailwindCSS use @apply with placeholder color","tags":["tailwind-css"],"text":"Title: TailwindCSS use @apply with placeholder color\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to use `@apply` together with placeholder color in TailwindCSS, but for some reason, it does not seem to work although I am able to use `@apply` together with other properties. I am also able to use the placeholder color options as a CSS class. It just doesn't work with `@apply`.\n\n```\n@tailwind base;\n\ninput {\n @apply placeholder-gray-900;\n}\n\n@tailwind components;\n\n@tailwind utilities;\n```\n\nBy trying this I end up with this error:\n\n```\n`@apply` cannot be used with `.placeholder-gray-900` because `.placeholder-gray-900` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.placeholder-gray-900` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.\n```\n\n========================================\n\nTop Answer:\nFor v2.1.4 ...\n\nBy default, the active variant is not enabled for any core plugins. Maybe its actual definition includes a pseudo-selector like :hover, :active, etc. You can control whether active variants are enabled for a plugin in the variants section of your tailwind.config.js file:\n\n```\n// tailwind.config.js\nmodule.exports = {\n // ...\n variants: {\n extend: {\n backgroundColor: ['active'],\n }\n },\n}\n```\n\nRead here for Tailwind - Hover, Focus, & Other States\n\n========================================\n\nCode:\n```css\n@tailwind base;\n\ninput {\n @apply placeholder-gray-900;\n}\n\n@tailwind components;\n\n@tailwind utilities;\n```\n\n```text\n`@apply` cannot be used with `.placeholder-gray-900` because `.placeholder-gray-900` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.placeholder-gray-900` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```text\ninput::placeholder {\n @apply text-gray-900;\n}\n```\n\n```text\n::placeholder\n```\n\n```text\n@apply\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n // ...\n variants: {\n extend: {\n backgroundColor: ['active'],\n }\n },\n}\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":102,"estimatedTokens":595}}147{"id":"stack-69833361","source":"stackoverflow","questionId":69833361,"title":"TailwindCSS - Set flex child width to fill up whole parent width","tags":["css","reactjs","flexbox","tailwind-css"],"text":"Title: TailwindCSS - Set flex child width to fill up whole parent width\nTags: css, reactjs, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have this react component:\n\n```\nconst Status = () => {\n return (\n \n \n \n\n### Plex Server\n\n \n\n### Added 22/10/2021\n\n \n {[...Array(30)].map((i, idx) => (\n \n ))}\n \n \n \n );\n};\n\nexport default Status;\n```\n\nI'm using it to render 30 flex children with hard-coded width of 4px (`w-1` class). Here is the result:\n\nhttps://i.sstatic.net/rj1rS.png\n\nIs there a way **to set children width automatically** so it would fill up parent space equaly?\n\nFor example: parent width is 100px and this time I want to render only 10 elements. With current code it will take only 76px (40px from child width + 36px from 4px space between them). Is there a way to set children width automatically to ~6px?\n\n========================================\n\nCode:\n```js\nconst Status = () => {\n return (\n <div className='h-screen bg-gray-800 flex justify-center items-center p-16'>\n <div className='bg-gray-700 px-8 py-4 rounded w-full'>\n <h2 className='text-2xl text-gray-100 font-medium'>Plex Server</h2>\n <h3 className='text-base text-gray-400'>Added 22/10/2021</h3>\n <div className='flex flex-row w-full space-x-1 my-4'>\n {[...Array(30)].map((i, idx) => (\n <div key={idx} className='h-8 w-1 bg-green-400 rounded'></div>\n ))}\n </div>\n </div>\n </div>\n );\n};\n\nexport default Status;\n```\n\n```text\nw-1\n```\n\n```js\nconst Status = () => {\n return (\n <div className='h-screen bg-gray-800 flex justify-center items-center p-16'>\n <div className='bg-gray-700 px-8 py-4 rounded w-full'>\n <h2 className='text-2xl text-gray-100 font-medium'>Plex Server</h2>\n <h3 className='text-base text-gray-400'>Added 22/10/2021</h3>\n <div className='flex flex-row w-full space-x-1 my-4'>\n {[...Array(30)].map((i, idx) => (\n <div key={idx} className='h-8 flex-1 bg-green-400 rounded'></div>\n ))}\n </div>\n </div>\n </div>\n );\n};\n\nexport default Status;\n```\n\n```text\nflex-1\n```\n\n```text\nw-1\n```\n\n========================================\n\nComments:\n- Exactly what I wanted to achieve. Thanks!","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":100,"estimatedTokens":558}}148{"id":"stack-70124026","source":"stackoverflow","questionId":70124026,"title":"How to pass an icon as a prop?","tags":["javascript","reactjs","next.js","icons","tailwind-css"],"text":"Title: How to pass an icon as a prop?\nTags: javascript, reactjs, next.js, icons, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using props and I want to have \"optionText\" and \"optionIcon\" the 1st one I'm able to add but I'm not able to implement an icon as a prop\n\nFile where I'm creating props\n\n```\nimport Icon from \"@mui/material/Icon\";\n\nfunction HeaderMenuOptions({ optionText, OptionIcon }) {\n return (\n \n {OptionIcon}\n \n {optionText}\n \n \n );\n}\n\nexport default HeaderMenuOptions;\n```\n\nfile where I'm using said props\n\n```\n\n VIEW OPTIONS\n\n \n \n alert(\"Light mode has not been added yet!\")}\n className=\"cursor-pointer text-blue-500\"\n />\n \n\n MORE STUFF\n\n \n \n \n \n \n \n```\n\ncan anyone please help me. Thanks\n\n========================================\n\nTop Answer:\nYou can use pass icon as JSX.Element from ParentComponent to TargetComponent as the following:\n\n```\nimport AddAlertIcon from '@mui/icons-material/AddAlert';\n...\n\nconst ParentComponent=()=>{\nreturn(\n....\n}>\n....\n)\n}\n\nconst TargetComponent = (props: Props) => {\nreturn(\n\n{props.icon}\n\n);\n}\n\nexport type Props= {\n icon: JSX.Element;\n};\n```\n\n========================================\n\nCode:\n```js\nimport Icon from \"@mui/material/Icon\";\n\nfunction HeaderMenuOptions({ optionText, OptionIcon }) {\n return (\n <div className=\"flex items-center text-center\">\n <Icon>{OptionIcon}</Icon>\n <h1 className=\"py-1 my-1 hover:bg-menu-option-hover hover:text-black cursor-pointer\">\n {optionText}\n </h1>\n </div>\n );\n}\n\nexport default HeaderMenuOptions;\n```\n\n```js\n<div className=\"absolute left-72 top-3 rounded-md bg-section w-[10rem] text-center\">\n <p className=\"menu-header mt-2\">VIEW OPTIONS</p>\n\n <div className=\"flex items-center justify-center space-x-2 mr-2 cursor-pointer hover:bg-menu-option-hover hover:hover:text-black group\">\n <HeaderMenuOptions optionText=\"Night Mode\" />\n <CheckBoxIcon\n defaultChecked\n onClick={() => alert(\"Light mode has not been added yet!\")}\n className=\"cursor-pointer text-blue-500\"\n />\n </div>\n\n <p className=\"menu-header\">MORE STUFF</p>\n <HeaderMenuOptions optionText=\"Premium\" OptionIcon={SecurityIcon} />\n <HeaderMenuOptions optionText=\"TEST\" />\n <HeaderMenuOptions optionText=\"TEST\" />\n <HeaderMenuOptions optionText=\"TEST\" />\n <HeaderMenuOptions optionText=\"TEST\" />\n </div>\n```\n\n```text\n<HeaderMenuOptions optionText=\"Premium\" OptionIcon={<SecurityIcon />} />\n```\n\n```text\nHeaderMenuOptions\n```\n\n```text\nimport AddAlertIcon from '@mui/icons-material/AddAlert';\n...\n\nconst ParentComponent=()=>{\nreturn(\n....\n<TargetComponent icon={<AddAlertIcon />}>\n....\n)\n}\n\nconst TargetComponent = (props: Props) => {\nreturn(\n<span>\n{props.icon}\n</span>\n);\n}\n\nexport type Props= {\n icon: JSX.Element;\n};\n```\n\n```text\nimport { HomeIcon } from '@heroicons/react/24/outline';\n\nfunction TargetComponent({ icon }){\n\n const iconObj = { icon };\n\n return <iconObj.icon />\n}\n\nfunction ParentComponent () {\n return <TargetComponent icon={ HomeIcon } />\n}\n```\n\n========================================\n\nComments:\n- @sajawal if this works then kindly consider accepting this answer. That'll mark it done.","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":175,"estimatedTokens":817}}149{"id":"stack-79487101","source":"stackoverflow","questionId":79487101,"title":"TailwindCSS v4 dark theme by class not working without dark tag","tags":["html","css","tailwind-css","vite","tailwind-css-4"],"text":"Title: TailwindCSS v4 dark theme by class not working without dark tag\nTags: html, css, tailwind-css, vite, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI'm trying to set up a custom theme in Tailwind CSS v4 that auto-switches to dark mode **without adding the `dark:` prefix to every custom class.**\n\n**In Tailwind v3, my setup was:**\n\n**index.css:**\n\n```\n:root {\n --color-primary100: #0A7280;\n --color-primary50: #BAD7DB;\n --color-bgBase: #FDFDFD;\n}\n```\n\n**tailwind.config.js:**\n\n```\nexport default {\n darkMode: 'class',\n content: [\"./index.html\", \"./src/**/*.{js,ts,jsx,tsx}\"],\n plugins: [tailwindCssForms, containerQueries],\n theme: {\n extend: {\n colors: {\n primary100: \"var(--color-primary100, #0A7280)\",\n primary50: \"var(--color-primary50, #BAD7DB)\",\n bgBase: \"var(--color-bgBase, #FDFDFD)\",\n },\n },\n },\n}\n```\n\nToggling the dark mode by adding a `dark` class to `` worked as expected **without having to set** a `dark:bg-primary100-V2 bg-primary100` everywhere :\n\n**A single `bg-primary100` will handle it both themes** (multiply it by each customized props and you see why this is important)\n\n**After migrating to Tailwind CSS v4 (https://tailwindcss.com/docs/dark-mode), I updated my CSS using the new `@theme` syntax :**\n\n```\n@import 'tailwindcss';\n@plugin '@tailwindcss/forms';\n@plugin '@tailwindcss/container-queries';\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-bgContrast: #f9f9f9;\n}\n\n/*and was hopping for this to do the job but i tried many others */\n@theme dark: {\n --color-bgContrast: #66C8B6;\n}\n```\n\nI expected that adding `` would update `--color-bgContrast` to `#66C8B6`, but it doesn't work as intended. My goal is to **avoid duplicating styles with multiple `dark:` prefixes across components everywhere**.\n\nHas anyone managed to achieve this centralized dark theme approach in v4 or faced a similar issue? Any insights or workarounds would be appreciated.\n\n========================================\n\nTop Answer:\nBasically, Wongjn has already answered the question, but I would like to draw attention to the use of `@variant dark`.\n\nWith `@variant`, you don't need to update the code if, for example, in the future you no longer want to identify dark mode as `.dark`. So, if you modify the `@custom-variant` setting, this will automatically take effect in the `@variant`.\n\n- `@variant` directive - TailwindCSS v4 Docs\n\n```\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-bgContrast: #f9f9f9;\n}\n\n@layer theme {\n :root, :host {\n @variant dark {\n --color-bgContrast: #66C8B6;\n }\n }\n}\n\nToggle\n```\n\nAnd if change rule of dark mode:\n\n```\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('new-dark');\n});\n```\n\n```\n\n/* changed classname from .dark to .new-dark */\n@custom-variant dark (&:where(.new-dark, .new-dark *));\n\n@theme {\n --color-bgContrast: #f9f9f9;\n}\n\n@layer theme {\n :root, :host {\n /* working without modification */\n @variant dark {\n --color-bgContrast: #66C8B6;\n }\n }\n}\n\nToggle\n```\n\nAdditionally, without JS, it's possible to detect whether the system prefers light or dark mode by default, and integrate this into the `dark:` variant behavior. For this, your light/dark toggle needs to support three states: system/light/dark. You'll also need an extra `.system` class, but the `dark:` variant can work the same way with both `.system` and `.dark` classes:\n\n- Manual dark mode toggle, but by default it should the system scheme\n\n========================================\n\nCode:\n```css\n:root {\n --color-primary100: #0A7280;\n --color-primary50: #BAD7DB;\n --color-bgBase: #FDFDFD;\n}\n```\n\n```js\nexport default {\n darkMode: 'class',\n content: [\"./index.html\", \"./src/**/*.{js,ts,jsx,tsx}\"],\n plugins: [tailwindCssForms, containerQueries],\n theme: {\n extend: {\n colors: {\n primary100: \"var(--color-primary100, #0A7280)\",\n primary50: \"var(--color-primary50, #BAD7DB)\",\n bgBase: \"var(--color-bgBase, #FDFDFD)\",\n },\n },\n },\n}\n```\n\n```css\n@import 'tailwindcss';\n@plugin '@tailwindcss/forms';\n@plugin '@tailwindcss/container-queries';\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-bgContrast: #f9f9f9;\n}\n\n/*and was hopping for this to do the job but i tried many others */\n@theme dark: {\n --color-bgContrast: #66C8B6;\n}\n```\n\n```text\ndark:\n```\n\n```text\ndark\n```\n\n```text\n<html>\n```\n\n```text\ndark:bg-primary100-V2 bg-primary100\n```\n\n```text\nbg-primary100\n```\n\n```text\n@theme\n```\n\n```text\n<html class=\"dark\">\n```\n\n```text\n--color-bgContrast\n```\n\n```text\n#66C8B6\n```\n\n```text\ndark:\n```\n\n```css\n@layer theme {\n .dark {\n --color-bgContrast: #66C8B6;\n }\n}\n```\n\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4.0.9\"></script>\n\n<style type=\"text/tailwindcss\">\n@import 'tailwindcss';\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-bgContrast: #f9f9f9;\n}\n\n@layer theme {\n .dark {\n --color-bgContrast: #66C8B6;\n }\n}\n</style>\n\n<button class=\"grid place-items-center size-20 bg-bgContrast\">Toggle</button>\n```\n\n```text\ntheme\n```\n\n```text\n.dark\n```\n\n```text\ndark\n```\n\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4.0.9\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-bgContrast: #f9f9f9;\n}\n\n@layer theme {\n :root, :host {\n @variant dark {\n --color-bgContrast: #66C8B6;\n }\n }\n}\n</style>\n\n<button class=\"grid place-items-center size-20 bg-bgContrast\">Toggle</button>\n```\n\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('new-dark');\n});\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4.0.9\"></script>\n<style type=\"text/tailwindcss\">\n/* changed classname from .dark to .new-dark */\n@custom-variant dark (&:where(.new-dark, .new-dark *));\n\n@theme {\n --color-bgContrast: #f9f9f9;\n}\n\n@layer theme {\n :root, :host {\n /* working without modification */\n @variant dark {\n --color-bgContrast: #66C8B6;\n }\n }\n}\n</style>\n\n<button class=\"grid place-items-center size-20 bg-bgContrast\">Toggle</button>\n```\n\n```text\n@variant dark\n```\n\n```text\n@variant\n```\n\n```text\n.dark\n```\n\n```text\n@custom-variant\n```\n\n```text\n@variant\n```\n\n```text\n@variant\n```\n\n```text\ndark:\n```\n\n```text\n.system\n```\n\n```text\ndark:\n```\n\n```text\n.system\n```\n\n```text\n.dark\n```\n\n========================================\n\nComments:\n- @JulienJ, while I understand your opinion, I believe that the CSS-first configuration is a great concept, though it was still in its early stages. I think even in the time between v4.0 and 4.1, many important improvements were made - for example, the safelist was brought back, nearly every plugin became customizable, etc. Of course, if you prefer not to learn it, the JS-based configuration is still available as an option: TailwindCSS v4 is backwards compatible with v3 - How to use `tailwind.config.js` in v4\n- This information currently lacks in the official docs here - imho it should be there too.","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":34,"totalLines":370,"estimatedTokens":1869}}150{"id":"stack-65355548","source":"stackoverflow","questionId":65355548,"title":"Tailwind CSS change text color of placeholder option","tags":["html","css","html-select","tailwind-css"],"text":"Title: Tailwind CSS change text color of placeholder option\nTags: html, css, html-select, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a project where I need to use a select inside a form. All other type of inputs have a placeholder with a light gray color. The text typed inside the inputs is black.\n\nThe select input of the form needs to have the same styling. The default/placeholder value needs to be shown in a dark gray and the real values that the user can select need to be shown in black. But when I try to specify a different color for the first (default/placeholder) option it doesn't use this color. It actually keeps on using the color specified in the select element.\n\nHere is the select inside the element:\n\n```\n\n Select your option\n Volvo\n Saab\n Mercedes\n Audi\n\n```\n\n========================================\n\nCode:\n```text\n<select\n type=\"text\"\n name=\"carType\"\n id=\"carType\"\n v-model=\"carType\"\n placeholder=\"Car Type\"\n class=\"my-2 px-4 py-3 border rounded-lg text-black-primary focus:outline-none text-sm\"\n >\n <option class=\"text-gray-400\" value=\"\" disabled selected>Select your option</option>\n <option value=\"volvo\">Volvo</option>\n <option value=\"saab\">Saab</option>\n <option value=\"mercedes\">Mercedes</option>\n <option value=\"audi\">Audi</option>\n</select>\n```\n\n```css\n@import url(\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\");\n\n:invalid {\n color: rgba(156, 163, 175, 1);\n}\n```\n\n```html\n<select\n type=\"text\"\n id=\"carType\"\n class=\"my-2 px-4 py-3 border rounded-lg text-black-primary focus:outline-none text-sm\"\n name=\"carType\"\n required\n v-model=\"carType\"\n>\n <option value=\"\" disabled selected>Select your option</option>\n <option value=\"volvo\">Volvo</option>\n <option value=\"saab\">Saab</option>\n <option value=\"mercedes\">Mercedes</option>\n <option value=\"audi\">Audi</option>\n</select>\n```\n\n```js\n// tailwind.config.js\nconst plugin = require('tailwindcss/plugin');\n\nmodule.exports = {\n variants: {\n textColor: ({ after }) => after(['invalid']),\n },\n plugins: [\n plugin(function ({ addVariant, e }) {\n addVariant('invalid', ({ modifySelectors, separator }) => {\n modifySelectors(({ className }) => {\n return `.${e(`invalid${separator}${className}`)}:invalid`;\n });\n });\n }),\n ],\n};\n```\n\n```html\n<select\n type=\"text\"\n id=\"carType\"\n class=\"my-2 px-4 py-3 border rounded-lg text-black-primary invalid:text-gray-400 focus:outline-none text-sm\"\n name=\"carType\"\n required\n v-model=\"carType\"\n>\n <option value=\"\" disabled selected>Select your option</option>\n <option value=\"volvo\">Volvo</option>\n <option value=\"saab\">Saab</option>\n <option value=\"mercedes\">Mercedes</option>\n <option value=\"audi\">Audi</option>\n</select>\n```\n\n```text\nrequired\n```\n\n```text\nselect\n```\n\n```text\n:invalid\n```\n\n```text\nselected\n```\n\n```text\ndisabled\n```\n\n```text\nrequired\n```\n\n```text\n:invalid\n```\n\n```text\ninvalid:\n```\n\n```text\nhover:\n```\n\n```text\nfocus:\n```\n\n```text\ndisabled:\n```\n\n```text\ninvalid:\n```\n\n```text\ninvalid:text-gray-400\n```\n\n```text\ninvalid:text-gray-400\n```\n\n```text\nselect\n```\n\n```text\ntext-gray-400\n```\n\n```text\ntext-black-primary\n```\n\n```text\ncarType\n```\n\n========================================\n\nComments:\n- This is an awesome answer! Your custom plugin works perfectly. Thanks :)\n- Update: in tailwindcss v3, you dont need extra plugin for it, all pseudo-classes are included. More tailwindcss.com/docs/hover-focus-and-other-states","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":23,"totalLines":180,"estimatedTokens":879}}151{"id":"stack-76734619","source":"stackoverflow","questionId":76734619,"title":"What is the difference between the clsx and cva NPM packages?","tags":["css","reactjs","tailwind-css","clsx"],"text":"Title: What is the difference between the clsx and cva NPM packages?\nTags: css, reactjs, tailwind-css, clsx\nSource: Stack Overflow\n\nQuestion:\nI'm a React dev and am learning more about making flexible component libraries. I have been trying out tools to make my Tailwind more flexible and I came across these packages. I recently tried using Shadcn and see that they use both `clsx` and `cva`. Can someone explain the difference between them? What are good use cases for each?\n\n========================================\n\nCode:\n```text\nclsx\n```\n\n```text\ncva\n```\n\n```text\n<div class=\"bg-blue-500 text-white p-4\">Hello</div>\n```\n\n```text\nimport clsx from \"classnames\";\n\nconst btnType = \"primary\";\n\n// using strings\nclsx(\"btn\", \"btn--large\"); // => \"btn btn--large\"\n\n// using objects\nclsx(\"btn\", { [`btn--${btnType}`]: true }); // => \"btn btn--primary\"\n\n// using arrays\nclsx([\"btn\", { [`btn--${btnType}`]: true }]); // => \"btn btn--primary\"\n\n// using functions\nclsx(\"btn\", () => ({ [`btn--${btnType}`]: true })); // => \"btn btn--primary\"\n```\n\n```text\nconst Button = ({ type, children }) => {\n const className = clsx(\"btn\", {\n \"btn--primary\": type === \"primary\",\n \"btn--secondary\": type === \"secondary\",\n });\n\n return <button className={className}>{children}</button>;\n};\n```\n\n```text\nimport { cva } from \"class-variance-authority\";\n\nconst button = cva(\"btn\", {\n variants: {\n intent: {\n primary: \"btn--primary\",\n secondary: \"btn--secondary\",\n },\n size: {\n small: \"btn--small\",\n medium: \"btn--medium\",\n },\n },\n compoundVariants: [\n {\n intent: \"primary\",\n size: \"medium\",\n class: \"btn--primary-small\",\n },\n ],\n defaultVariants: {\n intent: \"secondary\",\n size: \"small\",\n },\n});\n```\n\n```text\nconst Button = ({ intent, size, children }) => {\n const button = cva(\"btn\", {\n variants: {\n intent: {\n primary: \"btn--primary\",\n secondary: \"btn--secondary\",\n },\n size: {\n small: \"btn--small\",\n medium: \"btn--medium\",\n },\n },\n compoundVariants: [\n {\n intent: \"primary\",\n size: \"medium\",\n class: \"btn--primary-small\",\n },\n ],\n defaultVariants: {\n intent,\n size,\n },\n });\n\n return <button className={button.className}>{children}</button>;\n};\n```\n\n```text\ndiv\n```\n\n```text\nclsx\n```\n\n```text\ncva\n```\n\n```text\nclsx\n```\n\n```text\nclsx\n```\n\n```text\ncva\n```\n\n```text\ncva\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":136,"estimatedTokens":608}}152{"id":"stack-75365592","source":"stackoverflow","questionId":75365592,"title":"Tailwindcss: How to focus-within and focus-visible at the same time","tags":["css","tailwind-css"],"text":"Title: Tailwindcss: How to focus-within and focus-visible at the same time\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to focus a `div` surrounding a button but only when keyboard focused. Usually `focus-within` works, but in this case it should only focus on keyboard focus (`focus-visible:`) and not when clicking with the mouse(`focus:`).\n\nEssentially, I need to combine `focus-within` and `focus-visible`. How can this be done?\n\nTailwind Play: https://play.tailwindcss.com/ApDB5gSjqv\n\n```\n\n \n Focusable Button\n \n\n```\n\nNotes:\n\n- Based on this thread, it looks like w3c doesn't have support for `focus-within-visible`. What's an alternative or round-about way to achieve this?\n\n- It looks like there is support for `:has(:focus)` selector in some browsers but how should this be applied in Tailwind...? Source\n\n========================================\n\nTop Answer:\nYou can indeed use `:has` with `:focus-visible` to achieve what you want. Check the browser support on caniuse.\n\nUse arbitrary variants to build your selector:\n\n```\n\n Focusable button\n\n```\n\n========================================\n\nCode:\n```html\n<div class=\"flex h-screen items-center justify-center\">\n <div class=\"rounded-lg bg-green-100 px-20 py-20 focus-within:ring-4 focus-within:ring-blue-300\">\n <button class=\"bg-green-200 px-6 py-3 focus:outline-none\">Focusable Button</button>\n </div>\n</div>\n```\n\n```text\ndiv\n```\n\n```text\nfocus-within\n```\n\n```text\nfocus-visible:\n```\n\n```text\nfocus:\n```\n\n```text\nfocus-within\n```\n\n```text\nfocus-visible\n```\n\n```text\nfocus-within-visible\n```\n\n```text\n:has(:focus)\n```\n\n```text\n<div class=\"flex h-screen items-center justify-center\">\n <div class=\"rounded-lg bg-green-100 px-20 py-20 relative\">\n <button class=\"bg-green-200 px-6 py-3 focus:outline-none peer relative z-[1]\">Focusable Button</button>\n <div class=\"absolute inset-0 rounded-lg peer-focus-visible:ring-4 peer-focus-visible:ring-blue-300 z-[0]\"></div>\n</div>\n```\n\n```text\nrelative\n```\n\n```text\npeer\n```\n\n```text\npeer-focus-visible\n```\n\n```text\n<div class=\"[&:has(:focus-visible)]:ring-4\">\n <button>Focusable button</button>\n</div>\n```\n\n```text\n:has\n```\n\n```text\n:focus-visible\n```\n\n========================================\n\nComments:\n- Thanks. It's almost there, but the button can't be clicked anymore cuz the div is on-top of the button...\n- Ah, yes, a z-index issue. Updated answer.","metadata":{"transformedAt":"2026-08-18T18:33:42.890Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":120,"estimatedTokens":596}}153{"id":"stack-67029891","source":"stackoverflow","questionId":67029891,"title":"tailwindcss flex align items and space between","tags":["html","css","flexbox","vertical-alignment","tailwind-css"],"text":"Title: tailwindcss flex align items and space between\nTags: html, css, flexbox, vertical-alignment, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nplease, I have a problem with **tailwindCSS**. I'm trying to make vote buttons (like and disklike). I'm using flex for the buttons and for tags in `footer` of `section`.\n\nPlease, can you help me how I can align text for vote-down to the right?\n\nAnd how can I align text in tags in `footer`?\n\nHere is my code (below this code you can find the link to playground)\n\n```\n\n \n \n \n \n \n \n \n \n \n \n \n 20\n \n \n 48\n \n \n \n \n \n \n Discover beauty of horses\n Riding on horses is not easy as you can see that. Try this long way in horseback ride and you can see nature from most beauty height. You see every detail on the ground or look to the mounts far away from you.\n\n \n Short way\n Medium\n Long way\n \n \n \n \n \n\n```\n\nWhole code you see here: https://play.tailwindcss.com/I5DrixGeka\n\nThanks for any advice\n\nPS: I'm just starting with tailwindCSS. Thanks again\n\n========================================\n\nTop Answer:\nI think you should reconsider how you are using in this situation.\n\nYou are adding `flex` to the wrapper element of the two `divs` holding the information for buttons. When really, you should be adding `flex` to the two `divs`. Like so :\n\n```\n\n \n \n \n \n \n \n\n```\n\nThis will center the content within this `flex` `div` & space them with even spacing all `around`.\n\nThen next is to consider using `grid` or `flex` on the `section` wrapper. I personally favor grid in moments like these, but flex is just as good! Here it is all in action, with extra styles from myself.\n\nhttps://play.tailwindcss.com/ecOu6LHF6s\n\n========================================\n\nCode:\n```text\n<main class=\"h-screen bg-gradient-to-b from-red-700 to-pink-200\">\n <div class=\"p-5\">\n <article class=\"max-w-xs mx-auto bg-white rounded-2xl shadow-md overflow-hidden\">\n <figure>\n <img class=\"object-scale-down w-96\" src=\"https://images.pexels.com/photos/5276584/pexels-photo-5276584.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=200&w=200\" alt=\"Man looking at item at a store\" />\n </figure>\n <article>\n <section class=\"flex text-2xl font-bold text-white p-2\">\n <div class=\"flex-1 text-left bg-green-100 text-black rounded-xl mx-1 px-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z\" />\n </svg>\n 20\n </div>\n <div class=\"flex-1 bg-red-500 rounded-xl mx-3 px-1 align-middle justify-end\">\n 48\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z\" />\n </svg>\n </div>\n </section>\n <section class=\"m-2\">\n <a href=\"#\" class=\"block mt-1 text-lg leading-tight font-medium text-black hover:underline uppercase text-center\">Discover beauty of horses</a>\n <p class=\"text-gray-500\">Riding on horses is not easy as you can see that. Try this long way in horseback ride and you can see nature from most beauty height. You see every detail on the ground or look to the mounts far away from you.</p>\n <footer class=\"flex h-8\">\n <span class=\"flex-shrink text-center text-xs text-white font-semibold bg-green-500 px-3 rounded-2xl mx-2\">Short way</span>\n <span class=\"flex-grop text-center text-xs text-black font-semibold bg-yellow-500 px-3 rounded-2xl mx-2\">Medium</span>\n <span class=\"flex-shrink text-center text-xs text-black font-semibold bg-red-500 px-3 rounded-2xl mx-2\">Long way</span>\n </footer>\n </section>\n </article>\n </article>\n </div>\n</main>\n```\n\n```text\nfooter\n```\n\n```text\nsection\n```\n\n```text\nfooter\n```\n\n```text\n<footer class=\"flex items-center h-8 space-x-2\">\n <span class=\"flex-shrink text-center text-xs text-white font-semibold bg-green-500 px-3 py-1 rounded-2xl\">Short way</span>\n <span class=\"flex-grop text-center text-xs text-black font-semibold bg-yellow-500 px-3 py-1 rounded-2xl\">Medium</span>\n <span class=\"flex-shrink text-center text-xs text-black font-semibold bg-red-500 px-3 py-1 rounded-2xl\">Long way</span>\n</footer>\n```\n\n```text\ntext-right\n```\n\n```text\nflex items-center\n```\n\n```text\nspace-x-#\n```\n\n```text\npx-3 py-1\n```\n\n```html\n<section>\n <div class=\"flex items-center justify-around\">\n <!-- thumbs up -->\n </div>\n <div class=\"flex items-center justify-around\">\n <!-- thumbs down -->\n </div>\n</section>\n```\n\n```text\nflex\n```\n\n```text\ndivs\n```\n\n```text\nflex\n```\n\n```text\ndivs\n```\n\n```text\nflex\n```\n\n```text\ndiv\n```\n\n```text\naround\n```\n\n```text\ngrid\n```\n\n```text\nflex\n```\n\n```text\nsection\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.891Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":207,"estimatedTokens":1296}}154{"id":"stack-76944205","source":"stackoverflow","questionId":76944205,"title":"Using Angular Material UI and Tailwind CSS together","tags":["css","angular","material-ui","tailwind-css"],"text":"Title: Using Angular Material UI and Tailwind CSS together\nTags: css, angular, material-ui, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have been using Material UI with Angular, however as flexlayout is deprecated now, and Tailwind is recommended, so is it sustainable to use bot Material UI and Tailwind together? In order to use Tailwind classes , how do I apply it? Add to a new or to the tags ?\n\n========================================\n\nTop Answer:\nYou can use it like in other html elements, but some part of tailwind classes need to prefixed with \"!\"\n\n```\n\n Add !important to the class\n\n```\n\nYou can read this at: https://tailwindcss.com/docs/configuration#important\nfrom official documentation.\n\n========================================\n\nCode:\n```scss\n$indigo-palette: (\n 900: #19216c,\n 800: #2d3a8c,\n 700: #35469c,\n 600: #4055a8,\n 500: #647acb,\n 400: #7b93db,\n 300: #98aeeb,\n 200: #bed0f7,\n 100: #c5cae9,\n 50: #e8eaf6,\n contrast: (\n 50: rgba(#1f2933, 0.87),\n 100: rgba(#1f2933, 0.87),\n 200: rgba(#1f2933, 0.87),\n 300: rgba(#1f2933, 0.87),\n 400: rgba(#1f2933, 0.87),\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: white,\n ),\n);\n$orange-palette: etc...\n$red-palette: etc...\n);\n\n$my-theme: mat.define-light-theme(\n (\n color: (\n primary: mat.define-palette($indigo-palette, 600),\n accent: mat.define-palette($orange-palette, 600),\n warn: mat.define-palette($red-palette, 500),\n ),\n typography: mat.define-typography-config(),\n /**\n The density system is based on a density scale.\n The scale starts with the default density of 0. \n Each whole number step down (-1, -2, etc.) reduces the affected sizes by 4px, \n down to the minimum size necessary for a component to render coherently.\n */\n density: 0,\n )\n);\n\n@include mat.all-component-themes($my-theme);\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [], // provide glob of files that have tailwind class\n theme: {\n colors: {\n white: colors.white,\n indigo: {\n 900: '#19216c',\n 800: '#2d3a8c',\n 700: '#35469c',\n 600: '#4055a8',\n 500: '#647acb',\n 400: '#7b93db',\n 300: '#98aeeb',\n etc.\n```\n\n```text\n<mat-card class=\"max-w-xl flex-1\">\n ...\n```\n\n```text\n<mat-expansion-panel class=\"!shadow-none\">\n Add !important to the class\n</mat-expansion-panel>\n```\n\n========================================\n\nComments:\n- I have already used the information in the link to install Tailwind in Angular. The question was about using Tailwind with Material UI, as explained in my question.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- Hi. for your questions 1.By whom? Whilst I'm a big Tailwind fan I doubt anyone official from Angular are giving such recommendations. , this is where I got to know github.com/angular/flex-layout\n- tailwind v4 is out, use css variables instead\n- @AndrewAllen can you explain?\n- @Sz2013 When announcing the deprecation, Angular gave replacement options such as working directly with css flex or tailwind. So they did give a recommendation in a sense","metadata":{"transformedAt":"2026-08-18T18:33:42.891Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":112,"estimatedTokens":845}}155{"id":"stack-67970627","source":"stackoverflow","questionId":67970627,"title":"How do I transition background color with Tailwind CSS in React?","tags":["css","reactjs","css-transitions","gatsby","tailwind-css"],"text":"Title: How do I transition background color with Tailwind CSS in React?\nTags: css, reactjs, css-transitions, gatsby, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am building a Gatsby site and I want to have my header change the background color opacity as I scroll down. What's the best way to approach this?\n\nI currently have this, where `isScrolled` is a state value that I'm updating with a custom hook. The problem I have is that there is no transition appearing, I'm pretty sure because React is re-rendering the whole component when the state changes.\n\nWhat would be the appropriate tool/method for solving this problem?\n\n```\n\n \n \n \n About\n Blog\n Contact\n \n \n\n```\n\nI've tried the HeadlessUI Transition component but that doesn't work because it only transitions in an entire component (as opposed to a property) and I haven't been able to get React-Transition-Group working either. Any help would be appreciated,\n\nThanks\n\n========================================\n\nCode:\n```html\n<header\n className={\n `h-16 z-10 fixed top-0 left-0 w-screen transition-all\n ${\n isScrolled ? \"bg-white\" : \"bg-transparent\"\n }`\n }\n>\n <div className=\"px-8 container mx-auto flex items-center justify-between h-full\">\n <Logo/>\n <nav>\n <HeaderLink to=\"about-us\">About</HeaderLink>\n <HeaderLink to=\"blog\">Blog</HeaderLink>\n <HeaderLink to=\"contact\">Contact</HeaderLink>\n </nav>\n </div>\n</header>\n```\n\n```text\nisScrolled\n```\n\n```text\n...\nconst [isScrolled, setIsScrolled] = useState(false);\n...\n <header\n className={`h-16 z-10 fixed top-0 left-0 w-screen transition-all duration-200\n ${isScrolled ? \"bg-white\" : \"bg-transparent\"}`}\n >\n```\n\n```text\nimport clsx from 'clsx'\n...\n// state define to use conditional logic\nconst [isScrolled, setIsScrolled] = useState(false);\n...\n// define base css classes as constant\nconst base = 'h-16 z-10 fixed top-0 left-0 w-screen transition-all duration-200' as string\n\nreturn (\n ...\n <header className={clsx(base, isScrolled ? \"bg-white\" : \"bg-transparent\")}\n >\n ...\n)\n```\n\n```text\n// Strings (variadic)\nclsx('foo', true && 'bar', 'baz');\n//=> 'foo bar baz'\n\n// Objects\nclsx({ foo:true, bar:false, baz:isTrue() });\n//=> 'foo baz'\n\n// Objects (variadic)\nclsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });\n//=> 'foo --foobar'\n\n// Arrays\nclsx(['foo', 0, false, 'bar']);\n//=> 'foo bar'\n\n// Arrays (variadic)\nclsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);\n//=> 'foo bar baz hello there'\n\n// Kitchen sink (with nesting)\nclsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');\n//=> 'foo bar hello world cya'\n```\n\n```text\nclsx\n```\n\n========================================\n\nComments:\n- This is applying transition for everything not only background-color !\n- Well you can change `transition-all` to `transition-colors`","metadata":{"transformedAt":"2026-08-18T18:33:42.891Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":117,"estimatedTokens":729}}156{"id":"stack-66613843","source":"stackoverflow","questionId":66613843,"title":"How to style SVG with Tailwind CSS when using `fill=\"url(#a)\"`?","tags":["html","css","reactjs","svg","tailwind-css"],"text":"Title: How to style SVG with Tailwind CSS when using `fill=\"url(#a)\"`?\nTags: html, css, reactjs, svg, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have seen @adamwathan's live streams & he does `className=\"w-5 h-5 text-white\" fill=\"currentColor\"` to style an SVG through Tailwind.\n\nHow can I do the same for `linearGradient`?\n\nI have the following SVG:\n\n```\nimport React from 'react'\n\nexport const LinearGradient = () => (\n \n \n \n \n \n \n \n \n \n)\n```\n\nHow do I style `linearGradient` in SVG that uses `fill=\"url(#a)\"` perfectly? I can't change `fill=\"currentColor\"` as it will lose reference to `id=\"a\"`.\n\nThe original SVG is at https://www.sketch.com/images/icons/mac/monochrome/17x17/circle.gradient.linear.svg\n\nAny solutions?\n\n========================================\n\nTop Answer:\nYou can also create variables from your `tailwind.config.js` that you can use in your SVG.\n\nHere is an example of how to do it inside a Laravel 8 project.\n\n### tailwind.config.js\n\n```\nconst colors = require('tailwindcss/colors');\n\nmodule.exports = {\n theme: {\n colors: {\n blue: {\n 300: colors.blue[300],\n 500: colors.blue[500],\n },\n ...\n```\n\n### resources/css/variables.css\n\n```\n:root {\n --color-blue-300: theme('colors.blue.300');\n --color-blue-500: theme('colors.blue.500');\n}\n```\n\n### resources/css/app.css\n\n```\n@import './variables.css';\n\n@import 'tailwindcss/base';\n...\n```\n\n### resources/views/svg/my-svg.blade.php\n\n```\n...\n\n \n \n \n \n\n...\nThen, i'm using in another view (ex: my-layout.blade.php) `@include(\"svg.my-svg\")`.\nUsing this instead of `*If you really want to use ``, a concept is to use controller to build your svg and return a view with `response(..., 200)->header('Content-Type', 'image/svg+xml');`. I did something like that where i set the color in the url `(and it work successfully with tinyMCE 6 which disallow the usage of svg)*\n\n========================================\n\nCode:\n```text\nimport React from 'react'\n\nexport const LinearGradient = () => (\n <svg className=\"w-5 h-5\" viewBox=\"0 0 17 17\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient x1=\"50%\" y1=\"92.034%\" x2=\"50%\" y2=\"7.2%\" id=\"a\">\n <stop offset=\"0%\" />\n <stop stopOpacity=\"0\" offset=\"100%\" />\n </linearGradient>\n </defs>\n <circle\n className=\"text-white\"\n stroke=\"currentColor\"\n fill=\"url(#a)\"\n cx=\"8.5\"\n cy=\"8.5\"\n r=\"6\"\n fillRule=\"evenodd\"\n fillOpacity=\".8\"\n />\n </svg>\n)\n```\n\n```text\nclassName=\"w-5 h-5 text-white\" fill=\"currentColor\"\n```\n\n```text\nlinearGradient\n```\n\n```text\nlinearGradient\n```\n\n```text\nfill=\"url(#a)\"\n```\n\n```text\nfill=\"currentColor\"\n```\n\n```text\nid=\"a\"\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n<svg class=\"w-32 h-32 text-blue-500\" viewBox=\"0 0 17 17\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient x1=\"50%\" y1=\"92.034%\" x2=\"50%\" y2=\"7.2%\" id=\"a\">\n <stop offset=\"0%\" stop-color=\"currentColor\" />\n <stop stop-opacity=\"0\" offset=\"100%\" stop-color=\"white\" />\n </linearGradient>\n </defs>\n <circle stroke=\"currentColor\" fill=\"url(#a)\" cx=\"8.5\" cy=\"8.5\" r=\"6\" fill-rule=\"evenodd\" fill-opacity=\".8\" />\n</svg>\n```\n\n```text\nlinearGradient\n```\n\n```text\nstop-color\n```\n\n```text\n<stop>\n```\n\n```text\nconst colors = require('tailwindcss/colors');\n\nmodule.exports = {\n theme: {\n colors: {\n blue: {\n 300: colors.blue[300],\n 500: colors.blue[500],\n },\n ...\n```\n\n```text\n:root {\n --color-blue-300: theme('colors.blue.300');\n --color-blue-500: theme('colors.blue.500');\n}\n```\n\n```text\n@import './variables.css';\n\n@import 'tailwindcss/base';\n...\n```\n\n```text\n...\n<defs>\n <linearGradient id=\"grad1\" x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style=\"stop-color:var(--color-blue-300);\" />\n <stop offset=\"100%\" style=\"stop-color:var(--color-blue-500);\" />\n </linearGradient>\n</defs>\n...\n<path style=\"fill: url(#grad1);\" ...\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@include(\"svg.my-svg\")\n```\n\n```text\n<img src=\"my-svg.svg\"...\n```\n\n```text\n<img>\n```\n\n```text\nresponse(..., 200)->header('Content-Type', 'image/svg+xml');\n```\n\n```text\n<img src=\"my-svg.svg?fill=blue-500\"...\n```\n\n========================================\n\nComments:\n- Why doesn't it work without the `div`? I put `className=\"w-5 h-5 text-pink-400\"` locally & that works fine unlike in JSBin. Even `circle` isn't working on JSBin but works locally.\n- That was my bad, I forgot to change `className` to `class` in my snippet (it doesn't use React unlike your code). I've updated the code.\n- Weird, I tried doing it in JSBin & it didn't work so I kept the `div` as is. Glad, it's working now :)\n- Absolutely ingenious!","metadata":{"transformedAt":"2026-08-18T18:33:42.891Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":235,"estimatedTokens":1213}}157{"id":"stack-64663368","source":"stackoverflow","questionId":64663368,"title":"Background Image with opacity in TailwindCSS","tags":["css","tailwind-css"],"text":"Title: Background Image with opacity in TailwindCSS\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to recreate a project from vanilla CSS to TailwindCSS. But I tried a lot of options and failed badly.\n\nThis is the CSS code:\n\n```\nheader {\n background: linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n background-attachment: fixed;\n position: relative;\n}\n```\n\nCan anyone transform this code to the equivalent TailwindCSS code (using utilities)?\n\n========================================\n\nTop Answer:\nI found a a great tool for converting regular CSS to Tailwindcss CSS utility classes at **https://transform.tools/css-to-tailwind**\n\n```\n`/*\n Based on TailwindCSS recommendations,\n consider using classes instead of the `@apply` directive\n @see https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction\n*/\nheader {\n @apply bg-no-repeat bg-cover bg-[center_center] bg-fixed relative;\n background: linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)),\n url(img/hero-bg.jpg);\n}\n```\n\n========================================\n\nCode:\n```css\nheader {\n background: linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n background-attachment: fixed;\n position: relative;\n}\n```\n\n```text\n<header\n class=\"relative bg-fixed bg-center bg-cover bg-no-repeat\"\n style=\"background-image:linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg)\">\n \n</header>\n```\n\n```text\nheader {\n background-image:linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg)\n}\n\n\n\n<header class=\"relative bg-fixed bg-center bg-cover bg-no-repeat\">\n \n</header>\n```\n\n```text\n`/*\n Based on TailwindCSS recommendations,\n consider using classes instead of the `@apply` directive\n @see https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction\n*/\nheader {\n @apply bg-no-repeat bg-cover bg-[center_center] bg-fixed relative;\n background: linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)),\n url(img/hero-bg.jpg);\n}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n/* Extending bg-* with new rules:\n - for colors, override the --tw-parent-bg-color variable with the color value so it can be used in child elements\n - if a modifier exists and the value is not a concrete color name (99% of the time it could be an image), implement the CSS solution for combining a transparent color with an image\n*/\n@utility bg-* {\n --tw-parent-bg-color: --value(--color-*);\n background-image: linear-gradient(\n color-mix(in srgb, var(--tw-parent-bg-color) calc(100% - --modifier(integer) * 1%), transparent),\n color-mix(in srgb, var(--tw-parent-bg-color) calc(100% - --modifier(integer) * 1%), transparent)\n ), --value([*]);\n @supports (color: color-mix(in lab, red, red)) {\n background-image: linear-gradient(\n color-mix(in oklab, var(--tw-parent-bg-color) calc(100% - --modifier(integer) * 1%), transparent),\n color-mix(in oklab, var(--tw-parent-bg-color) calc(100% - --modifier(integer) * 1%), transparent)\n ), --value([*]);\n }\n}\n\n/* Setting the variable via @property, which is supported by the Baseline 2023 browsers targeted by v4 */\n@property --tw-parent-bg-color {\n syntax: \"*\";\n inherits: true;\n initial-value: #fff;\n}\n\n/* An extra utility to manipulate --tw-parent-bg-color; it's not strictly necessary if the parent's bg can be clearly inferred through CSS variable inheritance */\n@utility bg-opacity-* {\n --tw-parent-bg-color: --value(--color-*, [*]);\n}\n</style>\n\n<!-- Example where it inherits the color from the parent -->\n<div class=\"w-screen bg-amber-400 p-4 flex gap-4\">\n <div class=\"size-16 bg-[url(https://picsum.photos/100/100)]/30\"></div>\n <div class=\"size-16 bg-[url(https://picsum.photos/100/100)]/50\"></div>\n <div class=\"size-16 bg-[url(https://picsum.photos/100/100)]/70\"></div>\n <div class=\"size-16 bg-[url(https://picsum.photos/100/100)]/100\"></div>\n</div>\n\n<!-- Example showing that it has no effect on bg-{color}/{opacity} -->\n<div class=\"w-screen bg-amber-400 p-4 flex gap-4\">\n <div class=\"size-16 bg-sky-500/30\"></div>\n <div class=\"size-16 bg-sky-500/50\"></div>\n <div class=\"size-16 bg-sky-500/70\"></div>\n <div class=\"size-16 bg-sky-500/100\"></div>\n</div>\n\n<!-- Example where you declare a custom color -->\n<div class=\"w-screen p-4 flex gap-4\">\n <div class=\"size-16 bg-[url(https://picsum.photos/100/100)]/30 bg-opacity-amber-400\"></div>\n <div class=\"size-16 bg-[url(https://picsum.photos/100/100)]/50 bg-opacity-amber-400\"></div>\n <div class=\"size-16 bg-[url(https://picsum.photos/100/100)]/70 bg-opacity-amber-400\"></div>\n <div class=\"size-16 bg-[url(https://picsum.photos/100/100)]/100 bg-opacity-amber-400\"></div>\n</div>\n\n<!-- Example where it cannot detect the parents color -->\n<div class=\"w-screen p-4 flex gap-4\" style=\"background-color: black;\">\n <div class=\"size-16 bg-[url(https://picsum.photos/100/100)]/30\"></div>\n <div class=\"size-16 bg-[url(https://picsum.photos/100/100)]/50\"></div>\n <div class=\"size-16 bg-[url(https://picsum.photos/100/100)]/70\"></div>\n <div class=\"size-16 bg-[url(https://picsum.photos/100/100)]/100\"></div>\n</div>\n```\n\n```text\nbg-*\n```\n\n```text\nbg-{url}/{opacity}\n```\n\n```text\nbg-opacity-*\n```\n\n```text\nbg-{image}/{opacity}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"w-screen bg-amber-400 p-4 flex gap-4\">\n <img class=\"size-16 opacity-30\" src=\"https://picsum.photos/100/100\" />\n <img class=\"size-16 opacity-50\" src=\"https://picsum.photos/100/100\" />\n <img class=\"size-16 opacity-70\" src=\"https://picsum.photos/100/100\" />\n <img class=\"size-16 opacity-100\" src=\"https://picsum.photos/100/100\" />\n</div>\n<div class=\"w-screen p-4 flex gap-4\">\n <img class=\"size-16 opacity-30 bg-opacity-amber-400\" src=\"https://picsum.photos/100/100\" />\n <img class=\"size-16 opacity-50 bg-opacity-amber-400\" src=\"https://picsum.photos/100/100\" />\n <img class=\"size-16 opacity-70 bg-opacity-amber-400\" src=\"https://picsum.photos/100/100\" />\n <img class=\"size-16 opacity-100 bg-opacity-amber-400\" src=\"https://picsum.photos/100/100\" />\n</div>\n<div class=\"w-screen p-4 flex gap-4\" style=\"background-color: black;\">\n <img class=\"size-16 opacity-30\" src=\"https://picsum.photos/100/100\" />\n <img class=\"size-16 opacity-50\" src=\"https://picsum.photos/100/100\" />\n <img class=\"size-16 opacity-70\" src=\"https://picsum.photos/100/100\" />\n <img class=\"size-16 opacity-100\" src=\"https://picsum.photos/100/100\" />\n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"w-screen bg-amber-400 p-4 flex gap-4\">\n <div class=\"size-16 opacity-30\"><div class=\"size-16 bg-[url(https://picsum.photos/100/100)]\"></div></div>\n <div class=\"size-16 opacity-50\"><div class=\"size-16 bg-[url(https://picsum.photos/100/100)]\"></div></div>\n <div class=\"size-16 opacity-70\"><div class=\"size-16 bg-[url(https://picsum.photos/100/100)]\"></div></div>\n <div class=\"size-16 opacity-100\"><div class=\"size-16 bg-[url(https://picsum.photos/100/100)]\"></div></div>\n</div>\n<div class=\"w-screen p-4 flex gap-4\">\n <div class=\"size-16 opacity-30 bg-opacity-amber-400\"><div class=\"size-16 bg-[url(https://picsum.photos/100/100)]\"></div></div>\n <div class=\"size-16 opacity-50 bg-opacity-amber-400\"><div class=\"size-16 bg-[url(https://picsum.photos/100/100)]\"></div></div>\n <div class=\"size-16 opacity-70 bg-opacity-amber-400\"><div class=\"size-16 bg-[url(https://picsum.photos/100/100)]\"></div></div>\n <div class=\"size-16 opacity-100 bg-opacity-amber-400\"><div class=\"size-16 bg-[url(https://picsum.photos/100/100)]\"></div></div>\n</div>\n<div class=\"w-screen p-4 flex gap-4\" style=\"background-color: black;\">\n <div class=\"size-16 opacity-30\"><div class=\"size-16 bg-[url(https://picsum.photos/100/100)]\"></div></div>\n <div class=\"size-16 opacity-50\"><div class=\"size-16 bg-[url(https://picsum.photos/100/100)]\"></div></div>\n <div class=\"size-16 opacity-70\"><div class=\"size-16 bg-[url(https://picsum.photos/100/100)]\"></div></div>\n <div class=\"size-16 opacity-100\"><div class=\"size-16 bg-[url(https://picsum.photos/100/100)]\"></div></div>\n</div>\n```\n\n```text\nbackground-image\n```\n\n```text\nimg\n```\n\n```text\n<img>\n```\n\n```text\nopacity-*\n```\n\n```text\nbackground-image\n```\n\n```text\nbg-{image}\n```\n\n```text\nopacity-*\n```\n\n```html\n<header\n class=\"\n relative bg-fixed bg-center bg-cover bg-no-repeat\n bg-[linear-gradient(rgba(135,80,156,0.9),rgba(135,80,156,0.9)),url(img/hero-bg.jpg)]\n \"\n>\n ...\n</header>\n```\n\n```html\n<header\n class=\"\n relative bg-fixed bg-center bg-cover bg-no-repeat\n bg-[linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.9)),url(img/hero-bg.jpg)]\n \"\n>\n ...\n</header>\n```\n\n```html\n<header\n class=\"\n relative bg-fixed bg-center bg-cover bg-no-repeat\n [--bg-opacity:0.9] [--bg-opacity-color:0,0,0]\n bg-[linear-gradient(rgba(var(--bg-opacity-color),var(--bg-opacity)),rgba(var(--bg-opacity-color),var(--bg-opacity))),url(img/hero-bg.jpg)]\n \"\n>\n ...\n</header>\n```\n\n```text\nrgba()\n```\n\n```text\noklch()\n```\n\n```text\nbg-{image}/{opacity}\n```\n\n```text\nbg-{image}/{opacity}\n```\n\n```text\nopacity-*\n```\n\n```text\nimg\n```\n\n```text\nbackground-image\n```\n\n```text\n<img>\n```\n\n```text\nopacity-*\n```\n\n```text\nbg-{image}\n```\n\n```text\nopacity-*\n```\n\n========================================\n\nComments:\n- In TailwindCSS v4, functional utilities can be declared or extended without a plugin. A `bg-*` utility can be extended as follows: stackoverflow.com/a/79837064/15167500\n- Or just use nested `img` or `background-image`: stackoverflow.com/a/79837133/15167500\n- Thanks a lot. That worked. But why didn't tailwind's gradient CSS property work like this? Also, there's nothing like this in the documentation.\n- Right, I've written a tutorial for you answering these questions: bleext.com/post/creating-a-hero-header-with-a-fixed-image\n- I suggest to use css vars for colors and background urls. Using these css vars in tailwind config, you can benefit from shared theme config (static or tailwind way).","metadata":{"transformedAt":"2026-08-18T18:33:42.891Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":32,"totalLines":330,"estimatedTokens":2585}}158{"id":"stack-66553796","source":"stackoverflow","questionId":66553796,"title":"animate height property tailwindcss","tags":["reactjs","tailwind-css"],"text":"Title: animate height property tailwindcss\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIs there a way to animate the height property, this my simple code but the height isn't animated it just changed instantly\n\n```\n\n { setSecond(!secondElement) }}>\n TITLE \n \n\n 1\n 2\n \n\n```\n\n========================================\n\nCode:\n```text\n<div>\n<a className=\"group flex items-center w-full pr-4 pb-2 text-gray-600 transition-transform transform rounded-md hover:translate-x-1 focus:outline-none focus:ring collapsed\" onClick={() => { setSecond(!secondElement) }}>\n <span className=\"ml-1 text-white text-xl group\"> TITLE </span>\n </a>\n</div>\n<div className={`transition-all duration-300 ease-in-out transform ${!secondElement ? 'h-0' : 'h-auto'} bg-blue mt-2 space-y-2 px-7`}>\n <a\n role=\"menuitem\"\n className=\"block p-2 text-sm text-white transition-colors duration-200 rounded-md dark:text-light dark:hover:text-light hover:text-gray-700\">1</a>\n <a\n role=\"menuitem\"\n className=\"block p-2 text-sm text-white transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700\">2</a>\n </div>\n</div>\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n transitionProperty: {\n height: 'height'\n }\n }\n }\n}\n```\n\n```html\n<div class=\"transition-[height]\">\n <!-- ... -->\n</div>\n```\n\n```text\ntransition-property\n```\n\n```text\nheight\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntransition-property\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- Hi, when adding this in my config, it does work but only when going from h-0 to h-20 for example, it does not work form h-0 to h-auto. any idea why ?\n- It's not recommended to use `auto` in transitions as the behaviour is unpredictable depending on the browser.","metadata":{"transformedAt":"2026-08-18T18:33:42.891Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":82,"estimatedTokens":459}}159{"id":"stack-65976223","source":"stackoverflow","questionId":65976223,"title":"How to use calc() in tailwind CSS?","tags":["css","tailwind-css"],"text":"Title: How to use calc() in tailwind CSS?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have this html:\n\n```\n\n \n \n\n```\n\nI have set the `.navBar`'s height to `h-7`. Now I want to set `.content-container`'s height to `100vh-(h-7)`.\n\nHow can I use `calc()` to set it?\n\n========================================\n\nTop Answer:\nDon't put space in calc:\n\n```\nclass=\"w-[calc(100%+2rem)]\"\n```\n\nOutput:\n\n```\n.w-\\[calc\\(100\\%\\+2rem\\)\\] {\n width: calc(100% + 2rem);\n}\n```\n\nOr you can use underscores `_` instead of whitespaces:\n\nRef: Handling whitespace\n\n\r\n\r\n\n```\n\n```\n\n\r\n\r\n\r\n\nWe can use the theme variables as well:\n\n```\nh-[calc(100%-theme(space.24))]\n```\n\n========================================\n\nCode:\n```html\n<div class=\"container h-screen w-screen\">\n <div class=\"navBar h-7\"></div>\n <div class=\"content-container\"></div>\n</div>\n```\n\n```text\n.navBar\n```\n\n```text\nh-7\n```\n\n```text\n.content-container\n```\n\n```text\n100vh-(h-7)\n```\n\n```text\ncalc()\n```\n\n```text\n.content-container {\n height: calc(100vh - theme('spacing.7'));\n}\n```\n\n```text\ntheme()\n```\n\n```text\n@apply\n```\n\n```text\nclass=\"w-[calc(100%+2rem)]\"\n```\n\n```text\n.w-\\[calc\\(100\\%\\+2rem\\)\\] {\n width: calc(100% + 2rem);\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<div class=\"h-20 w-[calc(100%_-_10rem)] bg-yellow-200\"></div>\n```\n\n```text\nh-[calc(100%-theme(space.24))]\n```\n\n```text\n_\n```\n\n```text\n<div class=\"w-screen h-[calc(100vh+1.75rem)] bg-slate-400\"></div>\n```\n\n```text\n.content-container {\n @apply h-[calc(100vh+1.75rem)];\n}\n```\n\n```text\nh-[calc(100vh+1.75rem)\n```\n\n```html\n<div class=\"h-[calc(512px-3rem)]\"></div>\n```\n\n```css\n.h-\\[calc\\(512px-3rem\\)\\] {\n height: calc(512px - 3rem);\n}\n```\n\n```text\ncalc()\n```\n\n```html\n<div class=\"flex gap-6\">\n <div class=\"basis-1/3\">Test</div>\n <div class=\"basis-1/3\">Test</div>\n <div class=\"basis-1/3\">Test</div>\n <div class=\"basis-1/3\">Test</div>\n</div>\n```\n\n```js\nflexBasis({ theme }) {\n const spacing = theme(\"spacing\");\n const size = theme(\"size\");\n\n // Filter percentage sizes and generate custom flex-basis values\n const percentageSizes = Object.keys(size).filter((key) => key.includes('/'));\n\n // Map over percentage sizes and spacing to generate CSS custom properties\n const flexBasisValues = percentageSizes.flatMap((sizeKey) =>\n Object.entries(spacing).map(([spacingKey, spacingValue]) => {\n const [numerator, denominator] = sizeKey.split('/').map(Number);\n const calcValue = `calc((100% - ${(denominator - 1)} * ${spacingValue}) / ${denominator} * ${numerator})`;\n return [`${sizeKey}-calc-${spacingKey}`, calcValue];\n })\n );\n return Object.fromEntries(flexBasisValues);\n},\n```\n\n```text\n<div class=\"flex gap-6\">\n <div class=\"basis-1/3-calc-6\">Test</div>\n <div class=\"basis-1/3-calc-6\">Test</div>\n <div class=\"basis-1/3-calc-6\">Test</div>\n <div class=\"basis-1/3-calc-6\">Test</div>\n</div>\n```\n\n```text\nbasis-[calc((100%_-_2_*_theme(spacing.6))_/_3)]\n```\n\n```text\nflexBasis\n```\n\n```text\n.content-container {\n height: calc(100vh - 1.75rem); /* Subtract the height of h-7, assuming 1rem = 16px */\n}\n```\n\n```text\n:class=`w-[calc(100%-${property})]`\n```\n\n```text\nconst spacing = reactive({\n 1: \"w-[calc(100%-2rem)]\",\n 2: \"w-[calc(100%-3rem)]\",\n 3: \"w-[calc(100%-4rem)]\",\n });\n```\n\n```text\nclass=\"w-[calc(100%-var(--offset))]\" style=\"--offset: 2rem;\".\n```\n\n```text\n:root {\n --offset: 2rem;\n}\n```\n\n```text\nclass=\"w-[calc(100%-var(--offset))]\"\n```\n\n```text\n:class=\"spacing[1]\n```\n\n```css\n/* 100vh - h-{number} */\n@utility h-screen-minus-* {\n height: calc(100vh - var(--spacing) * --value(integer));\n height: calc(100vh - --value([length]));\n}\n/* 100dvh - h-{number} */\n@utility h-dvh-minus-* {\n height: calc(100dvh - var(--spacing) * --value(integer));\n height: calc(100dvh - --value([length]));\n}\n/* 100lvh - h-{number} */\n@utility h-lvh-minus-* {\n height: calc(100lvh - var(--spacing) * --value(integer));\n height: calc(100lvh - --value([length]));\n}\n/* 100svh - h-{number} */\n@utility h-lvh-minus-* {\n height: calc(100svh - var(--spacing) * --value(integer));\n height: calc(100svh - --value([length]));\n}\n/* 100% - h-{number} */\n@utility h-full-minus-* {\n height: calc(100% - var(--spacing) * --value(integer));\n height: calc(100% - --value([length]));\n}\n\n/* 100vw - w-{number} */\n@utility w-screen-minus-* {\n width: calc(100vw - var(--spacing) * --value(integer));\n width: calc(100vw - --value([length]));\n}\n/* 100% - w-{number} */\n@utility w-full-minus-* {\n width: calc(100% - var(--spacing) * --value(integer));\n width: calc(100% - --value([length]));\n}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@utility h-screen-minus-* {\n height: calc(100vh - var(--spacing) * --value(integer)); /* handle numbers e.g. h-screen-minus-12 */\n height: calc(100vh - --value([length])); /* handle arbitrary values e.g. h-screen-minus-[20px] */\n}\n</style>\n\n<div class=\"flex text-white\">\n <div class=\"h-screen w-30 bg-red-800\">100vh</div>\n <div class=\"h-screen-minus-7 w-30 bg-red-700\">100vh - (h-7)</div>\n <div class=\"h-screen-minus-14 w-30 bg-red-600\">100vh - (h-14)</div>\n <div class=\"h-screen-minus-96 w-30 bg-red-500\">100vh - (h-96)</div>\n <div class=\"h-screen-minus-[80px] w-30 bg-red-500\">100vh - (h-[80px])</div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@utility w-screen-minus-* {\n width: calc(100vw - var(--spacing) * --value(integer)); /* handle numbers e.g. w-screen-minus-12 */\n width: calc(100vw - --value([length])); /* handle arbitrary values e.g. w-screen-minus-[20px] */\n}\n</style>\n\n<div class=\"flex flex-col text-white\">\n <div class=\"w-screen h-7 bg-red-800\">100vw</div>\n <div class=\"w-screen-minus-7 h-7 bg-red-700\">100vw - (w-7)</div>\n <div class=\"w-screen-minus-14 h-7 bg-red-600\">100vw - (w-14)</div>\n <div class=\"w-screen-minus-96 h-7 bg-red-500\">100vw - (w-96)</div>\n <div class=\"w-screen-minus-[80px] h-7 bg-red-500\">100vw - (w-[80px])</div>\n</div>\n```\n\n```text\n@utility\n```\n\n```text\nh-screen-minus-{number}\n```\n\n```text\nh-7\n```\n\n```text\n100vh\n```\n\n```text\nh-screen-minus\n```\n\n```text\nh-screen-minus-{number}\n```\n\n```text\n{number}\n```\n\n```text\n100vh\n```\n\n```text\nheight\n```\n\n```text\nheight: calc(var(--spacing) * <number>);\n```\n\n```text\n@utility\n```\n\n```text\nh-\\[calc\\(100vh\\-2rem\\)\\]\n```\n\n```text\nw-screen-minus-{number}\n```\n\n```text\n100vw - h-{number}\n```\n\n```text\nw-screen-minus-{number}\n```\n\n```text\nwidth\n```\n\n```text\nwidth: calc(var(--spacing) * <number>);\n```\n\n```text\nh-<number>\nheight: calc(var(--spacing) * <number>);\nh-<fraction>\nheight: calc(<fraction> * 100%);\n```\n\n========================================\n\nComments:\n- From TailwindCSS v4 can use `@utility` directive for create a specially `100vh - h-{number}` value as `h-screen-minus-{number}` class. Show utilities here.\n- This is the exact use case I was looking for. Not sure what 'spacing.7' is exactly, but thanks!\n- I think the `spacing.` is relevant to `h-` for me I use h-20 so `spacing.20` worked for me\n- @JohnY Brother you should not put spaces in your class string. it is mentioned many times in this answer.\n- A bit late to the party but \"spacing\" is the unit in tailwind used for all padding, margin, gap, height, width, etc. In case other people reading this are wondering.\n- Tailwind default spacing scale\n- It is also possible to omit the whitespaces like so `w-[calc(100%-10rem)]`\n- Remember guys, **without space!**\n- If you want to add this to the tailwind config file, then you should use spaces instead of underscores when extending the theme.\n- It's much better to rely on the spacing rather than on the exact value. So `h-[calc(100%-theme(space.N))]` is much better. The second best option is `h-[calc(100%-var(--spacing)*10)]`.\n- There are still projects that use older versions of Tailwind, before v4. In those cases, I think the more dynamic insertion of values as partials to the existing class is more possible.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review","metadata":{"transformedAt":"2026-08-18T18:33:42.891Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":53,"totalLines":399,"estimatedTokens":2128}}160{"id":"stack-67119992","source":"stackoverflow","questionId":67119992,"title":"How to access all the direct children of a div in Tailwind CSS?","tags":["html","css","tailwind-css"],"text":"Title: How to access all the direct children of a div in Tailwind CSS?\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have this HTML:\n\n```\n\n header\n \n sub contents 1 \n sub contents 2\n \n\n```\n\nI want to access the direct children of div with class \"section\" which would be divs with class: \"header\" and \"content\".\n\nI know with CSS we can do: `div.section > div`\n\nBut how to do this using Tailwind CSS?\n\n========================================\n\nTop Answer:\nIn tailwind 3.1, you can use arbitrary values to target child elements.\n\n```\n*]:p-4\">...\np]:mt-0 \">...\n```\n\nhttps://tailwindcss.com/blog/tailwindcss-v3-1#arbitrary-values-but-for-variants\n\nAs mentioned by @kca in the comments, space in the selectors need to be replaced by an underscore character in Tailwind classes. For example if you want to select all descendants, not just the direct children then you can use this:\n\n```\n...\n...\n```\n\n========================================\n\nCode:\n```html\n<div class=\"section\">\n <div class=\"header\">header</div>\n <div class=\"content\">\n <div>sub contents 1</div> \n <div>sub contents 2</div>\n </div>\n</div>\n```\n\n```text\ndiv.section > div\n```\n\n```js\nplugins: [\n function ({ addVariant }) {\n addVariant('child', '& > *');\n addVariant('child-hover', '& > *:hover');\n }\n],\n```\n\n```html\n<div class=\"child:text-gray-200 child-hover:text-blue-500\">...</div>\n```\n\n```html\n<div class=\"[&>*]:text-gray-200 [&>*:hover]:text-blue-500\">...</div>\n```\n\n```html\n<div class=\"*:text-gray-200 hover:*:text-blue-500\">...</div>\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nchild\n```\n\n```text\nchild-hover\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n div.section > div {\n @apply text-xl;\n }\n}\n```\n\n```text\n@layer\n```\n\n```html\n<div class=\"section children:p-4\">\n <div class=\"header\">header</div>\n <div class=\"content\">\n <div>sub contents 1</div> \n <div>sub contents 2</div>\n </div>\n</div>\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nchildren:{your_style}\n```\n\n```text\np-4\n```\n\n```text\nheader\n```\n\n```text\ncontent\n```\n\n```text\nplugin(function({ addVariant, e }) {\n\n addVariant('children', ({ modifySelectors, separator }) => {\n modifySelectors(({ className }) => {\n const newClass = e(`children${separator}${className}`);\n return [\n `.${newClass} > *`,\n // `.${newClass}:hover `,\n ].join(\",\");\n });\n });\n\n addVariant('children-first', ({ modifySelectors, separator }) => {\n modifySelectors(({ className }) => {\n const newClass = e(`children-first${separator}${className}`);\n return [\n `.${newClass} > *:first-child`,\n ].join(\",\");\n });\n });\n\n}),\n```\n\n```text\nvariants: {\n padding: ['responsive', 'children', 'children-hover', 'children-first', ],\n \n },\n```\n\n```text\nchildren\n```\n\n```text\nchild\n```\n\n```text\n<div class=\"[&>*]:p-4\">...</div>\n<div class=\"[&>p]:mt-0 \">...</div>\n```\n\n```text\n<div class=\"[&_*]:p-4\">...</div>\n<div class=\"[&_p]:mt-0 \">...</div>\n```\n\n```html\n<div class=` \n{ classer(\"[&>button:hover]\",\"bg-slate-500 scale-110\") } \n{ classer(\"[&>button]\",\"bg-slate-400 w-full my-2 py-2 rounded\") }\n` >\n```\n\n```js\nexport function classer(selector:string, allclasses:string):string {\n let classList = allclasses.split(\" \")\n return classList.map((item) => selector+\":\" + item).join(\" \")\n}\n```\n\n```html\n<div className='group'>\n <p className='group-hover:text-blue-500'>Blue</p>\n <p className='group-hover:text-red-500'>Red</p>\n</div>\n```\n\n```text\ngroup\n```\n\n```text\n*:pt-4\n```\n\n```text\n<div class=\" *:p-4 \">...</div>\n<div class=\" *:mt-0 \">...</div>\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n\n<div class=\"[&>*]:p-4 [&>*]:bg-blue-200\">\n <p>This paragraph will have padding applied to it.</p>\n <div>Another element with padding applied.</div>\n</div>\n\n<div class=\"[&>p]:mt-3 [&>p]:bg-yellow-200\">\n <p>This paragraph will have no top margin.</p>\n <p>This one too.</p>\n</div>\n```\n\n```css\nbody > div {\n margin-bottom: 10px;\n border-bottom: 5px solid #000;\n}\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant sub (& > *);\n\n@custom-variant sub-div (& > div);\n@custom-variant sub-para (& > p);\n</style>\n\n<div class=\"sub:mt-3 sub:bg-yellow-100\">\n <p>Example for \"sub:\"</p>\n <div>Another element with padding applied.</div>\n <div>Another element with padding applied.</div>\n</div>\n\n<div class=\"sub-div:mt-3 sub-div:bg-yellow-200\">\n <p>Example for \"sub-div:\" not working on para</p>\n <div>Example for \"sub-div:\"</div>\n <div>Another element with padding applied.</div>\n</div>\n\n<div class=\"sub-para:mt-3 sub-para:bg-yellow-300\">\n <p>Example for \"sub-para:\"</p>\n <div>Example for \"sub-para:\" not working on div</div>\n</div>\n```\n\n```css\n/* Targets all immediate child elements of the current element */\n@custom-variant sub (& > *);\n\n/* Targets all immediate <div> child elements of the current element */\n@custom-variant sub-div (& > div);\n/* Targets all immediate <p> child elements of the current element */\n@custom-variant sub-para (& > p);\n/* Targets all immediate <li> child elements of the current element */\n@custom-variant sub-li (& > li);\n/* Targets all immediate <tr> child elements of the current element */\n@custom-variant sub-tr (& > tr);\n/* Targets all immediate <td> child elements of the current element */\n@custom-variant sub-td (& > td);\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant sub (& > *);\n</style>\n\n<div class=\"sub:first:bg-yellow-100\">\n <p>Only first sub with \"sub:first:\"</p>\n <div>Another element with padding applied.</div>\n <div>Another element with padding applied.</div>\n</div>\n\n<div class=\"sub:last:bg-yellow-200\">\n <p>Another element with padding applied.</p>\n <div>Another element with padding applied.</div>\n <div>Only last sub with \"sub:last:\"</div>\n</div>\n\n<div class=\"sub:even:bg-yellow-300\">\n <p>Another element with padding applied.</p>\n <div>Only even subs with \"sub:even:\"</div>\n <div>Another element with padding applied.</div>\n</div>\n\n<div class=\"sub:odd:bg-yellow-400\">\n <p>Only odd subs with \"sub:odd:\"</p>\n <div>Another element with padding applied.</div>\n <div>Only odd subs with \"sub:odd:\"</div>\n</div>\n```\n\n```css\nbody > div {\n margin-bottom: 10px;\n border-bottom: 5px solid #000;\n}\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant sub (& > *);\n\n@custom-variant sub-div (& > div);\n@custom-variant sub-para (& > p);\n</style>\n\n<div class=\"sub:mt-3 sub:sub:bg-yellow-100\">\n <p>Another element with padding applied.</p>\n <div>\n <div>Div's first div child (selected by \"sub:sub:\")</div>\n <div>Div's second child (selected by \"sub:sub:\")</div>\n <div>Div's third child (selected by \"sub:sub:\")</div>\n </div>\n <div>Another element with padding applied.</div>\n</div>\n\n<div class=\"sub:mt-3 sub:sub-div:bg-yellow-100\">\n <p>Another element with padding applied.</p>\n <div>\n <p>Div's first paragraph child (not selected)</p>\n <p>Div's second paragraph (not-selected)</p>\n <div>Div's first div child (selected by \"sub:sub-div:\")</div>\n </div>\n <div>Another element with padding applied.</div>\n</div>\n\n<div class=\"sub:mt-3 sub:sub-para:bg-yellow-100\">\n <p>Another element with padding applied.</p>\n <div>\n <div>Div's first div child (not selected)</div>\n <p>Div's first paragraph (selected by \"sub:sub-para:\")</p>\n <div>Div's second div child (not selected)</div>\n </div>\n <p>Another element with padding applied.</p>\n</div>\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant table-head-tr (& > thead > tr);\n@custom-variant table-th (& > thead > tr > th);\n@custom-variant table-body-tr (& > tbody > tr);\n@custom-variant table-td (& > tbody > tr > td);\n\n@custom-variant table-head (& > thead);\n@custom-variant table-body (& > tbody);\n@custom-variant table-foot (& > tfoot);\n</style>\n\n<table class=\"\n table-head:border-2\n table-head:hover:border-4\n \n table-head-tr:bg-blue-300\n table-th:text-lg\n \n table-body-tr:odd:bg-yellow-100\n table-td:text-blue-500\n table-td:hover:font-bold\n \n table-foot:bg-blue-600 table-foot:border-t-4\n table-foot:hover:bg-blue-100\n\">\n <thead>\n <tr><th>First Col</th><th>Second Col</th><td>Not TH</td></tr>\n </thead>\n <!-- automatically browser move to tbody -->\n <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>\n <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>\n <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>\n <tfoot>\n <tr><th>First Foo</th><th>Second Foo</th><td>Not TH</td></tr>\n </tfoot>\n</table>\n```\n\n```text\n@custom-variants\n```\n\n```text\nsub\n```\n\n```text\n:first\n```\n\n```text\n:last\n```\n\n```text\n:odd\n```\n\n```text\n:even\n```\n\n```text\ntable:\n```\n\n```text\n<table>\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant child (& > *);\n/* @custom-variant child-hover (& > *:hover); */ /* use child:hover: instead of this */\n</style>\n\n<div class=\"\n child:mt-3 child:cursor-pointer\n child:odd:bg-yellow-100 child:even:bg-green-200\n \n child:hover:bg-blue-300 child:hover:font-bold\n\">\n <p>Child</p>\n <div>Another element with padding applied.</div>\n <div>Another element with padding applied.</div>\n</div>\n```\n\n```js\ntailwind.config = {\n plugins: [\n function ({ addVariant }) {\n addVariant('child', '& > *');\n // addVariant('child-hover', '& > *:hover'); // use hover:child: instead of this\n }\n ],\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"\n child:mt-3 child:cursor-pointer\n odd:child:bg-yellow-100 even:child:bg-green-200\n \n hover:child:bg-blue-300 hover:child:font-bold\n\">\n <p>Child</p>\n <div>Another element with padding applied.</div>\n <div>Another element with padding applied.</div>\n</div>\n```\n\n```text\n@custom-variant\n```\n\n```text\n@custom-variant\n```\n\n```text\nchild-hover\n```\n\n```text\nchild:hover:\n```\n\n```text\nchild-hover\n```\n\n```text\nhover:child:\n```\n\n```text\nchild:odd:\n```\n\n```text\nodd:child:\n```\n\n========================================\n\nComments:\n- You can use arbitrary variants, and starting from TailwindCSS v4, you can declare custom variants in CSS-first configuration.\n- idk but this doesnt work for me `div.field_with_errors > label { @apply text-red-900; }`\n- note that the base layer should only contain the apps default styling of commonly used tags, and is not designed for specific use-case styling\n- This is deprecated and doesn't work with tailwind 3.0\n- There's a new library for Tailwind v3+: tailwind-children\n- Can confirm, works for Tailwind 3+. Personally this is my preferred answer, since it allows us to mix existing variants along with the `child:` (and others) this one brings.\n- This was a lifesaver for me. If you're looking for an even more permissive version where the parent effects all children, you can utilize `& *` and `&:hover *` respectively. This came in handy for component development\n- How to achieve the same in browser using CDN? I tried doing `tailwind.config = { plugins: () => {...}}` but that is not working.\n- @SrikanthSharma Interesting; I did not know they had a CDN version. Looking at the documentation, it seems like they do actually support plugins in the CDN version (which would be a miracle in itself). Maybe you did not define plugins as an Array?\n- `:child` variant alone should suffice but `child:hover:...` becomes `:hover > *` and vise versa, which is weird since tailwind docs say that the variants are applied in the order they were given ... so `child-hover` is needed\n- @Sodj You'll have to do `hover:child:` instead and it should work 👍\n- Impressive variants. I've added some notes and a v4 migration in a separate answer.\n- @Jeffrey, starting from v4, variants can finally be nested logically from left to right. I believe it worked illogically in reverse in v3 - as you pointed out.\n- @Sodj, I always found the variant grouping method in v3 to be illogical. Fortunately, starting from v4, `child:hover:` will be the correct form instead of `hover:child:`.\n- I agree that if possible this solution should not be implemented, however, there are times when you can't access to style HTML directly(e.g. 3rd party script). It can be a pretty useful escape hatch when trying to style HTML you can’t directly change.\n- Note that spaces for selecting descendants need to be replaced by underscores, e.g. `'[&_svg]:stroke-white'` instead of `'[& svg]:stroke-white'`. See tailwindcss.com/docs/…\n- @kca Consider adding this to the above answer. I was having trouble with exactly this. The answer should include your point.\n- play.tailwindcss.com/rq8YVDB3LG\n- Native child selectors are now also supported since 19th dec 2023 :-)\n- Is this documented somewhere? The link in this post does not work (anymore). Can't find anything on tailwinds website...\n- How would we go about adding multiple styles? Will `...` work (or something similar) Or do we have to do `...`\n- This was a nice answer, thank you! Just wanted to point that `child-hover` is not necessary. `:child:hover:...` will do the job.","metadata":{"transformedAt":"2026-08-18T18:33:42.891Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":56,"totalLines":538,"estimatedTokens":3321}}161{"id":"stack-55056513","source":"stackoverflow","questionId":55056513,"title":"Vertical align with Tailwind CSS across full screen div","tags":["html","css","user-interface","tailwind-css"],"text":"Title: Vertical align with Tailwind CSS across full screen div\nTags: html, css, user-interface, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow can I vertically align a div with Tailwind?\nWhat I want:\n\n```\n-----------------------------------\n| |\n| |\n| |\n| item1 |\n| item2 |\n| |\n| |\n| |\n-----------------------------------\n```\n\nWhat I currently have:\n\n```\n-----------------------------------\n| item1 |\n| item2 |\n| |\n| |\n| |\n| |\n| |\n| |\n-----------------------------------\n```\n\n\r\n\r\n\n```\n.bgimg {\n background-image: url('https://d1ia71hq4oe7pn.cloudfront.net/photo/60021841-480px.jpg');\n}\n```\n\n\r\n\n```\n\n \n\n### heading\n\n \n call to action\n \n\n```\n\n\r\n\r\n\r\n\nI have successfully centered on the secondary axis (left-right) with class `items-center`. Reading the documentation, I tried `align-middle` but it does not work. I have confirmed the divs have full height and `my-auto`.\n\nI'm using this version of Tailwind: https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\n\nHere is a JSFiddle: https://jsfiddle.net/7xnghf1m/2/\n\n========================================\n\nTop Answer:\nPartly referencing @mythicalcoder 's solution but using only the necessary classes provided by TailwindCss (Version 1.8.+):\n\n- `flex` : To use a flex-div as container\n\n- `h-screen` : To size the container-height to the viewport height.\n\n- `justify-center` : To justify center (horizontal center) - *main axis* - Doc\n\n- `items-center` : To align the items to center (horizontal center) - *cross axis* - Doc\n\nMy Solution to center two text lines:\n\n\r\n\r\n\n```\n\n \n \n \n\n### HEADING\n\n Sub text\n\n \n \n```\n\n========================================\n\nCode:\n```text\n-----------------------------------\n| |\n| |\n| |\n| item1 |\n| item2 |\n| |\n| |\n| |\n-----------------------------------\n```\n\n```text\n-----------------------------------\n| item1 |\n| item2 |\n| |\n| |\n| |\n| |\n| |\n| |\n-----------------------------------\n```\n\n```css\n.bgimg {\n background-image: url('https://d1ia71hq4oe7pn.cloudfront.net/photo/60021841-480px.jpg');\n}\n```\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\">\n<div class=\"flex flex-col h-screen my-auto items-center bgimg bg-cover\">\n <h3 class=\"text-white\">heading</h3>\n <button class=\"mt-2 bg-white text-black font-bold py-1 px-8 rounded m-2\">\n call to action\n </button>\n</div>\n```\n\n```text\nitems-center\n```\n\n```text\nalign-middle\n```\n\n```text\nmy-auto\n```\n\n```html\n<div class=\"flex h-screen\">\n <div class=\"m-auto\">\n <h3>title</h3>\n <button>button</button>\n </div>\n</div>\n```\n\n```text\njustify-center\n```\n\n```text\nalign-middle\n```\n\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div class=\"flex justify-center bg-gray-100\">\n <div class=\"text-gray-800 text-center bg-gray-300 px-4 py-2 m-2\">1</div>\n <div class=\"text-gray-800 text-center bg-gray-300 px-4 py-2 m-2\">2</div>\n <div class=\"text-gray-800 text-center bg-gray-300 px-4 py-2 m-2\">3</div>\n</div>\n```\n\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div class=\"flex flex-col justify-center bg-gray-100\">\n <div class=\"text-gray-800 text-center bg-gray-300 px-4 py-2 m-2\">1</div>\n <div class=\"text-gray-800 text-center bg-gray-300 px-4 py-2 m-2\">2</div>\n <div class=\"text-gray-800 text-center bg-gray-300 px-4 py-2 m-2\">3</div>\n</div>\n```\n\n```text\njustify-center\n```\n\n```text\nitems-center\n```\n\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div class=\"relative h-32 bg-blue-400\">\n <div class=\"absolute inset-0 flex items-center justify-center\">\n Item 1\n <br>\n Item 2\n </div> \n</div>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n <div class=\"flex h-screen justify-center items-center\">\n <div class=\"text-center bg-blue-400\"> <!-- ⬅️ THIS DIV WILL BE CENTERED -->\n <h1 class=\"text-3xl\">HEADING</h1>\n <p class=\"text-xl\">Sub text</p>\n </div>\n </div>\n```\n\n```text\nflex\n```\n\n```text\nh-screen\n```\n\n```text\njustify-center\n```\n\n```text\nitems-center\n```\n\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div class=\"bg-blue-500 flex justify-center h-screen\">\n <div class=\"bg-red-300 self-start\">\n <h1>\n Let us get you off the board <br>\n <span>Pursue what you wanted</span>\n </h1>\n <div class=\"mt-2 flex items-center\">\n <a href=\"#\" class=\"block bg-indigo-600 text-indigo-100 px-4 py-2 rounded text-sm uppercase tracking-wide font-semibold\">Get started</a>\n <a href=\"#\" class=\"block bg-gray-300 text-gray-600 px-4 py-2 rounded text-sm uppercase font-semibold\">Learn more</a>\n </div>\n </div>\n <div class=\"bg-yellow-300 self-center\">\n <h1>\n Let us get you off the board <br>\n <span>Pursue what you wanted</span>\n </h1>\n <div class=\"mt-2 flex items-center\">\n <a href=\"#\" class=\"block bg-indigo-600 text-indigo-100 px-4 py-2 rounded text-sm uppercase tracking-wide font-semibold\">Get started</a>\n <a href=\"#\" class=\"block bg-gray-300 text-gray-600 px-4 py-2 rounded text-sm uppercase font-semibold\">Learn more</a>\n </div>\n </div>\n <div class=\"bg-red-300 self-end\">\n <h1>\n Let us get you off the board <br>\n <span>Pursue what you wanted</span>\n </h1>\n <div class=\"mt-2 flex items-center\">\n <a href=\"#\" class=\"block bg-indigo-600 text-indigo-100 px-4 py-2 rounded text-sm uppercase tracking-wide font-semibold\">Get started</a>\n <a href=\"#\" class=\"block bg-gray-300 text-gray-600 px-4 py-2 rounded text-sm uppercase font-semibold\">Learn more</a>\n </div>\n </div>\n</div>\n```\n\n```text\n<div class=\"grid grid-cols-3 h-screen\">\n<div class=\"bg-red-400 col-span-3 sm:col-span-1 flex\">\n <div class=\"bg-blue-300 m-auto\">\n <h1>hello</h1>\n </div>\n</div>\n<div class=\"col-span-3 bg-red-50 sm:col-span-2\"></div>\n```\n\n```text\n<div class=\"self-center\">\n```\n\n```text\n<div class=\"flex flex-col items-center justify-center h-screen\">\n <h3>title</h3>\n <button>button</button>\n</div>\n```\n\n```html\n<div class=\"grid justify-items-center items-center h-screen\">\n <div>\n <h3>title</h3>\n <button>button</button>\n </div>\n</div>\n```\n\n```text\n<div class=\"grid h-screen place-items-center\">\n <div>\n <h3>title</h3>\n <button>button</button>\n </div>\n</div>\n```\n\n```text\ngrid\n```\n\n```text\nh-screen\n```\n\n```text\njustify-items-center\n```\n\n```text\njustify-items: center;\n```\n\n```text\nitems-center\n```\n\n```text\nalign-items: center;\n```\n\n```text\nplace-items\n```\n\n```text\nplace-items: vertical-value(align) horizontal-value(justify);\n```\n\n```text\nplace-items: vertical-horizontal-value;\n```\n\n```text\nplace-items-center\n```\n\n```text\nplace-items: center;\n```\n\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div class=\"bg-yellow-400 flex flex-col h-screen justify-center items-center\">\n <div class=\"bg-green-500 p-2\">item 1</div>\n <div class=\"bg-pink-500 p-2\">item 2</div>\n</div>\n```\n\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div class=\"bg-yellow-400 flex flex-col h-screen justify-center items-center\">\n <div class=\"bg-green-500 p-2 w-full flex justify-center\">\n item 1\n </div>\n <div class=\"bg-pink-500 p-2 w-full text-center\">item 2</div>\n</div>\n```\n\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div class=\"flex h-screen flex-col\">\n <div class=\"flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl\">\n <div class=\"bg-yellow-400 p-6\">Item 1</div>\n </div>\n <div class=\"flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl\"><div class=\"bg-amber-400 p-6\">Item 2</div></div>\n</div>\n```\n\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div class=\"flex h-screen\">\n <div class=\"flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl\">\n <div class=\"bg-yellow-400 p-6\">Item 1</div>\n </div>\n <div class=\"flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl\"><div class=\"bg-amber-400 p-6\">Item 2</div></div>\n</div>\n```\n\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div>\n <div class=\"flex h-screen items-center justify-center bg-yellow-400\">\n<div class=\"flex justify-center bg-green-500 p-2\">item 1</div>\n<div class=\"bg-pink-500 p-2 text-center\">item 2</div>\n </div>\n</div>\n```\n\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div>\n <div class=\"flex h-screen items-center justify-center bg-yellow-400\">\n <div class=\"flex h-full items-center bg-green-500 p-2\">item 1</div>\n <div class=\"flex h-full items-center bg-pink-500 p-2\">item 2</div>\n </div>\n</div>\n```\n\n```text\ndivs\n```\n\n```text\n<div class=\"flex justify-center items-center flex-col\">\n <p>Item 1</p>\n <p>Item 2</p>\n</div>\n```\n\n```text\n<nav className=\"flex gap-8 items-center justify-center\">\n <Link className=''>SHOP</Link>\n <Link className=''>BACKPACK</Link>\n</nav>\n```\n\n```text\n<div className=\"m-auto\">\n <div className=\"text-center\">\n\n <h3>\n Some text\n </h3>\n\n <button type=\"button\">\n Some button\n </button>\n\n </div>\n </div>\n```\n\n```text\ntext-center\n```\n\n```text\n<p className='place-items-center flex'>Yout text</p>\n```\n\n```text\n<div class=\"flex items-center justify-center h-screen\">\n <div class=\"p-4 bg-blue-500 text-white\">Centered Div</div>\n</div>\n```\n\n```text\n<div class=\"grid place-items-center h-screen\">\n <div class=\"p-4 bg-green-500 text-white\">Centered Div</div>\n</div>\n```\n\n```text\n<div class=\"relative h-screen\">\n <div class=\"absolute inset-0 flex items-center justify-center\">\n <div class=\"p-4 bg-red-500 text-white\">Centered Div</div>\n </div>\n</div>\n```\n\n```text\n<div class=\"h-screen flex items-center justify-center\">\n <div class=\"h-64 w-64 bg-gray-200 flex place-content-center\">\n <p class=\"text-center\">Centered</p>\n </div>\n </div>\n```\n\n========================================\n\nComments:\n- This is already pretty well documented in the TailwindCSS docs: tailwindcss.com/docs/flexbox-align-items/#center\n- replace my-auto by justify-center\n- `m-auto text-center` worked fine for me.\n- In TailwindCSS we have two options Flexbox and CSSgrid. Tailwind using CSSgrid reach this simply with only one class. `place-items-center` You can find the solution for the CSSgrid here : stackoverflow.com/a/70552722/1238917\n- can you please update your answer with how the code looks in the container end the actual element you want to center\n- how? how does this work?? Please please explain. @Nartub\n- There's a lot of magic involving auto margins and flexbox, I suggest googling to get the whole details :)\n- @dhrumilbarot flex is applied only to the next div element (in this case, the one with class=\"m-auto\"), h-screen sets the height to 100vh (100% of the view height) to give it the entire space of the screen to work with. m-auto sets the margins to auto, which pads it out and gives it that 'centered' look\n- @dhrumilbarot Bear in mind that magic isn't very readable (in code), specifying classes lets you and other devs know exactly what's going on and follows documentation standards.\n- Mindblowing. I feel so stupid. Using `mx-auto` all day but never thought of `my` or just `m`\n- For those just wanting to v align a div inside a div, use `h-full`, `h-48` etc.\n- no need to use my-auto. you need to aligned vertically. you already use items-center. now only need justify-content: center.\n- this works until u have to scroll\n- This example is either missing proper explanation, doesn't work or both.\n- I think the fact that there are already 15 answers to this question proves \"there are [a] few methods to do this.\" Does your answer actually provide a new method or just repeat existing ones?\n- this has some very interesting use cases. And overall works very good in the responsive context","metadata":{"transformedAt":"2026-08-18T18:33:42.891Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":53,"totalLines":515,"estimatedTokens":3165}}162{"id":"stack-75728532","source":"stackoverflow","questionId":75728532,"title":"Error message \"Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null\"","tags":["reactjs","three.js","tailwind-css"],"text":"Title: Error message \"Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null\"\nTags: reactjs, three.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm facing\n\nUncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null.\n\nIn the `Link` component of the code:\n\n```\nimport React, { useEffect, useState } from 'react';\nimport { Link } from 'react-router-dom';\n\nimport { styles } from '../styles';\nimport { navLinks } from '../constansts';\nimport { logo, menu, close } from '../assets';\n\nconst Navbar = () => {\n const [active, setActive] = useState('');\n return (\n \n \n {\n setActive('');\n window.scrollTo(0, 0);\n }}\n >\n \n \n \n \n );\n};\n\nexport default Navbar;\n```\n\nHow can I fix it?\n\n========================================\n\nTop Answer:\nBe sure to use routing properly in *App.js* and put the navbar component inside the BrowserRouter. As an example, let's pretend that your *App.js* looks similar to:\n\n```\nfunction App() {\n return (\n \n \n \n }/>\n }/>\n }/>\n }/>\n }/>\n \n \n );\n}\n\nexport default App;\n```\n\nthen (pay attention on NavBar):\n\n```\nfunction App() {\n return (\n \n \n \n \n \n }/>\n }/>\n }/>\n }/>\n }/>\n \n \n );\n}\n\nexport default App;\n```\n\nBe sure to also add the import!\n\nBefore wrapping the routes, I imported BrowserRouter as Router, because it helps me to understand the code. That's why it's declared like that.\n\n========================================\n\nCode:\n```js\nimport React, { useEffect, useState } from 'react';\nimport { Link } from 'react-router-dom';\n\nimport { styles } from '../styles';\nimport { navLinks } from '../constansts';\nimport { logo, menu, close } from '../assets';\n\nconst Navbar = () => {\n const [active, setActive] = useState('');\n return (\n <nav className={`${styles.paddingX} w-full flex items-center py-5 fixed top-0 z-20 bg-primary`}>\n <div className=\"w-full flex justify-between items-center max-w-7x1 max-auto\">\n <Link\n to=\"/\"\n className=\"flex items-center gap-2\"\n onClick={() => {\n setActive('');\n window.scrollTo(0, 0);\n }}\n >\n <img alt=\"logo\" />\n </Link>\n </div>\n </nav>\n );\n};\n\nexport default Navbar;\n```\n\n```text\nLink\n```\n\n```text\nimport { BrowserRouter } from 'react-router-dom'\n\nrender(\n <BrowserRouter>\n <App />\n </BrowserRouter>,\n document.getElementById('root')\n)\n```\n\n```text\nLink\n```\n\n```text\nreact-router-dom\n```\n\n```text\nuseContext\n```\n\n```text\nBrowserRouter\n```\n\n```text\nBrowserRouter\n```\n\n```text\nindex.js\n```\n\n```text\nfunction App() {\n return (\n <div className=\"App\">\n <Router>\n <Routes>\n <Route path=\"/\" element={<HomePage/>}/>\n <Route path=\"/x\" element={<x/>}/>\n <Route path=\"/y\" element={<y/>}/>\n <Route path=\"/z\" element={<z/>}/>\n <Route path=\"/*\" element={<NotFound/>}/>\n </Routes>\n </Router>\n </div>);\n}\n\nexport default App;\n```\n\n```text\nfunction App() {\n return (\n <div className=\"App\">\n \n <Router>\n <Routes>\n <NavBar/>\n <Route path=\"/\" element={<HomePage/>}/>\n <Route path=\"/x\" element={<x/>}/>\n <Route path=\"/y\" element={<y/>}/>\n <Route path=\"/z\" element={<z/>}/>\n <Route path=\"/*\" element={<NotFound/>}/>\n </Routes>\n </Router>\n </div>);\n}\n\nexport default App;\n```\n\n========================================\n\nComments:\n- where you are using the useContext() hook?\n- move this Nav component to be within the ``, before `` tag. I just couldn't find yet the reason why the Link component must be within BrowserRouter, maybe it is the only way react can handle the page navigation and switch one at a time.\n- what is the explanation for this?\n- @JuniorMayhé it's because the react-router-dom `Link` implementation is calling `useContext` and the context it is looking for is provided by `BrowserRouter`\n- We migrated to createBrowserRouter recently and this stopped working and the issue on this question is popping up. Our whole app is wrapper inside this router. Any ideas?\n- Yeah, I just imported `import { BrowserRouter as Router } from 'react-router-dom';` and added `return ( ... ` and the error went away\n- Can you add the explanation to the answer, please? (But *** *** *** *** *** ***without*** *** *** *** *** *** \"Edit:\", \"Update:\", or similar - the answer should appear as if it was written today)\n- I had this issue, but in a test. I forgot that component I was testing used a Link, but the component wasn't wrapped in BrowserRouter because I was testing the component in isolation. Doh.\n- Thank you for the solution! It's been really helpful\n- Is it \"app.js\" or \"App.js\"?","metadata":{"transformedAt":"2026-08-18T18:33:42.892Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":218,"estimatedTokens":1165}}163{"id":"stack-59812003","source":"stackoverflow","questionId":59812003,"title":"Tailwindcss: fixed/sticky footer on the bottom","tags":["css","django","tailwind-css"],"text":"Title: Tailwindcss: fixed/sticky footer on the bottom\nTags: css, django, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI use tailwindCSS and confront a problem with make footer.\n\n**base.html**\n\n```\n\n {% include \"partials/nav.html\" %}\n\n {% block content %}\n {% endblock %}\n\n {% include \"partials/footer.html\" %}\n \n```\n\n**footer.html**\n\n```\n\n {% load static %}\n ©~~~~~~\n\n```\n\ni tried static,absolute,fixed,relative... but .fixed cover the content block and relative make footer going upside. or .mb-0, .bottom-0 doesn't work.\n\nis it possible make footer fixed on the bottom?\n\n========================================\n\nTop Answer:\nAnother approach would be using **flex-grow**.\n\n\r\n\r\n\n```\n\n header\n content\n footer\n\n```\n\n========================================\n\nCode:\n```text\n<body>\n {% include \"partials/nav.html\" %}\n\n {% block content %}\n {% endblock %}\n\n {% include \"partials/footer.html\" %}\n </body>\n```\n\n```text\n<footer class=\"w-full h-64 bg-gray-900 static bottom-0\">\n {% load static %}\n <img src=\"{% static \"images/logo_white.png\" %}\" width=\"70px\"> <p class=\"text-white\"> ©~~~~~~</p>\n</footer>\n```\n\n```text\n<div class=\"flex flex-col h-screen justify-between\">\n <header class=\"h-10 bg-red-500\">Header</header>\n <main class=\"mb-auto h-10 bg-green-500\">Content</main>\n <footer class=\"h-10 bg-blue-500\">Footer</footer>\n</div>\n```\n\n```text\njustify-between\n```\n\n```text\nh-screen\n```\n\n```text\nmb-auto\n```\n\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div class=\"flex flex-col h-screen\">\n <div class=\"bg-red-500\">header</div>\n <div class=\"bg-green-500 flex-grow\">content</div>\n <div class=\"bg-blue-500\">footer</div>\n</div>\n```\n\n```text\nflex\n```\n\n```text\nclass=\"fixed bottom-0\"\n```\n\n```css\n.as-console-wrapper {\n display: none !important; /* just to hide stackoverflow console warning */\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"flex flex-col min-h-screen\">\n <header class=\"bg-yellow-600\">content</header>\n <div class=\"bg-blue-600\">content</div>\n <div class=\"flex-1\"></div> <!-- here -->\n <footer class=\"bg-red-400\">footer</footer>\n</div>\n```\n\n```css\n.as-console-wrapper {\n display: none !important; /* just to hide stackoverflow console warning */\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"min-h-screen\">\n <header class=\"bg-yellow-600\">content</header>\n <div class=\"bg-blue-600\">content</div>\n <footer class=\"bg-red-400 sticky top-[100vh]\">footer</footer>\n</div>\n```\n\n```text\nsticky top-[100vh]\n```\n\n```text\n<html class=\"min-h-screen\">\n <body class=\"min-h-screen\">\n \n <header>Header</header>\n <main>Content</main>\n <footer class=\"sticky top-[100vh]\">footer</footer>\n\n </body>\n</html>\n```\n\n```text\nposition: sticky\n```\n\n```text\ntop: 100vh\n```\n\n```text\n<Layout>\n <div class=\"container\">\n <div class=\"h-[100vmin]\">\n ...\n </div>\n </div>\n</Layout>\n```\n\n```text\nh-[100vmin]\n```\n\n```html\n<div class=\"min-h-screen\">\n <div>Content</div>\n <div class=\"sticky top-[100vh]\">Footer</div>\n</div>\n```\n\n```text\ntop-[100vh]\n```\n\n```text\ntop-full\n```\n\n```text\ntop: 100vh\n```\n\n```text\ntop: 100%\n```\n\n```text\n<div className=\"fixed bottom-0 left-0 bg-red-500 w-screen h-12\">\n Sticks to bottom, covers width of screen\n</div>\n```\n\n```text\n<footer class=\"absolute bottom-0 w-full px-6 py-6 text-white bg-emerald-500\">\n```\n\n```text\nabsolute bottom-0\n```\n\n```text\nw-full\n```\n\n```text\npx\n```\n\n```text\npy\n```\n\n```text\n<div class=\"min-h-screen flex flex-col justify-start\">\n <div>your main content</div>\n <footer class=\"mt-auto\">\n <div>your footer content</div>\n </footer>\n</div>\n```\n\n```html\n<body class='flex flex-col min-h-screen'>\n {% include \"partials/nav.html\" %}\n <div class='flex-1'>\n {% block content %}\n {% endblock %}\n </div>\n {% include \"partials/footer.html\" %}\n</body>\n```\n\n```html\n<div className='flex flex-col min-h-screen'>\n <div className='flex-1 mx-24 mt-12'>\n <Header />\n <div className='grid grid-cols-4 gap-12 my-12'>\n {data.map( (item, i) => <Todo key={i} title={item.title} note={item.note} texts={item.texts}/>)}\n </div>\n </div>\n <Footer />\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<!-- Wrapper element ('display: grid', 'grid-template-rows' defined) -->\n<div class=\"min-h-screen grid grid-rows-[min-content_1fr_min-content] \">\n <header class=\"bg-blue-200\">Header</header>\n \n <!-- Content element (display: grid) -->\n <main class=\"grid bg-blue-300\">Content</main>\n \n <footer class=\"bg-blue-400\">Footer</footer>\n</div>\n```\n\n```text\ndisplay: grid\n```\n\n```text\nmin-h-screen\n```\n\n```text\ngrid\n```\n\n```text\ngrid-rows-[...]\n```\n\n```text\ngrid-rows\n```\n\n```text\n1fr\n```\n\n```text\nmin-content\n```\n\n```text\ngrid\n```\n\n```text\nmin-h-screen\n```\n\n```text\nh-full\n```\n\n```text\n<html/>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"flex flex-col h-screen\">\n <div class=\"z-50 bg-blue-200\">header</div>\n <div class=\"grow bg-blue-100\">content</div>\n <div class=\"z-50 bg-blue-300\">footer</div>\n</div>\n```\n\n```text\n<main class=\"min-h-screen\"></main>\n```\n\n```text\n<body>\n```\n\n```text\n<>\n <div className=\"sticky top-0 min-w-full\">Header</div>\n <div className=\"min-w-full min-h-screen\">SOME CONTENT</div>\n <div className=\"min-w-full min-h-screen\">SOME CONTENT</div>\n <div className=\"fixed bottom-0 min-w-full\">Footer</div>\n</>\n```\n\n```html\n<body>\n <div class=\"static min-w-full min-h-screen p-1\">\n <p>content<p>\n <div class=\"absolute bottom-0 min-w-full\">\n <p>foot</p>\n </div>\n </div>\n</body>\n```\n\n```text\nstatic\n```\n\n```text\nabsolute\n```\n\n```text\nmin-h-screen\n```\n\n```text\nbottom-0\n```\n\n```text\n<!-- Sticky Footer Wrapper -->\n<div class=\"flex flex-col min-h-screen justify-between\">\n\n <header class=\"p-4 bg-indigo-100\">\n Header\n </header>\n\n <main class=\"flex-grow p-4 bg-amber-100\">\n <section>\n <p class=\"h-20 outline\">SHORT Content</p>\n <!-- <p class=\"h-[1000px] outline\">LONG Content</p> -->\n </section>\n </main>\n\n <footer class=\"p-4 bg-rose-300\">\n Footer\n </footer>\n\n</div>\n```\n\n```text\nflex-grow\n```\n\n```text\n<div class=\"flex\">\n <div class=\"sticky bottom-0 mt-auto\">bottom sticky</div>\n</div>\n```\n\n```html\n<!doctype html>\n<html>\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body>\n<div class=\"flex flex-col\">\n <div class=\"bg-red-500\">header</div>\n <div class=\"bg-green-500 mb-[24px]\">\n <h2>Content</h2>\n Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.\n <br>\nLorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.\n<br>\nLorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.\n<br>\nLorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.\n<br>\nLorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.\n<br>\nLorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.\n<br>\nLorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.\n<br>\nLorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.\n<br>\nLorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.\n<br>\nLorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.\n </div>\n <div class=\"fixed bottom-0 bg-blue-500\">\n footer should be larger\n </div>\n</div>\n</body>\n</html>\n```\n\n```text\nfixed bottom-0\n```\n\n```text\nmb-[24px]\n```\n\n```text\nbg-blue-500\n```\n\n```text\ninset-x-0\n```\n\n========================================\n\nComments:\n- This is quite a classy solution but if you want to apply page-wide classes with this setup (like background color) you need to set it for each element separately.\n- If the page is short in content .. it does not go very buttom\n- @HosMercury for me it does, all i did was \"flex flex-col h-screen justify-between\" if i remove \"justify-between\" then it does not go very bottom\n- This is not a sticky footer, this is just a footer. If the content is taller than the screen then it just pushes the footer down. codepen.io/therms/pen/BaREVNN\n- I just ran into a similar situation and I was able to make the footer sticky by adding the following tailwind classes \"sticky bottom-0\"\n- @DustinWyatt Sorry, but this is exactly what a \"Sticky Footer\" is supposed to be. Google \"Sticky Footers\" \"A sticky footer pattern is one where the footer of your page \"sticks\" to the bottom of the viewport in cases where the content is shorter than the viewport height.\"\n- Use `min-h-screen` instead. If you use `h-screen` and set the footer height (eg. `h-20`), when the height of the content overflows the screen, the footer's height isn't correct anymore!\n- This is *exactly* what I was looking for. Kudos! Every js UI kit should have this as a super simple example of how to set up a real sticky footer.\n- For those for whom flex is too much, there are some solutions below that don't need them.\n- Yes, what @Anh-ThiDINH said is correct. `min-h-screen` is better. The first answer above, and second answer to this question (below) **combined** (using `grow` instead of `mb-auto`) are the best answer inmho currently on tailwind 3.4.x\n- flex-grow in TailwindCSS 3 is now: `grow`\n- As @Anh-Thi DINH pointed out in the answer above this using `min-h-screen` with `grow` seems to be the best answer at tailwind 3.4.x\n- how to add this property only when on mobile devices?\n- @Apoorvpandey I am quite new to tailwind CSS also, but here is the link to tailwind css document how to target mobile devices tailwindcss.com/docs/responsive-design#targeting-mobile-scre‌​ens\n- This has a problem. The main content gets hidden by the footer on very small screens (iphone se for example)\n- @AhmadBilal you can add margin on upper div, for example, if your footer have 56px height, previous div could have `` see tailwindcss.com/docs/margin#using-a-custom-value and add background color for your footer to avoid see upper div behind.\n- Thanks, this is the best solution.\n- you don't need to give `min-h-screen` (as it translates to `min-height: 100vh`) to html tag in this case unlike `min-h-full` (which requires doing this because it inherits height from parent)\n- Didn't work for me.\n- @MariaCampbell does the codepen demo i linked to work?\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- neither `sticky` nor `bottom-0` is required in most cases.\n- Thanks @AhmadBilal. Just edited the answer to include your feedback!\n- This worked for me, except I used `sticky bottom-0` on my footer","metadata":{"transformedAt":"2026-08-18T18:33:42.892Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":62,"totalLines":488,"estimatedTokens":3647}}164{"id":"stack-65946335","source":"stackoverflow","questionId":65946335,"title":"How to make parent div activate styling of child div for hover and active","tags":["css","laravel","user-interface","tailwind-css"],"text":"Title: How to make parent div activate styling of child div for hover and active\nTags: css, laravel, user-interface, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI made this style for side bar navigation\n\nhttps://i.sstatic.net/YqBhX.png\n\nI made a box and used transform to hide it on the left side, to get the curved border effect.\n\nOn hover, active etc\n\n- Border button -> `bg-green-300`\n\n- `text-green-300` for icon and text\n\n- `font-semibold` for text only\n\n```\n\n \n \n \n\n \n **\n \n\n### Dashboard\n\n \n \n\n```\n\nIs there something I can add to the main div to activate the hover effect in each child element at same time?\n\nRight now it works only when I hover over each individual element.\n\n========================================\n\nTop Answer:\nUse `group` in `parent` and `group:hover` in `child`\n\n### Code Structure:\n\n```\n\n \n \n\n```\n\n### Example:\n\n```\n\n \n *Brighten me*\n\n```\n\n### Output:\n\nhttps://i.sstatic.net/FDfRem.png\n\n### OnHover:\n\nhttps://i.sstatic.net/KJbCVm.png\n\n========================================\n\nCode:\n```html\n<a href=\"/dashboard\">\n <div class=\"flex flex-row space-x-8 w-72 text-lg pb-3 text-gray-200\"> \n \n <div class=\"h-8 w-8 rounded transform -translate-x-7 hover:bg-green-300\"></div>\n\n <div class=\"flex flex-row items-center space-x-8 transform -translate-x-10 -translate-y-1\">\n <i class=\"bi bi-columns-gap hover:text-green-300 transform translate-x-1\"></i>\n <h2 class=\"hover:font-semibold hover:text-green-300 transform translate-y-1 text-base\">Dashboard</h2>\n </div>\n </div>\n</a>\n```\n\n```text\nbg-green-300\n```\n\n```text\ntext-green-300\n```\n\n```text\nfont-semibold\n```\n\n```text\nhover:\n```\n\n```text\ngroup-hover:\n```\n\n```text\n<div class=\"group\">\n <div class=\"group-hover:... \"/>\n <div class=\"group-hover:... \"/>\n</div>\n```\n\n```text\n<div class=\"group flex \">\n <div class=\"rounded-full bg-black w-10 h-10 group-hover:bg-cyan-400 \"></div>\n <i class=\"text-4xl ml-4 group-hover:bg-cyan-400 cursor-pointer \">Brighten me</i>\n</div>\n```\n\n```text\ngroup\n```\n\n```text\nparent\n```\n\n```text\ngroup:hover\n```\n\n```text\nchild\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<a href=\"#\" class=\"group block border-2 w-md\">\n <div class=\"flex gap-4 items-center p-4 text-gray-500\"> \n <div class=\"h-8 w-1 group-hover:bg-green-300\"></div>\n <h2 class=\"group-hover:text-green-300\">Dashboard</h2>\n <p class=\"hidden group-hover:block\">(group-hovered)</p>\n </div>\n</a>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<a href=\"#\" class=\"block border-2 w-md\">\n <div class=\"flex gap-4 items-center p-4 text-gray-500\"> \n <div class=\"h-8 w-1 in-[a:hover]:bg-green-300\"></div>\n <h2 class=\"in-[a:hover]:text-green-300\">Dashboard</h2>\n <p class=\"hidden in-[a:hover]:block\">(in-hovered)</p>\n </div>\n</a>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n \n<a\n href=\"#\"\n class=\"\n block border-2 w-md\n hover:[&_div.h-8]:bg-green-300\n hover:[&_h2]:text-green-300\n hover:[&_p.hidden]:block\n \"\n>\n <div class=\"flex gap-4 items-center p-4 text-gray-500\"> \n <div class=\"h-8 w-1\"></div>\n <h2>Dashboard</h2>\n <p class=\"hidden\">(block by a:href:hover)</p>\n </div>\n</a>\n```\n\n```text\ngroup\n```\n\n```text\ngroup-hover\n```\n\n```text\ngroup\n```\n\n```text\ngroup\n```\n\n```text\ngroup-hover\n```\n\n```text\ngroup\n```\n\n```text\ngroup-*\n```\n\n```text\nin-*\n```\n\n```text\nin-*\n```\n\n```text\nin-[a:hover]:...\n```\n\n```text\n<a>\n```\n\n```text\ngroup\n```\n\n```text\nin-*\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\nin-*\n```\n\n```text\n[&>div]\n```\n\n```text\nin-*\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n========================================\n\nComments:\n- Please update your answer with code example. Demo doesn't enough.\n- Now *that* is like magic, tailwind is so clever!\n- Although I was fighting with focus, the problem was the same for me. There was one more caveat - no matter what I did, nothing made it change as I wanted. I discovered my CSS file had this: `* { color: var(--custom-color);` After I removed it, my tailwind color was applied properly\n- Difference: 1. `[&>*:hover]:p-4` hover on single child element . 2. `[&>*]:hover:p-4` hover on parent element and control all children (same as group-hover)","metadata":{"transformedAt":"2026-08-18T18:33:42.892Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":33,"totalLines":261,"estimatedTokens":1074}}165{"id":"stack-60362442","source":"stackoverflow","questionId":60362442,"title":"Can't center absolute position","tags":["html","css","tailwind-css"],"text":"Title: Can't center absolute position\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\n**Background & Problem:**\n\nI'm using Tailwind CSS and Alpine.js for a simple search bar that has a dropdown positioned using `absolute`\n\nCodepen link is dead and removed.\n\nWhen I position the dropdown using `relative`, it positions perfectly as I want it to (but stretches the rest of the page which I don't want). However, when I change this to `absolute`, although it no longer stretches the page, it extends the dropdown wider than expected.\n\n**Example:**\n\nYou can see this by clicking the dropdown arrow on the right side of the search bar. You can also see the difference when changing `absolute` to `relative` on **Line 26**\n\n**Question:**\n\nHow can I, using Tailwind.css, position the dropdown so it has `absolute` position, but doesn't extend wider than the search bar?\n\n========================================\n\nTop Answer:\nwith tailwind only, you can use the following classes\n\n```\nabsolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2\n```\n\nso, it would be like\n\n```\n\n \n\n```\n\n========================================\n\nCode:\n```text\nabsolute\n```\n\n```text\nrelative\n```\n\n```text\nabsolute\n```\n\n```text\nabsolute\n```\n\n```text\nrelative\n```\n\n```text\nabsolute\n```\n\n```text\n<div x-show.transition.opacity.duration.700ms=\"open\" class=\"relative\" >\n <div class=\"absolute inset-x-0 shadow-xl bg-white w-3/4 md:w-2/5 mx-auto -mt-1 rounded-lg rounded-t-none\">\n```\n\n```text\nposition:absolute\n```\n\n```text\nposition:relative\n```\n\n```text\nrelative\n```\n\n```css\n.inset-center {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n```\n\n```css\nabsolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2\n```\n\n```html\n<div class=\"relative\">\n <div class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2\"> </div>\n<div>\n```\n\n```css\nabsolute m-auto left-0 right-0\n```\n\n```html\n<div class=\"relative\">\n <div class=\"absolute bottom-0 left-0 right-0 top-0 grid place-items-center\">\n <!-- Add your content here -->\n </div>\n</div>\n```\n\n```html\n<div class=\"relative\">\n <div class=\"absolute left-0 right-0 grid place-items-center\">\n <!-- Add your content here -->\n </div>\n</div>\n```\n\n```text\ngrid\n```\n\n```text\nplace-items-center\n```\n\n```text\nabsolute left-0 right-0 grid place-items-center\n```\n\n```text\nabsolute inset-0 m-auto\n```\n\n```text\nspan\n```\n\n```text\ndiv\n```\n\n========================================\n\nComments:\n- The link is dead, but perhaps you could also use `inset-y-0`\n- I’m voting to close this question because , the link is no more working, and there is no debugging details as such which is left in the question, it is just a raw question without any context. as the entire question was dependent on the link provided.\n- Removed dead link. Please help close this question.\n- Note that with Tailwind 3, you don't need `transform` anymore. Cf this doc\n- This solved the problem for me. But why does it work?\n- I would like to know too\n- It doesn't work for me. maybe it works for direct container not nested","metadata":{"transformedAt":"2026-08-18T18:33:42.892Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":22,"totalLines":155,"estimatedTokens":773}}166{"id":"stack-61455473","source":"stackoverflow","questionId":61455473,"title":"How to use :not() in tailwind.css","tags":["css","css-selectors","tailwind-css"],"text":"Title: How to use :not() in tailwind.css\nTags: css, css-selectors, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI recently started to give tailwind.css a try in my Nuxt project. so I needed to use `:not(:last-child)` pseudo-elements but I don't know how.\n\n```\n\n \n Item\n \n \n```\n\nI want to add a border-bottom to all of the `` except the last one.\n\nI know Tailwind has first & last pseudo-class variant but I can't use them with `:not()`\n\n========================================\n\nTop Answer:\nThe answer is in the link to `last` in the docs, that you shared.\n\nJust add `last:border-b-0` to all list items, and it will remove the `border-bottom` if it is the `last-child`.\n\n```\n\n \n Item\n \n\n```\n\n========================================\n\nCode:\n```text\n<ul>\n <li\n v-for=\"(item, index) in items\"\n :key=\"`item-${index}`\"\n class=\"border-solid border-b border-black\"\n >\n Item\n </li>\n </ul>\n```\n\n```text\n:not(:last-child)\n```\n\n```text\n<li>\n```\n\n```text\n:not()\n```\n\n```html\n<li class=\"[&:not(:last-child)]:border border-sky-500\">Item</li>\n```\n\n```html\n<ul>\n <li\n v-for=\"(item, index) in items\"\n :key=\"`item-${index}`\"\n class=\"border-solid border-b border-black last:border-b-0\"\n >\n Item\n </li>\n</ul>\n```\n\n```text\nlast\n```\n\n```text\nlast:border-b-0\n```\n\n```text\nborder-bottom\n```\n\n```text\nlast-child\n```\n\n```text\n<div\n v-for=\"(item, i) in items\"\n :key=\"i\"\n :class=\"{ 'mx-0': i === 0, 'mx-4': i > 0 }\"\n>\n</div>\n```\n\n```html\n<div className=\"grid grid-cols-1 gap-y-4\">\n ...\n </div>\n```\n\n```text\n[:not(:group-hover)]:your-style\n```\n\n```text\ngroup-[:not(:hover)]:your-style\n```\n\n```js\n<ul>\n <li\n v-for=\"item in items\"\n class=\"not-last:border-b\"\n >\n ...\n </li>\n</ul>\n```\n\n```text\nnot-*\n```\n\n```text\nnot-last\n```\n\n```text\nnot-first\n```\n\n```text\nnot-last:border-b\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<ul>\n <li class=\"not-last:bg-sky-100\">Item</li>\n <li class=\"not-last:bg-sky-200\">Item</li>\n <li class=\"not-last:bg-sky-300\">Item</li>\n</ul>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<ul>\n <li class=\"[&:not(:last-child)]:bg-sky-100\">Item</li>\n <li class=\"[&:not(:last-child)]:bg-sky-200\">Item</li>\n <li class=\"[&:not(:last-child)]:bg-sky-300\">Item</li>\n</ul>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant disabled (&[disabled]);\n</style>\n\n<ul>\n <li class=\"not-[&[disabled]]:bg-sky-100 [&[disabled]]:font-bold\">Item</li>\n <li class=\"not-[&[disabled]]:bg-sky-200 [&[disabled]]:font-bold\">Item</li>\n <li class=\"not-[&[disabled]]:bg-sky-300 [&[disabled]]:font-bold\" disabled>Item</li>\n</ul>\n\n<ul>\n <li class=\"not-disabled:bg-amber-100 disabled:font-bold\">Item</li>\n <li class=\"not-disabled:bg-amber-200 disabled:font-bold\">Item</li>\n <li class=\"not-disabled:bg-amber-300 disabled:font-bold\" disabled>Item</li>\n</ul>\n```\n\n```text\nnot-*\n```\n\n```text\nnot-*\n```\n\n```text\nin-*\n```\n\n```text\nhas-*\n```\n\n```text\n[:not(*)]\n```\n\n```text\n@custom-variant\n```\n\n```text\n@custom-variant\n```\n\n```text\nnot-*\n```\n\n========================================\n\nComments:\n- isn't it a problem with efficiency? because we need to write 2 tailwind classes but in simple CSS we have so much more selector powers.\n- 1) Give it a try, inspect the list and you will notice that it is only applied to the last item. So no problem with efficiency. 2) That's the whole point with Tailwind: insted of writing CSS, you write classes in HTML.\n- also, you need to fix config `variants: { extend: { margin: ['first', 'last'] }, },`\n- This doesn't work for me.\n- That saves having to write a plugin\n- had to add `>` after the `&` other than that works great thanks for the hint so full example `[&>:not(:last-child)]:border`\n- This might help someone in the future thus I am adding it as a comment here. I wanted to add the pseudo class `:after` as separator (with content `·`). All I had to do was `[&:not(:last-child)]:after:content-['·']`","metadata":{"transformedAt":"2026-08-18T18:33:42.892Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":30,"totalLines":224,"estimatedTokens":1017}}167{"id":"stack-69687530","source":"stackoverflow","questionId":69687530,"title":"How to build dynamically class names with Tailwind CSS","tags":["reactjs","next.js","tailwind-css"],"text":"Title: How to build dynamically class names with Tailwind CSS\nTags: reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am currently building a component library for my next project with Tailwind CSS, I just ran into a small issue when working on the Button component.\n\nI'm passing in a prop like `'primary'` or `'secondary'` that matches a color I've specified in the `tailwind.config.js` then I want to assign that to the button component using `Template literals` like so: `bg-${color}-500`\n\n```\n\n {children}\n\n```\n\nThe class name comes through in the browser just fine, it shows `bg-primary-500` in the DOM, but not in the applied styles tab.\n\nhttps://i.sstatic.net/Bwcq3.png\n\nThe theming is configured like so:\n\n```\n/** @type {import('tailwindcss').Config} */\nexport default {\n theme: {\n extend: {\n colors: {\n primary: {\n 500: '#B76B3F',\n },\n secondary: {\n 500: '#344055',\n },\n },\n },\n },\n}\n```\n\nBut it doesn't apply any styling. If I just add `bg-primary-500` manually it works fine.\n\nI'm honestly just wondering if this is because of the JIT compiler not picking dynamic class names up or if I'm doing something wrong (or this is just NOT the way to work with Tailwind CSS).\n\n========================================\n\nTop Answer:\nthis might be a bit late, but for the people bumping this thread.\n\nthe simplest explaination for this is;\n\n**Dynamic Class Name** does not work unless you configured Safelisting for the Dynamic class name,\n\nBUT, **Dynamic Class** works fine so long as its a full tailwind class name.\n\nits stated here\n\nthis will not work\n\n```\n\n```\n\nbut this one works\n\n```\n\n```\n\nits states;\n\nAs long as you always use complete class names in your code, Tailwind\nwill generate all of your CSS perfectly every time.\n\n**the longer explanation;**\n\nTailwind will scan all the files specified in `module.exports.content` inside `tailwind.config.js` and look for tailwind classes, it does not even have to be in a class attribute and can even be added in commented lines, so long as the **full class name** is present in that file and class name is not dynamically constructed; Tailwind will pull the styling for that class,\n\nso in your case, all you have to do is put in the full class name inside that file for all the possible values of your dynamic class\nsomething like this\n\n```\n\n {children}\n\n```\n\nor the method I would prefer\n\n```\n\n {children}\n\n```\n\nhere's another example, although its Vue, the idea would be the same for any JS framework\n\n```\n\n \n test\n \n\n /* all supported classes for color props \n bg-red-100 border-red-500 text-red-700\n bg-orange-100 border-orange-500 text-orange-700\n bg-green-100 border-green-500 text-green-700\n bg-blue-100 border-blue-500 text-blue-700\n */\n export default {\n name: 'Alert',\n props: {\n color: {type: String, default: 'red'}\n }\n }\n\n```\n\nand the result would be this\n\n```\n \n \n \n \n \n```\n\n========================================\n\nCode:\n```html\n<button\n className={`\n w-40 rounded-lg p-3 m-2 font-bold transition-all duration-100 border-2 active:scale-[0.98]\n bg-${color}-500\n `}\n onClick={onClick}\n type=\"button\"\n tabIndex={0}\n>\n {children}\n</button>\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nexport default {\n theme: {\n extend: {\n colors: {\n primary: {\n 500: '#B76B3F',\n },\n secondary: {\n 500: '#344055',\n },\n },\n },\n },\n}\n```\n\n```text\n'primary'\n```\n\n```text\n'secondary'\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nTemplate literals\n```\n\n```text\nbg-${color}-500\n```\n\n```text\nbg-primary-500\n```\n\n```text\nbg-primary-500\n```\n\n```js\nconst buttonConfig = {\n // Colors\n primary: {\n bgColor: 'bg-primary-500',\n color: 'text-white',\n outline:\n 'border-primary-500 text-primary-500 bg-opacity-0 hover:bg-opacity-10',\n },\n secondary: {\n bgColor: 'bg-secondary-500',\n color: 'text-white',\n outline:\n 'border-secondary-500 text-secondary-500 bg-opacity-0 hover:bg-opacity-10',\n },\n\n // Sizes\n small: 'px-3 py-2',\n medium: 'px-4 py-2',\n large: 'px-5 py-2',\n};\n```\n\n```text\n<motion.button\n whileTap={{ scale: 0.98 }}\n className={`\n rounded-lg font-bold transition-all duration-100 border-2 focus:outline-none\n ${buttonConfig[size]}\n ${outlined && buttonConfig[color].outline}\n ${buttonConfig[color].bgColor} ${buttonConfig[color].color}`}\n onClick={onClick}\n type=\"button\"\n tabIndex={0}\n >\n {children}\n </motion.button>\n```\n\n```text\ncontent: [\"./src/styles/**/*.{html,js}\"],\n```\n\n```text\nJIT\n```\n\n```text\nJIT\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nconst PokemonTypeMap = {\n ghost: {\n classes: \"bg-purple-900 text-white\",\n text: \"fantasma\",\n },\n normal: {\n classes: \"bg-gray-500 text-white\",\n text: \"normal\",\n },\n dark: {\n classes: \"bg-black text-white\",\n text: \"siniestro\",\n },\n psychic: {\n classes: \"bg-[#fc46aa] text-white\",\n text: \"psíquico\",\n },\n};\n\nfunction PokemonType(props) {\n const pokemonType = PokemonTypeMap[props.type];\n\n return (\n <span\n className={pokemonType.classes + \" p-1 px-3 rounded-3xl leading-6 lowercase text-sm font-['Open_Sans'] italic\"}\n >\n {pokemonType.text}\n </span>\n );\n}\n\nexport default PokemonType;\n```\n\n```text\ncontent: [\"./src/**/*.{js,jsx,ts,tsx,json}\"],\n```\n\n```text\nimport PokemonTypeMap from \"./pokemonTypeMap.json\";\n\nfunction PokemonType(props) {\n const pokemonType = PokemonTypeMap[props.type];\n \n return (\n <span className={pokemonType.classes + \" p-1 px-3 rounded-3xl leading-6 lowercase text-sm font-['Open_Sans']\"}>\n {pokemonType.text}\n </span>\n );\n}\n \nexport default PokemonType;\n```\n\n```text\nconst colors = require('./node_modules/tailwindcss/colors');\nconst colorSaveList = [];\nconst extendedColors = {};\nconst colorValues = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];\n\nfor (const key in colors) {\n \n\n // To avoid tailWind \"Color deprecated\" warning\n if (!['lightBlue', 'warmGray', 'trueGray', 'coolGray', 'blueGray'].includes(key))\n {\n extendedColors[key] = colors[key];\n for(const colorValue in colorValues) {\n colorSaveList.push(`text-${key}-${colorValue}`);\n colorSaveList.push(`bg-${key}-${colorValue}`);\n }\n }\n}\n\n\nmodule.exports = {\n content: [\n \"./index.html\",\n \"./src/**/*.{vue,js,ts,jsx,tsx}\"\n ],\n safelist: colorSaveList,\n theme: {\n extend: {\n colors: extendedColors\n }\n },\n plugins: [\n require('tailwind-scrollbar'),\n ]\n\n}\n```\n\n```text\nsavelist\n```\n\n```text\ncolorValues array\n```\n\n```text\nsafelist\n```\n\n```js\nconst tailwindColors = require(\"./node_modules/tailwindcss/colors\")\nconst colorSafeList = []\n\n// Skip these to avoid a load of deprecated warnings when tailwind starts up\nconst deprecated = [\"lightBlue\", \"warmGray\", \"trueGray\", \"coolGray\", \"blueGray\"]\n\nfor (const colorName in tailwindColors) {\n if (deprecated.includes(colorName)) {\n continue\n }\n\n const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]\n\n const pallette = tailwindColors[colorName]\n\n if (typeof pallette === \"object\") {\n shades.forEach((shade) => {\n if (shade in pallette) {\n colorSafeList.push(`text-${colorName}-${shade}`)\n colorSafeList.push(`bg-${colorName}-${shade}`)\n }\n })\n }\n}\n\n// tailwind.config.js\nmodule.exports = {\n safelist: colorSafeList,\n content: [\"{pages,app}/**/*.{js,ts,jsx,tsx}\"],\n theme: {\n extend: {\n colors: tailwindColors,\n },\n },\n plugins: [],\n}\n```\n\n```text\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}',\n ],\n safelist: [\n {\n pattern: /bg-(red|green|blue|orange)-(100|500|700)/, // You can display all the colors that you need\n variants: ['lg', 'hover', 'focus', 'lg:hover'], // Optional\n },\n ],\n // ...\n}\n```\n\n```text\nconst tailwindColors = require(\"./node_modules/tailwindcss/colors\")\nconst colorSafeList = []\n\n// Skip these to avoid a load of deprecated warnings when tailwind starts up\nconst deprecated = [\"lightBlue\", \"warmGray\", \"trueGray\", \"coolGray\", \"blueGray\"]\n\nfor (const colorName in tailwindColors) {\n if (deprecated.includes(colorName)) {\n continue\n }\n\n // Define all of your desired shades\n const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]\n\n const pallette = tailwindColors[colorName]\n\n if (typeof pallette === \"object\") {\n shades.forEach((shade) => {\n if (shade in pallette) {\n // colorSafeList.push(`text-${colorName}-${shade}`) <-- You can add different colored text as well \n colorSafeList.push(`bg-${colorName}-${shade}`)\n }\n })\n }\n}\n\n// tailwind.config.js\nmodule.exports = {\n safelist: colorSafeList, // <-- add the safelist here\n content: [\"{pages,app}/**/*.{js,ts,jsx,tsx}\"],\n theme: {\n extend: {\n colors: tailwindColors,\n },\n },\n plugins: [],\n}\n```\n\n```text\ndynamic class\n```\n\n```text\ntailwind\n```\n\n```text\ndynamic classes\n```\n\n```text\ntailwind-css\n```\n\n```text\ntailwind\n```\n\n```text\ntree-shaking\n```\n\n```text\nfull class names\n```\n\n```text\n100 500 700\n```\n\n```text\npattern\n```\n\n```text\nvariants\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nsafelist\n```\n\n```html\n<div class=\"text-{{ error ? 'red' : 'green' }}-600\"></div>\n```\n\n```html\n<div class=\"{{ error ? 'text-red-600' : 'text-green-600' }}\"></div>\n```\n\n```html\n<button className={ color === 'primary' ? 'bg-primary-500' : 'bg-secondary-500'}>\n {children}\n</button>\n```\n\n```html\n<!-- bg-primary-500 bg-secondary-500 -->\n<button className={`bg-${color}-500 `}>\n {children}\n</button>\n```\n\n```html\n<template>\n <div :class=\"`bg-${color}-100 border-${color}-500 text-${color}-700 border-l-4 p-4`\" role=\"alert\">\n test\n </div>\n</template>\n<script>\n /* all supported classes for color props \n bg-red-100 border-red-500 text-red-700\n bg-orange-100 border-orange-500 text-orange-700\n bg-green-100 border-green-500 text-green-700\n bg-blue-100 border-blue-500 text-blue-700\n */\n export default {\n name: 'Alert',\n props: {\n color: {type: String, default: 'red'}\n }\n }\n</script>\n```\n\n```html\n<Alert color=\"red\"></Alert> <!-- this will have color related styling-->\n<Alert color=\"orange\"></Alert> <!-- this will have color related styling-->\n<Alert color=\"green\"></Alert> <!-- this will have color related styling-->\n<Alert color=\"blue\"></Alert> <!-- this will have color related styling-->\n<Alert color=\"purple\"></Alert> <!-- this will NOT have color related styling as the generated classes are not pre-specified inside the file -->\n```\n\n```text\nmodule.exports.content\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nconst CustomComp = ({\n keyColGap = 0,\n keyRowGap = 0,\n className = '',\n}: Props) => {\n const classNameToRender = (): string => {\n return `m-1 flex flex-col ${className}`.trim();\n };\n\n const rowStylesToRender = (): React.CSSProperties | undefined => {\n const styles: React.CSSProperties | undefined = { gap: `${keyRowGap}rem` };\n\n return styles;\n };\n\n const colStylesToRender = (): React.CSSProperties | undefined => {\n const styles: React.CSSProperties | undefined = { gap: `${keyColGap}rem` };\n\n return styles;\n };\n\nreturn (\n <div className={classNameToRender()} style={rowStylesToRender()}>\n {layout.map((row) => {\n return (\n <div\n className={`flex justify-around`}\n style={colStylesToRender()}\n key={row}\n >\n /* Some Code */\n </div>\n );\n })}\n </div>\n}\n```\n\n```text\nconst [pending, setPending] = useState(false);\n<button className={ \n \"px-4\", \n {\n \"bg-blue-500\":pending, // if pending is true apply blue background\n }\n }\n/>\n```\n\n```text\n<button className={twMerge(\n \"bg-blue-500 px-4\",\n \"bg-black\"\n )}\n/>\n```\n\n```text\nimport { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n \nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n```\n\n```text\nimport { cn } from \"@/lib/utils\";\nexport default function Component(){\n return <div className={cn(\n \"bg-black font-sans\",\n \"bg-white h-full\", \n {\n \"px-5\":pending, // if pending is true apply padding\n }\n )}\n />\n}\n```\n\n```text\nclsx\n```\n\n```text\ntwMerge\n```\n\n```text\nclsx\n```\n\n```text\nObject\n```\n\n```text\ntwMerge\n```\n\n```text\n/lib/utils.ts\n```\n\n```text\npage.tsx\n```\n\n```text\nexport function classNames(...classes) {\n return classes.filter(Boolean).join(' ')\n}\n```\n\n```text\nclassName={\n classNames(\n // This could be a string representing classes passed into the component\n \"flex flex-col\",\n primary ? \"bg-teal-600\" : \"bg-white\",\n active ? 'bg-slate-100' : '',\n )\n}\n```\n\n```js\nconst cardsWithNoColors = [\n {\n id: '1',\n title: 'Card 1',\n value: 'Body 1',\n cardBg: 'yellow',\n },\n {\n id: '2',\n title: 'Card 2',\n value: 'Body 2',\n cardBg: 'orange',\n },\n {\n id: '3',\n title: 'Card 3',\n value: 'Body 3',\n cardBg: 'indigo',\n },\n];\n\n<div className={`bg-[${cardBg}]`}>\n```\n\n```text\ncardBg: 'yellow' 👉 cardBg: 'bg-[yellow]'\n```\n\n```html\n<div className={`bg-[${cardBg}]`}> 👉 <div className={`${cardBg}`}>\n```\n\n```text\nconst colors = {\n red: ['red-500', 'red-700', 'red-900'],\n blue: ['blue-500', 'blue-700', 'blue-900'],\n};\n\n// Construct the safelist using these constants\nconst safelistClasses = [\n ...colors.red.map(color => `bg-${color}`),\n ...colors.blue.map(color => `text-${color}`),\n];\n\nmodule.exports = {\n content: [\n './pages/**/*.js',\n './components/**/*.js'\n ],\n safelist: safelistClasses\n // other config options...\n}\n```\n\n```js\nmodule.exports = {\n content: [\n './src/**/*.{js,jsx,ts,tsx}', // Defines where the styles of tailwind are to be applied\n ],\n safelist: [\n 'bg-red-500',\n 'text-center',\n 'hover:bg-blue-500',\n 'md:grid-cols-4',\n // Add any other classes you need to safelist\n ],\n // Other Tailwind configurations...\n};\n```\n\n```js\nsafelist: [\n 'bg-red-500',\n 'text-center',\n 'hover:bg-blue-500',\n 'md:grid-cols-4',\n {\n pattern: /bg-(red|green|blue|yellow)-500/,\n variants: ['hover', 'focus'],\n },\n // Add any other classes you need to safelist\n],\n```\n\n```js\nsafelist: [\n {\n pattern: /bg-(red|blue|green|yellow)-500/,\n variants: ['hover'],\n },\n],\n```\n\n```text\nfunction tailwindClassConstructorWidth(width: string) {\n return `w-[${width}]`;\n}\n\n---\nconst tailWindWidth = tailwindClassConstructorWidth(dataWidth);\n\nconst widthClass = dataWidth ? `sm:${tailWindWidth} w-full` : 'w-full';\n\nreturn (\n <div className=\"mx-auto flex max-w-[672px]\">\n <div\n className={`relative h-auto ${widthClass} ${alignClass}`}\n >\n <Image\n src={src}\n alt={alt || 'image'}\n width={0}\n height={0}\n sizes=\"100vw\"\n className=\"h-auto w-full\"\n style={{\n borderRadius: borderRadius || '0px'\n }}\n />\n </div>\n </div>\n)\n```\n\n```text\n<style is:global define:vars={{themeColor: render_value(siteinfo, 'theme_color')}}>\n</style>\n\n<div class=\"bg-[var(--themeColor)]\">\n <!-- ... -->\n</div>\n```\n\n```text\nimport clsx from 'clsx';\n\nconst baseStyles = 'rounded border p-2';\n\nconst variantStyles = {\n primary: 'bg-primary-500', // References your theme configuration\n secondary: 'bg-secondary-500',\n};\n\ntype ButtonProps = (\n | {\n variant?: 'primary';\n }\n | {\n variant: 'secondary';\n }\n) &\n React.ComponentPropsWithoutRef<'button'>;\n\nexport default function Button({ children, className, variant }: ButtonProps) {\n return (\n <button\n className={clsx(\n baseStyles,\n variant ? variantStyles[variant] : undefined,\n className\n )}\n >\n {children}\n </button>\n );\n}\n```\n\n```text\nimport Button from '../components/Button';\n\nexport default function Home() {\n return (\n <div className=\"flex flex-col gap-4\">\n <Button variant=\"primary\" className=\"hover:opacity-90\">\n Primary Button\n </Button>\n <Button variant=\"secondary\" className=\"hover:opacity-90\">\n Secondary Button\n </Button>\n </div>\n );\n}\n```\n\n```text\nButton\n```\n\n```text\nclsx\n```\n\n```text\nclassName\n```\n\n```js\n// HACK to make dynamic styles work:\n// bg-habr bg-github !bg-instagram !bg-linkedin\n```\n\n```css\n@import \"tailwindcss\";\n\n@source inline \"text-{red,green,blue}-700\";\n@source inline \"bg-{red,green,blue}-300\";\n```\n\n```css\n@import \"tailwindcss\";\n\n@source inline \"{hover:,}{text,bg}-{red,green,blue}-{50,{100..900..100},950}\";\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme static {\n --color-primary: var(--color-red-500);\n --color-secondary: var(--color-blue-500);\n}\n```\n\n```js\nimport React from \"react\";\n\ntype ExampleProps = {\n type: \"primary\" | \"secondary\";\n};\n\nexport default function Example({ type }: ExampleProps) {\n return (\n <p style={{ color: `var(--color-${type})` }}>\n This text uses {type} color\n </p>\n );\n}\n```\n\n```html\n<Example type=\"primary\" />\n<Example type=\"secondary\" />\n```\n\n```html\n{/* IMPORTANT: DO NOT USE IT, this is just an example of incorrect usage */}\n<div\n class={\"\n col-start-${colStart} col-end-${colEnd}\n row-start-${rowStart} row-end-${rowEnd}\n ...\n \"}\n>...</div>\n```\n\n```html\n<div\n class={\"...\"}\n style={{\n gridColumnStart: colStart,\n gridColumnEnd: colEnd,\n gridRowStart: rowStart,\n gridRowEnd: rowEnd\n }}\n>...</div>\n```\n\n```html\n<div\n class={\"\n col-start-(--col-start) col-end-(--col-end)\n row-start-(--row-start) row-end-(--row-end)\n ...\n \"}\n style={{\n '--col-start': colStart,\n '--col-end': colEnd,\n '--row-start': rowStart,\n '--row-end': rowEnd\n }}\n>...</div>\n```\n\n```text\n@theme static { ... }\n```\n\n```text\nbg-primary\n```\n\n```text\ntext-primary\n```\n\n```text\nvar(--color-primary)\n```\n\n```text\n@theme { ... }\n```\n\n```text\n@theme static { ... }\n```\n\n```text\ntext-${type}\n```\n\n```text\nbg-sky-500\n```\n\n```text\nbg-(--color-sky-500)\n```\n\n```text\nbg-(--currentcolor)\n```\n\n```text\n--currentcolor\n```\n\n```text\n--currentcolor: var(--color-primary);\n```\n\n========================================\n\nComments:\n- Could you add a minimal reproducible example. I've tried to replicate the error, but for me it works just as wanted.\n- Don't really have the time to make a sandbox environment to reproduce it. but rokob below gave the answer I think. Thanks for your time!\n- For the latest Next 13.4 refer stackoverflow.com/a/76660733/13431819\n- **No way!** The documentation itself also warns against this, see: **stackoverflow.com/a/79745137/15167500** and tailwindcss.com/docs/… and stackoverflow.com/a/79745895/15167500\n- Although this question is based on v3, here is another v4 for reference, the two differ with a few breaking changes: How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?\n- It's even possible to just add the tailwind classes (you want to have included for dynamic usage) as comments somewhere in your code. Allows using `bg-${color}-100 text-${color}-500` as long as u mention `bg-accent-100 text-accent-500` in a comment somewhere for every color that you want to include.\n- @morganney This was for a small personal project, I like to educate myself on all the front-end frameworks in how they work and what the caveats are. I still think you can build really flexible and scalable front-ends with TailWind, it's just how you set it up and decide to use it. And as statet below, this isn't really an issue anymore since the latest updates.\n- @morganney This is hardly a significant problem\n- @forresthopkinsa It is a significant problem if you try to generate lots of dynamic class strings. Your bundle size will be massive, because you will end up safelisting a large proportion of all tailwindcss classes.\n- @WesleyJanse I was just doing some more asking around and experimenting with this. It appears, if you are in an SSR context, you can run postcss with the tailwind plugin on rendered HTML. And, the performance hit doesn't appeared to be significant (< 100ms). This allows you to use dynamic classnames, so long as (1) you're using a proper SSR framework like Nuxt and (1.1) Javascript which changes the classnames at browser runtime aren't included in the bundle.\n- I had the same problem and this is actually what I was missing out : I had my utility classes imported from a local data object stored in a custom folder, so that Tailwind couldn't reference them. I just had to complete the \"content\" array with my file.\n- Thanks for letting me know, haven't looked into Tailwind V3. So I don't know what's the better approach right now\n- It's not about tailwind v3 only, it's just the JIT mode.\n- I wonder if `safelist` is a better alternative then auto-generating all the possible combinations in a helper function and then simply call that function to dynamically look up the classnames. I wrote this gist regarding the topic: gist.github.com/tahesse/345830247456980d1c8ac6e53a2dd879\n- @tahesse I like your solution. It could be used as an external script or \"plugin\" for other devs. My code is more like a hotfix or a quickfix. As you mention in the gist you have to call into account the classes you might not use. But still, you can modify my solution to only use classes that you want and safeList them. I find my solution quite easy as you take advantage of a feature already included in TailWindCSS. So to answer your question. I think it's \"cleaner\" to use my solution insted of writing CSS classes directly to the file via node fs. But still, it's just my opinion.\n- this is no longer working in 2022 I believe. Added an updated version in a post below\n- It's still working in 2022. We use it in our production codebase. I have added a link to your implementation to my original anwer as I find it better. Thanks for tweaking my code. :)\n- This should be the correct answer for this question\n- THIS should be the right answer: no hacks, just using the configuration. Thanks a lot!\n- This is such a clever hack! You \"just\" have to reactively render your color palette into global CSS vars and can keep using Tailwind without having to resort back to inline styles\n- Related: Exclude a class being tree-shaken by Tailwind\n- Or use pre-declared enums: stackoverflow.com/a/78979537/15167500","metadata":{"transformedAt":"2026-08-18T18:33:42.892Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":94,"totalLines":1037,"estimatedTokens":5556}}168{"id":"stack-65495912","source":"stackoverflow","questionId":65495912,"title":"Storybook-tailwind. How should I add tailwind to storybook","tags":["reactjs","typescript","webpack","tailwind-css","storybook"],"text":"Title: Storybook-tailwind. How should I add tailwind to storybook\nTags: reactjs, typescript, webpack, tailwind-css, storybook\nSource: Stack Overflow\n\nQuestion:\nI want to add tailwind to storybook. So that Stories will render just like it will render on web.\n\nI used `create-react-app project-name --template typescript` to create the project.\n\nThen to install the tailwind I followed this https://tailwindcss.com/docs/guides/create-react-app instruction from the documentation of tailwind.\n\nOnce I finished it I ran the code `npm sb init`. Which made sure that storybook ran.\n\nNow I need to tell storybook to use tailwindcss for styling. But I have no idea how.\n\nEvery other answer I saw tells to edit `postcss.config.js` files.\n\nBut I followed this https://tailwindcss.com/docs/guides/create-react-app documentation where I didnt even have to create postcss.config.js file. So I am confused to what to do now.\n\nFor clarity I will include some configuration file below.\n\n`craco.config.js`\n\n```\nmodule.exports = {\n style: {\n postcss: {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer'),\n ],\n },\n },\n }\n```\n\n`.storybook/preview.js`\n\n```\nimport \"../src/index.css\"\n\nexport const parameters = {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n}\n```\n\n`.storybook/main.js`\n\n```\nmodule.exports = {\n \"stories\": [\n \"../src/**/*.stories.mdx\",\n \"../src/**/*.stories.@(js|jsx|ts|tsx)\"\n ],\n \"addons\": [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/preset-create-react-app\"\n ]\n}\n```\n\n`src/index.css`\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n`tailwind.config.js`\n\n```\nmodule.exports = {\n purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n`package.json`\n\n```\n`{\n \"name\": \"memory\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@craco/craco\": \"^6.0.0\",\n \"@tailwindcss/postcss7-compat\": \"^2.0.2\",\n \"@testing-library/jest-dom\": \"^5.11.4\",\n \"@testing-library/react\": \"^11.1.0\",\n \"@testing-library/user-event\": \"^12.1.10\",\n \"@types/jest\": \"^26.0.15\",\n \"@types/node\": \"^12.0.0\",\n \"@types/react\": \"^16.14.2\",\n \"@types/react-dom\": \"^16.9.8\",\n \"autoprefixer\": \"^9.8.6\",\n \"postcss\": \"^7.0.35\",\n \"react\": \"^17.0.1\",\n \"react-dom\": \"^17.0.1\",\n \"react-scripts\": \"4.0.1\",\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.0.2\",\n \"typescript\": \"^4.0.3\",\n \"web-vitals\": \"^0.2.4\"\n },\n \"scripts\": {\n \"start\": \"craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\",\n \"storybook\": \"start-storybook -p 6006 -s public\",\n \"build-storybook\": \"build-storybook -s public\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"@storybook/addon-actions\": \"^6.1.11\",\n \"@storybook/addon-essentials\": \"^6.1.11\",\n \"@storybook/addon-links\": \"^6.1.11\",\n \"@storybook/node-logger\": \"^6.1.11\",\n \"@storybook/preset-create-react-app\": \"^3.1.5\",\n \"@storybook/react\": \"^6.1.11\"\n }\n}\n```\n\n`tsconfig.json`\n\n```\n{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true,\n \"jsx\": \"react-jsx\"\n },\n \"include\": [\n \"src\"\n ]\n}\n```\n\n========================================\n\nTop Answer:\nYou're almost there.\n\nThe missing piece of your config is to add a webpack configuration to apply tailwind to `postcss-loader`:\n\n```\nconst path = require('path')\n\nmodule.exports = {\n stories: [\n '../src/**/*.stories.mdx', \n '../src/**/*.stories.@(js|jsx|ts|tsx)'\n ],\n addons: [\n '@storybook/addon-links',\n '@storybook/addon-essentials',\n '@storybook/preset-create-react-app',\n ],\n webpackFinal: async (config) => {\n config.module.rules.push({\n test: /\\.css$/,\n use: [\n {\n loader: 'postcss-loader',\n options: {\n postcssOptions: {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer'),\n ],\n },\n },\n },\n ],\n include: path.resolve(__dirname, '../'),\n })\n return config\n },\n}\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n style: {\n postcss: {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer'),\n ],\n },\n },\n }\n```\n\n```text\nimport \"../src/index.css\"\n\nexport const parameters = {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n}\n```\n\n```text\nmodule.exports = {\n \"stories\": [\n \"../src/**/*.stories.mdx\",\n \"../src/**/*.stories.@(js|jsx|ts|tsx)\"\n ],\n \"addons\": [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/preset-create-react-app\"\n ]\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nmodule.exports = {\n purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n`{\n \"name\": \"memory\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@craco/craco\": \"^6.0.0\",\n \"@tailwindcss/postcss7-compat\": \"^2.0.2\",\n \"@testing-library/jest-dom\": \"^5.11.4\",\n \"@testing-library/react\": \"^11.1.0\",\n \"@testing-library/user-event\": \"^12.1.10\",\n \"@types/jest\": \"^26.0.15\",\n \"@types/node\": \"^12.0.0\",\n \"@types/react\": \"^16.14.2\",\n \"@types/react-dom\": \"^16.9.8\",\n \"autoprefixer\": \"^9.8.6\",\n \"postcss\": \"^7.0.35\",\n \"react\": \"^17.0.1\",\n \"react-dom\": \"^17.0.1\",\n \"react-scripts\": \"4.0.1\",\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.0.2\",\n \"typescript\": \"^4.0.3\",\n \"web-vitals\": \"^0.2.4\"\n },\n \"scripts\": {\n \"start\": \"craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\",\n \"storybook\": \"start-storybook -p 6006 -s public\",\n \"build-storybook\": \"build-storybook -s public\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"@storybook/addon-actions\": \"^6.1.11\",\n \"@storybook/addon-essentials\": \"^6.1.11\",\n \"@storybook/addon-links\": \"^6.1.11\",\n \"@storybook/node-logger\": \"^6.1.11\",\n \"@storybook/preset-create-react-app\": \"^3.1.5\",\n \"@storybook/react\": \"^6.1.11\"\n }\n}\n```\n\n```text\n{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true,\n \"jsx\": \"react-jsx\"\n },\n \"include\": [\n \"src\"\n ]\n}\n```\n\n```text\ncreate-react-app project-name --template typescript\n```\n\n```text\nnpm sb init\n```\n\n```text\npostcss.config.js\n```\n\n```text\ncraco.config.js\n```\n\n```text\n.storybook/preview.js\n```\n\n```text\n.storybook/main.js\n```\n\n```text\nsrc/index.css\n```\n\n```text\ntailwind.config.js\n```\n\n```text\npackage.json\n```\n\n```text\ntsconfig.json\n```\n\n```sh\nnpm i -D @storybook/addon-postcss # or\nyarn add -D @storybook/addon-postcss\n```\n\n```js\n// postcss.config.js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n }\n}\n```\n\n```js\n// .storybook/main.js\nmodule.exports = {\n ...\n addons: [\n ...\n {\n name: '@storybook/addon-postcss',\n options: {\n cssLoaderOptions: {\n // When you have splitted your css over multiple files\n // and use @import('./other-styles.css')\n importLoaders: 1,\n },\n postcssLoaderOptions: {\n // When using postCSS 8\n implementation: require('postcss'),\n },\n },\n },\n ],\n};\n```\n\n```js\n// .storybook/preview.js\nimport '../src/styles.css';\n```\n\n```text\n@storybook/addon-postcss\n```\n\n```text\npostcss-loader\n```\n\n```text\npostcss.config.js\n```\n\n```text\n.storybook/main.js\n```\n\n```text\n.storybook/preview.js\n```\n\n```js\nconst path = require('path')\n\nmodule.exports = {\n stories: [\n '../src/**/*.stories.mdx', \n '../src/**/*.stories.@(js|jsx|ts|tsx)'\n ],\n addons: [\n '@storybook/addon-links',\n '@storybook/addon-essentials',\n '@storybook/preset-create-react-app',\n ],\n webpackFinal: async (config) => {\n config.module.rules.push({\n test: /\\.css$/,\n use: [\n {\n loader: 'postcss-loader',\n options: {\n postcssOptions: {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer'),\n ],\n },\n },\n },\n ],\n include: path.resolve(__dirname, '../'),\n })\n return config\n },\n}\n```\n\n```text\npostcss-loader\n```\n\n```js\nconfig.module.rules.push({\n test: /\\.css$/,\n use: [\n {\n loader: \"postcss-loader\",\n options: {\n // HERE: OPTIONS\n postcssOptions: {\n plugins: [require(\"tailwindcss\"), require(\"autoprefixer\")],\n },\n },\n },\n ],\n include: path.resolve(__dirname, \"../\"),\n });\n```\n\n```sh\nnpm i -D @storybook/addon-postcss\nyarn add -D @storybook/addon-postcss\n```\n\n```text\n/* .stories/main.ts */\n\nimport postcss from 'postcss';\nimport * as tailwindcss from '../tailwind.config';\n\nimport type { StorybookConfig } from '@storybook/react/types';\n\nexport const addons: StorybookConfig['addons'] = [\n // other addons,\n {\n name: '@storybook/addon-postcss',\n options: {\n postcssLoaderOptions: {\n implementation: postcss,\n postcssOptions: {\n plugins: {\n tailwindcss, // or you can nest your options entirely here\n autoprefixer: {\n // autoprefixer options\n },\n },\n },\n },\n },\n },\n];\n```\n\n```text\n/* tailwind.config.ts */\n\nimport type { TailwindConfig } from 'tailwindcss/tailwind-config';\n\nexport const theme: TailwindConfig['theme'] = {\n // theme options\n}\n\n// other options\n```\n\n```text\npostcss.config.js\n```\n\n```text\n\"devDependencies\": {\n \"@storybook/addon-actions\": \"^6.5.9\",\n \"@storybook/addon-essentials\": \"^6.5.9\",\n \"@storybook/addon-interactions\": \"^6.5.9\",\n \"@storybook/addon-links\": \"^6.5.9\",\n \"@storybook/addon-postcss\": \"^2.0.0\",\n \"@storybook/builder-webpack5\": \"^6.5.9\",\n \"@storybook/manager-webpack5\": \"^6.5.9\",\n \"@storybook/node-logger\": \"^6.5.9\",\n \"@storybook/preset-create-react-app\": \"^4.1.2\",\n \"@storybook/react\": \"^6.5.9\",\n \"@storybook/testing-library\": \"^0.0.13\",\n \"@typescript-eslint/eslint-plugin\": \"^5.28.0\",\n \"@typescript-eslint/parser\": \"^5.28.0\",\n \"autoprefixer\": \"^10.4.7\",\n \"babel-plugin-named-exports-order\": \"^0.0.2\",\n \"eslint\": \"^8.17.0\",\n \"eslint-config-airbnb\": \"^19.0.4\",\n \"eslint-plugin-import\": \"^2.26.0\",\n \"eslint-plugin-jsx-a11y\": \"^6.5.1\",\n \"eslint-plugin-react\": \"^7.30.0\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"eslint-plugin-simple-import-sort\": \"^7.0.0\",\n \"postcss\": \"^8.4.14\",\n \"tailwindcss\": \"^3.1.1\",\n \"webpack\": \"^5.73.0\"\n }\n```\n\n```text\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```text\nmodule.exports = {\n stories: [\n \"../src/**/*.stories.mdx\",\n \"../src/**/*.stories.@(js|jsx|ts|tsx)\"\n ],\n addons: [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/addon-interactions\",\n \"@storybook/preset-create-react-app\",\n {\n name: '@storybook/addon-postcss',\n options: {\n postcssLoaderOptions: {\n implementation: require('postcss'),\n },\n },\n },\n ],\n framework: \"@storybook/react\",\n core: {\n \"builder\": \"@storybook/builder-webpack5\"\n }\n}\n```\n\n```text\nimport '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';\n\nexport const parameters = {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/,\n },\n },\n}\n```\n\n```bash\nnpx tailwindcss -i ./src/styles/global.css -o ./.storybook/global.css --watch\n```\n\n```js\n// ./storybook/preview.js\n\nimport './global.css';\n...\n```\n\n```text\n./storybook/preview.js\n```\n\n```text\nnpx storybook@latest init\n```\n\n```text\nyarn add -D @storybook/addon-styling\n```\n\n```text\nmodule.exports = {\n stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],\n addons: ['@storybook/addon-essentials', '@storybook/addon-styling'],\n};\n```\n\n========================================\n\nComments:\n- Related for this question: Storybook installation guide is only available for TailwindCSS v3, how can I install it with TailwindCSS v4?\n- Maybe you should create a boilerplate for this\n- Oops, I just had to add `import \"../src/index.css\"` in **.storybook/preview.js** 😁\n- @sudo_kaizen I added a storybook design system to a boilerplate I maintain, maybe this could help\n- Which version of `postcss-loader` should I use with a React library? I ran `npm install postcss-loader` but am getting an error in the `loader` function of `postcss-loader/dist/index.js` saying that `this.getOptions is not a function`.\n- Check this out for newer `postcss` versions\n- How can I use tailwind and postcss without webpack? Also using rollup to export the library.\n- I also had to add `import \"../src/index.css\"` in *.storybook/preview.js* like @AlaDouagi to make it works.\n- I had to import the CSS and change the options field as follows: `options: { postcssOptions: { plugins: [require(\"tailwindcss\"), require(\"autoprefixer\")]}}` See this link for details, and sorry for the formatting!\n- Confirmed, like @JohnMcCollum I got it working after changing to nested `postcssOptions` and getting rid of `ident`. Could you update this answer for 2022?\n- This did not work for me in latest CRA. The accepted answer works fine.\n- This didn't work for me for some reason. FWIW, I'm using postcss7 as this is recommended in the install page on tailwind. ``` SyntaxError (1:1) Unknown word > 1 | var api = require(\"!../node_modules/style-loader/dist/runtime/injectSt‌​ylesIntoStyleTag.js\"‌​); | ^ 2 | var content = require(\"!!../node_modules/css-loader/dist/cjs.js??ref--10-1‌​!../node_modules/pos‌​tcss-loader/dist/cjs‌​.js!./index.css\"); ```\n- Tailwind requires PostCSS 8 (not 7) as stated in the docs: tailwindcss.com/docs/installation#install-tailwind-via-npm\n- it's not working for me\n- CRA doesn't support PostCSS 8 though, so you need to install a postcss 7 compat build: tailwindcss.com/docs/guides/create-react-app\n- @cgat How do i install a postcss 7 compatible build?\n- The tailwindcss link above used to describe how to do this (they had a special postcss7 compat build you would install. Looks like things might have changed and potentially postcss 8 is now supported.\n- I could NOT get addon-postcss working in 2022, but the `webpackFinal` config from the top voted answer did work. I kept getting \"Unknown word\" errors like github.com/storybookjs/addon-postcss/issues/33 no matter what config I tried, and agree with the comment there that it's basically abandoned (tons of neglected issues and no commits in 16 months).\n- The last import string is essential. Why do we have to write this import instead of the default `tailwindcss/tailwind.css` import?\n- @newguy I think it is the place which styles are generated in mount.\n- Added this line to my script for storybook. None of the other solutions worked, unfortunately.\n- Storybook v7 now have support try this addon @storybook/addon-styling\n- The \"solution\" from @storybook didnt work either.","metadata":{"transformedAt":"2026-08-18T18:33:42.893Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":44,"totalLines":733,"estimatedTokens":4114}}169{"id":"stack-66416614","source":"stackoverflow","questionId":66416614,"title":"How to create scrollable element in Tailwind without a scrollbar","tags":["css","bootstrap-4","tailwind-css","bootstrap-5"],"text":"Title: How to create scrollable element in Tailwind without a scrollbar\nTags: css, bootstrap-4, tailwind-css, bootstrap-5\nSource: Stack Overflow\n\nQuestion:\nI'm trying to recreate a horizontal scroll navbar with tailwind *without a scrollbar* on the bottom like this example (reduce the width of your screen to be able to scroll)\n\nhttps://getbootstrap.com/docs/5.0/examples/blog/\n\nI tried the following using Tailwind but I wasn't able to figure out how to remove the horizontal scrollbar that appears like the bootstrap example above. Could someone help?\n\n```\n\n \n- Nav Item\n \n- Nav Item\n \n- Nav Item\n \n- Nav Item\n \n- Nav Item\n \n- Nav Item\n \n- Nav Item\n \n- Nav Item\n \n- Nav Item\n \n- Nav Item\n \n- Nav Item\n \n- Nav Item\n \n- Nav Item\n\n```\n\n========================================\n\nTop Answer:\nAdd this to your global css file (`global.css`, `style.css` or whatever you have):\n\n```\n/*\n https://github.com/tailwindlabs/tailwindcss/discussions/2394\n https://github.com/tailwindlabs/tailwindcss/pull/5732\n*/\n@layer utilities {\n /* Chrome, Safari and Opera */\n .no-scrollbar::-webkit-scrollbar {\n display: none;\n }\n\n .no-scrollbar {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n}\n```\n\nThen you just add the class `no-scrollbar` as you would typically like so, notice I added overflow-y-auto to keep the scrollbar automatically the correct size too.\n\n```\n\n```\n\nALTERNATIVELY:\n\nYou could try this `tailwindcss` plugin for hide scrollbar\n\nhttps://github.com/reslear/tailwind-scrollbar-hide\n\n========================================\n\nCode:\n```text\n<ul class=\"flex overflow-x-auto whitespace-nowrap p-4\">\n <li><a href=\"/\" class=\"p-2\">Nav Item</a></li>\n <li><a href=\"/\" class=\"p-2\">Nav Item</a></li>\n <li><a href=\"/\" class=\"p-2\">Nav Item</a></li>\n <li><a href=\"/\" class=\"p-2\">Nav Item</a></li>\n <li><a href=\"/\" class=\"p-2\">Nav Item</a></li>\n <li><a href=\"/\" class=\"p-2\">Nav Item</a></li>\n <li><a href=\"/\" class=\"p-2\">Nav Item</a></li>\n <li><a href=\"/\" class=\"p-2\">Nav Item</a></li>\n <li><a href=\"/\" class=\"p-2\">Nav Item</a></li>\n <li><a href=\"/\" class=\"p-2\">Nav Item</a></li>\n <li><a href=\"/\" class=\"p-2\">Nav Item</a></li>\n <li><a href=\"/\" class=\"p-2\">Nav Item</a></li>\n <li><a href=\"/\" class=\"p-2\">Nav Item</a></li>\n</ul>\n```\n\n```text\n/* Hide scrollbar for Chrome, Safari and Opera */\n.no-scrollbar::-webkit-scrollbar {\n display: none;\n}\n\n/* Hide scrollbar for IE, Edge and Firefox */\n.no-scrollbar {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n}\n```\n\n```text\n<div class=\"scrollbar-thin scrollbar-thumb-slate-500 scrollbar-track-slate-100 overflow-y-auto\">\n <!-- content -->\n</div>\n```\n\n```css\n/*\n https://github.com/tailwindlabs/tailwindcss/discussions/2394\n https://github.com/tailwindlabs/tailwindcss/pull/5732\n*/\n@layer utilities {\n /* Chrome, Safari and Opera */\n .no-scrollbar::-webkit-scrollbar {\n display: none;\n }\n\n .no-scrollbar {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n}\n```\n\n```text\n<div className=\"no-scrollbar overflow-y-auto\">\n```\n\n```text\nglobal.css\n```\n\n```text\nstyle.css\n```\n\n```text\nno-scrollbar\n```\n\n```text\ntailwindcss\n```\n\n```text\nconst plugin = require('tailwindcss/plugin')\n\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx}\",\n \"./components/**/*.{js,ts,jsx}\",\n ], \n theme: {\n extend: {},\n },\n plugins: [\n plugin(function ({ addUtilities }) {\n addUtilities({\n '.scrollbar-hide': {\n /* IE and Edge */\n '-ms-overflow-style': 'none',\n\n /* Firefox */\n 'scrollbar-width': 'none',\n\n /* Safari and Chrome */\n '&::-webkit-scrollbar': {\n display: 'none'\n }\n }\n }\n )\n })\n ],\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nconst plugin\n```\n\n```text\nplugins: []\n```\n\n```text\n[&::-webkit-scrollbar]:hidden\n```\n\n```text\narbitrary values\n```\n\n```text\nclass=\"[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\"\n```\n\n```text\nnpm\n```\n\n```text\ntailwind-scrollbar\n```\n\n```text\nscrollbar-none\n```\n\n```text\nnpm install tailwind-scrollbar-hide\n```\n\n```text\nmodule.exports = {\n plugins: [require(\"tailwind-scrollbar-hide\")],\n};\n```\n\n```text\n<div className=\"h-64 w-80 overflow-auto scrollbar-hide\">\n <p>Content inside the scrollable div...</p>\n</div>\n```\n\n```css\n@utility no-scrollbar {\n scrollbar-width: none;\n}\n```\n\n```html\n<ul class=\"flex overflow-x-auto whitespace-nowrap p-4 no-scrollbar\">\n```\n\n```css\n@utility no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n}\n```\n\n```text\nnpm\n```\n\n```jsx\n<ul style = {{ scrollbarWidth : \"none\" }} >\n</ul>\n```\n\n========================================\n\nComments:\n- That worked! Is there a different way that Bootstrap hides scrollbars? I dug into the Bootstrap example I posted above and I can't find the css code that does -webkit-scrollbar or -ms-overflow-style or scrollbar-width\n- So interestingly in the bootstrap example it's just achieved with a defined height on the outer div that hides the scrollbar! Took me a few mins to get there.\n- Hi I want to try this answer but how to add `no-scrollbar::-webkit-scrollbar` to plugins `::-webkit-scrollbar` this line makes me confuse. Could you write a sample for adding -webkit-scrollbar to `tailwind.config.js` that would be very helpful to me.\n- `::-webkit-scrollbar` is just a webkit specific selector used to target the scrollbar style in Chrome, Safari, Edge and Opera. The class that can be used here is `.no-scrollbar`. caniuse.com/?search=%3A%3A-webkit-scrollbar. As far as adding a utility in TailwindCss I'd use the approach here: play.tailwindcss.com/zQftpiBCmf\n- Very helpful! Thanks. Especially the utility link there\n- From this answer I cannot deduct in which file should I put this class definition\n- I love to use this approach, with a note that if we use a prefix for our tailwind classes, this layer will not need a prefix. Please CMIIW :)\n- While it's not a bad suggestion, it’s somewhat developer-unfriendly to type this out for every use case. At that point, it's better to create a utility.\n- should be [scrollbar-width:none] i.e none should be without single quotes\n- While it's not a bad suggestion, it’s somewhat developer-unfriendly to type this out for every use case. At that point, it's better to create a utility.\n- I think recommendation should be a comment, not an answer\n- Previously, up until TailwindCSS v3, native CSS had to be created inside `@layer utilities`. With the introduction of the CSS-first configuration in v4, this has been updated and shortened using the `@utility` directive.\n- There is no such built-in class in Tailwind v4 *(though I wish there was!)*. You probably have a plugin added — maybe the one mentioned by Syed Mesam.\n- You're right. I was just checking our local css and this is a in-house solution. You can although make it work if you add to your styles.css .scrollbar-hide::-webkit-scrollbar { display: none; } /* For IE, Edge and Firefox */ .scrollbar-hide { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: 0; /* Firefox */ }\n- I think that is practically the same as the utility class in my answer. Thank you for getting back to me though :)","metadata":{"transformedAt":"2026-08-18T18:33:42.893Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":27,"totalLines":288,"estimatedTokens":1830}}170{"id":"stack-64175950","source":"stackoverflow","questionId":64175950,"title":"How to add new colors to tailwind-css and keep the original ones?","tags":["tailwind-css"],"text":"Title: How to add new colors to tailwind-css and keep the original ones?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow can I add colors to default scheme? Here is my tailwindcss file.\n\n```\nconst { colors: defaultColors } = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n \"theme\": {\n \"colors\": defaultColors + {\n \"custom-yellow\": {\n \"500\": \"#EDAE0A\",\n }\n },\n },\n};\n```\n\n========================================\n\nTop Answer:\nAdd your custom color values to theme > extend > colors section in tailwind.config.js\n\n```\n//tailwind.config.js\n module.exports = {\n theme: {\n extend: {\n colors: {\n 'custom-yellow':'#BAA333',\n }\n },\n }, \n }\n```\n\n========================================\n\nCode:\n```js\nconst { colors: defaultColors } = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n \"theme\": {\n \"colors\": defaultColors + {\n \"custom-yellow\": {\n \"500\": \"#EDAE0A\",\n }\n },\n },\n};\n```\n\n```text\n// tailwind.config.js\nconst { colors: defaultColors } = require('tailwindcss/defaultTheme')\n\nconst colors = {\n ...defaultColors,\n ...{\n \"custom-yellow\": {\n \"500\": \"#EDAE0A\",\n },\n },\n}\n\nmodule.exports = {\n \"theme\": {\n \"colors\": colors,\n }\n};\n```\n\n```text\ncolors\n```\n\n```js\n//tailwind.config.js\n module.exports = {\n theme: {\n extend: {\n colors: {\n 'custom-yellow':'#BAA333',\n }\n },\n }, \n }\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend:\n {\n colors:\n {\n pinkSoft: '#EDC7B7',\n wheat: '#EEE2DC',\n gray: '#BAB2B5',\n blue: '#BADFE7',\n blue2: '#697184',\n pink: '#D8CFD0',\n bg: '#B1A6A4',\n bgDark: '#413F3D',\n },\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```js\n// tailwind.config.js\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n orange: colors.orange,\n },\n }\n }\n}\n```\n\n```text\nmodule.exports = {\n content: [\n \"./app/**/*.{js,ts,jsx,tsx}\",\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {\n colors: {\n 'main': '#e002a2',\n 'second': '#47019d',\n 'three': '#e00256',\n 'black': '#212121',\n 'white': '#ffffff',\n 'gray': '#808080e2'\n }\n },\n },\n plugins: [],\n}\n```\n\n```text\ntheme: {\n extend: {\n colors: {\n primary: {\n 100: \"#b2d8d8\",\n 200: \"#66b2b2\",\n // 300: '#66b2b2', you can skip some colors like this or not even commnet them\n // 400: '',\n 500: \"#008080\",\n 700: \"#66b2b2\",\n 900: \"#004c4c\",\n },\n secondary: {\n 100: \"##ff9c3c\",\n 200: \"#ff9022\",\n 300: \"#ff8308\",\n 400: \"#ee7600\",\n 500: \"#d56900\",\n 600: \"#bb5d00\",\n 700: \"#a25000\",\n 800: \"#5f2f00\",\n 900: \"#472300\",\n },\n },\n },\n },\n```\n\n```text\ntheme: {\n extend: {\n // Add new colors\n colors: {\n 'custom-grey': '#EDF1D6',\n 'custom-green': '#609966',\n 'custom-blue': '#344D67',\n },\n },\n },\n```\n\n```js\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n ... existing code\n theme: {\ncolors: {\n ...colors,\n primary: {\n DEFAULT: '#ff385c',\n }\n},\nextend: {\n ... existing code\n},\n },\n ... existing code\n}\n```\n\n```html\n<p class=\"text-primary\">Default color text</p>\n<p class=\"bg-primary-light\">Light color background</p>\n<p class=\"text-dark\">Dark color text</p>\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@import \"tailwindcss\";\n@theme {\n --color-custom-yellow-500: #EDAE0A;\n}\n```\n\n```text\nfunction MyComponent() {\n return (\n <div className=\"bg-custom-yellow-500\">\n Custom Yellow Background\n </div>\n );\n}\n```\n\n========================================\n\nComments:\n- @'Melis Lekesiz' consider changing your answer. @victoryoaill answer is the one used in the Tailwind documentation.\n- Related: How to use CSS variables with Tailwind CSS\n- From TailwindCSS v4, CSS-first configuration was introduced, so just use `@theme` directive, like here: How to use custom color themes in TailwindCSS v4\n- While this works, I am not sure why the extend way doesn't work anymore with the tailwind compiler and vscode extension.\n- @AbdallaArbab Theoretically the extend should also work, but this one is much more core nodejs. Which should work most of the time.\n- extend works for me in tailwind 3\n- @AbdallaArbab if extend doesn't work for you, you might have to restart your live-server or whatever you're using to host it, just so it reloads in the JSON cache - that seemed to solve the issue for me\n- In my case, i've restarted the server then only changes reflected in UI\n- Why though? What is the difference between `color: {}` and `extend: { color: {} }`?\n- Just a remind, if you still lost original one, please have a check that `theme.colors` should NOT be a `{}` (suggest to delete key and value completely) in tailwind.config.js.\n- What does it do?\n- All these posts are missing how to use the colors after defining them.\n- @Soerendip use the name where ever you can add color to: `bg-pinkSoft` or `text-pinkSoft`.\n- This is working, I tried with extend: { colors: { teal: \"#008080\" } but it did'nt worked, but worked by extend: { colors: { teal: colors.teal } as it is following specific schema based on opacity.\n- if you need to use make shades of primary and use one specific color as the default color, then you can write it like below colors: { primary: { DEFAULT: \"#0B7A6E\", // other shades } } and it will be used by default when you write bg-primary or text-primary without writing any shade like -500, -600\n- None of these works.","metadata":{"transformedAt":"2026-08-18T18:33:42.893Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":267,"estimatedTokens":1493}}171{"id":"stack-71296535","source":"stackoverflow","questionId":71296535,"title":"How to remove the increment/decrement buttons on number inputs using Tailwind CSS","tags":["html","css","input","tailwind-css"],"text":"Title: How to remove the increment/decrement buttons on number inputs using Tailwind CSS\nTags: html, css, input, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have an input field of `type=\"number\"`, and I want to remove the increment/decrement arrow buttons that appear on it by default. How can I do that with Tailwind CSS?\n\n```\n\n```\n\n========================================\n\nTop Answer:\nDiscovered a pure class way to do this that works both with Firefox and Chrome\n\n```\n\n```\n\nThanks to these references:\n\n- https://stackoverflow.com/a/71745933/1570165\n\n- Can I hide the HTML5 number input’s spin box?\n\n- https://github.com/tailwindlabs/tailwindcss/discussions/6972\n\n========================================\n\nCode:\n```text\n<input type=\"number\" placeholder=\"Numéro de téléphone\" className=\"border p-4 outline-none\">\n```\n\n```text\ntype=\"number\"\n```\n\n```css\n@layer base {\n input[type=\"number\"]::-webkit-inner-spin-button,\n input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n}\n```\n\n```text\nglobal.css\n```\n\n```text\nappearance\n```\n\n```text\nnone\n```\n\n```text\n<input type=\"number\" placeholder=\"Numéro de téléphone\" className=\"border p-4\noutline-none appearance-none\" />\n```\n\n```text\n<style>\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n</style>\n<input\n type=\"number\"\n placeholder=\"Numéro de téléphone\"\n className=\"border p-4\n outline-none\"\n/>\n```\n\n```css\n@layer base {\n input[type='number']::-webkit-outer-spin-button,\n input[type='number']::-webkit-inner-spin-button,\n input[type='number'] {\n -webkit-appearance: none;\n margin: 0;\n -moz-appearance: textfield !important;\n }\n}\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nconst plugin = require('tailwindcss/plugin')\nmodule.exports = {\n plugins: [\n require(\"@tailwindcss/forms\")({\n strategy: 'class', // only generate classes\n }),\n plugin(function ({ addUtilities }) {\n addUtilities({\n '.arrow-hide':{\n '&::-webkit-inner-spin-button':{\n '-webkit-appearance': 'none',\n 'margin': 0\n },\n '&::-webkit-outer-spin-button':{\n '-webkit-appearance': 'none',\n 'margin': 0\n },\n }\n }\n )\n })\n ],\n}\n```\n\n```text\nconfig.js\n```\n\n```html\n<input\n type=\"number\"\n class=\"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none\" \n/>\n```\n\n```text\n[-moz-appearance:_textfield] [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none\n```\n\n```html\n<select type=\"number\" id=\"amount\" name=\"amount\">\n <option value=\"0\">0</option>\n</select>\n```\n\n```js\n@layer base {\n select {\n appearance: none !important;\n }\n}\n```\n\n```js\n@layer base {\n select[type='number'] {\n appearance: none !important;\n }\n}\n```\n\n```js\n<style type=\"text/tailwindcss\">\n @layer base {\n select[type='number'] {\n appearance: none !important;\n }\n }\n</style>\n```\n\n```css\n.hide-arrow[type=\"number\"]::-webkit-inner-spin-button,\n.hide-arrow[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n```\n\n```html\n<input type=\"number\" />\n<input type=\"number\" class=\"hide-arrow\" />\n```\n\n```css\n@layer base {\n input[type=\"number\"].appearance-none::-webkit-inner-spin-button,\n input[type=\"number\"].appearance-none::-webkit-outer-spin-button {\n -webkit-appearance: none !important;\n margin: 0 !important;\n }\n\n input[type=\"number\"].appearance-none {\n -moz-appearance: textfield !important;\n }\n}\n```\n\n```text\nappearance-none\n```\n\n```html\n<input\n type=\"number\"\n class=\"appearance-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none\" />\n```\n\n```css\n@layer base {\n input[type=\"number\"]::-webkit-outer-spin-button,\n input[type=\"number\"]::-webkit-inner-spin-button,\n input[type=\"number\"] {\n -webkit-appearance: none;\n margin: 0;\n -moz-appearance: textfield !important;\n }\n}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<input type=\"text\" inputmode=\"numeric\" class=\"border-2\" />\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@layer base {\n /* WARNING: only works for Firefox (Mozilla) - read below why */\n input[type=number] {\n appearance: textfield;\n }\n}\n</style>\n\n<input type=\"number\" class=\"border-2\" />\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@layer base {\n input[type=number] {\n /* hide spin-buttons in Firefox */\n appearance: textfield;\n \n /* hide spin-buttons in Chromium-based browsers */\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n appearance: none;\n }\n }\n}\n</style>\n\n<input type=\"number\" class=\"border-2\" />\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@utility hide-spin-button {\n /* hide spin-buttons in Firefox */\n appearance: textfield;\n\n /* hide spin-buttons in Chromium-based browsers */\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n appearance: none;\n }\n}\n</style>\n\n<input type=\"number\" class=\"border-2\" />\n<input type=\"number\" class=\"hide-spin-button border-2\" />\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n/* only working in Chromium-based browsers */\n@custom-variant spin-button (&::-webkit-inner-spin-button, &::-webkit-outer-spin-button);\n\n@utility spin-button--hide {\n /* hide spin-buttons in Firefox */\n appearance: textfield;\n\n /* hide spin-buttons in Chromium-based browsers */\n @variant spin-button {\n appearance: none;\n }\n}\n</style>\n\n<!-- spin-button: variant only works in Chromium based browsers -->\n<input type=\"number\" class=\"border-2 spin-button:opacity-100 spin-button:cursor-pointer\" />\n<input type=\"number\" class=\"border-2 spin-button:opacity-50 spin-button:scale-70\" />\n\n<!-- spin-button--hide utility works in every browsers -->\n<input type=\"number\" class=\"border-2 spin-button--hide\" />\n```\n\n```text\ntype=\"number\"\n```\n\n```text\ninputmode=\"numeric\"\n```\n\n```text\ninputmode\n```\n\n```text\ninputmode\n```\n\n```text\nappearance\n```\n\n```text\n-webkit-appearance\n```\n\n```text\n-moz-appearance\n```\n\n```text\n-moz-appearance\n```\n\n```text\n-webkit-appearance\n```\n\n```text\n::-webkit-inner-spin-button\n```\n\n```text\n::-webkit-outer-spin-button\n```\n\n```text\n@utility\n```\n\n```text\nspin-button\n```\n\n========================================\n\nComments:\n- `appearance-none` didn't work for me for `type=\"number\"` but `[appearance:textfield]` worked instead - stackoverflow.com/a/71745933/1570165 (worked with Firefox but not with Chrome)\n- This didnot work for me\n- Would this work with Firefox?\n- @Surya If you want it to work in firefox as well you have to add `appearance: textfield` to `input[type=\"number\"]`\n- This example, although it received many upvotes, works well only in WebKit-based browsers. Even there, following the 2022 baseline (which Tailwind CSS v4 adopted), it is recommended to use `appearance` instead of `-webkit-appearance`. In Firefox, there is no separate pseudo-element for the spin-button, so you need to modify the `input[type=number]` directly. See more here.\n- Would probably have been better as an edit to Tyron's answer instead of making your own just to add one vendor-prefix line.\n- not working any more\n- You can also add '-moz-appearance': 'textfield !important' for this to work in firefox, just before '.arrow-hide' closing\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- play.tailwindcss.com/VE0FTQKv0U - Using both `appearance-none` and `[appearance:textfield]` is misleading. Only one is needed, and that is `[appearance:textfield]`, which is necessary because of Firefox. Both utilities set the same property (with different value), so the one that is added later in the generated CSS within the `@layer utilities` will take precedence. For example, in the shared playground, it's `none`, so your example doesn't work in Firefox - at least not for me.\n- @rozsazoltan `appearance-none` is for webkit. `appearance:textfield]` is for firefox\n- Hmm, I'll check it again soon. Thanks for pointing that out. - Up.: I double-checked, and in the latest version it works perfectly for me without it. No idea. (only with `[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none` without `appearance-none`)\n- @rozsazoltan Have you tested it for the earlier versions?\n- I tested it up to 16.4 - that's the minimum entry level for TailwindCSS v4 (which you referred to in your answer). I'll accept it if you say that the input needs to have `appearance: none` set below 16.4. This is interesting to me because, in WebKit, spin buttons have had their own pseudo-element since version 5.","metadata":{"transformedAt":"2026-08-18T18:33:42.893Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":41,"totalLines":370,"estimatedTokens":2349}}172{"id":"stack-67276977","source":"stackoverflow","questionId":67276977,"title":"Can tailwind colors be referenced from CSS?","tags":["tailwind-css"],"text":"Title: Can tailwind colors be referenced from CSS?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have some custom colors in my tailwind.config.js:\n\n```\ncolors: {\n primary: {\n 500: '#0E70ED',\n 600: '#0552b3'\n }\n}\n```\n\nI want to use them in my CSS files. Is there a way to replace `#0e70ed` below with `primary-500`?\n\n```\n.prose a.custom-link {\n color: #0e70ed;\n}\n```\n\n========================================\n\nTop Answer:\nWhy not directly use tailwind here ?\n\n```\n.prose a.custom-link {\n @apply text-primary-500;\n}\n```\n\nIf you want to access it in JS, you can use `resolveConfig`\n\n```\nimport resolveConfig from 'tailwindcss/resolveConfig'\nimport tailwindConfig from '@/tailwind.config.js'\nconst twFullConfig = resolveConfig(tailwindConfig)\n\n...\nmounted() {\n console.log('tw', twFullConfig.theme.colors['primary-500'])\n}\n```\n\n========================================\n\nCode:\n```js\ncolors: {\n primary: {\n 500: '#0E70ED',\n 600: '#0552b3'\n }\n}\n```\n\n```css\n.prose a.custom-link {\n color: #0e70ed;\n}\n```\n\n```text\n#0e70ed\n```\n\n```text\nprimary-500\n```\n\n```js\ncolors: {\n primary: {\n 500: '#0E70ED',\n 600: '#0552b3'\n }\n}\n```\n\n```css\n.prose a.custom-link {\n color: theme('colors.primary.500');\n}\n```\n\n```text\ntheme()\n```\n\n```css\n.prose a.custom-link {\n @apply text-primary-500;\n}\n```\n\n```js\nimport resolveConfig from 'tailwindcss/resolveConfig'\nimport tailwindConfig from '@/tailwind.config.js'\nconst twFullConfig = resolveConfig(tailwindConfig)\n\n...\nmounted() {\n console.log('tw', twFullConfig.theme.colors['primary-500'])\n}\n```\n\n```text\nresolveConfig\n```\n\n```text\n/* globals.css */\n:root {\n --primary: theme(colors.slate.900);\n --secondary: theme(colors.slate.100);\n}\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n primary: \"var(--primary)\"\n secondary: \"var(--secondary)\"\n },\n },\n },\n};\n```\n\n```text\nbody {\n background-color: var(--primary);\n color: var(--secondary);\n}\n```\n\n```text\n<div className='bg-primary text-secondary'> </>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme {\n --color-primary-500: #0e70ed;\n --color-primary-600: #0552b3;\n}\n</style>\n\n<div class=\"bg-primary-500 text-white\">\n Lorem Ipsum\n</div>\n<div class=\"text-primary-600\">\n Lorem Ipsum\n</div>\n```\n\n```css\n:root {\n --blue-1: #0e70ed;\n --blue-2: #0552b3;\n}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme {\n --color-primary-500: var(--blue-1);\n --color-primary-600: var(--blue-2);\n}\n</style>\n\n<div class=\"bg-primary-500 text-white\">\n Lorem Ipsum\n</div>\n<div class=\"text-primary-600\">\n Lorem Ipsum\n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme {\n --color-primary-500: #0e70ed;\n --color-primary-600: #0552b3;\n}\n\ndiv {\n background-color: var(--color-red-300);\n color: var(--color-red-800);\n}\nbutton {\n color: var(--color-primary-600);\n}\n</style>\n\n<div>\n Lorem Ipsum\n</div>\n<button>\n Lorem Ipsum\n</button>\n```\n\n```text\n@theme { ... }\n```\n\n```text\n@theme\n```\n\n```text\nvar()\n```\n\n========================================\n\nComments:\n- Thank you, kissu. Works like a charm. Hadn't looked at this part of the tailwind docs. Is there any relationship between tailwind's `@apply` and the abandoned CSS `@apply` feature?\n- Nope, there is nothing in common between the 2 and it's a good thing that the CSS draft got abandoned, this way there is no \"conflict\" between the 2. Answer from Adam here: github.com/tailwindlabs/tailwindcss/issues/627\n- Apply works yes. In my case I needed to style svg element while using tailwind 2.x and I had to use `theme` to get the color.\n- The simplest solution! You don't have to set anything in your tailwind config, and you don't need to use the theme function either! Thank you!\n- `color: theme(\"colors.gray.400\");` worked for me. Thanks.\n- I couldn't make it work in jsx e.g. `style={{ '--bg-color': 'theme(\"colors.dark.100\")' }}`\n- @Qwerty it needs to be processed with PostCSS and PostCSS itself doesn't handle HTML. Instead either define variable in Tailwind class like `[--bg-color:theme('colors.dark.100')] bg-[--bg-color]` so TW could read it (see example) or use another way of defining bg color. Depends on your task (which I don't know what is therefore answer may differ)\n- @Ryan Worked for me too! I am using Nuxt.\n- `colors.slate.100` wouldn't work for me without being wrapped in quotes. stackoverflow.com/questions/67276977/… worked.\n- Adding here, tailwind docs recommends against using abstract names for colors. And speaking from experience, companies rarely change their brand colors. If they go from, say, green to blue, it's a one time sed operation.\n- Related: (1) Should I use `@theme` or `@theme inline`? and (2) How to override theme variables in TailwindCSS v4 - `@theme` vs `@layer theme` vs `:root` and (3) When should I use `*` and when should I use `:root, :host` as the parent selector?","metadata":{"transformedAt":"2026-08-18T18:33:42.893Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":239,"estimatedTokens":1270}}173{"id":"stack-64872861","source":"stackoverflow","questionId":64872861,"title":"How to use CSS variables with Tailwind CSS","tags":["css","tailwind-css"],"text":"Title: How to use CSS variables with Tailwind CSS\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIs it possible to use CSS variables with Tailwind CSS?\nFor instance, let's say I have these variables:\n\n```\n--primary-color: #fff;\n--secondary-color: #000;\n```\n\nAnd I would like to use them in Tailwind like so:\n\n```\n\n \n\n### Hello World\n\n```\n\nHow can I achieve that?\n\n========================================\n\nTop Answer:\nArmando's answer didn't work for me but with this change it did work.\n\n`global.css`:\n\nno need to target a class or id. you can target the root itself using the Pseudo-Selector\nhttps://www.w3schools.com/cssref/sel_root.asp\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n --primary-color: #fff;\n --secondary-color: #000;\n}\n```\n\nas for `tailwind.config.js`:\n\n```\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n \"primary-color\": \"var(--primary-color)\",\n \"secondary-color\": \"var(--secondary-color)\"\n },\n },\n },\n};\n```\n\n========================================\n\nCode:\n```text\n--primary-color: #fff;\n--secondary-color: #000;\n```\n\n```text\n<div class=\"bg-primary-color\">\n <h1>Hello World</h1>\n</div>\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n.root,\n#root,\n#docs-root {\n --primary-color: #fff;\n --secondary-color: #000;\n}\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n \"primary-color\": \"var(--primary-color)\",\n \"secondary-color\": \"var(--secondary-color)\"\n },\n },\n },\n};\n```\n\n```text\n<div class=\"bg-primary-color\">\n <h1>Hello World</h1>\n</div>\n```\n\n```text\nglobal.css\n```\n\n```text\nglobal.css\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n --primary-color: #fff;\n --secondary-color: #000;\n}\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n \"primary-color\": \"var(--primary-color)\",\n \"secondary-color\": \"var(--secondary-color)\"\n },\n },\n },\n};\n```\n\n```text\nglobal.css\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nnpm install -D @mertasan/tailwindcss-variables\n```\n\n```js\n// tailwind.config.js\n\nmodule.exports = {\n theme: {\n colors: {\n red: {\n 50: 'var(--colors-red-50)'\n }\n }\n variables: {\n DEFAULT: {\n sizes: {\n small: '1rem',\n button: {\n size: '2rem'\n }\n },\n colors: {\n red: {\n 50: '#ff3232',\n },\n },\n },\n '.container': {\n sizes: {\n medium: '1.5rem',\n },\n },\n },\n },\n plugins: [\n require('@mertasan/tailwindcss-variables')\n ]\n}\n```\n\n```css\n:root {\n --sizes-small: 1rem;\n --sizes-button-size: 2rem;\n --colors-red-50: #ff3232\n}\n\n.container {\n --sizes-medium: 1.5rem\n}\n```\n\n```css\n:root {\n --text-color: red;\n --text-size: 5rem;\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<span class=\"text-[color:--text-color] text-[length:--text-size] font-bold\">\n Hello world!\n</span>\n```\n\n```text\n<script>\nlet cssVariables = {\n 'primary-color': \"#ffffff\", \n 'secondary-color': \"#000\"\n}\n\nlet styleValues = Object.entries(cssVariables)\n.map(([key, value]) => `--${key}:${value}`)\n.join(';')\n</script>\n\n<p style={styleValues} \nclass=\"text-center text-[4vmax] text-[color:var(--primary-color)]\">\n Hello World\n</p>\n```\n\n```text\n<p style=\"--primary-color:#ffffff;--secondary-color:#000\"\nclass=\"text-[4vmax] text-center text-[color:var(--primary-color)]\">\n Hello World\n</p>\n```\n\n```text\n<script>\n$: changingHue = 0\nsetInterval(() => changing_hue++, 250)\n$: cssVariables = {\n 'primary-color': `hsl(${changingHue} 100% 70%)`, \n 'secondary-color': \"#000\"\n}\n\n$: styleValues = Object.entries(cssVariables)\n.map(([key, value]) => `--${key}:${value}`)\n.join(';')\n</script>\n\n<p style={styleValues} \nclass=\"text-center text-[4vmax] text-[color:var(--primary-color)]\">\n Hello World\n</p>\n```\n\n```text\n:root {\n --font-sans: \"Helvetica\", \"Arial\", sans-serif;\n --font-serif: \"Georgia\", \"Times New Roman\", serif;\n}\n```\n\n```text\nmodule.exports = {\n theme: {\n fontFamily: {\n sans: \"var(--font-sans)\",\n serif: \"var(--font-serif)\",\n },\n },\n};\n```\n\n```text\n<div className=\"font-sans\">\n <h1>Hello World</h1>\n</div>\n```\n\n```text\n:root {\n --color-primary: 255 115 179;\n --color-secondary: 111 114 185;\n}\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n theme: {\n colors: {\n // Using modern `rgb`\n primary: 'rgb(var(--color-primary) / <alpha-value>)',\n secondary: 'rgb(var(--color-secondary) / <alpha-value>)',\n\n // Using modern `hsl`\n primary: 'hsl(var(--color-primary) / <alpha-value>)',\n secondary: 'hsl(var(--color-secondary) / <alpha-value>)',\n }\n }\n}\n```\n\n```text\n<span className=\"text-[--text-color] font-bold\">\n Hello world!\n</span>\n```\n\n```text\n\"tailwindcss\": \"3.4.3\"\n```\n\n```text\n<element class=\"property-[calc(var(--variable))]\">\n```\n\n```text\ncalc\n```\n\n```css\n:root{\n --primary: theme(colors.primary);\n --secondary: theme(colors.secondary);\n}\n```\n\n```text\n:root {\n --color-theme: 245, 245, 245\n}\n\n[data-theme=\"dark\"] {\n --color-theme: 4, 4, 4\n}\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n base: \"rgb(var(--color-theme), <alpha-value>)\"\n }\n },\n },\n}\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n base: {\n 100: \"rgb(var(--color-theme-100), <alpha-value>)\",\n 200: \"rgb(var(--color-theme-200), <alpha-value>)\",\n 300: \"rgb(var(--color-theme-300), <alpha-value>)\"\n }\n }\n },\n },\n}\n```\n\n```text\n--color-theme-100\n```\n\n```text\n--color-theme-200\n```\n\n```text\n<alpha-value>\n```\n\n```text\nbase-300/opacity-percentage\n```\n\n```css\n:root {\n --gray-100: #141414;\n --gray-200: #292929;\n --gray-800: #525252;\n --gray-900: #666666;\n\n --green-200: #308730;\n --green-500: #4CAF50;\n --green-700: #9BFFB6;\n ...\n}\n\n.dark {\n --gray-100: #e0e0e0;\n --gray-200: #c2c2c2;\n --gray-800: #292929;\n --gray-900: #141414;\n\n --green-200: #9BFFB6;\n --green-500: #43a15c;\n --green-700: #308730;\n}\n```\n\n```css\n:root {\n --palette-primary: var(--gray-100);\n --palette-secondary: var(--gray-800);\n --palette-success: var(--green-200);\n}\n```\n\n```text\nmodule.exports = {\n ...\n theme: {\n extend: {\n colors: {\n gray: {\n \"100\": \"color-mix(in srgb, var(--gray-100) calc(<alpha-value> * 100%), transparent)\",\n \"200\": \"color-mix(in srgb, var(--gray-200) calc(<alpha-value> * 100%), transparent)\",\n },\n // and so on...\n // custom-named palette layer:\n primary: \"color-mix(in srgb, var(--palette-primary) calc(<alpha-value> * 100%), transparent)\",\n secondary: \"color-mix(in srgb, var(--palette-secondary) calc(<alpha-value> * 100%), transparent)\",\n },\n },\n },\n```\n\n```text\nVite\n```\n\n```text\n<style>\n```\n\n```text\nhead\n```\n\n```text\nlight\n```\n\n```text\ndark\n```\n\n```text\ndark\n```\n\n```text\ncolors\n```\n\n```text\ntailwind.config\n```\n\n```text\ncolor-mix\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme {\n --color-primary: #fff;\n --color-secondary: #000;\n --color-primary-500: #0e70ed;\n --color-primary-600: #0552b3;\n}\n</style>\n\n<div class=\"bg-secondary text-primary\">\n Lorem Ipsum\n</div>\n<div class=\"bg-primary-500 text-white\">\n Lorem Ipsum\n</div>\n<div class=\"text-primary-600\">\n Lorem Ipsum\n</div>\n```\n\n```css\n:root {\n --primary: #fff;\n --secondary: #000;\n --blue-1: #0e70ed;\n --blue-2: #0552b3;\n}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme inline {\n --color-primary: var(--primary);\n --color-secondary: var(--secondary);\n --color-primary-500: var(--blue-1);\n --color-primary-600: var(--blue-2);\n}\n</style>\n\n<div class=\"bg-secondary text-primary\">\n Lorem Ipsum\n</div>\n<div class=\"bg-primary-500 text-white\">\n Lorem Ipsum\n</div>\n<div class=\"text-primary-600\">\n Lorem Ipsum\n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme {\n --color-primary: #fff;\n --color-secondary: #000;\n --color-primary-500: #0e70ed;\n --color-primary-600: #0552b3;\n}\n\ndiv {\n background-color: var(--color-secondary);\n color: var(--color-primary);\n}\n\nbutton {\n color: var(--color-primary-600);\n}\n</style>\n\n<div>\n Lorem Ipsum\n</div>\n<div style=\"background-color: var(--color-primary-600);\">\n Lorem Ipsum\n</div>\n<button>\n Lorem Ipsum\n</button>\n```\n\n```js\ntailwind.config = {\n theme: {\n extend: {\n colors: {\n background: \"var(--background)\",\n foreground: \"var(--foreground)\",\n }\n }\n }\n}\n```\n\n```css\n:root {\n --background: oklch(1 0.37 29.23);\n --foreground: oklch(0.89 0.0691 52.94);\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"bg-background text-foreground h-10 w-10 border-2 border-black inline-block\">A</div>\n<div class=\"bg-background/50 text-foreground/50 h-10 w-10 border-2 border-black inline-block\">A</div>\n```\n\n```js\ntailwind.config = {\n theme: {\n extend: {\n colors: {\n background: \"color-mix(in hsl, var(--background) calc(100% * <alpha-value>), transparent)\",\n foreground: \"color-mix(in hsl, var(--foreground) calc(100% * <alpha-value>), transparent)\",\n }\n }\n }\n}\n```\n\n```css\n:root {\n --background: oklch(1 0.37 29.23);\n --foreground: oklch(0.89 0.0691 52.94);\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"bg-background text-foreground h-10 w-10 border-2 border-black inline-block\">A</div>\n<div class=\"bg-background/50 text-foreground/50 h-10 w-10 border-2 border-black inline-block\">A</div>\n```\n\n```text\n@theme { ... }\n```\n\n```text\n@theme\n```\n\n```text\n--alpha()\n```\n\n```text\nvar()\n```\n\n```text\nlight-dark()\n```\n\n```text\nvar(--tw-light, ...) var(--tw-dark, ...)\n```\n\n```text\n*\n```\n\n```text\n:root, :host\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n```text\n:root {\n --ion-color-primary: #FFCB74;\n --ion-color-secondary: #94A3B8;\n ...\n}\n```\n\n```text\n<p class=\"text-(--ion-color-primary)\">Hello World!</p>\n```\n\n```text\nvariables.scss\n```\n\n```text\n(\n```\n\n```text\n[\n```\n\n========================================\n\nComments:\n- From TailwindCSS v4 can use CSS-first configuration what is very much in line with native CSS variable management and `var()`.\n- This is my preferred solution, but it does have a downside: it doesn't automatically integrate with Tailwind's Dark Mode support. You have to add a media query (or class if you're using class-based dark mode) around the `root` rule to get that.\n- in my case I had to add :root selector to the global css for the variables\n- Tailwind 4.0 deprecated the tailwind.config.js file. Now you add them to the .css file under an `@theme {}` section; `--color-primary: #fff;`. You can then use these with the built in classes `text-primary`, `bg-primary`, etc.\n- It took me a minute to realize that `var` in also inside the string.\n- This won't work if you try to change the color opacity. Example: `bg-primary/50`\n- I'm guessing that css variables was not built into tailwind at some point. I'm using tailwindcss@2.2.4 and I'm able to reference css variables without this plugin.\n- Annoying thing is I have to define the data type every time which also makes it look really bloated but yeah at least it works.\n- @Thielicious you can use a media query on the root element to support media dark mode, which would accomplish the same thing. You can also use a class on the :root element if youre using the .dark approach.\n- version 3.4.3 use this syntax: text-[var(--my-var)]\n- @SafwatFathi it doesn't work play.tailwindcss.com/5tPMAgIfyh\n- check linter message 'text-[var(--text-color)]' applies the same CSS properties as 'text-[var(--text-size)]'.(cssConflict)'\n- This should only be used for extreme side-case and is **not** a valid solution. it will output a ton of non-standard classes, while being very slow to type and goes against what Tailwind is all about - which is simplicity of minimal short and concise pre-existing class names for common things. Therefore, only a solution which involves the `tailwind.config` file will prevail\n- mixing the CSS and the JS should be a least resort since it's doable with css only\n- @petitkriket Yes, in a simple project, CSS and it's variables would be enough\n- that's so unpractical, is there a way to get around this?\n- Does `` gets injected automatically when defining a *classname* color with an opacity? it isn't clear at all from the answer\n- Yes, `` is replaced automatically to `var(--tw--opacity)` depending on the class, to have a better control. When `bg-opacity-50` or `bg-primary/50` is applied, `--tw-bg-opacity` is set to 0.5\n- Also have at look at stackoverflow.com/a/78651221/10594268. I've ended up with something like `rgb(from var(--some-variable) r g b / )`. Thanks!\n- I hope this answer rises up since is the cleanest one by far, and works like a charm, current version `^3.4.7`\n- This has nothing do to with react, it's a css class name\n- In React, you need to use className instead of class to define the style. In html you want ``\n- This way you don't have to specify the type specifier","metadata":{"transformedAt":"2026-08-18T18:33:42.894Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":74,"totalLines":707,"estimatedTokens":3350}}174{"id":"stack-71186718","source":"stackoverflow","questionId":71186718,"title":"Force Tailwind to include some classes in build phase","tags":["css","angular","user-interface","tailwind-css","tailwind-css-3"],"text":"Title: Force Tailwind to include some classes in build phase\nTags: css, angular, user-interface, tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nin my Angular project, I recently moved a menu from a typescript variable to a dynamically loaded json from backend.\n\nSome Tailwind classes were used only in this menu so now at build time Tailwind doesn't know that it has to include styles for those classes.\n\nIs it possible to force Tailwind to always include some classes? For example by working on the tailwind.config.js file.\n\nAs workaround, actually I've included this row in my index.html (but i don't like the errors from eslint):\n\n```\n-->\n```\n\n========================================\n\nTop Answer:\n`Tailwind` uses `tree-shaking` i.e any class that wasn't declared in your source files, won't be generated in the output file.\n\nHence use `safelist classes` .\n\nIn `tailwind.config.js`\n\n```\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}',\n ],\n safelist: [\n {\n pattern: /bg-(red|green|blue|orange)-(100|500|700)/, // You can display all the colors that you need\n variants: ['lg', 'hover', 'focus', 'lg:hover'], // Optional\n },\n ],\n // ...\n}\n```\n\n### How to make it more generic to include all possible tailwind colors?\n\n```\nmodule.exports = {\n content: [\n ...\n ],\n safelist: [\n {\n pattern: /bg-+/, // 👈 This includes bg of all colors and shades\n },\n ],\n ...\n}\n```\n\n========================================\n\nCode:\n```text\n<!--<span class=\"hidden bg-green-400 bg-pink-400\"></span>-->\n```\n\n```text\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}'\n './components/**/*.{html,js}',\n ],\n safelist: [\n 'bg-red-500',\n 'text-3xl',\n 'lg:text-4xl',\n ]\n // ...\n}\n```\n\n```text\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}',\n ],\n safelist: [\n {\n pattern: /bg-(red|green|blue|orange)-(100|500|700)/, // You can display all the colors that you need\n variants: ['lg', 'hover', 'focus', 'lg:hover'], // Optional\n },\n ],\n // ...\n}\n```\n\n```text\nmodule.exports = {\n content: [\n ...\n ],\n safelist: [\n {\n pattern: /bg-+/, // 👈 This includes bg of all colors and shades\n },\n ],\n ...\n}\n```\n\n```text\nTailwind\n```\n\n```text\ntree-shaking\n```\n\n```text\nsafelist classes\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@import 'tailwindcss';\n\n@source inline(\"bg-green-400 bg-pink-400\");\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@source\n```\n\n```text\n@import\n```\n\n```css\n@import 'tailwindcss';\n\n@source inline(\"bg-{green,pink}-400\");\n```\n\n```css\n@import 'tailwindcss';\n\n@source inline(\"{hover:,}bg-{green,pink}-400\");\n```\n\n```css\n@import 'tailwindcss';\n\n@source inline(\"{hover:,}bg-{green,pink}-{50,{100..900..100},950}\");\n```\n\n========================================\n\nComments:\n- You may pecify `safelist` array within config file (like here) or add safelist.txt file with classes and add it into `content` key of a config\n- @IharAliakseyenka how do you add a txt file to tailwind css config?\n- @Daniel same way as you include any other file - within `content` section of configuration file, like `./safelist.txt` or anything you wish\n- For newcomers, I'd like to note that this question is primarily specific to v3; if you're using Tailwind CSS v4, then this question is relevant for you: How is it possible to specify a safelist in TailwindCSS v4? Is it possible to list patterns and variants instead of full class names?\n- For newcomers, I'd like to note that this answer is primarily specific to v3; if you're using Tailwind CSS v4, then this answer is relevant for you: How is it possible to specify a safelist in TailwindCSS v4? Is it possible to list patterns and variants instead of full class names?\n- Too busy to test this but I think `pattern: /bg-+/` should be `pattern: /bg-.+/`\n- @kenchilada I tested they actually both work, as well as `pattern: /bg-/`. It seems that they are using a very loose match.\n- I'm curious if this is gonna work with custom colors as well\n- and the answer is, yes it works with custom colors as well","metadata":{"transformedAt":"2026-08-18T18:33:42.894Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":174,"estimatedTokens":1030}}175{"id":"stack-64846858","source":"stackoverflow","questionId":64846858,"title":"How to use Tailwind CSS with Next.js Image","tags":["next.js","tailwind-css","nextjs-image"],"text":"Title: How to use Tailwind CSS with Next.js Image\nTags: next.js, tailwind-css, nextjs-image\nSource: Stack Overflow\n\nQuestion:\nI am trying to use Tailwind CSS in an Next.js project but I cant't use my Tailwind classes with Next.js Image component.\n\nHere's my code:\n\n```\n\n```\n\nI want to use Tailwind classes instead of the `height` and `width` property of the Next.js Image. But I can't because it throws me an error. Also, `unsized` property throws another error saying it's deprecated. Is there any solution?\n\nHere is the error if I don't use the `height` and `width` property.\nhttps://i.sstatic.net/YHoSq.png\n\nWhen I use the `layout='fill'` property it shows only one picture. And if I use the `unsized` property, then the following error is shown.\n\nhttps://i.sstatic.net/5g2LJ.png\n\n========================================\n\nTop Answer:\nIt's been solved, no more need for hacky solutions. Just style them using tailwind directly!\n\nhttps://nextjs.org/blog/next-12-2\n\n========================================\n\nCode:\n```text\n<Image\n src={img.img}\n alt=\"Picture of the author\"\n width=\"200\"\n height=\"200\"\n className=\"bg-mint text-mint fill-current\"\n></Image>\n```\n\n```text\nheight\n```\n\n```text\nwidth\n```\n\n```text\nunsized\n```\n\n```text\nheight\n```\n\n```text\nwidth\n```\n\n```text\nlayout='fill'\n```\n\n```text\nunsized\n```\n\n```js\n<div className=\"h-64 w-96 relative\"> // \"relative\" is required; adjust sizes to your liking\n <Image\n src={img.img}\n alt=\"Picture of the author\"\n layout=\"fill\" // required\n objectFit=\"cover\" // change to suit your needs\n className=\"rounded-full\" // just an example\n />\n</div>\n```\n\n```text\nobject-fit\n```\n\n```text\ndiv\n```\n\n```text\nImage\n```\n\n```text\n<div className=\"bg-mint text-mint fill-current\">\n <Image\n src={img.img}\n alt=\"Picture of the author\"\n width=\"200\"\n height=\"200\">\n </Image>\n</div>\n```\n\n```text\nfill\n\nfill={true} // {true} | {false}\n```\n\n```text\nposition\nobject-fit\nobject-position\n```\n\n```text\n<div className=\"relative w-full h-full overflow-hidden\">\n <Image \n \n className=\"rounded-sm\" \n object-fit=\"cover\" \n fill={true} \n alt={group?.name ? group.name : \"no details\" }\n src=\"https://www.oddcircles.com/images/group-image.png\" \n />\n</div>\n```\n\n```text\n<Link\n href=\"/\"\n className=\"relative h-4 w-36 sm:h-5 sm:w-48\"\n>\n <Image\n src=\"/logo.svg\"\n alt=\"logo\"\n priority={true}\n fill={true}\n />\n</Link>\n```\n\n```text\nfill\n```\n\n```text\nNext.js 14.1.0\n```\n\n```text\nfill={true}\n```\n\n```text\nposition: \"relative\"\n```\n\n```text\nposition: \"fixed\"\n```\n\n```text\nposition: \"absolute\"\n```\n\n```text\nposition: \"absolute\"\n```\n\n========================================\n\nComments:\n- with us the error output.\n- @JuanMarco updated...\n- Is there a way to determine the height by the content in it instead of the height of the image?\n- @thiras I ended up using `aspect-[]` for that.\n- Nextjs switched up their api in Next13, `objectFit` now has to be provided as a style nextjs.org/docs/app/api-reference/components/…","metadata":{"transformedAt":"2026-08-18T18:33:42.894Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":24,"totalLines":180,"estimatedTokens":779}}176{"id":"stack-70647076","source":"stackoverflow","questionId":70647076,"title":"How to make element invisible in mobile size but visible in laptop size in TailwindCSS","tags":["css","tailwind-css"],"text":"Title: How to make element invisible in mobile size but visible in laptop size in TailwindCSS\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn tailwind css, we can say `lg:hidden` to hide element from the lg size screen.\n\nIn the below example, we do not specify the screen size so `01` is entirely hidden from any screen.\n\n```\n\n 01\n 02\n 03\n\n```\n\nI want to achieve only show element from `lg` size but hide mobile size. However, tailwind css breakpoints are based on `min width` so if we specify `sm:hidden`, for example, min width from 768px are all hidden.\n\nIs there any way I can just show element from specific screen size but hide below that screen size in Tailwind CSS?\n\n========================================\n\nTop Answer:\nThere is a much easier way in tailwind. Use the `max-{breakpoint}:{class}` to set the element as hidden for breakpoints below that\n\nEx:\n\n```\nHello\n```\n\nThis will make the above element stay hidden until the viewport increases past the width size of 640px.\n\n========================================\n\nCode:\n```text\n<div class=\"flex ...\">\n <div class=\"hidden ...\">01</div>\n <div>02</div>\n <div>03</div>\n</div>\n```\n\n```text\nlg:hidden\n```\n\n```text\n01\n```\n\n```text\nlg\n```\n\n```text\nmin width\n```\n\n```text\nsm:hidden\n```\n\n```text\n<div class=\"flex ...\">\n <div class=\"hidden lg:block...\">01</div>\n <div>02</div>\n <div>03</div>\n</div>\n```\n\n```text\n<div class=\"flex ...\">\n <div class=\"invisible lg:visible\">01</div>\n <div>02</div>\n <div>03</div>\n</div>\n```\n\n```text\nlg:visible\n```\n\n```text\nvisible\n```\n\n```text\n<div class=\"flex ...\">\n<div class=\"hidden md:flex\">01</div>\n<div>02</div>\n<div>03</div>\n</div>\n```\n\n```text\nclassName=\"hidden lg:inline\"\n```\n\n```text\n<div class=\"flex ...\">\n <div class=\"scale-0 lg:scale-100\">01</div>\n <div>02</div>\n <div>03</div>\n</div>\n```\n\n```text\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css\" rel=\"stylesheet\" />\n```\n\n```text\n@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n@import \"tailwindcss/screens\";\n```\n\n```text\n<div class=\"flex\">\n <div class=\"hidden lg:block\">01</div>\n <div>02</div>\n <div>03</div>\n </div>\n```\n\n```text\n<div class=\"max-sm:hidden\">Hello</div>\n```\n\n```text\nmax-{breakpoint}:{class}\n```\n\n========================================\n\nComments:\n- This helped me a lot as I was trying hidden md:visible and then after seeing this I figured it out that by stating the element block we are inturn making it visible. Thanks for the help.\n- The Class 'invisible' does not shows a section on Ui but renders into the dom , so it is not preferable to use it as it may leave a gap while hiding a section . Better to use 'hidden' class\n- Ya you can use hidden also 😅\n- The only downside to \"hidden\" is there's no \"unhidden\" equivalent, so to devs such as myself not previously familiar with the convention of using a flex, inline, block, etc. to show an otherwise hidden component at different breakpoints, it isn't immediately clear how tf the hidden element is ever showing. Also hypothetically couldn't hidden have an SEO impact for a crawler viewing certain breakpoints? Could be preferable to use in/visible for certain cases, though overall I think hidden is better to avoid DOM pollution.\n- Seems like it's also working with `md:block` essentially changing the display property, feels like a hack though. Weird tailwind did not see this need coming..\n- This solution is perfect - should be the new answer in my opinion!","metadata":{"transformedAt":"2026-08-18T18:33:42.894Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":18,"totalLines":145,"estimatedTokens":878}}177{"id":"stack-76688256","source":"stackoverflow","questionId":76688256,"title":"Getting Error: \"Use process(css).then(cb) to work with async plugins\"","tags":["react-native","expo","tailwind-css","nativewind"],"text":"Title: Getting Error: \"Use process(css).then(cb) to work with async plugins\"\nTags: react-native, expo, tailwind-css, nativewind\nSource: Stack Overflow\n\nQuestion:\nscreens/HomeScreen.js: Use process(css).then(cb) to work with async plugins\n\nHere is my HomeScreen.js\n\n```\nimport { View, Text } from 'react-native'\nimport React from 'react'\n\nexport default function HomeScreen() {\n return (\n \n HomeScreen\n \n )\n}\n```\n\nI am trying to use tailwindcss in React Native with Nativewind. Here is the link I am following.\n\n========================================\n\nTop Answer:\nI have also got the same error when I install the `tailwindcss` with `npm`.\n\nI have solved this by downgrading the `tailwindcss` to `3.3.2`\n\n```\nnpm install tailwindcss@3.3.2 --save-dev\n```\n\n========================================\n\nCode:\n```text\nimport { View, Text } from 'react-native'\nimport React from 'react'\n\nexport default function HomeScreen() {\n return (\n <View>\n <Text className=\"text-red\">HomeScreen</Text>\n </View>\n )\n}\n```\n\n```text\nyarn add nativewind\nyarn add --dev tailwindcss@3.3.2\n```\n\n```text\n3.3.2\n```\n\n```text\nyarn\n```\n\n```text\nnpm\n```\n\n```text\nnpm install tailwindcss@3.3.2 --save-dev\n```\n\n```text\ntailwindcss\n```\n\n```text\nnpm\n```\n\n```text\ntailwindcss\n```\n\n```text\n3.3.2\n```\n\n```text\nimport { View, Text } from 'react-native';\nimport React from 'react';\nimport process from 'tailwindcss/lib';\nimport styles from './styles.css';\n\nexport default function HomeScreen() {\n return (\n <View>\n <Text className=\"text-red\">HomeScreen</Text>\n </View>\n );\n}\n\n// Async plugins processing\nprocess(styles)\n .then(() => {\n // Render your components after tailwindcss plugins have been processed\n ReactDOM.render(<HomeScreen />, document.getElementById('root'));\n })\n .catch((error) => {\n console.error(error);\n });\n```\n\n```text\nyarn add nativewind\nyarn add --dev tailwindcss@3.3.2\n```\n\n```text\nSDK 49\n```\n\n```text\ntailwindcss\n```\n\n```text\n3.3.2\n```\n\n```text\nyarn remove nativewind\nyarn remove tailwindcss\nyarn add postcss@8.4.23\nyarn add --dev tailwindcss@3.3.2\nyarn add nativewind\n```\n\n```text\nnpm i tailwindcss\": \"3.3.2\" \n# or \nyarn add tailwindcss\": \"3.3.2\"\n```\n\n```text\nnpm i --dev tailwindcss@3.3.2\n# or \nyarn add --dev tailwindcss@3.3.2\n```\n\n```text\nZenloop-Regular.ttf\n```\n\n```text\nZenLoop-Regular.ttf\n```\n\n```text\n^3.3.2\n```\n\n```text\n3.3.2\n```\n\n========================================\n\nComments:\n- It could be from PR `tailwindlabs/tailwindcss#11548`: Make PostCSS plugin async to improve performance which was released in `v3.3.3` on July 13th. You could consider rolling back to `v3.3.2` until there is a more definitive resolution. Also, relevant issue `marklawlor/nativewind#501`.\n- Thank you Muhammad! I upgraded from Expo SDK 47 to 48 and this provided a nice quick fix to many of my bug fix issues.\n- Just downgrading to `3.3.2` was enough for me. No need to change to `yarn`.\n- --dev is not an option for NPM. Use `npm i -D tailwindcss@3.3.2` instead.\n- you can use --save-dev, as Venkata writes\n- Welcome to Stack Overflow, David Suzuki! Several of your answers appear likely to be entirely or partially written by AI (e.g., ChatGPT). Please be aware that posting AI-generated content is not allowed here. If you used an AI tool to assist with any answer, I would encourage you to delete it. We do hope you'll stick around and be a valuable part of our community by posting *your own* quality content. Thanks!\n- **Readers should review this answer carefully and critically, as AI-generated information often contains fundamental errors and misinformation.** If you observe quality issues and/or have reason to believe that this answer was generated by AI, please leave feedback accordingly.\n- The question specifies React Native yet this code is invalid for React Native, in particular `ReactDOM.render` and `document.getElementById`\n- I'm also using firebase, and I was able to upgrade to 10.1.0 without getting this same error, however I did need to update an import statement from: import { initializeAuth, getReactNativePersistence } from 'firebase/auth/react-native'; to: import { initializeAuth, getReactNativePersistence } from 'firebase/auth/react-native'; because I was getting an error that said: Unable to resolve \"firebase/auth/react-native\" from \"firebase.js\"\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- Really this order matters the configuration is this way correct. I first intalled nativewind and then tailwind css then was getting the same error. But followed this answer and this worked like magic, and now I am enjoying tailwind in react-native\n- In packages.json, I had to move devDependencies above dependencies and that seemed to help maintain this order.","metadata":{"transformedAt":"2026-08-18T18:33:42.894Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":22,"totalLines":181,"estimatedTokens":1239}}178{"id":"stack-64197107","source":"stackoverflow","questionId":64197107,"title":"How to modify svg icon colors with Tailwind","tags":["html","css","tailwind-css"],"text":"Title: How to modify svg icon colors with Tailwind\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using TailwindCSS and want to change the color of an svg. Without Tailwind this question has been asked before here, for 2020 this should be a good answer but Tailwind does not support those filters. There is a guide in the docs on how to work with svg icons but this tutorial works without files, just the plain text paths.\n\nI downloaded the svg files and assign the path to the svg to the image's `src` tag. The following example shows my problem, I want the icon's background to be red and the icon's color to be blue. Unfortunately it's not possible for me to change the icon color.\n\n\r\n\r\n\n```\n\n```\n\n\r\n\r\n\r\n\nWhat is the correct workflow when downloading svg icons and use them directly by linking the assets path? All I want to achieve is something like this\n\n```\n\n \n\n```\n\nand set the icon color to a custom Tailwind color e.g. `red-500`. So whenever I want to change the icon color I can simply modify the color class.\n\nDoes someone know how to do it?\n\n========================================\n\nTop Answer:\nIn simple terms use `text-` and `fill-current`\n\n```\n\n \n\n```\n\nOutput:\n\nhttps://i.sstatic.net/lyr3Hs.png\n\n========================================\n\nCode:\n```html\n<link href=\"https://unpkg.com/tailwindcss@1.8.10/dist/tailwind.min.css\" rel=\"stylesheet\" />\n\n<!-- taken from here https://www.iconfinder.com/icons/765208/media_twitter_social_icon -->\n<img class=\"fill-current bg-red-500 text-blue-500\" src=\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI2MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA2MCA2MCIgd2lkdGg9IjYwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iYmxhY2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBpZD0ic2xpY2UiLz48ZyBmaWxsPSIjMDAwMDAwIiBpZD0idHdpdHRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMuMDAwMDAwLCAxNi4wMDAwMDApIj48cGF0aCBkPSJNMjguMDUyMTM4NSwyLjQzNjY5NDI3IEMyNi44NDMxODQ2LDEuMDYyMjAxNSAyNS4xMjA1Mzg1LDAuMTg2NDY0MTA1IDIzLjIxNDA2MTUsMC4xNTQ3MzEwMjggQzE5LjU1MzYsMC4wOTM4MDMwOTA1IDE2LjU4NTY1MzgsMy4xODY5MjMzOSAxNi41ODU2NTM4LDcuMDYzMTE2MDQgQzE2LjU4NTY1MzgsNy42MTMyNDExOCAxNi42NDQyOTIzLDguMTQ5NjkzMzcgMTYuNzU3MzY5Miw4LjY2NDY3MzE2IEMxMS4yNDg1ODQ2LDguMzA3MzUyNTcgNi4zNjQ0NjkyMyw1LjQzODc3MDU5IDMuMDk1NDE1MzgsMS4xMTQ3MjE4IEMyLjUyNDg2MTU0LDIuMTUwODYxNyAyLjE5NzkwNzY5LDMuMzYxODgyNzEgMi4xOTc5MDc2OSw0LjY1OTE1MDM3IEMyLjE5NzkwNzY5LDcuMTE0OTg4NDQgMy4zNjgwOTIzMSw5LjI5NDUyNzI0IDUuMTQ2NjMwNzcsMTAuNTgxNDE3NCBDNC4wNjAxMjMwOCwxMC41MzM0NDk5IDMuMDM4MDY5MjMsMTAuMjA0NTM3OCAyLjE0NDQzODQ2LDkuNjY0OTUyMDMgQzIuMTQzNzkyMzEsOS42OTQ0NDQ5NyAyLjE0Mzc5MjMxLDkuNzIzOTQ0OTQgMi4xNDM3OTIzMSw5Ljc1Mzk2MjQ1IEMyLjE0Mzc5MjMxLDEzLjE4MzU0OTcgNC40Mjg1OTIzMSwxNi4wNjA3MDc2IDcuNDYwODMwNzcsMTYuNzMwOTM4MyBDNi45MDQ2NTM4NSwxNi44ODg1MzggNi4zMTkwNzY5MiwxNi45NzEwMTYzIDUuNzE0NiwxNi45NjcwMDggQzUuMjg3NDkyMzEsMTYuOTY0MTc1OCA0Ljg3MjE3NjkyLDE2LjkxNjgxMTggNC40Njc1MjMwOCwxNi44MzE3NjggQzUuMzEwOTE1MzgsMTkuNjQ0Mzc3NyA3Ljc1ODcwNzY5LDIxLjY5Njc2NjMgMTAuNjU5MjkyMywyMS43NjQ2MjggQzguMzkwODA3NjksMjMuNjQ3Njk2MyA1LjUzMjg2OTIzLDI0Ljc2OTE5MzMgMi40MjcyOTIzMSwyNC43NjI3ODcgQzEuODkyMjc2OTIsMjQuNzYxNjgzMyAxLjM2NDY5MjMxLDI0LjcyNzExMiAwLjg0NjE1Mzg0NiwyNC42NjA1OTk2IEMzLjc3OTUzMDc3LDI2LjY3MzMxMzkgNy4yNjM1OTIzMSwyNy44NDUxNzExIDExLjAwNjc2MTUsMjcuODQ2MTUzMSBDMjMuMTk4NTUzOCwyNy44NDkzNTE4IDI5Ljg2NTczMDgsMTcuMjM5NTEwOSAyOS44NjU3MzA4LDguMDM2NzY4NjggQzI5Ljg2NTczMDgsNy43MzQ4MzYzMiAyOS44NTkxMDc3LDcuNDM0NTE5MTIgMjkuODQ2NTA3Nyw3LjEzNTY1MTk1IEMzMS4xNDE1NjE1LDYuMTcwNjY2NDUgMzIuMjY1MjIzMSw0Ljk2MDc4OTE1IDMzLjE1Mzg0NjIsMy41NzkyMTkwMSBDMzEuOTY1MjQ2Miw0LjExNTAxNjE1IDMwLjY4NzYzODUsNC40NzA4Njg2MyAyOS4zNDcwMzA4LDQuNjIwMTM3ODkgQzMwLjcxNTQyMzEsMy43Nzc5NjUxOCAzMS43NjY1NTM4LDIuNDMwMDk2MDcgMzIuMjYxMzQ2MiwwLjgxMzc1ODQwNCBDMzAuOTgwNTA3NywxLjU5MDQ5MjI5IDI5LjU2MjAzODUsMi4xNDc1MTI4NiAyOC4wNTIxMzg1LDIuNDM2Njk0MjcgWiIvPjwvZz48L2c+PC9zdmc+\">\n```\n\n```text\n<a href=\"https://twitter.com\" target=\"_blank\">\n <img src=\"pathToSvgInAssetsFolder\" />\n</a>\n```\n\n```text\nsrc\n```\n\n```text\nred-500\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@1.8.10/dist/tailwind.min.css\" rel=\"stylesheet\" />\n\n<svg class=\"text-teal-500 fill-current h-16 w-16\" viewBox=\"0 0 60 60\">\n <path d=\"M41.05 18.44a6.6 6.6 0 00-4.84-2.29c-3.66-.06-6.62 3.04-6.62 6.91 0 .55.05 1.09.17 1.6a18.68 18.68 0 01-13.66-7.55 7.33 7.33 0 00-.9 3.55 7.3 7.3 0 002.95 5.92 6.34 6.34 0 01-3-.92v.1c0 3.42 2.28 6.3 5.31 6.97a6.24 6.24 0 01-3 .1 6.74 6.74 0 006.2 4.93 12.8 12.8 0 01-9.81 2.9A17.89 17.89 0 0024 43.85c12.19 0 18.86-10.61 18.86-19.81l-.02-.9c1.3-.97 2.42-2.18 3.3-3.56-1.18.54-2.46.9-3.8 1.04a6.8 6.8 0 002.91-3.8c-1.28.77-2.7 1.33-4.2 1.62z\"/>\n</svg>\n\n<svg class=\"bg-red-500 text-red-800 fill-current h-16 w-16 rounded-lg\" viewBox=\"0 0 60 60\">\n <path d=\"M25.46 47.31V30h-3.52v-5.74h3.52v-3.47c0-4.68 1.4-8.06 6.53-8.06h6.1v5.73h-4.3c-2.15 0-2.64 1.43-2.64 2.92v2.88h6.62l-.9 5.74h-5.72V47.3h-5.69z\"/>\n</svg>\n```\n\n```text\n<svg class=\"h-16 w-16 rounded-full bg-cyan-400 fill-current text-white\" viewBox=\"0 0 60 60\">\n <path d=\"M25.46 47.31V30h-3.52v-5.74h3.52v-3.47c0-4.68 1.4-8.06 6.53-8.06h6.1v5.73h-4.3c-2.15 0-2.64 1.43-2.64 2.92v2.88h6.62l-.9 5.74h-5.72V47.3h-5.69z\" />\n</svg>\n```\n\n```text\ntext-<color>\n```\n\n```text\nfill-current\n```\n\n```text\nstroke-cyan-500\n```\n\n```text\nfill-cyan-300\n```\n\n```text\n//bell icon\n <svg viewBox=\"0 0 46 48\" class=\"fill-current text-blue-400\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M23.0002 0C12.5068 0 4.00017 8.50659 4.00017 19V32.5335C4.00017 32.8383 3.9145 33.1371 3.75292 33.3956L0.912672 37.94C0.0801118 39.2721 1.0378 41 2.60867 41H43.3917C44.9625 41 45.9202 39.2721 45.0877 37.94L42.2474 33.3956C42.0858 33.1371 42.0002 32.8383 42.0002 32.5335V19C42.0002 8.50659 33.4936 0 23.0002 0ZM23.0002 48C20.2388 48 18.0002 45.7614 18.0002 43H28.0002C28.0002 45.7614 25.7616 48 23.0002 48Z\"></path>\n </svg>\n```\n\n```text\nclass=\"fill-current\"\n```\n\n```text\ntext-blue-400\n```\n\n```text\nnpx @svgr/cli --no-dimensions --typescript --out-dir src/components/icons_svg -- public/icons_svg\n```\n\n```text\nfill\n```\n\n```text\nsed -i '' -e 's/fill=\".*\"//g' $(find src/components/icons_svg -type f -not -path \"*path/to/your/colored/MySvg.tsx*\")\n```\n\n```text\nMySvg.tsx\n```\n\n```text\nfill\n```\n\n```text\n<SvgLogo className=\"h-4 w-4 fill-red\" />\n```\n\n```text\n<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\"> <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25\" /> </svg>\n```\n\n```text\n<div class=\"text-yellow-400 h-12 w-12 fill-yellow-400\">\n <?php include 'images/star-full.svg'; ?>\n </div>\n```\n\n```text\n<svg class=\"h-full w-full fill-current\" viewBox=\"0 -960 960 960\"><path d=\"M480-269 314-169q-11 7-23 6t-21-8q-9-7-14-17.5t-2-23.5l44-189-147-127q-10-9-12.5-20.5T140-571q4-11 12-18t22-9l194-17 75-178q5-12 15.5-18t21.5-6q11 0 21.5 6t15.5 18l75 178 194 17q14 2 22 9t12 18q4 11 1.5 22.5T809-528L662-401l44 189q3 13-2 23.5T690-171q-9 7-21 8t-23-6L480-269Z\"/></svg>\n```\n\n```text\n<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"h-5 w-5\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n class=\"size-6\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\"\n />\n </svg>\n```\n\n========================================\n\nComments:\n- There is no workflow for using SVG as images unless the SVG is designed exactly as you want it to appear. Why not use inline SVG?\n- sorry, what do you mean? I tried this jsfiddle.net/e0o8ctmg\n- This will be helpful tailwindcss.com/docs/fill\n- Step 5 says Add Tailwind classes. Do we do anything other than Fill, Stroke and Stroke Width? I was wondering if the answer should be more specific?\n- For me, the missing part was the **fill-current** class\n- I tried this and the svg is not picking up the color. Are these instructions still accurate?\n- @Mel it still works on Tailwind Play play.tailwindcss.com/vsSEXCEuTq which runs the most current version of Tailwind. Is your Tailwind CLI build process running?\n- @Pjotr Same for me. SVGs' color would not update unless I added a `fill-current` class.\n- What if I want to change an icon? Should I find&replace all its appearances in my project? What if this same icon was optimised differently in different places in my code or edited manually so that they don't match each other letter by letter? You will have to find each icon manually and edit it. Now imagine updating the whole icon set. Also if you load your svg from your /public folder you can cache it while here you duplicate it all the time in html. Not to mention you pollute your code with this svg path stuff. IMHO inline svg is a very bad solution in terms of programming experience.\n- @OlegYablokov It's easiest to build a reusable component that inserts the path data into an SVG element. Then when an icon needs to be updated you just update the path data. The only pollution would happen in the rendered HTML in the browser, users don't care. Also inline SVG prevents multiple round trips to the server, loads instantly with the HTML and SVG icons (when made correctly) are so small they have almost no impact on the overall size of the HTML sent to the client. But thanks for sharing your humble opinion on the matter.\n- @JHeth good point about multiple round trips, I've missed that. Sure, I guess I will write some MySvg component for that. BTW if anyone finds a library for that so that one doesn't have to write their own custom svg component please drop a link to it here\n- UPD: I've found such a library for those who use React, see my my answer\n- Why doesn't it work with just `fill-color-100`? Why do I need to use `text-color` instead of this?\n- @Flamingo because icons (and decorations in general) are often used alongside text and expected to use the same color as the surrounding text, so it just makes things easier to have stroke or fill default to text color. \"current\" is also bigger than Tailwind, as it's part of CSS itself - css-tricks.com/currentcolor","metadata":{"transformedAt":"2026-08-18T18:33:42.894Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":23,"totalLines":193,"estimatedTokens":2691}}179{"id":"stack-69981112","source":"stackoverflow","questionId":69981112,"title":"focus:outline-none not working Tailwind CSS with Laravel","tags":["css","laravel","tailwind-css"],"text":"Title: focus:outline-none not working Tailwind CSS with Laravel\nTags: css, laravel, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using Tailwind CSS for my Laravel application, and want to remove the focus border on the input boxes. According to the documentation, `focus:outline-none` should achieve this, although it is not working for me and the border still appears on focus.\n\nIt looks like I am targeting the wrong thing, as if I do `focus:outline-black`, I can see a black outline as well as the standard blue one on focus.\n\n`focus:border-none` also does not fix the problem.\n\nAny ideas?\n\n```\n\n.text-input {\n @apply focus:outline:none;\n}\n```\n\n**tailwind.config.js**\n\n```\nconst defaultTheme = require('tailwindcss/defaultTheme');\nconst colors = require('tailwindcss/colors');\n\nmodule.exports = {\n mode: 'jit',\n purge: [\n './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',\n './vendor/laravel/jetstream/**/*.blade.php',\n './storage/framework/views/*.php',\n './resources/views/**/*.blade.php',\n ],\n\n theme: {\n extend: {\n fontFamily: {\n sans: ['Nunito', ...defaultTheme.fontFamily.sans],\n }, \n },\n colors: { \n black: colors.black,\n white: colors.white,\n gray: colors.trueGray,\n indigo: colors.indigo,\n red: colors.rose,\n yellow: colors.amber,\n blue: colors.blue,\n },\n },\n\n plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],\n};\n```\n\n**webpack.mix.js**\n\n```\nconst mix = require('laravel-mix');\n\n/*\n |--------------------------------------------------------------------------\n | Mix Asset Management\n |--------------------------------------------------------------------------\n |\n | Mix provides a clean, fluent API for defining some Webpack build steps\n | for your Laravel applications. By default, we are compiling the CSS\n | file for the application as well as bundling up all the JS files.\n |\n */\n\nmix.js('resources/js/app.js', 'public/js')\n .postCss('resources/css/app.css', 'public/css', [\n require('postcss-import'),\n require('tailwindcss'),\n ]);\n\nif (mix.inProduction()) {\n mix.version();\n}\n```\n\n========================================\n\nTop Answer:\n```\n!outline-none\n```\n\nThis fixed it for me.\n\n========================================\n\nCode:\n```html\n<input class=\"text-input\" placeholder=\"Your Name\" />\n\n.text-input {\n @apply focus:outline:none;\n}\n```\n\n```js\nconst defaultTheme = require('tailwindcss/defaultTheme');\nconst colors = require('tailwindcss/colors');\n\nmodule.exports = {\n mode: 'jit',\n purge: [\n './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',\n './vendor/laravel/jetstream/**/*.blade.php',\n './storage/framework/views/*.php',\n './resources/views/**/*.blade.php',\n ],\n\n theme: {\n extend: {\n fontFamily: {\n sans: ['Nunito', ...defaultTheme.fontFamily.sans],\n }, \n },\n colors: { \n black: colors.black,\n white: colors.white,\n gray: colors.trueGray,\n indigo: colors.indigo,\n red: colors.rose,\n yellow: colors.amber,\n blue: colors.blue,\n },\n },\n\n plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],\n};\n```\n\n```js\nconst mix = require('laravel-mix');\n\n/*\n |--------------------------------------------------------------------------\n | Mix Asset Management\n |--------------------------------------------------------------------------\n |\n | Mix provides a clean, fluent API for defining some Webpack build steps\n | for your Laravel applications. By default, we are compiling the CSS\n | file for the application as well as bundling up all the JS files.\n |\n */\n\nmix.js('resources/js/app.js', 'public/js')\n .postCss('resources/css/app.css', 'public/css', [\n require('postcss-import'),\n require('tailwindcss'),\n ]);\n\nif (mix.inProduction()) {\n mix.version();\n}\n```\n\n```text\nfocus:outline-none\n```\n\n```text\nfocus:outline-black\n```\n\n```text\nfocus:border-none\n```\n\n```text\noutline-none\n```\n\n```text\nborder-transparent focus:border-transparent focus:ring-0\n```\n\n```text\nfocus:outline-none\n```\n\n```css\n!outline-none\n```\n\n```text\nborder-none focus:ring-0\n```\n\n```text\nborder // border-width: 1px;\nborder-slate-700 // DEFAULT border-color\nhover:border-slate-500 // HOVER border-color\nfocus:border-blue-500 // WHEN WRITE border-color\nfocus:outline-none // NONE OUTLINE WHEN WRITE\n```\n\n```text\n<input />\n```\n\n```text\nfocus:ring-transparent\n```\n\n```text\nfocus:border-current focus:ring-0\n```\n\n```text\n[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {\n outline: 0px !important;\n outline-offset: 0px !important;\n box-shadow: none !important;\n}\n```\n\n```text\n<head>\n```\n\n```text\n!important\n```\n\n```text\nfocus:ring-0 focus:ring-offset-0\n```\n\n```text\noutline:none\n```\n\n```css\ninput:focus, input:hover{ \n box-shadow:none !important;\n}\n```\n\n```text\nLaravel\n```\n\n```text\nTailwind\n```\n\n```text\nMaterial UI\n```\n\n```text\nring\n```\n\n```text\noutline\n```\n\n```text\nborder\n```\n\n```text\nbox-shadow\n```\n\n```text\nTailwindCSS\n```\n\n```text\napp.css\n```\n\n```text\n[type='text'] {\n --tw-ring-color: transparent !important;\n}\n```\n\n```text\ncontrol: (base, state) => ({\n ...base,\n \"*\": {\n boxShadow: \"none !important\",\n },\n}),\n```\n\n```html\n<input\n type=\"text\"\n class=\"focus-visible:outline-none\"\n/>\n```\n\n```text\n^3.2.4\n```\n\n```text\noutline outline-transparent\n```\n\n```text\n<input />\n```\n\n```text\nfocus:!ring-offset-0\n```\n\n```text\n!\n```\n\n```text\nfocus-visible:ring-0\n```\n\n```text\n<input type=\"text\" placeholder=\"anything\" class=\"focus-visible:outline-none text-blue-500\" />\n```\n\n```css\n.custom-input {\n outline: none;\n border: none;\n}\n\n.custom-input:focus-visible {\n outline: none;\n}\n```\n\n```html\n<input type=\"text\" placeholder=\"anythings\" class=\"custom-input\" />\n```\n\n```text\nfocus-visible: outline-none\n```\n\n```text\nfocus\n```\n\n```css\n@layer base {\n *:focus {\n @apply focus:!border-transparent focus:!ring-0 focus:!ring-offset-0;\n }\n}\n```\n\n```html\n<input\n type=\"text\"\n class=\"focus-visible:ring-0 focus-visible:ring-offset-0\"\n/>\n```\n\n========================================\n\nComments:\n- Did you compile your assets after adding the outline? Maybe the purge is enabled and is causing the problem.\n- Yes I did, got `npm run watch` constantly running\n- Well I think it's something else.. Can you update your question with the contents of your `tailwind.config.js` and your `webpack.mix.js` (if you use webpack)?\n- @Dennis sorry for slow response, I have updated the question with those now\n- No luck unfortunatley\n- this did it for me.\n- This work for me using vite/vue3\n- Thank you - I have a border on the bottom edge of my input, so didn't use the `border-transparent`, but the `focus:ring-0` seemed to work fine on its own anyway. However, it was changing the color of my bottom border, but I just fixed this by setting the focus border color to the same as the non-focus color... if that makes sense!\n- The problem is the cheboxes' default focus:ring, as shown above. It's never set to 0, by default on checkboxes.\n- Thanks @kamil_b, If anyone didn't want to make the border to be transparent you can use `focus:border-[your_color_code] focus:ring-0`. It works for me\n- At the end of the day `border-0 focus:ring-0` was enough, never thank you enough for the `ring-0` <3\n- what does `!` mean ?\n- It's an important modifier, tailwind docs here.\n- It works! None of other does!\n- This fixes it. `className=\"!outline-none'` Thank you!\n- Both solutions worked - this one seems to be cleaner and more logical :)\n- I was trying to remove blue outline when an input is focused, this one worked but has a small bug. I have a `focus:border-b` class on my input, adding `focus:ring-0` helped disable the blue border but, now the bottom border I added turned blue\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- This works Today\n- `outline-none` is the correct answer in tailwindcss\n- Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. **It would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient.** Can you kindly edit your answer to offer an explanation?\n- Thanks @tanishq-s , it is the only solution that working for me using custom styling.","metadata":{"transformedAt":"2026-08-18T18:33:42.894Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":46,"totalLines":393,"estimatedTokens":2252}}180{"id":"stack-69230343","source":"stackoverflow","questionId":69230343,"title":"NextJS Image component with fixed witdth and auto height","tags":["reactjs","next.js","tailwind-css","nextjs-image"],"text":"Title: NextJS Image component with fixed witdth and auto height\nTags: reactjs, next.js, tailwind-css, nextjs-image\nSource: Stack Overflow\n\nQuestion:\nI am using NextJS Image component. I want the image to fill 100% width and take as much height as it needs to maintain the aspect ratio. I have tried many different variations of this code but it will not work unless I define a fixed height on the parent div.\n\n```\nexport default function PhotoCard({ img }: Props) {\n return (\n \n \n \n );\n }\n```\n\nThis is the current behaviour\nhttps://i.sstatic.net/9LvFx.jpg\n\n========================================\n\nTop Answer:\nFrom Next.js 13, the `next/image` component allows styling the underlying image directly using `style`/`className`. This means you can apply `width: 100%` and `height: auto` on the `Image` component directly.\n\n```\nimport Image from 'next/image';\n\n```\n\nOr, if using Tailwind CSS.\n\n```\nimport Image from 'next/image';\n\n```\n\nBefore Next.js 13, the above feature is only available through `next/future/image`, and from version 12.2, `next/future/image` was still experimental and can be enabled in `next.config.js` under the `experimental` flag.\n\n```\nmodule.exports = {\n experimental: {\n images: {\n allowFutureImage: true\n }\n },\n // Other configs\n}\n```\n\n========================================\n\nCode:\n```text\nexport default function PhotoCard({ img }: Props) {\n return (\n <div className=\"relative w-full h-32 my-2\">\n <Image alt={img.title} src={img.url} layout=\"fill\" objectFit=\"cover\" />\n </div>\n );\n }\n```\n\n```text\n<Image\n loading={\"lazy\"}\n fill\n src={post.image}\n/>\n```\n\n```text\nimage\n```\n\n```text\nurl\n```\n\n```text\nwidth\n```\n\n```text\nheight\n```\n\n```text\nfill\n```\n\n```text\n<Image src={image.url} alt={image.title} width=\"100%\" height=\"100%\" layout=\"responsive\" objectFit=\"contain\"/>\n```\n\n```text\n<Image src={image.url} alt={image.title} width=\"100vw\" height=\"100%\" layout=\"responsive\" objectFit=\"contain\"/>\n```\n\n```text\n<Image\n layout=\"fill\"\n src=\"/cat.jpg\"\n onLoadingComplete={e => console.log(e)} // {naturalHeight: ..., naturalWidth: ...}\n/>\n```\n\n```text\nonLoadingComplete\n```\n\n```text\nuseState\n```\n\n```js\nimport Image from 'next/image';\n\n<Image\n src={img1}\n width=\"0\"\n height=\"0\"\n sizes=\"100vw\"\n style={{ width: '100%', height: 'auto' }}\n/>\n```\n\n```js\nimport Image from 'next/image';\n\n<Image\n src={img1}\n width=\"0\"\n height=\"0\"\n sizes=\"100vw\"\n className=\"w-full h-auto\"\n/>\n```\n\n```js\nmodule.exports = {\n experimental: {\n images: {\n allowFutureImage: true\n }\n },\n // Other configs\n}\n```\n\n```text\nnext/image\n```\n\n```text\nstyle\n```\n\n```text\nclassName\n```\n\n```text\nwidth: 100%\n```\n\n```text\nheight: auto\n```\n\n```text\nImage\n```\n\n```text\nnext/future/image\n```\n\n```text\nnext/future/image\n```\n\n```text\nnext.config.js\n```\n\n```text\nexperimental\n```\n\n```js\n<div\n className=\"mx-auto w-[100%] md:bg-card md:w-[720px] max-w-4/5\"\n key={img.imageProps.src}\n >\n <Image\n placeholder=\"blur\"\n {...img.imageProps}\n layout={'responsive'}\n alt={`${chapterData.chapterNumber} image`}\n />\n </div>\n```\n\n```js\nexport type ImageProps = {\n blurDataURL: string;\n src: string;\n height: number;\n width: number;\n type?: string | undefined;\n};\n```\n\n```text\nconst convertImages = async (image: string) => {\n const { base64, img } = await getPlaiceholder(image, { size: 14 });\n return {\n imageProps: {\n ...img,\n blurDataURL: base64,\n },\n };\n };\n```\n\n```text\nnext/future/image\n```\n\n```text\ncss\n```\n\n```text\nwidth-[100%]\n```\n\n```text\n{...img.imageProps}\n```\n\n```text\nplaiceholder\n```\n\n```text\nblurImage\n```\n\n```text\nheight\n```\n\n```text\nwidth\n```\n\n```text\n<Image/>\n```\n\n```text\nImage with src \"image path\" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: \"auto\"' or 'height: \"auto\"' to maintain the aspect ratio.\n```\n\n```text\n<Image\n src=\"image path\"\n height={0}\n width={0}\n style={{width:'120px', height: \"auto\" }}\n />\n```\n\n```text\n<Image\n alt=\"logo\"\n src=\"/logo.png\"\n width={110}\n height={65}\n style={{ width: \"auto\", height: \"auto\" }}\n />\n```\n\n```text\nimport Image from \"next/image\";\n<Image\n src={someImg}\n width=\"75\" //set a width or height\n alt=\"img\"\n className=\"h-auto\" // add h-auto (if you've set width)\n />\n```\n\n```text\n<Image src={imageSrc} width={400} height={600} alt={t.title} style={{ height: 600, width: 400 }}/>\n```\n\n```text\n<Image\n src={img}\n alt={imgName}\n className=\"md:w-24 w-20 h-auto\" // Using tailwindcss\n width={0}\n height={0}\n/>\n```\n\n```text\nwidth\n```\n\n```text\nheight\n```\n\n```text\nnumber | undefined\n```\n\n```text\nclassName\n```\n\n```text\nstyle\n```\n\n========================================\n\nComments:\n- Try to set the image directly inside the `` tag.\n- This should be higher up! Setting only one dimension for images and auto-ing the other is a pretty common design in normal images, I wonder why NextJS can't support that feature more easily.\n- `layout` is deprecated nextjs.org/docs/api-reference/next/legacy/image\n- @Mo. The future image component looks promising tbh.\n- This doesn't work, you have to duplicate code, because height and width are used for resizing params passed to the server. Passing 0 gives bad values.\n- Unfortunately this will work only if the image url has exactly the desired dimensions to display.\n- This helped remove the error. Thank you for that. However, after applying height and width to 0, and applying Tailwind classes: `className=\"w-[300px] h-auto\"`, the image is blurred. Any idea why that could be the case?..\n- Had the same issue too after trying this solution; but fixed it by adding style={{ height: 142, width: 122 }}. Below is my example: `jsx `\n- idownvotedbecau.se/imageofcode\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- For square svg, use the same number for width and height","metadata":{"transformedAt":"2026-08-18T18:33:42.894Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":48,"totalLines":343,"estimatedTokens":1595}}181{"id":"stack-64032166","source":"stackoverflow","questionId":64032166,"title":"Tailwindcss not working with next.js; what is wrong with the configuration?","tags":["javascript","reactjs","next.js","tailwind-css","tailwind-css-3"],"text":"Title: Tailwindcss not working with next.js; what is wrong with the configuration?\nTags: javascript, reactjs, next.js, tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nFor some reason, TailwindCSS v3 is not rendering properly in Next.js. I'm wondering if something is wrong with my settings?\n\n**styles/tailwind.css**\n\n```\n@tailwind base;\n\n/* Write your own custom base styles here */\n\n/* Start purging... */\n@tailwind components;\n/* Stop purging. */\n\n/* Write you own custom component styles here */\n.btn-blue {\n @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;\n}\n\n/* Start purging... */\n@tailwind utilities;\n/* Stop purging. */\n\n/* Your own custom utilities */\n```\n\n**_app.js**\n\n```\nimport React from \"react\";\n// import \"styles/global.scss\";\nimport 'styles/tailwind.css'\n\nimport NavbarCustom from \"components/Layout/NavbarCustom\";\nimport Footer from \"components/Layout/Footer\";\nimport \"util/analytics.js\";\nimport { ProvideAuth } from \"util/auth.js\";\n\nfunction MyApp({ Component, pageProps }) {\n return (\n \n <>\n \n\n \n <>\n \n )\n}\n```\n\nWhat am I doing wrong? So confused, usually this sort of setup is fine.\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\n future: {\n removeDeprecatedGapUtilities: true,\n },\n purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {\n colors: {\n 'accent-1': '#333',\n },\n },\n },\n variants: {},\n plugins: [],\n}\n```\n\n**postcss.config.js**\n\n```\nmodule.exports = {\n plugins: [\n 'tailwindcss',\n 'postcss-flexbugs-fixes',\n [\n 'postcss-preset-env',\n {\n autoprefixer: {\n flexbox: 'no-2009',\n },\n stage: 3,\n features: {\n 'custom-properties': false,\n },\n },\n ],\n ],\n }\n\n{\n \"name\": \"MoodMap\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"keywords\": [\n \"MoodMap\"\n ],\n \"dependencies\": {\n \"@analytics/google-analytics\": \"0.2.2\",\n \"@stripe/stripe-js\": \"^1.5.0\",\n \"analytics\": \"0.3.1\",\n \"fake-auth\": \"0.1.7\",\n \"mailchimp-api-v3\": \"1.13.1\",\n \"next\": \"9.5.3\",\n \"query-string\": \"6.9.0\",\n \"raw-body\": \"^2.4.1\",\n \"rc-year-calendar\": \"^1.0.2\",\n \"react\": \"16.12.0\",\n \"react-dom\": \"16.12.0\",\n \"react-hook-form\": \"4.10.1\",\n \"react-query\": \"2.12.1\",\n \"react-transition-group\": \"^4.4.1\",\n \"stripe\": \"^8.52.0\"\n },\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"stripe-webhook\": \"stripe listen --forward-to localhost:3000/api/stripe-webhook\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"postcss-flexbugs-fixes\": \"^4.2.1\",\n \"postcss-preset-env\": \"^6.7.0\",\n \"stylelint\": \"^13.7.1\",\n \"stylelint-config-standard\": \"^20.0.0\",\n \"tailwindcss\": \"^1.8.9\"\n }\n}\n```\n\n========================================\n\nTop Answer:\n**For devs that created their project with nextJS.**\n\nbe aware that the content of the `tailwind.config.js` needs the correct paths to the files.\n\n```\nmodule.exports = {\n content: [\n \"./src/pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nFor example, if you create a project with nextjs for example, you have a `pages` folder, where your `index.js` file is located. Therefore the code snippet (see below) on https://tailwindcss.com/docs/installation/using-postcss is not perfectly matching. Change it to the above or your own liking.\n\n```\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n========================================\n\nCode:\n```css\n@tailwind base;\n\n/* Write your own custom base styles here */\n\n/* Start purging... */\n@tailwind components;\n/* Stop purging. */\n\n/* Write you own custom component styles here */\n.btn-blue {\n @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;\n}\n\n/* Start purging... */\n@tailwind utilities;\n/* Stop purging. */\n\n/* Your own custom utilities */\n```\n\n```js\nimport React from \"react\";\n// import \"styles/global.scss\";\nimport 'styles/tailwind.css'\n\nimport NavbarCustom from \"components/Layout/NavbarCustom\";\nimport Footer from \"components/Layout/Footer\";\nimport \"util/analytics.js\";\nimport { ProvideAuth } from \"util/auth.js\";\n\nfunction MyApp({ Component, pageProps }) {\n return (\n <ProvideAuth>\n <>\n <NavbarCustom\n bg=\"white\"\n variant=\"light\"\n expand=\"md\"\n logo=\"icons/Logo_512px.png\"\n />\n\n <Component {...pageProps} />\n <>\n </ProvideAuth>\n )\n}\n```\n\n```js\nmodule.exports = {\n future: {\n removeDeprecatedGapUtilities: true,\n },\n purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {\n colors: {\n 'accent-1': '#333',\n },\n },\n },\n variants: {},\n plugins: [],\n}\n```\n\n```js\nmodule.exports = {\n plugins: [\n 'tailwindcss',\n 'postcss-flexbugs-fixes',\n [\n 'postcss-preset-env',\n {\n autoprefixer: {\n flexbox: 'no-2009',\n },\n stage: 3,\n features: {\n 'custom-properties': false,\n },\n },\n ],\n ],\n }\n\n{\n \"name\": \"MoodMap\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"keywords\": [\n \"MoodMap\"\n ],\n \"dependencies\": {\n \"@analytics/google-analytics\": \"0.2.2\",\n \"@stripe/stripe-js\": \"^1.5.0\",\n \"analytics\": \"0.3.1\",\n \"fake-auth\": \"0.1.7\",\n \"mailchimp-api-v3\": \"1.13.1\",\n \"next\": \"9.5.3\",\n \"query-string\": \"6.9.0\",\n \"raw-body\": \"^2.4.1\",\n \"rc-year-calendar\": \"^1.0.2\",\n \"react\": \"16.12.0\",\n \"react-dom\": \"16.12.0\",\n \"react-hook-form\": \"4.10.1\",\n \"react-query\": \"2.12.1\",\n \"react-transition-group\": \"^4.4.1\",\n \"stripe\": \"^8.52.0\"\n },\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"stripe-webhook\": \"stripe listen --forward-to localhost:3000/api/stripe-webhook\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"postcss-flexbugs-fixes\": \"^4.2.1\",\n \"postcss-preset-env\": \"^6.7.0\",\n \"stylelint\": \"^13.7.1\",\n \"stylelint-config-standard\": \"^20.0.0\",\n \"tailwindcss\": \"^1.8.9\"\n }\n}\n```\n\n```text\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import './base.css';\n@import 'tailwindcss/utilities';\n```\n\n```text\nglobals.css\n```\n\n```text\n@apply\n```\n\n```text\n./src/...\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n\"next\": \"11.1.0\",\n\"autoprefixer\": \"^10.3.3\",\n\"postcss\": \"^8.3.6\",\n\"tailwindcss\": \"^2.2.8\"\n```\n\n```text\nmodule.exports = {\n content: [],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\n\"next\": \"12.0.8\",\n\"autoprefixer\": \"^10.4.2\",\n\"postcss\": \"^8.4.5\",\n\"tailwindcss\": \"^3.0.15\"\n```\n\n```text\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\ntailwind.config.js\n```\n\n```js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n }\n```\n\n```text\nmodule.exports = {\n mode: 'jit',\n content: [\n \"./**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n }\n```\n\n```css\n@tailwind base;\n @tailwind components;\n @tailwind utilities;\n```\n\n```text\nmodule.exports = {\n purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nmodule.exports = {\n content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```js\nmodule.exports = {\n content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './containers/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n\n<!-- You have to add paths to folders in which you are using \n tailwindcss in the tailwind.config.js file -->\n\n<!-- Example: I add './containers/**/*.{js,ts,jsx,tsx}' to the \"content\"-->\n```\n\n```text\nmodule.exports = {\n content: [\n \"./src/pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\npages\n```\n\n```text\nindex.js\n```\n\n```text\n\"autoprefixer\": \"^10.4.7\",\n\"postcss\": \"^8.4.13\",\n\"tailwindcss\": \"^3.0.24\",\n```\n\n```text\n// postcss.config.js\nconst { join } = require('path');\n\nmodule.exports = {\n plugins: {\n tailwindcss: {\n config: join(__dirname, 'tailwind.config.js'),\n },\n autoprefixer: {},\n },\n};\n```\n\n```text\n// tailwind.config.js\nconst { join } = require('path');\n\nmodule.exports = {\n content: [\n join(__dirname, './pages/**/*.{js,ts,jsx,tsx}'),\n join(__dirname, './src/**/*.{js,ts,jsx,tsx}'),\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\n.next\n```\n\n```text\nnext dev\n```\n\n```text\nnpx tailwind init\n```\n\n```text\nnpx tailwind init -p\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n purge: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./src/**/*.{js,ts,jsx,tsx}\",\n ],\n subject: {\n extend: {},\n },\n plugins: [require(\"@tailwindcss/typography\"),require('@tailwindcss/forms'),],\n \n};\n```\n\n```js\nmodule.exports = {\n plugins: ['tailwindcss','postcss-preset-env'],\n};\n```\n\n```js\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n swcMinify: true,\n reactStrictMode: true,\n experimental: {\n concurrentFeatures: false, // <- Set this option to false.\n serverComponents: true,\n },\n}\n\nmodule.exports = nextConfig\n```\n\n```text\n@tailwind base;\n@tailwind utilities;\n@tailwind components;\n```\n\n```js\ncontent: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n]\n```\n\n```js\ncontent: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./features/**/*.{js,ts,jsx,tsx}\",\n]\n```\n\n```text\nCRA\n```\n\n```text\ncreate-next-app\n```\n\n```text\nCRA\n```\n\n```text\nfeatures\n```\n\n```text\nRedux\n```\n\n```text\nfeatures\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nimport '../styles/globals.css'\n\nfunction MyApp({ Component, pageProps }) {\n return <Component {...pageProps} />\n}\n\nexport default MyApp\n```\n\n```text\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\n```text\nimport '../styles/globals.css'\n\n// This default export is required in a new `pages/_app.js` file.\nexport default function MyApp({ Component, pageProps }) {\n return <Component {...pageProps} />\n}\n```\n\n```text\nimport \"../styles/globals.css\";\n```\n\n```text\nglobal.css\n```\n\n```text\nnpm i tailwindcss@3.0.0\n```\n\n```text\nglobals.css\n```\n\n```text\n.next\n```\n\n```text\n@tailwind\n```\n\n```text\n@import\n```\n\n```text\n.next\n```\n\n```text\nglobals.css\n```\n\n```text\ncontent: [\n\"./pages/**/*.{ js, ts, jsx, tsx}\",\n\"./components/**/*.{ js, ts, jsx, tsx}\",\n],\n```\n\n```text\ncontent: [\n\"./pages/**/*.{js,ts,jsx,tsx}\",\n\"./components/**/*.{js,ts,jsx,tsx}\",\n],\n```\n\n```text\n? Would you like to use `src/` directory with this project? › No / Yes\n```\n\n```text\nmodule.exports = {\n content: [\n './src/**/*.{js,ts,jsx,tsx}',\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\nnpx create-next-app@latest\n```\n\n```text\nYes\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nnpx tailwind init\n```\n\n```text\ntailwind.config.js\n```\n\n```text\npostcss.config.js\n```\n\n```text\npages\n```\n\n```text\ncomponents\n```\n\n```text\nsrc\n```\n\n```text\nglobals.css\n```\n\n```text\nglobals.scss\n```\n\n```text\n@tailwind\n```\n\n```text\nnpm i\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```text\nnpx create-next-app@latest\n```\n\n```text\nWhat is your project named? my-app\nWould you like to use TypeScript? No / Yes\nWould you like to use ESLint? No / Yes\nWould you like to use Tailwind CSS? No / Yes\nWould you like to use `src/` directory? No / Yes\nWould you like to use App Router? (recommended) No / Yes\nWould you like to customize the default import alias? No / Yes\n```\n\n```text\ncreate-next-app\n```\n\n```text\nimport \"../styles/globals.css\";\n```\n\n```text\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n };\n```\n\n```text\n<main>\n```\n\n```text\nimport \"tailwindcss/tailwind.css\"\n```\n\n```text\n// src/pages/about.tsx\nimport \"tailwindcss/tailwind.css\";\n```\n\n```text\nsrc/pages\n```\n\n```text\nPages Router\n```\n\n```text\nApp Router\n```\n\n```text\nPages Router\n```\n\n```text\nimportant: \"#__next\"\n```\n\n```text\n__next\n```\n\n```text\nimportant\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nApp Router\n```\n\n```text\ntheme: {\n colors: {\n 'olive-green': '#00a73c',\n },\n ...\n }\n```\n\n```text\ntheme: {\n extend: {\n colors: {\n 'olive-green': '#00a73c',\n },\n }\n ...\n }\n```\n\n```js\nimport '@/location/globals.css';\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nglobals.css\n```\n\n```text\nglobals.css\n```\n\n```text\n.next\n```\n\n```text\nglobals.css\n```\n\n```text\npage.js\n```\n\n```text\nlayout.js\n```\n\n```text\nimportant: '#root', // remove this\n```\n\n```text\n.next\n```\n\n```text\nnpm run dev\n```\n\n```text\nnext.config\n```\n\n```text\nnext.config.ts\n```\n\n```text\nnext.config.js\n```\n\n```text\nnext.config.mjs\n```\n\n```text\ntailwind.config.ts\n```\n\n```text\ntailwind.config.tsx\n```\n\n```js\nconst config = {\n theme: {\n colors: {\n primary: '#1E88E5',\n secondary: '#009688'\n },\n },\n\n safelist: [\n 'bg-primary',\n 'bg-secondary',\n ]\n}\n```\n\n```text\nsafelist\n```\n\n```text\nnext dev --turbopack\n```\n\n```text\n--turbopack\n```\n\n========================================\n\nComments:\n- I was using pnpm, I switched and used yarn and it worked for me, none of all the all the solutions below worked for me\n- This question was written for TailwindCSS v3. If you're looking for an answer in TailwindCSS v4, it's better to look for more recent and relevant questions. 1.) Tailwind doesnt apply on my Next JS 15 app 2.) Invalid PostCSS Plugin found using TailwindCSS 4 and Vitest\n- Does your css import in _app.js work properly? Try to delete next.config.js as well :)\n- This is a non-answer. \"Your setup is too complicated\" is a useless opinion.\n- Readme is not giving complete information. Also what you have is the basic tailwind CSS. trying that is not solving the issue.\n- what about the `'/base.css';` ? is it another file or import from tailwind?\n- @NicoGulo your custom css\n- but my custom css is inside globals.css. should I move to the base.css?\n- I wonder why is `@tailwind` doens't work and `@import` does work?\n- this worked for me. can someone explain why this fixes it?\n- Looks like something has changed in newer version of tailwind.. I had made a project few months back and it was fine.. Today I created a new one this fix was required for it to work.\n- I got the same problem as OP. Tried AndriyFM's fix and it works. Then I tried a brand new `create-next-app` to see if the problem still persists. There's no problem. Then I went back to the previous project and replaced all `@import` rules with `@tailwind` rules. It still works. Considering that there's no such issue opened at Tailwind, I guess the problem has something to do with Next.js not purging properly.\n- @bytrangle I tried the exact same and it worked, maybe it's a bug on the next.js side?\n- But why the error with the path and qoute?\n- This gives a \"Module not found\" error.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- This is what worked for me, thanks! I was missing a postcss settings file and specifying the plugins.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- You should also add your components folder to the content.\n- I forgot './src'\n- You save my day: I have an ui/ folder next to the app/ and if so, I had to add the path for it (\"./src/ui/**/*.{js,ts,jsx,tsx,mdx}\"). Obvious but it was blowing my mind ^^\n- Also make sure to add separate path for custom folders that you have added to your project. If you see some tailwind classes do not apply, this might be the potential issue for it!\n- Please a code example.\n- This worked for me; something similar to it did. I removed a style in globals.css, saved, then added it back. Tailwind then worked.\n- I did the same after trying and failing for more than a day and it worked like a charm, thank you. In my **.tsx** file I did this: `Some text` and in my **global.css** file I did that: `@tailwind base; @tailwind components; @tailwind utilities; @layer { .myclass { @apply text-gray-600; }}`\n- ah thank you very much, it solves my issue! I've used tailwind 1.1.4 and postcss-preset-env and I want to upgrade to tailwind with version 3, and it solved by looking for this.\n- Sorry but I want to correct myself. I had pages and components in `src` folder and I just had to add `./src/` in `tailwind.config.js`. Thanks :)\n- Just wanted to say thank you. We are using NX and this was exactly what we need to get it sorted.\n- Not sure why but this was it for me too. Thanks\n- I had to do that after rerunning `npx tailwindcss init` with the `-p` that I forgot the first time.\n- I deleted the `.next` folder, like above, then run `npm run dev`. That rebuilt the `.next` folder and all the Tailwind stuff started working. Thank you!!! @gaurav-thakur\n- I believe if you have ran npm run dev before adding tailwindcss than these are cached and don't load.\n- This worked for me as well. All I had to do was delete the `.next` folder and rerun `npm run dev`.\n- Exactly what happened to me when I started to the regular Installation guide tailwindcss.com/docs/installation the switched to the one for NextJS tailwindcss.com/docs/guides/nextjs\n- FWIW, i just created with `create-next-app` and the file at `src/pages/_app.js` was created.\n- Yes and remember to create the styles folder inside the src folder if it does not exist.. And you can basically copy the content of the globals.css inside the app folder\n- I migrated to the new `/app` directory and needed to add it to `app/layout.tsx`\n- Thank god this has 19 upvotes lol. Would've been a little worried about my life choices if it was only me lol.\n- Also, the relative path if you're using the page folder will be `import \"../app/globals.css\";` inside the index.tsx of your page folder. If you're using the default npx create-next-app\n- Thanks, I deleted all css related things in `layout.tsx` when start a new project and forgot to add `import \"./globals.css\"` back using app router.\n- Thank you so much for this one line great solution. I have spent around one hour and cursed nextjs a lot. finally, this line relaxed me. Thank you again....\n- I spent a long time trying to figure out how to solve this issue; I deleted a lot of things, disabled my extensions and other some other approaches; I've finally found your answer; Thank you so much\n- I had to add this to my root layout.tsx file after migrating from page router to app router.\n- This was the reason for me too. I keep forgetting this every time I make a fresh app.\n- My hero, I'd gotten fat fingered before committing and drag/dropped a folder before a lunch break leading to a fair bit of confusion... Interesting there is no 404/real error! Thanks!\n- you sir deserves a shower of beers. thanks a lot for this. it feels utterly wrong that in 2023 such a dark error can still happen.\n- yeah i agree, such a weird little issue but figured it out eventually\n- Sir, you are a Gentleman and a Scholar.\n- Another tip of the hat to you for this, as in my case running `npx tailwindcss init -p` didn't actually create this file, only the tailwind.config.js file.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- same here, thank you\n- This is technically the same answer as Gaurav Thakur's. Please don't add the same answer, rather this question, and when you have enough reputation, you can upvote the answer which helped you.\n- Please don't add \"thank you\" as an answer. Once you have sufficient reputation, you will be able to vote up questions and answers that you found helpful. - From Review","metadata":{"transformedAt":"2026-08-18T18:33:42.895Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":117,"totalLines":1056,"estimatedTokens":5355}}182{"id":"stack-68877941","source":"stackoverflow","questionId":68877941,"title":"Is there a shorter way to write a border on only one side?","tags":["html","css","tailwind-css"],"text":"Title: Is there a shorter way to write a border on only one side?\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI got borders on all the edges by doing something like:\n\nIt is actually a mistake, but at the time of the question I believe I can draw a line only to the TOP with the following code. (Actually, lines are drawn on all edges.)\n\n```\nfoo\n```\n\nI wanted to display it only on one side, so I did some research.\nI noticed that when I used `border` in `tailwindcss`,\nthe following was output in the output file.\n\n/**\n\n- Prevent padding and border from affecting element width.\n\n- \n\n- We used to set this in the html element and inherit from\n\n- the parent element for everything else. This caused issues\n\n- in shadow-dom-enhanced elements like where the content\n\n- is wrapped by a div with box-sizing set to `content-box`.\n\n- \n\n- https://github.com/mozdevs/cssremedy/issues/4\n\n- \n\n- \n\n- Allow adding a border to an element by just adding a border-width.\n\n- \n\n- By default, the way the browser specifies that an element should have no\n\n- border is by setting it's border-style to `none` in the user-agent\n\n- stylesheet.\n\n- \n\n- In order to easily add borders to elements by just setting the `border-width`\n\n- property, we change the default border-style for all elements to `solid`, and\n\n- use border-width to hide them instead. This way our `border` utilities only\n\n- need to set the `border-width` property instead of the entire `border`\n\n- shorthand, making our border utilities much more straightforward to compose.\n\n- \nhttps://github.com/tailwindcss/tailwindcss/pull/116\n*/\n\nThe original of this output would have come from\nhttps://github.com/tailwindlabs/tailwindcss/blob/723e8d4377eb25b66a6224f767937fa02762eb52/src/plugins/css/preflight.css#L71\n\nI thought this was probably the cause.\nI have succeeded in applying it only to the top edge by writing the following.\n\n```\nfoo\n```\n\nHowever, this is too long. Is there any way to make it shorter?\n\n**Note:** I am also considering the following as alternatives.\n\nHow do I take it as a parameter in JIT?\n\nThis way, I can also adjust the width (not the width in the border, it is for `display: block`).\n\nWhat I want to do is just display it on any one side, so the above link is trying to display it on the bottom. (In other words, it doesn't matter if it's at the top, bottom, or anywhere else. It's just an example.)\n\n========================================\n\nTop Answer:\nYou can achieve this by using below class\n\n```\nborder-solid border-0 border-t border-blue-900\n```\n\n========================================\n\nCode:\n```text\n<div class=\"border border-blue-900 border-t-1\">foo</div>\n```\n\n```text\n<div class=\"border border-blue-900 border-t-1 border-l-0 border-r-0 border-b-0\">foo</div>\n```\n\n```text\nborder\n```\n\n```text\ntailwindcss\n```\n\n```text\ncontent-box\n```\n\n```text\nnone\n```\n\n```text\nborder-width\n```\n\n```text\nsolid\n```\n\n```text\nborder\n```\n\n```text\nborder-width\n```\n\n```text\nborder\n```\n\n```text\ndisplay: block\n```\n\n```text\n<div class=\"border-t-2 border-blue-900\">foo</div>\n```\n\n```text\nborder-t-1\n```\n\n```text\nborder\n```\n\n```text\nborder-width: 1px;\n```\n\n```text\nborder-top-width\n```\n\n```text\n1px\n```\n\n```text\n<div class=\"border-t-[1px] border-blue-900\">foo</div>\n```\n\n```text\nborder-solid border-0 border-t border-blue-900\n```\n\n```text\nborder-b-0 border-r-0 border-l-0\n```\n\n```text\nSource path:foo/bar/baz.css Setting up new context... Finding changed files:123.456ms Reading changed files:123.456ms Generate rules:123.456ms Build stylesheet:123.456ms Potential classes:123 Active contexts:123 JIT TOTAL:967.483ms *, ::before, ::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color:#e5e7eb\n}\n```\n\n```text\nborder-t border-t-sky-500\n```\n\n```text\n-o {outfile}\n```\n\n```text\nstdout\n```\n\n```text\nborder-style: solid\n```\n\n```text\nborder-[0] border-t border-solid border-black\n```\n\n```text\npreflight\n```\n\n```text\nborder-width\n```\n\n```text\n1px\n```\n\n```text\nborder-solid\n```\n\n```text\n1px\n```\n\n```text\nborder-[0] border-t border-solid border-black\n```\n\n```text\nborder-[0]\n```\n\n```text\nborder-width\n```\n\n```text\nborder-t\n```\n\n```text\nborder-width-top: 1px;\n```\n\n```css\n* {\n border-width: 0;\n border-style: solid;\n border-color: currentColor;\n}\n```\n\n```text\nborder-style\n```\n\n```text\n@tailwind base\n```\n\n```text\n<div class=\"border-t\">content</div>\n```\n\n```text\n<div class=\"border-t-1\">content</div>\n```\n\n========================================\n\nComments:\n- Here it sets a `2px` border. If want `1px` border `border-0 border-t` works just fine\n- @AvishkaDambawinna Yes. And I have mentioned it above, This was answered for tailwind version 2.\n- im not sure if this works if preflight is disabled\n- Pretty sure this is the same as just `border-t`\n- this one works when preflight is disabled","metadata":{"transformedAt":"2026-08-18T18:33:42.895Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":42,"totalLines":283,"estimatedTokens":1211}}183{"id":"stack-55551405","source":"stackoverflow","questionId":55551405,"title":"Tailwind CSS - Responsive breakpoints as components","tags":["css","media-queries","responsive","tailwind-css","scss-mixins"],"text":"Title: Tailwind CSS - Responsive breakpoints as components\nTags: css, media-queries, responsive, tailwind-css, scss-mixins\nSource: Stack Overflow\n\nQuestion:\nHow should I deal with responsive breakpoints as components in Tailwind?\n\nWithout Tailwind, I used to declare breakpoints as a scss mixins:\n\n```\n@mixin tablet-portrait {\n @media (min-width: 700px) {\n @content;\n }\n}\n```\n\nThen:\n\n```\n@include tablet-portrait {\n // whatever\n}\n```\n\nI know that Tailwind has responsive utility clases to use it inline as `md:color-red` but I need to abstract this breakpoins as components, as in above example.\n\nHow should I extract Tailwind breakpoints from Tailwind config file?\n\n========================================\n\nTop Answer:\n`@screen md` is not working when using SCSS.\n\nMeanwhile, if you have your breakpoints (`screens` key) set in your `tailwind.config.js`, you can use this\n\n```\n.your-selector {\n // your usual CSS\n @media (min-width: theme('screens.xl.min')) {\n // your media-queried CSS when > xl breakpoint\n }\n}\n```\n\n========================================\n\nCode:\n```text\n@mixin tablet-portrait {\n @media (min-width: 700px) {\n @content;\n }\n}\n```\n\n```text\n@include tablet-portrait {\n // whatever\n}\n```\n\n```text\nmd:color-red\n```\n\n```text\n@screen md {\n // whatever\n}\n```\n\n```text\n@media screen(sm) {\n /* ... */\n}\n```\n\n```js\ntheme: {\n screens: {\n 'sm': '640px',\n // => @media (min-width: 640px) { ... } \n\n 'md': '768px',\n // => @media (min-width: 768px) { ... }\n\n 'lg': '1024px',\n // => @media (min-width: 1024px) { ... }\n\n 'xl': '1280px',\n // => @media (min-width: 1280px) { ... }\n }\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nscreens\n```\n\n```text\nmodule.exports\n```\n\n```css\n.your-selector {\n // your usual CSS\n @media (min-width: theme('screens.xl.min')) {\n // your media-queried CSS when > xl breakpoint\n }\n}\n```\n\n```text\n@screen md\n```\n\n```text\nscreens\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nconst defaultTheme = require(\"tailwindcss/defaultTheme\");\n\nmodule.exports = {\n \n theme: {\n screens: {\n // adding xs to the rest\n xs: \"475px\",\n // if you did not add this, you would have only \"xs\"\n ...defaultTheme.screens,\n },\n },\n \n};\n```\n\n```text\n@media screen(md) {\n .foo {\n color: blue;\n }\n}\n```\n\n```text\n@media (screen(md)) {\n .foo {\n color: blue;\n }\n}\n```\n\n```css\n@variant md {\n /* css */\n}\n```\n\n```text\n@variant\n```\n\n```text\n@media\n```\n\n========================================\n\nComments:\n- I'm using this in code today just fine but the current documentation has a new syntax: `@media screen(md) {...}`. It doesn't even mention the `@screen` directive. Not sure if this is a change they'll formalise at some point but if you're reading this answer and it doesn't work, that might be why.\n- Heads up: In my default laravel vite setup the first one (`@screen md`) works just fine. The other one does not work.\n- doesn't really answer the main question though\n- I've found @screen md working fine in SCSS in my setup, but this solution is interesting of note as it can be used to have `max-width` breakpoints without changing the default breakpoint setup: `@media (max-width: theme(\"screens.md\")) { ... }` (note that this is 1px off of perfect, but should work in 99.9% situations).\n- @fredrivett this worked for me too\n- Instead of pulling in the default theme you can use the \"extend\" property to allow for the extension of screen sizes... v1.tailwindcss.com/docs/breakpoints#custom-media-queries v2.tailwindcss.com/docs/… tailwindcss.com/docs/screens#adding-larger-breakpoints\n- doesn't really answer the main question though\n- Thank you thank you! This is the ONLY answer here that actually works with recent tailwind. I've been on this for nearly an HOUR. No other forum nor docs (including tailwind docs I searched through) nor LLM I asked could tell me this.\n- @Justin For any newbie to new tailwind, inside your `@theme`, set --breakpoint-mynamehere to your value, see docs: tailwindcss.com/docs/responsive-design","metadata":{"transformedAt":"2026-08-18T18:33:42.895Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":188,"estimatedTokens":1008}}184{"id":"stack-70597844","source":"stackoverflow","questionId":70597844,"title":"Unknown at rule @tailwind CSS in reactjs","tags":["reactjs","visual-studio-code","tailwind-css","react-dom"],"text":"Title: Unknown at rule @tailwind CSS in reactjs\nTags: reactjs, visual-studio-code, tailwind-css, react-dom\nSource: Stack Overflow\n\nQuestion:\nhttps://i.sstatic.net/FjW1R.png\n\ncant able to resolve this error while compiling the code ..! In fact I've tried many other ways of implementation\n\n//Index.css\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n========================================\n\nCode:\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n========================================\n\nComments:\n- Does this post answer your question? How to add a @tailwind CSS rule to css checker If not, can you please specify how the questions are different/distinct to help visitors understand how best to assist you?\n- install an extension called csstools.postcss on vscode and it'll fix most of the issues. Worked for me and figured out from people that it worked for them aswell.\n- My @tailwind rule is in a `.scss` file and your solution doesn't seem to work with SCSS files. As a workaround, I simply disabled the \"unknownAtRules\" error in the `settings.json` file of VSCode: `{ \"scss.lint.unknownAtRules\": \"ignore\" }`\n- These days PostCSS VSC plugin is not that good - it messes up the built-in CSS Intellisense features, such as the color picker.","metadata":{"transformedAt":"2026-08-18T18:33:42.895Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":33,"estimatedTokens":322}}185{"id":"stack-54618144","source":"stackoverflow","questionId":54618144,"title":"Tailwind CSS how to code pixel perfect design","tags":["css","tailwind-css"],"text":"Title: Tailwind CSS how to code pixel perfect design\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nJust started to use https://tailwindcss.com\n\nAnd can't figure out how to code pixel perfect design only with tailwind classes. Simple example, I need padding-left 22px but closest tailwind class is pl-6 and pl-8 which is 24px and 32px respectively. So at the end of the day, I have a bunch of tailwind classes + 1 custom where I make arrangements this defeats the purpose of this framework \"utilities first\".\n\n========================================\n\nTop Answer:\nYou can try this for px and % styling -\n\n\r\n\r\n\n```\nw-[100px] or w-[50%]\n```\n\n========================================\n\nCode:\n```js\nheight: [\n ...\n '278px': '278px',\n ...\n]\n```\n\n```text\nmb-[278px]\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n<div clas=\"h-278px\">...</div>\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer utilities {\n .h-278 {\n height: 278px;\n }\n}\n```\n\n```text\n<div clas=\"h-278\">...</div>\n```\n\n```text\n@layer\n```\n\n```text\n@tailwind utilities\n```\n\n```text\n@layer\n```\n\n```css\nw-[100px] or w-[50%]\n```\n\n========================================\n\nComments:\n- You'll never get pixel perfect designs from a framework unless the design is created specifically with that framework's abilities/expectations in mind.\n- I don't agree with you, or maybe I would say \"You'll never get pixel perfect designs from a framework which don't have any customization capabilities\" :) As for this framework I think that could be done inside tailwind.config.js so you can specify whatever size you want.\n- Sure you can always hack the framework but that's assuming your designer always uses equal column widths, standardized font sizes, padding, etc, etc, etc. The reality is that pixel perfection is super expensive and framework consistency most likely at odds with a designer's \"gut\" placement.\n- Glad you figured out how to solve it here!\n- You actually should not want to have a \"pixel-perfect\" design, that is a completely antiquated paradigm that should've stopped being used 15 years ago. You cannot control what the browser, screen&viewport size, resolution, browser zoom, OS zoom, custom font-size, etc. will be for the user that views your product. It doesn't make any sense to try to make it \"pixel perfect\" anymore when we should instead be aiming for dynamic sites that look good under any condition, not static sites that always look just like the Photoshop.\n- As a pixel-perfect practitioner for 10+ years, I would highly NOT recommend using Tailwind for pixel-perfect projects. I get how tempting Tailwind is for devs that are not (and/or reluctant to be) familiar with css/scss. It is in my opinion still a disaster for the entire coding world. I'm saying this without testing. I've done several projects with tedious HTML thanks to Tailwind and spending even more time clearing up the HTML file than the time I spent on css. Also seeing a pattern that the backend devs I hire prefer Tailwind and those good at frontend don't.\n- @StephenMIrving actually 'dynamic sites that look good under any condition' are considered in perfect pixel design nowadays. At least in the working environment where I have been.\n- I would go with custom style for that specific purpose\n- is there a way to define the pixel dynamically? `class = \"h-23px \"` that number 23px or anyother pixel be create dynamically\n- Currently no, but this would need some kind of reverse compiling, from HTML/JS/PHP to CSS. Similar like PurgeCSS works.\n- From now, we can implement pixel perfect design with help of tailwindcss-jit library. They use square bracket notation like ...\n- thanks endmaster! wow , jit comes built in now. In Nuxt, I just had to add mode:'jit' to the config. And now its so smart and fast, just creates the css needed!\n- I didn’t get it, why use this if we have tailwind.config.js?\n- @RomkaLTU the main raison is it is the recommended way of adding custom utilities by the creators of tailwind. the second no less interesting reason is with this method you can generate responsive variants witch let you do for exemple `...`\n- But h is not custom utility, custom utility is \"really-custom-utility\". h, w, p and other generating from spacing property.\n- This doesn't quite work and im only trying to place a red border like this: `@layer utilities { .red { border: 1px solid red; } }`","metadata":{"transformedAt":"2026-08-18T18:33:42.895Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":95,"estimatedTokens":1099}}186{"id":"stack-60917112","source":"stackoverflow","questionId":60917112,"title":"Displaying button when hovering over div in TailwindCSS","tags":["vue.js","tailwind-css"],"text":"Title: Displaying button when hovering over div in TailwindCSS\nTags: vue.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nAt the moment I am having a bit of trouble using TailwindCSS to display a button when hovering over a div in Vue. Normally, I'd use CSS to do it but I want to do it using tailwind. \n\nI referred to the documentation using visibility but it didn't work as expected. Is visibility normally for screen related elements? or it can be used for buttons and other content as well? \n\nCode\n\n```\n\n Hello\n\n```\n\n========================================\n\nTop Answer:\nAdd this to your `tailwind.config.js` file\n\n```\nvariants: {\n extend: {\n display: [\"group-hover\"],\n },\n},\n```\n\nAnd then add `group` to your parent div and `hidden` and `group-hover:block` to your child element that you want to appear on hover of the parent.\n\n```\n\n Child\n\n```\n\n========================================\n\nCode:\n```text\n<div>\n <button class=\"text-white invisible hover:visible\">Hello</button>\n</div>\n```\n\n```text\n<div class=\"mt-2 mb-2\"\n`@mouseover = \"hover = true\"`\n`@mouseleave = \"hover = false\"`\n>Hello World\n</div>\n```\n\n```text\nprivate hover: boolean = false;\n```\n\n```text\n@mouseover\n```\n\n```text\n@mouseleave\n```\n\n```text\n.vue\n```\n\n```text\n<div>\n <button class=\"text-white opacity-0 hover:opacity-100\">Hello</button>\n</div>\n```\n\n```text\n<div class=\"group\">\n <button class=\"text-white hidden group-hover:block\">Hello</button>\n</div>\n```\n\n```text\ngroup\n```\n\n```text\ngroup-hover:block\n```\n\n```text\nblock\n```\n\n```text\n:hover\n```\n\n```text\ngroup\n```\n\n```css\nvariants: {\n extend: {\n display: [\"group-hover\"],\n },\n},\n```\n\n```text\n<div class=\"group\">\n <button class=\"hidden group-hover:block\">Child</button>\n</div>\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ngroup\n```\n\n```text\nhidden\n```\n\n```text\ngroup-hover:block\n```\n\n```text\n<div class=\"group\">\n <button class=\"opacity-0 group-hover:opacity-100\">Hello</button>\n</div>\n```\n\n========================================\n\nComments:\n- Wilth tailwind 3, this works with small changes: add `group` class to the parent div. Change `hover` in button to `group-hover` and everything works.\n- that's true, i should correct what I needed though. I tried opacity but it wasn't aesthetically pleasing so i went with the another option of setting a private boolean and using v-if on the target element.\n- It's fair to consider that `opacity-0` elements keep taking up screen space while not in absolute positioning\n- This problem does not require JS at all, CSS is powerful enough\n- Did you have to do anything special with your tailwind files to accomplish this? I am currently just using the tailwind / tailwind ui cdn and this does not work straight out of the box. The group-hover works with some classes such as text color, but not the block class. Hoping I don't have to compile using npm while just testing stuff. Thanks.\n- With tailwind 3 the group class is added by default, no need to modify the tailwind.config.js file\n- If you want child to be flex then you have to Child and in tailwind.config.js visibility: [\"group-hover\"]\n- Tailwind 3 adds styling based on parent state with `group-{}` modifier by default.\n- I have two divs, but when I implement your code it hovers both at the same time ;(","metadata":{"transformedAt":"2026-08-18T18:33:42.895Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":151,"estimatedTokens":812}}187{"id":"stack-67242334","source":"stackoverflow","questionId":67242334,"title":"Tailwind CSS - how to make a grid with two columns where the 1st column has 20% of the width and 2nd one 80% width?","tags":["css","tailwind-css"],"text":"Title: Tailwind CSS - how to make a grid with two columns where the 1st column has 20% of the width and 2nd one 80% width?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nFrom the official documentation, I am only able to come up with something like this:\n\n```\n\n 1st col\n 2nd col\n\n```\n\nBut this gives me 2 columns with an equal width - how do I specify that the first column would be like 20% of the total width (I only need to place there a simple icon) and the rest of the width would be the second column (here would be a text)?\n\nThank you in advance.\n\n========================================\n\nTop Answer:\nYou can define additional utilities by extending the theme in `tailwind.config.js`:\n\n```\nmodule.exports = {\n theme: {\n extend: {\n gridTemplateColumns:\n {\n '20/80': '20% 80%',\n 'fixed': '40px 260px',\n }\n }\n }\n}\n```\n\n```\n\n \n \n\n \n \n\n```\n\nUpdated for Tailwind CSS 3:\n\nWith the introduction of the JIT compiler and the ability to use arbitrary/dynamic values in some utilities, you can now do this without the config:\n\n```\n\n```\n\n```\n\n```\n\n========================================\n\nCode:\n```text\n<div class=\"grid grid-cols-2 gap-3\">\n <div>1st col</div>\n <div>2nd col</div>\n</div>\n```\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css\" />\n\n<div class=\"grid grid-cols-5 gap-3\">\n <div class=\"bg-blue-100\">1st col</div>\n <div class=\"bg-red-100 col-span-4\">2nd col</div>\n</div>\n```\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css\" />\n\n<div class=\"grid grid-flow-col gap-3\">\n <div class=\"bg-blue-100 col-span-1\">1st col</div>\n <div class=\"bg-red-100 col-span-4\">2nd col</div>\n</div>\n```\n\n```text\ngrid-cols-5\n```\n\n```text\ncol-span-4\n```\n\n```text\n4/5 (80%)\n```\n\n```text\ngrid-flow-col\n```\n\n```text\n<div class=\"grid grid-cols-5 gap-3\"> // This will create 5 grids so 20% each\n <div class=\"some-class\"></div>\n <div class=\"col-span-4\"></div> // This will take 80% of space\n </div>\n```\n\n```text\ncol-span\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n gridTemplateColumns:\n {\n '20/80': '20% 80%',\n 'fixed': '40px 260px',\n }\n }\n }\n}\n```\n\n```text\n<div class=\"grid grid-cols-20/80 w-full h-64\">\n <div class=\"bg-blue-500\"></div>\n <div class=\"bg-red-500\"></div>\n</div>\n\n<div class=\"grid grid-cols-fixed h-64\">\n <div class=\"bg-blue-500\"></div>\n <div class=\"bg-red-500\"></div>\n</div>\n```\n\n```text\n<div class=\"grid grid-cols-[20%_80%] w-full h-64\">\n```\n\n```text\n<div class=\"grid grid-cols-[40px_260px] w-full h-64\">\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n%\n```\n\n```text\ngap\n```\n\n```text\n%\n```\n\n```text\nfr\n```\n\n```text\ngrid-cols-[1fr_2fr]\n```\n\n```text\ngrid-cols-[1fr_2fr_1fr]\n```\n\n```text\n<div class=\"flex flex-wrap\">\n <div class=\"w-1/5\"> 20% </div>\n <div class=\"w-4/5\"> 80% </div>\n</div>\n```\n\n========================================\n\nComments:\n- Thank you, @dogukan. I am just wondering - I used the 20-80% width ratio as an example, what if I need one column to be like 40px and the other one 260px? Can I still use the grid system here?\n- @doğukan yes you just added the answer one minute before while i was writing code. and its not exactly same. you can check.\n- UV for coming back and adding details for TW v3 arbitrary values.","metadata":{"transformedAt":"2026-08-18T18:33:42.895Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":189,"estimatedTokens":832}}188{"id":"stack-72673561","source":"stackoverflow","questionId":72673561,"title":"tailwind h-screen container is (header amount of height) too far off the bottom of the screen","tags":["reactjs","tailwind-css"],"text":"Title: tailwind h-screen container is (header amount of height) too far off the bottom of the screen\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a layout that has the left navigation, the top navigation bar and then the main area for the child components. The issue is all the child components slightly push down past the bottom of the screen.\n\nI can somewhat fix this by adding a pb-36 for example but that leaves an annoying gap.\n\n```\nconst style = {\n container: `h-screen overflow-hidden relative `,\n mainContainer: `bg-gray-800 flex flex-col pl-0 w-full lg:w-[calc(100%-13rem)]`,\n main: `bg-gray-100 h-screen overflow-auto lg:rounded-tl-3xl `,\n};\n```\n\nthe rendered part:\n\n```\n\n \n \n \n \n \n \n {children}\n \n \n \n \n```\n\nFor example, if I remove the TopNavigation above, then it will remove the header and then the child components will fit correctly. So the child components are offset down by that much.\n\nhttps://i.sstatic.net/jHXzV.png\n\ntop navigation is :\n\n```\n\n```\n\n========================================\n\nTop Answer:\nif you are using tailwindcss then just add `min-h-[calc(100vh-63px)]` into your parent html tag, make sure your child element don't have the same property there.\njust only add it into the parent tag.\n\nreplace `63px` with your header height.\n\n========================================\n\nCode:\n```text\nconst style = {\n container: `h-screen overflow-hidden relative `,\n mainContainer: `bg-gray-800 flex flex-col pl-0 w-full lg:w-[calc(100%-13rem)]`,\n main: `bg-gray-100 h-screen overflow-auto lg:rounded-tl-3xl `,\n};\n```\n\n```text\n<LayoutProvider>\n <div className={style.container}>\n <div className=\"flex items-start\">\n <Overlay />\n <SideNavigation mobilePosition=\"left\" />\n <div className={style.mainContainer}>\n <TopNavigation />\n <main className={style.main}>{children}</main>\n </div>\n </div>\n </div>\n </LayoutProvider>\n```\n\n```text\n<header className=\"bg-gray-800 h-[74px] items-center relative w-full \">\n```\n\n```text\nmain: `bg-gray-100 h-screen overflow-auto lg:rounded-tl-3xl `\n```\n\n```text\nmain: `bg-gray-100 h-[calc(100vh-74px)] overflow-auto lg:rounded-tl-3xl `\n```\n\n```text\n74px\n```\n\n```text\nh-screen\n```\n\n```text\nh-[calc(100vh-74px)]\n```\n\n```text\nmin-h-[calc(100vh-63px)]\n```\n\n```text\n63px\n```\n\n========================================\n\nComments:\n- thanks, perhaps you would also know: stackoverflow.com/questions/72672706/…\n- Have this heart sir <3\n- Is there any way to reference a variable inside the calc function? i.e. `h-[calc(100vh-$header-height)]`. I am wondering because I'd like to change the header height based on the screen (s, m, l).\n- @James111 I'm not sure whether that will be possible but you can use something like `sm:h-[calc(100vh-74px)] md:h-[calc(100vh-74px)]`, then replace the `74px` with the height of the header for the particular screen size.\n- That works! Good one. @ruleboy21\n- @James111 Tailwinds system requires non dynamic. It searches the code files for specific string patterns to figure out what has to be kept/created for CSS output. if you wanted some dynamic height size like your suggesting you would need to define the full string with pixels somewhere so tailwind would use it. (in typescript you can build this with its type system but still can't drive it with dynamic values live, this is where css variables and js dom manipulation come in handy)\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.896Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":120,"estimatedTokens":931}}189{"id":"stack-63883580","source":"stackoverflow","questionId":63883580,"title":"Tailwind CSS how to style a href links in React?","tags":["css","reactjs","tailwind-css"],"text":"Title: Tailwind CSS how to style a href links in React?\nTags: css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nFor some reason, tailwind seems to have removed the \"blue\" and \"underlined\" part of http links.\n\nHow do I get this functionality back?\n\nFor example, in my React code, i have:\n\n```\nreturn (\n {v.alias}\n);\n```\n\nbut this link shows up like normal font, and there's no underline. there's also no notion for browser to remember or hover different color on the link.\n\n========================================\n\nTop Answer:\nSo the other answers correctly have pointed out that preflight and/or base will reset the components, but you can also use the @layer and @apply directives to apply classes to elements in bulk.\n\n@layer gives you a bucket to put things into, the ones currently available in Tailwind would be like base, components, and utilities.\n\nFor example, if you wanted to set all links to blue and underline, you could do the following:\n\n```\n@layer base {\n a {\n @apply text-blue underline\n }\n}\n```\n\nThe linked examples show how you could group the elements to make a meta-class for styling buttons consistently.\n\n```\n@layer components {\n .btn-blue {\n @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;\n }\n}\n```\n\n========================================\n\nCode:\n```text\nreturn (\n <a href={v.url}>{v.alias}</a>\n);\n```\n\n```text\nclassName=\"underline text-blue-600 hover:text-blue-800 visited:text-purple-600\"\n```\n\n```css\na {\n @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600\n}\n```\n\n```text\nclassName=\"underline text-blue-600 hover:text-blue-800 visited:text-purple-600\"\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n // ...\n variants: {\n extend: {\n textColor: ['visited'],\n }\n },\n}\n```\n\n```text\nvisited:\n```\n\n```text\ntext-purple-600\n```\n\n```text\nvisited:\n```\n\n```text\n@layer base {\n a {\n @apply text-blue underline\n }\n}\n```\n\n```text\n@layer components {\n .btn-blue {\n @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;\n }\n}\n```\n\n```css\na {\n @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600\n}\n```\n\n```css\na {\n @apply underline text-blue-600\n}\na:hover {\n @apply text-blue-800\n}\na:visited {\n @apply text-purple-600\n}\n```\n\n```text\n2.*\n```\n\n```text\n@apply\n```\n\n```text\n.hyperlink {\n @apply text-blue-600 underline\n}\n\n.hyperlink:visited {\n @apply text-purple-600\n}\n```\n\n```html\n<a class=\"hyperlink\" href=\"/foo/bar\">Text link</a>\n<a href=\"foo/bar\"><button>Style-Free Button!</button></a>\n```\n\n```text\n<a>\n```\n\n```js\nextend: {\n content: {\n 'externalLink': \"url('images/icons/icon-external.svg')\",\n }\n},\n```\n\n```css\na {\n @apply underline underline-offset-4 decoration-1 decoration-primary;\n\n &:hover {\n @apply no-underline bg-tertiary/20;\n }\n\n &:visited {\n @apply text-primary;\n }\n\n &[target=\"_blank\"]:after {\n @apply content-externalLink inline-block ml-1 mt-1;\n }\n}\n```\n\n========================================\n\nComments:\n- Imagine having to style ` links` :(\n- Most well-designed websites will style anchor tags to make the colours and fonts match their branding. The default browser stylings on various elements can cause issues and inconsistencies with this, which is why Preflight resets all default styles to start from a blank page.\n- This solution works but it requires some configuration beforehand to use `visited:text-purple-600`. I've made a separate answer to elaborate.\n- To update my old comment - you don't need to do the extra configuration with Tailwind 3, but you will with Tailwind 2.\n- Thanks, i wasted 1 hour trying to figure this out for my project in vue.\n- @LukeStorry most well designed sites have a href that looks like a link and button that looks like a button and not plain dumb text\n- @dankobgd yup! So just add the classnames outlined in my answer and you shall receive just that\n- luke's answer appears to work without any configuration : play.tailwindcss.com/q4vo2yEzsb\n- @patrikcsak Good to know! At the time I posted my answer it wasn't like that (if you change the version to Tailwind 2 in your example you can see what I mean). I guess the `visted:` prefix now works with text colors by default. I'll update my answer.\n- Is this possibly no longer true on a newer version? I'm having no issue with the initial code blurb and hover/visited being applied. I'm on tailwind 3.3.\n- correct, I've updated the answer","metadata":{"transformedAt":"2026-08-18T18:33:42.896Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":194,"estimatedTokens":1116}}190{"id":"stack-63761312","source":"stackoverflow","questionId":63761312,"title":"How to scope Tailwind Css","tags":["tailwind-css"],"text":"Title: How to scope Tailwind Css\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI cannot find a good way to scope tailwind CSS when including it in a system where I don't want it to apply globally that works with custom build options.\n\nEssentially I want to do this:\n\n```\n.tailwind{\n @import \"tailwindcss/base\";\n\n @import \"tailwindcss/components\";\n\n @import \"tailwindcss/utilities\";\n}\n```\n\nBut PostCSS importer doesn't like this due to the fact it imports before the tailwind placeholders are replaced. So the only way to make it work is to break the build into 2 stages then import the compiled css like:\n\n```\n.tailwind{\n @import \"tailwindcss.css\";\n}\n```\n\nIt works but it breaks some of the css rules which show up in dev tools.\n\nIs there a better way to scope tailwind to stop it interfering with other systems?\n\n========================================\n\nTop Answer:\nUpdate (tailwindcss@3.4.6):\n\nWith tailwindcss-scoped-preflight you can scope the preflight which you may be reliant on within your package, but which you don't want applied to consumers.\n\nWith important you can scope all of your tailwind styles, and if you're using a class rather than an id, you can increase the specificify with multiple classes (eg. so that `bg-black` on a `button[type=submit]` takes precedence over the preflight).\n\nJust make sure to use a class `\"your-root tw-preflight\"` on any wrapper elements.\n\n**tailwind.config.ts**\n\n```\nconst { scopedPreflightStyles, isolateInsideOfContainer } = require('tailwindcss-scoped-preflight')\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n important: '.your-root.tw-preflight', // high specificity, style root name, used to wrap Popper menus etc\n plugins: [\n scopedPreflightStyles({\n isolationStrategy: isolateInsideOfContainer('.tw-preflight'), // style root name, used to wrap Popper menus etc\n }),\n ],\n}\n```\n\n**your-styles.css**\n\n```\n@tailwind components;\n@tailwind utilities;\n@tailwind base;\n```\n\n**postcss.config.js**\n\n```\nmodule.exports = {\n plugins: {\n 'postcss-import': {},\n 'tailwindcss/nesting': {},\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n========================================\n\nCode:\n```scss\n.tailwind{\n @import \"tailwindcss/base\";\n\n @import \"tailwindcss/components\";\n\n @import \"tailwindcss/utilities\";\n}\n```\n\n```scss\n.tailwind{\n @import \"tailwindcss.css\";\n}\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n prefix: 'tw-',\n}\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n important: '.tailwind',\n}\n```\n\n```text\nimportant\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n prefix: 'tw-',\n}\n```\n\n```text\n@import \"tailwindcss/components\";\n\n @import \"tailwindcss/utilities\";\n```\n\n```js\nconst { scopedPreflightStyles, isolateInsideOfContainer } = require('tailwindcss-scoped-preflight')\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n important: '.your-root.tw-preflight', // high specificity, style root name, used to wrap Popper menus etc\n plugins: [\n scopedPreflightStyles({\n isolationStrategy: isolateInsideOfContainer('.tw-preflight'), // style root name, used to wrap Popper menus etc\n }),\n ],\n}\n```\n\n```scss\n@tailwind components;\n@tailwind utilities;\n@tailwind base;\n```\n\n```js\nmodule.exports = {\n plugins: {\n 'postcss-import': {},\n 'tailwindcss/nesting': {},\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```text\nbg-black\n```\n\n```text\nbutton[type=submit]\n```\n\n```text\n\"your-root tw-preflight\"\n```\n\n```js\nmodule.exports = {\n important: '#app',\n prefix: \"tw-\",\n corePlugins: {\n preflight: false,\n },\n```\n\n```text\n#app {\n /*content from base.css*/\n}\n```\n\n```css\n@layer components {\n #app .page-h1 {\n @apply tw-mt-0 tw-mb-2 tw-text-center tw-leading-8 tw-text-4xl md:tw-text-5xl;\n }\n}\n```\n\n```text\ntw-\n```\n\n```text\n#app\n```\n\n```text\n#app .tw-mb-4\n```\n\n```text\nbase.css\n```\n\n```text\n#app\n```\n\n```text\n#app\n```\n\n```text\nimportant\n```\n\n```text\n@layer component\n```\n\n```text\nmodule.exports = {\n prefix: 'tw-',\n content: [\n \"./src/**/*.{html,ts}\",\n ],\n theme: {\n extend: {},\n },\n purge: {\n enabled: true,\n content: ['./src/**/*.{html,ts}']\n },\n plugins: [],\n corePlugins: {\n preflight: false,\n }\n }\n```\n\n```text\n<div class=\"tw-m-4\"></div>\n```\n\n```text\nimport scopeTailwind from \"vite-plugin-scope-tailwind\";\n\nexport default defineConfig({\n ...\n plugins: [\n ...\n scopeTailwind(), // or scopeTailwind({ react: true }) for a React app\n ...\n ],\n ...\n});\n```\n\n```text\nvite\n```\n\n```text\nNested @tailwind rules were detected, but are not supported. Consider using a prefix to scope Tailwind's classes...\n```\n\n```text\nimport tailwindFile from '@/core/assets/tailwind/tailwind.css?inline';\nimport { compileString } from 'sass';\n```\n\n```text\nconst tailwindScoped = compileString(`.scope { ${tw} }`).css;\n```\n\n```text\n<component :is=\"'style'\">\n {{ tailwindScoped }}\n</component>\n```\n\n```js\nimport { defineConfig } from \"vite\";\n// ...other imports\nimport { compileString } from \"sass\";\n\nexport default defineConfig({\n // ...\n plugins: [\n (() => {\n return {\n name: \"ScopedTailwindStyles\",\n transform(src, id) {\n // check if we're dealing with an scss file and do nothing if not\n if (!id.includes(\".scss\")) return;\n \n // return an updated file source string \n return { code: compileString(`.YOUR-SCOPE-SELECTOR { ${src} }`).css, map: null };\n },\n };\n })(),\n ],\n // ...\n})\n```\n\n```js\n// vite-plugin-scoped-styles.js\n\nimport { compileString } from \"sass\";\n\nexport default function scopedStyles() {\n return {\n name: \"ScopedTailwindStyles\",\n transform(src, id) {\n if (!id.includes(\".scss\")) return;\n return { code: compileString(`.YOUR-SCOPE-SELECTOR { ${src} }`).css, map: null };\n },\n };\n}\n```\n\n```js\n// vite.config.(ts|js)\n\nimport { defineConfig } from \"vite\";\n// ...other imports\nimport scopedStyles from \"./vite-plugin-scoped-styles.js\";\n\nexport default defineConfig({\n // ...\n plugins: [scopedStyles()]\n // ...\n})\n```\n\n```text\ncompileString\n```\n\n```text\nsass\n```\n\n```text\nvite.config.(ts|js)\n```\n\n```text\n@layer myapp;\n@layer myapp {\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n}\n```\n\n```bash\nnpm i tailwindcss-scoped-preflight@legacy-2\n```\n\n```js\n// # tailwind.config.js\n\nconst { scopedPreflightStyles } = require('tailwindcss-scoped-preflight');\n\n/** @type {import(\"tailwindcss\").Config} */\nconst config = {\n // ... your Tailwind CSS config\n plugins: [\n // ... other plugins\n scopedPreflightStyles({\n cssSelector: '.twp', // or .tailwind-preflight or even [data-twp=true] - any valid CSS selector of your choice\n mode: 'matched only', // it's the default, another mode is 'except matched'\n }),\n ],\n};\n\nexports.default = config;\n```\n\n```bash\nnpm i tailwindcss-scoped-preflight\n```\n\n```js\n// # tailwind.config.js\n\nimport {\n scopedPreflightStyles,\n isolateForComponents, // there are also isolateInsideOfContainer and isolateOutsideOfContainer\n} from 'tailwindcss-scoped-preflight';\n\n/** @type {import(\"tailwindcss\").Config} */\nconst config = {\n // ... your Tailwind CSS config\n plugins: [\n // ... other plugins\n scopedPreflightStyles({\n isolationStrategy: isolateForComponents('.twp'),\n }),\n ],\n};\n\nexports.default = config;\n```\n\n```text\nisolateForComponents\n```\n\n```text\nisolateInsideOfContainer\n```\n\n```text\nisolateOutsideOfContainer\n```\n\n```css\n#app {\n @tailwind base;\n}\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\nexport default {\n important: '#app',\n}\n```\n\n```text\npostcss-nested\n```\n\n```text\n#app { @tailwind base; }\n```\n\n```text\nimportant: '#app'\n```\n\n```text\ntailwind.config.js\n```\n\n```css\n#app {\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n}\n```\n\n```js\nexport default {\n plugins: {\n \"postcss-nested\": {},\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n```js\nexport default {\n\n // ... as usual ...\n\n daisyui: {\n\n // The default is :root, which doesn't work in this case.\n themeRoot: \"*\",\n\n },\n}\n```\n\n```html\n<!-- ... as usual ... -->\n\n<body>\n <div id=\"app\">\n\n <!-- The app with scoped Tailwind and Daisy UI goes here. -->\n\n </div>\n</body>\n\n<!-- ... as usual ... -->\n```\n\n```text\n@weiya ou\n```\n\n```text\npostcss-nested\n```\n\n```text\npnpm add -D postcss-nested\n```\n\n```text\ntailwindcss\n```\n\n```text\ntailwindcss/nesting\n```\n\n```text\ndaisyui\n```\n\n```text\nthemeRoot\n```\n\n```text\n#app\n```\n\n========================================\n\nComments:\n- Unfortunately this does not work. All the resets and default title values etc.. which cause conflicts are not prefixed\n- I mean, how would you make them work? For example `input { margin: 0 }`. If you have prefix class like `.tw input { margin: 0 }` then it's still all or nothing approach, if you add it then all default values will apply to everything anyway, if you don't then nothing will work.\n- I want to apply the class to the pages/sections that will have tailwind html. Applying tailwind css globally to the existing system causes a lot of layouts to break so it needs to be scoped. A prefix class like you showed fixes the specific problem that I have. The prefix functionality in tailwind doesn't work like this though, it just prefixes classes.\n- Is it just the preflight that's breaking for you (the reset on things like input, etc?) Maybe just go here github.com/tailwindlabs/tailwindcss/blob/…\n- ...and copy-paste the preflight and drop in into your CSS instead of using the @import \"tailwind/base\"? It's only 200 lines of not-that-interesting CSS. I get that this is brittle but it's not likely to be an area of active development\n- using a custom base is best solution and works well\n- @Guerrilla could you add an answer with your solution? I am unable to generate a custom base.\n- @adelriosantiago added\n- Do you mean `important: true` ? That will add important to all properties but it doesn't help at all with scoping tailwind. It will make situation worse.\n- No, `important: true` will only add `!important` to all styles. Though, setting the `important` value to a string will add a scope. For example, `important: '.tailwind'` will transform utilities like `.p-10 { ... }` to `.tailwind .p-10 { ... }`.\n- 100% right good knowledge shared thanks bro @CyrusKorn\n- Hatts of to you bro !!\n- @CyrusKorn tailwindcss scoping not working in the radix ui's portal Do you know how to fix ??\n- The latter worked great for me -- tailwind layout shorthands are great, but I don't always want to override the base tags!\n- Out of all of these solutions, this one also worked for me. The key is that tailwind base styles some global components so taking that out fixes the problem i was running into\n- This solution worked for me in a small Vue 3 app that was being inserted into a larger website. Simply added `import 'tailwindcss/tailwind.css'` into my `main.js` Changed the `postcss.config.js` to include the `postcss-nested` plugin. Added `#app {@tailwind base; @tailwind components; @tailwind utilities; @tailwind screens;}` into my root `App.vue`\n- Sadly, this no longer works. Tailwind has a specific file to detect nesting and spit out: \"Nested @tailwind rules were detected, but are not supported. Consider using a prefix to scope Tailwind's classes\"\n- this is currently working for me on tailwlindcss v3.4.3. My use case is scoping tailwind reset styles in a larger application.\n- I believe the best configuration is to use `postcss-nested` to limit the scope of Tailwind CSS preflight to `#app { @tailwind base; }`, and use `important: '#app'` in `tailwind.config.js` to limit the scope of the styles. stackoverflow.com/a/78499200/9854149\n- the part with nesting in your-styles.css / postcss.config.js seems redundant since the `isolationStrategy` from the plugin already considers a selector for scoping: As one example, the plugin produces based on the preflight rules: `small:where(.your-selector,.your-selector *) { font-size: 80%; }`, which was before: `small { font-size: 80%; }`\n- This library works very well. Fixes conflicts between Normalize, Tailwind's base, and MUI. Great work. Still, wondering if there's a solution that doesn't require all this trouble though.\n- @SnazzyPencil for sure would be simpler if TailwindCss proposed similar options out of the box\n- this is the answer, and if you configured postcss with tailwindcss/nesting, you can use `@tailwind base` within your root element's style, just not `@tailwind components` and `@tailwind utilities` etc\n- This will still cause PostCSS to complain about the nesting.","metadata":{"transformedAt":"2026-08-18T18:33:42.896Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":64,"totalLines":561,"estimatedTokens":3166}}191{"id":"stack-59982018","source":"stackoverflow","questionId":59982018,"title":"How do I get Tailwind's active breakpoint in JavaScript?","tags":["javascript","css","reactjs","tailwind-css"],"text":"Title: How do I get Tailwind's active breakpoint in JavaScript?\nTags: javascript, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am building Tailwind with config file and including it in a React project.\n\nI would like to get the active breakpoint value in JavaScript/React. How can I achieve the same?\n\n\r\n\r\n\n```\nal\n sm\n md\n lg\n xl\n\n```\n\n\r\n\r\n\r\n\nThe above shows the active breakpoints. But how do I get the same in JS without including any of the above markup?\n\n========================================\n\nTop Answer:\nFrom the tailwind docs, you can import your config from the `tailwindcss` node module:\n\n```\nimport resolveConfig from 'tailwindcss/resolveConfig'\nimport tailwindConfig from './tailwind.config.js'\n\nconst fullConfig = resolveConfig(tailwindConfig)\n\nfullConfig.theme.width[4]\n// => '1rem'\n\nfullConfig.theme.screens.md\n// => '768px'\n\nfullConfig.theme.boxShadow['2xl']\n// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'\n```\n\nAs you can see above, you can get your breakpoints by referencing `fullConfig.theme.screens.{breakpoint}`. You should be able to compare this to your current screen width using javascript.\n\nFind the official tailwind description here.\n\n========================================\n\nCode:\n```html\n<div class=\"block sm:hidden md:hidden lg:hidden xl:hidden\">al</div>\n <div class=\"hidden sm:block md:hidden lg:hidden xl:hidden\">sm</div>\n <div class=\"hidden sm:hidden md:block lg:hidden xl:hidden\">md</div>\n <div class=\"hidden sm:hidden md:hidden lg:block xl:hidden\">lg</div>\n <div class=\"hidden sm:hidden md:hidden lg:hidden xl:block\">xl</div>\n</div>\n```\n\n```js\nimport resolveConfig from 'tailwindcss/resolveConfig';\nimport tailwindConfig from './tailwind.config'; // Fix the path\n\nconst fullConfig = resolveConfig(tailwindConfig);\n\nexport const getBreakpointValue = (value: string): number =>\n +fullConfig.theme.screens[value].slice(\n 0,\n fullConfig.theme.screens[value].indexOf('px')\n );\n\nexport const getCurrentBreakpoint = (): string => {\n let currentBreakpoint: string;\n let biggestBreakpointValue = 0;\n for (const breakpoint of Object.keys(fullConfig.theme.screens)) {\n const breakpointValue = getBreakpointValue(breakpoint);\n if (\n breakpointValue > biggestBreakpointValue &&\n window.innerWidth >= breakpointValue\n ) {\n biggestBreakpointValue = breakpointValue;\n currentBreakpoint = breakpoint;\n }\n }\n return currentBreakpoint;\n};\n```\n\n```json\n\"compilerOptions\": {\n \"allowJs\": true,\n \"allowsyntheticdefaultimports\": true\n}\n```\n\n```js\nimport * as process from 'process';\nwindow['process'] = process;\n```\n\n```text\nTypescript\n```\n\n```text\ntsconfig.json\n```\n\n```text\ncompilerOptions\n```\n\n```text\nprocess\n```\n\n```text\npolyfills.ts\n```\n\n```text\nprocess\n```\n\n```text\nimport resolveConfig from 'tailwindcss/resolveConfig'\nimport tailwindConfig from './tailwind.config.js'\n\nconst fullConfig = resolveConfig(tailwindConfig)\n\nfullConfig.theme.width[4]\n// => '1rem'\n\nfullConfig.theme.screens.md\n// => '768px'\n\nfullConfig.theme.boxShadow['2xl']\n// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'\n```\n\n```text\ntailwindcss\n```\n\n```text\nfullConfig.theme.screens.{breakpoint}\n```\n\n```text\n<div id=\"breakpoint-sm\" class=\"hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden w-0 h-0\"></div>\n<div id=\"breakpoint-md\" class=\"hidden sm:hidden md:block lg:hidden xl:hidden 2xl:hidden w-0 h-0\"></div>\n<div id=\"breakpoint-lg\" class=\"hidden sm:hidden md:hidden lg:block xl:hidden 2xl:hidden w-0 h-0\"></div>\n<div id=\"breakpoint-xl\" class=\"hidden sm:hidden md:hidden lg:hidden xl:block 2xl:hidden w-0 h-0\"></div>\n<div id=\"breakpoint-2xl\" class=\"hidden sm:hidden md:hidden lg:hidden xl:hidden 2xl:block w-0 h-0\"></div>\n```\n\n```text\nconst getCurrentBreakpoint = (): string => {\n const breakpointUnknown: string = 'unknown';\n const breakpointSM: string | null = document.getElementById('breakpoint-sm')?.offsetParent === null ? null : 'sm';\n const breakpointMD: string | null = document.getElementById('breakpoint-md')?.offsetParent === null ? null : 'md';\n const breakpointLG: string | null = document.getElementById('breakpoint-lg')?.offsetParent === null ? null : 'lg';\n const breakpointXL: string | null = document.getElementById('breakpoint-xl')?.offsetParent === null ? null : 'xl';\n const breakpoint2XL: string | null = document.getElementById('breakpoint-2xl')?.offsetParent === null ? null : '2xl';\n const breakpoint = breakpointSM ?? breakpointMD ?? breakpointLG ?? breakpointXL ?? breakpoint2XL ?? breakpointUnknown;\n return breakpoint;\n};\n```\n\n```text\nconst breakpoint = getCurrentBreakpoint();\nconst desktopBreakpoints: string[] = ['sm', 'md', 'lg', 'xl'];\nif (desktopBreakpoints.includes(breakpoint)) {\n // On Desktop (in Tailwind's eyes)\n} else {\n // On Mobile (in Tailwind's eyes)\n}\n```\n\n```text\nimport { useMediaQuery } from 'react-responsive';\nimport { theme } from '../../tailwind.config'; // Your tailwind config\n\nconst breakpoints = theme.screens;\n\ntype BreakpointKey = keyof typeof breakpoints;\n\nexport function useBreakpoint<K extends BreakpointKey>(breakpointKey: K) {\n const bool = useMediaQuery({\n query: `(min-width: ${breakpoints[breakpointKey]})`,\n });\n const capitalizedKey = breakpointKey[0].toUpperCase() + breakpointKey.substring(1);\n type Key = `is${Capitalize<K>}`;\n return {\n [`is${capitalizedKey}`]: bool,\n } as Record<Key, boolean>;\n}\n```\n\n```text\nconst { isSm } = useBreakpoint('sm');\nconst { isMd } = useBreakpoint('md');\nconst { isLg } = useBreakpoint('lg');\nreturn (\n <div>\n {isSm && (\n {/* Visible for sm: (min-width: 640px) */}\n <div>Content</div>\n )}\n\n {isMd && (\n {/* Visible for md: (min-width: 768px) */}\n <div>Content</div>\n )}\n </div>\n );\n```\n\n```text\nuseMediaQuery\n```\n\n```text\nreact-responsive\n```\n\n```js\nimport { theme } from '../../tailwind.config';\n\nexport function getCurrentBreakpoints() {\n return Object.keys(theme.screens).find((key) => window.innerWidth > theme.screens[key]);\n}\n```\n\n```js\n{/* MOBILE FIRST */}\n<div className=\"sm:hidden\">\n <Component breakpoint=\"mobile\" />\n</div>\n\n{/* SMALL */}\n<div className=\"hidden sm:block md:hidden\">\n <Component breakpoint=\"sm\" />\n</div>\n\n\n{/* MEDIUM */}\n<div className=\"hidden md:block lg:hidden\">\n <Component breakpoint=\"md\" />\n</div>\n\n\n{/* LARGE */}\n<div className=\"hidden lg:block xl:hidden\">\n <Component breakpoint=\"xl\" />\n</div>\n\n{/* EXTRA LARGE */}\n<div className=\"hidden xl:block 2xl:hidden\">\n <Component breakpoint=\"xl\" />\n</div>\n```\n\n```js\nimport React from 'react'\n\nconst Component = (prop) => {\n const { breakpoint } = prop;\n return (\n <div>{breakpoint}</div>\n )\n}\nexport default Component\n```\n\n```js\n/**\n * @desc The 'useBreakpoint()' hook is used to get the current \n * screen breakpoint based on the TailwindCSS config.\n *\n * @usage\n * import { useBreakpoint } from \"@/hooks/useBreakpoint\";\n *\n * const { isAboveSm, isBelowSm, sm } = useBreakpoint(\"sm\");\n * console.log({ isAboveSm, isBelowSm, sm });\n *\n * const { isAboveMd } = useBreakpoint(\"md\");\n * const { isAboveLg } = useBreakpoint(\"lg\");\n * const { isAbove2Xl } = useBreakpoint(\"2xl\");\n * console.log({ isAboveMd, isAboveLg, isAbove2Xl });\n *\n * @see https://stackoverflow.com/a/76630444/6543935\n * @requirements npm install react-responsive\n */\nimport { useMediaQuery } from \"react-responsive\";\nimport resolveConfig from \"tailwindcss/resolveConfig\";\nimport { Config, ScreensConfig } from \"tailwindcss/types/config\";\n\nimport tailwindConfig from \"@/tailwind.config\"; // Your tailwind config\n\nconst fullConfig = resolveConfig(tailwindConfig as unknown as Config);\n\nconst breakpoints = fullConfig?.theme?.screens || {\n xs: \"480px\",\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n};\n\nexport function useBreakpoint<K extends string>(breakpointKey: K) {\n const breakpointValue = breakpoints[breakpointKey as keyof typeof breakpoints];\n const bool = useMediaQuery({\n query: `(max-width: ${breakpointValue})`,\n });\n const capitalizedKey = breakpointKey[0].toUpperCase() + breakpointKey.substring(1);\n\n type KeyAbove = `isAbove${Capitalize<K>}`;\n type KeyBelow = `isBelow${Capitalize<K>}`;\n\n return {\n [breakpointKey]: Number(String(breakpointValue).replace(/[^0-9]/g, \"\")),\n [`isAbove${capitalizedKey}`]: !bool,\n [`isBelow${capitalizedKey}`]: bool,\n } as Record<K, number> & Record<KeyAbove | KeyBelow, boolean>;\n}\n```\n\n```js\n\"use client\";\n\nimport React, { useEffect } from \"react\";\n\nimport { useBreakpoint } from \"@/hooks/useBreakpoint\";\n\nconst Nav: React.FC = () => {\n const { isAboveSm, isBelowSm, sm } = useBreakpoint(\"sm\");\n\n useEffect(() => {\n console.log({ isAboveSm, isBelowSm, sm });\n });\n\n return (\n <> ... </>\n );\n};\n```\n\n```text\n{ isAboveSm: true, isBelowSm: false, sm: 640 }\n```\n\n```js\nconst [isBwXs, setIsBwXs] = React.useState<boolean>(false);\nconst { isBelowXs } = useBreakpoint(\"xs\");\n\nuseLayoutEffect(() => {\n setIsBwXs(isBelowXs);\n}, [isBelowXs]);\n```\n\n```js\nconst tailwindConfig: import(\"tailwindcss\").Config = {...};\nexport default tailwindConfig;\n```\n\n```text\nuseLayoutEffect()\n```\n\n```text\ntailwind.config\n```\n\n```text\nmodule.exports = {...}\n```\n\n```text\nimport tailwindConfig from '~/tailwind.config';\nimport resolveConfig from 'tailwindcss/resolveConfig';\n\nconst { theme: { screens } } = resolveConfig(tailwindConfig);\n\nconst getActiveBreakpoint = () => {\n /* Sort the breakpoints based on their dimensions in descending order */\n const sorted = Object.entries(screens).sort((x, y) => parseInt(y[1]) - parseInt(x[1]));\n\n /* Find the first instance where the current width is higher or equal to a breakpoint */\n const bp = sorted.find((s) => window.innerWidth >= parseInt(s[1]));\n\n /* if no breakpoint is found, it is a mobile screen */\n if (!bp) return \"mb\"\n else return bp[0]\n}\n```\n\n```text\ngetActiveBreakpoint()\n```\n\n```text\nonMounted()\n```\n\n```text\nimport resolveConfig from \"tailwindcss/resolveConfig\";\nimport overrides from \"../tailwind.config\";\nimport { useEffect, useState } from \"react\";\nconst config = resolveConfig(overrides);\n\nexport const useIsBreakpointActive = (\n breakpoint: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"\n): boolean => {\n const width = config.theme.screens[breakpoint];\n const widthPx = parseInt(width);\n\n const isBreakpointActive = window.innerWidth >= widthPx;\n const [wasBreakpointActive, setWasBreakpointActive] =\n useState(isBreakpointActive);\n\n // if the breakpoint argument changes, immediately set state \n // and re-render\n if (wasBreakpointActive !== isBreakpointActive) {\n setWasBreakpointActive(isBreakpointActive);\n }\n\n useEffect(functi() => {\n const handleResize = () =>\n setWasBreakpointActive(window.innerWidth >= widthPx);\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n return isBreakpointActive;\n};\n```\n\n```tsx\nimport { useMediaQuery } from 'react-responsive'\nimport resolveConfig from 'tailwindcss/resolveConfig'\nimport tailwindConfig from '../../tailwind.config' // change to your `tailwind.config` path\n\nconst config = resolveConfig(tailwindConfig)\nconst breakpoints = config.theme.screens\n\n/**\n * Returns `true` if screen size matches the\n * `breakpoint`.\n */\nexport const useBreakpoint = (breakpoint: keyof typeof breakpoints) => {\n const breakpointQuery = breakpoints[breakpoint]\n\n return useMediaQuery({ query: `(min-width: ${breakpointQuery})` })\n}\n```\n\n```tsx\nconst mdUp = useBreakpoint('md')\n```\n\n```text\nexport function getCurrentBreakpoints() {\n if (!window || typeof window === 'undefined') {\n return null;\n }\n\n let breakpoints = Object.keys(theme.screens).map((key) => Number(theme.screens[key]?.replace(/\\D/g, '') || 1e6)).reverse();\n let keys = Object.keys(theme.screens).reverse();\n\n return keys[breakpoints.findIndex((screenSize: number) => window?.innerWidth > screenSize)] ?? 'sm';\n}\n```\n\n```js\nfunction isBreakpoint(alias) {\n return $('.device-' + alias).is(':visible')\n}\n```\n\n```html\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js\"></script>\n\n<div class=\"device-sm hidden sm:block md:hidden\"></div>\n<div class=\"device-md hidden md:block lg:hidden\"></div>\n<div class=\"device-lg hidden lg:block xl:hidden\"></div>\n<div class=\"device-xl hidden xl:block 2xl:hidden\"></div>\n<div class=\"device-2xl hidden 2xl:block\"></div>\n```\n\n```js\nfunction isMinBreakpoint(alias) {\n return $('.device-' + alias).is(':visible');\n}\n```\n\n```html\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js\"></script>\n<div class=\"device-sm hidden sm:block\"></div>\n<div class=\"device-md hidden md:block\"></div>\n<div class=\"device-lg hidden lg:block\"></div>\n<div class=\"device-xl hidden xl:block\"></div>\n<div class=\"device-2xl hidden 2xl:block\"></div>\n```\n\n```text\nif isBreakpoint('md')\n```\n\n```text\nisMinBreakpoint\n```\n\n```text\nif isMinBreakpoint('md')\n```\n\n```js\nimport resolveConfig from \"tailwindcss/resolveConfig\";\nimport tailwindConfig from \"@/tailwind.config\";\nimport { Config } from \"tailwindcss/types/config\";\nimport {useMemo, useEffect, useState, use} from \"react\";\n\nexport const config = resolveConfig(tailwindConfig as unknown as Config);\n\nconst breakpoints = config.theme.screens;\ntype BreakpointKey = keyof typeof breakpoints;\nexport function useBreakpoint<K extends BreakpointKey>(breakpointKey: K) {\n // breakpointValueText is something like \"640px\"\n const breakpointValueText = breakpoints[breakpointKey];\n const breakpointValueInt = Number(breakpointValueText.replace(/[^0-9]/g, \"\"));\n const isBelow = useIsBelowWidth(breakpointValueInt);\n const capitalizedKey = breakpointKey[0].toUpperCase() + breakpointKey.substring(1);\n\n const result = {\n [`text${capitalizedKey}`]: breakpointValueText,\n [`number${capitalizedKey}`]: breakpointValueInt,\n [`isBelow${capitalizedKey}`]: isBelow,\n [`isAbove${capitalizedKey}`]: isBelow === undefined ? undefined : !isBelow,\n } as (\n Record<`text${Capitalize<K>}`, string> &\n Record<`number${Capitalize<K>}`, number> &\n Record<`isBelow${Capitalize<K>}`, boolean | undefined> & \n Record<`isAbove${Capitalize<K>}`, boolean | undefined>\n );\n return useMemo(() => result, [breakpointValueInt, isBelow]);\n}\n\n/**\n * A React hook that returns a boolean indicating whether the window width is below a specified value.\n * The hook automatically updates when the window is resized.\n * \n * Based on: https://dev.to/musselmanth/re-rendering-react-components-at-breakpoint-window-resizes-a-better-way-4343\n * \n * @param innerWidth - The width threshold in pixels to check against\n * @returns {boolean | undefined} - A boolean indicating whether the window width is\n * below the specified value, or undefined if the window object is not available.\n * \n * @example\n * ```tsx\n * const isMobile = useIsBelowWidth(768);\n * ```\n */\nexport function useIsBelowWidth(innerWidth: number) : boolean | undefined {\n const [isBelowWidth, setIsBelowWidth] = useState<boolean | undefined>(undefined);\n\n useEffect(() => {\n const windowResizeHandler = () => {\n setIsBelowWidth(window.innerWidth <= innerWidth);\n };\n windowResizeHandler();\n\n window.addEventListener('resize', windowResizeHandler);\n return () => window.removeEventListener('resize', windowResizeHandler);\n }, [innerWidth]);\n\n return isBelowWidth;\n};\n```\n\n```js\nconst { text2xl, number2xl, isBelow2xl, isAbove2xl } = useBreakpoint('2xl');\nconsole.log({text2xl, number2xl, isBelow2xl, isAbove2xl});\n// {text2xl: '1536px', number2xl: 1536, isBelow2xl: true, isAbove2xl: false}\n```\n\n```text\ntext${capitalizedKey}\n```\n\n```text\n2xl\n```\n\n```text\n2xlText\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwindScreen.js\n```\n\n```text\nwhatever.config.js\n```\n\n========================================\n\nComments:\n- I can't import tailwindConfig from `'./tailwind.config.js'` if I am using a react project is there any alternative to that?\n- @S_coderX451 react has nothing to do with being able to import from tailwind.config.js if you've ran `npx tailwindcss init` at the root of your projects directory, you will have a tailwind.config.js file. You have to make sure the path i.e. '../../tailwind.config.js' is correct. If you're importing in file x.js, and x.js is in {projectRoot}/components/x.js. The import will be `import tailwindConfig from '../tailwind.config.js'`.\n- If you are having trouble importing the config file in Vite check out this tutorial: lobotuerto.com/notes/import-tailwind-config-in-vite\n- did not work, only the extended styles showed up in the fullConfig variable\n- Not possible with Tailwind 4, unfortunately, as `resolveConfig` was removed - apparently entirely pointlessly so.\n- Thanks for that snippet. It doesn't work properly since `getBreakpointValue` is returning a string and the `>=` comparision between strings and numbers made weird things. I solved it with `const getBreakpointValue = (value: string): number => parseInt(fullConfig.theme.screens[value].replace('px', ''), 10);`\n- Sadly, in Angular this doesn't work. It's quite frustrating how it's not possible to access css variables in angular.\n- I'm getting no luck even after adding allowJs **Internal server error: Failed to resolve import \"./tailwind.config\" from \"src/constants/layout.ts\". Does the file exist?**\n- @SuperUberDuper you should fix the path based on your folder structure\n- Nice hack actually! This may not look so clean but I like the idea.\n- If your tailwind config is not complete and only extends the default config you need to resolve the complete config with: `import resolveConfig from \"tailwindcss/resolveConfig\"; import tailwindConfig from \"../../tailwind.config\"; const fullConfig = resolveConfig(tailwindConfig);` and access the breakpoints: `const breakpoints = fullConfig.theme.screens;`\n- since this only checks for `min-width`, doesn't this mean that `isMd` is also active when `isSm` is? in other words, don't you need to check for is-in-between?\n- @phil294 nvm, it's the same in native TW too, so this is fine: tailwindcss.com/docs/…\n- The number of events on dom would be high. Imagine a table rows of 1000 with responsiveness\n- This worked perfectly on NextJS 13 !\n- I second this. Absolutely fab!\n- Why are you using media query `max-width` instead of `min-width`? As I know tailwind uses `min-width` (or `>=`). Isn't there a displace of 1px when using `max-width`?\n- @phse, you’re probably right. Feel free to check this out and update the answer to make it more useful going forward.\n- At least, the first answer here that added the resize listener! Thanks :) You might want to throttle the event tho :)","metadata":{"transformedAt":"2026-08-18T18:33:42.896Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":53,"totalLines":637,"estimatedTokens":4688}}192{"id":"stack-69400560","source":"stackoverflow","questionId":69400560,"title":"How to change scrollbar when using Tailwind (next.js/react)","tags":["css","reactjs","next.js","tailwind-css"],"text":"Title: How to change scrollbar when using Tailwind (next.js/react)\nTags: css, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using Tailwind (react/next) and struggle to change the way my scrollbar looks.\n\nIt's a single page application and I have been trying to create custom CSS to apply to the first div in my index file, like this:\n\n```\n \n Oscar Ekstrand\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n```\n\nI can get custom CSS classes to work for things like buttons, both with a \"plugin-approach\" and having a global style sheet. (https://play.tailwindcss.com/zQftpiBCmf)\n\nBut I can't understand how to change the look of my scrollbar.\n\nAnyone got an idea?\n\n========================================\n\nTop Answer:\n```\nyarn add -D tailwind-scrollbar\n```\n\nor\n\n```\nnpm install --save-dev tailwind-scrollbar\n```\n\nthen\n\n```\nplugins: [\n // ...\n require('tailwind-scrollbar'),\n],\n```\n\nsample\n\n```\n\n \n\n```\n\nvariants\n\n```\nvariants: {\n // ...\n scrollbar: ['dark']\n}\n```\n\nFOR SOME INSTANCE IF YOU WANT TO CHANGE THE WIDTH OF THE SCROLLBAR YOU CAN CUSTOME IN YOUR ***tailwind.css***\n\n```\n@layer utilities {\n .scrollbar-medium::-webkit-scrollbar {\n width: 12px;\n }\n}\n```\n\nthen\n\n```\n\n \n\n```\n\nTHERE IS ONLY ONE STYLE FOR SCROLLBAR WHICH IS scrollbar-thin... so customize this way\n\n========================================\n\nCode:\n```text\n<div className=\"no-scroll\"> <<<<<<<--------- Adding custom css here\n <Head>\n <title>Oscar Ekstrand</title>\n <link rel=\"icon\" href=\"/images/favicon.ico\" />\n \n </Head>\n \n <main className=\"flex flex-col no-scroll\">\n <section ref={heroref}>\n <Hero scrollToContacts={scrollToContacts} />\n </section>\n\n <section ref={offeringref}>\n <Offering />\n </section>\n <section ref={processref}>\n <WhatIDo />\n </section>\n\n <section ref={biographyref}>\n <CvBar />\n </section>\n <section ref={skillsetref}>\n <Skillset />\n </section>\n </main>\n <section ref={contactsref}>\n <Footer />\n </section>\n </div>\n```\n\n```css\n@layer utilities {\n .scrollbar::-webkit-scrollbar {\n width: 20px;\n height: 20px;\n }\n\n .scrollbar::-webkit-scrollbar-track {\n border-radius: 100vh;\n background: #f7f4ed;\n }\n\n .scrollbar::-webkit-scrollbar-thumb {\n background: #e0cbcb;\n border-radius: 100vh;\n border: 3px solid #f6f7ed;\n }\n\n .scrollbar::-webkit-scrollbar-thumb:hover {\n background: #c0a0b9;\n }\n}\n```\n\n```text\n::-webkit-scrollbar\n```\n\n```css\n/* For Firefox Browser */\n.scrollbar {\n scrollbar-width: thin;\n scrollbar-color: #000 #fff;\n}\n\n\n/* For Chrome, EDGE, Opera, Others */\n.scrollbar::-webkit-scrollbar {\n width: 20px;\n}\n\n.scrollbar::-webkit-scrollbar-track { \n background: #fff;\n}\n\n.scrollbar::-webkit-scrollbar-thumb { \n background:#000;\n}\n```\n\n```text\nyarn add -D tailwind-scrollbar\n```\n\n```text\nnpm install --save-dev tailwind-scrollbar\n```\n\n```text\nplugins: [\n // ...\n require('tailwind-scrollbar'),\n],\n```\n\n```text\n<div class=\"h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100\">\n <div class=\"h-64\"></div>\n</div>\n```\n\n```text\nvariants: {\n // ...\n scrollbar: ['dark']\n}\n```\n\n```text\n@layer utilities {\n .scrollbar-medium::-webkit-scrollbar {\n width: 12px;\n }\n}\n```\n\n```text\n<div class=\"h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100 scrollbar-medium\">\n <div class=\"h-64\"></div>\n</div>\n```\n\n```text\n// tailwind.config.js\n\nconst plugin = require('tailwindcss/plugin');\n\nmodule.exports = {\n// ...\n plugins: [\n plugin(({ addBase, theme }) => {\n addBase({\n '.scrollbar': {\n overflowY: 'auto',\n scrollbarColor: `${theme('colors.blue.600')} ${theme('colors.blue.200')}`,\n scrollbarWidth: 'thin',\n },\n '.scrollbar::-webkit-scrollbar': {\n height: '2px',\n width: '2px',\n },\n '.scrollbar::-webkit-scrollbar-thumb': {\n backgroundColor: theme('colors.blue.600'),\n },\n '.scrollbar::-webkit-scrollbar-track-piece': {\n backgroundColor: theme('colors.blue.200'),\n },\n });\n }),\n],\n// ...\n};\n```\n\n```text\n<div class=\"scrollbar\">\n <!-- content -->\n</div>\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n mode: 'jit',\n content: ['./src/**/*.{html,ts,tsx,js}'],\n darkMode: 'media',\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [\n // https://github.com/tailwindlabs/tailwindcss.com/blob/ceb07ba4d7694ef48e108e66598a20ae31cced19/tailwind.config.js#L280-L284\n function ({ addVariant }) {\n addVariant(\n 'supports-backdrop-blur',\n '@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))',\n );\n addVariant('supports-scrollbars', '@supports selector(::-webkit-scrollbar)');\n addVariant('children', '& > *');\n addVariant('scrollbar', '&::-webkit-scrollbar');\n addVariant('scrollbar-track', '&::-webkit-scrollbar-track');\n addVariant('scrollbar-thumb', '&::-webkit-scrollbar-thumb');\n },\n ],\n};\n```\n\n```text\nscrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar:bg-transparent scrollbar-track:!bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300 scrollbar-track:!rounded\n```\n\n```text\n<div className=\"... overflow-auto scrollbar dark:scrollbarkdark> ...\n```\n\n```text\n.scrollbar::-webkit-scrollbar-track {\n background: white;\n}\n.scrollbardark::-webkit-scrollbar-track {\n background: black;\n}\n...\n```\n\n```text\n//Inside styles.css\n\n@tailwind base; \n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n::-webkit-scrollbar-thumb{\n@apply bg-transparent shadow-sm\n}\n::-webkit-scrollbar{\n@apply w-3 bg-transparent\n}\n::-webkit-scrollbar-thumb{\n@apply rounded-none bg-blue-400 /*color trackbar*/\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n /* width */\n ::-webkit-scrollbar {\n @apply w-2\n }\n \n /* Track */\n ::-webkit-scrollbar-track {\n @apply bg-inherit\n }\n \n /* Handle */\n ::-webkit-scrollbar-thumb {\n @apply bg-pink-200 dark:bg-violet-600 rounded-xl\n }\n \n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n @apply bg-violet-700\n }\n}\n```\n\n```text\ncss\n```\n\n```text\ntailwind\n```\n\n```text\n@layer\n```\n\n```text\nbase\n```\n\n```text\n@apply\n```\n\n```text\ntailwind\n```\n\n```html\n<div class=\"[&::-webkit-scrollbar]:[width:30px]\n [&::-webkit-scrollbar-thumb]:bg-red-500\n overflow-scroll\">\n</div>\n```\n\n```text\nconst plugin = require('tailwindcss/plugin');\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [],\n\n theme: {},\n\n plugins: [\n plugin(function ({ addUtilities }) {\n addUtilities({\n '.scrollbar-width-auto': {\n 'scrollbar-width': 'auto',\n },\n\n '.scrollbar-none': {\n 'scrollbar-width': 'none',\n '&::-webkit-scrollbar': {\n 'display': 'none'\n }\n },\n\n '.scrollbar-thin': {\n 'scrollbar-width': 'thin',\n },\n\n '.scrollbar-light': {\n '&::-webkit-scrollbar': {\n width: '5px',\n height: '8px',\n background: '#374151',\n border: '4px solid transparent',\n borderRadius: '8px',\n },\n '&::-webkit-scrollbar-thumb': {\n background: '#4f46e5',\n border: '4px solid transparent',\n borderRadius: '8px',\n backgroundClip: 'paddingBox',\n },\n '&::-webkit-scrollbar-thumb:hover': {\n background: '#6366f1',\n },\n }\n })\n }),\n forms, typography],\n};\n```\n\n```text\n<div className\"... scrollbar-light\">\n```\n\n```text\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n\n ul,\n ol {\n list-style: revert;\n }\n /* NEW CODE */\n /* width */\n ::-webkit-scrollbar {\n @apply w-2;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n @apply bg-gray-200 dark:bg-gray-700;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n @apply bg-gray-400 dark:bg-gray-500 rounded-xl;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n @apply bg-gray-500 dark:bg-gray-400;\n }\n}\n```\n\n```text\nnpm install tailwind-scrollbar\n```\n\n```text\nplugins: [\n // Tailwind plugins\n require('tailwind-scrollbar'),\n]\n```\n\n```text\n@tailwind base; \n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n::-webkit-scrollbar{\n@apply w-1 bg-transparent;\n@apply h-1 bg-transparent;\n}\n::-webkit-scrollbar-thumb{\n@apply rounded-full bg-gray-400\n}}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind-scrollbar\n```\n\n```text\nplugins\n```\n\n```text\nstyle.scss/css\n```\n\n```text\n@layer components {\n /* Base styling for a custom scrollbar */\n .scrollbar-custom {\n /* For Firefox */\n scrollbar-width: thin;\n scrollbar-color: #cbd5e0 #edf2f7; /* thumb and track (light mode) */\n }\n /* For WebKit browsers */\n .scrollbar-custom::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n .scrollbar-custom::-webkit-scrollbar-track {\n background: #edf2f7;\n }\n .scrollbar-custom::-webkit-scrollbar-thumb {\n background-color: #cbd5e0;\n border-radius: 10px;\n border: 2px solid #edf2f7;\n }\n\n /* Dark mode styles */\n .dark .scrollbar-custom {\n scrollbar-color: #718096 #2d3748; /* thumb and track (dark mode) */\n }\n .dark .scrollbar-custom::-webkit-scrollbar-track {\n background: #2d3748;\n }\n .dark .scrollbar-custom::-webkit-scrollbar-thumb {\n background-color: #718096;\n border: 2px solid #2d3748;\n }\n}\n```\n\n========================================\n\nComments:\n- Thanks!! I was very determined to remove the default scrollbar for the whole page, if that makes any sense. Also that part about overflow-y-scroll from Tailwind was missing from my own trial and errors!\n- I didn't have any success with this approach and instead got the following to work (not inside `@layer`) *::-webkit-scrollbar { width: 20px; } ...and so on.\n- Have an updated answer 2024\n- Is there any way to replace the default scrollbar for the entire layout? When I try to add the scrollbar to my root layout, it just adds a second scrollbar (which also doesn't work properly).\n- A little update on complex utility classes. Tailwind `v4.1` recommends using the `@utility` directive with nesting. `@utility scrollbar-hidden { &::-webkit-scrollbar { ... } }`\n- works for Chrome only. Does work on firefox.\n- I tried to apply this in all elements, one by one, and nothing happened. Do we need something else for it to work?\n- Why not use `@variant`?\n- @rozsazoltan In Tailwind CSS v4, the preferred way to style things like scrollbars across variants (like dark mode) is by using utility classes or custom class combinations inside @layer — as I did with .dark .scrollbar-custom. The `@variant` directive was used in earlier versions of Tailwind (pre-v2.0) to generate responsive or state-based variants inside custom CSS. However, it’s now deprecated and removed in favor of using regular CSS nesting or utility-first class definitions inside `@layer` blocks.\n- Is this an AI generated comment, just because you said you're using v4: \"tailwindcss v.4\"","metadata":{"transformedAt":"2026-08-18T18:33:42.896Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":37,"totalLines":579,"estimatedTokens":2910}}193{"id":"stack-63392426","source":"stackoverflow","questionId":63392426,"title":"How to use TailwindCSS with Django?","tags":["python","css","django","tailwind-css"],"text":"Title: How to use TailwindCSS with Django?\nTags: python, css, django, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow to use all features of TailwindCSS in a Django project (not only the CDN), including\na clean workflow with auto-reloading and CSS minify step to be production-ready?\n\n========================================\n\nTop Answer:\nDjango-Tailwind CSS is a very good package and it works well for me.\n the docs properly and you will be fine.\n\nBefore you begin, make sure you have `npm` properly installed on your system\n\n### Quick start\n\n- Install the python package django-tailwind from pip\n\n`pip install django-tailwind`\n\n*Alternatively, you can download or clone this repo and run* `pip install -e ..`\n\nAdd `tailwind` to INSTALLED_APPS in **settings.py**\n\nCreate a tailwind-compatible Django-app, I like to call it `theme`:\n\n`python manage.py tailwind init theme`\n\nAdd your newly created `theme` app to INSTALLED_APPS in **settings.py**\n\nIn **settings.py**, register tailwind app by adding the following\nstring:\n\n`TAILWIND_APP_NAME = 'theme'`\n\nRun a command to install all necessary dependencies for tailwind\ncss:\n\n`python manage.py tailwind install`\n\n- Now, go and start tailwind in dev mode:\n\n`python manage.py tailwind start`\n\nDjango Tailwind comes with a simple base.html template that can be\nfound under **yourtailwindappname/templates/base.html**. You can always\nextend it or delete it if you have own layout.\n\nIf you're not using **base.html** template provided with Django\nTailwind, add **styles.min.css** to your own **base.html** template file:\n\n*You should now be able to use Tailwind CSS classes in your html.*\n\nTo build a production version of CSS run:\n\n`python manage.py tailwind build`\n\nFor the **live reload**, this handles it:\n`python manage.py tailwind start`\n\nFor the **build process**, this handles it:\n`python manage.py tailwind build`\n\nFor the **PurgeCSS process**, see simple sample in the docs\n\nFor **NPM path config**uration error (esp. on windows), see docs\n\n========================================\n\nCode:\n```bash\ncd your-django-folder; mkdir jstoolchain; cd jstoolchain\nnpm init -y\nnpm install -D tailwindcss\nnpx tailwindcss init\n```\n\n```js\n...\ncontent: [\"../templates/**/*.{html,js}\"],\n...\n```\n\n```scss\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```json\n\"scripts\": {\n // use in local environment\n \"tailwind-watch\": \"tailwindcss -i ../input.css -o ../static/css/output.css --watch\",\n // use in remote environment\n \"tailwind-build\": \"tailwindcss -i ../input.css -o ../static/css/output.css --minify\"\n }\n```\n\n```html\n{% load static %}\n\n<head>\n <link rel=\"stylesheet\" href=\"{% static \"css/output.css\" %}\">\n</head>\n```\n\n```bash\n#!/bin/sh\nset -e\nTAILWIND_ARCHITECTURE=arm64 # chose the right architecture for you\nTAILWIND_VERSION=v3.1.4 # chose the right version\n\nSOURCE_NAME=tailwindcss-linux-${TAILWIND_ARCHITECTURE}\nOUTPUT_NAME=tailwindcss\nDOWNLOAD_URL=https://github.com/tailwindlabs/tailwindcss/releases/download/${TAILWIND_VERSION}/${SOURCE_NAME}\n\ncurl -sLO ${DOWNLOAD_URL} && chmod +x ${SOURCE_NAME}\nmv ${SOURCE_NAME} ${OUTPUT_NAME} # rename it\nmv ${OUTPUT_NAME} /usr/bin # move it to be used globally in a folder already in the PATH var\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nyour-django-folder\n```\n\n```text\ninput.css\n```\n\n```text\npackage.json\n```\n\n```text\nstatic\n```\n\n```text\njstoolchains\n```\n\n```text\nnpm run tailwind-watch\n```\n\n```text\noutput.css\n```\n\n```text\n.gitignore\n```\n\n```text\ntailwind-watch\n```\n\n```text\noutput.css\n```\n\n```text\nnpm run tailwind-build\n```\n\n```text\nmkdir static/css/tailwind\n\n cd static/css/tailwind\n```\n\n```text\nnpm init -y\n```\n\n```text\nnpm i tailwindcss\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n\"scripts\": {\n \"build:css\": \"tailwind build tw.css -o ../tailwind.css\"\n },\n```\n\n```text\nnpm run build:css\n```\n\n```text\ntw.css\n```\n\n```text\n../tailwind.css\n```\n\n```text\ntailwind.css\n```\n\n```text\nnpm\n```\n\n```text\npip install django-tailwind\n```\n\n```text\npip install -e ..\n```\n\n```text\ntailwind\n```\n\n```text\ntheme\n```\n\n```text\npython manage.py tailwind init theme\n```\n\n```text\ntheme\n```\n\n```text\nTAILWIND_APP_NAME = 'theme'\n```\n\n```text\npython manage.py tailwind install\n```\n\n```text\npython manage.py tailwind start\n```\n\n```text\npython manage.py tailwind build\n```\n\n```text\npython manage.py tailwind start\n```\n\n```text\npython manage.py tailwind build\n```\n\n```sh\nmkdir theme\n cd theme\n \n npx degit https://github.com/MindMansion/DjangoTailwindStarter/theme\n npm install\n npm run build\n npm run watch\n```\n\n```text\ninplace\n```\n\n```text\nmain.scss\n```\n\n```text\nglobal.css\n```\n\n```text\npython manage.py tailwind start\n```\n\n```text\npython -m pip install django-tailwind\n```\n\n```text\npython -m pip install git+https://github.com/timonweb/django-tailwind.git\n```\n\n```text\nINSTALLED_APPS = [ 'tailwind', ]\n```\n\n```text\npython manage.py tailwind init\n```\n\n```text\nINSTALLED_APPS = [ 'tailwind', 'theme' ]\n```\n\n```text\nTAILWIND_APP_NAME = 'theme'\n```\n\n```text\n127.0.0.1\n```\n\n```text\nINTERNAL_IPS = [ \"127.0.0.1\", ]\n```\n\n```text\npython manage.py tailwind install\n```\n\n```text\nbase.html\n```\n\n```text\ntailwind_app_name/templates/base.html\n```\n\n```text\n{% tailwind_css %}\n```\n\n```text\n{% load tailwind_tags %}\n```\n\n```text\n<head>\n```\n\n```text\n{% tailwind_css %}\n```\n\n```text\n</head>\n```\n\n```text\n{% tailwind_css %}\n```\n\n```text\nINSTALLED_APPS = [ 'tailwind', 'theme', 'django_browser_reload' ]\n```\n\n```text\nMIDDLEWARE = [ \"django_browser_reload.middleware.BrowserReloadMiddleware\", ]\n```\n\n```text\nfrom django.urls import include, path\n```\n\n```text\nurlpatterns = [ path(\"__reload__/\", include(\"django_browser_reload.urls\")), ]\n```\n\n```text\npython manage.py tailwind start\n```\n\n========================================\n\nComments:\n- You can install npm-watch and configure it to build the output automatically when either the input css or the config is changed.\n- Your instructions are missing \"npm init -y \" to create the packages.json file on step 1 just before installing: npm install tailwindcss postcss-cli autoprefixer\n- Anyone getting `(...)/node_modules/.bin/postcss: Permission denied` in OSX when using `npm run-script build`? (This works fine for me in Windows).\n- For me the process produced a `package.json`, not `packages.json` (i.e. without the 's').\n- Automate build process by adding following script to package.json \"dev\": \"nodemon --watch '../templates/**/*' -e html -x \\\"npm run build\\\"\" minho42.com/posts/…\n- Thanks a lot for your answer, it had been very useful! For those who might be interested, I created a minimal template based on your answer to set-up a django project with tailwindCSS, browser reload and daisyUI available on github.\n- This pattern (without postcss) worked for me on OSX\n- With the latest release of this package, it is, even more, easier now, and by default supports the latest version of the tailwind CSS. It is easier to update the tailwind CSS version also with the release of the new version.\n- I'm using the Django-Tailwind package. It works. However, it's unclear to me how to use tailwind directives ('@apply) with this package. I've tried writing some CSS classes with @apply in the src/styles.css file, but it does not get processed into proper CSS code in static/css/styles.css. Any help in this regard?\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review","metadata":{"transformedAt":"2026-08-18T18:33:42.896Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":67,"totalLines":393,"estimatedTokens":1948}}194{"id":"stack-72509865","source":"stackoverflow","questionId":72509865,"title":"Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering","tags":["javascript","reactjs","next.js","tailwind-css"],"text":"Title: Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering\nTags: javascript, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am making a website using Next.js and the above error is shown every time.\n\nDon't know what is wrong in my code.\n\n```\nconst Login = () => {\n const [userMsg, setUserMsg] = useState(\"\");\n const [email, setEmail] = useState(\"\");\n const router=useRouter();\n\n const handleOnChangeEmail = (e) => {\n e.preventDefault();\n setUserMsg(\"\");\n console.log(\"event\", e);\n const email = e.target.value;\n setEmail(email);\n };\n const handleLoginWithEmail = (e) => {\n e.preventDefault();\n if (email) {\n if (IsEmail.validate(email)){\n router.push(\"/\")\n \n }else{\n setUserMsg(\"Enter a valid email address\")\n }\n \n } else {\n //show usermssg\n setUserMsg(\"Enter an email address\");\n }\n };\n return (\n \n \n NeoVest SignIn\n \n \n NeoVest\n \n \n \n \n Sign In\n\n \n \n \n \n \n Email\n \n \n \n {userMsg}\n\n \n \n \n \n \n \n \n \n );\n};\n```\n\nAnother error shown is due to some suspense boundary causing root to switch to client side rendering :\n\nError: There was an error while hydrating. Because the error happened\noutside of a Suspense boundary, the entire root will switch to client\nrendering.\n\nI am also using Tailwind if that information is important.\n\n========================================\n\nTop Answer:\nif you have this Warning in chrome:\n\nvalidateDOMNesting(...): `` cannot appear as a child of ``\n\nYour DOM Tree is not printed in the browser correctly, one or more tags are not closed properly.\n\n========================================\n\nCode:\n```text\nconst Login = () => {\n const [userMsg, setUserMsg] = useState(\"\");\n const [email, setEmail] = useState(\"\");\n const router=useRouter();\n\n const handleOnChangeEmail = (e) => {\n e.preventDefault();\n setUserMsg(\"\");\n console.log(\"event\", e);\n const email = e.target.value;\n setEmail(email);\n };\n const handleLoginWithEmail = (e) => {\n e.preventDefault();\n if (email) {\n if (IsEmail.validate(email)){\n router.push(\"/\")\n \n }else{\n setUserMsg(\"Enter a valid email address\")\n }\n \n } else {\n //show usermssg\n setUserMsg(\"Enter an email address\");\n }\n };\n return (\n <div className=\"bg-[url('/static/bglg.jpg')] flex items-stretch flex-col h-screen w-full\">\n <head>\n <title>NeoVest SignIn</title>\n </head>\n <header className=\"text-4xl px-10 py-2 font-black\">\n <span className=\"text-indigo-700\">NeoVest</span>\n </header>\n <div className=\"w-full max-w-xs m-auto bg-[#C9C9C9] rounded p-5 bg-opacity-50 border-gray-200\">\n <header>\n <div className=\"text-indigo-700 font-black text-3xl py-2\">\n <p>Sign In</p>\n </div>\n </header>\n <form className=\"py-5\">\n <div>\n <label className=\"block mb-2 text-indigo-500\" for=\"username\">\n Email\n </label>\n <input\n className=\"w-full p-2 mb-6 text-indigo-700 border-b-2 border-indigo-500 outline-none focus:bg-gray-300\"\n type=\"text\"\n name=\"username\"\n placeholder=\"Email Address\"\n onChange={handleOnChangeEmail}\n />\n <div className=\"block mb-2 text-red-700\">\n <p>{userMsg}</p>\n </div>\n </div>\n <div>\n <input\n className=\"w-full bg-indigo-700 hover:bg-pink-700 text-white font-bold py-2 px-4 mb-6 rounded\"\n type=\"button\"\n value=\"Submit\"\n onClick={handleLoginWithEmail}\n />\n </div>\n </form>\n </div>\n </div>\n );\n};\n```\n\n```text\nWarning: validateDOMNesting(...): <head> cannot appear as a child of <div>\n```\n\n```text\n<head>\n <title>NeoVest SignIn</title>\n</head>\n```\n\n```text\nimport Head from \"next/head\"\n\n<Head>\n <title>NeoVest SignIn</title>\n</Head>\n```\n\n```text\nreactStrictMode: true,\ncompiler: {\n styledComponents: true,\n},\n```\n\n```text\n{\n \"presets\": [\"next/babel\"],\n \"plugins\": [\"styled-components\"]\n}\n```\n\n```text\n<!-- wrong -->\n<p>\n <ul></ul>\n</p>\n\n<!-- right -->\n<p></p>\n <ul></ul>\n<p></p>\n\n<!-- or right -->\n<div>\n <ul></ul>\n</div>\n```\n\n```text\n<!-- WRONG WAY THAT I WAS DID -->\nconst Works = () => {\n const items = [\n {\n id: 1,\n name: 'any name',\n src: 'srcpath'\n },\n {\n id: 2,\n name: 'any name 2',\n src: 'srcpath'\n },\n {\n id: 3,\n name: 'any name 3',\n src: 'srcpath'\n },\n];\n\nreturn(\n items.map((item, index) => {\n return(\n <div key={index}>{item.name}</div>\n )\n }\n)\n});\n\n<!-- RIGHT WAY THAT I FIXED -->\nconst Works = () => {\n const [ item, setItem ] = React.useState();\n React.useEffect(() => {\n setItem([\n {\n id: 1,\n name: 'any name',\n src: 'srcpath'\n },\n {\n id: 2,\n name: 'any name 2',\n src: 'srcpath'\n },\n {\n id: 3,\n name: 'any name 3',\n src: 'srcpath'\n },\n ]);\n }, []);\n \nif(item)\nreturn(\n items.map((item, index) => {\n return(\n <div key={index}>{item.name}</div>\n )\n }\n)\n});\n```\n\n```text\nstyled-components\n```\n\n```text\nnext.config.js\n```\n\n```text\n.babelrc\n```\n\n```text\nconst items\n```\n\n```text\nuseState\n```\n\n```text\nconst AllNames = [\"Ali\", \"Elisa\", \"Bella\", \"Carmen\"];\n\nexport default function ModernNames(){\n const [randomNames, setRandomNames] = useState([]);\n\n useEffect(() => {\n const randomUniqueNames = Array.from({ length: 4 })\n .map((_, index) => {\n let randomIndex = Math.floor(Math.random() * AllNames.length);\n let name = AllNames[randomIndex];\n return { name };\n });\n\n setRandomNames(randomUniqueNames);\n }, []);\n \n return (\n <div>\n <h1>ModernNames</h1>\n { randomNames.map((name, index) => (\n <p key={index}>{name.name}</p>\n ))}\n </div>\n );\n}\n```\n\n```text\nuseEffect\n```\n\n```text\n<head>\n```\n\n```text\n<div>\n```\n\n```text\n<html lang=\"en\">\n <Header /> //Header outside of the body\n <body className={inter.className}>\n {children}\n </body>\n <Footer/> //Footer outside of the body\n</html>\n```\n\n```text\n<html lang=\"en\">\n <body className={inter.className}>\n <Header />\n {children}\n <Footer/>\n </body>\n \n</html>\n```\n\n```text\n{childern}\n```\n\n```text\n<body>\n```\n\n```text\n<Header>\n```\n\n```text\n<Footer>\n```\n\n```text\nfunction LoginPage() {\n return (\n <div>\n <h1>Login page</h1>\n </div>\n );\n}\n\nexport default LoginPage;\n```\n\n```text\nfunction LoginPage() {\n return (\n <main>\n <h1>Login page</h1>\n </main>\n );\n}\n\nexport default LoginPage;\n```\n\n```text\ndiv\n```\n\n```text\nmain\n```\n\n```js\n///Libraries -->\nimport dynamic from \"next/dynamic\";\nconst Testimony = dynamic(() => import(\"@/components/testimony/Testimony\"), { ssr: false })\n\n/**\n * @title Homepage\n */\nexport default function Home() {\n return (\n <main>\n <Testimony />\n </main>\n )\n}\n```\n\n========================================\n\nComments:\n- Are you certain this is the component triggering the error? This code by itself doesn't seem to have anything that would cause the hydration error.\n- @juliomalves the error is only being shown on this page so idk what else could be a problem. If you have any idea ill look at that file. My project is based on \"npx create-next-app\"\n- Also e.preventDefault() is also not helping prevent reloading on enter\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- Thanks, worked just fine my error was because I put inside\n- That was exactly my case too. This happened to me after I upgraded next.js from major version 12 to 13. You can use nextjs codemods to do this automagically. Reference. nextjs.org/docs/advanced-features/codemods#new-link\n- Thanks a lot, In my case I was wrapping the body in the of redux, by keeping within body the issue has been resolved.\n- @codeoholic I'm using framer-motion's motion wrapping my section for animation, that section does happen to have form. How do I work around this problem without having to change my requirement?\n- In my case I was using shadcn's toaster in the `nextjs` application with `` tag. using it within the `` tag will solve the issue.\n- Why is the first way wrong? If the data is static, I don't understand what the problem would be.\n- Because you do not can put ul inside p. It's not good practice. And in the React gives trouble\n- Yup, look for improperly closed tags generated by React components. and are likely culprits. Should be top answer","metadata":{"transformedAt":"2026-08-18T18:33:42.897Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":28,"totalLines":440,"estimatedTokens":2235}}195{"id":"stack-60854215","source":"stackoverflow","questionId":60854215,"title":"How to use local font family with TailwindCSS","tags":["javascript","html","css","tailwind-css"],"text":"Title: How to use local font family with TailwindCSS\nTags: javascript, html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nCurrently I'm doing this in my style tags\n\n```\n@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');\n \n* {\n font-family: 'Roboto', sans-serif;\n}\n```\n\nbut I downloaded the Roboto font and would like to know how I can configure Tailwind to use those files and the font globally for all elements.\n\n**Sidenote:**\n\nI'm using Vuejs and followed the guide on how to setup Tailwind for Vue from here\n\nhttps://www.youtube.com/watch?v=xJcvpuELcZo\n\n========================================\n\nTop Answer:\n@Juan Marcos' answer is correct but slightly deprecated. As of v2.1.0, Tailwind recommends in their docs to use the `@layer` directive for loading local fonts:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n @font-face {\n font-family: Proxima Nova;\n font-weight: 400;\n src: url(/fonts/proxima-nova/400-regular.woff) format(\"woff\");\n }\n @font-face {\n font-family: Proxima Nova;\n font-weight: 500;\n src: url(/fonts/proxima-nova/500-medium.woff) format(\"woff\");\n }\n}\n```\n\nBy using the @layer directive, Tailwind will automatically move those styles to the same place as @tailwind base to avoid unintended specificity issues.\n\nUsing the @layer directive will also instruct Tailwind to consider those styles for purging when purging the base layer. Read our documentation on optimizing for production for more details.\n\nSee: https://tailwindcss.com/docs/functions-and-directives#layer\n\nSee also: Customizing the default font\n\n========================================\n\nCode:\n```css\n@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');\n \n* {\n font-family: 'Roboto', sans-serif;\n}\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n fontFamily: {\n 'sans': ['Roboto', 'Helvetica', 'Arial', 'sans-serif']\n }\n },\n },\n variants: {},\n plugins: []\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n\n@font-face {\n font-family: 'Roboto';\n src: local('Roboto'), url(./fonts/Roboto-Regular.ttf) format('ttf');\n}\n\n@tailwind utilities;\n```\n\n```text\npostcss css/tailwind.css -o public/tailwind.css\n```\n\n```text\nnpx tailwindcss build css/tailwind.css -o public/tailwind.css\n```\n\n```text\nnpm install tailwindcss\n```\n\n```text\nfonts\n```\n\n```text\nnpx tailwind init\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nfontFamily\n```\n\n```text\nextend\n```\n\n```text\nsans\n```\n\n```text\nextend\n```\n\n```text\ntailwind.css\n```\n\n```text\n<link rel=\"stylesheet\" href=\"{{ url_for('static', filename='gameStyles.css') }}\"/>\n<link rel=\"stylesheet\" href=\"{{ url_for('static', filename='styles2.css') }}\"/>\n```\n\n```text\n@font-face {\n font-family: 'reg';\n src: url(../static/ObjectSans-Regular.otf);\n}\n\n@font-face {\n font-family: 'bol';\n src: url(../static/ObjectSans-Heavy.otf);\n}\n\nbody {\n font-family: 'reg';\n}\n\nh1 {\n font-family: 'bol';\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n @font-face {\n font-family: Proxima Nova;\n font-weight: 400;\n src: url(/fonts/proxima-nova/400-regular.woff) format(\"woff\");\n }\n @font-face {\n font-family: Proxima Nova;\n font-weight: 500;\n src: url(/fonts/proxima-nova/500-medium.woff) format(\"woff\");\n }\n}\n```\n\n```text\n@layer\n```\n\n```text\ntheme: {\n fontFamily: {\n sans: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],\n serif: ['Merriweather', 'serif'],\n },\n```\n\n```text\n@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500&display=swap');\n```\n\n```text\n@font-face {\nfont-family: Oswald;\nsrc: url(/dist/fonts/Oswald/Oswald-Bold.ttf) format(\"truetype\") or ttf;\n```\n\n```text\ntheme: {\nextend: {\nfontFamily: {\nheadline: ['Oswald']\n}\n},\n```\n\n```html\n<link href=\"https://fonts.googleapis.com/css2?family=Raleway&display=swap\" rel=\"stylesheet\">\n```\n\n```js\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n purge: [],\n theme: {\n extend: {\n fontFamily: {\n sans: ['Raleway', ...defaultTheme.fontFamily.sans],\n },\n },\n },\n variants: {},\n plugins: [],\n}\n```\n\n```text\nfonts.googleapis.com\n```\n\n```text\nindex.html\n```\n\n```text\n@import\n```\n\n```text\n@font-face\n```\n\n```text\nsans\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n// tailwind.config.js\nconst plugin = require('tailwindcss/plugin');\nconst defaultTheme = require('tailwindcss/defaultTheme');\n\nmodule.exports = {\n purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n fontFamily: {\n 'sans': ['Red Hat Display', ...defaultTheme.fontFamily.sans],\n 'damion': ['Damion'],\n }\n }\n },\n variants: {\n extend: {},\n },\n plugins: [\n plugin(function ({ addBase }) {\n addBase({\n '@font-face': {\n fontFamily: 'Red Hat Display',\n fontWeight: '300',\n src: 'url(/src/common/assets/fonts/RedHatDisplay-VariableFont_wght.ttf)'\n }\n })\n }),\n plugin(function ({ addBase }) {\n addBase({\n '@font-face': {\n fontFamily: 'Damion',\n fontWeight: '400',\n src: 'url(https://fonts.gstatic.com/s/damion/v10/hv-XlzJ3KEUe_YZkamw2.woff2) format(\\'woff2\\')'\n }\n })\n }),\n ],\n}\n```\n\n```text\n<link>\n```\n\n```text\n@font-face {\n font-family: 'x-font-name';\n src: local('x-font-name'), local('x-font-name'),\n url('x-font-name.woff2') format('woff2'),\n url('x-font-name.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n}\n```\n\n```text\n@import url('./assets/fonts/stylesheet.css');\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\ntheme: {\n extend: {\n fontFamily: {\n 'FontName': ['x-font-name','Roboto'],\n 'FontName-2': ['x-name-2','Roboto']\n },\n },\n},\n```\n\n```text\n./fonts\n```\n\n```text\nclass=\"font-FontName\"\n```\n\n```css\n@font-face {\n font-family: 'YourCustomFontNameHere';\n src: url('/path/to/fonts/custom-font.ttf') format('truetype');\n font-weight: normal;\n font-style: normal;\n}\n\n@theme {\n --font-custom: 'YourCustomFontNameHere', sans-serif;\n}\n```\n\n```css\n/* Still, I'll show an example using a font that's available online. */\n@import url('https://fonts.cdnfonts.com/css/playground');\n\n/* Note: The font won't work here due to the absence of an online TTF file. */\n@font-face {\n font-family: 'RetroGamingFont';\n src: url('/fonts/RetroGaming.ttf') format('truetype');\n font-weight: normal;\n font-style: normal;\n}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@import 'tailwindcss';\n\n@theme {\n --font-retro: 'RetroGamingFont', sans-serif;\n --font-playground: 'Playground', monospace;\n --color-clifford: #da373d;\n}\n</style>\n\n<h1 class=\"font-retro text-clifford text-3xl font-bold underline\">\n Hello world with Retro!\n</h1>\n\n<h1 class=\"font-playground text-clifford text-3xl font-bold underline\">\n Hello world with Playground!\n</h1>\n```\n\n```text\n@font-face\n```\n\n```text\nfont-*\n```\n\n```text\n@theme\n```\n\n```text\n@font-face\n```\n\n```text\n@font-face\n```\n\n```text\nsrc\n```\n\n```text\nfont-family\n```\n\n========================================\n\nComments:\n- Does this answer your question? @font-face src: local - How to use the local font if the user already has it?\n- Thanks for your reply, unfortunately this didn't help :/ I don't know if things are different when using VueJs..\n- Answer for TailwindCSS v4: stackoverflow.com/a/79842832/15167500\n- hey thanks for your reply. I think your solution seems to be the cleanest one. I'm using VueJs and installed tailwind via npm as described here youtube.com/watch?v=xJcvpuELcZo for the last part you described I think I have to navigate to the css directory and use this command then `npx tailwindcss build main.css -o main.css` but this generates a huge css file and seems to be a production only file ...\n- The CSS generated will be pretty huge because it includes all of Tailwind's utility classes. If you're looking to generate a leaner build check out the screencast \"optimizing for production\"\n- thanks but I'm not sure if I should call `npx tailwindcss build main.css -o main.css` in the src directory when developing with a frontend framework like Vue, Angular or React. Is that correct?\n- Correct, you would want to use the scripts that come with the specific framework to build a optimized version of your project.\n- king of the north\n- as of Tailwind 2.1.0 use the `@layer` directive to include your fonts. See my answer below.\n- For what it's worth, for me, I needed to change the format from 'ttf' to 'truetype' to make it work using this answer.\n- stackoverflow should show latest answers on top . thanks for this\n- for ttf font, no need to give format\n- it is still unclear to me how I then use the font\n- Use `font-style: italic` for italic\n- There is also the font-variation-settings attribute which should somehow allow to use fonts supporting \"wght\" (weight) so you only have to import one font but you can then choose your weight. Unfortunately I wasn't able to get it to work yet.\n- IDKW, but I have to provide the full path to the src as `src: url(\"assets/fonts/fontName.ttf\"`. Any idea?\n- Incase someone is interested: blog.logrocket.com/how-to-use-custom-fonts-tailwind-css","metadata":{"transformedAt":"2026-08-18T18:33:42.897Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":48,"totalLines":440,"estimatedTokens":2354}}196{"id":"stack-61308575","source":"stackoverflow","questionId":61308575,"title":"Tailwind h-screen doesn’t work properly on mobile devices","tags":["html","css","tailwind-css"],"text":"Title: Tailwind h-screen doesn’t work properly on mobile devices\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThe `h-screen` class which should set the height as the height of the screen doesn’t work on iOS. Is there a way to fix that?\n\n========================================\n\nTop Answer:\nOften i find useful to set a absolute wrapper outside the content with a `.inset-0` class\n\n```\n\n \n lorem ipsum\n \n\n```\n\n========================================\n\nCode:\n```text\nh-screen\n```\n\n```text\nh-dvh\n```\n\n```text\nh-screen\n```\n\n```text\nh-dvh\n```\n\n```text\nh-svh\n```\n\n```text\nh-lvh\n```\n\n```text\nh-[calc(100dvh)]\n```\n\n```text\nh-screen\n```\n\n```text\n100vh\n```\n\n```text\n<!-- this will use the whole viewport even in mobile -->\n<div class=\"absolute inset-0\">\n <div>\n lorem ipsum\n </div>\n</div>\n```\n\n```text\n.inset-0\n```\n\n```text\n.h-screen {\n height: 100vh; /* Fallback for browsers that do not support Custom Properties */\n height: calc(var(--vh, 1vh) * 100);\n}\n```\n\n```text\ndocument.documentElement.style.setProperty(\"--vh\", window.innerHeight * 0.01 + 'px');\n```\n\n```text\n@supports (-webkit-touch-callout: none) {\n .h-screen {\n height: -webkit-fill-available;\n }\n}\n```\n\n```text\nh-[100svh]\n```\n\n```text\nh-screen\n```\n\n```html\n<div class=\"h-[100vh]\">\n <div class=\"h-[100svh]\">\n Bessie the cow\n </div>\n</div>\n```\n\n```text\nh-dvh\n```\n\n```text\nh-dvh\n```\n\n```text\nh-lvh\n```\n\n```text\nh-lvh\n```\n\n```text\n100vh\n```\n\n```text\nh-svh\n```\n\n```text\nh-svh\n```\n\n========================================\n\nComments:\n- But what browser on iOS? What version of system, what device? Also it would be good idea to provide some fiddle to tests\n- @chojnicki I noticed it on my iPad Pro and iPhone both on safari with the latest iOS/iPadOS. But it appears to affect all mobile devices, check my answer :)\n- Since 2023, dynamic values have become part of the default template. See: @PJRobot's answer and tailwindcss PR #11317.\n- See: Tailwind CSS fallback for new screen length types such as \"lvh\", \"svh\"\n- This fixed my issue with `h-screen` where content was extending below the navigation bar in Samsung Internet on Android. Now it only fills the space visible above the navbar :)\n- This worked just fine. Chrome, iOS!\n- You are a lifesaver bro goodjob.\n- You have no idea how happy I am! All the other solutions I've seen involved confusing javascript and media queries. Thanks!\n- This solution has some very weird side effects because it requires the dev to make the position of the element absolute. So no, this is not a very good solution I don't think, and I would avoid using it unless you know every potential side-effect that might occur by using it (in addition to every potential side-effect that might occur as code gets added and the apps scales up) As terrible as it sounds, you're probably going to avoid trouble in the long run by avoiding the use of absolutely positioned elements and instead setting the height using javascript instead of css.\n- Hi @JohnMiller Absolute elements could have a relative child and it will negate all the sideeffects that you name.\n- @NEOJPK No, it won't. Also, I think you mean relative parent, not relative child.\n- here @JohnMiller learn something play.tailwindcss.com/umHIAf59aA pd: if im saying relative child its because i know what im talking about you dont get to correct me. Bye\n- Either this doesn't work, or I am doing something wrong. What I did was basically wrap my content with the div shown.\n- This should work however the question is asking about tailwind.\n- That is the answer!\n- Exactly what I was thinking to do here. Agree with Bohne, that's that correct answer. The upvoted answer with that absolute weird wrapper container is just a hack.\n- I also found stackoverflow.com/a/72245072/470749 I still haven't found any answer that works consistently across desktop, Pixel 6, Galaxy Tab S6 in landscape mode, iPad in landscape mode.\n- @Ryan Curious as to whether adding `100vh` as a fallback would work.\n- This is what I'm trying: stackoverflow.com/a/75081266/470749 But I haven't gotten my hands on an iPhone or iPad to test it yet. It seems good on desktop, Pixel 6, Galaxy Tab S6.\n- Tailwind now as `h-dvh` which achieves the same\n- Since 2023, dynamic values have become part of the default template. See: @PJRobot's answer and tailwindcss PR #11317.\n- See: Tailwind CSS fallback for new screen length types such as \"lvh\", \"svh\"\n- tailwindcss PR #11317","metadata":{"transformedAt":"2026-08-18T18:33:42.897Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":24,"totalLines":161,"estimatedTokens":1109}}197{"id":"stack-66556514","source":"stackoverflow","questionId":66556514,"title":"Tailwind grid_template_columns","tags":["tailwind-css"],"text":"Title: Tailwind grid_template_columns\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow can we set individual column width in Tailwind?\n\nFor example in vanilla CSS I would\n\n```\n.grid-container {\n display: grid;\n grid-template-columns: 20% 80%;\n}\n```\n\n```\n\n 1\n 2\n\n```\n\nBut, in Tailwind if you apply width to the columns, it breaks the grid.\n\n========================================\n\nTop Answer:\nThere is a way to set arbitrary values for columns, I know this question is old but I thought I would . I'm new to tailwinds myself but I thought maybe someone else might find this helpful:\n\n```\n\n```\n\nThis method also works for setting fixed widths:\n\n```\n\n```\n\nIn this example the first column will have a fixed width of 200px and the other column would size in auto.\n\n========================================\n\nCode:\n```css\n.grid-container {\n display: grid;\n grid-template-columns: 20% 80%;\n}\n```\n\n```html\n<div class=\"grid-container\">\n <div class=\"item1\">1</div>\n <div class=\"item2\">2</div>\n</div>\n```\n\n```html\n<div class=\"grid-container grid grid-cols-5\">\n <div class=\"item1 col-span-1\">1</div>\n <div class=\"item2 col-span-4\">2</div>\n</div>\n```\n\n```html\n<div class=\"grid grid-cols-10\">\n <div class=\"col-span-2 bg-purple-200\">1</div>\n <div class=\"col-span-8 bg-purple-300\">2</div>\n</div>\n```\n\n```html\n<div class=\"flex\">\n <div class=\"bg-indigo-200 w-1/5\">1</div>\n <div class=\"bg-indigo-300 w-4/5\">2</div>\n</div>\n```\n\n```text\n<style jsx>\n```\n\n```html\n<div class=\"grid grid-cols-6 gap-4\">\n <div class=\"col-start-2 col-span-4\">01</div>\n <div class=\"col-start-1 col-end-3\">02</div>\n</div>\n```\n\n```html\n<div class=\"grid grid-cols-[20%_80%]\">\n```\n\n```html\n<div class=\"grid grid-cols-[200px_auto]\">\n```\n\n```text\ngrid-cols-[20%,80%]\n```\n\n```text\ngrid-cols-[1fr,1.4fr]\n```\n\n========================================\n\nComments:\n- Custom grids using the JIT compiler is a use case explicitly called out in the docs: tailwindcss.com/docs/just-in-time-mode#arbitrary-value-suppo‌​rt `html `\n- @Charlotte Wells this should be the accepted answer as the accepted one is a mental model workaround.","metadata":{"transformedAt":"2026-08-18T18:33:42.897Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":112,"estimatedTokens":527}}198{"id":"stack-65241794","source":"stackoverflow","questionId":65241794,"title":"how can I achieve text color of rgba(0, 0, 0, 0.54) tailwind css?","tags":["tailwind-css"],"text":"Title: how can I achieve text color of rgba(0, 0, 0, 0.54) tailwind css?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nhow can I achieve text color of rgba(0, 0, 0, 0.54) tailwind css.\nI have tried text-black-500, text-current and many other variations but couldn't achieve color of rgba(0, 0, 0, 0.54).\n\n========================================\n\nTop Answer:\nYou need to define a custom color class on `tailwind.config.js`\n\n```\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n 'black-rgba': 'rgba(0, 0, 0, 0.54)',\n },\n },\n },\n variants: {},\n plugins: [],\n}\n```\n\nHTML:\n\n```\nHi there!\n```\n\nWorking example\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n theme: {\n extend: {\n opacity: {\n '54': '.54',\n }\n }\n }\n};\n```\n\n```text\ntext-black/50\n```\n\n```text\nrgba(0, 0, 0, 0.5)\n```\n\n```text\nrgba(0, 0, 0, 0.54)\n```\n\n```text\ntext-black/[.54]\n```\n\n```text\ntailwind.config.js file\n```\n\n```text\ntext-black/54\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n 'black-rgba': 'rgba(0, 0, 0, 0.54)',\n },\n },\n },\n variants: {},\n plugins: [],\n}\n```\n\n```text\n<span class=\"text-black-rgba text-4xl\">Hi there!</span>\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntext-[rgba(0, 0, 0, 0.5)]\n```\n\n```text\ntext-black text-opacity-50\n```\n\n```text\nbg-black bg-opacity-50\n```\n\n```text\n:root {\n --secondary: #919191;\n --muted: #3c3c3c;\n}\n```\n\n```text\nconst getColorVariant = (variableName: string, separator = 5) =>\n Array.from({ length: 100 / separator + 1 })\n .map((_, idx) => idx * separator)\n .reduce(\n (pv, val) => ({\n ...pv,\n [val]: `color-mix(in srgb, var(${variableName}) ${val}%, transparent)`,\n }),\n {}\n );\n\nconst config = {\n /* All your config properties */\n\n theme: {\n extend: {\n colors: {\n /* All your other custom colors */\n\n secondary: {\n DEFAULT: \"var(--secondary)\",\n ...getColorVariant(\"--secondary\"),\n },\n muted: {\n DEFAULT: \"var(--muted)\",\n ...getColorVariant(\"--muted\"),\n },\n }\n }\n }\n}\n```\n\n========================================\n\nComments:\n- If you want to use rgba in arbitrary, you can write `text-[rgba(0,0,0,0.54)]`. Pay attention to spaces between rgba arguments, remove them, otherwise it will not work.\n- in case anyone reaches here `bg-[rgba(0,255,0,0.54)]` will also work for background.","metadata":{"transformedAt":"2026-08-18T18:33:42.897Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":154,"estimatedTokens":607}}199{"id":"stack-53497656","source":"stackoverflow","questionId":53497656,"title":"Tailwind: text-overflow: ellipsis?","tags":["css","overflow","tailwind-css"],"text":"Title: Tailwind: text-overflow: ellipsis?\nTags: css, overflow, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIs there a way to use \n\n```\ntext-overflow: ellipsis\n```\n\nThought the Tailwind CSS Framework \n\nI would like to use the tailwind convention like :\n\n```\n&__title {\n @apply text-overflow-ellipsis;\n}\n```\n\nInstead of \n\n```\n&__title {\n text-overflow: ellipsis;\n}\n```\n\n========================================\n\nTop Answer:\nUse `truncate` class:\n\n```\nLong long long text\n```\n\nSee https://tailwindcss.com/docs/text-overflow#truncate\n\nNote that a `width` must be set for it to work, hence `w-2` class\n\n========================================\n\nCode:\n```text\ntext-overflow: ellipsis\n```\n\n```text\n&__title {\n @apply text-overflow-ellipsis;\n}\n```\n\n```text\n&__title {\n text-overflow: ellipsis;\n}\n```\n\n```text\noverflow: hidden; \nwhite-space: nowrap;\n```\n\n```text\n&__title {\n @apply truncate;\n}\n```\n\n```text\ntext-overflow: ellipsis;\n```\n\n```text\n.truncate\n```\n\n```text\n<div class=\"truncate w-2\">Long long long text</div>\n```\n\n```text\ntruncate\n```\n\n```text\nwidth\n```\n\n```text\nw-2\n```\n\n```text\n<div className=\"truncate w-32 text-left text-lightBlack capitalize\">display name</div>\n```\n\n```text\ntruncate\n```\n\n```css\n.ellipsis {\n @apply line-clamp-1 max-h-20 overflow-hidden text-ellipsis whitespace-break-spaces leading-relaxed [-webkit-box-orient:vertical] [display:-webkit-box];\n}\n\n.ellipsis-2 {\n @apply line-clamp-2 max-h-20 overflow-hidden text-ellipsis whitespace-break-spaces leading-relaxed [-webkit-box-orient:vertical] [display:-webkit-box];\n}\n\n.ellipsis-3 {\n @apply line-clamp-3 max-h-20 overflow-hidden text-ellipsis whitespace-break-spaces leading-relaxed [-webkit-box-orient:vertical] [display:-webkit-box];\n}\n```\n\n```html\n<p class=\"ellipsis-2\">\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Quae eaque modi quis vero nisi reprehenderit iste architecto unde. Velit neque incidunt possimus consequatur eaque hic consequuntur obcaecati nemo architecto ea.\n</p>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold mb-4\">Line Clamp Example</h2>\n <p class=\"line-clamp-2 text-gray-700\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.3.0\"></script>\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold mb-4\">Line Clamp Example</h2>\n <p class=\"line-clamp-2 text-gray-700\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n```\n\n```js\n/**\n * CDN @tailwindcss/line-clamp\n */\nconst lineClampPlugin = () => {\n const baseStyles = {\n overflow: \"hidden\", display: \"-webkit-box\", \"-webkit-box-orient\": \"vertical\"\n };\n\n const plugin = tailwind.plugin(function ({ matchUtilities, addUtilities, theme, variants }) {\n matchUtilities(\n {\n \"line-clamp\": (value) => ({ ...baseStyles, \"-webkit-line-clamp\": value.toString() })\n },\n { values: theme(\"lineClamp\") }\n );\n addUtilities(\n [\n { \".line-clamp-none\": { \"-webkit-line-clamp\": \"unset\" } }\n ],\n variants(\"lineClamp\")\n );\n }, \n {\n theme: {\n lineClamp: {1: \"1\", 2: \"2\", 3: \"3\", 4: \"4\", 5: \"5\", 6: \"6\"}\n },\n variants: {\n lineClamp: [\"responsive\"]\n }\n });\n \n return plugin;\n}\n\ntailwind.config = {\n plugins: [\n lineClampPlugin(),\n ],\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.2.7\"></script>\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold mb-4\">Line Clamp Example</h2>\n <p class=\"line-clamp-2 text-gray-700\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold mb-4\">Truncate Example</h2>\n <p class=\"truncate text-gray-700\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold mb-4\">Text Ellipsis Example</h2>\n <p class=\"overflow-hidden text-ellipsis text-gray-700\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua <span class=\"font-medium\">pneumonoultramicroscopicsilicovolcanoconiosispneumonoultramicroscopicsilicovolcanoconiosispneumonoultramicroscopicsilicovolcanoconiosis</span>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold mb-4\">Text Clip Example</h2>\n <p class=\"overflow-hidden text-clip text-gray-700\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua <span class=\"font-medium\">pneumonoultramicroscopicsilicovolcanoconiosispneumonoularamicroscopicsilicovolcanoconiosispneumonoultramicroscopicsilicovolcanoconiosis</span>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold mb-4\">Break Words Example</h2>\n <p class=\"line-clamp-4 break-words text-gray-700\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua pneumonoultramicroscopicsilicovolcanoconiosispneumonoultramicroscopicsilicovolcanoconiosispneumonoultramicroscopicsilicovolcanoconiosis. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold mb-4\">Break All Example</h2>\n <p class=\"line-clamp-4 break-all text-gray-700\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua pneumonoultramicroscopicsilicovolcanoconiosispneumonoultramicroscopicsilicovolcanoconiosispneumonoultramicroscopicsilicovolcanoconiosis. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n\n<div class=\"max-w-md mx-auto\">\n <h2 class=\"text-xl font-bold mb-4\">Without Break Example</h2>\n <p class=\"line-clamp-4 text-gray-700\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua pneumonoultramicroscopicsilicovolcanoconiosispneumonoultramicroscopicsilicovolcanoconiosispneumonoultramicroscopicsilicovolcanoconiosis. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </p>\n</div>\n```\n\n```text\nline-clamp-{number}\n```\n\n```text\ntruncate\n```\n\n```text\nline-clamp-1\n```\n\n```text\ntext-ellipsis\n```\n\n```text\ntext-clip\n```\n\n```text\nbreak-words\n```\n\n```text\nbreak-all\n```\n\n```text\nline-clamp-{number}\n```\n\n```text\nline-clamp\n```\n\n```text\nline-clamp-<number>\n```\n\n```text\noverflow: hidden;\n```\n\n```text\ndisplay: -webkit-box;\n```\n\n```text\n-webkit-box-orient: vertical;\n```\n\n```text\n-webkit-line-clamp: <number>;\n```\n\n```text\nline-clamp-none\n```\n\n```text\noverflow: visible;\n```\n\n```text\ndisplay: block;\n```\n\n```text\n-webkit-box-orient: horizontal;\n```\n\n```text\n-webkit-line-clamp: unset;\n```\n\n```text\nline-clamp\n```\n\n```text\n@tailwindcss/line-clamp\n```\n\n```text\nline-clamp\n```\n\n```text\nline-clamp\n```\n\n```text\n@tailwindcss/line-clamp\n```\n\n```text\n@tailwindcss/line-clamp\n```\n\n```text\n@tailwindcss/line-clamp\n```\n\n```text\n@tailwindcss/line-clamp\n```\n\n```text\n@tailwindcss/line-clamp\n```\n\n```text\ntruncate\n```\n\n```text\ntruncate\n```\n\n```text\nline-clamp\n```\n\n```text\ntruncate\n```\n\n```text\ntruncate\n```\n\n```text\nline-clamp\n```\n\n```text\ntruncate\n```\n\n```text\noverflow: hidden;\n```\n\n```text\ntext-overflow: ellipsis;\n```\n\n```text\nwhite-space: nowrap;\n```\n\n```text\ntext-ellipsis\n```\n\n```text\ntext-clip\n```\n\n```text\noverflow-ellipsis\n```\n\n```text\noverflow-clip\n```\n\n```text\ntext-ellipsis\n```\n\n```text\ntext-clip\n```\n\n```text\ntruncate\n```\n\n```text\noverflow-hidden\n```\n\n```text\ntext-overflow\n```\n\n```text\ntext-clip\n```\n\n```text\ntext-ellipsis\n```\n\n```text\ntext-clip\n```\n\n```text\ntext-ellipsis\n```\n\n```text\n...\n```\n\n```text\ntext-ellipsis\n```\n\n```text\ntext-overflow: ellipsis;\n```\n\n```text\ntext-clip\n```\n\n```text\ntext-overflow: clip;\n```\n\n```text\ntruncate\n```\n\n```text\nline-clamp\n```\n\n```text\nbreak-words\n```\n\n```text\nline-clamp-{2 or higher}\n```\n\n```text\nbreak-{words or all}\n```\n\n```text\nline-clamp\n```\n\n```text\nbreak-words\n```\n\n```text\nbreak-all\n```\n\n```text\nbreak-all\n```\n\n```text\nbreak-words\n```\n\n========================================\n\nComments:\n- well have you searched the docs about `text-overflow` ? as far as i know tailwind uses something like `@apply .text-transparent` for text-color. If you find something in the docs about `text-overflow` then you can use it, otherwise you are out of luck\n- Thank you for your comment, yes I already did a lot of search about the Tailwind docs but unfortunately I was unable to find any solutions\n- text-overflow: ellipsis; cannot be used alone, Along with text-overflow, you should other properties like overflow: hidden; white-space: nowrap; also. You can use .truncate class to achieve this. Here is the link from the documentation: tailwindcss.com/docs/whitespace-and-wrapping\n- `truncate` in tailwind includes `overflow-hidden` so no need to write it manually\n- It's worth mentioning that tailwindcss/line-clamp is an **official Tailwind CSS plugin**. There's a nice explainer on how to use it here.\n- As of Tailwind CSS v3.3 the line-clamp utilities are now included in the framework by default and this plugin is no longer required.","metadata":{"transformedAt":"2026-08-18T18:33:42.897Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":89,"totalLines":530,"estimatedTokens":3144}}200{"id":"stack-62347446","source":"stackoverflow","questionId":62347446,"title":"Having issues trying to center an image using tailwinds containers - invisible padding to the right of the image","tags":["css","tailwind-css"],"text":"Title: Having issues trying to center an image using tailwinds containers - invisible padding to the right of the image\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWhy is my screenshot image not centered on the screen?\n\nMy css so far is this:\n\n```\n\n \n \n \n \n```\n\nWhen I inspect the image in chrome, I can see that there is some area on the right of the image that is not part of the image but is taking up space.\n\nHere is a screenshot where you can see this invisible padding to the right of the image.\n\nAny idea what is going on as I would like to understand how I can't even center a simple image.\n\nAs a bonus, if someone can figure this out using containers, can you also show me an alternate method using flex? I tried 'flex items-center' also and that didn't work for me either.\n\nhttps://i.sstatic.net/VV5pr.png\n\n========================================\n\nCode:\n```text\n<section class=\"hero container max-w-screen-lg mx-auto text-center pb-10\">\n <div class=\"\">\n <img src=\"/images/screenshot.png\" alt=\"screenshot\" width=\"887\" height=\"550\" />\n </div>\n </section>\n```\n\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css\" rel=\"stylesheet\" />\n\n<section class=\"hero container max-w-screen-lg mx-auto pb-10\">\n <img class=\"mx-auto\" src=\"https://picsum.photos/id/1/200/300\" alt=\"screenshot\" >\n</section>\n```\n\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css\" rel=\"stylesheet\" />\n\n<section class=\"hero container max-w-screen-lg mx-auto pb-10 flex justify-center\">\n <img src=\"https://picsum.photos/id/1/200/300\" alt=\"screenshot\" >\n</section>\n```\n\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css\" rel=\"stylesheet\" />\n\n<section class=\"hero container max-w-screen-lg mx-auto pb-10 flex\">\n <img class=\"mx-auto\" src=\"https://picsum.photos/id/1/200/300\" alt=\"screenshot\" >\n</section>\n```\n\n```text\nmx-auto\n```\n\n```text\njustify-center\n```\n\n```text\nmx-auto\n```\n\n========================================\n\nComments:\n- This worked for me: grid - Add the element a 'display: grid' css property place-items-center - center value for the place-items css property\n- for flex it says '.items-center' here: tailwindcss.com/docs/align-items/#app. why?\n- @Blankman this for vertical centring or cross axis if we consider the direction (it will center horizontally only if the direction is column). For the main axis it's justify-content (you will find it below in the Doc)\n- Some hero's don't wear capes","metadata":{"transformedAt":"2026-08-18T18:33:42.897Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":81,"estimatedTokens":638}}201{"id":"stack-65322933","source":"stackoverflow","questionId":65322933,"title":"Tailwind css, how to set default font color?","tags":["javascript","css","tailwind-css"],"text":"Title: Tailwind css, how to set default font color?\nTags: javascript, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using tailwind css in my project, due to our application styles we are using a default font color, however I cannot seem to find how to do this in tailwind, the documentation page only talks about extending the color palette, but not how to set a default color.\n\nAny ideas on how to achieve this?\n\n========================================\n\nTop Answer:\nThere is few options, you can add class to the `` or `` tag:\n\n```\n\n \n \n\n```\n\nor you can just extend base layer in your `index.css` file:\n\n```\n@tailwind base;\n\n@layer base {\n html {\n @apply text-green-500;\n } \n}\n\n@tailwind components;\n@tailwind utilities;\n```\n\nLet's check a Tailwind play example\n\n========================================\n\nCode:\n```css\nhtml {\n @apply text-gray-800\n}\n```\n\n```text\n<body class=\"text-gray-800\"></body>\n```\n\n```html\n<!doctype html>\n<html lang=\"en\">\n <body class=\"text-green-500\">\n </body>\n</html>\n```\n\n```css\n@tailwind base;\n\n@layer base {\n html {\n @apply text-green-500;\n } \n}\n\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n<body>\n```\n\n```text\n<html>\n```\n\n```text\nindex.css\n```\n\n```js\nconst plugin = require('tailwindcss/plugin');\n\nmodule.exports = {\n // ...\n plugins: [\n plugin(({addBase, theme}) => {\n addBase({\n // or whichever color you'd like\n 'html': {color: theme('colors.slate.800')},\n });\n })\n ],\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```css\n@layer base {\n :root {\n --foreground: 202 60% 24%;\n }\n}\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n foreground: \"hsl(var(--foreground))\",\n }\n }\n }\n}\n```\n\n```text\nindex.css\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nlayout.tsx\n```\n\n```text\ndark\n```\n\n```text\n<html lang=\"en\" className=\"dark\">\n```\n\n========================================\n\nComments:\n- See: Adding Base Styles in the docs.\n- oh wow, this is not a configurable property on the tailwind.config.js file?\n- You can also specify theme defaults in the configuration file, and access those in your CSS using `theme()`.\n- In the base layer?\n- I didn't bother to understand what the tailwind layers do, you are possibly right, I just wanted to get it working\n- @layer. Doesn't really matter here, since it's not a class, but you can't go wrong by wrapping in it a base layer.\n- Part two is my preferred solution\n- I like to create a custom color in my theme (tailwind.config.js), and use that in `@apply text-fg`","metadata":{"transformedAt":"2026-08-18T18:33:42.897Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":155,"estimatedTokens":633}}202{"id":"stack-65903737","source":"stackoverflow","questionId":65903737,"title":"Configure .container max-width at specific breakpoints - Tailwindcss","tags":["html","css","tailwind-css"],"text":"Title: Configure .container max-width at specific breakpoints - Tailwindcss\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nPlease how can I configure tailwind `.container` `max-width` at various breakpoints.\n\nTailwind sets the `max-width` of the `.container` equal to the width of the breakpoint by default.\n\nI want to set it to a custom value (a little bit less)\n\nPlease how can I do this?\n\n========================================\n\nTop Answer:\nAlso you can define a tailwind plugin, in this way:\n\n```\nmodule.exports = {\n corePlugins: {\n container: false\n },\n plugins: [\n function ({ addComponents }) {\n addComponents({\n '.container': {\n maxWidth: '100%',\n '@screen sm': {\n maxWidth: '640px',\n },\n '@screen md': {\n maxWidth: '768px',\n },\n '@screen lg': {\n maxWidth: '1280px',\n },\n '@screen xl': {\n maxWidth: '1400px',\n },\n }\n })\n }\n ]\n}\n```\n\nresource: https://stefvanlooveren.me/blog/custom-container-width-tailwind-css\n\n========================================\n\nCode:\n```text\n.container\n```\n\n```text\nmax-width\n```\n\n```text\nmax-width\n```\n\n```text\n.container\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n mode: 'jit',\n theme: {\n container: {\n // you can configure the container to be centered\n center: true,\n\n // or have default horizontal padding\n padding: '1rem',\n\n // default breakpoints but with 40px removed\n screens: {\n sm: '600px',\n md: '728px',\n lg: '984px',\n xl: '1240px',\n '2xl': '1496px',\n },\n },\n },\n variants: {},\n plugins: [],\n}\n```\n\n```text\ncontainer.screens\n```\n\n```text\nscreens\n```\n\n```text\n// tailwind.config.js\n module.exports = {\n corePlugins: {\n // ...\n container: false,\n }\n }\n```\n\n```js\nmodule.exports = {\n corePlugins: {\n container: false\n },\n plugins: [\n function ({ addComponents }) {\n addComponents({\n '.container': {\n maxWidth: '100%',\n '@screen sm': {\n maxWidth: '640px',\n },\n '@screen md': {\n maxWidth: '768px',\n },\n '@screen lg': {\n maxWidth: '1280px',\n },\n '@screen xl': {\n maxWidth: '1400px',\n },\n }\n })\n }\n ]\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n .container {\n @apply minsm:max-w-[640px] minmd:max-w-[768px] minlg:max-w-[1024px] minxl:max-w-[1280px] min2xl:max-w-[1536px];\n }\n}\n```\n\n```text\ntheme: {\n screens: {\n '2xl': { max: '1535px' },\n xl: { max: '1279px' },\n lg: { max: '1023px' },\n md: { max: '767px' },\n sm: { max: '639px' },\n\n minsm: { min: '640px' },\n minmd: { min: '768px' },\n minlg: { min: '1024px' },\n minxl: { min: '1280px' },\n min2xl: { min: '1536px' },\n },\n}\n```\n\n```text\n@layer components{\n .container {\n @apply max-w-7xl px-4 self-center;\n }\n}\n```\n\n```text\nsrc/style.css\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n @font-face {\n font-family: \"BYekan\";\n src: url(\"../font/BYekan.ttf\");\n }\n\n html {\n @apply font-BYekan;\n }\n\n .container {\n @apply max-w-6xl;\n }\n}\n```\n\n```text\n<div class=\"container max-w-full\"> Hello I'm a container </div>\n```\n\n```text\ntheme: {\n screens: {\n sm: '480px',\n md: '768px',\n lg: '976px',\n xl: '1440px',\n },\n```\n\n```text\nmodule.exports = {\n theme: {\n container: {\n maxWidth: {\n sm: '[yourValue]px',\n md: '[yourValue]px',\n lg: '[yourValue]px',\n xl: '[yourValue]px',\n '2xl': '[yourValue]px',\n },\n },\n }\n};\n```\n\n========================================\n\nComments:\n- This GitHub issue should probably answer your question github.com/tailwindlabs/tailwindcss/issues/…\n- I changed my mind about this being THE right solution. Adding new screens sizes actually ADDS a second screen sizes to the container. So the container has the basic tailwind screen size breakpoint PLUS the new breakpoints we have added.\n- Agreed, don't use this method - you'll have a bad time.\n- Beware that `1496px` makes the MBP4 `1514 x 839` to be considered `2xl` and thus makes it use the wider container (the opposite of what we're looking for). `1515px` is a better breakpoint for it.\n- This might be the least attractive way to do it, BUT it works like intended. The other answer about changing the `screens` inside the `.container` is actually adding a new unwanted breakpoint so thank you for this one\n- It's amazing how much confusion Tailwind introduces for something so rudimentary as custom container sizing.\n- Great ! Do you actually have to disable container in corePlugins? It seems to naturally override the max widths, and you still have access to set the center & padding properties in the container object in theme.","metadata":{"transformedAt":"2026-08-18T18:33:42.897Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":245,"estimatedTokens":1217}}203{"id":"stack-73524088","source":"stackoverflow","questionId":73524088,"title":"Is there a way to chain multiple tailwind css classes on a single hover instance?","tags":["css","tailwind-css"],"text":"Title: Is there a way to chain multiple tailwind css classes on a single hover instance?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI was wondering if there is a way to chain multiple tailwind css classes on a single hover instance on an html element instead of using multiple hover instances.\n\nFor instance instead of this\n\n```\n\n```\n\nwhether you can have this or something else\n\n```\n\n```\n\n========================================\n\nTop Answer:\nUnfortunately, we can't do variant grouping in tailwind CSS.\nSo to answer your question, As of now, there is no way to chain multiple tailwind classes on a single hover or any other pseudo-classes instance. The reason behind it is, it creates performance issues at the end.\n\nAccording to Adam Wathan, the creator of TailwindCSS:\n\n*Although the grouped syntax looks* like less code when you're authoring it, it actually creates both a bigger CSS file *and* a bigger HTML file in production, making it a very black-and-white performance anti-pattern.\nIt's nicer to write though, and the performance cost isn't a huge one, so still a chance we develop it further just for the developer experience for the people who like it. But admittedly hesitant to encourage anything that's bad for performance.\n\nAlternatively, We can use different strategies for reusing styles in our project which is described in the tailwind documentaion which is also mentioned earlier by @amunim.\n\n**Please read the whole tweet and form for more details:**\nhttps://twitter.com/adamwathan/status/1461519820411789314\nhttps://github.com/tailwindlabs/tailwindcss/discussions/8337\n\n========================================\n\nCode:\n```text\n<button class=\"hover:bg-blue-900 hover:text-white\"></button>\n```\n\n```text\n<button class=\"hover:bg-blue-900:text-white\"></button>\n```\n\n```html\n<Link to='/home'>\n <div className=\"p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:(bg-green-600 text-gray-50)\">\n <span className=\"text-[15px] ml-4 text-gray-500 font-bold\">Home</span>\n </div>\n</Link>\n```\n\n```html\n<Link to='/home' className='group'>\n <div className=\"p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer group-hover:bg-green-600\" >\n <span className=\"text-[15px] ml-4 text-gray-500 group-hover:text-gray-50 font-bold\">Home</span>\n </div>\n</Link>\n```\n\n```text\nhover:(text-white bg-red-500)\n```\n\n```text\n<button class=\"hover:scale-105 hover:bg-blue-500\">click me</button>\n```\n\n```js\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n```\n\n```js\nconst [isHovered, setIsHovered] = useState(false);\n\n<h1\n className={cn('text-3xl', {\n 'text-red': isHovered,\n })}\n onMouseOver={() => setIsHovered(true)}\n onMouseOut={() => setIsHovered(false)}\n>\n Lame headline\n</h1>\n```\n\n========================================\n\nComments:\n- There isn't any proper way to do it.\n- I'm good with CSS and I decided to start learning Tailwind, I'm asking the same question and found no solutions... and this is just a turn-off for me! it transcends the purpose of this framework of writing less CSS. I think I'm gonna stick to vanilla CSS or learn SASS\n- If you're familiar with Styled Components or Emotion, check out Twin.Macro. It's able to group classes on variants with some extended syntax they've added to improve Tailwind.\n- Nice comment, what's funny is they are so adamant about not defining your own CSS classes because \"naming is hard and wastes time\" and then on this page (just below of what you sent), their solution is to have different names that you have to supply!\n- +1 to Twin.Macro. We use it on a fairly large React project with Styled Components and haven't looked back. Being able to mix CSS-in-JS features with Tailwind is the best of both worlds, highly recommend!\n- Thanks for the quote! Good to know a reason for this seemingly crazy choice. I hope they can make this work in the future though... tailwinds biggest weakness, ugly html and unreadable complex styles, would be much more improved by grouping pseudos.\n- So, this doesn't make much sense to me since I think a short format can be easily converted to the long (existing) one in a pre-processing step, which happens anyways with tailwind/postcss. Is there a reason they can't do that?","metadata":{"transformedAt":"2026-08-18T18:33:42.897Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":104,"estimatedTokens":1089}}204{"id":"stack-70203473","source":"stackoverflow","questionId":70203473,"title":"Creating a horizontal rule (HR) divider that contains text with Tailwind CSS","tags":["html","css","tailwind-css"],"text":"Title: Creating a horizontal rule (HR) divider that contains text with Tailwind CSS\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to create a `` divider using Tailwind CSS, but instead of the horizontal rule spanning the entire width of the page unbroken, I want to add some text in the middle.\n\nFor example:\n\n```\n----------------------------------- Continue -----------------------------\n```\n\nhttps://i.sstatic.net/4kDRd.png\n\nI can't find anything like this in the documentation. How can I achieve this effect?\n\nIf necessary, I can change the HTML to something other than an `` element. That was just the only way I knew how to create a horizontal rule.\n\n========================================\n\nTop Answer:\nTry this instead...\n\nhttps://i.sstatic.net/FgZ1d.png\n\n\r\n\r\n\n```\n\n \n \n \n \n Continue\n \n\n```\n\n\r\n\r\n\r\n\n**Example**\n\nhttps://play.tailwindcss.com/Yx4OmAlBsv\n\n========================================\n\nCode:\n```none\n----------------------------------- Continue -----------------------------\n```\n\n```text\n<hr>\n```\n\n```text\n<hr>\n```\n\n```text\n<div class=\"relative flex py-5 items-center\">\n <div class=\"flex-grow border-t border-gray-400\"></div>\n <span class=\"flex-shrink mx-4 text-gray-400\">Content</span>\n <div class=\"flex-grow border-t border-gray-400\"></div>\n</div>\n```\n\n```html\n<div class=\"relative flex py-5 items-center\">\n <div class=\"flex-grow border-t border-gray-400\"></div>\n <span class=\"flex-shrink mx-4 text-gray-400\">Content</span>\n <div class=\"flex-grow border-t border-gray-400\"></div>\n</div>\n\n<script src=\"https://cdn.tailwindcss.com\"></script>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"relative py-4\">\n <div class=\"absolute inset-0 flex items-center\">\n <div class=\"w-full border-b border-gray-300\"></div>\n </div>\n <div class=\"relative flex justify-center\">\n <span class=\"bg-white px-4 text-sm text-gray-500\">Continue</span>\n </div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<h1 class=\"text-center overflow-hidden before:h-[1px] after:h-[1px] after:bg-black \n after:inline-block after:relative after:align-middle after:w-1/4 \n before:bg-black before:inline-block before:relative before:align-middle \n before:w-1/4 before:right-2 after:left-2 text-xl p-4\">Heading\n</h1>\n```\n\n```html\n<div class=\"h-5 border-b-4 border-black text-2xl text-center\">\n <span class=\"bg-white px-5\">your text</span>\n</div>\n\n<script src=\"https://cdn.tailwindcss.com\"></script>\n```\n\n========================================\n\nComments:\n- If doesn't work, just add w-full to the parent div! Works for me!\n- Is it possible it be dashed line?\n- I tried but not sure how to do","metadata":{"transformedAt":"2026-08-18T18:33:42.898Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":117,"estimatedTokens":676}}205{"id":"stack-60692794","source":"stackoverflow","questionId":60692794,"title":"Can you change the base font-family in Tailwind config?","tags":["css","tailwind-css"],"text":"Title: Can you change the base font-family in Tailwind config?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI’ve added new font families in my `tailwind.config.js` file. These are available with the `.font-sans` class, but I would like to change the global font-family as well. The `'tailwindcss/base'` import adds a generic sans-serif family on the `html, body {}` selector.\n\nIs there a way to change this global font family in the config file, rather than just adding in a new style to undo it?\n\nI’d like to keep the overall CSS to a minimum and not have to add extra CSS to undo styles I don’t need. I couldn’t see any option in the docs that would apply to this.\n\n========================================\n\nTop Answer:\nWhen you install Tailwind CSS following the official guide, the default font-family that applies to the HTML element of your project corresponds to the `font-sans` utility class, as below (Preflight);\n\n```\nfont-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n```\n\nIn order to modify the Tailwind Preflight configuration, you can make use of `@layer` to extend the *base* as below;\n\n```\n/*\n * Override default font-family above\n * with CSS properties for the .font-serif utility.\n */\n@tailwind base;\n@layer base {\n html {\n @apply font-serif;\n }\n}\n@tailwind components;\n@tailwind utilities;\n```\n\nThough global (as it applies to the root HTML element of the document), the approach described above overrides the font-family defined in Tailwind Preflight configuration but ensure it remains in your compiled CSS, when used.\n\nAssuming you want to use \"Segoe UI\" with Roboto and sans-serif only as *sans* font-family applied to your HTML element in the same order, without override, make use of the snippet below;\n\n```\n// tailwind.config.js\nconst { fontFamily } = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}',\n ],\n theme: {\n fontFamily: {\n sans: [\n '\"Segoe UI\"',\n 'Roboto',\n 'sans-serif',\n ],\n },\n },\n plugins: [],\n}\n```\n\nIn case you want your new newly defined *sans* `font-family` to be applied (still without override) but with Tailwind's as default fallback, modify your script as below;\n\n```\n// tailwind.config.js\nconst { fontFamily } = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}',\n ],\n theme: {\n fontFamily: {\n sans: [\n '\"Segoe UI\"',\n 'Roboto',\n 'sans-serif',\n ...fontFamily.sans,\n ],\n },\n },\n plugins: [],\n}\n```\n\nPlease note: in the last scenario above, the font-family applied to the HTML element of your project could contain duplicate font listings, if already exiting in the CSS properties of Tailwind's `.font-sans` utility class (that is the case for the three fonts used in the example above).\n\nLet's say you want to use IBM Plex Sans Variable as your custom *sans* font, with the regular Tailwind CSS `.font-family` *sans*, without override, make use of the snippet below, then import the font into your project;\n\n```\n// tailwind.config.js\nconst { fontFamily } = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}',\n ],\n theme: {\n fontFamily: {\n sans: [\n '\"IBM Plex Sans\"',\n ...fontFamily.sans,\n ],\n },\n },\n plugins: [],\n}\n```\n\nRemember: use the same font-family name as in your tailwind.config.js file as name for your custom font - here: `\"IBM Plex Sans\"`.\n\n========================================\n\nCode:\n```text\ntailwind.config.js\n```\n\n```text\n.font-sans\n```\n\n```text\n'tailwindcss/base'\n```\n\n```text\nhtml, body {}\n```\n\n```text\nmodule.exports = {\n theme: {\n fontFamily: {\n sans: ['\"PT Sans\"', 'sans-serif']\n }\n },\n}\n```\n\n```text\n<body class=\"font-serif\"> <!-- Or whatever your named your font stack -->\n```\n\n```text\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nconst fontFamily = defaultTheme.fontFamily;\nfontFamily['sans'] = [\n 'Roboto', // <-- Roboto is a default sans font now\n 'system-ui',\n // <-- you may provide more font fallbacks here\n];\n\nmodule.exports = {\n purge: [],\n theme: {\n fontFamily: fontFamily, // <-- this is where the override is happening\n extend: {},\n },\n variants: {},\n plugins: [],\n};\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nfont-sans\n```\n\n```text\nfont-serif\n```\n\n```text\nfont-mono\n```\n\n```text\nmodule.exports = {\n important: true,\n future: {\n removeDeprecatedGapUtilities: true,\n purgeLayersByDefault: true,\n },\n purge: [\n './components/**/*.js',\n './pages/**/*.js'],\n theme: {\n screens: {\n sm: '640px',\n md: '768px',\n lg: '1024px',\n xl: '1280px',\n },\n extend: {\n fontFamily: {\n sans: [\n '\"Inter\"',\n 'system-ui',\n '-apple-system',\n 'BlinkMacSystemFont',\n '\"Segoe UI\"',\n 'Roboto',\n '\"Helvetica Neue\"',\n 'Arial',\n '\"Noto Sans\"',\n 'sans-serif',\n '\"Apple Color Emoji\"',\n '\"Segoe UI Emoji\"',\n '\"Segoe UI Symbol\"',\n '\"Noto Color Emoji\"',\n ],\n },\n },\n },\n variants: {},\n plugins: [\n require( 'tailwindcss' ),\n require( 'precss' ),\n require( 'autoprefixer' ),\n ],\n};\n```\n\n```css\nfont-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n```\n\n```css\n/*\n * Override default font-family above\n * with CSS properties for the .font-serif utility.\n */\n@tailwind base;\n@layer base {\n html {\n @apply font-serif;\n }\n}\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\n// tailwind.config.js\nconst { fontFamily } = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}',\n ],\n theme: {\n fontFamily: {\n sans: [\n '\"Segoe UI\"',\n 'Roboto',\n 'sans-serif',\n ],\n },\n },\n plugins: [],\n}\n```\n\n```js\n// tailwind.config.js\nconst { fontFamily } = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}',\n ],\n theme: {\n fontFamily: {\n sans: [\n '\"Segoe UI\"',\n 'Roboto',\n 'sans-serif',\n ...fontFamily.sans,\n ],\n },\n },\n plugins: [],\n}\n```\n\n```js\n// tailwind.config.js\nconst { fontFamily } = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}',\n ],\n theme: {\n fontFamily: {\n sans: [\n '\"IBM Plex Sans\"',\n ...fontFamily.sans,\n ],\n },\n },\n plugins: [],\n}\n```\n\n```text\nfont-sans\n```\n\n```text\n@layer\n```\n\n```text\nfont-family\n```\n\n```text\n.font-sans\n```\n\n```text\n.font-family\n```\n\n```text\n\"IBM Plex Sans\"\n```\n\n```html\n<link\n rel=\"preload\"\n href=\"/fonts/inter-var-latin.woff2\"\n as=\"font\"\n type=\"font/woff2\"\n crossOrigin=\"anonymous\"\n />\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n @font-face {\n font-family: \"Inter\";\n font-style: normal;\n font-weight: 100 900;\n font-display: optional;\n src: url(/fonts/inter-var-latin.woff2) format(\"woff2\");\n }\n}\n```\n\n```js\n/* disable eslint errors if any */\nconst defaultTheme = require(\"tailwindcss/defaultTheme\");\n\nmodule.exports = {\n theme: {\n extend: {\n fontFamily: {\n sans: [\"Inter\", ...defaultTheme.fontFamily.sans],\n },\n },\n },\n};\n```\n\n```text\nHead\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n @font-face {\n font-family: 'BeautifulQueen';\n src: url('/font/BeautifulQueen.otf');\n }\n}\n// rest of your css goes below\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nconst defaultTheme = require(\"tailwindcss/defaultTheme\");\n\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {\n fontFamily: {\n sans: ['BeautifulQueen', ...defaultTheme.fontFamily.sans],\n },\n },\n },\n plugins: [],\n}\n```\n\n```text\nbody {\n padding: 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n```\n\n```text\nbody {\n padding: 0;\n margin: 0;\n}\n```\n\n```text\n, ...defaultTheme.fontFamily.sans]\n```\n\n```text\nfontFamily: {\n sans: [\"Inter\", ...defaultTheme.fontFamily.sans],\n},\n```\n\n```text\n@layer base {\n @font-face {\n font-display: swap;\n font-family: myfont; /* your font name */\n font-style: normal;\n font-weight: 400;\n src: url(myfont.eot);\n src: url(myfont.eot) format(\"embedded-opentype\")\n }\n}\n```\n\n```text\nmodule.exports = {\n content: [\"./index.html\"],\n theme: {\n fontFamily:{\n sans: ['myfont', 'sans-serif'],\n },\n extend: {},\n },\n plugins: [],\n}\n```\n\n========================================\n\nComments:\n- I was thinking the same and started a discussion at github.com/tailwindlabs/tailwindcss/discussions/7496. I think the solution will be to add to the documentation. All answers here that says to change `theme.fontFamily.sans` are correct. Doesn't really matter how you do it as long as `theme.fontFamily.sans` is changed because that variable is used on line 32 of preflight.css.\n- This is now documented at tailwindcss.com/docs/font-family#customizing-the-default-fon‌​t\n- Somehow only this worked. When I tried modifying sans inline at theme.fontFamily or theme.extend.fontFamiliy, none worked.\n- Good point with approach leveraging the Preflight.\n- I had to re-read your answer a few times to get that the **only** way to override preflight `font-family` is to define your own font family as `sans` in *tailwind.config.js*. I tried the `@layer base` but somehow missed that it keeps the default Tailwind CSS `font-family` in the CSS. \"the approach described above overrides the font-family defined in Tailwind Preflight configuration but ensure it remains in your compiled CSS, when used.\" <- is not super clear about that.\n- Thanks @dotnetCarpenter. Please feel free to edit and enhance clarity.\n- This is the correct answer.\n- I have checked your code. U have used next/font and also added preload link in _document.js and also overridden in tailwind CSS. It loads the same font files twice with different paths. I am using Next.js v12.1.0 so I cannot use font/next. I am still getting confused because I am already adding font files through font as shown in step 3. I just wanted to add the pre-connect tag to it. therefore adding a link in _document.js even though I have (eot,SVG,ttf,woff,woff2) files for multiple fonts. On the browser, it downloads all which are even not necessary. Could you guide me in proper way ?","metadata":{"transformedAt":"2026-08-18T18:33:42.898Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":36,"totalLines":485,"estimatedTokens":2778}}206{"id":"stack-65491795","source":"stackoverflow","questionId":65491795,"title":"How can I specify exactly 600px width in Tailwind CSS?","tags":["tailwind-css"],"text":"Title: How can I specify exactly 600px width in Tailwind CSS?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn Tailwind Officail docs, there are lots of width utilities we can use.\n\nHowever, the **maximum fixed width** I can specify is `w-96`, which is `width: 24rem; (384px)`\n\nI've noticed a weird class called `w-px`, at first glance, I thought I can do `w-600px`, but it's not working, it is exactly `1px`.\n\nI am currently migrating my old project to Tailwind CSS, so there are going to have lots of weird widths I need to specify, but Tailwind CSS doesn't provide them by default.\n\nIf I can just do `w-600px` would be nice, or am I missing any other better approach?\n\n========================================\n\nTop Answer:\nCan you please check the below code? Hope it will work for you.\n\n#1 You need to add the below code in tailwind.config.js\n\n```\nmodule.exports = {\n theme: {\n extend: {\n width: {\n '600': '600px',\n }\n }\n }\n}\n```\n\n#2 After that you can use `w-600` in your HTML file like below.\n\n```\n...\n```\n\n========================================\n\nCode:\n```text\nw-96\n```\n\n```text\nwidth: 24rem; (384px)\n```\n\n```text\nw-px\n```\n\n```text\nw-600px\n```\n\n```text\n1px\n```\n\n```text\nw-600px\n```\n\n```text\nw-[600px]\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n width: {\n '600': '600px',\n }\n }\n }\n}\n```\n\n```text\n<div class=\"w-600\">...</div>\n```\n\n```text\nw-600\n```\n\n```text\nw-[600px]\n```\n\n```text\n<div class=\"w-[600px]\">\n <!-- ... -->\n</div>\n```\n\n========================================\n\nComments:\n- Possible duplicate, this might help you: stackoverflow.com/questions/54618144/…\n- The docs are incomplete for Tailwind. I've posted on their GH discussion to request more examples for properties that use `px` values.\n- For those who might be checking for max-width, check tailwindcss.com/docs/max-width and tailwindcss.com/docs/container.\n- Excellent! This is the best route for one-off values because it makes no sense to pollute the config just for one value.\n- A nit that everyone is reading through, but `w-[600px]`.\n- This was answered in the top answer....\n- The top answers uses height with `h-`, so this might be confusing for someone who wants to know \"exactly 600px width in Tailwind CSS.\"","metadata":{"transformedAt":"2026-08-18T18:33:42.898Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":111,"estimatedTokens":561}}207{"id":"stack-62688037","source":"stackoverflow","questionId":62688037,"title":"Can use both Tailwind CSS and Bootstrap at the same time?","tags":["vue.js","bootstrap-4","vue-component","tailwind-css"],"text":"Title: Can use both Tailwind CSS and Bootstrap at the same time?\nTags: vue.js, bootstrap-4, vue-component, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nMy project is currently Vuejs which use BootstrapVue components (seems to use bootstrap 4 css).\n\nI am trying to use Tailwind css for new custom components.\n\nIs it possible to use both of them at same time?\n\nThank you.\n\n========================================\n\nTop Answer:\n**Option 1: Adopt or recreate classes**\n\nIf you only need one or two classes, for example from the color system of Tailwind, you could also copy them.\nSome characters would have to be masked, e.g:\n\n// style.css\n\n```\n.hover\\:text-blue-900:hover,\n.text-blue-900 {\n color: #183f6d;\n}\n```\n\n*That's what I did at the beginning of a project, where bootstrap is the main framework*.\nIf it should be several colors and functions, you can also build this with SCSS quickly. **In the long run, however, in my opinion, not the best and cleanest solution.**\n\nExample for this:\n\n// style.scss\n\n```\n(...)\n@each $name, $hexcode in $tailwind-colors {\n .hover\\:text-#{$name}:hover,\n .text-#{$name} {\n color: $hexcode\n }\n }\n}\n```\n\nFull code (Github Gist)\n\n**Option 2: Integrate Tailwind**\n\nBut as soon as more functionalities should be added, or you want to build it cleaner, you can do here with the prefix mentioned by the documentation as Ostap Brehin says.\n\n// tailwind.config.js\n\n```\nmodule.exports = {\n prefix: 'tw-',\n}\n```\n\nThe normalized definitions can be removed by disabling preflight:\n\n// tailwind.config.js\n\n```\nmodule.exports = {\n corePlugins: {\n preflight: false,\n }\n}\n```\n\n*Better check the generated CSS file.*\n\nHere is my full tailwind.config.js file:\n\n// tailwind.config.js\n\n```\nmodule.exports = {\n content: [\n './**/*.php',\n '../Resources/**/*.{html,js}',\n ],\n safelist: [\n 'tw-bg-blue-800/75',\n {\n pattern: /(bg|text)-(blue)-(800)/,\n variants: ['hover'],\n },\n ],\n prefix: 'tw-',\n theme: {\n extend: {},\n },\n corePlugins: {\n preflight: false,\n },\n plugins: [],\n}\n```\n\n========================================\n\nCode:\n```js\n// tailwind.config.js\nmodule.exports = {\n prefix: 'tw-',\n}\n```\n\n```text\nnormalize.css\n```\n\n```text\n@tailwind base\n```\n\n```text\n.hover\\:text-blue-900:hover,\n.text-blue-900 {\n color: #183f6d;\n}\n```\n\n```text\n(...)\n@each $name, $hexcode in $tailwind-colors {\n .hover\\:text-#{$name}:hover,\n .text-#{$name} {\n color: $hexcode\n }\n }\n}\n```\n\n```text\nmodule.exports = {\n prefix: 'tw-',\n}\n```\n\n```text\nmodule.exports = {\n corePlugins: {\n preflight: false,\n }\n}\n```\n\n```text\nmodule.exports = {\n content: [\n './**/*.php',\n '../Resources/**/*.{html,js}',\n ],\n safelist: [\n 'tw-bg-blue-800/75',\n {\n pattern: /(bg|text)-(blue)-(800)/,\n variants: ['hover'],\n },\n ],\n prefix: 'tw-',\n theme: {\n extend: {},\n },\n corePlugins: {\n preflight: false,\n },\n plugins: [],\n}\n```\n\n```text\n<script>\n tailwind.config = {\n prefix: \"tw-\",\n corePlugins: {\n preflight: false,\n }\n }\n </script>\n```\n\n```text\nmodule.exports = {\n content: [\"./**/*.html\"],\n prefix: \"tw-\",\n important: true,\n corePlugins: {\n preflight: false,\n }\n}\n```\n\n```css\n@import \"tailwindcss\" prefix(myprefix);\n```\n\n```text\nmyprefix:text-red-500\nmyprefix:hover:text-red-500\n```\n\n```css\n/* @import \"tailwindcss\"; */\n/* This includes everything by itself, but if we need to use it without preflight, unfortunately, we will have to individually declare the necessary imports. */\n\n@layer theme, base, components, utilities;\n@import \"tailwindcss/theme.css\" layer(theme);\n/* @import \"tailwindcss/preflight.css\" layer(base); */\n@import \"tailwindcss/utilities.css\" layer(utilities);\n```\n\n```css\n@import \"tailwindcss\" important;\n```\n\n```css\n@import \"tailwindcss\" prefix(myprefix) important;\n```\n\n```text\n:\n```\n\n```text\n-\n```\n\n```text\ntw:content\n```\n\n```text\ntw-\n```\n\n```text\n@layer\n```\n\n========================================\n\nComments:\n- As other answers have pointed out, the TailwindCSS prefix system is perfectly suited to differentiate its own classes from those of other frameworks. However, the other answers were focused on TailwindCSS v3, and **the declaration and use of prefixes has changed** starting **from TailwindCSS v4**.\n- There actually are quite a few name collisions as shown in other answers...\n- I don't think this would really be a good answer.\n- Actually, I dont like to rewrite all bootstrapVue components again, though I love tailwind :(\n- is there any bootstrap like opinionated library built on top of tailwind with all the components like alert, grid, btns, cards, collapse, etc. sometimes you don't want to leave the comfort of bootstrap but want tailwind utilities at the same time\n- @SumitWadhwa DaisyUI seems to do that, but I haven't used it.\n- @SumitWadhwa Tailwind UI is the official offering for this, though it's a paid product. tailwindui.com\n- I don't agree. When migrating (If want to switch, but there are too many components to do it all at once in a single large PR.) a project, there is often a need to use both frameworks simultaneously. The TailwindCSS prefix system offers a perfect solution for this. Although you don't recommend it, it's an essential solution for project migrations.\n- hi, can i know why normalize.css will cause a problem and why should we disable it by preflight: false?\n- Just because, each framework may use différents reset styles. We can even say that normalize.css is a micro framework by itself and there are others reset framework and also fully custom reset.\n- Starting from TailwindCSS v4, the way prefixes are added has changed. For more details, see here: Using prefix in TailwindCSS v4\n- Or just use unocss.dev\n- good lord. why did you curse my eyes with a project that uses regex to save time on compiling a stylesheet. That's a no from me dog.\n- I tried this solution for the configuration and got both bootstrap and tailwind working together flawlessly. One thing I'll add is that with \"preflight: false\" is that some of the tailwind UI components were not rendering properly. In order to solve this I added a separate preflight css file and added a .preflight class to certain tailwind components. This article explains how (dev.to/ajscommunications/scoping-normalized-preflight-css-c‌​29) Also, I used (github.vue.tailwind-prefix.cbass.dev) to quickly add the \"tw-\" prefix to my tailwind code.","metadata":{"transformedAt":"2026-08-18T18:33:42.898Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":264,"estimatedTokens":1616}}208{"id":"stack-63412303","source":"stackoverflow","questionId":63412303,"title":"How to make div fill full height of parent in tailwind","tags":["css","user-interface","tailwind-css"],"text":"Title: How to make div fill full height of parent in tailwind\nTags: css, user-interface, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using tailwind in my Vuejs app. I have this simple template\n\n```\n\n \n \n \n \n \n \n\n```\n\nThe div with `h-screen` is the root or my app. The component`` has a tailwind height of `h-32`\n\nThe problem is that the second div causes the page to scroll at the bottom, the height of the `` (h-32).\n\n### What I want to do\n\nIf there is no content, I want the second div to fill the remaining height of the screen but no more.\nIf there is content, I want it grow as necessary.\n\n========================================\n\nTop Answer:\nUsage of `flex-1` is optimal for your solution to expand a certain component in the parent:\n\nUse `flex-1` to allow a flex item to grow and shrink as needed, ignoring its initial size:\n\n### Vertically\n\n```\n\n Header\n I am the body\n\n```\n\n### Output:\n\nhttps://i.sstatic.net/BvbLYm.png\n\n### Horizontally\n\n```\n\n NavBar\n I am the body\n\n```\n\n### Output:\n\nhttps://i.sstatic.net/fMPbIm.png\n\n========================================\n\nCode:\n```html\n<template>\n <div class=\"bg-gray-500 h-screen\">\n <Header /><!-- //height 32 -->\n <div class=\"w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg\">\n <router-view />\n </div>\n </div>\n</template>\n```\n\n```text\nh-screen\n```\n\n```text\n<header>\n```\n\n```text\nh-32\n```\n\n```text\n<header>\n```\n\n```html\n<div class=\"bg-gray-500 flex flex-col h-screen\">\n <div class=\"flex h-32 bg-gray-200\"></div>\n <div class=\"flex-1 w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg bg-gray-300\">\n <router-view />\n </div>\n</div>\n```\n\n```text\n.flex\n```\n\n```text\n.flex-col\n```\n\n```text\n.flex-1\n```\n\n```text\n<div class=\"flex h-screen flex-col\">\n <div class=\"h-50 bg-cyan-400 text-center text-4xl\">Header</div>\n <div class=\"flex-1 bg-yellow-400 text-center text-4xl\">I am the body</div>\n</div>\n```\n\n```text\n<div class=\"flex w-screen \">\n <div class=\"h-50 bg-cyan-400 text-center text-4xl\">NavBar</div>\n <div class=\"flex-1 bg-yellow-400 text-center text-4xl\">I am the body</div>\n</div>\n```\n\n```text\nflex-1\n```\n\n```text\nflex-1\n```\n\n```xml\n<div class=\"dark\">\n <main class=\"h-full min-h-screen\">\n ...\n </main>\n</div>\n```\n\n========================================\n\nComments:\n- Great, thanks! (Tailwind CSS IntelliSense rightly highlights a css conflict for the use of both `bg-white` and `bg-gray-300`)","metadata":{"transformedAt":"2026-08-18T18:33:42.898Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":145,"estimatedTokens":596}}209{"id":"stack-61759776","source":"stackoverflow","questionId":61759776,"title":"Tailwind css border color not working on web page","tags":["next.js","tailwind-css"],"text":"Title: Tailwind css border color not working on web page\nTags: next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am just trying with tailwindcss, I got stuck at very basic thing. I tried different tailwindcss's utility classed and it worked. But now I am stuck at border-color\n\n```\n\n Menu1\n Menu2\n Menu3\n Login\n\n```\n\nI can inspect the elements and it is crossed in inspect element which means somehow it is not being applied to dom.\n\n```\nmodule.exports = {\n purge: [],\n theme: {\n extend: {\n colors: {\n primary: 'var(--color-primary)',\n secondary: 'var(--color-secondary)',\n negative: 'var(--color-negative)',\n positive: 'var(--color-positive)',\n 'primary-background': 'var(--background-primary)',\n 'sec-background': 'var(--background-sec)',\n 'primary-text': 'var(--color-text-primary)',\n },\n },\n backgroundColor: (theme) => ({\n ...theme('colors'),\n }),\n borderColor: (theme) => ({\n ...theme('colors'),\n }),\n },\n variants: {\n backgroundColor: ['active'],\n borderStyle: ['responsive'],\n },\n plugins: [],\n};\n```\n\nThis is how my tailwind.config.js looks like\n\nAttaching an image https://i.sstatic.net/TTst8.png\n\n========================================\n\nTop Answer:\nNothing was working for me until I added the `border-style: solid` using `border-solid`. I had to explicitly set `border-0` though, else it will be applied to all directions.\n\n```\nBottom border\n```\n\nI am using `\"tailwindcss\": \"^3.3.3\"`\n\n========================================\n\nCode:\n```text\n<div className=\"px-4 border-gray-900 border-solid\">\n <a href=\"#\" className=\"block font-semibold\">Menu1</a>\n <a href=\"#\" className=\"block \">Menu2</a>\n <a href=\"#\" className=\"block \">Menu3</a>\n <a href=\"#\" className=\"block \">Login</a>\n</div>\n```\n\n```text\nmodule.exports = {\n purge: [],\n theme: {\n extend: {\n colors: {\n primary: 'var(--color-primary)',\n secondary: 'var(--color-secondary)',\n negative: 'var(--color-negative)',\n positive: 'var(--color-positive)',\n 'primary-background': 'var(--background-primary)',\n 'sec-background': 'var(--background-sec)',\n 'primary-text': 'var(--color-text-primary)',\n },\n },\n backgroundColor: (theme) => ({\n ...theme('colors'),\n }),\n borderColor: (theme) => ({\n ...theme('colors'),\n }),\n },\n variants: {\n backgroundColor: ['active'],\n borderStyle: ['responsive'],\n },\n plugins: [],\n};\n```\n\n```text\nclass=\"border border-gray-800\"\n```\n\n```text\nclass=\"border-2 border-gray-800\"\n```\n\n```text\nclass=\"border-right border-gray-800\"\n```\n\n```text\nborder-width: 1px\n```\n\n```html\n<div class=\"border-4 border-gray-900\">HELLO with 4px border</div>\n <div class=\"border-[13px] border-gray-900\">HELLO with 13px border</div>\n```\n\n```html\n<div className=\"border-0 border-b-2 border-solid border-b-red-600\">Bottom border</div>\n```\n\n```text\nborder-style: solid\n```\n\n```text\nborder-solid\n```\n\n```text\nborder-0\n```\n\n```text\n\"tailwindcss\": \"^3.3.3\"\n```\n\n========================================\n\nComments:\n- Same results here, `border-style: solid;` was the missing ingredient.\n- Strange how this worked for me too. I have never needed that before with tailwind. how can you make it so you do not need `border-solid`\n- For me this was the solution. My guess is that within the project I'm working is a legacy css framework in use ant design and i would guess this has inferrences that make `border-solid`neccesary in such cases\n- this worked for me too. So now need to first make all the borders width 0 and then bottom will work?\n- yes this worked for me, i was giving width and color to it using tailwind but it was not working.","metadata":{"transformedAt":"2026-08-18T18:33:42.898Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":154,"estimatedTokens":904}}210{"id":"stack-70805041","source":"stackoverflow","questionId":70805041,"title":"Background image in tailwindcss using dynamic url (React.js)","tags":["javascript","css","reactjs","typescript","tailwind-css"],"text":"Title: Background image in tailwindcss using dynamic url (React.js)\nTags: javascript, css, reactjs, typescript, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have an image url fetched from an API and I want to display it as a background image. Is there any way I can implement this with tailwindcss or should I use styles attribute?\n\n========================================\n\nTop Answer:\nI think the best solution is to do what you suggested and use a style attribute. Tailwind CSS doesn't really deal with dynamic data, but rather with class names to add predefined styles to your element. The best you could without using the style attribute is to conditionally add/remove classNames from an element, but that would require you to know the image URL ahead of time, which defeats the purpose of getting it from an API.\n\nI would do:\n\n```\nstyle={{backgroundImage: `url(${fetchedImgSrc})`}}\n```\n\nEdit:\nIt looks like you can actually use Tailwind to do something similar to the code above as per https://tailwindcss.com/docs/background-image.\nThe code looks like:\n\n```\n\n \n\n```\n\n========================================\n\nCode:\n```text\n<div\n style={{'--image-url': `url(${fetchedUrl})`}} \n className='bg-[image:var(--image-url)]'>\n <!-- ... -->\n</div>\n```\n\n```text\nclassName='hover:bg-[image:var(--image-url)] focus:bg-[image:var(--image-url)] ...'\n```\n\n```text\n<div\n style={{'--color': fetchedColor}} \n className='text-[color:var(--color)]'>\n <!-- ... -->\n</div>\n```\n\n```text\nstyle={{backgroundImage: `url(${fetchedImgSrc})`}}\n```\n\n```text\n<div class=\"bg-[url('/img/hero-pattern.svg')]\">\n <!-- ... -->\n</div>\n```\n\n```text\nbackgroundImage: { 'cover-pic': \"url('/public/img/cover_pic.jpg')\" }\n```\n\n```text\nbg-cover-pic\n```\n\n```text\nconst bag2 = \"https://via.placeholder.com/500\"\n\n<div \n className = \"someting\"\n style={{backgroundImage: `url(${bag2})`}}\n\n</div>\n```\n\n```text\n<div className={`justify-center bg-no-repeat bg-cover bg-center rounded-lg`} \nstyle={{ backgroundImage: `url(${bgImage})`}} >\n<!-- Children here-->\n</div>\n```\n\n```text\n<div class=\"bg-cover bg-center ...\" style=\"background-image: url(...)\"></div>\n```\n\n```text\nstyle={{ backgroundImage: 'url(/about.jpg.webp)' }}\n```\n\n```text\n<div\n className=\"w-full h-48 bg-no-repeat bg-cover\"\n style={{ backgroundImage: \"url(\" + externalImageUrl + \")\" }}\n></div>\n```\n\n```text\nconst background = = \"bg-[url(\" + fetchedUrl + \")]\"\n\nReturn {\n <div className={`${background} ((Other tailwind here))`}>\n}\n```\n\n```text\n<DisplayCard customText=\"..this is resolved and working\" customImage=\"the-dynamic-image-not-working.jpg\"/>\n```\n\n```text\n<DisplayCard customText=\"..this is resolved and working\" customImage=\"bg-[url('/the-dynamic-image-now-working.jpg')]\"/>\n```\n\n```text\nexport default function DiaplayCard({customText, customImage}) {\n return(\n <div \n className={`... ${customImage} bg-cover bg-center ...`}\n ...\n />\n ... \n )}\n```\n\n```text\nDisplayCard\n```\n\n========================================\n\nComments:\n- I have tried your second solution. But looks like tailwind does not generate a class if it includes a dynamic value. So I shall stick with the style attribute.\n- Do you need a specific tailwind version to make this work? I can get the color example to work `bg-[color:var(--color)]` if I turn on jit mode, but I can't get it to do anything with images like in the example. The class is not found at all if I change it to `bg-[image:var(--image)]`.\n- @brense I tried it on the tailwind play with different versions. Looks like you need to use version 3 or above of tailwind to make this work.\n- This does not work well with TypeScript as the property `var(--color)` does not exist for the style prop. I wonder if there is a solution without using `any` type.\n- @MosheG Sorry for the late reply. By doing `const style = {\"var(--color)\": yourColor} as React.CSSProperties` typescript will not complain.\n- This not working for me, my version of Tailwind is 3.1.x\n- @GeniusHawlah How exactly is it not working?\n- @TenshiMunasinghe It is not detecting the image even when I used color, same thing.\n- The style part is incorrect, it should rather be: `html `\n- For example in Vue, here is my working example `html `\n- If found `style={`--image-url: url('${bgImage}');`}` works for me\n- Great solution. I had a challenge where I wanted to apply a background image to the before-pseudo using a Django and Tailwind. this worked perfectly: ``\n- Thank you so much, I spent a few hours on this. Can confirm this method also works in Vite, Svelte, SvelteKit and Flowbite-Svelte.\n- This works for typescript: `style={{ \"--image-url\":`url(${imageUri})` } as React.CSSProperties}`\n- You save my day! I have to use\n- example: codesandbox.io/p/devbox/…\n- The OP asks for dynamic URLs, which means you don't know the URL in the build time!\n- For me it was a pain in the ass figuring this out because the issue is fairly new and barely any sources of solutions, seems like I'll have to use the style attribute as well until they fix this.\n- Updating a style property during rerender (background) when a conflicting property is set (`backgroundSize` and `backgroundImage`) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.","metadata":{"transformedAt":"2026-08-18T18:33:42.898Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":154,"estimatedTokens":1331}}211{"id":"stack-56755439","source":"stackoverflow","questionId":56755439,"title":"Modifying hover in TailwindCSS","tags":["css","tailwind-css"],"text":"Title: Modifying hover in TailwindCSS\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've noticed that `:hover` variant in TailwindCSS uses the defaults hover selector which causes 'stuck' hover states on mobile. Is there a way to modify the `:hover` function to do a `@media(hover: hover)` instead?\n\n========================================\n\nTop Answer:\nMight 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\n\nOnce 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:\n\n```\n// tailwind.config.js\nmodule.exports = {\n future: {\n hoverOnlyWhenSupported: true,\n },\n // ...\n}\n```\n\n========================================\n\nCode:\n```text\n:hover\n```\n\n```text\n:hover\n```\n\n```text\n@media(hover: hover)\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n theme: {\n extend: {\n screens: {\n 'hover-hover': {'raw': '(hover: hover)'},\n }\n }\n }\n}\n```\n\n```text\n@media (hover: hover) { ... }\n```\n\n```text\nhover-hover:text-red\n```\n\n```text\nhover-hover\n```\n\n```text\n(hover: hover)\n```\n\n```text\nhover: none\n```\n\n```text\npointer: coarse\n```\n\n```text\n// styles.css\n\n@variants hover {\n .banana {\n color: yellow;\n }\n}\n```\n\n```text\nclass='hover:banana'\n```\n\n```js\n// tailwind.config.js\n\nconst plugin = require('tailwindcss/plugin');\n\nconst hoverPlugin = plugin(function({ addVariant, e, postcss }) {\n addVariant('hover', ({ container, separator }) => {\n const hoverRule = postcss.atRule({ name: 'media', params: '(hover: hover)' });\n hoverRule.append(container.nodes);\n container.append(hoverRule);\n hoverRule.walkRules(rule => {\n rule.selector = `.${e(`hover${separator}${rule.selector.slice(1)}`)}:hover`\n });\n });\n});\n\nmodule.exports = {\n plugins: [ hoverPlugin ],\n}\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n future: {\n hoverOnlyWhenSupported: true,\n },\n // ...\n}\n```\n\n```text\nv3.1.0\n```\n\n```text\n<button \n type=\"button\"\n class=\"\n [@media(hover:hover)]:opacity-0\n [@media(hover:hover){&:hover}]:opacity-100\n \">\n <!-- ... -->\n</button>\n```\n\n```js\nimport type { Config } from 'tailwindcss';\nimport plugin from 'tailwindcss/plugin';\n\nexport default {\n ...\n plugins: [\n ...\n plugin(function ({ addVariant }) {\n addVariant('hover', [\n '@media (hover: hover) { &:hover }',\n '@media (hover: none) { &:active }',\n ]);\n }),\n ],\n} satisfies Config;\n```\n\n```text\nhover:\n```\n\n```text\nhover-hover:\n```\n\n```text\nactive:\n```\n\n```text\nhover:\n```\n\n```text\nhoverOnlyWhenSupported: true\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant hover {\n /* If the browser supports the hover event, apply the specified classes on the :hover event */\n @media (hover: hover) {\n &:hover {\n @slot;\n }\n }\n \n /* If hover is not supported, apply the styling immediately */\n /*\n NOTE: This can be omitted if you don't want the hover to apply on mobile.\n If you add this, the hover design will be displayed by default on mobile.\n If use this, considering the example, the text will be underlined by default on a touchscreen.\n */\n @media not all and (hover: hover) {\n & {\n @slot;\n }\n }\n}\n</style>\n\n<div class=\"p-2 space-y-3\">\n <p>\n <strong class=\"text-blue-500 hover:underline\">example</strong>\n </p>\n</div>\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant has-hover (@media (hover: hover));\n@custom-variant no-hover (@media not all and (hover: hover));\n@custom-variant hover-always {\n @media (hover: hover) {\n &:hover {\n @slot;\n }\n }\n @media not all and (hover: hover) {\n & {\n @slot;\n }\n }\n}\n@custom-variant mobile-hover (&:hover);\n</style>\n\n<div class=\"p-2 space-y-3\">\n <p>\n <!--\n Continuing from the previous example, the original hover is not overridden,\n but we can override it anytime using has-hover together.\n -->\n <strong class=\"text-blue-500 has-hover:hover:underline\">has-hover:hover example (disabled hovered on touchscreen)</strong>\n </p>\n <p>\n <!--\n If we want to override it so that the hover design applies on mobile,\n can do it anytime using hover-always.\n -->\n <strong class=\"text-blue-500 hover-always:underline\">hover-always example (hovered by default on touchscreen)</strong>\n </p>\n \n <p>\n Has hover:\n <strong class=\"has-hover:inline hidden\">true</strong>\n <strong class=\"has-hover:hidden\">false</strong>\n </p>\n\n <p>\n No hover:\n <strong class=\"no-hover:inline hidden\">true</strong>\n <strong class=\"no-hover:hidden\">false</strong>\n </p>\n \n <span class=\"inline-block p-2 rounded bg-sky-300 hover:bg-sky-800 hover:text-white\">Regular hover</span>\n\n <span class=\"inline-block p-2 rounded bg-sky-300 hover-always:bg-sky-800 hover-always:text-white\">Hover always</span>\n\n <div class=\"border p-2 space-y-1 group\">\n Group states <br>\n <span class=\"inline-block p-2 rounded bg-sky-300 group-hover:bg-sky-800 group-hover:text-white\">Regular hover</span>\n <span class=\"inline-block p-2 rounded bg-sky-300 group-hover-always:bg-sky-800 group-hover-always:text-white\">Hover always</span>\n </div>\n\n <div class=\"border p-2 space-y-1\">\n Peer states <br>\n <span class=\"inline-block p-2 rounded bg-amber-200 peer\">I'm the peer</span>\n <span class=\"inline-block p-2 rounded bg-sky-300 peer-hover:bg-sky-800 peer-hover:text-white\">Regular hover</span>\n <span class=\"inline-block p-2 rounded bg-sky-300 peer-hover-always:bg-sky-800 peer-hover-always:text-white\">Hover always</span>\n </div>\n\n <p>The hover state of this can be activated on mobile by tapping:</p>\n <span class=\"inline-block p-2 rounded bg-sky-300 mobile-hover:bg-sky-800 mobile-hover:text-white\">Mobile hover</span>\n</div>\n\n<!-- Source: https://play.tailwindcss.com/x7OLC2FcLY -->\n```\n\n```text\n@custom-variant\n```\n\n```text\nhover:\n```\n\n```text\n@custom-variant\n```\n\n```text\nhover: hover\n```\n\n```text\n@media: hover\n```\n\n```text\npointer: fine\n```\n\n```text\n@media: pointer\n```\n\n```text\nhover: hover\n```\n\n```text\npointer: fine\n```\n\n```text\nhover\n```\n\n```text\n@custom-variant\n```\n\n```text\n@slot\n```\n\n```text\nhover:text-blue-500\n```\n\n```text\n@slot\n```\n\n```text\n@apply text-blue-500;\n```\n\n```text\nhas-hover:\n```\n\n```text\nno-hover:\n```\n\n```text\nhover:\n```\n\n```text\nmobile-hover\n```\n\n```text\nhover-always:\n```\n\n```text\ngroup-\n```\n\n```text\npeer-\n```\n\n========================================\n\nComments:\n- Touch-based devices do not have a hover state. I imagine that you are looking instead at the :focus or :active states. Tailwind allows you to apply classes to those pseudo selectors also, e.g. `focus:bg-blue-500`.\n- @SethWarburton that's the problem, mobile devices don't have a hover state, thus, a class like :hover will cause the effect to be stuck when a user presses on a button, etc. I'm trying to find a way for Tailwind to implement hover using the @media(hover:hover) instead of the regular :hover which causes said bug.\n- I think you misunderstood me. I believe the 'stuck' effect you are seeing is because you didn't set an appropriate state (i.e :focus) for touch-based devices. Try applying the styles you want using the correct selector.\n- From TailwindCSS v4, you can use the `@custom-variant` directive to add a new custom directive that works as described or override the behavior of the original `hover` variant. See: stackoverflow.com/a/79487126/15167500\n- I found `raw: '(hover: hover)'` to be not enough and ended up using `raw: '(hover: hover) and (pointer: fine)'`\n- I found that this seems to take precedence over `active:` classes applied to the same element.\n- it kinda makes your styling configuration distributed across different files which is not what you usually want\n- `(pointer: fine)` should be there too\n- `const hoverRule = postcss.atRule({ name: 'media', params: '(hover: hover) and (pointer: fine)' });` - this works\n- Thanks for this! The only issue I have found is when the selector contains dot character or arbitrary values. For instance: hover:translate-x-0.5 The . part is incorrectly encoded. Do you know how to solve this? :)\n- @MichaelGallego period is not allowed in CSS identifier names. Escaping 0.5 as 0\\2E5 should work, but I haven't tried and personally would just pick a naming scheme that is more aligned with valid CSS identifiers...\n- The answer is perfect for TailwindCSS v3. From TailwindCSS v4, these settings are no longer available in the CSS-first configuration. However, we can override the behavior of the `hover:` variant with a simple CSS setting instead. See: stackoverflow.com/a/79487126/15167500","metadata":{"transformedAt":"2026-08-18T18:33:42.898Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":46,"totalLines":381,"estimatedTokens":2225}}212{"id":"stack-65247279","source":"stackoverflow","questionId":65247279,"title":"Unknown at rule @tailwind css(unknownAtRules)","tags":["css","reactjs","typescript","tailwind-css"],"text":"Title: Unknown at rule @tailwind css(unknownAtRules)\nTags: css, reactjs, typescript, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nSo this is my first time using Typescript and Tailwind. I already followed tailwind guide for create-react-app but when I try to run `npm start` I got this error:\n\n```\n./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)\nTypeError: Object.entries(...).flatMap is not a function\n at Array.forEach ()\n```\n\nthis is my `index.css`\n\n```\n@tailwind base;\n@tailwind components; \n@tailwind utilities;\n\nbody {...\n```\n\nI got warning in index.css `Unknown at rule @tailwind css(unknownAtRules)`\n\nand this is my `index.js`\n\n```\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\n// import App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n \n tombol\n ,\n document.getElementById('root')\n);\n\nreportWebVitals();\n```\n\n========================================\n\nTop Answer:\nCreate or edit `.vscode/settings.json` and add:\n\n```\n{\n \"files.associations\": {\n \"*.css\": \"tailwindcss\"\n }\n}\n```\n\nAdditionally the VSCode extension is helpful - these notes are from their docs.\n\n========================================\n\nCode:\n```text\n./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)\nTypeError: Object.entries(...).flatMap is not a function\n at Array.forEach (<anonymous>)\n```\n\n```text\n@tailwind base;\n@tailwind components; \n@tailwind utilities;\n\nbody {...\n```\n\n```text\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\n// import App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n <React.StrictMode>\n <div className=\"px-4 py-2 bg-green-500 text-white font-semibold rounded-lg hover:bg-green-700\">tombol</div>\n </React.StrictMode>,\n document.getElementById('root')\n);\n\nreportWebVitals();\n```\n\n```text\nnpm start\n```\n\n```text\nindex.css\n```\n\n```text\nUnknown at rule @tailwind css(unknownAtRules)\n```\n\n```text\nindex.js\n```\n\n```text\nnvm\n```\n\n```text\nnpm install rimraf -g\n```\n\n```text\nrimraf node_modules\n```\n\n```text\n{\n \"files.associations\": {\n \"*.css\": \"tailwindcss\"\n }\n}\n```\n\n```text\n.vscode/settings.json\n```\n\n```json\n{\n \"plugins\": {\n \"tailwindcss\": {}\n }\n}\n```\n\n```json\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n.postcssrc\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n{\n \"version\": 1.1,\n \"atDirectives\": [\n {\n \"name\": \"@tailwind\",\n \"description\": \"Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#tailwind\"\n }\n ]\n },\n {\n \"name\": \"@apply\",\n \"description\": \"Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#apply\"\n }\n ]\n },\n {\n \"name\": \"@responsive\",\n \"description\": \"You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\\n```css\\n@responsive {\\n .alert {\\n background-color: #E53E3E;\\n }\\n}\\n```\\n\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#responsive\"\n }\n ]\n },\n {\n \"name\": \"@screen\",\n \"description\": \"The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\\n```css\\n@screen sm {\\n /* ... */\\n}\\n```\\n…gets transformed into this:\\n```css\\n@media (min-width: 640px) {\\n /* ... */\\n}\\n```\\n\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#screen\"\n }\n ]\n },\n {\n \"name\": \"@variants\",\n \"description\": \"Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\\n```css\\n@variants hover, focus {\\n .btn-brand {\\n background-color: #3182CE;\\n }\\n}\\n```\\n\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#variants\"\n }\n ]\n }\n ]\n}\n```\n\n```text\nimport \"@/styles/globals.css\";\n```\n\n```text\n.vscode\n```\n\n```text\n.vscode\n```\n\n```text\nsettings.json\n```\n\n```text\ntailwind.json\n```\n\n```text\nsettings.json\n```\n\n```text\ntailwind.json\n```\n\n```text\n@tailwind base;\n@tailwind components; \n@tailwind utilities;\n```\n\n```text\n@import \"tailwindcss/preflight\";\n@import \"tailwindcss/utilities\";\n@import 'tailwindcss';\n```\n\n```text\nnpm install -D tailwindcss postcss autoprefixer\n```\n\n```text\nconst config = {\n plugins: [\"@tailwindcss/postcss\"],\n};\nexport default config;\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\nimport './globals.css';\n```\n\n```text\n<p className=\"text-blue-600 dark:text-sky-400\">The quick brown fox...</p>\n```\n\n```text\nnpm run dev\n```\n\n========================================\n\nComments:\n- Does this answer your question? How to add a @tailwind CSS rule to css checker\n- Best answer! I wish VSCode help you with that. Because it's not a skill issue for me it's IDE issue.\n- a must have... in addition if you work with VueJS, don't forget to set the lang attribut : ``\n- best, myvscode is issue and now clear\n- This the answer that worked best for me. The \"PostCSS Language Support\" extension also fixes it, but is slow and breaks another CSS extension I use regularly (Color Info). And I just use a different PostCSS extension for Intellisense.\n- Thanks. Yes, without the VSCode plugin and just the `settings.json` the `tailwind.css` is seen as a plaintext file with no color highlighting or completions. Plugin installed, everything fine.\n- I prefer accuracy by using ``` { \"files.associations\": { \"*.tailwind.css\": \"tailwindcss\" } } ```\n- this is not the answer to the original question but helped my vscode problem.\n- Faced it while trying to create my first Astro project with tailwind. This solved the issue !\n- Faced it while trying to create my first Astro project with tailwind. This solved the issue !\n- The first one is v3, the second code snippet is v4-related. I don't understand the answer, how it relates to the question. The question is using TailwindCSS v3. By the way, `@import \"tailwindcss\";` duplicates the two previous imports, so I would never use it in this form, and I wouldn't recommend it to others either. See more: tailwindcss.com/docs/preflight#overview","metadata":{"transformedAt":"2026-08-18T18:33:42.898Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":32,"totalLines":301,"estimatedTokens":1794}}213{"id":"stack-72826605","source":"stackoverflow","questionId":72826605,"title":"How to style nested elements based on parent class using Tailwind CSS?","tags":["css","tailwind-css"],"text":"Title: How to style nested elements based on parent class using Tailwind CSS?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nLet's say I want all the links inside white card to be black, and all the links inside orange cards to be white. I can easily do in pure CSS:\n\n```\n.card--primary {\n background-color: white;\n\n a {\n color: black\n }\n}\n\n.card--danger {\n background-color: orange;\n \n a {\n color: white;\n }\n}\n```\n\nBut how can I achieve similar behaviour using Tailwind (or other CSS utility frameworks)?\n\n========================================\n\nTop Answer:\n**In case of Tailwind CSS**\n\nRead the descriptive and a very brief documentation entry here: Using arbitrary variants.\n\nAs I can see you need to change the color of all the `` links no matter how deeply they reside in the ``. Use an underscore between `&` and `a` selectors - `[&_a]:text-black`. This translates to:\n\n```\n.card--primary {\n \n /* arbitrarily nested links */\n a {\n color: black\n }\n}\n```\n\nOn the other hand the Tailwind directive with `>` between `&` and `a` => `[&>a]:text-black` would result in this css (only the direct child `` nodes would be styled):\n\n```\n.card--primary {\n \n /* direct-child links */\n > a {\n color: black\n }\n}\n```\n\n**Recap**: the resulting Tailwind HTML for your case:\n\n```\n\n !-- will be black\n \n !-- will be black\n \n\n !-- will be white\n \n !-- will be white\n \n\n```\n\nThat's it. I hope it is helpful.\n\n========================================\n\nCode:\n```css\n.card--primary {\n background-color: white;\n\n a {\n color: black\n }\n}\n\n.card--danger {\n background-color: orange;\n \n a {\n color: white;\n }\n}\n```\n\n```text\n<div className=\"card--primary bg-white [&>a]:text-black\" >\n <a/>\n <a/>\n<div/>\n\n<div className=\"card--danger bg-orange [&>a]:text-white\" >\n <a/>\n <a/>\n<div/>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<div class=\"relative bg-slate-100 flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 space-y-9\">\n<div class=\"relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10\">\n <div class=\"mx-auto max-w-md\">\n \n <div class=\"divide-y divide-gray-300/50\">\n <div class=\"space-y-6 py-8 text-base\">\n <p>White Card with all black links:</p>\n <ul class=\"space-y-4\">\n <li class=\"flex items-center\">\n \n <a href=\"https://tailwindcss.com\"> First Link</a>\n </li>\n <li class=\"flex items-center\">\n \n <a href=\"https://tailwindcss.com\"> Second Link</a>\n </li>\n <li class=\"flex items-center\">\n \n <a href=\"https://tailwindcss.com\"> Third Link</a>\n </li>\n </ul>\n </div>\n \n </div>\n </div>\n </div>\n\n\n <div class=\"relative bg-orange-700 px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10\">\n <div class=\"mx-auto max-w-md\">\n \n <div class=\"divide-y divide-gray-300/50\">\n <div class=\"space-y-6 py-8 text-base text-white\">\n <p>Orange Card with all white links:</p>\n <ul class=\"space-y-4\">\n <li class=\"flex items-center\">\n \n <a href=\"https://tailwindcss.com\"> First Link</a>\n </li>\n <li class=\"flex items-center\">\n \n <a href=\"https://tailwindcss.com\"> Second Link</a>\n </li>\n <li class=\"flex items-center\">\n \n <a href=\"https://tailwindcss.com\"> Third Link</a>\n </li>\n </ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n```\n\n```css\n.card--primary {\n \n /* arbitrarily nested <a> links */\n a {\n color: black\n }\n}\n```\n\n```css\n.card--primary {\n \n /* direct-child <a> links */\n > a {\n color: black\n }\n}\n```\n\n```html\n<div className=\"card--primary [&_a]:text-black\" >\n <a></a> !-- will be black\n <div>\n <a></a> !-- will be black\n </div>\n<div/>\n\n<div className=\"card--danger [&_a]:text-white\" >\n <a></a> !-- will be white\n <div>\n <a></a> !-- will be white\n </div>\n<div/>\n```\n\n```text\n<a>\n```\n\n```text\n<cards>\n```\n\n```text\n&\n```\n\n```text\na\n```\n\n```text\n[&_a]:text-black\n```\n\n```text\n>\n```\n\n```text\n&\n```\n\n```text\na\n```\n\n```text\n[&>a]:text-black\n```\n\n```text\n<a>\n```\n\n```html\n<div class=\"bg-white text-black\">\n <a></a>\n <a></a>\n</div>\n<div class=\"bg-black text-white\">\n <a></a>\n <a></a>\n</div>\n```\n\n```text\n<div class=\"card\">\n <a href=\"#\" class=\"text-black group-[.card--danger]:text-white\">\n Normal Card\n </a>\n</div>\n<div class=\"card group card--danger bg-orange-600\">\n <a href=\"#\" class=\"text-black group-[.card--danger]:text-white\">Danger Card</a>\n</div>\n```\n\n```text\n.group\n```\n\n```html\n<div className=\"[&_a]:text-blue-500\">\n <a href=\"#\">Foo</a>\n</div>\n```\n\n```html\n<div className=\"*:text-red-500\">\n <a href=\"#\">Foo</a>\n <a href=\"#\">Bar</a>\n <a href=\"#\">Baz</a>\n</div>\n```\n\n```text\n*\n```\n\n```html\n<div class=\"in-[.foo]:text-red-500\">not red</div>\n<section class=\"foo\">\n <div class=\"in-[.foo]:text-red-500\">red</div>\n</section>\n```\n\n```css\n@layer utilities {\n .in-\\[\\.foo\\]\\:text-red-500 {\n :where(*:is(.foo)) & {\n color: var(--color-red-500);\n }\n }\n}\n```\n\n```text\nin-[]\n```\n\n```text\nin-[]\n```\n\n```text\n:where\n```\n\n========================================\n\nComments:\n- can you the reference link here\n- @VMM there you go: tailwindcss.com/docs/…\n- useful example: className=\" [&>span>svg_path]:hover:fill-[#F80000] \"\n- Just twigged that this rule needs to applied to the parent (and not the child) — this then worked for me.\n- I read arbitrary variants approach creates new classes and increase the css bundle size: stefanjudis.com/today-i-learned/… Which is fair argument to use is sparingly","metadata":{"transformedAt":"2026-08-18T18:33:42.899Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":27,"totalLines":324,"estimatedTokens":1460}}214{"id":"stack-72117668","source":"stackoverflow","questionId":72117668,"title":"Tailwind colors based on dark mode","tags":["tailwind-css"],"text":"Title: Tailwind colors based on dark mode\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIs there any way to define different colors in the tailwind config so that the dark mode are applied without the `dark` selector?\n\nCurrently I have an object like:\n\n```\nconst colors = {\n light: {\n red: {\n 100: \"#880808\",\n ...\n }\n },\n dark: {\n red: {\n 100: \"red\",\n ...\n }\n },\n\n}\n```\n\nI'd **like** to just use `red-100` and have the color be mapped automatically (just via `bg-red-100`) without having to specify `bg-red-100 dark:bg-red-dark-100`\n\n========================================\n\nTop Answer:\nOne trick that you can make use of is by extracting as components.\n\nIn your tailwind stylesheet\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer components {\n .red-bg {\n @apply bg-red-100 dark:bg-red-dark-100;\n }\n}\n```\n\nThen you can use it as\n\n```\n\n```\n\nand it work as intended. However, it would be a best practice to use other approaches in re-using the styles since it would be inconvenient to extend this trick to all colors used in your project.\n\n========================================\n\nCode:\n```text\nconst colors = {\n light: {\n red: {\n 100: \"#880808\",\n ...\n }\n },\n dark: {\n red: {\n 100: \"red\",\n ...\n }\n },\n\n}\n```\n\n```text\ndark\n```\n\n```text\nred-100\n```\n\n```text\nbg-red-100\n```\n\n```text\nbg-red-100 dark:bg-red-dark-100\n```\n\n```css\n@import 'tailwindcss';\n\n:root {\n --primary-color: 247 147 34;\n --text-color: 33 33 33;\n --success-color: 0 200 81;\n --info-color: 51 181 229;\n --warn-color: 255 187 51;\n --error-color: 254 78 78;\n}\n\n:root[class~='dark'] {\n --primary-color: 247 147 34;\n --text-color: 33 33 33;\n --success-color: 0 200 81;\n --info-color: 51 181 229;\n --warn-color: 255 187 51;\n --error-color: 254 78 78;\n}\n\n@theme inline {\n --color-primary: rgb(var(--primary-color));\n --color-text: rgb(var(--text-color));\n --color-success: rgb(var(--success-color));\n --color-info: rgb(var(--info-color));\n --color-warn: rgb(var(--warn-color));\n --color-error: rgb(var(--error-color));\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n\n :root {\n --color-primary: 247 147 34;\n --color-text: 33 33 33;\n --color-success: 0 200 81;\n --color-info: 51 181 229;\n --color-warn: 255 187 51;\n --color-error: 254 78 78;\n }\n\n :root[class~=\"dark\"] {\n --color-primary: 247 147 34;\n --color-text: 33 33 33;\n --color-success: 0 200 81;\n --color-info: 51 181 229;\n --color-warn: 255 187 51;\n --color-error: 254 78 78;\n }\n}\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: \"class\",\n theme: {\n colors: {\n primary: \"rgb(var(--color-primary) / <alpha-value>)\",\n text: \"rgb(var(--color-text) / <alpha-value>)\",\n success: \"rgb(var(--color-success) / <alpha-value>)\",\n info: \"rgb(var(--color-info) / <alpha-value>)\",\n warn: \"rgb(var(--color-warn) / <alpha-value>)\",\n error: \"rgb(var(--color-error) / <alpha-value>)\",\n transparent: \"transparent\",\n current: \"currentColor\",\n },\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer components {\n .red-bg {\n @apply bg-red-100 dark:bg-red-dark-100;\n }\n}\n```\n\n```html\n<div class=\"red-bg\"></div>\n```\n\n========================================\n\nComments:\n- I had the same question but after some research and without any normal results I just started to use bg-red-100 dark:bg-red-dark-100. Looks like it isn't a problem for the other TW geeks so they just use the same approach as well\n- Don't forget to add the `` to your theme otherwise you will loose support for tailwinds opacity classes. `primary: \"rgb(var(--color-primary) / )\"`. You can view more information in the tailwind documentation (tailwindcss.com/docs/customizing-colors)\n- :root[class=\"dark\"] colors is not being considered when dark is present in the class.\n- @ShashiKiran so, do you mean this solution doesn't work?\n- Just in case someone finds it easier to read, in this context the CSS selector `:root[class~=\"dark\"]` is the same as the CSS selector `html.dark`.\n- Tailwind allows us to define data-* attributes to set dark mode, not just classes. For example, I use data-mode=\"dark\", so I thought it's a simpler way to do this. @cprcrack\n- I wonder why this isn't supported by default...\n- Thanks. But I wish I could use *Tailwind's colors* not arbitrary values somehow.\n- You may need to include a space in `:root [class~=\"dark\"]` or this may not work.\n- if you want to define the colors with the color space, you can do the same with the new color() CSS function (baseline 2023): `\"color(from var(--color-primary) / )\"`. This way you can define the var with any color space, e.g.: `--color-primary: #f7dcd3`\n- @itsjavi `\"color(from var(--color-primary) / )\"` doesn't work.\n- This doesn't work with Tailwind V4, right? How would this look like with v4, using the @theme rule?\n- I added a new part to my answer and will update it when I find a better way. @kadrian","metadata":{"transformedAt":"2026-08-18T18:33:42.899Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":205,"estimatedTokens":1267}}215{"id":"stack-68020378","source":"stackoverflow","questionId":68020378,"title":"How to use template literals in tailwindcss to change classes dynamically?","tags":["css","reactjs","templates","next.js","tailwind-css"],"text":"Title: How to use template literals in tailwindcss to change classes dynamically?\nTags: css, reactjs, templates, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI tried to change it with this line of code it but it doesn't work\n\n```\nconst [click, setClick] = useState(false);\n\nconst closeNav = () => {\n setClick(!click);\n};\n\nconst openNav = () => {\n setClick(!click);\n};\n\n \n;\n```\n\n========================================\n\nTop Answer:\n```\nconst bgClass: any = {\ngray: \" bg-gray-300\",\nred: \" bg-red-300\",\norange: \" bg-orange-300\",\nyellow: \" bg-yellow-300\",\ngreen: \" bg-green-300\",\nteal: \" bg-teal-300\",\nblue: \" bg-blue-300\",\nindigo: \" bg-indigo-300\",\npurple: \" bg-purple-300\",\npink: \" bg-pink-300 \",\n```\n\n}\n\n```\nconst convertLabelToBg = (label: string, baseClass: string): string => {\n let className: string = baseClass;\n if (label) {\n className += bgClass[label];\n }\n return className;\n}\n```\n\nIt worked for me.\nI have followed the documentation.\n\nhttps://tailwindcss.com/docs/content-configuration#dynamic-class-names\n\n========================================\n\nCode:\n```text\nconst [click, setClick] = useState(false);\n\nconst closeNav = () => {\n setClick(!click);\n};\n\nconst openNav = () => {\n setClick(!click);\n};\n\n<div\n className=\" absolute inset-0 ${click ? translate-x-0 : -translate-x-full } \n transform z-400 h-screen w-1/4 bg-blue-300 \"\n>\n <XIcon onClick={closeNav} className=\" absolute h-8 w-8 right-0 \" />\n</div>;\n```\n\n```text\n<div className={`absolute inset-0 ${click ? 'translate-x-0' : '-translate-x-full'} transform z-400 h-screen w-1/4 bg-blue-300`}></div>\n\n// Alternatively (without template literals):\n<div className={'absolute inset-0 ' + (click ? 'translate-x-0' : '-translate-x-full') + ' transform z-400 h-screen w-1/4 bg-blue-300'}></div>\n```\n\n```text\n<div className={`text-${error ? 'red' : 'green'}-600`}></div>\n```\n\n```text\n<div className={`${error ? 'text-red-600' : 'text-green-600'}`}></div>\n\n// following is also valid if you don't need to concat the classnames\n<div className={error ? 'text-red-600' : 'text-green-600'}></div>\n```\n\n```text\nconst bgClass: any = {\ngray: \" bg-gray-300\",\nred: \" bg-red-300\",\norange: \" bg-orange-300\",\nyellow: \" bg-yellow-300\",\ngreen: \" bg-green-300\",\nteal: \" bg-teal-300\",\nblue: \" bg-blue-300\",\nindigo: \" bg-indigo-300\",\npurple: \" bg-purple-300\",\npink: \" bg-pink-300 \",\n```\n\n```text\nconst convertLabelToBg = (label: string, baseClass: string): string => {\n let className: string = baseClass;\n if (label) {\n className += bgClass[label];\n }\n return className;\n}\n```\n\n========================================\n\nComments:\n- Related: How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?\n- I was puzzled by the bug which was caused by template literal concatanations, thank you! Didn't know it was also warned against in docs: tailwindcss.com/docs/…\n- You can safelist classes if you need to interpolate/concatenate template literals. tailwindcss.com/docs/…\n- thank you so much, I was adding class names from props like `bg-${props.color}` and couldn't get the desired result. Above answer helped me.\n- I was about to throw my god damn computer through the roof until I checked your comment, thank you","metadata":{"transformedAt":"2026-08-18T18:33:42.899Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":128,"estimatedTokens":820}}216{"id":"stack-70704377","source":"stackoverflow","questionId":70704377,"title":"Default colors given in tailwind documentation are not working","tags":["css","tailwind-css","tailwind-ui"],"text":"Title: Default colors given in tailwind documentation are not working\nTags: css, tailwind-css, tailwind-ui\nSource: Stack Overflow\n\nQuestion:\nI was trying to use colors such as amber and lime, which are mentioned in the documentation. These colors didn't work. Only colors with names such as the primary color name (eg. red, pink) worked.\n\nColors which are not working: amber, emerald, lime, rose, fuchsia, slate, zinc, and even orange.\n\nI'm using version 2.26, but I used the Tailwind playground to check the versions between 1.9 and 2.25, and still these colors didn't work. Even in the playground, these color names are not suggested.\n\nWhy can't I use these colors?\n\n========================================\n\nTop Answer:\nTry this:\n\n```\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n //just add this below and your all other tailwind colors willwork\n ...colors\n }\n }\n }\n}\n```\n\n========================================\n\nCode:\n```text\n// tailwind.config.js\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n // you can either spread `colors` to apply all the colors\n ...colors,\n // or add them one by one and name whatever you want\n amber: colors.amber,\n emerald: colors.emerald,\n }\n }\n }\n}\n```\n\n```js\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n stone: colors.warmGray,\n sky: colors.lightBlue,\n neutral: colors.trueGray,\n gray: colors.coolGray,\n slate: colors.blueGray,\n }\n }\n }\n}\n```\n\n```text\n/**\n * @deprecated renamed to 'sky' in v2.2\n */\nlightBlue: TailwindColorGroup;\n/**\n * @deprecated renamed to 'stone' in v3.0\n */\nwarmGray: TailwindColorGroup;\n/**\n * @deprecated renamed to 'neutral' in v3.0\n */\ntrueGray: TailwindColorGroup;\n/**\n * @deprecated renamed to 'gray' in v3.0\n */\ncoolGray: TailwindColorGroup;\n/**\n * @deprecated renamed to 'slate' in v3.0\n */\nblueGray: TailwindColorGroup;\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ncolors.d.ts\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n //just add this below and your all other tailwind colors willwork\n ...colors\n }\n }\n }\n}\n```\n\n```text\nstateColor() {\n return this.item.state === \"filled\" ? 'lime-600' :\n this.item.state === 'partial' ? 'yellow-600' :\n this.item.state === 'rejected' ? 'red-600' :\n 'gray-600'\n}\n```\n\n```text\n<div :class=\"'bg-' + stateColor\"></div>\n```\n\n```text\nstateColor() {\n return this.item.state === \"filled\" ? 'bg-lime-600' :\n this.item.state === 'partial' ? 'bg-yellow-600' :\n this.item.state === 'rejected' ? 'bg-red-600' :\n 'bg-gray-600'\n}\n```\n\n```text\n<div :class=\"stateColor\"></div>\n```\n\n```text\nbg-\n```\n\n========================================\n\nComments:\n- Thanks! I'll try this one. I had actually tried using the color names on version3 at tailwind playground but i had not overridden the config file and tried so I could not get those colors. ref-( play.tailwindcss.com/gbngSXMwJt?file=config) .\n- Again, what you have linked is a v2 playground, not v3. There is selector in the top right corner to chose version. Here is v3 playground with colors working out of the box play.tailwindcss.com/AD4gMp7Nxm","metadata":{"transformedAt":"2026-08-18T18:33:42.899Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":158,"estimatedTokens":886}}217{"id":"stack-62118325","source":"stackoverflow","questionId":62118325,"title":"How do you get rid of these SASS linting errors when using Tailwind CSS?","tags":["css","visual-studio-code","sass","prettier","tailwind-css"],"text":"Title: How do you get rid of these SASS linting errors when using Tailwind CSS?\nTags: css, visual-studio-code, sass, prettier, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nhttps://i.sstatic.net/fbarm.png\n\nI'm using Tailwind in a Gatsby project. My environment is Visual Studio Code, using the Prettier code formatter.\n\nHow do I get rid of these linting error alerts?\n\n========================================\n\nTop Answer:\nYou can tell Visual Studio Code's CSS linter to ignore \"Unknown At Rules\" (like `@tailwind`). This will leave the rest of your CSS validation intact:\n\n- Visual Studio Code → Command Palette (e.g., menu *View* → *Command Palette*)* → *Workspace Settings* → Search for: *CSS Unknown At Rules*\n\n- Set to `ignore`\n\nhttps://i.sstatic.net/XX5wP.png\n\nVisual Studio Code can also whitelist specific CSS properties with *\"CSS > Lint: Valid Properties\"*, but it doesn't look like whitelisting specific 'at rules' is supported yet.\n\n========================================\n\nCode:\n```text\n{\n \"css.validate\": false,\n \"less.validate\": false,\n \"scss.validate\": false\n}\n```\n\n```text\nmodule.exports = {\n extends: ['stylelint-config-recommended'],\n rules: {\n \"at-rule-no-unknown\": [\n true,\n {\n ignoreAtRules: [\n \"tailwind\",\n \"apply\",\n \"variants\",\n \"responsive\",\n \"screen\",\n ],\n },\n ],\n \"declaration-block-trailing-semicolon\": null,\n \"no-descending-specificity\": null,\n },\n};\n```\n\n```text\nnpm i stylelint-config-standard -D\n```\n\n```text\nstylelint.config.js\n```\n\n```text\n{\n \"css.validate\": false\n}\n```\n\n```text\n@tailwind\n```\n\n```text\nignore\n```\n\n```text\n\"scss.lint.unknownAtRules\": \"ignore\"\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nUnknown at rule @tailwind\n```\n\n========================================\n\nComments:\n- What's the error? This might help\n- **stylelint** from **shinnosuke watanabe** is no longer available on vscode extensions.\n- @Digvijay after a bit of digging all i can find is ...edit your settings.json file (you can do it per project by putting this file in you project root) `.vscode/settings.json`. Then put in `{ \"scss.validate\": false}` you also lose all other error detection. This answer gets rid of error highlighting on some of tailwinds directives, but not all, and not class names that are listed one after another like I do after using @apply.\n- Worked like a charm!\n- Great! This works fabulously for me. I added \"extend\" to the ignoreAtRules array. I added a polyfill for '.container' because when using tailwind in SCSS doesn't allow you to @apply some responsive classes. Please correct me if I'm doing this wrong. Once again though, thanks for this!\n- You're welcome. Yes, you can modify the `stylelint.config.js` file rules as you see fit. Here is an example with `extend` as you mentioned. From the example, just notice that without `ignoreAtRules[\"tailwind\"...]` you will get `Unexpected unknown at-rule \"@tailwind\"` when configuring Tailwind, e.g. `@tailwind base;`\n- why does this happen? is it a bug with vscode?\n- This is actually the best solution, because turning off the whole scss linting is not a good idea,.\n- Edit: I found a solution to my issue here: codeconcisely.com/posts/tailwind-css-unknown-at-rules I don't see Tailwind CSS in my settings. Are you using Taliwind CSS extension? I am getting `Unknown at rule @tailwind` error in VS Code in my Next.js project installed with @latest together with TS, EsLint and `Tailwind`.","metadata":{"transformedAt":"2026-08-18T18:33:42.899Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":105,"estimatedTokens":881}}218{"id":"stack-63658218","source":"stackoverflow","questionId":63658218,"title":"Tailwind CSS backgroundImage doesn't work for me","tags":["css","background-image","tailwind-css"],"text":"Title: Tailwind CSS backgroundImage doesn't work for me\nTags: css, background-image, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to make TailwindCSS' `backgroundImage` work, and I found help for many other TailwindCSS problems here or on GitHub, but not for this. It's not a complicated task, but still doesn't work.\n\nSo as in the documentation, I want to create 2 simple background image to use for multiple viewsize. It is stated in the documentation https://tailwindcss.com/docs/background-image \"By default, only responsive variants are generated for background image utilities.\"\nIt means, without any further configuration on variants, I should be able to use it for this purpose.\n\nHere is how my `tailwind.config.js` looks like (important part is at the end):\n\n```\nconst plugin = require('tailwindcss/plugin')\nmodule.exports = {\n purge: [\n \"./pages/**/*.vue\",\n \"./components/**/*.vue\",\n \"./plugins/**/*.vue\",\n \"./static/**/*.vue\",\n \"./store/**/*.vue\"\n ],\n theme: {\n extend: {\n minHeight: {\n '120': '30rem',\n },\n height: {\n '15': '3.75rem',\n '17': '4.25rem',\n '7': '1.75rem',\n '75': '18.75rem',\n },\n width: {\n '15': '3.75rem',\n open: '11.875rem',\n '75': '18.75rem',\n },\n margin: {\n '7': '1.75rem',\n '17': '4.25rem',\n '27': '6.75rem',\n },\n padding: {\n '7': '1.75rem',\n },\n borderWidth: {\n '5': '5px',\n },\n fontSize: {\n '5xl': '3.375rem',\n 'xxl': '1.375rem',\n },\n boxShadow: {\n 'lg': '0px 0px 10px #00000033',\n 'xl': '0px 0px 20px #00000080',\n },\n gap: {\n '7': '1.75rem',\n },\n inset: {\n '10': '2.5rem',\n '11': '2.75rem',\n '17': '4.25rem',\n '1/2': '50%',\n },\n backgroundImage: {\n 'hero-lg': \"url('/storage/img/sys/lg-hero.jpg')\",\n 'hero-sm': \"url('/storage/img/sys/sm-hero.jpg')\",\n },\n }\n },\n variants: {\n opacity: ['group-hover'],\n backgroundOpacity: ['group-hover'],\n },\n plugins: []\n}\n```\n\nJust to make sure I included the full content. And this is how the html looks like:\n\n```\n\n potato\n\n```\n\nAs I said, nothing special, `npm run dev` finishes without any error, but if I inspect the element, I cannot see anything related to any background parameter in CSS. Even the example from documentation doesn't work, which should have to provide a gradient block.\n\nI am using TailwindCSS with Laravel.\n\nHow can I proceed? (I can do workaround using CSS code in my sass file, but I want to use Tailwind's own solution).\n\n========================================\n\nTop Answer:\nI was having this issue in TailwindCSS 2.2.7 My issue was that my syntax was wrong.\n\n**tailwindcss.config.js:**\n\n```\ntheme: {\n backgroundImage: {\n 'pack-train': \"url('../public/images/packTrain.jpg')\",\n },\n```\n\n**App.js**\n\n```\n\n```\n\nThe `'` and `\"` are critical. For some reason eslint was going in and \"cleaning\" those characters up on save, which was making it not work. Also, the `../` leading the `url` was also critical.\n\n========================================\n\nCode:\n```js\nconst plugin = require('tailwindcss/plugin')\nmodule.exports = {\n purge: [\n \"./pages/**/*.vue\",\n \"./components/**/*.vue\",\n \"./plugins/**/*.vue\",\n \"./static/**/*.vue\",\n \"./store/**/*.vue\"\n ],\n theme: {\n extend: {\n minHeight: {\n '120': '30rem',\n },\n height: {\n '15': '3.75rem',\n '17': '4.25rem',\n '7': '1.75rem',\n '75': '18.75rem',\n },\n width: {\n '15': '3.75rem',\n open: '11.875rem',\n '75': '18.75rem',\n },\n margin: {\n '7': '1.75rem',\n '17': '4.25rem',\n '27': '6.75rem',\n },\n padding: {\n '7': '1.75rem',\n },\n borderWidth: {\n '5': '5px',\n },\n fontSize: {\n '5xl': '3.375rem',\n 'xxl': '1.375rem',\n },\n boxShadow: {\n 'lg': '0px 0px 10px #00000033',\n 'xl': '0px 0px 20px #00000080',\n },\n gap: {\n '7': '1.75rem',\n },\n inset: {\n '10': '2.5rem',\n '11': '2.75rem',\n '17': '4.25rem',\n '1/2': '50%',\n },\n backgroundImage: {\n 'hero-lg': \"url('/storage/img/sys/lg-hero.jpg')\",\n 'hero-sm': \"url('/storage/img/sys/sm-hero.jpg')\",\n },\n }\n },\n variants: {\n opacity: ['group-hover'],\n backgroundOpacity: ['group-hover'],\n },\n plugins: []\n}\n```\n\n```html\n<div class=\"bg-hero-sm lg:bg-hero-lg h-24 w-24\">\n potato\n</div>\n<div class=\"h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500\"></div>\n```\n\n```text\nbackgroundImage\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nnpm run dev\n```\n\n```text\nbackgroundImage: (theme) => {\n 'hero-lg': \"url('/storage/img/sys/lg-hero.jpg')\",\n 'hero-sm': \"url('/storage/img/sys/sm-hero.jpg')\",\n },\n```\n\n```text\nbackgroundImage: (theme) => {\n 'hero-lg': \"url('../storage/img/sys/lg-hero.jpg')\",\n 'hero-sm': \"url('../storage/img/sys/sm-hero.jpg')\",\n },\n```\n\n```text\nmodule.exports = {\ntheme: {\n extend: {\n backgroundImage: theme => ({\n 'hero-pattern': \"url('/img/hero-pattern.svg')\",\n 'footer-texture': \"url('/img/footer-texture.png')\",\n })\n }\n}\n```\n\n```text\nbg-hero-pattern\n```\n\n```text\ntheme: {\n backgroundImage: {\n 'pack-train': \"url('../public/images/packTrain.jpg')\",\n },\n```\n\n```text\n<div className=\"rounded-lg shadow-lg mb-2 h-screen bg-pack-train flex flex-col sm:mx-8\"></div>\n```\n\n```text\n'\n```\n\n```text\n\"\n```\n\n```text\n../\n```\n\n```text\nurl\n```\n\n```text\n<div class=\"bg-[url('../public/assets/images/banner.svg')]\">\n```\n\n```text\ntailwindcss.config.js\n```\n\n```text\ndiv\n```\n\n```text\nextend: {\n backgroundImage: {\n \n 'hero-pattern': \"url('../src/assets/images/bg.png')\",\n\n }\n}\n```\n\n```text\n<div className=\"h-screen bg-hero\"/>\n```\n\n```text\nimport m5 from '../Assets/a2.avif'\n```\n\n```text\n<div style={{ backgroundImage: `url(${m5})` }}>\n```\n\n```text\n@tailwind utilities\n```\n\n```text\n@tailwind utilities\n```\n\n```text\nsrc/main.css\n```\n\n```text\nsrc/public/assets\n```\n\n```text\n./public/assets/img.jpg\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme {\n --background-image-orange-gradient: linear-gradient(0deg, rgba(255, 85, 0, 1) 0%, rgba(250, 180, 122, 1) 100%);\n --background-image-logo: url('https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico');\n}\n</style>\n\n<div class=\"p-1 flex gap-1\">\n <!-- Default bg-* utility with background-color property -->\n <div class=\"bg-orange-300 size-32 border-2\"><!-- ... --></div>\n\n <!-- New bg-* utility with background-image property -->\n <div class=\"bg-logo size-32 border-2\"><!-- ... --></div>\n <div class=\"bg-orange-gradient size-32 border-2\"><!-- ... --></div>\n</div>\n```\n\n```text\n@theme\n```\n\n```text\n--background-color-*\n```\n\n```text\n--background-image-*\n```\n\n========================================\n\nComments:\n- Have you tried using `relative path` instead of `url()`?\n- I tried, but it doesn't help. I think regardless the definition of the picture I should see a css parameter of the element with some kind of image path, which if the path is bad would not work, but styles on the elemet are only `element.style { } .w-24 { width: 6rem; } .h-24 { height: 6rem; } *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e2e8f0; } user agent stylesheet div { display: block; }` So I'm missing `.bg-hero-sm {background-image: url('something';}`\n- Which version of tailwindcss are you using?\n- tailwindcss@1.6.2\n- @Repag there is the problem. Background Image is a feature from versión 1.7.0. You need to update you tailwindcss to the last version. I just tried your code with version 1.7.0 and it works like a charm\n- wow, I thought I'm using the latest version, but it seems v1.7 came out on 18th of August, which was later then my initial install. I will try to upgrade and check, and get back to you\n- after the upgrade tailwind is messed up :D so trying to make it work again...\n- Thank you very much, it helped, and now it works. To be honest \"npm install tailwindcss@^1.0 --save-dev\" was not a big help, since it messed up my tailwind. What worked to \"npm uninstall tailwindcss\" first, and then \"npm install tailwindcss\" now I have the new version, and backgroundImage works like a charm! :)\n- but thsi on version 3\n- This is for tailwind 3\n- Typo mistake- its class not a className\n- className is react syntax\n- @KamilZieliński for the last version 4 you change module.exports to export default { content: [ \"./src/**/*.{html,js,ts,jsx,tsx}\", \"./index.html\" ], theme: { extend: { backgroundImage: { 'flutter': \"url('images/flutter.jpg')\", }, }, }, plugins: [], }\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- This was it - and the first time I've seen this relative path even called out. Thanks!","metadata":{"transformedAt":"2026-08-18T18:33:42.899Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":31,"totalLines":367,"estimatedTokens":2376}}219{"id":"stack-66484296","source":"stackoverflow","questionId":66484296,"title":"Some Tailwind styles not working in production with Next.js","tags":["javascript","css","reactjs","next.js","tailwind-css"],"text":"Title: Some Tailwind styles not working in production with Next.js\nTags: javascript, css, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nFor some reason a few styles don't seem to be working in production build hosted on Netlify. This seems to only be happening on a single component. It's a wrapper located at `./layout/FormLayout.tsx` (don't know if that changes anything). Here is the wrapper:\n\n```\nconst FormLayout: React.FC = ({ children, title, description }) => {\n return (\n \n \n \n {title}\n \n {description && (\n \n\n### {description}\n\n )}\n {children}\n \n \n )\n}\n```\n\nand it's used here:\n\n```\nconst Register: React.FC = () => {\n return (\n \n {/* form stuff. styles do work in here */}\n \n )\n}\n```\n\nHere are some of the config files:\n\ntailwind config:\n\n```\nmodule.exports = {\n purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n darkMode: 'class',\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\npostcss config:\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\nHere is a graphical example of what is happening:\n\nhttps://i.sstatic.net/29MPf.png\n\nhttps://i.sstatic.net/ddJOb.png\n\nFor my build command, I use `next build && next export`, and Netlify deploys the `/out` directory.\n\nAll the code is here via github\n\n========================================\n\nTop Answer:\nI had the same issue.\n\nI changed these :\n\n```\npurge: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n```\n\nto these :\n\n```\npurge: [\"./pages/**/*.js\", \"./components/**/*.js\"],\n```\n\nand that's it. problem solved!\nweird issue\n\n========================================\n\nCode:\n```js\nconst FormLayout: React.FC<FormLayout> = ({ children, title, description }) => {\n return (\n <div className=\"w-screen mt-32 flex flex-col items-center justify-center\">\n <div className=\"p-6 flex flex-col items-center justify-center\">\n <h2 className=\"text-4xl font-semibold text-blue-400\">\n {title}\n </h2>\n {description && (\n <h6 className=\"mt-4 text-md font-medium\">{description}</h6>\n )}\n <div className=\"mt-12 w-max\">{children}</div>\n </div>\n </div>\n )\n}\n```\n\n```js\nconst Register: React.FC<RegisterProps> = () => {\n return (\n <FormLayout title=\"Register\" description=\"Register with your email.\">\n {/* form stuff. styles do work in here */}\n </FormLayout>\n )\n}\n```\n\n```js\nmodule.exports = {\n purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n darkMode: 'class',\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```text\n./layout/FormLayout.tsx\n```\n\n```text\nnext build && next export\n```\n\n```text\n/out\n```\n\n```js\nmodule.exports = {\n purge: [\n \"./src/**/*.{js,ts,jsx,tsx}\",\n // Add more here\n ],\n darkMode: 'class',\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```js\nmodule.exports = {\n content: [\n \"./src/**/*.{js,ts,jsx,tsx}\",\n // Add extra paths here\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```js\nmodule.exports = {\n content: [\n // using ./src/ dir\n \"./src/**/*.{js,ts,jsx,tsx}\",\n // using ./ dir\n \"./app/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n // add more paths here\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\npurge\n```\n\n```text\npurge\n```\n\n```text\ntailwind.config.css\n```\n\n```text\npurge: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n```\n\n```text\npurge: [\"./pages/**/*.js\", \"./components/**/*.js\"],\n```\n\n```text\nmd:w-1/4\n```\n\n```text\nsm:w-1/4\n```\n\n```text\nsm:w-1/4\n```\n\n```text\npurge: [...\n```\n\n```text\ncontent: [\n // ...\n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./providers/**/*.{js,ts,jsx,tsx}\", // the key was this line\n ]\n```\n\n```text\ndirectory\n```\n\n```text\ncontent\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nproviders\n```\n\n```text\ncontent\n```\n\n```text\ncontent\n```\n\n```text\nproviders\n```\n\n```text\nimport { useEffect } from \"react\";\nimport Layout from \"../components/Layout\"\n\nimport \"../styles/globals.css\"\n\nfunction MyApp({ Component, pageProps }) {\n\n useEffect(() => {\n import('tw-elements');\n }, []);\n\n return (\n <Layout className=\"scroll-smooth transition-all\">\n <Component {...pageProps} />\n </Layout>\n\n )\n}\n\nexport default MyApp\n```\n\n```text\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n \"./app/**/*.{js,ts,jsx,tsx}\",\n './components/**/*.{js,ts,jsx,tsx}'\n ]\n};\n```\n\n```text\ntailwind.config.js\n```\n\n```text\napp\n```\n\n```text\nexport const content = [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./app/**/*.{js,ts,jsx,tsx}\",\n \"./src/**/*.{js,ts,jsx,tsx}\",\n];\n```\n\n```text\n{js,ts,jsx,tsx}\n```\n\n```text\n{ts,tsx,js,jsx}\n```\n\n```text\n.next\n```\n\n```text\nyarn build\n```\n\n========================================\n\nComments:\n- for some of you, add `important: true` in `tailwind.config.js` before `content:[]` with in the brackets `{}` and it should work fine.\n- Thanks, default config had darkMode: false, changed it to 'class' and my classNames started working.\n- Well just so you know, changing it to class means that if there's an element with a class of `dark`, each child can use Tailwind's `dark:` prefix.\n- Oh I forgot to add /layouts/ in the purge array. It was driving me crazy, thank you very much!\n- This is awesome! I was scratching my head for a couple of days, why this was not working. Strange that this was working perfectly in dev but not on prod. Thanks :)\n- @JeremyRajan it's because this config is only used when compiling for production. It's used to discover which classes should be saved from tree-shaking. More info is here.\n- You're the best\n- After spending 3 hours trying to figure out what was wrong, this finally solved it for me. Thanks!\n- `\"./src/**/*.{js,ts,jsx,tsx}\",` worked for me\n- `\"./components/**/*.{js,ts,jsx,tsx}\",` was such a clutch suggestion\n- separating extensions solved the issue `[\"./components/**/*.ts\", \"./components/**/*.tsx\"]`","metadata":{"transformedAt":"2026-08-18T18:33:42.899Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":36,"totalLines":370,"estimatedTokens":1603}}220{"id":"stack-57669027","source":"stackoverflow","questionId":57669027,"title":"How do you add Tailwind CSS into a Blazor App?","tags":["asp.net-core","webpack","blazor","tailwind-css","asp.net-core-3.0"],"text":"Title: How do you add Tailwind CSS into a Blazor App?\nTags: asp.net-core, webpack, blazor, tailwind-css, asp.net-core-3.0\nSource: Stack Overflow\n\nQuestion:\nIn particular, I'm using Blazor (server hosted) with ASP.NET Core Preview 8. I tried adding it using LibMan, but that seems to be more about downloading files from a CDN. I'd like to introduce Tailwind to my build process.\n\nIs this a case where I should use something like Webpack? If so, how do I make Webpack part of my build process?\n\n========================================\n\nTop Answer:\nI recently asked myself the same question. I decided that I didn't like a package.json or the node_modules directory in the project. For these reasons I created a NuGet package with a new build action.\n\nWith this build action you can simply give your stylesheet the build action \"TailwindCSS\" and during the build process the stylesheet will be converted via PostCSS.\n\nFor more details you can take a look on its GitHub repo.\n\n========================================\n\nCode:\n```text\nnpm init -y\n```\n\n```json\n{\n \"name\": \"holly\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\"\n}\n```\n\n```text\nnpm install -D tailwindcss cross-env\n```\n\n```text\nnpx tailwindcss init\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./**/*.{razor,cshtml,html}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```css\n@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n```\n\n```json\n{\n \"name\": \"holly\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"dependencies\": {},\n \"devDependencies\": {\n \"cross-env\": \"^7.0.3\",\n \"tailwindcss\": \"^3.2.4\"\n },\n \"scripts\": {\n \"build\": \"cross-env NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./Styles/app.css -o ./wwwroot/css/app.css\",\n \"watch\": \"cross-env NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./Styles/app.css -o ./wwwroot/css/app.css --watch\",\n \"release\": \"cross-env NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./Styles/app.css -o ./wwwroot/css/app.css --minify\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\"\n}\n```\n\n```xml\n<Project Sdk=\"Microsoft.NET.Sdk.Web\">\n <PropertyGroup>\n <TargetFramework>net6.0</TargetFramework>\n <Nullable>enable</Nullable>\n <ImplicitUsings>enable</ImplicitUsings>\n\n <NpmLastInstall>node_modules/.last-install</NpmLastInstall>\n </PropertyGroup>\n\n <!-- Items removed for brevity --> \n\n <Target Name=\"CheckForNpm\" BeforeTargets=\"NpmInstall\">\n <Exec Command=\"npm -v\" ContinueOnError=\"true\">\n <Output TaskParameter=\"ExitCode\" PropertyName=\"ErrorCode\" />\n </Exec>\n <Error Condition=\"'$(ErrorCode)' != '0'\" Text=\"You must install NPM to build this project\" />\n </Target>\n\n <Target Name=\"NpmInstall\" BeforeTargets=\"BuildCSS\" Inputs=\"package.json\" Outputs=\"$(NpmLastInstall)\">\n <Exec Command=\"npm install\" />\n <Touch Files=\"$(NpmLastInstall)\" AlwaysCreate=\"true\" />\n </Target>\n\n <Target Name=\"BuildCSS\" BeforeTargets=\"Compile\">\n <Exec Command=\"npm run build\" Condition=\" '$(Configuration)' == 'Debug' \" />\n <Exec Command=\"npm run release\" Condition=\" '$(Configuration)' == 'Release' \" />\n </Target>\n</Project>\n```\n\n```yaml\nname: production-deployment\n\non:\n push:\n branches: [ master ]\n\nenv:\n AZURE_WEBAPP_NAME: holly\n AZURE_WEBAPP_PACKAGE_PATH: './Holly'\n DOTNET_VERSION: '6.0.x'\n NODE_VERSION: '12.x'\n\njobs:\n build-and-deploy-holly:\n runs-on: ubuntu-latest\n steps:\n # Checkout the repo\n - uses: actions/checkout@master\n\n # Setup .NET Core 6 SDK\n - name: Setup .NET Core ${{ env.DOTNET_VERSION }}\n uses: actions/setup-dotnet@v1\n with:\n dotnet-version: ${{ env.DOTNET_VERSION }}\n\n # We need Node for npm!\n - name: Setup Node.js ${{ env.NODE_VERSION }}\n uses: actions/setup-node@v1\n with:\n node-version: ${{ env.NODE_VERSION }}\n\n # Run dotnet build and publish for holly\n - name: Dotnet build and publish for holly\n env:\n NUGET_USERNAME: ${{ secrets.NUGET_USERNAME }}\n NUGET_PASSWORD: ${{ secrets.NUGET_PASSWORD }}\n run: |\n cd '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}'\n dotnet build --configuration Release /warnaserror\n dotnet publish -c Release -o 'app'\n\n # Deploy holly to Azure Web apps\n - name: 'Run Azure webapp deploy action for holly using publish profile credentials'\n uses: azure/webapps-deploy@v2\n with:\n app-name: ${{ env.AZURE_WEBAPP_NAME }} # Replace with your app name\n publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }} # Define secret variable in repository settings as per action documentation\n package: '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}/app'\n```\n\n```text\nnpm install webpack webpack-cli --save-dev\n```\n\n```text\nnpm install css-loader postcss-loader mini-css-extract-plugin --save-dev\nnpm install tailwindcss postcss-import\n```\n\n```text\nconst path = require('path');\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n\nconst bundleFileName = 'holly';\nconst dirName = 'Holly/wwwroot/dist';\n\nmodule.exports = (env, argv) => {\n return {\n mode: argv.mode === \"production\" ? \"production\" : \"development\",\n entry: ['./Holly/wwwroot/js/app.js', './Holly/wwwroot/css/styles.css'],\n output: {\n filename: bundleFileName + '.js',\n path: path.resolve(__dirname, dirName)\n },\n module: {\n rules: [{\n test: /\\.css$/,\n use: [\n MiniCssExtractPlugin.loader,\n 'css-loader',\n 'postcss-loader'\n ]\n }]\n },\n plugins: [\n new MiniCssExtractPlugin({\n filename: bundleFileName + '.css'\n })\n ]\n };\n};\n```\n\n```text\nmodule.exports = {\n plugins: [\n require('postcss-import'),\n require('tailwindcss'),\n require('autoprefixer'),\n ]\n}\n```\n\n```text\n@import \"tailwindcss/base\";\n@import \"./holly-base.css\";\n\n@import \"tailwindcss/components\";\n@import \"./holly-components.css\";\n\n@import \"tailwindcss/utilities\";\n```\n\n```text\n\"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n \"build\": \"webpack --progress --profile\",\n \"watch\": \"webpack --progress --profile --watch\",\n \"production\": \"webpack --progress --profile --mode production\"\n },\n```\n\n```text\nnpm run build\n```\n\n```text\nnpm run watch\n```\n\n```text\n# Latest .NET Core from https://hub.docker.com/_/microsoft-dotnet-core-sdk/ (not the nightly one)\nFROM mcr.microsoft.com/dotnet/core/sdk:3.0.100-preview9-disco AS build-env\n\n# Setup npm!\nRUN apt-get -y update && apt-get install npm -y && apt-get clean\n\nWORKDIR /app\nCOPY . ./\n\n# To run Tailwind via Webpack/Postcss\nRUN npm install\nRUN npm run production\n\nRUN dotnet restore \"./Holly/Holly.csproj\"\nRUN dotnet publish \"./Holly/Holly.csproj\" -c Release -o out\n```\n\n```text\nnpm\n```\n\n```text\npackage.json\n```\n\n```text\nname\n```\n\n```text\ncross-env\n```\n\n```text\ncontent\n```\n\n```text\nStyles\n```\n\n```text\napp.css\n```\n\n```text\npackage.json\n```\n\n```text\nbuild\n```\n\n```text\nDEBUG\n```\n\n```text\nwatch\n```\n\n```text\nrelease\n```\n\n```text\nHolly.csproj\n```\n\n```text\nNpmLastInstall\n```\n\n```text\nTarget\n```\n\n```text\n.csproj\n```\n\n```text\nDEBUG\n```\n\n```text\nnpm run build\n```\n\n```text\nRELEASE\n```\n\n```text\nnpm run release\n```\n\n```text\nnpm install\n```\n\n```text\nnpm install\n```\n\n```text\npackage.json\n```\n\n```text\nnpm\n```\n\n```text\n.csproj\n```\n\n```text\nF5\n```\n\n```text\nSetup Node.js\n```\n\n```text\nnpm\n```\n\n```text\ndotnet build\n```\n\n```text\ndotnet build\n```\n\n```text\ncross-env\n```\n\n```text\nnpm init\n```\n\n```text\npackage.json\n```\n\n```text\nwebpack.config.js\n```\n\n```text\nwebpack.config.js\n```\n\n```text\nstyles.css\n```\n\n```text\npostcss-import\n```\n\n```text\nholly.css\n```\n\n```text\npostcss.config.js\n```\n\n```text\npostcss-import\n```\n\n```text\nstyles.css\n```\n\n```text\npostcss-import\n```\n\n```text\n@import\n```\n\n```text\nnpm\n```\n\n```text\nstyles.css\n```\n\n```text\nholly.css\n```\n\n```text\nnpm run production\n```\n\n```text\nDockerfile\n```\n\n```text\nwebpack\n```\n\n```text\nnodejs / npm\n```\n\n```text\nexe\n```\n\n```text\n<head>\n...\n<title>Tailwind via Play CDN</title>\n<base href=\"/\" />\n<script src=\"https://cdn.tailwindcss.com\"></script>\n```\n\n```html\nmodule.exports = {\n content: [],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```html\nmodule.exports = {\n content: [\"./src/**/*.{razor,html,cshtml}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```html\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```html\n<head>\n ...\n <title>Tailwind via NPM</title>\n <base href=\"/\" />\n <link href=\"app.css\" rel=\"stylesheet\" />\n</head>\n```\n\n```html\nmodule.exports = {\n content: [\"./src/**/*.{razor,html,cshtml}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```html\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```html\n<head>\n ...\n <title>Tailwind via Standalone CLI</title>\n <base href=\"/\" />\n <link href=\"app.css\" rel=\"stylesheet\" />\n</head>\n```\n\n```text\nindex.html\n```\n\n```text\n_hosts.cshtml\n```\n\n```text\nNPM\n```\n\n```text\nNPM\n```\n\n```text\nnpm install -g tailwindcss\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ncshtml\n```\n\n```text\nHTML\n```\n\n```text\nRazor\n```\n\n```text\nnpx tailwindcss -i path-to-file-we-created/file-name.css -o ./wwwroot/app.css --watch\n```\n\n```text\nwwwroot\n```\n\n```text\n./tailwindcss init\n```\n\n```text\nnpx tailwindcss -i path-to-file-we-created/file-name.css -o ./wwwroot/app.css --watch\n```\n\n========================================\n\nComments:\n- As Blazor continues to grow this question's importance will increase. I have made an edit and hope it can be reopened because it needs an update.\n- It seems to be a reasonable \"how to\" question.\n- How this has no upvotes is beyond me. This is probably the simplest answer I've found in about an hour of research.\n- In full VS, following code.visualstudio.com/api/working-with-extensions/… you can add the webpack and webpack-dev scripts to the package.json then in vs package manager console you can type npm run webpack-dev to start watching the css files for automatic rebuild on save\n- I realised later that you actually did the same above in your walkthrough just with a different name. The only difference is I ran the watch from the PMC rather than from a standalone command window. Though that blocks the PMC from being used to install nuget packages so you have to stop the watch to do that.\n- @Mitkins Do you have something on Github i can look at. I kinda got lost and don't understand the project structure\n- Very helpful. I can't get \"watch\" to detect changes even using your tailwind config, but I'll figure it out.\n- @kenchilada did you set the `content` property?\n- @Mitkins yes I copy/pasted your example. I'm on Windows and I found it is related to running watch in WSL ubuntu. If I run watch directly on the windows host, it does work.\n- Oh, I see. I haven't tried running the code in WSL. Thanks for the heads up! I'll slot this away if I end up doing the same thing\n- I like this. But what are the prerequisites? I assume node & npm, plus some installed packages?\n- Yes, you are right. It depends on node & npm, the needed packages (tailwindcss, postcss, ..) will be installed by the MSBuild target.\n- I've installed the extension a blazor project,but I found no way to configure input css path\n- tried your solution and added Exec Command in myproject.csproj,css is created only on project first run,then is never rebuild","metadata":{"transformedAt":"2026-08-18T18:33:42.899Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":92,"totalLines":623,"estimatedTokens":2972}}221{"id":"stack-70584680","source":"stackoverflow","questionId":70584680,"title":"Problem with arbitrary values on Tailwind with React","tags":["javascript","reactjs","tailwind-css"],"text":"Title: Problem with arbitrary values on Tailwind with React\nTags: javascript, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to make a react component that changes the width from a parameter but it's doesn't work and I don't know why.\n\n```\nfunction Bar() {\n \n const p =80\n\n const style = `bg-slate-500 h-8 w-[${p.toFixed(1)}%]`\n\n console.log(style)\n\n return (\n \n \n \n \n )\n}\nexport default Bar\n```\n\nWith this code I get a full-size bar, but if I use a strict String with 80.0 it works fine\n\n========================================\n\nTop Answer:\nI had exactly the same problem as you.\n\n```\nconst p =80\n\n```\n\nThe above code set \"w-[${p}%]\" as \"w-80%\" *dynamically* on the server side. However Tailwind has no ability to deal with the arbitrary values computed dynamically.\n\nThe official Tailwind docs say;\n\nhttps://i.sstatic.net/egMJ0.png\n\nTo work around this problem, we need to use `style` attribute like following in which we are not able to use TailwindCSS anymore😅;\n\n```\n\n```\n\nSee the discussions on GitHub\n\nI hope it helps you a lot.\n\n========================================\n\nCode:\n```text\nfunction Bar() {\n \n const p =80\n\n const style = `bg-slate-500 h-8 w-[${p.toFixed(1)}%]`\n\n console.log(style)\n\n return (\n <div className=' h-8 w-full'>\n <div className={`bg-slate-500 h-8 w-[${p}%]`}>\n </div>\n </div>\n )\n}\nexport default Bar\n```\n\n```js\n<div class=\"text-{{ error ? 'red' : 'green' }}-600\"></div>\n```\n\n```js\n<div class=\"{{ error ? 'text-red-600' : 'text-green-600' }}\"></div>\n```\n\n```text\nstyle\n```\n\n```text\nscript\n```\n\n```text\nmodule.exports = {\n //other options\n mode: 'jit',\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmode: 'jit'\n```\n\n```text\nmodule.exports = {\ncontent: [\"./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}\"],\nAdding a safelist and classes to it:\nsafelist: [\"lg:grid-cols-[1fr_4fr]\", \"lg:grid-cols-[1fr_3fr_1fr]\"],\n...\n```\n\n```text\ntheme: {\n extend: {\n spacing: {\n \"p-value\": \"80%\",\n },\n }, \n}\n```\n\n```text\n<div className=\"bg-slate-500 h-8 w-p-value\">\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nconst p =80\n<div className={`bg-slate-500 h-8 w-[${p}%]`}>\n```\n\n```text\n<div\n style={{width: `${p}%`}} \n className={`bg-slate-500 h-8`}>\n```\n\n```text\nstyle\n```\n\n```text\n<div className={`bg-red-500 flex w-[70%] h-[70%]`} style={{boxShadow: `${horizantal}px ${vertical}px ${blur}px ${spraied}px ${color}`}}\n```\n\n========================================\n\nComments:\n- You're using arbitrary values incorrectly. Have a look at the first paragraph under `Dynamic values` v2.tailwindcss.com/docs/… `your classes need to exist as complete strings for Tailwind to detect them correctly`.\n- You can use css variables in some caese `text-[color:var(--your-val)]` and that pass it through `style={ { '--your-var': '#fff' }}`\n- What is your filename? Including extension\n- Newer docs for V3+: tailwindcss.com/docs/content-configuration#dynamic-class-nam‌​es\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- How would you handle templates or liquid engines for instance Shopify theme or email templating?\n- Why is the first approach wrong?\n- @sir v2.tailwindcss.com/docs/… , also applies to V3 unless they changed it recently\n- You still need to manually enable `jit` in tailwind.config as of today. The thing OP did wrong was use string concatenation to build the class, as described in the docs under \"Dynamic Values\" here. v2.tailwindcss.com/docs/just-in-time-mode#overview\n- @sir because Tailwind is generating classes at build time and won't be aware of the value of `padding`, so the class `p-[80%]` won't be exported. Nevertheless, if you add `p-[80%]` in the safelist array, Tailwind will then add this class at build time. But there is no point on doing this because it would only work for `padding = 80;`\n- @MaximeLechevallier but inline styles are insecure aren't they? For instance, CORS policy can only permit them with unsafe inline, which is really not always an option... Also, this completely defeats the purpose of tailwind by working around its API doesn't it?\n- @ecoe I agree with you, my last sentence meant that there is no point on writing the code this way, just go for ``. (btw not sure it's the best way to write it, `p-4/5` looks nicer). Anyway my bad, I haven't fully read the code of the question.\n- @MaximeLechevallier I'm still not sure if I what you meant. Ever since V2 tailwind has supported \"JIT\", which means you can write dynamic class names like `` as stated in docs. So, as long as there is a predefined (at build-time) super set of options, you can *dynamically* generate classes still.\n- @ecoe Hmm right, haven't seen he was using \"JIT\" (brackets signature), then my answer is pointless, no need of the safelist.\n- I encountered this issue when I applying min height to a div, but I came across a weird behaviour. While according to the docs as @wizard003 mentioned, I should not be using string interpolated class names, I manage to get tailwind to pick up on specific numbers such as 800 but not the others. Using the solution above didn't make a difference. I did notice, however, by including a static class name (ie: `min-h-[1000px]`) tailwind was able to generate the appropriate class name. Any ideas on alternatives to this solution? I'm trying to create templated pages with react and I'm getting stumped.\n- Honestly, this should be the accepted answer","metadata":{"transformedAt":"2026-08-18T18:33:42.899Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":171,"estimatedTokens":1417}}222{"id":"stack-70304366","source":"stackoverflow","questionId":70304366,"title":"Tailwind V3 causing TypeError: Cannot read property '500' of undefined","tags":["javascript","reactjs","next.js","tailwind-css"],"text":"Title: Tailwind V3 causing TypeError: Cannot read property '500' of undefined\nTags: javascript, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI recently tried to upgrade my project to tailwind css and I'm getting this error\n\nhttps://i.sstatic.net/cR5YU.png\n\nthis is my tailwind config\n\n```\nmodule.exports = {\n mode: \"jit\",\n purge: [\"./pages/**/*.{js,ts,jsx,tsx}\", \"./components/**/*.{js,ts,jsx,tsx}\"],\n darkMode: \"class\", // or 'media' or 'class'\n theme: {\n extend: {\n colors: {\n secondaryDark: \"#171A1A\",\n primaryDark: \"#090A0A\",\n neonOrange: \"#FF9933\",\n redditRed: \"#FF5700\",\n cardGradientPrimary: \"#ff930f\",\n cardGradientSecondary: \"#fff95b\",\n },\n },\n },\n variants: {\n extend: {},\n },\n plugins: [require(\"@tailwindcss/forms\")],\n };\n```\n\n========================================\n\nTop Answer:\ntry this :\n\n***npm install -D @tailwindcss/forms@next***\n\nto update the plugins @tailwindcss/forms\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n mode: \"jit\",\n purge: [\"./pages/**/*.{js,ts,jsx,tsx}\", \"./components/**/*.{js,ts,jsx,tsx}\"],\n darkMode: \"class\", // or 'media' or 'class'\n theme: {\n extend: {\n colors: {\n secondaryDark: \"#171A1A\",\n primaryDark: \"#090A0A\",\n neonOrange: \"#FF9933\",\n redditRed: \"#FF5700\",\n cardGradientPrimary: \"#ff930f\",\n cardGradientSecondary: \"#fff95b\",\n },\n },\n },\n variants: {\n extend: {},\n },\n plugins: [require(\"@tailwindcss/forms\")],\n };\n```\n\n========================================\n\nComments:\n- Not sure if this will fix your error, but you should modify your config first. `mode: jit` is no longer required, use `content` instead of `purge`, and update `@tailwindcss/forms` to `0.4.0` or above. Also, delete `.next` and try rebuilding.\n- Thanks this helped I also had to update tailwind UI\n- Updating tailwind forms helper me\n- Try adding v0.4.0-alpha.2 with this command: npm install -D @tailwindcss/forms@next\n- it solves like a charm\n- Nice. Can confirm this works for forms 0.5.0 too.","metadata":{"transformedAt":"2026-08-18T18:33:42.899Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":1,"totalLines":80,"estimatedTokens":530}}223{"id":"stack-66025707","source":"stackoverflow","questionId":66025707,"title":"How do you set a full page background color in Tailwind css?","tags":["tailwind-css"],"text":"Title: How do you set a full page background color in Tailwind css?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow do you set the full page background in Tailwind?\n\nThe only attribute I can see to use is `h-screen`, but that doesn't work when I resize the browser.\n\nhttps://i.sstatic.net/OZ7Yy.png\n\nHere's my code:\n\n```\n\n```\n\nFull html example:\n\n```\n\n \n \n lkjh\n \n \n \n\n \n \na\na\n\na\n\na\n\na\n\na\na\na\na\na\n\n \n\n```\n\ncss file\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n`\"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.0.2\"`\n\n========================================\n\nTop Answer:\n### Short answer\n\nchange `h-screen` to `min-h-screen`.\n\n### But why?\n\n`h-screen` :takes height of the viewport.\n\n### What happens when scrolled ?\n\n```\nNow the `total height` is `viewport height + scrolled height`\n 👆 👆\n h-screen extra height\n```\n\nSo it doesn't expand itself to have height of the entire screen during scroll, So this can be overcomed by using `min-h-screen`, meaning minimum should be the viewport height and in the occurance of scroll , expand yourself to have maximum possible height.\n\n========================================\n\nCode:\n```html\n<body class=\"h-screen bg-gradient-to-b from-gray-100 to-gray-300\">\n```\n\n```html\n<!doctype html>\n\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>lkjh</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <link rel=\"stylesheet\" href=\"css/main.css\">\n </head>\n\n <body class=\"h-screen bg-gradient-to-b from-gray-100 to-gray-300\">\n <br />a<br />a<br /><br /><br /><br /><br /><br />a<br /><br /><br /><br />a<br /><br /><br />a<br /><br />a<br />a<br />a<br />a<br />a<br />\n </body>\n</html>\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nh-screen\n```\n\n```text\n\"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.0.2\"\n```\n\n```text\nh-screen\n```\n\n```text\nmin-h-screen\n```\n\n```text\nNow the `total height` is `viewport height + scrolled height`\n 👆 👆\n h-screen extra height\n```\n\n```text\nh-screen\n```\n\n```text\nmin-h-screen\n```\n\n```text\nh-screen\n```\n\n```text\nmin-h-screen\n```\n\n========================================\n\nComments:\n- It's working for my codebase on the latest tailwind version. Can you please the skeleton code.\n- this worked for me, looking at docs, still not sure why only h-screen left my bottom screen unfullfilled","metadata":{"transformedAt":"2026-08-18T18:33:42.900Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":153,"estimatedTokens":629}}224{"id":"stack-72481680","source":"stackoverflow","questionId":72481680,"title":"Tailwind's background color is not being applied when added dynamically","tags":["reactjs","tailwind-css"],"text":"Title: Tailwind's background color is not being applied when added dynamically\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to set dynamic background colors using Tailwind.\n\nHowever, the background color is not being applied to the div. I am confused because when I check the inspector, I can see that in the browser, the correct bg-${colors[index]} was applied to each div, but the color is not being rendered.\n\n```\nconst colors = ['#7a5195', '#bc5090','#ef5675']\n\nexport default function App() {\n const names = ['Tyler', \"Charles\", 'Vince']\n let labels = {}\n\n names.forEach((name,index)=>{\n labels[name] = `bg-[${colors[index]}]`\n })\n\n return (\n <>\n {\n names.map((name)=>{\n return(\n \n {name}\n \n )\n })\n }\n \n \n );\n}\n```\n\n========================================\n\nTop Answer:\nYou can also add classes to your safelist in your tailwind config.\n\n\r\n\r\n\n```\n// tailwind.config.js\n\n// Create an array for all of the colors you want to use\nconst colorClasses = [\n '#7a5195', \n '#bc5090',\n '#ef5675'\n];\n\nmodule.exports = {\n purge: {\n content: [\"./src/**/*.{js,jsx,ts,tsx}\", \"./public/index.html\"],\n // Map over the labels and add them to the safelist\n safelist: [\n ...colorClasses.map((color) => `bg-${color}`)\n ],\n },\n darkMode: false, // or 'media' or 'class'\n variants: {\n extend: {},\n },\n plugins: [require(\"@tailwindcss/forms\")],\n}\n```\n\n\r\n\r\n\r\n\nThis way you can use the colors that were included in the colorClasses array dynamically as they will not be purged.\n\nNote: If you want to do bg-blue-500 for example, you'll need to include all of the color weights as part of the safelist (as well as add that color to the array).\n\n```\n...colorClasses.map((color) => `bg-${color}-500`)\n```\n\n========================================\n\nCode:\n```text\nconst colors = ['#7a5195', '#bc5090','#ef5675']\n\nexport default function App() {\n const names = ['Tyler', \"Charles\", 'Vince']\n let labels = {}\n\n names.forEach((name,index)=>{\n labels[name] = `bg-[${colors[index]}]`\n })\n\n return (\n <>\n {\n names.map((name)=>{\n return(\n <div className={`${labels[name]}`}>\n {name}\n </div>\n )\n })\n }\n \n </>\n );\n}\n```\n\n```js\nconst colors = ['#7a5195', '#bc5090','#ef5675'];\n\nexport default function App() {\n const names = ['Tyler', \"Charles\", 'Vince']\n const labels = {};\n\n names.forEach((name, index) => {\n labels[name] = colors[index];\n });\n\n return (\n <>\n\n {\n names.map((name) => (\n <div style={{ backgroundColor: `${labels[name]}` }}>\n {name}\n </div>\n )\n }\n \n </>\n );\n}\n```\n\n```text\nbg-${color}\n```\n\n```text\nstyle\n```\n\n```text\nbackgroundColor\n```\n\n```js\n// tailwind.config.js\n\n// Create an array for all of the colors you want to use\nconst colorClasses = [\n '#7a5195', \n '#bc5090',\n '#ef5675'\n];\n\nmodule.exports = {\n purge: {\n content: [\"./src/**/*.{js,jsx,ts,tsx}\", \"./public/index.html\"],\n // Map over the labels and add them to the safelist\n safelist: [\n ...colorClasses.map((color) => `bg-${color}`)\n ],\n },\n darkMode: false, // or 'media' or 'class'\n variants: {\n extend: {},\n },\n plugins: [require(\"@tailwindcss/forms\")],\n}\n```\n\n```text\n...colorClasses.map((color) => `bg-${color}-500`)\n```\n\n```text\nclassName={`bg-[${color}]`}\n```\n\n```text\nconst VisitingCard = (props) => {\n\n// Destructuring props for ease of use \nconst { colour, title, handle } = props;\n\n// Object mapping color prop to Tailwind CSS background color classes \nconst colorVariants = {\n green: 'bg-yellow-500',\n yellow: 'bg-red-400',\n blue: 'bg-blue-500'\n };\n\n return (\n <> \n <div className={`w-40 h-20 border ${colorVariants[colour]}`}>\n <div>Title: {title}</div>\n <div>Handle: {handle}</div>\n </div>\n </>\n );\n}\n\nexport default VisitingCard;\n```\n\n```text\n<VisitingCard colour=\"green\" title=\"John Doe\" handle=\"@john_doe\"/>\n```\n\n```text\ncolorVariants\n```\n\n```text\n<div class=\"bg-[#bada55] text-[22px] before:content-['Festivus']\">\n <!-- ... -->\n</div>\n```\n\n```text\n\"#bada55\"\n```\n\n```text\n#FF0000\n```\n\n```text\nconst [variantColor, setVariantColor] = useState<string | undefined>(\"\");\nconst colorOptions=[\"#00FFFF\",\"#FAEBD7\",\"#DC143C\"]\n\n{colorOptions?.map((color) => { \n return (\n <div key={index} \n style={{\n borderStyle: \"solid\",\n borderColor:\n variantColor === color ? `${color}` : `${color}50`,\n }}\n >\n <div\n onClick={() => setVariantColor(color)}\n style={{\n backgroundColor:\n variantColor === color ? `${color}` : `${color}50`,\n }} \n />\n </div>\n );\n })\n );\n })}\n```\n\n========================================\n\nComments:\n- You can use a whitelist stackoverflow.com/questions/60989191/…\n- For the use of dynamic values in the classes, I made a hidden div at the root, with another div inside with all class names that the dynamic functions will result in. It's a bad format, but you will use all the features of Tailwind like sm:, lg:, and others. Using the style attribute you can't use mediaqueries and other rich features of the Tailwind.\n- @SandroSantos you should look into Tailwind's safelist to prevent adding that hidden div at the root : tailwindcss.com/docs/content-configuration#safelisting-class‌​es\n- Thank you so much!\n- You can use regular expressions to safe multiple classes at once. See tailwindcss.com/docs/content-configuration#safelisting-class‌​es\n- This should be the only valid answer\n- 2024 update: Despite the downvotes, this does work! See the documentation here tailwindcss.com/docs/adding-custom-styles. Make sure to use square brackets and a # before the color.\n- If the primary variants were set before, on the \"tailwind.config\" file, does it work with bg-primary-[${colorNumber}]?","metadata":{"transformedAt":"2026-08-18T18:33:42.900Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":273,"estimatedTokens":1513}}225{"id":"stack-66594385","source":"stackoverflow","questionId":66594385,"title":"How do I modify the default styling of the Typography prose class in TailwindCSS?","tags":["tailwind-css"],"text":"Title: How do I modify the default styling of the Typography prose class in TailwindCSS?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a TailwindCSS 2.0 project and I've installed all the plugins, including the Typography plugin. When I create a div class=\"prose\", I can put any headings, paragraphs, lists, etc into it and it gets styled by the Typography plugin.\n\nIn my project, I want all the within the prose class to be a certain blue, by default. And I also want the links to be a certain link colour that I've defined in my config. These are just a couple of modifications that I want to make so that the default prose class styles everything with my styles. How do I go about that and what is the best practice for it?\n\n========================================\n\nTop Answer:\nYou can also use element-modifiers.\n\n### Example\n\nBasic use example\n\n```\n\n {{ markdown }}\n\n```\n\nA hover example\n\n```\n{{ markdown }}\n```\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n theme: {\n typography: {\n DEFAULT: { // this is for prose class\n css: {\n color: theme('colors.yourSpecificColor'), // change global color scheme\n p: {\n fontSize: '14px', // key can be in camelCase...\n 'text-align': 'center', // or as it is in css (but in quotes).\n },\n a: {\n // change anchor color and on hover\n color: '#03989E',\n '&:hover': { // could be any. It's like extending css selector\n color: '#F7941E',\n },\n },\n ul: {\n '> li': {\n '&::before': { // more complex example - add before to an li element.\n content: '',\n ....,\n },\n },\n },\n },\n },\n sm: { // and this is for prose-sm. \n css: {\n ....\n },\n },\n },\n },\n}\n```\n\n```text\nprose\n```\n\n```text\nprose-sm\n```\n\n```text\nextend: {\n fontSize: {\n 'exampleFont': '36px',\n },\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n html {\n @screen md {\n .text-exampleFont {\n font-size: 48px;\n }\n }\n @screen lg {\n .text-exampleFont {\n font-size: 60px;\n }\n }\n }\n}\n```\n\n```text\n<div class=\"text-exampleFont\">hello</div>\n```\n\n```html\n<article class=\"prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600\">\n {{ markdown }}\n</article>\n```\n\n```html\n<article class=\"prose prose-a:text-blue-600 hover:prose-a:text-blue-500\">{{ markdown }}</article>\n```\n\n```text\n@layer utilities {\n .prose {\n --tw-prose-body: var(--color-text);\n --tw-prose-headings: var(--color-primary);\n --tw-prose-links: var(--color-primary);\n --tw-prose-bold: var(--color-primary-light);\n --tw-prose-hr: var(--color-border);\n --tw-prose-code: var(--color-primary);\n max-width: none; /* Optional: remove width limit */\n }\n\n .prose a:hover {\n color: var(--color-primary-light);\n }\n}\n```\n\n```text\nprose\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- Thanks for this. I realized I didn't read the docs close enough - I got it working. What I'm trying to figure out now is how do I allow for modifying content within .prose? For example, if my default style is set one way, I can't seem to add classes to tags within .prose and have any effect. For example, this does nothing: \n\n### This should turn red but it goes by the theme style\n\n. Any idea on how to allow for modification?\n- Because of a way CSS works - `.prose h2` has higher priority than just one class `.text-red-400`. I guess, class selector 'h2.text-red-400' inside typography object will do the trick, but I never tried. The purpose of prose is styling the content you have no control - like CMS output, etc\n- A NOTE for those of you using this solution. you will want to put the typography under the 'extend or else it will overidde all of the prose defaults\n- They have a new example of making your own color. The example is pink! Cute. See github.com/tailwindlabs/…\n- Sorry for the downvote, but this question is about specifically about the Tailwind Typography plugin that can be found at: tailwindcss.com/docs/typography-plugin\n- This is how I do it mostly since I first posed this question.\n- For the given task *\"In my project, I want all the within the prose class to be a certain blue\"* - this answer sounds like an anti-pattern. Because now instead of adding `class=\"prose\"` to an article OP needs to thoroughly copy the whole `prose prose-img:rounded-xl....` string, when the task is clear: \"ALL .. PROSE .. BLUE \". TW gives amazing utilities, but with great power comes great responsibility.\n- Please explain what it does, how does it work\n- I like this way, too.\n- @RohitGupta > Uses built-in CSS variables → cleaner and future-proof. This snippet maps values of your \"theme\" variables (like `--color-primary`) on \"prose internal variable\" (like `--tw-prose-code`). Since \"prose\" plugin uses css-variables under the hood and \"variables\" now have the same values - the appearance of \"prose\"d blocks and the other parts of the website supposed to be the same.","metadata":{"transformedAt":"2026-08-18T18:33:42.900Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":169,"estimatedTokens":1317}}226{"id":"stack-68567805","source":"stackoverflow","questionId":68567805,"title":"Tailwind: add gap to flex without breaking row","tags":["css","flexbox","tailwind-css","tailwind-css-2"],"text":"Title: Tailwind: add gap to flex without breaking row\nTags: css, flexbox, tailwind-css, tailwind-css-2\nSource: Stack Overflow\n\nQuestion:\nI have a simple flex div with many children. I want 3 elements on each row using tailwindcss.\n\nIs there a way to accomplish this using just tailwindcss classes? I tried with gap-4 on my parent div and child elements with w-1/3, but it adds margin to the children elements, breaking the row after the second element:\n\n\r\n\r\n\n```\n\n \n My element\n \n \n My element\n \n \n My element\n \n \n My element\n \n\n```\n\n\r\n\r\n\r\n\nHow can I add a gap between the child elements, breaking the line only after every third element (in short: I want a 3 column div)?\n\n========================================\n\nTop Answer:\nYou can customize the Tailwind CSS and add new class that calculates the basis including gaps.\n\nhttps://tailwindcss.com/docs/flex-basis#using-custom-values\n\n```\ntheme: {\n extend: {\n flexBasis: {\n \"1/3-gap-4\": \"calc(33.3% - (2/3 * 1rem))\"\n }\n },\n },\n```\n\nand apply it with\n\n```\n\n \n My element\n \n \n My element\n \n \n My element\n \n \n My element\n \n\n```\n\n========================================\n\nCode:\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css\" rel=\"stylesheet\"/>\n<div class=\"flex flex-wrap gap-4 mb-6\">\n <div class=\"w-1/3 shadow border rounded p-4\">\n My element\n </div>\n <div class=\"w-1/3 shadow border rounded p-4\">\n My element\n </div>\n <div class=\"w-1/3 shadow border rounded p-4\">\n My element\n </div>\n <div class=\"w-1/3 shadow border rounded p-4\">\n My element\n </div>\n</div>\n```\n\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css\" rel=\"stylesheet\" />\n<div class=\"grid-cols-3 grid gap-4 mb-6\">\n <div class=\"shadow border rounded p-4\">\n My element\n </div>\n <div class=\"shadow border rounded p-4\">\n My element\n </div>\n <div class=\"shadow border rounded p-4\">\n My element\n </div>\n <div class=\"shadow border rounded p-4\">\n My element\n </div>\n</div>\n```\n\n```text\n<div class=\"flex flex-wrap space-x-0 md:flex-nowrap md:space-x-4 ...\">\n <div>01</div>\n <div>02</div>\n <div>03</div>\n</div>\n```\n\n```text\nspace-x-{amount}\n```\n\n```text\nflex\n```\n\n```text\ngrid\n```\n\n```text\ntheme: {\n extend: {\n flexBasis: {\n \"1/3-gap-4\": \"calc(33.3% - (2/3 * 1rem))\"\n }\n },\n },\n```\n\n```text\n<div class=\"flex flex-wrap gap-4\">\n <div class=\"basis-1/3-gap-4\">\n My element\n </div>\n <div class=\"basis-1/3-gap-4\">\n My element\n </div>\n <div class=\"basis-1/3-gap-4\">\n My element\n </div>\n <div class=\"basis-1/3-gap-4\">\n My element\n </div>\n</div>\n```\n\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css\" rel=\"stylesheet\" />\n<div class=\"flex flex-wrap -m-2 mb-6\">\n <div class=\"w-1/3 p-2\">\n <div class=\"shadow border rounded p-4\">\n My element\n </div>\n </div>\n <div class=\"w-1/3 p-2\">\n <div class=\"shadow border rounded p-4\">\n My element\n </div>\n </div>\n <div class=\"w-1/3 p-2\">\n <div class=\"shadow border rounded p-4\">\n My element\n </div>\n </div>\n <div class=\"w-1/3 p-2\">\n <div class=\"shadow border rounded p-4\">\n My element\n </div>\n </div>\n</div>\n```\n\n```text\nflex\n```\n\n```text\ngrid\n```\n\n```text\nflex row\n```\n\n```html\n<div class=\"flex max-md:flex-wrap gap-6\">\n... you divs here here\n<div>\n```\n\n```text\nflex-wrap\n```\n\n```text\nmd\n```\n\n```text\nmax-md\n```\n\n```text\nw-1/3\n```\n\n```text\n// tailwind.config.js\nconst plugin = require('tailwindcss/plugin');\nmodule.exports = {\n ...\n plugins: [\n ...\n plugin(function ({ matchUtilities, theme }) {\n // Handle arbitrary gap values (e.g., .gap-[10rem])\n matchUtilities({\n gap: (value) => ({\n '&[class*=\"flex-cols-\"]': {\n '--gap': value, // Set the --gap custom property\n }\n }),\n }, {\n values: theme('spacing'), // Include theme spacing values\n supportsNegativeValues: false, // Optional: disable negative gaps\n type: 'any', // Allow arbitrary values like [10rem]\n });\n }),\n plugin(function ({ addUtilities }) {\n const flexColsUtilities = {};\n\n // Generate 1 2 3 4\n for (let i of [1, 2, 3, 4, 6, 12]) {\n flexColsUtilities[`.flex-cols-${i}`] = {\n '--gap': '0.1px',\n display: 'flex',\n 'flex-wrap': 'wrap',\n '& > *': {\n width: `calc(100% / ${i} - var(--gap, 0) * ${i-1} / ${i})`,\n },\n };\n }\n\n addUtilities(flexColsUtilities, {\n variants: ['responsive'], // Enable responsive variants (e.g., md:flex-cols-6)\n });\n }),\n ],\n}\n```\n\n```text\n<div class=\"gap-8 flex-cols-1 md:flex-cols-2\">\n <div class=\"h-36 bg-error-500\"></div>\n <div class=\"h-36 bg-error-500\"></div>\n <div class=\"h-36 bg-error-500\"></div>\n <div class=\"h-36 bg-error-500\"></div>\n <div class=\"h-36 bg-error-500\"></div>\n <div class=\"h-36 bg-error-500\"></div>\n</div>\n```\n\n========================================\n\nComments:\n- If I recall correctly, this solution isn't responsive when fluid and Tailwind grid does not support fluid responsive grids.\n- Gap is also a flex box property so it would be good if this answer included a flex-based solution or mentioned whether or not Tailwind supports gap for flex-box.\n- @TomášHübelbauer not sure what are you talking about but this answer is not about *gap*. It's about implementing something using CSS grid instead of flexbox because CSS grid is more suitable. Also no one said Gap is not supported in Felxbox\n- we are looking for an answer that includes flex box not grid!\n- Is it possible to make the last row item's occupy whatever space is available? 1 full, 2 half, etc.\n- @Qwerty yes, using flex and flex-wrap with flex-grow on the children. Hence the original question\n- Note: to make it responsive you can do something this `grid grid-cols-1 md:grid-cols-3 gap-4`. This is mobile first design, it will be 1 col wide on small screens and 3 cols wide on medium screen and above.\n- To me this solution break the row as like as the gap (with flex-wrap).\n- You might be using it in the wrong way. If you are using margin or padding to have more gap/space between columns it will break the layout. Please refer to the \"More details\" link to see how to use it correctly.\n- This has the same issue as the original post. As soon as you add flex-wrap, to make it \"responsive\", it breaks immediately after the second column. -1\n- Yes. that's exactly how it works. Please read the docs to understand the basics and differences between the usage of the Tailwing Grid and Flexbox: tailwindcss.com/docs/space#limitations. I just gave an option to use with `display:flex` assuming the person knows how to use Flexbox and its perks.\n- Thank you! For the referance if you want to use basis-1/2-gap-4 flexBasis: { \"1/2-gap-4\": \"calc(50% - (1/2 * 1rem))\", },\n- Why does it says `(2/3 * 1rem)` ? Shouldn't it be `(1/3 * 1rem)` ?\n- @saike agreed. This fixes the gap spacing issue without arbitrary tailwind classes, and still allows the use of flex for fluid row items using flex-wrap.\n- I would have used grid but it's not supported by Nativewind. Thank you!","metadata":{"transformedAt":"2026-08-18T18:33:42.900Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":290,"estimatedTokens":1818}}227{"id":"stack-65179304","source":"stackoverflow","questionId":65179304,"title":"Tailwind in React project - getting \"Cannot find module 'autoprefixer'\" error during setup","tags":["javascript","reactjs","create-react-app","tailwind-css","npx"],"text":"Title: Tailwind in React project - getting \"Cannot find module 'autoprefixer'\" error during setup\nTags: javascript, reactjs, create-react-app, tailwind-css, npx\nSource: Stack Overflow\n\nQuestion:\nI'm following the documentation for setting up Tailwind in a React project over on https://tailwindcss.com/docs/guides/create-react-app. I've been following the steps, but when I get to the part where I'm supposed to run `npx tailwindcss init` in order to generate a `tailwind.config.js` file, I get the following error:\n\n```\nCannot find module 'autoprefixer'\nRequire stack:\n- C:\\Users\\[user]\\AppData\\Roaming\\npm-cache\\_npx\\16096\\node_modules\\tailwindcss\\lib\\cli\\commands\\build.js\n- C:\\Users\\[user]\\AppData\\Roaming\\npm-cache\\_npx\\16096\\node_modules\\tailwindcss\\lib\\cli\\commands\\index.js\n- C:\\Users\\[user]\\AppData\\Roaming\\npm-cache\\_npx\\16096\\node_modules\\tailwindcss\\lib\\cli\\main.js\n- C:\\Users\\[user]\\AppData\\Roaming\\npm-cache\\_npx\\16096\\node_modules\\tailwindcss\\lib\\cli.js\n```\n\nI've checked that I have `autoprefixer` in my `node_modules` folder and tried reinstalling it, but I get the same error. In my `package.json`, I have the following:\n\n```\n...\n \"scripts\": {\n \"start\": \"craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\"\n },\n...\n```\n\nas per the documentation. My `craco.config.js` file is as follows:\n\n```\nmodule.exports = {\n style: {\n postcss: {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer'),\n ],\n },\n },\n}\n```\n\nagain, as per the documentation. I've also tried reinstalling the `@craco/craco` package to no avail, so at this point I'm stuck. Any help would be appreciated.\n\n========================================\n\nTop Answer:\nI have faced same problem.\n\nat first I faced “Cannot find module 'autoprefixer'” error during setup.\n\nthan I tried \"yarn\" instead of \"npm\".\n\nrest of process will be remain same.\n\nit works now.\n\n========================================\n\nCode:\n```text\nCannot find module 'autoprefixer'\nRequire stack:\n- C:\\Users\\[user]\\AppData\\Roaming\\npm-cache\\_npx\\16096\\node_modules\\tailwindcss\\lib\\cli\\commands\\build.js\n- C:\\Users\\[user]\\AppData\\Roaming\\npm-cache\\_npx\\16096\\node_modules\\tailwindcss\\lib\\cli\\commands\\index.js\n- C:\\Users\\[user]\\AppData\\Roaming\\npm-cache\\_npx\\16096\\node_modules\\tailwindcss\\lib\\cli\\main.js\n- C:\\Users\\[user]\\AppData\\Roaming\\npm-cache\\_npx\\16096\\node_modules\\tailwindcss\\lib\\cli.js\n```\n\n```text\n...\n \"scripts\": {\n \"start\": \"craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\"\n },\n...\n```\n\n```text\nmodule.exports = {\n style: {\n postcss: {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer'),\n ],\n },\n },\n}\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nautoprefixer\n```\n\n```text\nnode_modules\n```\n\n```text\npackage.json\n```\n\n```text\ncraco.config.js\n```\n\n```text\n@craco/craco\n```\n\n```text\nnpm uninstall tailwindcss postcss autoprefixer\nnpm install tailwindcss@latest postcss@latest autoprefixer@latest\n\nnpx tailwindcss init -p\n\nnpm uninstall tailwindcss postcss autoprefixer\nnpm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9\n```\n\n```text\ntailwind\n```\n\n```text\ntailwindcss\n```\n\n```text\npnpm add tailwindcss\n```\n\n```text\npnpm add tailwind\n```\n\n```text\nnpm install tailwindcss@latest postcss@latest autoprefixer@latest\nnpm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9\n```\n\n```text\nnpm install tailwindcss@latest postcss@latest autoprefixer@latest\nnpx tailwindcss init\n```\n\n```text\nyarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9\n```\n\n```text\nnpm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9\n```\n\n```text\nnpm update -g npm\n```\n\n```text\n{yourpackagemanager} upgrade nodejs -y\n```\n\n```text\nmodule.exports = {\n plugins: [require('autoprefixer')],\n};\n```\n\n```text\npostcss.config.js\n```\n\n```text\nautoprefixer\n```\n\n```text\npostcss\n```\n\n```text\ntailwindcss\n```\n\n```text\ndevDependencies\n```\n\n```text\ndependencies\n```\n\n```text\ndependencies\n```\n\n```text\nnpm i\n```\n\n========================================\n\nComments:\n- Did you try npm install autoprefixer?\n- @SinanYaman Yes, I've mentioned this in the question. I checked that it's in `node_modules` and tried running `npm i autoprefixer` again but I come back to the same error.\n- recently I got the same error but not in setup, it was a production error, I mistakenly imported a function from `autoprefixer` which I installed as a development module so it could not find what I imported when rendering the page\n- This solution did not work for me in CI, as I am using ui.shadcn.com with tailwindcss","metadata":{"transformedAt":"2026-08-18T18:33:42.900Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":30,"totalLines":220,"estimatedTokens":1177}}228{"id":"stack-63334626","source":"stackoverflow","questionId":63334626,"title":"Tailwind CSS : Is there a way to target next sibling?","tags":["tailwind-css"],"text":"Title: Tailwind CSS : Is there a way to target next sibling?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a radio input with a label like the one below. Input is hidden and a label is used to make a visually appealing circle on which the user can click.\n\n```\n\nYes\n```\n\nWhen the user clicks on the label input gets checked. I'm trying to figure out how to target that, so I could give the label a different style.\n\nThis can be achieved in pure CSS using the next sibling selector.\n\n```\ninput[type=\"radio\"]:checked + label {\n background-color: #bfb !important;\n border-color: #4c4 !important;\n}\n```\n\nIs there something similar in tailwind.css that I could use instead?\n\n========================================\n\nTop Answer:\nYou can use arbitrary values to target sibling elements.\n\n```\n[&:checked+label]:bg-[#bfb]\n```\n\n(For demo purposes I used a checkbox)\n\n\r\n\r\n\n```\n\nYes\n```\n\n========================================\n\nCode:\n```html\n<input id=\"choice-yes\" type=\"radio\" class=\"opacity-0 w-0 fixed\"/>\n<label for=\"choice-yes\" class=\"transition duration-500 bg-blue-300 hover:bg-blue-500 w-20 h-20 rounded-full mr-5 flex items-center align-middle justify-center\">Yes</label>\n```\n\n```css\ninput[type=\"radio\"]:checked + label {\n background-color: #bfb !important;\n border-color: #4c4 !important;\n}\n```\n\n```html\n<input id=\"choice-yes\" type=\"radio\"/>\n<label for=\"choice-yes\" class=\"bg-gray-100 sibling-checked:bg-blue-500\">Yes</label>\n```\n\n```js\n// tailwind.config.js\n\nconst plugin = require(\"tailwindcss/plugin\");\n\nconst focusedSiblingPlugin = plugin(function ({ addVariant, e }) {\n addVariant(\"focused-sibling\", ({ container }) => {\n container.walkRules((rule) => {\n rule.selector = `:focus + .focused-sibling\\\\:${rule.selector.slice(1)}`;\n });\n });\n});\n\nmodule.exports = {\n // ...\n plugins: [focusedSiblingPlugin],\n variants: {\n extend: {\n backgroundColor: [\"focused-sibling\"],\n },\n },\n};\n```\n\n```text\n2.0.1\n```\n\n```html\n<input id=\"choice-yes\" type=\"radio\" class=\"nextOnChecked:bg-blue-500 nextOnChecked:border-blue-800\"/>\n```\n\n```js\nconst plugin = require(\"tailwindcss/plugin\");\n\nconst nextOnChecked = plugin(function ({ addVariant, e }) {\n addVariant('nextOnChecked', ({ modifySelectors, separator }) => {\n modifySelectors(({ className }) => {\n return `.${e(`nextOnChecked${separator}${className}`)}:checked + *`;\n })\n });\n});\nmodule.exports = {\n variants: {\n extend:{\n border: ['nextOnChecked'],\n backgroundColor: ['nextOnChecked'],\n },\n },\n plugins: [\n nextOnChecked\n ],\n};\n```\n\n```css\n.nextOnChecked\\:bg-blue-500:checked + *{\n background-color: ...;\n}\n```\n\n```text\n.${e('nextOnChecked${separator}${className}')}:checked + *\n```\n\n```html\n<input id=\"choice-yes\" type=\"radio\" class=\"peer opacity-0 w-0 fixed\" />\n\n<label for=\"choice-yes\" class=\"peer-checked:bg-[#bfb] border peer-checked:border-[#4c4] transition duration-500 bg-blue-300 hover:bg-blue-500 w-20 h-20 rounded-full mr-5 flex items-center align-middle justify-center\">Yes</label>\n```\n\n```text\npeer\n```\n\n```text\ngroup\n```\n\n```text\n[&:checked+label]:bg-[#bfb]\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<input id=\"choice-yes\" type=\"checkbox\" class=\"opacity-0 w-0 fixed [&:checked+label]:bg-[#bfb]\"/>\n<label for=\"choice-yes\" class=\"transition duration-500 bg-blue-300 hover:bg-blue-500 w-20 h-20 rounded-full mr-5 flex items-center align-middle justify-center\">Yes</label>\n```\n\n========================================\n\nComments:\n- I wonder if we could have a sibling variant: `sibling:checked:bg-blue-500`\n- Also works for Tailwind `1.9`! Thanks for the solution!\n- Link only answers are discouraged as links may break rendering the answer meaningless. Please summarize the linked information to help future readers. Link-only answers may be deleted.\n- v3+ tailwindcss.com/docs/…\n- I came here for exactly what OP was asking and I think this answer is misleading. TW does not have a utility using the Adjacent (next) Sibling Selector as of v3. Differentiated Peer utilities may work for the the same purpose, but they don't use adjacent sibling either. You would need to use [&+label] type stuff as Sanka explained below.\n- Thx! This is the only answer which implements the Adjacent sibling combinator (`+` operator) with tailwindcss and without a plugin. The mentioned `peer-*` classes uses the General sibling combinator (`~` operator).\n- @PutziSan I think this is the right answer because `peer-*` using `~` which may affect to the elements at the same time using `+` only effect to the next element only","metadata":{"transformedAt":"2026-08-18T18:33:42.900Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":164,"estimatedTokens":1145}}229{"id":"stack-64962149","source":"stackoverflow","questionId":64962149,"title":"TailwindCSS: disabled variant not working","tags":["tailwind-css"],"text":"Title: TailwindCSS: disabled variant not working\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to use *disabled* variant in tailiwnd, but it does not seem to work. I do not know what to do.\n\nI want to change button apperance if it is disabled, I have read the documentation and it says 'disabled' variant in not enabled by default. So I modify my tailwind.config.js and now it looks like this:\n\n```\nmodule.exports = {\n purge: [],\n theme: {\n extend: {},\n },\n variants: {\n extend: {\n opacity: ['disabled']\n }\n },\n plugins: [],\n}\n```\n\nI have this code in my page, both buttons look the same:\n\n```\n\n \n Submit\n \n \n Submit\n \n \n```\n\nI already re-compiled my code and deleted all my browsers caché, but it still does not work. Do I have to do anything else for this to work?\n\n========================================\n\nTop Answer:\nI had this problem and updating Tailwind CSS to the latest version fixed it.\n\n```\nnpm install tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\nHere's the link: Upgrade Guide -Tailwind CSS It will change other things that you might want to be aware of.\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n purge: [],\n theme: {\n extend: {},\n },\n variants: {\n extend: {\n opacity: ['disabled']\n }\n },\n plugins: [],\n}\n```\n\n```html\n<div class=\"text-center space-x-8\">\n <button type=\"button\" class=\"py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none disabled:opacity-50\" tabindex=\"-1\">\n Submit\n </button>\n <button type=\"button\" class=\"py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md disabled:opacity-50\" disabled tabindex=\"-1\">\n Submit\n </button>\n </div>\n```\n\n```js\nmodule.exports = {\n purge: [],\n theme: {\n extend: {},\n },\n variants: {\n opacity: ({ after }) => after(['disabled'])\n },\n plugins: [],\n}\n```\n\n```text\nnpm install tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\n```text\nnpm i -D tailwindcss@latest\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n mode: 'jit',\n purge: [\n // ...\n ],\n theme: {\n // ...\n }\n // ...\n}\n```\n\n```js\nmodule.exports = {\n mode: 'jit',\n // These paths are just examples, customize them to match your project structure\n purge: [\n './public/**/*.html',\n './src/**/*.{js,jsx,ts,tsx,vue}',\n ],\n theme: {\n // ...\n }\n // ...\n}\n```\n\n```text\ndisabled\n```\n\n```text\n<div>\n```\n\n```text\n<button>\n```\n\n```css\nbutton:disabled {\n @apply opacity-50 cursor-not-allowed bg-gray-400 text-white !important;\n}\n```\n\n```css\n/* .... other imports */\n\n/* section: components */\n@import url(\"components/button.css\");\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n========================================\n\nComments:\n- This is because the configuration file is not being loaded.\n- May I know what is this `after()` function doing? Couldn't find any documentation on this\n- Found the link.. github.com/tailwindlabs/tailwindcss/issues/…\n- How do you add more variants after using the \"after\" syntax? Like, if I wanted opacity to support both \"active\" and \"disabled\" how would I do that?\n- How to disable hover when the button is disabled?\n- @lAaravl you can used `enabled` when you only want to apply another style when an element is not disabled `enabled:hover:border-gray-400 disabled:opacity-75`\n- this is correct, it now works as documented in tailwindcss.com/docs/hover-focus-and-other-states\n- note the CDN version doesn't enable it; must be enabled through the tailwind config\n- JIT mode is the default in TailwindCSS v3, the current version. See tailwindcss.com/docs/upgrade-guide#migrating-to-the-jit-engi‌​ne\n- Lmao, literally same. Idiot me 🤦🏻♂️","metadata":{"transformedAt":"2026-08-18T18:33:42.900Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":171,"estimatedTokens":935}}230{"id":"stack-61508409","source":"stackoverflow","questionId":61508409,"title":"How to change tailwind-config.js dynamically based on user settings in rails","tags":["css","ruby-on-rails","webpack","tailwind-css","css-variables"],"text":"Title: How to change tailwind-config.js dynamically based on user settings in rails\nTags: css, ruby-on-rails, webpack, tailwind-css, css-variables\nSource: Stack Overflow\n\nQuestion:\nI have a Rails 6 app set up to use Tailwind CSS with Webpacker similarly to how it's done in this GoRails tutorial.\n\nI want to be able to change the Tailwind defaults dynamically based on the controller and action so that it's very easy for users to \"skin\" sections of the site by selecting a few options that then dynamically adjust a few of the Tailwind config options. (An example of how this could be used would be users logged into the admin area of the site changing their font family and background color to match their brand.)\n\nI can't just add a stylesheet to the layout based on a conditional because I'd have to override all of the instances where a Tailwind css variable I want to change (like \"sans-serif\"). That would be a lot of work and brittle to maintain as Tailwind evolves.\n\nIt would be ideal if there was a way to dynamically insert choices selected by the user into the Tailwind config file (/javascript/stylesheets/tailwindcss-config.js), but I'm not sure how to do this.\n\nAlso is there a better way to do this in Rails when using Tailwind? It seems like there should be some way to use Javascript from the controller to dynamically change the settings in my tailwindcss-config.js (The Tailwind config file is explained here). So, something in that file like this:\n\n```\ntheme: {\n fontFamily: {\n display: ['Gilroy', 'sans-serif'],\n body: ['Graphik', 'sans-serif'],\n },\n```\n\nWhat was a font stack hard-coded as a configuration in Tailwind would become this:\n\n```\ntheme: {\n fontFamily: {\n display: DYNAMICALLY INSERTED FONT STACK,\n body: ANOTHER DYNAMICALLY INSERTED FONT STACK,\n },\n```\n\nHow would you do this in Rails? I have that Tailwind config file living at /javascript/stylesheets/tailwindcss-config.js. Is this possible to do with Webpack in rails? Is this even the correct approach to take with Rails 6 using Webpacker + Tailwind?\n\n========================================\n\nTop Answer:\nIt's seem like Tailwind use Proxy (MDN), so we just need to use that when trying to change it value.\n\nSince Javascript dosen't offer an API to access to the handler of a Proxy object, You could write your own handler with traps you need (e.g: get, set...), or try to copy the one from Tailwind's proxy, by using Reflect, since we don't know what they do exactly for each trap.\n\n\r\n\r\n\n```\nlet cursive = [\"Caveat\", \"cursive\"];\nlet sans = [\"Roboto\", \"sans-serif\"];\nlet switchFont = document.querySelector(\"#font\");\n\n// tailwind variable (wich is a Proxy object) here is set by Tailwind when using it via CDN\nconst myProxy = new Proxy(tailwind, {\n get(target, property, receiver) {\n return Reflect.get(tailwind, property, receiver); // Call the original proxy handler from Tailwind\n },\n set(target, property, value, receiver) {\n return Reflect.set(tailwind, property, value, receiver); // Call the original proxy handler from Tailwind\n }\n});\n \nmyProxy.config.theme.fontFamily.sans = cursive\n\nswitchFont.addEventListener(\"change\", () => {\n if(switchFont.checked) {\n myProxy.config.theme.fontFamily.sans = cursive;\n } else {\n myProxy.config.theme.fontFamily.sans = sans;\n }\n});\n```\n\n\r\n\n```\n\n \n \n \n \n \n\n \n \n tailwind.config = {\n theme: {\n fontFamily: {\n sans: [\"Roboto\", \"sans-serif\"],\n },\n }\n };\n \n\n \n\n### Change Tailwind's config at runtime\n\n \n Note: I set sans font family to a cursive font, just to make it obvious the it work\n\n \n \n \n \n Use a cursive font family\n \n\n```\n\n\r\n\r\n\r\n\nI don't know if this is applicable in the context of Rails or any other tool that rely on build step, but we can customize Tailwind's config with plain Javascript (at least when using Tailwind via CDN).\n\n========================================\n\nCode:\n```text\ntheme: {\n fontFamily: {\n display: ['Gilroy', 'sans-serif'],\n body: ['Graphik', 'sans-serif'],\n },\n```\n\n```text\ntheme: {\n fontFamily: {\n display: DYNAMICALLY INSERTED FONT STACK,\n body: ANOTHER DYNAMICALLY INSERTED FONT STACK,\n },\n```\n\n```html\n<style>\n :root{\n --display-font: \"<%= display_font_families %>\";\n --body-font: \"<%= body_font_families %>\";\n --link-color: \"<%= link_color %>\";\n }\n</style>\n```\n\n```js\ntheme: {\n fontFamily: {\n display: \"var(--display-font)\",\n body: \"var(--body-font)\",\n },\n extend: {\n colors: {\n link: \"var(--link-color)\",\n },\n }\n```\n\n```js\n// userSelectedColor is the result of a user's choice, \n// say it's \"#00FF00\"\n\ndocument.documentElement.style\n .setProperty('--link-color', userSelectedColor);\n```\n\n```text\n/* GENERATED BY TAILWIND - well, this or something very similar :) */\n\n.text-link {\n color: var(--link-color);\n}\n.bg-link{\n background-color: var(--link-color);\n}\n/* .border-link { ... */\n```\n\n```text\n# tailwind.config.js\ntheme: {\nfontFamily: {\n custom: ['Gilroy', 'sans-serif']\n},\n```\n\n```text\n#sample.html.erb\n<span class=\"font-custom\"> Hello Tailwind! </span>\n```\n\n```js\nlet cursive = [\"Caveat\", \"cursive\"];\nlet sans = [\"Roboto\", \"sans-serif\"];\nlet switchFont = document.querySelector(\"#font\");\n\n// tailwind variable (wich is a Proxy object) here is set by Tailwind when using it via CDN\nconst myProxy = new Proxy(tailwind, {\n get(target, property, receiver) {\n return Reflect.get(tailwind, property, receiver); // Call the original proxy handler from Tailwind\n },\n set(target, property, value, receiver) {\n return Reflect.set(tailwind, property, value, receiver); // Call the original proxy handler from Tailwind\n }\n});\n \nmyProxy.config.theme.fontFamily.sans = cursive\n\nswitchFont.addEventListener(\"change\", () => {\n if(switchFont.checked) {\n myProxy.config.theme.fontFamily.sans = cursive;\n } else {\n myProxy.config.theme.fontFamily.sans = sans;\n }\n});\n```\n\n```html\n<html>\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&family=Caveat:wght@400..700&display=swap\" rel=\"stylesheet\">\n\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script>\n tailwind.config = {\n theme: {\n fontFamily: {\n sans: [\"Roboto\", \"sans-serif\"],\n },\n }\n };\n </script>\n</head>\n\n<body class=\"bg-slate-700 text-slate-100 min-h-screen flex flex-col items-center justify-center gap-4\">\n <h1 class=\"text-2xl font-semibold uppercase\">Change Tailwind's <span>config</span> at runtime</h1>\n \n <p><span class=\"text-red-300 underline\">Note</span>: I set sans font family to a cursive font, just to make it obvious the it work</p>\n \n <fieldset classs=\"flex gap-2\">\n <input type=\"checkbox\" name=\"font\" id=\"font\" class=\"size-5\" checked/>\n \n <label for=\"font\">Use a cursive font family</label>\n </fieldset>\n</body>\n\n</html>\n```\n\n========================================\n\nComments:\n- Instead of dynamically changing the variable in the tailwind.config.js file, why not dynamically change the class name? Assuming you are using vanilla js, try this\n- The power of Tailwind is that by changing the defaults you get these applied throughout the stylesheet consistently. So you are building from a Design System. If you start overriding individual classes you are back to writing totally one-off CSS and will ultimately need to use something like Tailwind or develop your own CSS design system to make it maintainable. I want users to be able to set system wide variables like header font and link colors, similar to how you can do this in something like Squarespace, not override the individual class names in the html. Does that make sense?\n- I want to do the exact same thing, but I haven't gotten to that part of my app yet. I 'll try to post here again when I get there. Actually I even want to be able to have multiple users, each being able to make their own custom override to the default values.\n- Tashows. Would def appreciate you sharing the direction you take on this! I also want users to be able to set up their own defaults to \"skin\" their profile, for instance.\n- Thanks, I was more asking about how to dynamically change the font stack that is listed in tailwind.config.js => `['Gilroy', 'sans-serif']`. I want the user to be able to dynamically swap out say a color that is used in the UI. The easiest way to do this in Tailwind is to change the variable in the tailwind.config.js but how do I do this dynamically?\n- I thought about this option, but I was wondering how caching works because the asset pipeline has to recompile all of the CSS. Tailwind is served through webpack in rails now.\n- One last option is, you can create all the classes you want in config file, then can use it dynamically. I have done this in my recent project.\n- the config is used at build time, not runtime\n- Would it be possible to just inject the variable directly into tailwindcss config file with Ruby or Javascript? I don't understand why this would need to be put into the view first?\n- That explanation of 'buildtime' tool for a 'runtime' operation helped clarify the problem for me, but your example still would require for the user to pick from pre-defined styles that are already set in the stylesheet and then are toggled in the view based on the approach described above. What I'd really like to do is allow them to use any Hex value for instance, for all links. It would be nice if that could dynamically update in one place (the tailwind config). I guess the best approach is to simply use Ruby to dynamically update a stylesheet the new color then webpack recompiles everything?\n- answer updated again - no need to rebuild the styles :)\n- dude that's awesome. totally helps. thank you for such a detailed answer!\n- Thank you for your kind words, much appreciated.\n- While I was thinking about the problem myself, you described my feeling about it perfectly on point: \"I have the feeling that we'd be trying to use a 'buildtime' tool for a 'runtime' operation\". The replacement via css vars is simple and elegant(KISS), I like it a lot! Thanks for the answer.","metadata":{"transformedAt":"2026-08-18T18:33:42.900Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":269,"estimatedTokens":2581}}231{"id":"stack-74429397","source":"stackoverflow","questionId":74429397,"title":"What is the purpose of the Tailwind @layer directive?","tags":["javascript","tailwind-css"],"text":"Title: What is the purpose of the Tailwind @layer directive?\nTags: javascript, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to create some custom styles for my UI and in the official Tailwind documentation\ndescribed 2 options to accomplish it.\n\n- **@apply** - *Use @apply to inline any existing utility classes into your own custom CSS.*\n\n- **@layer** - *Use the @layer directive to tell Tailwind which “bucket” a set of custom styles belong to.*\n\nSo far I understand that **@apply** just creates a custom style class and adds it to the Tailwind system. It's exactly what I need and it's fine, but I'm also wondering about the **@layer** directive.\n\nBased on the description, it adds a bucket of custom styles to the tailwind layout system, but I can't understand what benefits this move gives to us.\n\nWhat if I just use **@apply** and that's all? \n Will it harm performance?\n\nSo I'm just trying to understand in what cases should I use **@layer**.\n\n========================================\n\nTop Answer:\nBasically, @IharAljaksszejenka has shared everything worth knowing. However, with the release of TailwindCSS v4, some structural changes have occurred.\n\n### `@layer`\n\nThe `@layer` CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.\n\n- CSS: `@layer` at-rule - MDN Docs\n\nThe `@tailwind` directives have been removed. Instead, can add all TailwindCSS layers and styling to our project with a single import:\n\n```\n@import \"tailwindcss\";\n```\n\n- Removed `@tailwind` directives - StackOverflow\n\nThis import is, by the way, a shorthand for this:\n\n```\n@layer theme, base, components, utilities;\n\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/preflight.css\" layer(base);\n@import \"tailwindcss/utilities.css\" layer(utilities);\n```\n\n- When you import `tailwindcss`; what injected automatically - TailwindCSS v4 Docs\n\n- Preflight from TailwindCSS v4 - StackOverflow\n\nFirst, define the strength of the layers relative to each other (there are no two layers with the same strength). After that, we import the individual parts of TailwindCSS into the appropriate layer (but this is all handled by `@import \"tailwindcss\";`).\n\nStarting from v4, your unlayered styles will be stronger than any TailwindCSS styles, as every TailwindCSS class has been placed into a separate layer. Therefore, it's also a good idea to place our default settings in one of the layers where we find it logically appropriate.\n\n- From v4 the reset style cannot be overridden by TailwindCSS classes - StackOverflow\n\nUnlayered (non-layered) styles are by default stronger than any styles placed in a layer. This is determined by CSS syntax, not by TailwindCSS. The following are useful for understanding how CSS specificity works:\n\n- `@layer` priority - MDN Docs\n\n- How to prevent TailwindCSS styles from overriding host-page styles and vice versa? - StackOverflow\n\nStarting from v4, a new `@utility` CSS directive has been introduced in TailwindCSS. This replaces the classes we previously placed in `@layer components` and `@layer utilities`. But why is it beneficial to use? Well, with `@utility`, TailwindCSS can better determine where in the compiled CSS this should be placed. If we don't use `@utility` and instead add it manually, placing the class in the layer ourselves, it could lead to unexpected behavior.\n\n- `@utility` directive - TailwindCSS v4 Docs\n\n- Adding custom utilities - TailwindCSS v3 to v4\n\n- TailwindCSS v4 how to can override only margin? - StackOverflow\n\n- TailwindCSS v4 custom breakpoint was not successfully applied - StackOverflow\n\n### `@apply`\n\nA long-existing TailwindCSS-specific directive that allows us to nest classes under other classes. This way, don't even need to write actual CSS code or variables in the CSS; it's enough to know the appropriate classes we want to apply:\n\n- `@apply` directive - TailwindCSS v4 Docs\n\n```\n.custom {\n @apply bg-red-800 text-white border-2;\n}\n```\n\nIt's important to note that starting from v4, when using the `@apply` (or `@variant`) directive within `` blocks in Vue, Svelte, or Astro, the use of `@reference` is required.\n\n- `@reference` directive - TailwindCSS v4 Docs\n\n```\n\n@reference \"../../app.css\";\n\n.custom {\n @apply bg-red-800 text-white border-2;\n}\n\n```\n\nAlthough the official recommendations prefer the use of CSS variables and advise against excessive use of `@apply`:\n\n- Adding TailwindCSS association to Vue/Svelte/Astro file to disable \"css(unknownAtRules): Unknown at rule @apply\" - StackOverflow\n\n========================================\n\nCode:\n```css\n@tailwind base;\n@tailwind utilities;\n```\n\n```css\n@layer utilities {\n h1 {\n @apply text-7xl;\n }\n}\n\n@layer base {\n h1 {\n @apply text-2xl;\n }\n}\n```\n\n```css\n@tailwind utilities;\n@tailwind base;\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n.btn-blue {\n @apply px-4 py-2 inline-block bg-blue-500;\n}\n\n@layer components {\n .btn-red {\n @apply px-4 py-2 inline-block bg-red-500;\n } \n}\n```\n\n```html\n<button type=\"button\" class=\"btn-blue\">\n Button\n</button>\n```\n\n```html\n<button type=\"button\" class=\"btn-red\">\n Button\n</button>\n```\n\n```html\n<button type=\"button\" class=\"hidden sm:btn-red\">\n Button\n</button>\n```\n\n```html\n<div class=\"sm:container\">\n I will behave as container only after 640px screen width\n</div>\n```\n\n```html\n<button type=\"button\" class=\"btn-red px-8\">\n Button (with px-8 being applied)\n</button>\n\n<button type=\"button\" class=\"btn-blue px-8\">\n Button (px-8 being ignored)\n</button>\n```\n\n```css\n@layer components {\n .btn-red {\n @apply px-4 py-2 hidden sm:inline-block bg-red-500;\n }\n}\n```\n\n```text\n@tailwind\n```\n\n```text\n@apply\n```\n\n```text\n@layer\n```\n\n```text\nbase\n```\n\n```text\nutilities\n```\n\n```text\ntext-sm\n```\n\n```text\ncomponents\n```\n\n```text\n@tailwind\n```\n\n```text\n@tailwind base\n```\n\n```text\n@layer base\n```\n\n```text\nh1\n```\n\n```text\ntext-2xl\n```\n\n```text\ntext-7xl\n```\n\n```text\nutilities\n```\n\n```text\nbase\n```\n\n```text\nh1\n```\n\n```text\ntext-2xl\n```\n\n```text\n.btn-blue\n```\n\n```text\n@tailwind components\n```\n\n```text\n.btn-blue\n```\n\n```text\n.btn-red\n```\n\n```text\n.btn-blue\n```\n\n```text\n@layer\n```\n\n```text\nhover:btn-red\n```\n\n```text\npx-4 py-2 inline-block bg-red-500\n```\n\n```text\nsm:btn-blue\n```\n\n```text\npx-4\n```\n\n```text\n@apply\n```\n\n```text\nhidden sm:btn-red\n```\n\n```text\nbtn-red\n```\n\n```text\n@apply\n```\n\n```text\nhidden sm:btn-blue\n```\n\n```text\n@layer\n```\n\n```text\n.btn-blue\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```css\n@layer theme, base, components, utilities;\n\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/preflight.css\" layer(base);\n@import \"tailwindcss/utilities.css\" layer(utilities);\n```\n\n```css\n.custom {\n @apply bg-red-800 text-white border-2;\n}\n```\n\n```html\n<style>\n@reference \"../../app.css\";\n\n.custom {\n @apply bg-red-800 text-white border-2;\n}\n</style>\n```\n\n```text\n@layer\n```\n\n```text\n@layer\n```\n\n```text\n@layer\n```\n\n```text\n@tailwind\n```\n\n```text\n@tailwind\n```\n\n```text\ntailwindcss\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\n@layer\n```\n\n```text\n@utility\n```\n\n```text\n@layer components\n```\n\n```text\n@layer utilities\n```\n\n```text\n@utility\n```\n\n```text\n@utility\n```\n\n```text\n@utility\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```text\n@variant\n```\n\n```text\n<style>\n```\n\n```text\n@reference\n```\n\n```text\n@reference\n```\n\n```text\n@apply\n```\n\n========================================\n\nComments:\n- It's a very detailed informative answer. Basically, I agree, *layout* is a very specific thing and benefits are vague. Thank you Ihar for your effort and time, I didn't expect such great explanation. I've finally understood some tech nuances I've never had an idea about.\n- Related: In v3, using `:root` was sufficient - so from v4 why do I now need to use both `@theme` and `@layer theme`? - `@theme` vs `@layer theme` vs `:root`","metadata":{"transformedAt":"2026-08-18T18:33:42.901Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":70,"totalLines":448,"estimatedTokens":1974}}232{"id":"stack-66288645","source":"stackoverflow","questionId":66288645,"title":"Vite does not build tailwind based on config","tags":["tailwind-css","vite","postcss","tailwind-css-3"],"text":"Title: Vite does not build tailwind based on config\nTags: tailwind-css, vite, postcss, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI created a new `react-ts` app using `yarn create @vitejs/app my-app --template react-ts`.\n\nI installed tailwind using `yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest`.\n\nI initialized tailwind: `npx tailwindcss init -p`.\n\nI set `from` and `to` in `postcss.config.js`:\n\n```\nmodule.exports = {\n from: 'src/styles/App.css',\n to: 'src/styles/output.css',\n plugins: {\n tailwindcss: {},\n autoprefixer: {}\n }\n}\n```\n\nI created a `App.css` file in `src/styles`:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nAccording to https://vitejs.dev/guide/features.html#postcss, any valid `postcss-load-config` syntax is allowed. `from` and `to` seem to be allowed.\n\nWhen I call `yarn dev` which essentially runs `vite`, my app is starting without build errors but tailwind output is not generated.\n\nWhat am I doing wrong?\n\n========================================\n\nTop Answer:\nFor those who are still having issues fixing this error: I fixed mine using this solution from another question.\n\nSolution Link\n\nKindly update your **vite.config** file with these changes.\n\n\r\n\r\n\n```\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from 'tailwindcss'\n\nexport default defineConfig({\n plugins: [react()],\n css: {\n postcss: {\n plugins: [tailwindcss()],\n },\n }\n})\n```\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n from: 'src/styles/App.css',\n to: 'src/styles/output.css',\n plugins: {\n tailwindcss: {},\n autoprefixer: {}\n }\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nreact-ts\n```\n\n```text\nyarn create @vitejs/app my-app --template react-ts\n```\n\n```text\nyarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n```text\nfrom\n```\n\n```text\nto\n```\n\n```text\npostcss.config.js\n```\n\n```text\nApp.css\n```\n\n```text\nsrc/styles\n```\n\n```text\npostcss-load-config\n```\n\n```text\nfrom\n```\n\n```text\nto\n```\n\n```text\nyarn dev\n```\n\n```text\nvite\n```\n\n```text\nfrom\n```\n\n```text\nto\n```\n\n```text\nimport\n```\n\n```text\nmain.tsx\n```\n\n```text\nsrc/styles/App.css\n```\n\n```text\nvite\n```\n\n```text\npostcss\n```\n\n```js\nmodule.exports = {\n content: ['./src/*.{js,jsx}', './src/**/*.{js,jsx}'],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n mode: 'jit',\n purge: {\n enabled: process.env.NODE_ENV === 'production',\n // classes that are generated dynamically, e.g. `rounded-${size}` and must\n // be kept\n safeList: [],\n content: [\n './index.html',\n './src/**/*.{vue,js,ts}',\n // etc.\n ],\n },\n theme: {\n extend: {\n fontFamily: {\n sans: ['Inter var', ...defaultTheme.fontFamily.sans],\n },\n },\n },\n}\n```\n\n```text\nplugins: [react(),tailwindcss()],\n```\n\n```text\nimport tailwindcss from 'tailwindcss';\n```\n\n```text\nnpm install -D tailwindcss postcss autoprefixer\n```\n\n```text\nnpm install -D tailwindcss\n```\n\n```text\nexport const plugins = {\n```\n\n```text\ntailwindcss: {},\n```\n\n```text\nautoprefixer: {}\n```\n\n```text\n};\n```\n\n```text\n/** @type {import(tailwindcss').Config */\n```\n\n```text\nexport const content = [\"./src/**/*.{html,js,jsx,tsx}\"];\n```\n\n```text\nexport const theme = {\n```\n\n```text\nextend: {},\n```\n\n```text\n};\n```\n\n```text\nexport const plugins = [];\n```\n\n```text\n@tailwind base;\n```\n\n```text\n@tailwind components;\n```\n\n```text\n@tailwind utilities;\n```\n\n```text\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n```text\nimport './index.css'\n```\n\n```text\nindex.css\n```\n\n```text\nmain.jsx\n```\n\n```text\nmain.jsx\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./src/**/*.{js,jsx}\"],\n mode: \"jit\",\n theme: {\n extend: {\n colors: {\n primary: \"#050816\",\n secondary: \"#aaa6c3\",\n tertiary: \"#151030\",\n \"black-100\": \"#100d25\",\n \"black-200\": \"#090325\",\n \"white-100\": \"#f3f3f3\",\n },\n boxShadow: {\n card: \"0px 35px 120px -15px #211e35\",\n },\n screens: {\n xs: \"450px\",\n },\n backgroundImage: {\n \"hero-pattern\": \"url('/src/assets/herobg.png')\",\n },\n },\n },\n plugins: [],\n};\n```\n\n```text\ntailwind. config\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx,tsx,vue}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n[ReferenceError] module is not defined in ES module scope\n```\n\n```text\n\"type\": \"module\"\n```\n\n```text\n\"type\": \"module\"\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n // Add other PostCSS plugins here if needed\n },\n }\n```\n\n```text\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport WindiCSS from 'vite-plugin-windicss'; // Import WindiCSS plugin\n\nexport default defineConfig({\n plugins: [\n react(),\n WindiCSS(), \n ],\n});\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n```text\npostcss.config.cjs\n```\n\n```js\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from 'tailwindcss'\n\nexport default defineConfig({\n plugins: [react()],\n css: {\n postcss: {\n plugins: [tailwindcss()],\n },\n }\n})\n```\n\n```json\n{\n // ...\n \"scripts\": {\n \"dev\": \"vite\",\n },\n // ...\n}\n```\n\n```bash\nnpm run dev -- --force\n# ... or ...\nvite --force\n```\n\n```text\n--force\n```\n\n```text\nvite\n```\n\n```js\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from 'tailwindcss'\n\nexport default defineConfig({\n plugins: [react()],\n css: {\n postcss: {\n plugins: [tailwindcss()],\n },\n }\n})\n```\n\n```text\nimport \"../index.css\"\n```\n\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\n```text\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default defineConfig({\n plugins: [tailwindcss()],\n})\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\nimport './index.css'\n```\n\n========================================\n\nComments:\n- it sounds like the package.json tailwind dev dependency needs to be installed by running yarn (or npm install)\n- The question was written during v3. If you're using v4 or higher, please see the installation guide or check other v4-related questions: Problem installing TailwindCSS with Vite; How to upgrade TailwindCSS?; Cannot build frontend using Vite\n- How to install TailwindCSS v4 with Next.js and How to install TailwindCSS v4 with Vite & React app\n- Could you elaborate giving some code example, I couldn't picture how you did, please.\n- That was my issue with vite, thanks for saving me time :)\n- This is actually the comment that worked for me. If these content strings are missing tailwind wont work.\n- This answer helped me. For future debuggers, make sure the \"content\" key points to some files :+1:\n- I get this Typescript error: `Type 'Plugin | Processor' is not assignable to type 'PluginOption'. Type 'Plugin' is not assignable to type 'PluginOption'.` - postcss v8.4.21, tailwindcss v3.2.7, vite v4.1.0\n- It didn't work for me. Throwing the same error as above. It doesn't import tailwindcss like this. Can you the working code?\n- stackoverflow.com/a/78451703 this worked for me\n- Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. **Would you kindly edit your answer to include additional details for the benefit of the community?**\n- The 'vue' part was missing in my tailwind.config.js, as it isn't mentioned in the official tailwind documentation. Adding that fixed the issue. Thanks!\n- Is your keyboard missing punctuation characters?","metadata":{"transformedAt":"2026-08-18T18:33:42.901Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":68,"totalLines":484,"estimatedTokens":2032}}233{"id":"stack-66983358","source":"stackoverflow","questionId":66983358,"title":"How to get colored bullet list dots just using TailwindCSS utility classes","tags":["tailwind-css"],"text":"Title: How to get colored bullet list dots just using TailwindCSS utility classes\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm wondering if there is a strategy to get colored bullet list dots just using Tailwind utility classes and without writing any line of CSS.\n\nI spent some time searching but I haven't found any solution yet.\n\nThis is the list I'm working on at the moment.\n\n```\n\n \n- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.\n \n- Nunc nec gravida enim. Vestibulum venenatis luctus sem.\n \n- Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n```\n\n========================================\n\nTop Answer:\nJust add `marker:text-color`, where `color` is the color you want:\n\n```\n\n \n- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.\n \n- Nunc nec gravida enim. Vestibulum venenatis luctus sem.\n \n- Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n```\n\n========================================\n\nCode:\n```text\n<ul class='list-outside list-disc ml-6'>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>\n <li> Nunc nec gravida enim. Vestibulum venenatis luctus sem.</li>\n <li> Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>\n</ul>\n```\n\n```text\n<li class=\"text-red-500\">\n <div class=\"text-black\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.\n </div>\n</li>\n```\n\n```text\n<ul class='list-outside list-disc ml-6'>\n <li class=\"text-red-500\">\n <span class=\"text-black\">Lorem ipsum dolor</span>\n </li>\n <li class=\"text-red-500\">\n <span class=\"text-black\">Nunc nec gravida enim.</span>\n </li>\n</ul>\n```\n\n```text\n<ul class='marker:text-green list-outside list-disc ml-6'>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>\n <li> Nunc nec gravida enim. Vestibulum venenatis luctus sem.</li>\n <li> Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>\n</ul>\n```\n\n```text\nmarker:text-color\n```\n\n```text\ncolor\n```\n\n```text\n.your-class {\n li::marker {\n @apply text-sky;\n }\n}\n```\n\n```text\n<div className='your-class' dangerouslySetInnerHTML={{__html: yourContent}}/>\n```\n\n```text\nli\n```\n\n```text\n<ul><li class=\"list-disc marker:text-red-800\">text for this bullet point goes here</li></ul>\n```\n\n```text\n<ul class=\"marker:text-indigo-900\"><li class=\"list-disc \">text for this bullet point goes here</li></ul>\n```\n\n```text\n<ul className=\"marker:text-color list-inside list-disc text-orange-500 [&>li>p]:inline [&>li>p]:text-green-800\">\n <li>\n <p>This is para 1</p>\n </li>\n <li>\n <p>This is para 2</p>\n </li>\n <li>\n <p>This is para 3</p>\n </li>\n </ul>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.901Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":121,"estimatedTokens":754}}234{"id":"stack-79383705","source":"stackoverflow","questionId":79383705,"title":"Cannot build frontend using Vite, TailwindCSS with PostCSS","tags":["reactjs","tailwind-css","vite","postcss","tailwind-css-4"],"text":"Title: Cannot build frontend using Vite, TailwindCSS with PostCSS\nTags: reactjs, tailwind-css, vite, postcss, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\n10:04:32 PM [vite] Internal server error: [postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss > and update your PostCSS configuration.\nPlugin: vite:css\nFile: ...\n\n10:04:32 PM [vite] Internal server error: [postcss] Missing > \"./components\" specifier in \"tailwindcss\" package\nPlugin: vite:css\nFile: ...\n\nI developed my chat app so I wanted everything updated so I removed `node_modules` then `npm install` and `build` then the above error keeps coming. It has to be something related to dependencies because it was working before I remove `node_modules`.\n\n```\nnpm cache clean --force\n\nnpm install -D tailwindcss autoprefixer postcss\n```\n\nI uninstalled them and did the above commands but it keeps giving me above error. What is the relation of PostCSS to TailwindCSS why are both dependent on each other?\n\n```\nnpx tailwindcss init\n```\n\nalso it says\n\nnpm error could not determine executable to run\nnpm error A complete log of this run can be found in: /home/amosmurmu/.npm/_logs/2025-01-23T15_39_50_870Z-debug-0.log\n\nI also tried to change Node.js version using NVM but it gives structured clone error so its not Node.js or NPX or NPM.\n\n========================================\n\nTop Answer:\nDelete the `postcss.config.js` file\n\nAnd then `npm i -d @tailwindcss/vite`,\nand also change the `vite.config.ts` file\n\n```\n...\nimport tailwindcss from \"@tailwindcss/vite\";\n\nexport default defineConfig(async () => ({\n plugins: [\n react(),\n tailwindcss(),\n ],\n...\n...\n```\n\nthen add `@import \"tailwindcss\";` in your css file\n\n========================================\n\nCode:\n```text\nnpm cache clean --force\n\nnpm install -D tailwindcss autoprefixer postcss\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\nnode_modules\n```\n\n```text\nnpm install\n```\n\n```text\nbuild\n```\n\n```text\nnode_modules\n```\n\n```text\nnpm install -D tailwindcss@3\n```\n\n```none\nnpm uninstall postcss autoprefixer\nnpm install tailwindcss @tailwindcss/vite\n```\n\n```none\nnpm uninstall autoprefixer\nnpm install tailwindcss @tailwindcss/postcss postcss\n```\n\n```text\n@tailwind\n```\n\n```text\ncontent\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\n.scss\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@config\n```\n\n```text\n@theme\n```\n\n```text\n@custom-variant\n```\n\n```text\n@utility\n```\n\n```text\n@config\n```\n\n```text\n@utility\n```\n\n```text\n...\nimport tailwindcss from \"@tailwindcss/vite\";\n\nexport default defineConfig(async () => ({\n plugins: [\n react(),\n tailwindcss(),\n ],\n...\n...\n```\n\n```text\npostcss.config.js\n```\n\n```text\nnpm i -d @tailwindcss/vite\n```\n\n```text\nvite.config.ts\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\nnode_modules\n```\n\n```text\nnpm install\n```\n\n```text\nnpm install -D tailwindcss@3\n```\n\n```text\nnpm install autoprefixer postcss\n```\n\n```text\nnpm run dev\n```\n\n```text\ncreate-next-app\n```\n\n```text\n--turboback\n```\n\n```text\n\"dev\": \"next dev\",\n```\n\n========================================\n\nComments:\n- There are huge differences between TailwindCSS v3 and v4. Use `npm install tailwindcss@3` to use v3. To migrate to v4, read the update guide in the documentation. The v4 was released a few days ago, so npm install tailwindcss now automatically installs v4 instead of v3. However, for this, you should no longer use the default Vite plugin, PostCSS and Autoprefixer: `npm install tailwindcss @tailwindcss/vite` - TailwindCSS v4 with Vite; TailwindCSS v4 with PostCSS\n- Using v3 should resolve all your issues. If you want to switch to v4, make sure to read the update and new installation guides.\n- Related: Tailwind CSS v4: more packages and new Vite support and How to switch to a CSS-first configuration in Tailwind CSS v4 and above\n- Related: Is \"git init\" required when using the TailwindCSS v4 Vite plugin?\n- Which TailwindCSS v4 namespace matches a given TailwindCSS v3's theme keys?","metadata":{"transformedAt":"2026-08-18T18:33:42.901Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":33,"totalLines":213,"estimatedTokens":1026}}235{"id":"stack-69388400","source":"stackoverflow","questionId":69388400,"title":"NextJS - Google font is not loading or displaying on the website","tags":["reactjs","fonts","next.js","tailwind-css","google-fonts"],"text":"Title: NextJS - Google font is not loading or displaying on the website\nTags: reactjs, fonts, next.js, tailwind-css, google-fonts\nSource: Stack Overflow\n\nQuestion:\nFollowed the documentation and added a _document.js file with the provided code:\n\n```\nimport Document, { Html, Head, Main, NextScript } from 'next/document'\n\nclass MyDocument extends Document {\n static async getInitialProps(ctx) {\n const initialProps = await Document.getInitialProps(ctx)\n return { ...initialProps }\n }\n\n render() {\n return (\n \n \n \n \n \n \n \n \n \n )\n }\n}\n\nexport default MyDocument\n```\n\nWhen I use my chrome extension font checker and verify in the inspector, it states that it using the defaults fonts. Any idea how I can get this to work? Might there be some interference with the fact that I'm using tailwindcss?\n\n========================================\n\nTop Answer:\nI faced this **problem** a few minutes ago and **fixed** this by just adding one line of code.\n\nMake sure you've added `display: \"swap\"` in your code like this -\n\n```\nconst poppins = Poppins({\nsubsets: [\"latin\"]\nweight: [\"100\", \"200\", \"400\", \"700\"],\ndisplay: \"swap\",\n});\n```\n\nafter adding `display: \"swap\"`, it started working.\n\n========================================\n\nCode:\n```text\nimport Document, { Html, Head, Main, NextScript } from 'next/document'\n\nclass MyDocument extends Document {\n static async getInitialProps(ctx) {\n const initialProps = await Document.getInitialProps(ctx)\n return { ...initialProps }\n }\n\n render() {\n return (\n <Html>\n <Head>\n <link href=\"https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap\" rel=\"stylesheet\" />\n </Head>\n <body>\n <Main />\n <NextScript />\n </body>\n </Html>\n )\n }\n}\n\nexport default MyDocument\n```\n\n```css\n/* Google Font */\n@import url('https://fonts.googleapis.com/css2?family=Kurale&display=swap');\n\n/* From Public Directory */\n@font-face {\n font-family: 'Kurale';\n src: url('/fonts/Kurale.ttf');\n font-style: medium;\n font-weight: normal;\n font-display: swap;\n}\n```\n\n```text\nNExtJS\n```\n\n```text\nVercel\n```\n\n```css\n/* globals.css */\n@import url(\"https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap\");\n```\n\n```text\n<link>\n```\n\n```text\n@import\n```\n\n```text\nglobals.css\n```\n\n```text\n_app.js\n```\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Lobster&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Poiret+One&display=swap\");\n```\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;200;300;400;500;700&display=swap\");\n```\n\n```css\n/* IMPORTANT: For some reason directly importing the font from fonts.googleapis.com/css2 is not working. Instead I had to inject its contents */\n/* @import url(\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;200;300;400;500;700&display=swap\"); */\n\n/* latin-ext */\n@font-face {\n font-family: 'DM Sans';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format('woff2');\n unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n font-family: 'DM Sans';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format('woff2');\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* latin-ext */\n@font-face {\n font-family: 'DM Sans';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBamC3YU-CnE6Q.woff2) format('woff2');\n unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n font-family: 'DM Sans';\n font-style: normal;\n font-weight: 500;\n font-display: swap;\n src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBimC3YU-Ck.woff2) format('woff2');\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* latin-ext */\n@font-face {\n font-family: 'DM Sans';\n font-style: normal;\n font-weight: 700;\n font-display: swap;\n src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBamC3YU-CnE6Q.woff2) format('woff2');\n unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n font-family: 'DM Sans';\n font-style: normal;\n font-weight: 700;\n font-display: swap;\n src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBimC3YU-Ck.woff2) format('woff2');\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n```\n\n```text\n// next.config.js\n\nmodule.exports = {\n optimizeFonts: false,\n}\n```\n\n```text\n<link>\n```\n\n```text\nconst poppins = Poppins({\nsubsets: [\"latin\"]\nweight: [\"100\", \"200\", \"400\", \"700\"],\ndisplay: \"swap\",\n});\n```\n\n```text\ndisplay: \"swap\"\n```\n\n```text\ndisplay: \"swap\"\n```\n\n```text\n.next\n```\n\n```text\nnpm run dev\n```\n\n```tsx\n<body className={`${roboto.variable} antialiased`}>\n ...\n</body>\n```\n\n```tsx\n<body className={`${roboto.className} antialiased`}>\n ...\n</body>\n```\n\n```text\nvariable\n```\n\n```text\nclassName\n```\n\n========================================\n\nComments:\n- have you already defined that font on tailwind.config.js?\n- This will work indeed. however, it's not recommended to use critical @imports in CSS because it will render the font after the page is already loaded. I'd recommend you to use illia-chill's solution which is loading the font using Vercel's fontsource.org. It is the most optimal way to load fonts with Next.js.\n- Caution with bootstrap or another frameworks css. Because they can conflict and not apply the font.\n- Yes you're right!\n- This helped me track down a solution to my problem. We are using CSP and I had `fonts.gstatic.com` in `font-src` but not `fonts.googleapis.com` in `style-src` -- thanks!\n- can you tell me what is this line used for? its working perfectly but idk how, thanks anyway. Edit, i found the answer: \" This comes in the form of a CSS descriptor called font-display . By providing a value of swap , we tell the browser to render the page right away with fallback fonts, and then redraw the page once the fonts have loaded\" - fonts.google.com/knowledge/using_type/….\n- @msadikjowel any idea what caused the issue to start in the first place, or was it always present from the first?\n- Did not work for us, unfortunately. Also tried deleting .turbo. Current top answer worked for us: stackoverflow.com/a/78016250/1465015 The weird thing is the issue started for one dev after they ran another (this time, Vanilla React) project that used the same local port (3001) for its dev server as our Next Dev server does. Before that, she did not have this issue.","metadata":{"transformedAt":"2026-08-18T18:33:42.901Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":23,"totalLines":264,"estimatedTokens":1875}}236{"id":"stack-68306441","source":"stackoverflow","questionId":68306441,"title":"Fade/transition tailwind class to something else over certain amount of time?","tags":["css","tailwind-css","tailwind-in-js"],"text":"Title: Fade/transition tailwind class to something else over certain amount of time?\nTags: css, tailwind-css, tailwind-in-js\nSource: Stack Overflow\n\nQuestion:\nIs there a way to set `bg-red-300` and fade/transition it to `bg-transparent` or different bg class over 2 seconds or do I need javascript for this? I want an element to highlight and then return to normal after 2 secs. Thank you!\n\n========================================\n\nTop Answer:\nYou could utilize tailwind transition property\n\ntransition-opacity\n\n```\n\n```\n\nrefer https://tailwindcss.com/docs/transition-property\n\nDemo\n\n========================================\n\nCode:\n```text\nbg-red-300\n```\n\n```text\nbg-transparent\n```\n\n```text\nmodule.exports = {\n mode: 'jit',\n theme: {\n extend: {\n \n // that is animation class\n animation: {\n fade: 'fadeOut 5s ease-in-out',\n },\n\n // that is actual animation\n keyframes: theme => ({\n fadeOut: {\n '0%': { backgroundColor: theme('colors.red.300') },\n '100%': { backgroundColor: theme('colors.transparent') },\n },\n }),\n },\n },\n variants: {},\n plugins: [],\n}\n```\n\n```text\n<div class=\"w-40 h-40 animate-fade\"></div>\n```\n\n```text\nanimate-fade\n```\n\n```text\n<div class=\"h-8 w-8 bg-blue-600 transition-opacity ease-in duration-700 opacity-100 hover:opacity-0\"></div>\n```\n\n```js\nfunction toggleAnimation() {\n const box = document.getElementById(\"box\")\n\n if (box.classList.contains(\"animate-fade-in\")) {\n box.classList.remove(\"animate-fade-in\")\n box.classList.add(\"animate-fade-out\")\n } else {\n box.classList.remove(\"animate-fade-out\")\n box.classList.add(\"animate-fade-in\")\n }\n}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme {\n --animate-fade-in: fade-in 1s ease-in-out forwards;\n --animate-fade-out: fade-out 1s ease-in-out forwards;\n\n @keyframes fade-in {\n 0% {\n background-color: transparent;\n }\n 100% {\n background-color: var(--color-red-300);\n }\n }\n\n @keyframes fade-out {\n 0% {\n background-color: var(--color-red-300);\n }\n 100% {\n background-color: transparent;\n }\n }\n}\n</style>\n\n<div id=\"box\" class=\"p-6 animate-fade-in\">\n Example\n</div>\n\n<button onclick=\"toggleAnimation()\" class=\"cursor-pointer p-2 bg-blue-500 hover:bg-blue-800 text-white rounded-lg\">\n Toggle Fade\n</button>\n```\n\n```text\n@theme\n```\n\n```text\nvar()\n```\n\n```text\n@theme\n```\n\n```text\nvar()\n```\n\n========================================\n\nComments:\n- Cool, very interesting solution. Thanks! Where can I learn more about what's available to put in the `colors.red.300` part? I tried `colors.red.300/50` and `colors.red.300.50` for opacity but it didn't seem to work. Thank you!\n- It is basically javascript syntax of getting values by key in any `theme` object of config (Tailwind default included) - `colors` has key `red`, `red` has key `300`. `fadeOut` animation in my example can be extracted with `theme('keyframes.fadeOut')` or `theme(keyframes[fadeOut])`. About second part - nice question short syntax was introduced at 2.2 and I believe has place only on front part as it is not registered in config. The only option I see is to pass standard CSS `rgba()` where `red.300` should be present in RGB value but it's not cool...\n- Ah thanks! So instead of `theme('colors.red.300')` I would do something like `rgba(x, x, x, 0.5)` ? I just tried and got `Tailwind CSS: rgba is not defined`\n- Blockquote it like `{ backgroundColor: \"rgba(x,y,z,a)\" }`. It thinks it is JS function which is not. You need to pass it as a string\n- Posted your answer (with attribution) here: stackoverflow.com/a/71449617/1459653 Thanks!\n- What if i need to do fade in and fade out at the same element","metadata":{"transformedAt":"2026-08-18T18:33:42.901Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":145,"estimatedTokens":945}}237{"id":"stack-75664539","source":"stackoverflow","questionId":75664539,"title":"Tailwind CSS, class precedence is not respected","tags":["tailwind-css"],"text":"Title: Tailwind CSS, class precedence is not respected\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have the following element:\n\n```\n\n```\n\nAll of its class names are generated automatically through the component, except for the last one, `min-w-0`.\n\nSince `min-w-0` is the last class name listed, I expect it to override `min-w-[10rem]`, the 1st class name listed.\n\nHowever, for some reason, `min-w-[10rem]` seems to take precedence.\n\nFrom Chrome dev tools:\n\nhttps://i.sstatic.net/iwQtY.png\n\nAny insights as to why, and how I can fix it?\n\n========================================\n\nTop Answer:\nIn this answer, I mainly offer a solution to the problem raised in the question. I've tried to explain the underlying issue in a separate answer instead.\n\n### Important modifier\n\nI fundamentally agree with EdLucas's insights; I'm just updating the content to reflect v4, released in January 2025.\n\nFrom TailwindCSS v4, the position of the important modifier (`!`) has changed.\n\n- Using the important modifier - TailwindCSS v4 Docs\n\n```\n\nExample for TailwindCSS v4\n```\n\nPreviously, it had to be placed before (`!min-w-0`), but from v4 onwards, it should be placed after (`min-w-0!`) - just like in native CSS, where `!important` comes after the rule.\n\n```\n\nExample for TailwindCSS v3\n```\n\n### CSS Specificity\n\nIf you want to achieve this without using !important, you simply need to define a stronger rule that takes precedence over the original one (`min-w-[10rem]`), regardless of order. This can only be done by referencing the element itself through class names.\n\n- `&` nesting selector - MDN Docs\n\n```\n\nExample with same specificity\n\nExample with stronger specificity by [&]: variant\n\nExample with stronger specificity by [&&]: variant\n\nAnd the & symbols can be nested indefinitely.\n```\n\nIf writing `[&]` feels ugly to you, you can create your own variant, for example in v4:\n\n- Adding custom variants - TailwindCSS v4 Docs\n\n```\n\n@custom-variant should [&];\n\nExample with same specificity\n\nExample with stronger specificity by should: variant\n\nExample with stronger specificity by should:should: variant\n\nAnd the & symbols can be nested indefinitely.\n```\n\n========================================\n\nCode:\n```html\n<td class=\"min-w-[10rem] max-w-[10rem] overflow-ellipsis text-sm text-text-light px-3 min-w-0\"></td>\n```\n\n```text\nmin-w-0\n```\n\n```text\nmin-w-0\n```\n\n```text\nmin-w-[10rem]\n```\n\n```text\nmin-w-[10rem]\n```\n\n```text\nclass\n```\n\n```text\nmin-w-0\n```\n\n```text\n!min-w-0\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"\n min-w-[10rem] min-w-0!\n bg-red-500 bg-green-500!\n\">Example for TailwindCSS v4</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"\n min-w-[10rem] !min-w-0\n bg-red-500 !bg-green-500\n\">Example for TailwindCSS v3</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"\n min-w-[10rem] min-w-0\n bg-red-500 bg-green-500\n\">Example with same specificity</div>\n\n<div class=\"\n min-w-[10rem] [&]:min-w-0\n bg-red-500 [&]:bg-green-500\n\">Example with stronger specificity by [&]: variant</div>\n\n<div class=\"\n min-w-[10rem] [&]:min-w-0\n bg-red-500 [&&]:bg-blue-500 [&]:bg-green-500\n\">Example with stronger specificity by [&&]: variant</div>\n\n<div class=\"\n min-w-[10rem] [&]:min-w-0\n bg-red-500 [&&]:bg-blue-500 [&]:bg-green-500 [&&&]:bg-yellow-500\n\">And the & symbols can be nested indefinitely.</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant should [&];\n</style>\n\n<div class=\"\n min-w-[10rem] min-w-0\n bg-red-500 bg-green-500\n\">Example with same specificity</div>\n\n<div class=\"\n min-w-[10rem] should:min-w-0\n bg-red-500 should:bg-green-500\n\">Example with stronger specificity by should: variant</div>\n\n<div class=\"\n min-w-[10rem] should:min-w-0\n bg-red-500 should:should:bg-blue-500 should:bg-green-500\n\">Example with stronger specificity by should:should: variant</div>\n\n<div class=\"\n min-w-[10rem] should:min-w-0\n bg-red-500 should:should:bg-blue-500 should:bg-green-500 should:should:should:bg-yellow-500\n\">And the & symbols can be nested indefinitely.</div>\n```\n\n```text\n!\n```\n\n```text\n!min-w-0\n```\n\n```text\nmin-w-0!\n```\n\n```text\n!important\n```\n\n```text\nmin-w-[10rem]\n```\n\n```text\n&\n```\n\n```text\n[&]\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"bg-orange-500 bg-sky-500\">\n sky is stronger \n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"bg-sky-500 bg-orange-500\">\n why isn't orange stronger?\n</div>\n```\n\n```js\nfunction Box({ className = '', children }) {\n return (<div className={`bg-orange-500 ${className}`}>{children}</div>);\n}\n\nfunction App() {\n return (\n <div>\n <Box>*orange* is default</Box>\n <Box className=\"bg-sky-500\">*sky* is stronger</Box>\n <Box className=\"bg-green-500\">why isn't *green* stronger?</Box>\n </div>\n );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root')).render(<App />);\n```\n\n```html\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div id=\"root\"></div>\n```\n\n```css\n.bg-sky-500 {\n background-color: var(--color-sky-500);\n}\n.bg-orange-100 {\n background-color: var(--color-orange-100);\n}\n```\n\n```css\n.bg-orange-100 {\n background-color: var(--color-orange-100);\n}\n.bg-sky-500 {\n background-color: var(--color-sky-500);\n}\n```\n\n```js\nfunction Box({ variant = 'orange', className = '', children }) {\n const styles = {\n orange: 'bg-orange-500 text-white',\n sky: 'bg-sky-500 text-white',\n green: 'bg-green-500 text-white',\n };\n \n // Only accept layout-specific classes in className\n // Colors and styles are handled through enum variants\n return (\n <div className={`${styles[variant]} p-4 rounded-lg ${className}`}>\n {children}\n </div>\n );\n}\n\nfunction App() {\n return (\n <div>\n <Box>*orange* is default style</Box>\n <Box variant=\"sky\">*sky* variant is requested</Box>\n <Box variant=\"green\">*green* variant is requested</Box>\n </div>\n );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root')).render(<App />);\n```\n\n```html\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div id=\"root\"></div>\n```\n\n```js\nfunction Box({ variant = 'orange', className = '', children }) {\n return (\n <div\n data-theme={variant}\n className={`\n data-[theme=orange]:bg-orange-500\n data-[theme=sky]:bg-sky-500\n data-[theme=green]:bg-green-500\n text-white p-4 rounded-lg\n ${className}\n `}\n >\n {children}\n </div>\n );\n}\n\nfunction App() {\n return (\n <div>\n <Box>*orange* is default style</Box>\n <Box variant=\"sky\">*sky* variant is requested</Box>\n <Box variant=\"green\">*green* variant is requested</Box>\n </div>\n );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root')).render(<App />);\n```\n\n```html\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div id=\"root\"></div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant data-checked (&[data-ui~=\"checked\"]);\n</style>\n\n<div\n data-ui=\"checked active\"\n data-size=\"large\"\n data-theme=\"sky\"\n class=\"\n data-[theme=orange]:bg-orange-500 data-[theme=sky]:bg-sky-500 data-[theme=green]:bg-green-500\n data-[size=normal]:p-4 data-[size=large]:p-8\n text-white rounded-lg\n data-checked:underline\n \"\n>\n Hello World\n</div>\n```\n\n```js\nimport { twMerge } from 'tailwind-merge'\n\ntwMerge('bg-orange-100 bg-sky-500')\n// -> bg-sky-500\nimport { twMerge } from 'tailwind-merge'\n\nconst className = 'bg-sky-500'\ntwMerge('bg-orange-100', className)\n// -> bg-sky-500\n```\n\n```text\n<div>\n```\n\n```text\nexample.vue\n```\n\n```text\ntheme, base, components, utilities\n```\n\n```text\nbg-sky-500\n```\n\n```text\nbg-orange-100\n```\n\n```text\nutilities\n```\n\n```text\nbg-orange-100\n```\n\n```text\nbg-sky-500\n```\n\n```text\n[&:where(.large)]:\n```\n\n```text\ndata-*:\n```\n\n```text\n@custom-variant\n```\n\n```text\ndata-*\n```\n\n```text\n!important\n```\n\n```text\nbg-orange-100 bg-sky-500!\n```\n\n```text\n!important\n```\n\n```text\n[&]:\n```\n\n```text\n[&&]:\n```\n\n```text\n&\n```\n\n```text\n!important\n```\n\n========================================\n\nComments:\n- Wow, I find this very unfortunate and unintuitive. The whole point of CSS is to *cascade* styles based on both specificity and order of appearance.\n- In fact, specificity is the only logical way in CSS to determine which rule is stronger. If the order inside the `class=\"...\"` attribute mattered, it would be chaotic and very difficult to build dynamic features where you need to prioritize stronger classes. Instead, the content of `class=\"...\"` should be structured consistently, and duplicate rules should be avoided whenever possible.\n- Related: Tailwind Merge and Tailwind Merge Playground\n- Using `[&]:` is a great idea!\n- I asked a question in order to write an answer that explains the behavior. The question was very similar to this one, so I reused the answer from the deleted post. With sufficient reputation, you can view the history.\n- here is an aplhabetic order issue huh o:\n- @Segodnya, what exactly do you mean? If you have a specific question, feel free to refer to the current content and provide all the necessary information in a new question. -- Or sorry, maybe you just meant it as a statement - in that case: yeah, you shouldn't rely on the order of the generated CSS; you always need to find the proper specificity to make your setting take effect.\n- yeah, it was just a statement. I faced the same issue today when I was trying to pass the prop with some text color but it couldn't override 'text-white' because of alphabetic rule :) so, you can override 'text-black' with 'text-white', but not the opposite because of 'w' and 'b' alphabetic comparison","metadata":{"transformedAt":"2026-08-18T18:33:42.901Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":50,"totalLines":471,"estimatedTokens":2661}}238{"id":"stack-70302520","source":"stackoverflow","questionId":70302520,"title":"Nuxtjs v3 and Tailwindcss v3 PostCSS@8 not compatible","tags":["nuxt.js","tailwind-css","postcss"],"text":"Title: Nuxtjs v3 and Tailwindcss v3 PostCSS@8 not compatible\nTags: nuxt.js, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\ni'm trying to install Tailwindcss in my nuxt project\n\nI use fresh install from nuxt https://v3.nuxtjs.org/getting-started/installation\n\n```\nnpx nuxi init nuxt3-app\n```\n\nand tailwindcss installation\n\nhttps://tailwindcss.com/docs/guides/nuxtjs\n\nBut when i start the app `npm run dev` i got this error\n\n```\nERROR Cannot restart nuxt: postcss@8 is not compatible with current version of nuxt (0.0.0). Expected: >=2.15.3\n```\n\nI don't know how to fix it, and cannot find any answer online, i appreciate any help, thankyou\n\n========================================\n\nTop Answer:\nI had this problem too, as Nuxt 3 requires a different way to integrate Tailwind. The following is to install Tailwind as a Nuxt module, rather than independently. This is easier, as it requires a lot less configuration (no need to edit *postcss.config.js*, a bit less config required for *nuxt.config.js*).\n\nVersion 5.0 of the Nuxt Tailwind module brings in support for Nuxt 3. Full default installation is as follows:\n\n### Step 1\n\nTo install, we can dev install this (yarn add or npm install) with *@nuxtjs/tailwindcss@latest* or whichever version (after 5.1) you need.\n\n```\nyarn add -D @nuxtjs/tailwindcss@latest\n```\n\n### Step 2\n\nThen in **nuxt.config.js**, add the module to the modules array:\n\n```\nimport { defineNuxtConfig } from \"nuxt\"\n\nexport default defineNuxtConfig({\n modules: [\n '@nuxtjs/tailwindcss'\n ]\n})\n```\n\n### Step 3\n\nCreate a **tailwind.config.js** file either manually or by using the terminal command:\n\n```\nnpx tailwindcss init\n```\n\n### Step 4\n\nAdd the Tailwind directives to your main CSS file (./assets/css/tailwind.css by default, or configurable in your *nuxt.config.js* file).\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n### Step 5\n\nAfter this, try running your dev or build commands, and it should be working correctly.\n\n========================================\n\nCode:\n```text\nnpx nuxi init nuxt3-app\n```\n\n```text\nERROR Cannot restart nuxt: postcss@8 is not compatible with current version of nuxt (0.0.0). Expected: >=2.15.3\n```\n\n```text\nnpm run dev\n```\n\n```text\nnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest\nnpx tailwindcss init\n```\n\n```js\nmodule.exports = {\n content: [\n './assets/**/*.{vue,js,css}',\n './components/**/*.{vue,js}',\n './layouts/**/*.vue',\n './pages/**/*.vue',\n './plugins/**/*.{js,ts}',\n './nuxt.config.{js,ts}',\n ],\n variants: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\nimport { defineNuxtConfig } from 'nuxt3'\n\n// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config\nexport default defineNuxtConfig({\n css: ['~/assets/css/tailwind.css'],\n build: {\n postcss: {\n postcssOptions: require('./postcss.config.js'),\n },\n }\n})\n```\n\n```html\n<script setup>\nimport '@/assets/css/tailwind.css'\n</script>\n```\n\n```text\n@nuxt/postcss8\n```\n\n```text\ntailwind.config.js\n```\n\n```text\npostcss.config.js\n```\n\n```text\nassets/css/tailwind.css\n```\n\n```text\nnuxt.config.ts\n```\n\n```text\napp.vue\n```\n\n```text\nnpx nuxi init nuxt3-app\n```\n\n```js\nmodule.exports = {\n purge: [\n \"./components/**/*.{vue,js}\",\n \"./layouts/**/*.vue\",\n \"./pages/**/*.vue\",\n \"./plugins/**/*.{js,ts}\",\n \"./nuxt.config.{js,ts}\",\n \"./app.vue\",\n ],\n mode: 'jit',\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nmain.css\n```\n\n```text\ntailwind.css\n```\n\n```text\nimport { defineNuxtConfig } from \"nuxt\";\n\n// https://v3.nuxtjs.org/api/configuration/nuxt.config\nexport default defineNuxtConfig({\n css: [\"@/assets/css/main.css\"],\n postcss: {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n },\n});\n```\n\n```text\nnuxt.config.ts\n```\n\n```text\nyarn add -D @nuxtjs/tailwindcss@latest\n```\n\n```text\nimport { defineNuxtConfig } from \"nuxt\"\n\nexport default defineNuxtConfig({\n modules: [\n '@nuxtjs/tailwindcss'\n ]\n})\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nimport { defineNuxtConfig } from \"nuxt\";\n\n// https://v3.nuxtjs.org/api/configuration/nuxt.config\nexport default defineNuxtConfig({\n modules: [\n '@nuxtjs/tailwindcss'\n ],\n css: [\"@/assets/css/tailwind.css\"],\n postcss: {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n },\n },\n});\n```\n\n```text\nnuxt.config.ts\n```\n\n```text\nnpm i -D @nuxtjs/tailwindcss@latest\n```\n\n```text\n// https://v3.nuxtjs.org/api/configuration/nuxt.config\nexport default defineNuxtConfig({\n modules: ['@nuxtjs/tailwindcss']\n})\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n<template>\n <div>\n <h1 class=\"text-3xl font-bold underline\">\n Hello world!\n </h1>\n </div>\n</template>\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```js\nmodule.exports = {\n content: [\n './app.vue',\n // ...rest of the list \n ],\n variants: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\napp.vue\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- You can use Windi CSS (nearly exactly the same thing, but personally slightly better and faster). Windi CSS uses the same syntax as Tailwind CSS and works with Nuxt 3. You can find documentation on how to install it here : [windicss.org/].\n- just tested not working :s\n- why do you add `nuxt.config` to your tailwind configs `content` ?\n- @vhflat i just use configuration guide from official documentation, feel free to use your own configuration\n- The latest version of nuxt does not like it when you `require` inside of `nuxt.config.ts`, so I just added the configuration of `postcss.config.js` (the object that is being exported) directly into the `postcssOptions` object within `nuxt.config.ts` Works like a charm!\n- Hey I got tailwind working, but it does not seem to update on file-save. I have to rebuild the server after making a change for the tailwind css to take effect... Does this work with you?\n- This is not the recommended way of setting up a nuxt3 project. See nuxt.com/modules/tailwindcss and nuxt.com/docs/migration/bundling\n- This is a great start to an answer; please describe how your code fixes the OP's problem.\n- Thx, saved me a lot of time as all the nuxt 3 guides for tailwind are outdated!\n- 2023 and still works :))","metadata":{"transformedAt":"2026-08-18T18:33:42.902Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":38,"totalLines":354,"estimatedTokens":1704}}239{"id":"stack-71063619","source":"stackoverflow","questionId":71063619,"title":"React and Tailwind CSS: dynamically generated classes are not being applied","tags":["reactjs","tailwind-css"],"text":"Title: React and Tailwind CSS: dynamically generated classes are not being applied\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm just learning React and Tailwind CSS and had a strange experience with CSS grid using Tailwind classes. I've made the buttons for a calculator, with the last Button spanning two columns:\n\n**App.js:**\n\n```\nexport default function App() {\n return (\n \n \n \n );\n}\n```\n\n**Calculator.js**\n\n```\nimport { IoBackspaceOutline } from \"react-icons/io5\";\n\nexport const Calculator = () => {\n return (\n \n AC\n \n \n \n %\n ÷\n 7\n 8\n 9\n x\n 4\n 5\n 6\n -\n 1\n 2\n 3\n +\n 0\n .\n =\n \n );\n};\n\nconst Button = ({ colSpan = 1, rowSpan = 1, children }) => {\n return (\n \n {children}\n \n );\n};\n```\n\nThis doesn't work (tested in Chrome):\nhttps://i.sstatic.net/W2M9X.png\n\nNow here comes the weird part. I replaced the returned JSX from the App component with HTML from a Tailwind tutorial and deleted it again.\n\n```\n\n \n 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n \n\n```\n\nAfter I Ctrl-Z'd a bunch of times, so I had only the previous code, my button suddenly spans two columns as intended:\n\nhttps://i.sstatic.net/WAkNA.png\n\nI checked to make sure that there were no changes in the code:\n\nhttps://i.sstatic.net/7oDDw.png\n\nMy friend even cloned my repo, followed the same steps and got the same result.\nHe suspects that it has something to do with the variable classNames in my Button component with regards to Tailwind's JIT compiler, but none of us can pinpoint the error.\n\nAm I using variable CSS classes wrong?\n\nThis has been a WTF moment. What could be the reason for this?\n\n========================================\n\nTop Answer:\nAs Ed Lucas said:\n`The CSS file generated by Tailwind will only include classes that it recognizes when it scans your code, which means that dynamically generated classes (e.g. col-span-${colSpan}) will not be included`\n\nBut now could use safeListing\n\nand\ntailwind-safelist-generator package to \"pregenerate\" our dynamics styles.\n\nWith tailwind-safelist-generator, you can generate a safelist.txt file for your theme based on a set of patterns.\n\nTailwind's JIT mode scans your codebase for class names, and generates\nCSS based on what it finds. If a class name is not listed explicitly,\nlike text-${error ? 'red' : 'green'}-500, Tailwind won't discover it.\nTo ensure these utilities are generated, you can maintain a file that\nlists them explicitly, like a safelist.txt file in the root of your\nproject.\n\n========================================\n\nCode:\n```text\nexport default function App() {\n return (\n <div className=\"flex min-h-screen items-center justify-center bg-blue-400\">\n <Calculator />\n </div>\n );\n}\n```\n\n```text\nimport { IoBackspaceOutline } from \"react-icons/io5\";\n\nexport const Calculator = () => {\n return (\n <div className=\"grid grid-cols-4 grid-rows-5 gap-2\">\n <Button>AC</Button>\n <Button>\n <IoBackspaceOutline size={26} />\n </Button>\n <Button>%</Button>\n <Button>÷</Button>\n <Button>7</Button>\n <Button>8</Button>\n <Button>9</Button>\n <Button>x</Button>\n <Button>4</Button>\n <Button>5</Button>\n <Button>6</Button>\n <Button>-</Button>\n <Button>1</Button>\n <Button>2</Button>\n <Button>3</Button>\n <Button>+</Button>\n <Button>0</Button>\n <Button>.</Button>\n <Button colSpan={2}>=</Button>\n </div>\n );\n};\n\nconst Button = ({ colSpan = 1, rowSpan = 1, children }) => {\n return (\n <div\n className={`col-span-${colSpan} row-span-${rowSpan} bg-white p-3 rounded`}\n >\n <div className=\"flex items-center justify-center\">{children}</div>\n </div>\n );\n};\n```\n\n```text\n<div className=\"bg-blue-400 text-blue-400 min-h-screen flex items-center justify-center\">\n <div className=\"grid grid-cols-3 gap-2\">\n <div className=\"col-span-2 bg-white p-10 rounded\">1</div>\n <div className=\"bg-white p-10 rounded\">2</div>\n <div className=\"row-span-3 bg-white p-10 rounded\">3</div>\n <div className=\"bg-white p-10 rounded\">4</div>\n <div className=\"bg-white p-10 rounded\">5</div>\n <div className=\"bg-white p-10 rounded\">6</div>\n <div className=\"col-span-2 bg-white p-10 rounded\">7</div>\n <div className=\"bg-white p-10 rounded\">8</div>\n <div className=\"bg-white p-10 rounded\">9</div>\n </div>\n</div>\n```\n\n```text\nconst Button = ({ colSpan = false, rowSpan = false, children }) => {\n return (\n <div\n className={`${colSpan ? 'col-span-2' : ''} ${rowSpan ? 'row-span-2' : ''} bg-white p-3 rounded`}\n >\n <div className=\"flex items-center justify-center\">{children}</div>\n </div>\n );\n};\n```\n\n```text\n<Button className='col-span-2 row-span-1'>=</Button>\n\nconst Button = ({ className, children }) => {\n return (\n <div\n className={`${className} bg-white p-3 rounded`}\n >\n <div className=\"flex items-center justify-center\">{children}</div>\n </div>\n );\n};\n```\n\n```text\ncol-span-${colSpan}\n```\n\n```text\ncol-span-2\n```\n\n```text\nrow-span-2\n```\n\n```text\nexport type TTextSizeClass =\n 'text-xl' |\n 'text-2xl' |\n 'text-3xl' |\n 'text-4xl' |\n 'text-5xl' |\n 'text-6xl' |\n 'text-7xl' |\n 'text-8xl' |\n 'text-9xl'\n;\n...\nconst type : number = 6 ;\nconst textSizeClass : TTextSizeClass = type != 1 ? `text-${type}xl` : 'text-xl';\n...\n<div className={`font-semibold ${textSizeClass} ${className}`}>text</div>\n```\n\n```text\nThe CSS file generated by Tailwind will only include classes that it recognizes when it scans your code, which means that dynamically generated classes (e.g. col-span-${colSpan}) will not be included\n```\n\n```text\nstyle={{ paddingLeft: width }}\n```\n\n```text\n@/app/\n```\n\n========================================\n\nComments:\n- Related: How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?\n- Does this also apply when providing exact sizes, e.g. `ml-[${leftMarginSize}px]`?\n- Yes. The Tailwind compiler will not recognize this as a class that it supports. Even if it did, it's just generating generic CSS, which does not use dynamic values (aside from CSS custom properties). Another solution for arbitrary values is to avoid Tailwind for this class and add a style attribute: `style={`margin-left:${leftMarginSize}px`}`\n- Tailwind also allows you to add a safelist in `tailwind.config.js`. See: tailwindcss.com/docs/content-configuration#safelisting-class‌​es","metadata":{"transformedAt":"2026-08-18T18:33:42.902Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":264,"estimatedTokens":1593}}240{"id":"stack-68020712","source":"stackoverflow","questionId":68020712,"title":"Tailwind css classes not showing in Storybook build","tags":["css","reactjs","tailwind-css","storybook"],"text":"Title: Tailwind css classes not showing in Storybook build\nTags: css, reactjs, tailwind-css, storybook\nSource: Stack Overflow\n\nQuestion:\nI am trying to build my storybook with tailwind css. When running `build-storybook` the components are rendered with the tailwind classes. Unfortunately, when I build storybook and run the create build `storybook-static` with `npx http-server storybook-static` the classes are not loaded into the stories and the components are displayed not styled.\n\nThis is a repro repo of my project:\nhttps://gitlab.com/ens.evelyn.development/storybook-issue\n\nThis is my `main.js` :\n\n```\nconst path = require('path')\n\nmodule.exports = {\n \"stories\": [\n \"../src/components/**/**/*.stories.mdx\",\n \"../src/components/**/**/*.stories.@(js|jsx|ts|tsx)\"\n ],\n \"addons\": [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n {\n name: '@storybook/addon-postcss',\n options: {\n postcssLoaderOptions: {\n implementation: require('postcss'),\n },\n },\n }, \n \"@storybook/addon-actions\",\n \"storybook-tailwind-dark-mode\"\n ]}\n```\n\nMy Projectstructure looks like this:\n\n```\n.storybook \nsrc\n components \n subdir\n Button\n index.tsx\n button.stories.js \n styles\n index.css (Any hints or advice is very appreciated.\n\n========================================\n\nTop Answer:\n### Solution 1: Easy solution\n\nIn `.storybook/preview.js` file add this line to compile tailwind generated css files like this -\n\n```\nimport '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';\n```\n\nHere `tailwindcss/tailwind.css` is the tailwind css file. Look, important is I've to add `!postcss-loader!` to compile tailwind generated css.\n\nYou can add also your custom scss file like this if any -\n\n```\nimport '!style-loader!css-loader!sass-loader!../src/scss/style.scss';\n```\n\nHere `../src/scss/style.scss` is custom scss file.\n\nFor most of the people this will work in Tailwind version > 3.0 without any issue.\n\n### Solution 2: Kinda Hack solution\n\nThe above solution will not work for Tailwind version > 3.0 because of JIT compiler.\n\nCreate a custom styled element in preview page\n\n```\nimport tailwindCss from '!style-loader!css-loader!postcss-loader!sass-loader!tailwindcss/tailwind.css';\nconst storybookStyles = document.createElement('style');\nstorybookStyles.innerHTML = tailwindCss;\ndocument.body.appendChild(storybookStyles);\n```\n\nHope, this will help for new Tailwind users who are working in Tailwind greater than `v3.0`.\n\n========================================\n\nCode:\n```text\nconst path = require('path')\n\nmodule.exports = {\n \"stories\": [\n \"../src/components/**/**/*.stories.mdx\",\n \"../src/components/**/**/*.stories.@(js|jsx|ts|tsx)\"\n ],\n \"addons\": [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n {\n name: '@storybook/addon-postcss',\n options: {\n postcssLoaderOptions: {\n implementation: require('postcss'),\n },\n },\n }, \n \"@storybook/addon-actions\",\n \"storybook-tailwind-dark-mode\"\n ]}\n```\n\n```text\n.storybook \nsrc\n components \n subdir\n Button\n index.tsx\n button.stories.js \n styles\n index.css (<-- tailwindcss file)\n```\n\n```text\nbuild-storybook\n```\n\n```text\nstorybook-static\n```\n\n```text\nnpx http-server storybook-static\n```\n\n```text\nmain.js\n```\n\n```text\npurge: {\n mode: 'all',\n content: [\n './src/components/**/**/*.{ts, tsx}'\n ],\n },\n```\n\n```text\npurge: ['./src/**/*.{js,jsx,ts,tsx}'],\n```\n\n```text\n// main.js\nmodule.exports = {\n ...\n addons: [\n ...\n {\n name: '@storybook/addon-postcss',\n options: {\n postcssLoaderOptions: {\n implementation: require('postcss'),\n },\n },\n },\n ],\n};\n```\n\n```text\n// postcss.config.js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n }\n```\n\n```text\n// preview.js\nimport 'tailwindcss/tailwind.css';\nexport const parameters = {...}\n```\n\n```text\n\"build-storybook\": \"build-storybook -s public && $(npm bin -g)/tailwindcss -i storybook-static/static/css/main.*.chunk.css -o storybook-static/static/css/main.*.chunk.css -m\",\n```\n\n```text\n$(npm bin -g)/\n```\n\n```text\nnpm i -g tailwindcss\n```\n\n```text\nstorybook-static/static/css/**/*.css\n```\n\n```js\nimport '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';\n```\n\n```js\nimport '!style-loader!css-loader!sass-loader!../src/scss/style.scss';\n```\n\n```js\nimport tailwindCss from '!style-loader!css-loader!postcss-loader!sass-loader!tailwindcss/tailwind.css';\nconst storybookStyles = document.createElement('style');\nstorybookStyles.innerHTML = tailwindCss;\ndocument.body.appendChild(storybookStyles);\n```\n\n```text\n.storybook/preview.js\n```\n\n```text\ntailwindcss/tailwind.css\n```\n\n```text\n!postcss-loader!\n```\n\n```text\n../src/scss/style.scss\n```\n\n```text\nv3.0\n```\n\n```text\nyarn add -D rollup-plugin-postcss\n```\n\n```js\n// tsdx.config.js\n\nconst postcss = require('rollup-plugin-postcss');\n\nmodule.exports = {\n rollup(config, options) {\n config.plugins.push(\n postcss({\n config: {\n path: './postcss.config.js',\n },\n extensions: ['.css'],\n minimize: true,\n inject: {\n insertAt: 'top',\n },\n })\n );\n return config;\n },\n};\n```\n\n```text\n// src/tailwind.css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```html\n// src/Thing.tsx\n\nimport React, { FC, HTMLAttributes, ReactChild } from 'react';\n\n// ! Add the CSS import statement !\nimport './tailwind.css`;\n\n// ...\n\n// we'll add some Tailwind classes on our components to test\n\nexport const Thing: FC<Props> = ({ children }) => {\n return (\n <div className=\"flex items-center justify-center w-5/6 m-auto text-2xl text-center text-pink-700 uppercase bg-blue-300 shadow-xl rounded-3xl\">\n {children || `the snozzberries taste like snozzberries`}\n </div>\n );\n};\n```\n\n```js\n// .storybook/main.js\nconst path = require(\"path\");\n\nmodule.exports = {\n stories: [\"../src/**/*.stories.mdx\", \"../src/**/*.stories.@(js|jsx|ts|tsx)\"],\n addons: [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/addon-interactions\",\n // {\n // name: \"@storybook/addon-postcss\",\n // options: {\n // postcssLoaderOptions: {\n // implementation: require(\"postcss\"),\n // },\n // },\n // },\n ],\n framework: \"@storybook/react\",\n core: {\n builder: \"webpack5\",\n },\n webpackFinal: (config) => {\n config.module.rules.push({\n test: /\\.css$/,\n use: [\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [require(\"tailwindcss\"), require(\"autoprefixer\")],\n },\n },\n },\n ],\n include: path.resolve(__dirname, \"../\"),\n });\n return config;\n },\n};\n```\n\n```js\n// .storybook/preview.js\nimport \"../styles/globals.css\";\n\nexport const parameters = {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/,\n },\n },\n};\n```\n\n```js\n// postcss.config.js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n```text\npostcss-loader\n```\n\n```text\n@storybook/builder-webpack5\n```\n\n```text\n@storybook/manager-webpack5\n```\n\n```text\npostcss-loader\n```\n\n```text\nwebpack\n```\n\n```text\nimport \"../src/index.css\";\n```\n\n```js\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst path = require(\"path\")\n\nmodule.exports = {\n content: [path.join(__dirname, \"./src/**/*.(js|jsx|ts|tsx)\")],\n theme: {\n extend: {},\n },\n variants: {}\n plugins: [],\n}\n```\n\n```text\nimport \"!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css\"\n\nexport const parameters = {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/,\n },\n },\n}\n```\n\n```text\nexport const parameters = {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/,\n },\n },\n};\n```\n\n```text\nimport \"!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css\";\n\nexport const parameters = {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/,\n },\n },\n};\n```\n\n```text\nyarn add -D @storybook/addon-postcss\n```\n\n```text\npreview.js\n```\n\n```text\npreview.js\n```\n\n```js\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./stories/**/*.{js,ts,jsx,tsx}\", //needed to make hot reload work with stories\n ],\n theme: {},\n plugins: [],\n}\n```\n\n```text\nimport '../styles/globals.css';\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n...\n```\n\n```text\ntailwind.css\n```\n\n```text\n.storybook/preview.js\n```\n\n```text\ntailwind.css\n```\n\n```text\nglobals.css\n```\n\n```text\n.storybook/preview.ts\n```\n\n```text\nglobals.css\n```\n\n```text\nimport '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';\n```\n\n```text\ncontent: [\"./src/**/*.{js,jsx,ts,tsx}\",\"./nodemodules/ @yourstorybooklib/**/*.{js,jsx,ts,tsx}\"]\n```\n\n```js\nconst config: Config = {\n content: [\n \"./src/pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n /**\n * Add the below line:\n * Customise the match pattern to target the Storybook story\n * files in your project per your projects directory structure\n */\n \"./src/stories/**/*.{js,ts,jsx,tsx,mdx}\"\n ],\n // ...the rest of the configuration\n}\nexport default config;\n```\n\n```text\ntailwind.config.ts\n```\n\n```text\ncontent\n```\n\n```text\ntailwind.config.ts\n```\n\n```text\n\"./src/pages/**/*.{js,ts,jsx,tsx,mdx}\"\n```\n\n```text\n./src/pages\n```\n\n```text\njs\n```\n\n```text\nts\n```\n\n```text\njsx\n```\n\n```text\ntsx\n```\n\n```text\nmdx\n```\n\n```text\n\"./src/stories/**/*.{js,ts,jsx,tsx,mdx}\"\n```\n\n```text\n./src/stories\n```\n\n========================================\n\nComments:\n- How are you including your other styles?\n- @Pytth I am only using tailwindcss for the moment so my only styles are located in src/styles/index.css\n- Thank you for your effort. Unfortunately this aproach did not work for me either. Does it make any difference where my tailwindcss.css file is located or named?\n- I think we would need to look into Storybook's default Webpack config. I am surprised that your index.css is getting copied to the build directory. I'll attach the contents of my built storybook-static to my answer for comparison.\n- If you post a repro repo, I can take a look.\n- thank you that is very nice of you. I just removed the line that my index.css is part of the storybook-static. I added it will try/error via -s flag when building storybook. When I look at my storybook-static then it looks the same as yours. I will try and setup repro repo. Thanks a lot. i really appreciate it!\n- I posted a repro repo in my question\n- Got it: I'll add to my answer above.\n- Glad I could help :) Btw, I've pushed a repo to Github with a few more potentially helpful changes: 1) I recommend using Tailwind's new JIT mode; 2) your tsconfig includes were a little broken; 3) I included a pattern for writing stories in Typescript: github.com/jcamden/SO-68020712-revised/commit/…\n- `import 'tailwindcss/tailwind.css';` worked for me\n- added this but the `disabled:opacity-25` class still doesn't work, any ideas?\n- Can you try extending tailwind.config.js by adding this - variants: { extend: { opacity: ['disabled'], }, },\n- My custom styles in `index.css` alson still doesn't work in storybook, but works in normal react app. Open to your thoughts too...\n- Your first solution worked perfectly for me with Gatsby 4.2.0, TailwindCSS 3.1.7, PostCSS 8.4.14, @storybook/react 6.5.10.\n- This worked for me after upgrading to webpack 5\n- Thanks, this worked for me as well in a Vite + Vue 3 project.\n- What a life-saver of an answer!\n- thanks also work for my react `18.2.0`\n- Thanks for your answer. It worked for react 19.\n- This is working for me partially. When I try to use @apply on a css module and import it into the component, it doesn't work. Any ideas?\n- Yes @apply its not working for me ether\n- Snapshot of webpages as of when this answer was posted, as there are possibilities that links might have been updated/moved or content has been updated. 1. Next.js Recipe on 12th Feb 2024 2. Tailwind Recipe on 12th Feb 2024","metadata":{"transformedAt":"2026-08-18T18:33:42.903Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":67,"totalLines":600,"estimatedTokens":3105}}241{"id":"stack-65784357","source":"stackoverflow","questionId":65784357,"title":"TailwindCSS - Change Label When Radio Button Checked","tags":["radio-button","tailwind-css"],"text":"Title: TailwindCSS - Change Label When Radio Button Checked\nTags: radio-button, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI see that the TailwindCSS `checked:` variant can be enabled to change the input element when checked, but how can I change the input's label when checked?\n\nHere is the relevant Tailwind CSS docs.\n\nSample code below.\n\nAfter enabling the variant in `tailwind.config.js`, putting `checked:bg-green-300` in the div or the label doesn't work. It only works in the input.\n\n```\n\n \n \n option1\n \n \n \n option2\n \n\n```\n\n========================================\n\nTop Answer:\nStarting from TailwindCSS 3.4, you can now use `has-*` which utilizes CSS' `:has()` pseudo-selector. Here's an example how to use it:\n\n\r\n\r\n\n```\n\n \n \n option1\n \n \n \n option2\n \n\n```\n\n========================================\n\nCode:\n```html\n<div>\n <label>\n <input checked type=\"radio\" name=\"option1\" id=\"option1\" className=\"hidden\" />\n <div>option1</div>\n </label>\n <label>\n <input checked type=\"radio\" name=\"option2\" id=\"option1\" className=\"hidden\" />\n <div>option2</div>\n </label>\n</div>\n```\n\n```text\nchecked:\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nchecked:bg-green-300\n```\n\n```html\n<label>\n <input checked type=\"radio\" name=\"option\" id=\"option1\" class=\"hidden peer\" />\n <div class=\"peer-checked:bg-red-600\">option1</div>\n</label>\n```\n\n```js\nconst plugin = require('tailwindcss/plugin');\n\nmodule.exports = {\n purge: [],\n darkMode: false, // or 'media' or 'class'\n theme: {},\n variants: {\n extend: {\n backgroundColor: ['label-checked'], // you need add new variant to a property you want to extend\n },\n },\n plugins: [\n plugin(({ addVariant, e }) => {\n addVariant('label-checked', ({ modifySelectors, separator }) => {\n modifySelectors(\n ({ className }) => {\n const eClassName = e(`label-checked${separator}${className}`); // escape class\n const yourSelector = 'input[type=\"radio\"]'; // your input selector. Could be any\n return `${yourSelector}:checked ~ .${eClassName}`; // ~ - CSS selector for siblings\n }\n )\n })\n }),\n ],\n};\n```\n\n```html\n<label>\n <input checked type=\"radio\" name=\"option1\" id=\"option1\" class=\"hidden\" />\n <div class=\"label-checked:bg-red-600\">option1</div>\n</label>\n```\n\n```html\n<input checked type=\"radio\" name=\"option1\" id=\"option1\" class=\"hidden\" />\n<label for=\"option-1\" class=\"label-checked:bg-red-600\"></label>\n```\n\n```text\npeer\n```\n\n```text\nlabel-checked\n```\n\n```text\n<input type=\"checkbox\" name=\"themeToggler\" id=\"themeToggler\" class=\"peer\" />\n<label for=\"themeToggler\" class=\"w-10 h-10 bg-gray-400 peer-checked:bg-red-400\"></label>\n```\n\n```text\n<div class=\"p-3 h-screen w-full flex justify-center items-center bg-black\">\n\n<div class=\"w-full\">\n <div class=\"flex\">\n <p class=\"text-[20px] text-white\">Which of the following is an asian country?</p>\n </div>\n <div class=\"md:grid grid-cols-12 gap-3 pb-4 w-full\">\n <div className=\"col-span-6\">\n <div class=\"w-full\">\n <input id=\"default-radio-1\" type=\"radio\" value=\"\" name=\"default-radio\" class=\"peer opacity-0 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600\">\n <label for=\"default-radio-1\" class=\"flex cursor-pointer bg-gray-200 justify-center items-center h-10 w-full peer-checked:bg-rose-500 peer-checked:text-white text-[17px] text-sm font-medium text-gray-900 dark:text-gray-300\">India</label>\n </div>\n </div>\n <div className=\"col-span-6\">\n <div class=\"w-full\">\n <input id=\"default-radio-2\" type=\"radio\" value=\"\" name=\"default-radio\" class=\"peer opacity-0 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600\">\n <label for=\"default-radio-2\" class=\"flex cursor-pointer bg-gray-200 justify-center items-center h-10 w-full peer-checked:bg-rose-500 peer-checked:text-white text-[17px] text-sm font-medium text-gray-900 dark:text-gray-300\">Australia</label>\n </div>\n </div>\n <div className=\"col-span-6\">\n <div class=\"w-full\">\n <input id=\"default-radio-3\" type=\"radio\" value=\"\" name=\"default-radio\" class=\"peer opacity-0 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600\">\n <label for=\"default-radio-3\" class=\"flex cursor-pointer bg-gray-200 justify-center items-center h-10 w-full peer-checked:bg-rose-500 peer-checked:text-white text-[17px] text-sm font-medium text-gray-900 dark:text-gray-300\">USA</label>\n </div>\n </div>\n <div className=\"col-span-6\">\n <div class=\"w-full\">\n <input id=\"default-radio-4\" type=\"radio\" value=\"\" name=\"default-radio\" class=\"peer opacity-0 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600\">\n <label for=\"default-radio-4\" class=\"flex cursor-pointer bg-gray-200 justify-center items-center h-10 w-full peer-checked:bg-rose-500 peer-checked:text-white text-[17px] text-sm font-medium text-gray-900 dark:text-gray-300\">Germany</label>\n </div>\n </div>\n </div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.4.3\"></script>\n\n<div class=\"flex gap-2\">\n <label class=\"bg-gray-100 border-gray-100 p-4 rounded has-[:checked]:text-green-500 has-[:checked]:bg-green-100 has-[:checked]:border-green-700\">\n <input type=\"radio\" name=\"option\" id=\"option1\" class=\"hidden\" />\n <div>option1</div>\n </label>\n <label class=\"bg-gray-100 border-gray-100 p-4 rounded has-[:checked]:text-green-500 has-[:checked]:bg-green-100 has-[:checked]:border-green-700\">\n <input type=\"radio\" name=\"option\" id=\"option1\" class=\"hidden\" />\n <div>option2</div>\n </label>\n</div>\n```\n\n```text\nhas-*\n```\n\n```text\n:has()\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<!-- Adjacent Sibling ( + ) -->\n<label class=\"p-4 flex flex-col gap-2 border p-4\">\n <input checked type=\"checkbox\" />\n <div class=\"[input:checked_+_&]:bg-red-600 p-2\">Adjacent Sibling</div>\n <div class=\"[input:checked_+_&]:bg-red-600 p-2 bg-gray-300\">This remains unchanged</div>\n</label>\n\n<!-- General Sibling ( ~ ) -->\n<label class=\"p-4 flex flex-col gap-2 border p-4 mt-4\">\n <input checked type=\"checkbox\" />\n <div class=\"[input:checked_~_&]:bg-blue-600 p-2 bg-gray-300\">General Sibling</div>\n <div class=\"[input:checked_~_&]:bg-blue-600 p-2\">General Sibling</div>\n</label>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant sibling-checked (*:checked ~ &);\n</style>\n\n<label class=\"p-4 flex flex-col gap-2 border p-4\">\n <input checked type=\"checkbox\" />\n <div class=\"sibling-checked:bg-green-600 p-2\">Example</div>\n</label>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant input-checked (input:checked ~ &);\n</style>\n\n<label class=\"p-4 flex flex-col gap-2 border p-4\">\n <input checked type=\"checkbox\" />\n <div class=\"input-checked:bg-green-600 p-2\">Example</div>\n</label>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<label class=\"p-4 flex flex-col gap-2 border p-4\">\n <input checked type=\"checkbox\" />\n <div class=\"in-[label:has(input:checked)]:bg-red-600 p-2\">Example</div>\n</label>\n```\n\n```text\n[&>div]\n```\n\n```text\ninput:checked\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\n@custom-variant\n```\n\n```text\n@custom-variant\n```\n\n```text\ninput:checked\n```\n\n```text\nin-*\n```\n\n```text\nin-*\n```\n\n```text\nin-[a:hover]:...\n```\n\n```text\n<a>\n```\n\n```text\ninput:checked\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\nin-*\n```\n\n```text\n+\n```\n\n```text\n~\n```\n\n========================================\n\nComments:\n- This does not work if the sibling element has a default bg color\n- @stifler97 It works. Or maybe I misunderstood you, need to see your code\n- It is important to keep in mind that the input element needs to come before the label element for this to work.\n- Thank you! This worked for me nicely. Thanks for providing the example too\n- This helped me thanks! I never knew this was added. I wonder what other things you can check for. Does it work for any child attribute could be helpful for UI.","metadata":{"transformedAt":"2026-08-18T18:33:42.903Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":34,"totalLines":313,"estimatedTokens":2200}}242{"id":"stack-70773146","source":"stackoverflow","questionId":70773146,"title":"How do I change the direction of a gradient in tailwind css?","tags":["gradient","tailwind-css","direction"],"text":"Title: How do I change the direction of a gradient in tailwind css?\nTags: gradient, tailwind-css, direction\nSource: Stack Overflow\n\nQuestion:\n```\n\n```\n\n.\n.\n.\n.\n\nI have tried the above code. But it's a linear gradient, I want a vertical gradient.\n\n========================================\n\nCode:\n```text\n<div class=\"bg-gradient-to-r from-cyan-500 to-blue-500 \">\n```\n\n```text\nlinear\n```\n\n```text\nvertical\n```\n\n```text\nhorizontal\n```\n\n```text\nvertical\n```\n\n```text\nlinear\n```\n\n```text\nradial\n```\n\n```text\nlinear\n```\n\n```text\nlinear\n```\n\n```text\nbg-gradient-to-t\n```\n\n```text\nbg-gradient-to-tr\n```\n\n```text\nbg-gradient-to-r\n```\n\n```text\nbg-gradient-to-br\n```\n\n```text\nbg-gradient-to-b\n```\n\n```text\nbg-gradient-to-bl\n```\n\n```text\nbg-gradient-to-l\n```\n\n```text\nbg-gradient-to-tl\n```\n\n```text\nbg-gradient-to-t\n```\n\n```text\nbg-gradient-to-b\n```\n\n========================================\n\nComments:\n- Try using bg-gradient-to-t or bg-gradient-to-b","metadata":{"transformedAt":"2026-08-18T18:33:42.903Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":19,"totalLines":99,"estimatedTokens":235}}243{"id":"stack-74367340","source":"stackoverflow","questionId":74367340,"title":"use nth-child(odd) css selector with Tailwind on the parent element","tags":["css","css-selectors","tailwind-css"],"text":"Title: use nth-child(odd) css selector with Tailwind on the parent element\nTags: css, css-selectors, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to achieve the following:\n\n```\n\n \n name\n title1\n \n \n name\n title1\n \n \n name\n title1\n \n\n```\n\nBut without entering the css on each `tr` child tag, but once on the `table` tag.\n\nSomething like this: (which I couldn't make it work, btw)\n\n```\n\n \n name\n title1\n \n \n name\n title1\n \n \n name\n title1\n \n\n```\n\nRight now I'm doing something like this to achieve it, but I'd like to do it all with tailwind classes, if possible\n\n```\n\n div.plan-details :nth-child(odd) {\n @apply text-zinc-500;\n }\n div.plan-details :nth-child(even) {\n @apply text-zinc-900;\n }\n\n```\n\nAlso tried with this but it didn't work.\n\nI have this tailwind play example with both examples\n\n========================================\n\nTop Answer:\nSince version 3.2 tailwind supports combining groups with arbitrary value.\n\n```\n\n \n \n \n\n```\n\nYou can put the `group` className to the any parent element (in your case tr) and change styles of the any child using `group-[*]:` variant.\n\n========================================\n\nCode:\n```html\n<table>\n <tr class=\"odd:bg-white even:bg-slate-100\">\n <td>name</td>\n <td>title1</td>\n </tr>\n <tr class=\"odd:bg-white even:bg-slate-100\">\n <td>name</td>\n <td>title1</td>\n </tr>\n <tr class=\"odd:bg-white even:bg-slate-100\">\n <td>name</td>\n <td>title1</td>\n </tr>\n</table>\n```\n\n```html\n<table class=\"--odd:bg-white even:bg-slate-100 [&:nth-child(odd)]:bg-gray-400\">\n <tr>\n <td>name</td>\n <td>title1</td>\n </tr>\n <tr>\n <td>name</td>\n <td>title1</td>\n </tr>\n <tr>\n <td>name</td>\n <td>title1</td>\n </tr>\n</table>\n```\n\n```css\n<style lang=\"postcss\">\n div.plan-details :nth-child(odd) {\n @apply text-zinc-500;\n }\n div.plan-details :nth-child(even) {\n @apply text-zinc-900;\n }\n</style>\n```\n\n```text\ntr\n```\n\n```text\ntable\n```\n\n```text\n[&>*:nth-child(odd)]:bg-blue-500\n[&>*:nth-child(even)]:bg-red-500\n```\n\n```text\n<div class=\" [&>*:nth-child(odd)]:bg-red-500 [&>*:nth-child(even)]:bg-blue-500\">\n <div>1</div>\n <div>2</div>\n <div>3</div>\n <div>4</div>\n <div>5</div>\n</div>\n```\n\n```text\n[&>tbody>*:nth-child(odd)]\n```\n\n```text\n<table class=\" [&>tbody>*:nth-child(odd)]:bg-red-500 [&>tbody>*:nth-child(even)]:bg-blue-500\">\n <tr>\n <td>name</td>\n <td>title1</td>\n </tr>\n <tr>\n <td>name</td>\n <td>title1</td>\n </tr>\n <tr>\n <td>name</td>\n <td>title1</td>\n </tr>\n</table>\n```\n\n```html\n<table>\n <tbody class=\"[&>*:nth-child(odd)]:bg-red-500 [&>*:nth-child(even)]:bg-blue-500\">\n <tr>\n <td>name</td>\n <td>title1</td>\n </tr>\n <tr>\n <td>name</td>\n <td>title1</td>\n </tr>\n <tr>\n <td>name</td>\n <td>title1</td>\n </tr>\n </tbody>\n</table>\n```\n\n```text\n&\n```\n\n```text\nchildren:pl-4\n```\n\n```text\n.children\\:pl-4 > * { .. }\n```\n\n```text\nodd\n```\n\n```text\neven\n```\n\n```text\n:nth-child(odd)\n```\n\n```text\n:nth-child(even)\n```\n\n```text\ndiv\n```\n\n```text\nli\n```\n\n```text\n<tbody>\n```\n\n```text\n<tbody>\n```\n\n```text\n<tbody>\n```\n\n```text\n<table>\n```\n\n```text\n<tbody>\n```\n\n```text\n<tr>\n```\n\n```text\n<tbody>\n```\n\n```text\n<tbody>\n```\n\n```text\n<tbody>\n```\n\n```text\n<div className={`even:mt-8`}>\n <div>\n {/* Content*/}\n </div>\n</div>\n```\n\n```html\n<div class=\"group\">\n <div class=\"group-[:nth-of-type(3)_&]:block\">\n <!-- ... -->\n </div>\n</div>\n```\n\n```text\ngroup\n```\n\n```text\ngroup-[*]:\n```\n\n========================================\n\nComments:\n- Is this solution of creating a class not giving you a good solution? Are you looking for a way to do it without custom utilities? Example: play.tailwindcss.com/NRb0AhM7qE\n- Thanks for the tip, it's similar to what I'm doing, I'm just trying to avoid setting any css, and try to solve it with inline classes, if it's possible\n- I couldn't figure it out, but I found out about a plugin the developer created: github.com/tailwindlabs/tailwindcss/pull/8299 If you want to add it to tailwind, check this link: tailwindcss.com/docs/plugins#adding-variants It might get you closer to the solution\n- Check out what I have successfully done. Maybe we can figure it out together: play.tailwindcss.com/dEqsiZ241R So it works with the list and div elements but not the table elements..\n- You are pretty close @ChenBr, later on I'll see why it doesn't work with tables and trs\n- I found a solution, and I am posting it now :)\n- That's great, I guess we could also explicitly add the tbody ourselves, to avoid that browser magic, like this: play.tailwindcss.com/GitWWTJNFM still surprises me that something so common is not easier to achieve with tailwind\n- @opensas Good point, I added it to the answer as well. I definitely agree, the way those selectors are implemented right now is quite annoying..","metadata":{"transformedAt":"2026-08-18T18:33:42.903Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":32,"totalLines":295,"estimatedTokens":1203}}244{"id":"stack-71818458","source":"stackoverflow","questionId":71818458,"title":"Why won't tailwind find my dynamic class?","tags":["tailwind-css"],"text":"Title: Why won't tailwind find my dynamic class?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nso i'm trying to load classes dynamically based on an Object Array\n\n```\n\n{{ item.name }}\n\n```\n\ni checked on the Elements Panel on the browser and the class property loads correctly but the css doesn't.\n\nWhy is that so? Any help would be greatly appreciated.\n\n========================================\n\nTop Answer:\nFor anyone who needs it, here's what *\"safelist it instead\"* means in @NathanDawson's answer:\n\n**tailwind.config.js**\n\n```\nconst usedColors = ['blue', 'red', 'green']\nmodule.exports = {\n safelist: usedColors.map((c) => `text-${c}-600`),\n /* rest of your tailwind config */\n}\n```\n\nAnd, if you want to add some `line-clamp-*` dynamically generated classes, which can either output `line-clamp-2` or `line-clamp-4` to the above:\n\n```\nconst safelist = [\n ...['blue', 'red', 'green'].map((c) => `text-${c}-600`),\n ...[2, 4].map((n) => `line-clamp-${n}`)\n]\nconsole.log(safelist)\n/* \n[ \n 'text-blue-600',\n 'text-red-600',\n 'text-green-600',\n 'line-clamp-2',\n 'line-clamp-4'\n]\n*/\n \nmodule.exports = {\n safelist,\n /* rest of your tailwind config */\n}\n```\n\nThe idea is to generate an array of strings containing all the classes you want included in the built stylesheet, regardless of the fact Tailwind doesn't find them in your code.\n\n========================================\n\nCode:\n```text\n<div v-for=\"item in items\"\n :key=\"item.id\"\n :class=\"'text-' + item.color + '-600'\"\n>\n{{ item.name }}\n</div>\n```\n\n```js\nconst usedColors = ['blue', 'red', 'green']\nmodule.exports = {\n safelist: usedColors.map((c) => `text-${c}-600`),\n /* rest of your tailwind config */\n}\n```\n\n```js\nconst safelist = [\n ...['blue', 'red', 'green'].map((c) => `text-${c}-600`),\n ...[2, 4].map((n) => `line-clamp-${n}`)\n]\nconsole.log(safelist)\n/* \n[ \n 'text-blue-600',\n 'text-red-600',\n 'text-green-600',\n 'line-clamp-2',\n 'line-clamp-4'\n]\n*/\n \nmodule.exports = {\n safelist,\n /* rest of your tailwind config */\n}\n```\n\n```text\nline-clamp-*\n```\n\n```text\nline-clamp-2\n```\n\n```text\nline-clamp-4\n```\n\n```text\n<Button style={{ backgroundColor: buttonBgColor }} className='w-auto h-[45px] px-6 py-3 bg-green-800 rounded-[7.20px] mt-6 flex-col justify-center items-center gap-[9px] inline-flex'>\n <span style={{ color: buttonTextColor }} className={cn(`text-center text-white text-sm font-semibold leading-[20.88px]`)}>Change Button Color/Text to see change</span>\n</Button>\n```\n\n========================================\n\nComments:\n- thanks for the help! Decided to just pass the whole class and it works fine\n- Not sure how, but @HanirTxZ approach also works for me. Using Nuxt3 and Tailwind.\n- @InvisibleGorilla You're no longer dynamically generating class names but rather passing through the full name. That's the correct solution. The previous commenter was merely stating they'd taken the suggestion at the end of my answer.\n- @NathanDawson - can you have a look here? I am passing full class name, on the iteration adding the class. but not works. what would be the correct approach here: stackoverflow.com/questions/74861826/…\n- Does this also happen in versions of tailwind that are lower than 4?","metadata":{"transformedAt":"2026-08-18T18:33:42.903Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":126,"estimatedTokens":801}}245{"id":"stack-78979789","source":"stackoverflow","questionId":78979789,"title":"Tailwind error when installing shadcn in Vite React App","tags":["reactjs","npm","tailwind-css","vite","shadcnui"],"text":"Title: Tailwind error when installing shadcn in Vite React App\nTags: reactjs, npm, tailwind-css, vite, shadcnui\nSource: Stack Overflow\n\nQuestion:\nI was setting up shadcn in a React App using Vite by using the following command:\n\n`npx shadcn@latest init`\n\nand I received an error (please see error below). I had installed tailwind and did setup as mentioned on official website.\n\n`npm install -D tailwindcss postcss autoprefixer`\n\n`npx tailwindcss init -p`\n\nError:\n\nNo Tailwind CSS configuration found at\n/Users/mubashirahmed/Code/shadcn-project.\n\nIt is likely you do not have\nTailwind CSS installed or have an invalid configuration.\n\nInstall\nTailwind CSS then try again. \n\nVisit https://tailwindcss.com/docs/guides/vite to get started.\n\nWhat could be the possible reason for that?\n\n========================================\n\nTop Answer:\nCurrent approach\n\nin twind v4\n\nin global.css or in style.css\n\nuse\n\n```\n@import \"tailwindcss\";\n```\n\nnow run\n\n```\nnpx --legacy-peer-deps shadcn@latest init\n```\n\nin case the dep problem there in the project other wise only\n\n```\nnpx shadcn@latest init\n```\n\nalso it can be\n\n```\nnpx shadcn@latest create\n```\n\n========================================\n\nCode:\n```text\nnpx shadcn@latest init\n```\n\n```text\nnpm install -D tailwindcss postcss autoprefixer\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\nnpx --legacy-peer-deps shadcn@latest init\n```\n\n```text\nnpx shadcn@latest init\n```\n\n```text\nnpx shadcn@latest create\n```\n\n========================================\n\nComments:\n- This question is similar to: Error Installing Shadcn UI and Tailwind CSS in React.js Project with Vite.\n- This worked for me\n- and note that if you're using sass/scss you have to change your global style file from scss extension to css\n- @AbolfazlAkbarzadeh thanks. I wanted to ask one more thing, when I copy components from shadcn website into my app, components work but the css is very different. Do you know what could be the reason? By different I mean it seems some of the css is not getting applied properly.\n- Nevermind, had some issues in config file.\n- @mubashir maybe, but it's better to install shadcn components by it's cli interface to prevent this kind of issues \"npx shadcn add \"\n- Worked for me. I didn't have an index.css file in my project\n- Until TailwindCSS v3, you had to the steps in the v3 documentation 100%. However, today, running `npm install tailwindcss` will install v4 by default. So, you either the new v4 installation steps or continue using the v3 version with the `npm install tailwindcss@3` command.\n- I ran into the same error but with tailwind v4 which as far as I can tell just isn't supported with the shadcn cli (i.e. it yields the tailwind css config error). This blog post outlines an alternative though.\n- @GregVenech Yes, you made the right conclusion. We've gathered more information on the topic here: Error Installing Shadcn UI and Tailwind CSS in React.js Project with Vite - A few days ago, Shadcn officially started supporting TailwindCSS v4; See: `shadcn-ui/ui` #6427 and Shadcn UI with TailwindCSS v4\n- Thanks this works.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.903Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":115,"estimatedTokens":868}}246{"id":"stack-62588040","source":"stackoverflow","questionId":62588040,"title":"How to use padding negative in tailwind to make it responsive?","tags":["tailwind-css"],"text":"Title: How to use padding negative in tailwind to make it responsive?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using tailwind css for designing my site but making responsive is tough\ncan anyone help?\n\n========================================\n\nTop Answer:\nYou can write your custom value like this even negative value too,\n\n`py-[-30px] mx-[-20px] translate-y-[-50%] translate-x-[-50%]`\n\n========================================\n\nCode:\n```css\nneg-m-16:{margin:-1rem}\n```\n\n```text\npy-[-30px] mx-[-20px] translate-y-[-50%] translate-x-[-50%]\n```\n\n```css\n.your-selector {\n margin-bottom: calc(-1 * theme('spacing.5'));\n}\n```\n\n```text\ntheme()\n```\n\n```text\ncalc()\n```\n\n========================================\n\nComments:\n- For those who're using tailwind with prefix `tw-` , it will be double hyphens for negative value. eg `tw--mt-2`\n- I kept writing `-mt-[20px]` and not understanding. Thank you for this syntax. Interestingly enough for `left`, this syntax works: `-left-[1.5rem]`","metadata":{"transformedAt":"2026-08-18T18:33:42.903Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":45,"estimatedTokens":249}}247{"id":"stack-75079019","source":"stackoverflow","questionId":75079019,"title":"Tailwind CSS fallback for new screen length types such as \"lvh\", \"svh\"","tags":["css","tailwind-css"],"text":"Title: Tailwind CSS fallback for new screen length types such as \"lvh\", \"svh\"\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI wrote `tailwind.config.js` as bellows to use new CSS length types such as `lvh`, `svh`.\n\n```\nmodule.exports = {\n theme: {\n extend: {\n height: {\n \"screen\": \"100dvh\",\n \"screen-small\": \"100svh\",\n \"screen-large\": \"100lvh\"\n }\n }\n }\n}\n```\n\nthen it successfully exports\n\n```\n.h-screen {\n height: 100dvh;\n}\n```\n\nBut I want to get with fallback properties like\n\n```\n.h-screen {\n height: 100vh; /* fallback for Opera, IE and etc. */\n height: 100dvh;\n}\n```\n\nIs there any nice way to export fallback properties with Tailwind CSS?\n\n========================================\n\nTop Answer:\nSince 2023, dynamic values have become part of the default template.\n\n- tailwindcss PR #11317 - GitHub\n\n- Dynamic Viewport Height: `h-dvh` - Tailwind CSS Docs\n\n- Large Viewport Height: `h-lvh` - Tailwind CSS Docs\n\n- Small Viewport Height: `h-svh` - Tailwind CSS Docs\n\nIn general, Tailwind CSS v3.0 is designed for and tested **on the latest stable versions of Chrome, Firefox, Edge, and Safari**. It does not support any version of IE, including IE 11.\n\nSource: Browser Support - Tailwind CSS Docs\n\n**Browsers released around 2022 started supporting dynamic viewport values.** However, if you'd like to assign fallback values, you can use the CSS `@supports` and `not` operators to inject additional CSS, assigning fallback values to the mentioned 3 classes.\n\nThis feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\nSource: `@supports` - MDN Docs\n\n```\n@supports not (height: 100dvh) {\n .h-dvh {\n height: 100vh;\n }\n\n /* ... */\n}\n```\n\nWith the help of a Tailwind CSS plugin, you can dynamically add fallback values for all screens:\n\n### TailwindCSS v4.0 or above\n\n- `@utility` directive (instead of `@layer utilities`) - TailwindCSS v4 Docs\n\n- **TailwindCSS v4 Playground with new utilities**\n\n```\n@utility h-dvh {\n @supports (height: 100dvh) {\n height: 100dvh;\n }\n @supports not (height: 100dvh) {\n height: 100vh;\n }\n}\n\n@utility h-lvh {\n @supports (height: 100lvh) {\n height: 100lvh;\n }\n @supports not (height: 100lvh) {\n height: 100vh;\n }\n}\n\n@utility h-svh {\n @supports (height: 100svh) {\n height: 100svh;\n }\n @supports not (height: 100svh) {\n height: 100vh;\n }\n}\n```\n\nAnd, you can dynamically declare `h-dvh-{number}`, `h-lvh-{number}`, and `h-svh-{number}` classes just like `h-{number}`.\n\n```\n/* Example: h-dvh-50 will be height: 50dvh; */\n/* - if dvh not supported then will be height: 50vh; */\n@utility h-dvh-* {\n @supports (height: 100dvh) {\n height: calc(--value(integer) * 1dvh);\n }\n @supports not (height: 100dvh) {\n height: calc(--value(integer) * 1vh);\n }\n}\n\n/* Example: h-lvh-50 will be height: 50lvh; */\n/* - if lvh not supported then will be height: 50vh; */\n@utility h-lvh-* {\n @supports (height: 100lvh) {\n height: calc(--value(integer) * 1lvh);\n }\n @supports not (height: 100lvh) {\n height: calc(--value(integer) * 1vh);\n }\n}\n\n/* Example: h-svh-50 will be height: 50svh; */\n/* - if svh not supported then will be height: 50vh; */\n@utility h-svh-* {\n @supports (height: 100svh) {\n height: calc(--value(integer) * 1svh);\n }\n @supports not (height: 100svh) {\n height: calc(--value(integer) * 1vh);\n }\n}\n\n/* Example: h-screen-50 will be height: 50vh; */\n@utility h-screen-* {\n height: calc(--value(integer) * 1vh);\n}\n```\n\n- Browser support - TailwindCSS v4 Docs\n\n**Note**: *TailwindCSS v4 primarily focuses on supporting browsers from 2023-2024 to leverage many new CSS developments that are designed for long-term use. Therefore, the dynamic heights injected into all browsers in 2022 should not pose a problem - in theory. If you're curious about the {number} utilities or want to use them without support, here they are:*\n\n- **TailwindCSS v4 Playground with new utilities**\n\n```\n/* Example: h-dvh-50 will be height: 50dvh; */\n@utility h-dvh-* {\n height: calc(--value(integer) * 1dvh);\n}\n\n/* Example: h-lvh-50 will be height: 50lvh; */\n@utility h-lvh-* {\n height: calc(--value(integer) * 1lvh);\n}\n\n/* Example: h-svh-50 will be height: 50svh; */\n@utility h-svh-* {\n height: calc(--value(integer) * 1svh);\n}\n\n/* Example: h-screen-50 will be height: 50vh; */\n@utility h-screen-* {\n height: calc(--value(integer) * 1vh);\n}\n```\n\n### TailwindCSS v3.4 or above\n\n```\nconst plugin = require('tailwindcss/plugin');\n\nmodule.exports = {\n plugins: [\n plugin(function ({ addUtilities }) {\n const fallbackHeightUtilities = {\n '@supports not (height: 100dvh)': {\n '.h-dvh': { height: '100vh' },\n '.min-h-dvh': { 'min-height': '100vh' },\n '.max-h-dvh': { 'max-height': '100vh' },\n },\n '@supports not (height: 100lvh)': {\n '.h-lvh': { height: '100vh' },\n '.min-h-lvh': { 'min-height': '100vh' },\n '.max-h-lvh': { 'max-height': '100vh' },\n },\n '@supports not (height: 100svh)': {\n '.h-svh': { height: '100vh' },\n '.min-h-svh': { 'min-height': '100vh' },\n '.max-h-svh': { 'max-height': '100vh' },\n },\n };\n\n addUtilities(fallbackHeightUtilities, ['responsive']);\n }),\n ],\n};\n```\n\n### TailwindCSS v3.3 or below\n\n```\nconst plugin = require('tailwindcss/plugin');\n\nmodule.exports = {\n plugins: [\n plugin(function ({ addUtilities }) {\n const heightUtilities = {\n '.h-dvh': { height: '100dvh' },\n '.h-lvh': { height: '100lvh' },\n '.h-svh': { height: '100svh' },\n\n '.min-h-dvh': { 'min-height': '100dvh' },\n '.min-h-lvh': { 'min-height': '100lvh' },\n '.min-h-svh': { 'min-height': '100svh' },\n\n '.max-h-dvh': { 'max-height': '100dvh' },\n '.max-h-lvh': { 'max-height': '100lvh' },\n '.max-h-svh': { 'max-height': '100svh' },\n };\n\n const fallbackHeightUtilities = {\n '@supports not (height: 100dvh)': {\n '.h-dvh': { height: '100vh' },\n '.min-h-dvh': { 'min-height': '100vh' },\n '.max-h-dvh': { 'max-height': '100vh' },\n },\n '@supports not (height: 100lvh)': {\n '.h-lvh': { height: '100vh' },\n '.min-h-lvh': { 'min-height': '100vh' },\n '.max-h-lvh': { 'max-height': '100vh' },\n },\n '@supports not (height: 100svh)': {\n '.h-svh': { height: '100vh' },\n '.min-h-svh': { 'min-height': '100vh' },\n '.max-h-svh': { 'max-height': '100vh' },\n },\n };\n\n addUtilities(heightUtilities, ['responsive']);\n addUtilities(fallbackHeightUtilities, ['responsive']);\n }),\n ],\n};\n```\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n theme: {\n extend: {\n height: {\n \"screen\": \"100dvh\",\n \"screen-small\": \"100svh\",\n \"screen-large\": \"100lvh\"\n }\n }\n }\n}\n```\n\n```css\n.h-screen {\n height: 100dvh;\n}\n```\n\n```css\n.h-screen {\n height: 100vh; /* fallback for Opera, IE and etc. */\n height: 100dvh;\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nlvh\n```\n\n```text\nsvh\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n height: {\n screen: ['100vh /* fallback for Opera, IE and etc. */', '100dvh'],\n }\n }\n }\n}\n```\n\n```css\n.h-screen {\n height: 100vh /* fallback for Opera, IE and etc. */;\n height: 100dvh;\n}\n```\n\n```css\n@layer utilities {\n .h-my-screen {\n height: 100vh; /* fallback for Opera, IE and etc. */\n height: 100dvh;\n }\n}\n```\n\n```css\n@layer utilities {\n .h-screen {\n height: 100dvh;\n }\n}\n```\n\n```js\nconst plugin = require('tailwindcss/plugin')\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n // ...\n\n plugins: [\n plugin(function ({ addBase, addComponents, addUtilities, theme }) {\n addUtilities({\n '.h-screen': {\n height: '100dvh',\n }\n })\n })\n ],\n}\n```\n\n```css\n.h-screen {\n height: 100vh;\n height: 100dvh;\n}\n```\n\n```js\n// Wrong\naddUtilities({\n '.h-my-screen': {\n height: '100vh /* fallback for Opera, IE and etc. */',\n height: '100dvh',\n }\n})\n\n// Correct\naddUtilities({\n '.h-my-screen': {\n height: ['100vh /* fallback for Opera, IE and etc. */', '100dvh'],\n }\n})\n```\n\n```text\nh-screen\n```\n\n```text\nh-screen\n```\n\n```text\nheight\n```\n\n```css\n@supports not (height: 100dvh) {\n .h-dvh {\n height: 100vh;\n }\n\n /* ... */\n}\n```\n\n```css\n@utility h-dvh {\n @supports (height: 100dvh) {\n height: 100dvh;\n }\n @supports not (height: 100dvh) {\n height: 100vh;\n }\n}\n\n@utility h-lvh {\n @supports (height: 100lvh) {\n height: 100lvh;\n }\n @supports not (height: 100lvh) {\n height: 100vh;\n }\n}\n\n@utility h-svh {\n @supports (height: 100svh) {\n height: 100svh;\n }\n @supports not (height: 100svh) {\n height: 100vh;\n }\n}\n```\n\n```css\n/* Example: h-dvh-50 will be height: 50dvh; */\n/* - if dvh not supported then will be height: 50vh; */\n@utility h-dvh-* {\n @supports (height: 100dvh) {\n height: calc(--value(integer) * 1dvh);\n }\n @supports not (height: 100dvh) {\n height: calc(--value(integer) * 1vh);\n }\n}\n\n/* Example: h-lvh-50 will be height: 50lvh; */\n/* - if lvh not supported then will be height: 50vh; */\n@utility h-lvh-* {\n @supports (height: 100lvh) {\n height: calc(--value(integer) * 1lvh);\n }\n @supports not (height: 100lvh) {\n height: calc(--value(integer) * 1vh);\n }\n}\n\n/* Example: h-svh-50 will be height: 50svh; */\n/* - if svh not supported then will be height: 50vh; */\n@utility h-svh-* {\n @supports (height: 100svh) {\n height: calc(--value(integer) * 1svh);\n }\n @supports not (height: 100svh) {\n height: calc(--value(integer) * 1vh);\n }\n}\n\n/* Example: h-screen-50 will be height: 50vh; */\n@utility h-screen-* {\n height: calc(--value(integer) * 1vh);\n}\n```\n\n```css\n/* Example: h-dvh-50 will be height: 50dvh; */\n@utility h-dvh-* {\n height: calc(--value(integer) * 1dvh);\n}\n\n/* Example: h-lvh-50 will be height: 50lvh; */\n@utility h-lvh-* {\n height: calc(--value(integer) * 1lvh);\n}\n\n/* Example: h-svh-50 will be height: 50svh; */\n@utility h-svh-* {\n height: calc(--value(integer) * 1svh);\n}\n\n/* Example: h-screen-50 will be height: 50vh; */\n@utility h-screen-* {\n height: calc(--value(integer) * 1vh);\n}\n```\n\n```js\nconst plugin = require('tailwindcss/plugin');\n\nmodule.exports = {\n plugins: [\n plugin(function ({ addUtilities }) {\n const fallbackHeightUtilities = {\n '@supports not (height: 100dvh)': {\n '.h-dvh': { height: '100vh' },\n '.min-h-dvh': { 'min-height': '100vh' },\n '.max-h-dvh': { 'max-height': '100vh' },\n },\n '@supports not (height: 100lvh)': {\n '.h-lvh': { height: '100vh' },\n '.min-h-lvh': { 'min-height': '100vh' },\n '.max-h-lvh': { 'max-height': '100vh' },\n },\n '@supports not (height: 100svh)': {\n '.h-svh': { height: '100vh' },\n '.min-h-svh': { 'min-height': '100vh' },\n '.max-h-svh': { 'max-height': '100vh' },\n },\n };\n\n addUtilities(fallbackHeightUtilities, ['responsive']);\n }),\n ],\n};\n```\n\n```js\nconst plugin = require('tailwindcss/plugin');\n\nmodule.exports = {\n plugins: [\n plugin(function ({ addUtilities }) {\n const heightUtilities = {\n '.h-dvh': { height: '100dvh' },\n '.h-lvh': { height: '100lvh' },\n '.h-svh': { height: '100svh' },\n\n '.min-h-dvh': { 'min-height': '100dvh' },\n '.min-h-lvh': { 'min-height': '100lvh' },\n '.min-h-svh': { 'min-height': '100svh' },\n\n '.max-h-dvh': { 'max-height': '100dvh' },\n '.max-h-lvh': { 'max-height': '100lvh' },\n '.max-h-svh': { 'max-height': '100svh' },\n };\n\n const fallbackHeightUtilities = {\n '@supports not (height: 100dvh)': {\n '.h-dvh': { height: '100vh' },\n '.min-h-dvh': { 'min-height': '100vh' },\n '.max-h-dvh': { 'max-height': '100vh' },\n },\n '@supports not (height: 100lvh)': {\n '.h-lvh': { height: '100vh' },\n '.min-h-lvh': { 'min-height': '100vh' },\n '.max-h-lvh': { 'max-height': '100vh' },\n },\n '@supports not (height: 100svh)': {\n '.h-svh': { height: '100vh' },\n '.min-h-svh': { 'min-height': '100vh' },\n '.max-h-svh': { 'max-height': '100vh' },\n },\n };\n\n addUtilities(heightUtilities, ['responsive']);\n addUtilities(fallbackHeightUtilities, ['responsive']);\n }),\n ],\n};\n```\n\n```text\nh-dvh\n```\n\n```text\nh-lvh\n```\n\n```text\nh-svh\n```\n\n```text\n@supports\n```\n\n```text\nnot\n```\n\n```text\n@supports\n```\n\n```text\n@utility\n```\n\n```text\n@layer utilities\n```\n\n```text\nh-dvh-{number}\n```\n\n```text\nh-lvh-{number}\n```\n\n```text\nh-svh-{number}\n```\n\n```text\nh-{number}\n```\n\n========================================\n\nComments:\n- Since 2023, dynamic values have become part of the default template. See: Reference.\n- Unfortunately, even in TailwindCSS v4, the `h-dvh`, `h-lvh`, and `h-svh` classes will not work correctly if the browser does not support dynamic `dvh`, `lvh`, and `svh` values. However, these utilities can easily be overridden using the `@utility` directive. Moreover, `h-dvh-{number}`, `h-lvh-{number}`, and `h-svh-{number}`, as well as `h-screen-{number}` utilities, can also be integrated. See more here with Playground.\n- For min-h-screen add ``` minHeight: { screen: [\"100vh /* fallback for Opera, IE and etc. */\", \"100dvh\"], } ```\n- This is out of date. It's not possible to pass an array in there.\n- Since 2023, dynamic values have become part of the default template. See: Reference.\n- Maybe a related point of interest: Remove `vh` and use `dvh`/`lvh`/`svh` - TailwindCSS Discussion; TailwindCSS v3.4: Dynamic viewport units; Support: Viewport unit Variants","metadata":{"transformedAt":"2026-08-18T18:33:42.903Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":34,"totalLines":625,"estimatedTokens":3329}}248{"id":"stack-71783177","source":"stackoverflow","questionId":71783177,"title":"remove specific style from tailwind base","tags":["css","sass","tailwind-css"],"text":"Title: remove specific style from tailwind base\nTags: css, sass, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a project with tailwind and a (work in progress) UI library that we want to gradually migrate to.\n\nI am importing the style on my `index.css` like this\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@import '@customPackage/ui-react/dist/style.css';\n```\n\nthe problem is, tailwind base import some style that conflict with my customPackage styles :\n\nhttps://i.sstatic.net/TZ0fN.jpg\n\n`.ak2yjgf` is a style generated by the customPackage css, while `button, [type='button'], [type='reset'], [type='submit']` is by tailwind.\n\nI know it's possible to add custom styling useing `@layers base` for tailwind, but this do not override the base style, it just add more. I would like to know if there is a way to override or remove the `base` import for `buttons` only.\n\n========================================\n\nTop Answer:\nThis issue is resolved in tailwind v3.4.3\n\n========================================\n\nCode:\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\n@import '@customPackage/ui-react/dist/style.css';\n```\n\n```text\nindex.css\n```\n\n```text\n.ak2yjgf\n```\n\n```text\nbutton, [type='button'], [type='reset'], [type='submit']\n```\n\n```text\n@layers base\n```\n\n```text\nbase\n```\n\n```text\nbuttons\n```\n\n```js\nmodule.exports = {\n corePlugins: {\n preflight: false,\n }\n}\n```\n\n```text\n@import \"/src/preflight.css\";\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\nmodule.exports = {\n ...\n corePlugins: {\n preflight: false,\n },\n plugins: [],\n};\n```\n\n```css\n@import preflight.css\n```\n\n========================================\n\nComments:\n- This is useful for tracking down problematic base style rules when you don't know what can be causing the issue (comment/uncomment the rules as needed).\n- You shouldn't do this. According to the Tailwind docs the base layer is now always required and you should set `corePlugins.preflight` to false instead.","metadata":{"transformedAt":"2026-08-18T18:33:42.903Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":99,"estimatedTokens":500}}249{"id":"stack-72654538","source":"stackoverflow","questionId":72654538,"title":"Tailwind CSS breaking existing styles","tags":["css","reactjs","user-interface","tailwind-css"],"text":"Title: Tailwind CSS breaking existing styles\nTags: css, reactjs, user-interface, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWhen I added Tailwind to my React project, it breaks existing styles.\n\nI was hoping to just use Tailwind classes (like `mb-3`) for shortcuts.\n\nI didn't expect it to overwrite existing styles, like changing button background to transparent.\n\nAm I doing it wrong? Or does Tailwind overwrite styles on purpose?\n\n**EDIT:**\n\nThis is what I'm talking about: (which comes from `node_modules\\tailwindcss\\src\\css\\preflight.css`)\nhttps://i.sstatic.net/Qn9Dr.png\n\nThe issue goes away when I exclude base, i.e:\n\n```\n//@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n```\n\n**EDIT 2:**\n\nFound the **solution**!\n\n```\nmodule.exports = {\n corePlugins: {\n preflight: false,\n }\n}\n```\n\n========================================\n\nTop Answer:\nAdd the following line to your `tailwind.config.js`\n\n```\nmodule.exports = {\n prefix: 'tw-',\n}\n```\n\nAn now you can use both bootstrap and tailwind but you will have to use `tw-` before tailwind classes such as `tw-mb-2`, `tw-text-right` etc.\n\nwhile you still can use bootstrap normally. The classes won't conflict anymore.\n\nI will not recommend using important in `tailwind.config.css` because you still might want to use the bootstrap at some location so the prefix is the best bet here.\n\n========================================\n\nCode:\n```text\n//@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n```\n\n```text\nmodule.exports = {\n corePlugins: {\n preflight: false,\n }\n}\n```\n\n```text\nmb-3\n```\n\n```text\nnode_modules\\tailwindcss\\src\\css\\preflight.css\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n prefix: 'tw-',\n}\n```\n\n```text\nmodule.exports = {\n important: true,\n}\n```\n\n```text\nmodule.exports = {\n corePlugins: {\n preflight: false,\n }\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntw-\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@tailwind base\n```\n\n```text\n@tailwind base\n```\n\n```text\npreflight: false,\n```\n\n```text\nmodule.exports = {\n prefix: 'tw-',\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntw-\n```\n\n```text\ntw-mb-2\n```\n\n```text\ntw-text-right\n```\n\n```text\ntailwind.config.css\n```\n\n```text\nmodule.exports = {\n content: [\"./src/**/*.{jsx,ts,tsx}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n========================================\n\nComments:\n- What were you working on ? Bootstrap ? or plain css ? or any other before using tailwind css\n- I've got Bootstrap, but does it matter? I was wondering why Tailwind is changing my buttons to transparent\n- Thanks Krishna! Unfortunately I am already using a lot of Tailwind classes everywhere. But excluding base might fix it (although I'm not sure if any side effect). See my EDIT on the question.\n- Thanks Aximili for letting me know the concept ! I made some changes in my answer giving you the credits in Extended answer section to complete the answer.","metadata":{"transformedAt":"2026-08-18T18:33:42.904Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":168,"estimatedTokens":746}}250{"id":"stack-65749715","source":"stackoverflow","questionId":65749715,"title":"Div on top of another with Tailwind CSS","tags":["tailwind-css"],"text":"Title: Div on top of another with Tailwind CSS\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow do I get the second inner div to be on top of the first inner div (map)? I can't figure this out, despite using relative & absolute positioning. I'm using React & Tailwind CSS. Instead, the second inner div currently follows the flow of the image and is positioned below the first children div.\n\n```\n\n \n Map\n\n \n \n This should be on top of the map\n\n \n \n```\n\n========================================\n\nTop Answer:\nI would like to extend @Digvijay's answer further more to provide extended explanation, which consists\n\n### 1. `Logic`\n\n### 2. `Responsive Sidebar`\n\n### 3. `Responsive Sidebar with hamburger menu`\n\nYou'll have to work with `relative` `absolute` and `z-index` to make this work.\n\n### 1. Logic:\n\nHave parent `relative` having `z-index` value less than the child `absolute` div which will be used for navbar.\n\n### Code:\n\n```\n\n \n The main content of the file and it has it's content all over the page\n and i want to build a navbar on top of this\n \n \n \n Mobile Navbar\n \n \n \n```\n\n### Output:\n\nhttps://i.sstatic.net/5bZog.png\n\n### Code Link: tailwind play\n\n### 2. Responsive Sidebar\n\nIf you are aiming to build `responsive sidebar` which overlaps only on the `mobile screen` but would be normal div in the `large screen` then the below code.\n\n### Code:\n\n```\n\n \n \n Desktop Navbar\n \n \n \n The main content of the file and it has it's content all over the page\n and i want to build a navbar on top of this\n \n \n \n Mobile Navbar\n \n \n \n```\n\n### Code link : tailwind play\n\n### Output in large device:\n\nhttps://i.sstatic.net/zki9B.png\n\n### Output in smaller device:\n\nhttps://i.sstatic.net/5bZog.png\n\n### 3. Toggle mobile navbar using hamburger menu\n\n### Output on large devices\n\n### Output in small device with `hamburger menu`\n\n### When clicked on `hamburger menu`\n\n### Code:\n\n```\n\n \n \n \n Desktop Navbar\n \n \n \n The main content of the file and it has it's content all over the page\n and i want to build a navbar on top of this\n \n \n \n Mobile Navbar\n \n \n \n \n \n \n \n \n \n document\n .querySelector(\".hamburger_menu\")\n .addEventListener(\"click\", () => {\n console.log(\"Hello\");\n document.querySelector(\".mobile_navbar\").classList.toggle(\"hidden\");\n });\n\n document.querySelector(\".main_content\").addEventListener(\"click\", () => {\n console.log(\"Touch me\");\n console.log(\n document\n .querySelector(\".mobile_navbar\")\n .classList.contains(\"hidden\") == false &&\n document.querySelector(\".mobile_navbar\").classList.toggle(\"hidden\")\n );\n });\n \n \n```\n\n========================================\n\nCode:\n```html\n<div className=\"relative w-full h-screen\">\n <div className=\"bg-green-400 w-full h-full z-0\">\n <p className=\"italic text-bold bd-red-100 font-serif\">Map</p>\n </div>\n <div className=\"absolute z-50\">\n <p className=\"text-2xl font-bold\">This should be on top of the map</p>\n </div>\n </div>\n```\n\n```html\n<div class=\"w-full h-screen bg-gray-200 flex justify-center items-center\">\n <div class=\"bg-gray-400 w-96 h-96 relative z-0\">\n <p class=\"italic text-bold bd-red-100 font-serif\">Map</p>\n <div class=\"absolute inset-0 flex justify-center items-center z-10\">\n <p class=\"text-2xl font-bold\">This should be on top of the map</p>\n </div>\n </div>\n</div>\n```\n\n```text\n<div class=\"h-screen relative z-0 flex bg-gray-500\">\n <div class=\"text-4xl\">\n The main content of the file and it has it's content all over the page\n and i want to build a navbar on top of this\n </div>\n <div class=\"absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3\">\n <div class=\"flex h-full items-center justify-center text-4xl\">\n Mobile Navbar\n </div>\n </div>\n </div>\n```\n\n```text\n<div class=\"md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500\">\n <div class=\"invisible md:visible bg-blue-400 w-1/3\">\n <div class=\"flex h-full items-center justify-center text-4xl\">\n Desktop Navbar\n </div>\n </div>\n <div class=\"text-4xl\">\n The main content of the file and it has it's content all over the page\n and i want to build a navbar on top of this\n </div>\n <div\n class=\"absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible\"\n >\n <div class=\"flex h-full items-center justify-center text-4xl\">\n Mobile Navbar\n </div>\n </div>\n </div>\n```\n\n```text\n<body>\n <div class=\"bg-yellow-400 h-screen relative z-0 flex\">\n <div class=\"hidden md:block bg-blue-400 w-1/3\">\n <div class=\"flex h-full items-center justify-center text-4xl\">\n Desktop Navbar\n </div>\n </div>\n <div class=\"text-4xl pl-24 md:p-0 main_content\">\n The main content of the file and it has it's content all over the page\n and i want to build a navbar on top of this\n </div>\n <div\n class=\"mobile_navbar absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 hidden md:hidden\"\n >\n <div class=\"flex h-full items-center justify-center text-4xl\">\n Mobile Navbar\n </div>\n </div>\n <div\n class=\"md:hidden space-y-2 absolute hamburger_menu inset-y-0 left-0 p-4\"\n >\n <span class=\"block w-8 h-1 bg-white\"></span>\n <span class=\"block w-8 h-1 bg-white\"></span>\n <span class=\"block w-8 h-1 bg-white\"></span>\n </div>\n </div>\n <script type=\"text/javascript\">\n document\n .querySelector(\".hamburger_menu\")\n .addEventListener(\"click\", () => {\n console.log(\"Hello\");\n document.querySelector(\".mobile_navbar\").classList.toggle(\"hidden\");\n });\n\n document.querySelector(\".main_content\").addEventListener(\"click\", () => {\n console.log(\"Touch me\");\n console.log(\n document\n .querySelector(\".mobile_navbar\")\n .classList.contains(\"hidden\") == false &&\n document.querySelector(\".mobile_navbar\").classList.toggle(\"hidden\")\n );\n });\n </script>\n </body>\n```\n\n```text\nLogic\n```\n\n```text\nResponsive Sidebar\n```\n\n```text\nResponsive Sidebar with hamburger menu\n```\n\n```text\nrelative\n```\n\n```text\nabsolute\n```\n\n```text\nz-index\n```\n\n```text\nrelative\n```\n\n```text\nz-index\n```\n\n```text\nabsolute\n```\n\n```text\nresponsive sidebar\n```\n\n```text\nmobile screen\n```\n\n```text\nlarge screen\n```\n\n```text\nhamburger menu\n```\n\n```text\nhamburger menu\n```\n\n```html\n<div class=\"grid\">\n <div class=\"col-start-1 row-start-1\">\n A\n </div>\n <div class=\"col-start-1 row-start-1\">\n B\n </div>\n</div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.904Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":322,"estimatedTokens":1631}}251{"id":"stack-65953801","source":"stackoverflow","questionId":65953801,"title":"How to implement the last-child using Tailwind?","tags":["javascript","reactjs","css-selectors","tailwind-css"],"text":"Title: How to implement the last-child using Tailwind?\nTags: javascript, reactjs, css-selectors, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have tried without success to implement the prefix `last:` as shown in the Tailwind CSS documentation. Can anyone point out what I am doing wrong? I cannot make this work.\n\n```\n{items.map((item, i) => {\n return (\n \n \n \n \n {item}\n \n \n \n {description[i]}\n \n \n \n )\n})}\n```\n\n========================================\n\nTop Answer:\n**As of April 2022 (v 3.0.24)**\n\nAccording to Tailwind's doc:\n\nStyle an element when it is the first-child or last-child using the first and last modifiers\n\nJust use `last:${yourClassName}` to target the last child in your case.\n\n*Source:* https://tailwindcss.com/docs/hover-focus-and-other-states#last\n\n========================================\n\nCode:\n```text\n{items.map((item, i) => {\n return (\n <li\n key={i.toString()}\n v-for=\"(item, i) in items\"\n className=\"pb-sm xl:pb-md last:pb-0\" // This is the problematic fellow!\n >\n <div className=\"grid grid-cols-12\">\n <div className=\"col-start-2 col-span-10 md:col-start-2 md:col-span-8 pb-2 sm:pb-xs md:pb-xs lg:pb-xs xl:pb-0\">\n <div className=\"serif text-h5 xl:text-h4 lg:text-h4 md:text-h4 leading-snug xl:leading-tight lg:leading-tight md:leading-snug\">\n {item}\n </div>\n </div>\n <div className=\"col-start-2 col-span-10 sm:col-start-5 sm:col-span-6 md:col-start-5 md:col-span-6 lg:col-start-5 lg:col-span-6 xl:col-start-5 xl:col-span-3 pb-xs sm:pb-xs\">\n <div className=\"text-p sm:text-p\">{description[i]}</div>\n </div>\n </div>\n </li>\n )\n})}\n```\n\n```text\nlast:\n```\n\n```text\nmodule.exports = {\n ...\n variants: {\n extend: {\n padding: ['last'],\n }\n },\n ...\n}\n```\n\n```text\nv2.X\n```\n\n```text\nv1.X\n```\n\n```text\nlast\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nvariants >> extend\n```\n\n```text\npadding\n```\n\n```text\nlast:${yourClassName}\n```\n\n```text\n{json.map((item: any, index: number) => (\n\n <div key={index} className={`flex flex-col ${index === json.length - 1 ? `bg-red-main` : `bg-white`} justify-center items-center w-full `}>\n # some code\n </div>\n\n)}\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n\n<hr> * :last variant -> blue (last:text-red-400)\n<div>\n <div class=\"text-blue-400 last:text-red-400\">First</div>\n <div class=\"text-blue-400 last:text-red-400\">...</div>\n <div class=\"text-blue-400 last:text-red-400\">Last (*)</div>\n</div>\n\n<hr> * :not-last variant -> red (not-last:text-red-400)\n<div>\n <div class=\"not-last:text-red-400 text-blue-400\">First (*)</div>\n <div class=\"not-last:text-red-400 text-blue-400\">... (*)</div>\n <div class=\"not-last:text-red-400 text-blue-400\">Last</div>\n</div>\n\n<hr> * :first variant -> red (first:text-red-400)\n<div>\n <div class=\"first:text-red-400 text-blue-400\">First (*)</div>\n <div class=\"first:text-red-400 text-blue-400\">...</div>\n <div class=\"first:text-red-400 text-blue-400\">Last</div>\n</div>\n\n<hr> * :not-first variant -> blue (not-first:text-red-400)\n<div>\n <div class=\"text-blue-400 not-first:text-red-400\">First</div>\n <div class=\"text-blue-400 not-first:text-red-400\">... (*)</div>\n <div class=\"text-blue-400 not-first:text-red-400\">Last (*)</div>\n</div>\n```\n\n```text\nfirst:\n```\n\n```text\nlast:\n```\n\n```text\n:not\n```\n\n```text\nnot-first:\n```\n\n```text\nnot-last:\n```\n\n```text\n:first\n```\n\n```text\n:last\n```\n\n```text\n:not\n```\n\n========================================\n\nComments:\n- Even though the other answer, this answer now points to the best way to do first/last child selection.\n- This is a strange and incomprehensible conclusion. You could have solved it with TailwindCSS without continuous index tracking like this: `bg-red-main last:bg-white` or `not-last:bg-red-main bg-white` - `:last-child variant` and `:not` variant\n- \"I found that its better to use indexes\" - Why?\n- What if the last element had two different UIs? Is it better to use conditions by index or not?","metadata":{"transformedAt":"2026-08-18T18:33:42.904Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":190,"estimatedTokens":1002}}252{"id":"stack-71120394","source":"stackoverflow","questionId":71120394,"title":"Is there a way to adjust the angle of the linear gradient?","tags":["css","tailwind-css","linear-gradients","tailwind-css-3","css-gradients"],"text":"Title: Is there a way to adjust the angle of the linear gradient?\nTags: css, tailwind-css, linear-gradients, tailwind-css-3, css-gradients\nSource: Stack Overflow\n\nQuestion:\nIs there a way to adjust the angle of the linear gradient on a background image style of an HTML component using Tailwind CSS?\n\nThe only thing I can do is choose between the directional options: `t(top)`, `tr(top-right)`, etc but I want to set the angle of the gradient to 24 degree for an `` element with a Tailwind class like `.bg-gradient-[160deg]` (and the colors: `.from-lime` `.to-red`)\n\n========================================\n\nTop Answer:\nThis works for me in Tailwind 3.2.7:\n\n```\nmodule.exports = {\n theme: {\n extend: {\n backgroundImage: {\n 'gradient-24': 'linear-gradient(24deg, var(--tw-gradient-stops))'\n },\n },\n },\n}\n```\n\n```\nContent of div\n```\n\n========================================\n\nCode:\n```text\nt(top)\n```\n\n```text\ntr(top-right)\n```\n\n```text\n<hr>\n```\n\n```text\n.bg-gradient-[160deg]\n```\n\n```text\n.from-lime\n```\n\n```text\n.to-red\n```\n\n```text\nconst plugin = require('tailwindcss/plugin')\n\nmodule.exports = {\n theme: {\n extend: {\n // custom user configuration\n bgGradientDeg: {\n 75: '75deg',\n }\n }\n },\n plugins: [\n plugin(function({ matchUtilities, theme }) {\n matchUtilities(\n {\n 'bg-gradient': (angle) => ({\n 'background-image': `linear-gradient(${angle}, var(--tw-gradient-stops))`,\n }),\n },\n {\n // values from config and defaults you wish to use most\n values: Object.assign(\n theme('bgGradientDeg', {}), // name of config key. Must be unique\n {\n 10: '10deg', // bg-gradient-10\n 15: '15deg',\n 20: '20deg',\n 25: '25deg',\n 30: '30deg',\n 45: '45deg',\n 60: '60deg',\n 90: '90deg',\n 120: '120deg',\n 135: '135deg',\n }\n )\n }\n )\n })\n ],\n}\n```\n\n```html\n<div class=\"h-40 from-red-500 via-yellow-500 to-blue-500 bg-gradient-90\">\n 90 deg from defaults\n</div> \n\n<div class=\"h-40 from-red-500 via-yellow-500 to-blue-500 bg-gradient-10 sm:bg-gradient-60\">\n 10 deg on mobile,\n 60 on desktops\n</div> \n\n<div class=\"h-40 from-red-500 via-yellow-500 to-blue-500 bg-gradient-[137deg] sm:bg-gradient-to-br\">\n 137 deg from JIT on mobile,\n to bottom right on desktop\n</div> \n\n<div class=\"h-40 from-red-500 via-yellow-500 to-blue-500 bg-gradient-75\">\n 75 deg from user's custom config\n</div>\n```\n\n```text\ntheme: {\n backgroundImage: (theme) => ({\n \"image-gradient-90deg\": [\n \"90deg\",\n theme(\"colors.gray.600\"),\n theme(\"colors.gray.500\"),\n ],\n }),\n}\n```\n\n```text\ntheme(\"colors.gray.600\")\n```\n\n```js\n// inside your \"tailwinnd-preset.js\" file\n\nmodule.exports = {\n theme: {\n extend: {\n // ... others\n backgroundImage: ({\n theme\n }) => ({\n 'image-gradient-315deg': 'linear-gradient(315deg, var(--tw-gradient-stops))',\n }),\n // ... others\n }\n }\n}\n```\n\n```js\nbackgroundImage: ({\n theme\n}) => ({\n 'gradient-blue-1': 'var(--gradient-blue-1)', // defined at :root by css variable\n}),\n```\n\n```css\n:root {\n --gradient-blue-1: linear-gradient(315deg, #1250dc 0%, #306de4 100%);\n}\n```\n\n```html\n<div className=\"bg-image-gradient-315deg from-violet-500 to-fuchsia-500\">\n\n</div>\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n backgroundImage: {\n 'gradient-24': 'linear-gradient(24deg, var(--tw-gradient-stops))'\n },\n },\n },\n}\n```\n\n```html\n<div class=\"bg-gradient-24 from-lime-500 to-red-500\">Content of div</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"h-14 bg-linear-to-r from-cyan-500 to-blue-500\"></div>\n<div class=\"h-14 bg-linear-to-t from-sky-500 to-indigo-500\"></div>\n<div class=\"h-14 bg-linear-to-bl from-violet-500 to-fuchsia-500\"></div>\n<div class=\"h-14 bg-linear-65 from-purple-500 to-pink-500\"></div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme {\n --background-image-orange-gradient: linear-gradient(0deg, rgba(255, 85, 0, 1) 0%, rgba(250, 180, 122, 1) 100%);\n --background-image-logo: url('https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico');\n}\n</style>\n\n<div class=\"p-1 flex gap-1\">\n <!-- Default bg-* utility with background-color property -->\n <div class=\"bg-orange-300 size-32 border-2\"><!-- ... --></div>\n\n <!-- New bg-* utility with background-image property -->\n <div class=\"bg-logo size-32 border-2\"><!-- ... --></div>\n <div class=\"bg-orange-gradient size-32 border-2\"><!-- ... --></div>\n</div>\n```\n\n```text\nlinear-gradient\n```\n\n```text\nbg-linear-*\n```\n\n```text\nbg-linear-to-r\n```\n\n```text\nbg-linear-to-t\n```\n\n```text\nbg-linear-65\n```\n\n```text\nbg-linear-85\n```\n\n```text\nfrom-*\n```\n\n```text\nvia-*\n```\n\n```text\nto-*\n```\n\n```text\nbg-color\n```\n\n```text\nlinear-gradient\n```\n\n```text\nurl\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nbgLinear\n```\n\n```text\nbgImage\n```\n\n```text\n--background-color-*\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n========================================\n\nComments:\n- From Tailwind CSS v4 onward, a CSS-first configuration is used by default, allowing gradient parameters to be defined using native CSS syntax, and with the `bg-linear-{number}` utility available for setting the angle.\n- one note here is that the way this is defined, usage would be `bg-bg-image-gradient-90deg`. I removed the leading \"bg\" from the variable name and it looked much better.","metadata":{"transformedAt":"2026-08-18T18:33:42.904Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":35,"totalLines":292,"estimatedTokens":1440}}253{"id":"stack-79380519","source":"stackoverflow","questionId":79380519,"title":"How to upgrade TailwindCSS?","tags":["css","angular","sass","tailwind-css","tailwind-css-4"],"text":"Title: How to upgrade TailwindCSS?\nTags: css, angular, sass, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI'm currently using Tailwind v3 in my Angular project (https://github.com/edissyum/opencapture/tree/dev_nch).\n\nToday I tried to upgrade to Tailwind v4, but without success.\n\nI didn't use PostCSS, I just have Tailwind in my `package.json`, my `tailwind.config.js` and the `@tailwind base` import in my main scss file.\n\nIf I upgrade the package to 4.0.0, I have the following error:\n\nError: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin.\nThe PostCSS plugin has moved to a separate package,\nso to continue using Tailwind CSS with PostCSS\nyou'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.\n\nI try to install `@tailwind/postcss` and create a PostCSS config file like this:\n\n```\nexport default {\n plugins: {\n \"@tailwindcss/postcss\": {}\n }\n}\n```\n\n========================================\n\nTop Answer:\n### Removed @tailwind directives\n\nIn v4 you import Tailwind using a regular CSS `@import` statement, not using the `@tailwind` directives you used in v3:\n\n**Not supported from v4**\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n**Supported from v4**\n\n```\n@import \"tailwindcss\";\n```\n\n- Upgrade guide - TalwindCSS v3 to v4\n\n- Problem with \"npx tailwindcss init -p\" command - StackOverflow - related to v4 upgrade\n\n- Unable to upgrade Tailwind CSS v3 to v4 - StackOverflow - related to v4 upgrade\n\n- How to setting Tailwind CSS v4 global class? - StackOverflow - related to v4 upgrade\n\n- Change TailwindCSS default theme with Vite - StackOverflow - related to v4 upgrade\n\n========================================\n\nCode:\n```text\nexport default {\n plugins: {\n \"@tailwindcss/postcss\": {}\n }\n}\n```\n\n```text\npackage.json\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@tailwind base\n```\n\n```text\ntailwindcss\n```\n\n```text\n@tailwindcss/postcss\n```\n\n```text\n@tailwind/postcss\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n --color-neutral-0: #111;\n}\n```\n\n```css\n@use \"custom.scss\";\n\n$primary: #42b883;\n\nbody {\n background: $primary;\n}\n```\n\n```js\nimport \"./main.scss\";\nimport \"./tailwind.css\";\n```\n\n```text\n.scss\n```\n\n```text\n.less\n```\n\n```text\n.css\n```\n\n```text\n.scss\n```\n\n```text\n.css\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\nstyles.scss\n```\n\n```text\ntailwind.css\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\n.scss\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\n.scss\n```\n\n```text\n*.module.css\n```\n\n```text\n<style>\n```\n\n```text\n@reference\n```\n\n```text\n@apply\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```text\n@import\n```\n\n```text\n@tailwind\n```\n\n```text\nnpx @tailwindcss/upgrade@next\n```\n\n```text\n@config \"../../tailwind.config.cjs\";\n```\n\n```bash\nnpx @tailwindcss/upgrade@next\n```\n\n```bash\nnpm install tailwindcss @tailwindcss/postcss postcss --force\n```\n\n```json\n{\n \"plugins\": {\n \"@tailwindcss/postcss\": {}\n }\n}\n```\n\n```css\n@import \"tailwindcss/theme\";\n@import \"tailwindcss/utilities\";\n```\n\n```scss\n@use \"themes/tailwind\";\n```\n\n```text\n.postcssrc.json\n```\n\n```text\nthemes/_tailwind.css\n```\n\n```text\nstyles.scss\n```\n\n```text\ntailwindcss/intellisense\n```\n\n```text\nnpx @tailwindcss/upgrade@next\n```\n\n```text\nnpm install tailwindcss @tailwindcss/postcss postcss --force\n```\n\n```text\n{\n \"plugins\": {\n \"@tailwindcss/postcss\": {}\n }\n}\n```\n\n```text\ntailwindcss: {},\n```\n\n```text\n@tailwind base;\n @tailwind components;\n @tailwind utilities;\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\nnpm run dev\n```\n\n```text\n.postcssrc.json\n```\n\n```text\n.\n```\n\n```text\nglobals.css\n```\n\n========================================\n\nComments:\n- Please do not reference external sources that may disappear over time, rendering the question meaningless. Feel free to copy all the information you consider important into the question in the most concise form possible.\n- Thanks for your reply. I try the upgrade guide, or replace the @tailwind by import but still the same error :/\n- Starting with v4, the tailwind.config.js file is no longer needed, therefore the `init` process for generating it is no longer necessary either. As a result the CLI was separated into its own package, now named `@tailwindcss/cli`, which only needs to be installed by those who want to use the Tailwind CLI Source\n- Tried that, but we use SCSS (/src/styles.scss): ` Searching for CSS files in the current directory and its subdirectories… Cannot find any CSS files that reference Tailwind CSS. Before your project can be upgraded you need to create a CSS file that imports Tailwind CSS or uses @tailwind. `\n- Or you can make those few small changes manually. There's nothing particularly wrong with the automation, but if someone has been a long-time v3 user, they'll never truly understand exactly what changes were made. On the other hand, if they study the update guide, it won’t take long to make the changes manually and try them out, gaining fresh v4 knowledge in the process.\n- I try the automatic process, and same error as @Marius. I try to the installation guide, but I end up with the same error all the time :/\n- same here. I think we must use only npm tailwindcss then @import \"tailwindcss\" in our main scss. But compiler do not find tailwindcss.... so\n- Great to hear that you managed to solve the problem. I didn't think further that other processors might have been modified as well. Nevertheless, manual updates will always have their advantages.\n- Okay now I have a lot of css error but it's better ahah. Thanks\n- Appearently you also need to define an overwrite in the package.json, otherwise npm install won't work: \"overrides\": { \"@angular-devkit/build-angular\": { \"tailwindcss\": \"$tailwindcss\" } }\n- Oh, that's the error I get, about the @apply directive. Did you create an issue in the tailwind github ?\n- I add __tailwind.config.js and worked with Angular v19. Thanks\n- so you can leave all your scss files as is? that's what I was looking for but could not find a working solution. I also use Angular 19, material 19 and tailwind 4 (3 now), and also flowbite. Do you add the .postcssrc.json in your root or in every app folder?\n- Deprecated: Sass, Less, and Stylus preprocessors support\n- Interesting that you followed the Angular instructions. There's a specific guide for Next.js as well: tailwindcss.com/docs/installation/framework-guides/nextjs\n- Instead of using `.postcssrc.json`, using `postcss.config.mjs` might be more appropriate for Next.js, as it is the default format generated with the project. See more from Next.js TailwindCSS v4 template: github.com/vercel/next.js/blob/canary/packages/create-next-a‌​pp/… - For new project just use `npx create-next-app@latest --tailwind`\n- Forced installation doesn't make sense in the case of Next.js. It's not recommended. Just use `npm install tailwindcss @tailwindcss/postcss postcss` without `--force` flag.\n- You didn't address in your answer why the error message mentioned in the question occurred. While I think your answer contains good information, it's not relevant to the actual question.\n- Your answer closely resembles this one: stackoverflow.com/a/79423615/15167500 - The difference is that you're talking about Next.js while describing Angular steps.","metadata":{"transformedAt":"2026-08-18T18:33:42.904Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":52,"totalLines":320,"estimatedTokens":1840}}254{"id":"stack-69725289","source":"stackoverflow","questionId":69725289,"title":"What exactly are the rules for configuring postcss.config.js (mainly with tailwndcss)?","tags":["vue.js","tailwind-css","vue-cli","postcss"],"text":"Title: What exactly are the rules for configuring postcss.config.js (mainly with tailwndcss)?\nTags: vue.js, tailwind-css, vue-cli, postcss\nSource: Stack Overflow\n\nQuestion:\nUPDATE (2024-05-29): Since there are still people who provide answers (thank you!) I would like to point out that I provided the proper solution/approach with my own answer already. My error was the spelling in example 2, which actually needs brackets instead of curly braces!\n\n[Original Post]\n\nThe number of variants that exist to showcase how `postcss.config.js` has to be configured is extremely confusing. There are examples (like the one at the `tailwindcss` documentation) that use this:\n\n```\n// Example 1:\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\nthen there are those which require the libraries:\n\n```\n// Example 2:\nmodule.exports = {\n plugins: {\n require('tailwindcss'),\n require('postcss-preset-env')({\n stage: 0,\n 'nesting-rules': true\n })\n },\n}\n```\n\nOthers require external libs before they configure `module.exports`:\n\n```\n// Example 3:\n\nconst tailwindcss = require('tailwindcss');\nconst postcssPresetEnv = require('postcss-preset-env');\n\nmodule.exports = {\n plugins: {\n tailwindcss,\n postcssPresetEnv\n },\n}\n```\n\nand again some more that are necessary, when a configuration file that is not named according to the defaults has to be incorporated.\n\nToday I get this error, when running `yarn dev` with a postcss.config.js as show in Example 2:\n\n```\nSyntax Error: /[path]/_pod-test/postcss.config.js:3\n require('tailwindcss'),\n ^^^^^^^^^^^\n\nSyntaxError: Unexpected string\n```\n\nWhen I remove the line with \"tailwindcss\", the same thing happens for \"postcss-preset-env\":\n\n```\nSyntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3\n require('postcss-preset-env')({\n ^^^^^^^^^^^^^^^^^^^^\n\nSyntaxError: Unexpected string\n```\n\nWhen I then switch to a setup as shown in example 1, I get this error:\n\n```\nSyntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.\nMigration guide for end-users:\nhttps://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users\n```\n\nI do use postcss 8.3.9!\n\nThis all happens in a project that was setup with `vue-cli` as a Vue2 project.\n\nWhich witch craft do I have to apply to make this setup work?\n\n========================================\n\nTop Answer:\nIn `package.json` I have:\n\n```\n\"postcss\": {\n \"plugins\": [\n \"postcss-import\",\n \"tailwindcss\",\n \"postcss-preset-env\",\n \"autoprefixer\",\n \"cssnano\"\n ]\n }\n```\n\n*That's my full setup for production. I have tailwind `3.0.23`, but it probably works with any version anyway.*\n\nIf you use `cssnano`, you don't need to set the `tailwindcss/nesting` for `postcss-preset-env` which tailwind recommends in their docs: https://tailwindcss.com/docs/using-with-preprocessors#nesting\n\nWhy? because `cssnano` merges the repeated code that they both produces. This workaround with `cssnano` is recommended by one of the tailwind team member: https://github.com/tailwindlabs/tailwindcss/issues/4634#issuecomment-861392246\n\n========================================\n\nCode:\n```js\n// Example 1:\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```js\n// Example 2:\nmodule.exports = {\n plugins: {\n require('tailwindcss'),\n require('postcss-preset-env')({\n stage: 0,\n 'nesting-rules': true\n })\n },\n}\n```\n\n```js\n// Example 3:\n\nconst tailwindcss = require('tailwindcss');\nconst postcssPresetEnv = require('postcss-preset-env');\n\n\nmodule.exports = {\n plugins: {\n tailwindcss,\n postcssPresetEnv\n },\n}\n```\n\n```bash\nSyntax Error: /[path]/_pod-test/postcss.config.js:3\n require('tailwindcss'),\n ^^^^^^^^^^^\n\nSyntaxError: Unexpected string\n```\n\n```bash\nSyntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3\n require('postcss-preset-env')({\n ^^^^^^^^^^^^^^^^^^^^\n\nSyntaxError: Unexpected string\n```\n\n```bash\nSyntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.\nMigration guide for end-users:\nhttps://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users\n```\n\n```text\npostcss.config.js\n```\n\n```text\ntailwindcss\n```\n\n```text\nmodule.exports\n```\n\n```text\nyarn dev\n```\n\n```text\nvue-cli\n```\n\n```js\n// Example 2 fixed:\n\nmodule.exports = {\n plugins: [ // <= here we MUST use brackets!\n ... [function calls] ...\n ],\n}\n```\n\n```text\nnpm install tailwindcss postcss autoprefixer\n```\n\n```text\nError: PostCSS plugin tailwindcss requires PostCSS 8.\n```\n\n```text\nnpm uninstall tailwindcss postcss autoprefixer \nnpm install tailwindcss@npm:@tailwindcss/postcss7-compat@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n```text\nmodule.exports = {\n future: {\n // removeDeprecatedGapUtilities: true,\n // purgeLayersByDefault: true,\n },\n purge: [],\n theme: {\n extend: {},\n },\n variants: {},\n plugins: [],\n};\n```\n\n```text\nimport './css/tailwind.css'\n```\n\n```text\n// Example 3:\n\nconst tailwindcss = require('tailwindcss');\nconst postcssPresetEnv = require('postcss-preset-env');\n\n\nmodule.exports = {\n plugins: {\n tailwindcss,\n postcssPresetEnv\n },\n}\n```\n\n```text\n\"postcss\": \"^8.4.6\",\n\"postcss-cli\": \"^9.1.0\",\n\"tailwindcss\": \"^3.0.18\",\n```\n\n```json\n\"postcss\": {\n \"plugins\": [\n \"postcss-import\",\n \"tailwindcss\",\n \"postcss-preset-env\",\n \"autoprefixer\",\n \"cssnano\"\n ]\n }\n```\n\n```text\npackage.json\n```\n\n```text\n3.0.23\n```\n\n```text\ncssnano\n```\n\n```text\ntailwindcss/nesting\n```\n\n```text\npostcss-preset-env\n```\n\n```text\ncssnano\n```\n\n```text\ncssnano\n```\n\n========================================\n\nComments:\n- Thank you, I know about the downgrade path (should have mentioned it). The culprit is the postcss-preset-env. There is no one standard that seems to work, neither with react, nor vue (also not with vue & vite). postcss is pretty broken ATM.\n- Can some one atleast point to official postcss docs where it explains how to configure postcssconfig and explains both syntax\n- Thank you, Lucas! Meanwhile - since we have a new tailwind version - it would be of great help, if you could mention whether your config is valid for tailwind v2 and / or v3 (only).\n- I have version `3.0.23` of tailwind, but I think it's compatible with any version because this config is more related to postcss than tailwind.","metadata":{"transformedAt":"2026-08-18T18:33:42.904Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":29,"totalLines":317,"estimatedTokens":1601}}255{"id":"stack-71648391","source":"stackoverflow","questionId":71648391,"title":"duplicate \"Unknown at rule @apply css(unknownAtRules)\" errors in Vue.js project","tags":["css","vue.js","tailwind-css"],"text":"Title: duplicate \"Unknown at rule @apply css(unknownAtRules)\" errors in Vue.js project\nTags: css, vue.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm working on a project using `Vue.js` and `Tailwind CSS` and I get this error twice for the same line of code\n\n```\nUnknown at rule @apply css(unknownAtRules)\n```\n\nhttps://i.sstatic.net/mMrpH.png\n\nwhen using the follwing style\n\n```\n\n #home {\n @apply bg-accent-gradient;\n }\n\n```\n\nI found a soultion to add PostCSS Language Support Extensions and the following to my vscode settings\n\n```\n\"css.lint.unknownAtRules\": \"ignore\"\n```\n\nI added it but it removed one error only not both.\n\n========================================\n\nTop Answer:\nMake sure you have `csstools.postcss` extension installed in the VScode before starting debugging the issue as other answers suggested.\n\n========================================\n\nCode:\n```text\nUnknown at rule @apply css(unknownAtRules)\n```\n\n```text\n<style scoped>\n #home {\n @apply bg-accent-gradient;\n }\n</style>\n```\n\n```text\n\"css.lint.unknownAtRules\": \"ignore\"\n```\n\n```text\nVue.js\n```\n\n```text\nTailwind CSS\n```\n\n```text\n\"scss.validate\": false\n\"css.validate\": false\n```\n\n```text\nmodule.exports = {\n rules: {\n 'at-rule-no-unknown': [\n true,\n {\n ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen']\n }\n ],\n 'declaration-block-trailing-semicolon': null,\n 'no-descending-specificity': null\n }\n}\n```\n\n```text\nstylelint.config.js\n```\n\n```text\napply, tailwind,etc\n```\n\n```text\nUnknown At Rules\n```\n\n```text\nignore\n```\n\n```text\ncsstools.postcss\n```\n\n```html\n<style lang=\"scss\">\n/* my css with @apply */\n<style>\n```\n\n```json\n{\n \"css.customData\": [\".vscode/tailwind.json\"]\n}\n```\n\n```json\n{\n \"version\": 1.1,\n \"atDirectives\": [\n {\n \"name\": \"@tailwind\",\n \"description\": \"Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#tailwind\"\n }\n ]\n },\n {\n \"name\": \"@apply\",\n \"description\": \"Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#apply\"\n }\n ]\n },\n {\n \"name\": \"@responsive\",\n \"description\": \"You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\\n```css\\n@responsive {\\n .alert {\\n background-color: #E53E3E;\\n }\\n}\\n```\\n\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#responsive\"\n }\n ]\n },\n {\n \"name\": \"@screen\",\n \"description\": \"The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\\n```css\\n@screen sm {\\n /* ... */\\n}\\n```\\n…gets transformed into this:\\n```css\\n@media (min-width: 640px) {\\n /* ... */\\n}\\n```\\n\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#screen\"\n }\n ]\n },\n {\n \"name\": \"@variants\",\n \"description\": \"Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\\n```css\\n@variants hover, focus {\\n .btn-brand {\\n background-color: #3182CE;\\n }\\n}\\n```\\n\",\n \"references\": [\n {\n \"name\": \"Tailwind Documentation\",\n \"url\": \"https://tailwindcss.com/docs/functions-and-directives#variants\"\n }\n ]\n }\n ]\n}\n```\n\n```text\n.vscode\n```\n\n```text\nsettings.json\n```\n\n```text\ntailwind.json\n```\n\n```text\nsettings.json\n```\n\n```text\ntailwind.json\n```\n\n```text\nPostCSS Language Support\n```\n\n```text\n<style lang=\"postcss\">\n```\n\n```lua\nlspconfig.volar.setup({\n -- other configuration options...\n settings = {\n css = {\n validate = true,\n lint = {\n unknownAtRules = 'ignore',\n },\n },\n },\n})\n```\n\n```text\nneovim-lspconfig\n```\n\n```text\nsvelte\n```\n\n```text\nvolar\n```\n\n```text\n@apply\n```\n\n```text\n@reference\n```\n\n```html\n<template>\n...\n</template>\n\n<style scoped>\n.my-element {\n background-color: var(--bg-red-500);\n}\n</style>\n```\n\n```html\n<template>\n <div>\n <h1>Hello world!</h1>\n <p>Lorem ipsum dolor sit amet ...</p>\n </div>\n</template>\n\n<style>\n div {\n background-color: var(--color-blue-500);\n }\n h1 {\n font-size: var(--text-3xl);\n line-height: var(--text-3xl--line-height);\n font-weight: var(--font-weight-bold);\n margin-bottom: calc(2 * var(--spacing));\n }\n</style>\n```\n\n```html\n<template>\n <div class=\"bg-blue-500\">\n <h1 class=\"mb-2 text-3xl font-bold\">Hello world!</h1>\n <p>Lorem ipsum dolor sit amet ...</p>\n </div>\n</template>\n```\n\n========================================\n\nComments:\n- I've already done that and changed it to ignor fore LESS and SCSS too but it didn't work too\n- someonne posted it inn the comments and it worked but now the warninings returned and I dont know why\n- @MuhammadMahmoud Try to restart VS Code\n- Just adding `\"scss.validate\": false \"css.validate\": false` into `settings.json` did the trick for me\n- Glad I read your answer first. That's all it was. VSCode didn't know what it was doing. MS should build this language support into VSCode\n- This should be the \"Accepted Answer\". Does exactly what is needed.\n- This fixed for me in Vue 3 and IntelliJ IDE\n- Which \"above\" do you mean? Something from the question? Something from one of the answers? From which one? Keep in mind that on StackOverflow \"above\" is ambigous because the order of shown answers is unpredictably configurable, For me e.g., your answer is the one directly beneath the question. I recommend to use the link you get from the \"\" benath whatever you refer to. Also please reconsider your decision to post without taking the tour.\n- The question is old and relates to v3 of Tailwind. The link you shared is related to v4 and while the topic is similar to the question, it's not really the same thing.","metadata":{"transformedAt":"2026-08-18T18:33:42.904Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":31,"totalLines":289,"estimatedTokens":1632}}256{"id":"stack-71006036","source":"stackoverflow","questionId":71006036,"title":"Headless UI Dropdown - Open menu above the button","tags":["javascript","reactjs","tailwind-css"],"text":"Title: Headless UI Dropdown - Open menu above the button\nTags: javascript, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHeadless UI provides an example for a dropdown menu, where when you click the button, the dropdown opens below.\n\nhttps://i.sstatic.net/Y7CL7.png\n\nThe code for this is here:\n\n```\nimport { Menu, Transition } from '@headlessui/react'\nimport { Fragment, useEffect, useRef, useState } from 'react'\nimport { ChevronDownIcon } from '@heroicons/react/solid'\n\nexport default function Example() {\n return (\n \n \n \n \n Options\n \n \n \n \n \n \n \n {({ active }) => (\n \n {active ? (\n \n ) : (\n \n )}\n Edit\n \n )}\n \n \n {({ active }) => (\n \n {active ? (\n \n ) : (\n \n )}\n Duplicate\n \n )}\n \n \n \n \n {({ active }) => (\n \n {active ? (\n \n ) : (\n \n )}\n Archive\n \n )}\n \n \n {({ active }) => (\n \n {active ? (\n \n ) : (\n \n )}\n Move\n \n )}\n \n \n \n \n {({ active }) => (\n \n {active ? (\n \n ) : (\n \n )}\n Delete\n \n )}\n \n \n \n \n \n \n )\n}\n\nfunction EditInactiveIcon(props) {\n return (\n \n \n \n )\n}\n\nfunction EditActiveIcon(props) {\n return (\n \n \n \n )\n}\n\nfunction DuplicateInactiveIcon(props) {\n return (\n \n \n \n \n )\n}\n\nfunction DuplicateActiveIcon(props) {\n return (\n \n \n \n \n )\n}\n\nfunction ArchiveInactiveIcon(props) {\n return (\n \n \n \n \n \n )\n}\n\nfunction ArchiveActiveIcon(props) {\n return (\n \n \n \n \n \n )\n}\n\nfunction MoveInactiveIcon(props) {\n return (\n \n \n \n \n \n )\n}\n\nfunction MoveActiveIcon(props) {\n return (\n \n \n \n \n \n )\n}\n\nfunction DeleteInactiveIcon(props) {\n return (\n \n \n \n \n \n )\n}\n\nfunction DeleteActiveIcon(props) {\n return (\n \n \n \n \n \n )\n}\n```\n\nWhat I need to do is to have the dropdown menu open above the button instead of below. Something like below:\n\nhttps://i.sstatic.net/ewlp1.png\n\nCan anyone please help me figure out the correct styling to achieve this? It uses TailwindCSS styles.\n\n========================================\n\nTop Answer:\nJust add \"bottom-full\" class to Menu.Items...\n\n```\n\n ...\n\n```\n\n========================================\n\nCode:\n```text\nimport { Menu, Transition } from '@headlessui/react'\nimport { Fragment, useEffect, useRef, useState } from 'react'\nimport { ChevronDownIcon } from '@heroicons/react/solid'\n\nexport default function Example() {\n return (\n <div className=\"w-56 text-right fixed top-16\">\n <Menu as=\"div\" className=\"relative inline-block text-left\">\n <div>\n <Menu.Button className=\"inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75\">\n Options\n <ChevronDownIcon\n className=\"w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100\"\n aria-hidden=\"true\"\n />\n </Menu.Button>\n </div>\n <Transition\n as={Fragment}\n enter=\"transition ease-out duration-100\"\n enterFrom=\"transform opacity-0 scale-95\"\n enterTo=\"transform opacity-100 scale-100\"\n leave=\"transition ease-in duration-75\"\n leaveFrom=\"transform opacity-100 scale-100\"\n leaveTo=\"transform opacity-0 scale-95\"\n >\n <Menu.Items className=\"absolute right-0 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\">\n <div className=\"px-1 py-1 \">\n <Menu.Item>\n {({ active }) => (\n <button\n className={`${\n active ? 'bg-violet-500 text-white' : 'text-gray-900'\n } group flex rounded-md items-center w-full px-2 py-2 text-sm`}\n >\n {active ? (\n <EditActiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n ) : (\n <EditInactiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n )}\n Edit\n </button>\n )}\n </Menu.Item>\n <Menu.Item>\n {({ active }) => (\n <button\n className={`${\n active ? 'bg-violet-500 text-white' : 'text-gray-900'\n } group flex rounded-md items-center w-full px-2 py-2 text-sm`}\n >\n {active ? (\n <DuplicateActiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n ) : (\n <DuplicateInactiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n )}\n Duplicate\n </button>\n )}\n </Menu.Item>\n </div>\n <div className=\"px-1 py-1\">\n <Menu.Item>\n {({ active }) => (\n <button\n className={`${\n active ? 'bg-violet-500 text-white' : 'text-gray-900'\n } group flex rounded-md items-center w-full px-2 py-2 text-sm`}\n >\n {active ? (\n <ArchiveActiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n ) : (\n <ArchiveInactiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n )}\n Archive\n </button>\n )}\n </Menu.Item>\n <Menu.Item>\n {({ active }) => (\n <button\n className={`${\n active ? 'bg-violet-500 text-white' : 'text-gray-900'\n } group flex rounded-md items-center w-full px-2 py-2 text-sm`}\n >\n {active ? (\n <MoveActiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n ) : (\n <MoveInactiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n )}\n Move\n </button>\n )}\n </Menu.Item>\n </div>\n <div className=\"px-1 py-1\">\n <Menu.Item>\n {({ active }) => (\n <button\n className={`${\n active ? 'bg-violet-500 text-white' : 'text-gray-900'\n } group flex rounded-md items-center w-full px-2 py-2 text-sm`}\n >\n {active ? (\n <DeleteActiveIcon\n className=\"w-5 h-5 mr-2 text-violet-400\"\n aria-hidden=\"true\"\n />\n ) : (\n <DeleteInactiveIcon\n className=\"w-5 h-5 mr-2 text-violet-400\"\n aria-hidden=\"true\"\n />\n )}\n Delete\n </button>\n )}\n </Menu.Item>\n </div>\n </Menu.Items>\n </Transition>\n </Menu>\n </div>\n )\n}\n\nfunction EditInactiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 13V16H7L16 7L13 4L4 13Z\"\n fill=\"#EDE9FE\"\n stroke=\"#A78BFA\"\n strokeWidth=\"2\"\n />\n </svg>\n )\n}\n\nfunction EditActiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 13V16H7L16 7L13 4L4 13Z\"\n fill=\"#8B5CF6\"\n stroke=\"#C4B5FD\"\n strokeWidth=\"2\"\n />\n </svg>\n )\n}\n\nfunction DuplicateInactiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 4H12V12H4V4Z\"\n fill=\"#EDE9FE\"\n stroke=\"#A78BFA\"\n strokeWidth=\"2\"\n />\n <path\n d=\"M8 8H16V16H8V8Z\"\n fill=\"#EDE9FE\"\n stroke=\"#A78BFA\"\n strokeWidth=\"2\"\n />\n </svg>\n )\n}\n\nfunction DuplicateActiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 4H12V12H4V4Z\"\n fill=\"#8B5CF6\"\n stroke=\"#C4B5FD\"\n strokeWidth=\"2\"\n />\n <path\n d=\"M8 8H16V16H8V8Z\"\n fill=\"#8B5CF6\"\n stroke=\"#C4B5FD\"\n strokeWidth=\"2\"\n />\n </svg>\n )\n}\n\nfunction ArchiveInactiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"5\"\n y=\"8\"\n width=\"10\"\n height=\"8\"\n fill=\"#EDE9FE\"\n stroke=\"#A78BFA\"\n strokeWidth=\"2\"\n />\n <rect\n x=\"4\"\n y=\"4\"\n width=\"12\"\n height=\"4\"\n fill=\"#EDE9FE\"\n stroke=\"#A78BFA\"\n strokeWidth=\"2\"\n />\n <path d=\"M8 12H12\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n </svg>\n )\n}\n\nfunction ArchiveActiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"5\"\n y=\"8\"\n width=\"10\"\n height=\"8\"\n fill=\"#8B5CF6\"\n stroke=\"#C4B5FD\"\n strokeWidth=\"2\"\n />\n <rect\n x=\"4\"\n y=\"4\"\n width=\"12\"\n height=\"4\"\n fill=\"#8B5CF6\"\n stroke=\"#C4B5FD\"\n strokeWidth=\"2\"\n />\n <path d=\"M8 12H12\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n </svg>\n )\n}\n\nfunction MoveInactiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M10 4H16V10\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n <path d=\"M16 4L8 12\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n <path d=\"M8 6H4V16H14V12\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n </svg>\n )\n}\n\nfunction MoveActiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M10 4H16V10\" stroke=\"#C4B5FD\" strokeWidth=\"2\" />\n <path d=\"M16 4L8 12\" stroke=\"#C4B5FD\" strokeWidth=\"2\" />\n <path d=\"M8 6H4V16H14V12\" stroke=\"#C4B5FD\" strokeWidth=\"2\" />\n </svg>\n )\n}\n\nfunction DeleteInactiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"5\"\n y=\"6\"\n width=\"10\"\n height=\"10\"\n fill=\"#EDE9FE\"\n stroke=\"#A78BFA\"\n strokeWidth=\"2\"\n />\n <path d=\"M3 6H17\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n <path d=\"M8 6V4H12V6\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n </svg>\n )\n}\n\nfunction DeleteActiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"5\"\n y=\"6\"\n width=\"10\"\n height=\"10\"\n fill=\"#8B5CF6\"\n stroke=\"#C4B5FD\"\n strokeWidth=\"2\"\n />\n <path d=\"M3 6H17\" stroke=\"#C4B5FD\" strokeWidth=\"2\" />\n <path d=\"M8 6V4H12V6\" stroke=\"#C4B5FD\" strokeWidth=\"2\" />\n </svg>\n )\n}\n```\n\n```html\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js\"></script>\n\n\nimport { Menu, Transition } from '@headlessui/react'\nimport { Fragment, useEffect, useRef, useState } from 'react'\nimport { ChevronDownIcon } from '@heroicons/react/solid'\n\nexport default function Example() {\n return (\n \n <div className=\"w-56 text-right fixed top-16\">\n <Menu as=\"div\" className=\"relative inline-block text-left\">\n <div>\n <Menu.Button className=\"inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75\">\n Options\n <ChevronDownIcon\n className=\"w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100\"\n aria-hidden=\"true\"\n />\n </Menu.Button>\n </div>\n <Transition\n as={Fragment}\n enter=\"transition ease-out duration-100\"\n enterFrom=\"transform opacity-0 scale-95\"\n enterTo=\"transform opacity-100 scale-100\"\n leave=\"transition ease-in duration-75\"\n leaveFrom=\"transform opacity-100 scale-100\"\n leaveTo=\"transform opacity-0 scale-95\"\n >\n <Menu.Items className=\"-top-2 transform -translate-y-full absolute right-0 w-56 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\">\n <div className=\"px-1 py-1 \">\n <Menu.Item>\n {({ active }) => (\n <button\n className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'\n } group flex rounded-md items-center w-full px-2 py-2 text-sm`}\n >\n {active ? (\n <EditActiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n ) : (\n <EditInactiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n )}\n Edit\n </button>\n )}\n </Menu.Item>\n <Menu.Item>\n {({ active }) => (\n <button\n className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'\n } group flex rounded-md items-center w-full px-2 py-2 text-sm`}\n >\n {active ? (\n <DuplicateActiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n ) : (\n <DuplicateInactiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n )}\n Duplicate\n </button>\n )}\n </Menu.Item>\n </div>\n <div className=\"px-1 py-1\">\n <Menu.Item>\n {({ active }) => (\n <button\n className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'\n } group flex rounded-md items-center w-full px-2 py-2 text-sm`}\n >\n {active ? (\n <ArchiveActiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n ) : (\n <ArchiveInactiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n )}\n Archive\n </button>\n )}\n </Menu.Item>\n <Menu.Item>\n {({ active }) => (\n <button\n className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'\n } group flex rounded-md items-center w-full px-2 py-2 text-sm`}\n >\n {active ? (\n <MoveActiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n ) : (\n <MoveInactiveIcon\n className=\"w-5 h-5 mr-2\"\n aria-hidden=\"true\"\n />\n )}\n Move\n </button>\n )}\n </Menu.Item>\n </div>\n <div className=\"px-1 py-1\">\n <Menu.Item>\n {({ active }) => (\n <button\n className={`${active ? 'bg-violet-500 text-white' : 'text-gray-900'\n } group flex rounded-md items-center w-full px-2 py-2 text-sm`}\n >\n {active ? (\n <DeleteActiveIcon\n className=\"w-5 h-5 mr-2 text-violet-400\"\n aria-hidden=\"true\"\n />\n ) : (\n <DeleteInactiveIcon\n className=\"w-5 h-5 mr-2 text-violet-400\"\n aria-hidden=\"true\"\n />\n )}\n Delete\n </button>\n )}\n </Menu.Item>\n </div>\n </Menu.Items>\n </Transition>\n </Menu>\n </div>\n \n\n )\n}\n\nfunction EditInactiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 13V16H7L16 7L13 4L4 13Z\"\n fill=\"#EDE9FE\"\n stroke=\"#A78BFA\"\n strokeWidth=\"2\"\n />\n </svg>\n )\n}\n\nfunction EditActiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 13V16H7L16 7L13 4L4 13Z\"\n fill=\"#8B5CF6\"\n stroke=\"#C4B5FD\"\n strokeWidth=\"2\"\n />\n </svg>\n )\n}\n\nfunction DuplicateInactiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 4H12V12H4V4Z\"\n fill=\"#EDE9FE\"\n stroke=\"#A78BFA\"\n strokeWidth=\"2\"\n />\n <path\n d=\"M8 8H16V16H8V8Z\"\n fill=\"#EDE9FE\"\n stroke=\"#A78BFA\"\n strokeWidth=\"2\"\n />\n </svg>\n )\n}\n\nfunction DuplicateActiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 4H12V12H4V4Z\"\n fill=\"#8B5CF6\"\n stroke=\"#C4B5FD\"\n strokeWidth=\"2\"\n />\n <path\n d=\"M8 8H16V16H8V8Z\"\n fill=\"#8B5CF6\"\n stroke=\"#C4B5FD\"\n strokeWidth=\"2\"\n />\n </svg>\n )\n}\n\nfunction ArchiveInactiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"5\"\n y=\"8\"\n width=\"10\"\n height=\"8\"\n fill=\"#EDE9FE\"\n stroke=\"#A78BFA\"\n strokeWidth=\"2\"\n />\n <rect\n x=\"4\"\n y=\"4\"\n width=\"12\"\n height=\"4\"\n fill=\"#EDE9FE\"\n stroke=\"#A78BFA\"\n strokeWidth=\"2\"\n />\n <path d=\"M8 12H12\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n </svg>\n )\n}\n\nfunction ArchiveActiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"5\"\n y=\"8\"\n width=\"10\"\n height=\"8\"\n fill=\"#8B5CF6\"\n stroke=\"#C4B5FD\"\n strokeWidth=\"2\"\n />\n <rect\n x=\"4\"\n y=\"4\"\n width=\"12\"\n height=\"4\"\n fill=\"#8B5CF6\"\n stroke=\"#C4B5FD\"\n strokeWidth=\"2\"\n />\n <path d=\"M8 12H12\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n </svg>\n )\n}\n\nfunction MoveInactiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M10 4H16V10\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n <path d=\"M16 4L8 12\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n <path d=\"M8 6H4V16H14V12\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n </svg>\n )\n}\n\nfunction MoveActiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M10 4H16V10\" stroke=\"#C4B5FD\" strokeWidth=\"2\" />\n <path d=\"M16 4L8 12\" stroke=\"#C4B5FD\" strokeWidth=\"2\" />\n <path d=\"M8 6H4V16H14V12\" stroke=\"#C4B5FD\" strokeWidth=\"2\" />\n </svg>\n )\n}\n\nfunction DeleteInactiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"5\"\n y=\"6\"\n width=\"10\"\n height=\"10\"\n fill=\"#EDE9FE\"\n stroke=\"#A78BFA\"\n strokeWidth=\"2\"\n />\n <path d=\"M3 6H17\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n <path d=\"M8 6V4H12V6\" stroke=\"#A78BFA\" strokeWidth=\"2\" />\n </svg>\n )\n}\n\nfunction DeleteActiveIcon(props) {\n return (\n <svg\n {...props}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"5\"\n y=\"6\"\n width=\"10\"\n height=\"10\"\n fill=\"#8B5CF6\"\n stroke=\"#C4B5FD\"\n strokeWidth=\"2\"\n />\n <path d=\"M3 6H17\" stroke=\"#C4B5FD\" strokeWidth=\"2\" />\n <path d=\"M8 6V4H12V6\" stroke=\"#C4B5FD\" strokeWidth=\"2\" />\n </svg>\n )\n}\n```\n\n```text\n<Menu.Items className=\"-top-2 transform -translate-y-full absolute right-0 w-56 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\">\n```\n\n```text\n<Menu.Items className=\"bottom-full\" >\n ...\n</Menu.Items>\n```\n\n```text\n<MenuItems anchor=\"bottom\" as=\"section\" className=\"w-[var(--button-width)]\">\n <MenuItem as=\"a\" className=\"block data-[focus]:bg-blue-100\" href=\"/settings\">\n Settings\n </MenuItem>\n <MenuItem as=\"a\" className=\"block data-[focus]:bg-blue-100\" href=\"/support\">\n Support\n </MenuItem>\n <MenuItem as=\"a\" className=\"block data-[focus]:bg-blue-100\" href=\"/license\">\n License\n </MenuItem>\n</MenuItems>\n```\n\n```text\nanchor\n```\n\n```text\n<div id=\"root\" />\n```\n\n```text\nw-[var(--button-width)]\n```\n\n```text\nMenuItems\n```\n\n```text\nMenuButton\n```\n\n========================================\n\nComments:\n- `-translate-y-full` is good, but you may need to add some additional pixels: `-translate-y-[calc(100%+50px)]`\n- You can just add `top-0` and then add margin. Don't need to do any translate y with calc. Its already absolute positioned on the button :)","metadata":{"transformedAt":"2026-08-18T18:33:42.905Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":1015,"estimatedTokens":6823}}257{"id":"stack-68176917","source":"stackoverflow","questionId":68176917,"title":"Tailwind CSS animations not working in ReactJs/NextJs","tags":["reactjs","next.js","tailwind-css"],"text":"Title: Tailwind CSS animations not working in ReactJs/NextJs\nTags: reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI just started learning Tailwind and Nextjs and I was actually coding along a tutorial and did everything exactly as it was in the video. I want to use the bounce animation on an icon when hovered over. The funny thing is that it actually did work the first time but then it just stopped working.\n\n```\nfunction HeaderItem({Icon, title}) {\n return (\n \n \n {title}\n\n \n )\n}\n```\n\nThis is my tailwind config so far\n\n```\nmodule.exports = {\n mode: \"jit\",\n purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n========================================\n\nCode:\n```text\nfunction HeaderItem({Icon, title}) {\n return (\n <div className=\"flex flex-col items-center cursor-pointer group w-12 sm:w-20 hover:text-white\">\n <Icon className=\"h-8 mb-1 group-hover:animate-bounce\"/>\n <p className=\"opacity-0 group-hover:opacity-100 tracking-widest\">{title}</p>\n </div>\n )\n}\n```\n\n```text\nmodule.exports = {\n mode: \"jit\",\n purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n//tailwind.config.js\nmodule.exports = {\n theme: {},\n variants: {\n extend: {\n animation: ['group-hover'],\n },\n },\n}\n```\n\n```text\nGroup-hover\n```\n\n```text\nvariants\n```\n\n```text\nextend\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nTailwind Playground\n```\n\n```text\ngroup-hover:animation\n```\n\n========================================\n\nComments:\n- The OP is using JIT mode, all the variants are enabled by default in it. tailwindcss.com/docs/just-in-time-mode#all-variants-are-enab‌​led However the issue you have mentioned is the correct one. I don't understand why the issue creator closed it.\n- yes, I checked to use `group-hover`, but it did't work in JIT mode, so I found it reason to answer this.:) is that issue closed?\n- Tried doing the same, still it didn't work. Do you have any other solutions?\n- A fix for the issue was merged a week or two ago, but the creator of Tailwind, Adam, is on vacation right now. So, the package doesn't have a new version yet. If anyone is really anxious to get their dev env temporarily working, I created an NPM package with the fix, note that you must modify the node_modules folder name and the package.json to be `tailwindcss`, not `tailwindcss-fix-...`\n- Yes! This is it. Also necessary for `animation: [\"hover\", \"focus\"]`","metadata":{"transformedAt":"2026-08-18T18:33:42.905Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":109,"estimatedTokens":681}}258{"id":"stack-64600824","source":"stackoverflow","questionId":64600824,"title":"White gap between SVG and div","tags":["html","css","svg","tailwind-css"],"text":"Title: White gap between SVG and div\nTags: html, css, svg, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThis is not a duplicate of any current questions that I can find. I have tried answers such as adding block/flex to the SVG element but I believe this is a different .\n\nI am using Tailwind if that is of any relevance.\n\nhttps://i.sstatic.net/COrE8.png\n\nThis is one of the multiple, different SVGs that this issue is present on:\n\n```\n\n \n image/svg+xml\n \n \n \n \n \n \n \n \n \n \n \n \n \n```\n\nI have multiple SVG elements that I am using to create a wave-like effect. In the picture below, you can see the top section which is the SVG and underneath it you can see the background of the content.\n\nThis issue only appears at certain resolutions and the thickness of the line varies between what appears to be half a pixel and 1 pixel in height.\n\nThe behaviour occurs both when the SVG is inline or as an IMG. The SVG itself is styled to be 100% width with height set to auto.\n\nI've noticed that tweaking the viewbox allows the SVG to line up properly but this only makes the gap appear at different resolutions instead.\n\nI need a solution that will make this wave SVG sit flush with no pixel gap on all devices, and ideally an explanation to why it is behaving this way because I've been bashing my head against this for too long.\n\nThere are multiple SVGs and this problem occurs with all of them.\n\n========================================\n\nTop Answer:\nYou can put your image and the following div inside a flex with flex-direction colum.\n\nWithout flex:\n\nhttps://i.sstatic.net/uVvFc.png\n\nWith flex wrapper:\n\nhttps://i.sstatic.net/P3pMo.png\n\n\r\n\r\n\n```\n.box {\n height:100px;\n background-color:#00cba9;\nmargin:0; \n \n}\n\nsvg{\n padding-bottom:0;\n margin-bottom:0;\n border:solid red 3px;\n}\n\n.wrapper{\n display:flex;\n flex-direction: column;\n}\n```\n\n\r\n\n```\n\n \n \n\n```\n\n========================================\n\nCode:\n```text\n<svg style=\"width: 100%\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns=\"http://www.w3.org/2000/svg\" y=\"0px\" x=\"0px\" xml:space=\"preserve\" version=\"1.1\" viewBox=\"0 0 1917.4503 99.737572\" id=\"Untitled-Page%201\">\n <metadata id=\"metadata64\">\n <rdf:rdf><cc:work rdf:about=\"\"><dc:format>image/svg+xml</dc:format><dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\"></dc:type><dc:title></dc:title></cc:work></rdf:rdf>\n </metadata>\n <defs id=\"defs62\">\n <clipPath id=\"clipPath83\" clipPathUnits=\"userSpaceOnUse\">\n <rect y=\"4.6582928\" x=\"1.9868355\" height=\"520.61298\" width=\"1913.6428\" id=\"rect85\" style=\"fill: #0000ff; fill-rule: evenodd\"></rect>\n </clipPath>\n <clipPath id=\"clipPath101\" clipPathUnits=\"userSpaceOnUse\">\n <rect y=\"2.0105031\" x=\"1.6986296\" height=\"99.737572\" width=\"1917.4503\" id=\"rect103\" style=\"fill: #0000ff; fill-rule: evenodd\"></rect>\n </clipPath>\n </defs>\n <g transform=\"translate(-1.6986296,-2.0105031)\" clip-path=\"url(#clipPath101)\" id=\"g79\">\n <path id=\"110\" d=\"m -92.8182,485.3333 c 148.4834,-10.021 80.7045,-8.8997 264.4613,-8.8997 211.3321,0 442.2889,49.5664 666.4687,49.5664 255.8733,0 518.9805,-59.2854 737.5684,-59.2854 335.3557,0 441.894,29.1565 441.894,29.1565 L 2035,256 c 0,0 -38.1606,11.5786 -106.04,22.415 L 1919,33.9229 c 0,0 -67.2518,32.8281 -278.9438,32.8281 C 1502.0735,66.751 1335.988,0 1174.4691,0 1032.9564,0 887.1659,55.8081 753.7633,55.8081 619.0213,55.8081 489.1034,1.0942 387.7024,1.0942 230.6074,1.0942 -14,33.9229 -14,33.9229 l -0.0303,192.3195 c 0,0 -30.8519,-4.4524 3.0303,-5.3425 v 77.905 c -115.2449,9.8118 -4.7734,-2.7802 -103.0303,4.7102\" fill=\"#4d5061\"></path>\n </g>\n </svg>\n```\n\n```css\n.box {\n height:100px;\n background-color:#00cba9;\nmargin:0; \n \n}\n\nsvg{\n padding-bottom:0;\n margin-bottom:0;\n border:solid red 3px;\n}\n\n.wrapper{\n display:flex;\n flex-direction: column;\n}\n```\n\n```html\n<div class=\"wrapper\">\n <svg class=\"svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1440 320\"><path fill=\"#00cba9\" fill-opacity=\"1\" d=\"M0,32L46.5,256L92.9,288L139.4,192L185.8,192L232.3,192L278.7,192L325.2,64L371.6,128L418.1,64L464.5,288L511,160L557.4,128L603.9,128L650.3,32L696.8,160L743.2,0L789.7,0L836.1,64L882.6,96L929,64L975.5,64L1021.9,32L1068.4,224L1114.8,160L1161.3,96L1207.7,224L1254.2,64L1300.6,128L1347.1,160L1393.5,0L1440,320L1440,320L1393.5,320L1347.1,320L1300.6,320L1254.2,320L1207.7,320L1161.3,320L1114.8,320L1068.4,320L1021.9,320L975.5,320L929,320L882.6,320L836.1,320L789.7,320L743.2,320L696.8,320L650.3,320L603.9,320L557.4,320L511,320L464.5,320L418.1,320L371.6,320L325.2,320L278.7,320L232.3,320L185.8,320L139.4,320L92.9,320L46.5,320L0,320Z\"></path></svg>\n <div class=\"box\"></div>\n</div>\n```\n\n```text\npreserveAspectRatio=\"none\"\n```\n\n```text\nbackground-position: 0 -1;\n```\n\n```text\nsvg {\n overflow: visible;\n}\n```\n\n```text\noverflow: visible\n```\n\n========================================\n\nComments:\n- Could you please post the css of the wave svg and background?\n- I've seen this where you have an element and it's draw next to the same element exactly 0 pixels apart. The pixel gap can appear due to a rendering issue with some browsers. One remedy is to have the two elements be drawn one pixel on top of each other. In your case, maybe just simply draw a second rectangle on top of the lower part and have it be 1 pixel higher than the lower part. I hope that makes sense.\n- @Sivak Great idea. Fixed my problem by adding in -1px top/bottom margins for each. Thanks","metadata":{"transformedAt":"2026-08-18T18:33:42.905Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":162,"estimatedTokens":1388}}259{"id":"stack-78130155","source":"stackoverflow","questionId":78130155,"title":"Why is hot reloading extremely slow in my Next.js 14 project with TailwindCSS, Shadcn, and React Icons?","tags":["next.js","tailwind-css","react-icons","shadcnui"],"text":"Title: Why is hot reloading extremely slow in my Next.js 14 project with TailwindCSS, Shadcn, and React Icons?\nTags: next.js, tailwind-css, react-icons, shadcnui\nSource: Stack Overflow\n\nQuestion:\nI'm experiencing extremely slow hot reloading times in my Next.js 14 project that uses TailwindCSS, Shadcn, and React Icons. Here is a list of all my installed packages:\n\n```\nradix-ui/react-separator@1.0.3\nradix-ui/react-slot@1.0.2\ntypes/node@20.11.24\ntypes/react-dom@18.2.20\ntypes/react@18.2.63\nautoprefixer@10.4.18\nclass-variance-authority@0.7.0\nclsx@2.1.0\neslint-config-next@14.1.2\neslint@8.57.0\nlucide-react@0.344.0\nnext@14.1.2\npostcss@8.4.35\nreact-dom@18.2.0\nreact-icons@5.0.1\nreact@18.2.0\ntailwind-merge@2.2.1\ntailwindcss-animate@1.0.7\ntailwindcss@3.4.1\ntypescript@5.3.3\n```\n\nAfter creating a new Next.js project, enabling TypeScript, ESLint, Tailwind, and app router, I noticed the reload times were normal.\n\nHowever, upon installing Shadcn (so far, only used the separator component) and adding React Icons, I created 3 components: a navbar, a search bar (inside the navbar), and a footer, all styled with Tailwind. Now, the initial compilation time ranges from 10 to 25 seconds, and each minor change requires another 6 seconds or so for hot reloading.\n\nI've looked through numerous issues, threads, and posts about similar performance issues, but none of the suggested solutions have worked for me. When I comment out the navbar and footer, compilation time dramatically drops to approximately 1 second.\n\nI initially thought the issue might be related to how I imported icons, but removing them didn't make a difference.\n\nI suspect Tailwind might be causing the issue, but I'm unsure if this poor performance is normal for Next.js projects. Comparatively, using Vite or Svelte results in almost instant hot reload times. I also tried using pages router, which slightly improved the situation, but hot reloading still took several seconds.\n\nIs there any way to fix this issue? With this much delay it's becoming unusable.\n\nEdit: I tested it on my low-end laptop and the times were ~5x higher.\nI then tested it on another PC with 32GB RAM (mine has 16GB) and it compiled in 200ms. The other main difference between those PCs is the OS. Mine has Windows 11 and the other one has Windows 10.\n\n========================================\n\nTop Answer:\ni give also same error but i change my app page.js partners to Partners (always use first character is capital letter) its working perfectly\nthis next js url help you how fast refresh full reload perfrom in next js\n\nhttps://nextjs.org/docs/messages/fast-refresh-reload\n\ncorrect =>\n\n`const Partners = () => { } export default Partners;`\n\nincorrrect =>\n\n`const partners = () => { } export default partners;`\n\n========================================\n\nCode:\n```text\nradix-ui/react-separator@1.0.3\nradix-ui/react-slot@1.0.2\ntypes/node@20.11.24\ntypes/react-dom@18.2.20\ntypes/react@18.2.63\nautoprefixer@10.4.18\nclass-variance-authority@0.7.0\nclsx@2.1.0\neslint-config-next@14.1.2\neslint@8.57.0\nlucide-react@0.344.0\nnext@14.1.2\npostcss@8.4.35\nreact-dom@18.2.0\nreact-icons@5.0.1\nreact@18.2.0\ntailwind-merge@2.2.1\ntailwindcss-animate@1.0.7\ntailwindcss@3.4.1\ntypescript@5.3.3\n```\n\n```text\nconst Partners = () => { } export default Partners;\n```\n\n```text\nconst partners = () => { } export default partners;\n```\n\n========================================\n\nComments:\n- Perhaps you're asking compiler to compile too much, try excluding `node_modules` from the build in `tsconfig`\n- It's already being excluded. I can post the code of the various config files I have in case they're helpful. But I find it strange that with the same exact configuration it runs fast on one PC and not on the other.\n- Lucky you. I have added my whole folder to the anti virus exclusion and while it helped a bit (I used to see the antivirus CPU usage spiking during hot reload), it's still painfully slow. Barely usable to be honest. I wish Next would switch to Vite...\n- i still have this issue, when i uninstall shadcn ui. nextjs 15 become faster. with shadcn ui i can't develop anything\n- In my case the problem was caused by the antivirus scanning all the files after every single save.\n- Not using Pascal Case makes 'Nextjs need to perform full reload' issue. After correctly naming my compile time dropped drastically.","metadata":{"transformedAt":"2026-08-18T18:33:42.905Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":3,"totalLines":104,"estimatedTokens":1085}}260{"id":"stack-71358065","source":"stackoverflow","questionId":71358065,"title":"Tailwind: How to create a loading: modifier/variant?","tags":["tailwind-css"],"text":"Title: Tailwind: How to create a loading: modifier/variant?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to create a modifier for a button for when it's in a loading state.\n\nBased on the documentation here, I added the following in my tailwind.config.js\n\n```\n// I assume this is included in tailwindcss \n// and doesn't need to be installed separately\nconst plugin = require('tailwindcss/plugin')\n\nmodule.exports = {\n // ...\n plugins: [\n plugin(function({ addVariant }) {\n addVariant('loading', '&:loading')\n })\n ],\n};\n```\n\nI assume this allows me to add a string of `loading` in the class such that it will apply those styles. This doesn't seem to work though, what am I doing wrong?\n\n```\n\n This is a normal button\n\n This is a loading button\n\n```\n\n========================================\n\nCode:\n```js\n// I assume this is included in tailwindcss \n// and doesn't need to be installed separately\nconst plugin = require('tailwindcss/plugin')\n\nmodule.exports = {\n // ...\n plugins: [\n plugin(function({ addVariant }) {\n addVariant('loading', '&:loading')\n })\n ],\n};\n```\n\n```html\n<!-- I assume this should be blue-600 -->\n<button className=\"bg-blue-600 loading:bg-blue-100\">\n This is a normal button\n</button>\n\n<!-- I assume this should be blue-100 since it has className, \"loading\" -->\n<button className=\"loading bg-blue-600 loading:bg-blue-100\">\n This is a loading button\n</button>\n```\n\n```text\nloading\n```\n\n```js\nconst plugin = require('tailwindcss/plugin')\n\nmodule.exports = {\n plugins: [\n plugin(function({ addVariant }) {\n addVariant('loading', '&.loading') // here\n })\n ],\n};\n```\n\n```text\n&\n```\n\n```text\n.loading\n```\n\n```text\n:loading\n```\n\n```text\nloading\n```\n\n```text\naddVariant('loading', '&.loading')\n```\n\n```text\naddVariant('loading', '&:loading')\n```\n\n========================================\n\nComments:\n- Change `addVariant('loading', '&:loading')` into `addVariant('loading', '&.loading')` - dot instead of colon as it is not pseudo-class like `:hover` but an actual class name\n- @IharAliakseyenka Yeah you got it right! Thank you. Wanna post an answer for me to accept?","metadata":{"transformedAt":"2026-08-18T18:33:42.905Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":109,"estimatedTokens":543}}261{"id":"stack-63265225","source":"stackoverflow","questionId":63265225,"title":"How to setup tailwind with Angular custom web component","tags":["angular","tailwind-css"],"text":"Title: How to setup tailwind with Angular custom web component\nTags: angular, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nMy objective is to setup Tailwind CSS with an Angular custom web component project. Because of the custom web component, I'm using `ngx-build-plus:browser` to serve and build (because this can help bundle everything into a single bundle).\n\nI have then followed this guide for implementing Tailwind, but when I try to serve the application I get the following error:\n\n```\nERROR in Module build failed (from /node_modules/postcss-loader/src/index.js):\nError: Failed to find '~projects//src/styles.scss'\n in [\n /projects//src/app\n ]\n at /node_modules/postcss-import/lib/resolve-id.js:35:13\n```\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\n purge: [],\n theme: {\n extend: {},\n },\n variants: {},\n plugins: [],\n}\n```\n\n**webpack.config.js**\n\n```\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.scss$/,\n loader: 'postcss-loader',\n options: {\n ident: 'postcss',\n syntax: 'postcss-scss',\n plugins: () => [\n require('postcss-import'),\n require('tailwindcss'),\n require('autoprefixer'),\n ],\n },\n },\n ],\n },\n};\n```\n\n**serve-command**\n\n```\nng s --project --single-bundle --extra-webpack-config webpack.config.js\n```\n\n**tsconfig.base.json**\n\n```\n{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"importHelpers\": true,\n \"module\": \"esnext\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\": true,\n \"declaration\": false,\n \"moduleResolution\": \"node\",\n \"emitDecoratorMetadata\": true,\n \"experimentalDecorators\": true,\n \"target\": \"es5\",\n \"downlevelIteration\": true,\n \"baseUrl\": \"./\",\n \"typeRoots\": [\"node_modules/@types\"],\n \"lib\": [\"es2019\", \"dom\", \"esnext.asynciterable\"],\n \"types\": [\"node\", \"jest\"]\n },\n \"exclude\": [\"cypress\", \"aveiro-server\", \"eddyhelp\"]\n}\n```\n\n**projects//tsconfig.app.json**\n\n```\n{\n \"extends\": \"../../tsconfig.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"../../out-tsc/app\",\n \"module\": \"es2015\",\n \"target\": \"es2015\",\n \"types\": []\n },\n \"files\": [\"src/main.ts\", \"src/polyfills.ts\"],\n \"include\": [\"src/**/*.d.ts\"]\n}\n```\n\nWhat is going on - why is the `postcss-loader` trying to look inside `app` directory - and not `/projects//src/app` where my `styles.scss` lives?\n\n========================================\n\nTop Answer:\nI tried to regenerate this issue but did not get any success. My project runs without any error. here is the repo of the project tailwindcss-in-angular. I followed the following steps.\n\ncreate a new angular project.\n\n```\nng new tailwindcss-in-angular --create-application=false\n```\n\ngenerate new application in the project.\n\n```\nng generate application web-component-project\n```\n\nadd ngx-build-plus library to the project. (we need to add it to the newly generated application using the `--project` option)\n\n```\nng add ngx-build-plus --project getting-started\n```\n\ncreate a webpack.partial.js file at the root of your project (i.e. where you have your angular.json file is)\n\n```\nconst webpack = require('webpack');\n\n module.exports = {\n module: {\n rules: [\n {\n test: /\\.scss$/,\n loader: 'postcss-loader',\n options: {\n ident: 'postcss',\n syntax: 'postcss-scss',\n plugins: () => [\n require('postcss-import'),\n require('tailwindcss'),\n require('autoprefixer'),\n ],\n },\n },\n ],\n },\n }\n```\n\ninstall the dependecy packages.\n\n```\nnpm i autoprefixer postcss-import postcss-loader postcss-scss tailwindcss\n```\n\ngenerate tailwind.config.js file.\n\n```\nnpx tailwindcss init\n```\n\nimport tailwind in your styles.scss file.\n\n```\n/* You can add global styles to this file, and also import other style files */\n @import \"tailwindcss/base\";\n\n @import \"tailwindcss/components\";\n\n @import \"tailwindcss/utilities\";\n```\n\nremove everything from app.component.html and update it with the following markup.\n\n```\n\n Button\n \n```\n\nrun the project.\n\n```\nng serve --project web-component-project -o --extra-webpack-config webpack.partial.js\n```\n\nSo, why are you getting the error? I googled your error and found these interesting links you can check **Or you can use my boilerplat project directly**\n\nhttps://github.com/angular/angular-cli/issues/12981\n\nhttps://github.com/vuejs-templates/webpack/issues/1066\n\nthis link says your project might be in the C drive you can move it in some other drive. ng serve won't compile\n\nI don't know what's going in your project and what is causing the error but I am pretty sure it has nothing to do with tailwindcss its the postcss-import which is causing the issue.\n\n========================================\n\nCode:\n```text\nERROR in Module build failed (from <path-to-project>/node_modules/postcss-loader/src/index.js):\nError: Failed to find '~projects/<web-component-project>/src/styles.scss'\n in [\n <path-to-project>/projects/<web-component-project>/src/app\n ]\n at <path-to-project>/node_modules/postcss-import/lib/resolve-id.js:35:13\n```\n\n```js\nmodule.exports = {\n purge: [],\n theme: {\n extend: {},\n },\n variants: {},\n plugins: [],\n}\n```\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.scss$/,\n loader: 'postcss-loader',\n options: {\n ident: 'postcss',\n syntax: 'postcss-scss',\n plugins: () => [\n require('postcss-import'),\n require('tailwindcss'),\n require('autoprefixer'),\n ],\n },\n },\n ],\n },\n};\n```\n\n```text\nng s --project <project-name> --single-bundle --extra-webpack-config webpack.config.js\n```\n\n```text\n{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"importHelpers\": true,\n \"module\": \"esnext\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\": true,\n \"declaration\": false,\n \"moduleResolution\": \"node\",\n \"emitDecoratorMetadata\": true,\n \"experimentalDecorators\": true,\n \"target\": \"es5\",\n \"downlevelIteration\": true,\n \"baseUrl\": \"./\",\n \"typeRoots\": [\"node_modules/@types\"],\n \"lib\": [\"es2019\", \"dom\", \"esnext.asynciterable\"],\n \"types\": [\"node\", \"jest\"]\n },\n \"exclude\": [\"cypress\", \"aveiro-server\", \"eddyhelp\"]\n}\n```\n\n```text\n{\n \"extends\": \"../../tsconfig.base.json\",\n \"compilerOptions\": {\n \"outDir\": \"../../out-tsc/app\",\n \"module\": \"es2015\",\n \"target\": \"es2015\",\n \"types\": []\n },\n \"files\": [\"src/main.ts\", \"src/polyfills.ts\"],\n \"include\": [\"src/**/*.d.ts\"]\n}\n```\n\n```text\nngx-build-plus:browser\n```\n\n```text\npostcss-loader\n```\n\n```text\napp\n```\n\n```text\n<path-to-project>/projects/<web-component-project>/src/app\n```\n\n```text\nstyles.scss\n```\n\n```text\nError: Failed to find...\n```\n\n```text\n.scss\n```\n\n```text\n@import '~projects/eddy-library/src/styles.scss';\n```\n\n```text\nng new tailwindcss-in-angular --create-application=false\n```\n\n```text\nng generate application web-component-project\n```\n\n```text\nng add ngx-build-plus --project getting-started\n```\n\n```text\nconst webpack = require('webpack');\n\n module.exports = {\n module: {\n rules: [\n {\n test: /\\.scss$/,\n loader: 'postcss-loader',\n options: {\n ident: 'postcss',\n syntax: 'postcss-scss',\n plugins: () => [\n require('postcss-import'),\n require('tailwindcss'),\n require('autoprefixer'),\n ],\n },\n },\n ],\n },\n }\n```\n\n```text\nnpm i autoprefixer postcss-import postcss-loader postcss-scss tailwindcss\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\n/* You can add global styles to this file, and also import other style files */\n @import \"tailwindcss/base\";\n\n @import \"tailwindcss/components\";\n\n @import \"tailwindcss/utilities\";\n```\n\n```text\n<button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\">\n Button\n </button>\n```\n\n```text\nng serve --project web-component-project -o --extra-webpack-config webpack.partial.js\n```\n\n```text\n--project\n```\n\n```text\n{\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-builders/custom-webpack:browser\",\n \"options\": {\n \"customWebpackConfig\": {\n \"path\": \"webpack-dev.config.js\"\n }\n } \n }\n }\n}\n```\n\n```text\n--extra-webpack-config webpack.config.js\n```\n\n```text\nangular.json\n```\n\n========================================\n\nComments:\n- How did you defined `~projects` path in tsconfig? can you post it please?\n- Can you post the complete error please?\n- the the `/tsconfig.app.json` there is no `~projects` path. This file extends the `../../tsconfig.base.json` and here this file contains no `path` property. (will just include the tsconfig file in the question)\n- Can you try adding this please: `\"compilerOptions\": { \"paths\": { \"~projects/*\": [ \"relative/path/to/projects/folder/*\" ] } }` For example: `\"~projects/*\": [ \"./projects/*\" ]`\n- Hi @RazRonen - I tried adding this `paths` property to my tsconfig.json file in the root, but did not help :(\n- Thanks for the attempt to recreate the issue! I will go through all the settings, and see if I missed something. And I think you are right that it's more of a postcss issue, than tailwind.\n- Just tried following the steps one by one, and I get the same error 😢\n- @DauleDK you can try cloning my repo and run it.\n- Cloning the project and running it works perfectly. I'm walking through every detail, to try hunt down what is causing the issue.\n- @DauleDK here is another blog Angular and TailwindCSS You can try @angular-builders/custom-webpack instad of ngx-build-plus:browser\n- Hi, since I'm using this new webpack configuration, I'm having a issue on how to make my `shared/` folder as root. Do you have any Idea where should I look at? I think I should make some update on this webpack config, but I can't find what should I change. Thanks a lot\n- I am using ngx-build-plus, because I'm creating a web component.\n- Adding the customWebpackConfig here does not seem to work either.\n- Not sure how sure how big of an issue the style duplication is, first of all the browser will not process duplicate styles but read these from the cache so the performance hit is probably minimal, and second of all Webpack will roll up style imports (at least when using Angular) in a separate chunk and fetch that whenever a component requests it so the payload will not be in any way affected when using the Shadow DOM view encapsulation.","metadata":{"transformedAt":"2026-08-18T18:33:42.905Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":27,"totalLines":425,"estimatedTokens":2602}}262{"id":"stack-71464781","source":"stackoverflow","questionId":71464781,"title":"Tailwind CSS mobile-first media query not working","tags":["html","css","reactjs","tailwind-css"],"text":"Title: Tailwind CSS mobile-first media query not working\nTags: html, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nSometimes, but not all the time, when I'm using Tailwind CSS (in a React project with webpack), I attempt to apply classes like this:\n\n```\nSome text\n\n```\n\nExpected behavior:\nAs per the mobile-first design of Tailwind, my text would be \"2xl\" sized on extra small/mobile screens, and then at a minimum width of 640px, it would be sized \"3xl\"\n\nActual result:\nThe \"3xl\" rule at the 640px media query breakpoint gets read in the CSS, BUT it is crossed out in Chrome dev tools, while the \"2xl\" size is overriding it. This should perhaps indicate that the 2xl rule has greater specificity in the cascade, which is contrary to the expected behavior of Tailwind.\n\n--Quoted directly from Tailwind's documentation:\n\n```\n//Use unprefixed utilities to target mobile, and override them at larger breakpoints\n\n```\n\nLooking at the result of my rule above... https://i.sstatic.net/yJWVV.png\n\nI'm having a hard time understanding why it would possibly not be applying the style, as I'm using Tailwind exactly as I should be.\n\nRight?\n\n========================================\n\nTop Answer:\nAdding meta tags fixed mine:\n\n```\n\n```\n\n========================================\n\nCode:\n```html\n<p className=\"text-2xl sm:text-3xl\">Some text</p>\n```\n\n```html\n//Use unprefixed utilities to target mobile, and override them at larger breakpoints\n<div class=\"text-center sm:text-left\"></div>\n```\n\n```text\nstyle-loader\n```\n\n```text\nmain.css\n```\n\n```text\nmain.css\n```\n\n```text\n<meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\" />\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n```\n\n========================================\n\nComments:\n- How do you import Tailwind in your project?\n- @Jax-p I import it using webpack, like this: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.905Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":75,"estimatedTokens":548}}263{"id":"stack-65841016","source":"stackoverflow","questionId":65841016,"title":"Set max-content on `ListBox` from `@headlessui/react` to take max width of option while using Tailwind CSS?","tags":["javascript","css","reactjs","tailwind-css"],"text":"Title: Set max-content on `ListBox` from `@headlessui/react` to take max width of option while using Tailwind CSS?\nTags: javascript, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a sidebar containing 2 select elements & 1 input box in between both of them that looks like:\n\nThe biggest option on the 1st select element is `0.75x` & on the 2nd select element is `WEBP`.\n\n### constants.ts\n\n```\nexport const pixelRatios = [\n {\n id: \"1\",\n label: \"0.5x\",\n value: \"0.5\",\n },\n {\n id: \"2\",\n label: \"0.75x\",\n value: \"0.75\",\n },\n {\n id: \"3\",\n label: \"1x\",\n value: \"1\",\n },\n {\n id: \"4\",\n label: \"1.5x\",\n value: \"1.5\",\n },\n {\n id: \"5\",\n label: \"2x\",\n value: \"2\",\n },\n {\n id: \"6\",\n label: \"3x\",\n value: \"3\",\n },\n {\n id: \"7\",\n label: \"4x\",\n value: \"4\",\n },\n]\n\nexport const extensions = [\n {\n id: \"1\",\n label: \"PNG\",\n value: \"png\",\n },\n {\n id: \"2\",\n label: \"JPEG\",\n value: \"jpeg\",\n },\n {\n id: \"3\",\n label: \"WEBP\",\n value: \"webp\",\n },\n]\n```\n\n### Select.tsx\n\n```\nimport * as React from \"react\"\nimport { Listbox, Transition } from \"@headlessui/react\"\nimport clsx from \"clsx\"\n\ninterface Option {\n id: string\n value: string\n label: string\n}\n\ninterface IProps {\n className?: string\n label?: string\n selectedOption: Option\n onChange: (selectedOption: Option) => void\n options: Array\n}\n\nconst Selector = () => (\n \n \n \n)\n\nexport const Select = ({\n className,\n label,\n options,\n selectedOption,\n onChange,\n}: IProps) => {\n return (\n {\n onChange(selectedOption)\n }}\n >\n {({ open }) => (\n <>\n {label && (\n \n {label}\n \n )}\n \n \n {selectedOption.label}\n \n \n \n \n\n \n {/* bottom-0 will open the select menu up & mb-11 will put the dropup above the select option */}\n \n \n {options.map((option) => {\n return (\n \n {({ active, selected }) => {\n return (\n \n \n \n {option.label}\n \n \n \n )\n }}\n \n )\n })}\n \n \n \n \n \n )}\n \n )\n}\n```\n\n### App.tsx\n\n```\nimport * as React from \"react\"\n\nimport { Select } from \"./Select\"\nimport { pixelRatios, extensions } from \"./constants\"\n\nexport type Extension = \"jpeg\" | \"png\" | \"webp\"\nexport type PixelRatio = 0.5 | 0.75 | 1 | 1.5 | 2 | 3 | 4\n\nexport default function App() {\n const [pixelRatio, setPixelRatio] = React.useState(pixelRatios[0])\n const [extension, setExtension] = React.useState(extensions[0])\n const [suffix, setSuffix] = React.useState(\"\")\n return (\n \n \n\n### Select (Max Content)\n\n \n \n \n Export\n \n \n {\n setPixelRatio(selectedOption)\n }}\n />\n ) => {\n const suffix = e.target.value as string\n setSuffix(suffix)\n }}\n />\n {\n setExtension(selectedOption)\n }}\n />\n \n \n \n \n )\n}\n```\n\nWhen I select the biggest option from either of the sidebar, it moves the sidebar a bit. It also expands the select element a bit.\n\nCheck it out live on Codesandbox → https://codesandbox.io/s/react-tailwind-select-max-content-sidebar-vv58m?file=/src/App.tsx\n\nHow do I make the select element take the width of the max content? And how do I stop the sidebar & select element from expanding?\n\n========================================\n\nCode:\n```text\nexport const pixelRatios = [\n {\n id: \"1\",\n label: \"0.5x\",\n value: \"0.5\",\n },\n {\n id: \"2\",\n label: \"0.75x\",\n value: \"0.75\",\n },\n {\n id: \"3\",\n label: \"1x\",\n value: \"1\",\n },\n {\n id: \"4\",\n label: \"1.5x\",\n value: \"1.5\",\n },\n {\n id: \"5\",\n label: \"2x\",\n value: \"2\",\n },\n {\n id: \"6\",\n label: \"3x\",\n value: \"3\",\n },\n {\n id: \"7\",\n label: \"4x\",\n value: \"4\",\n },\n]\n\nexport const extensions = [\n {\n id: \"1\",\n label: \"PNG\",\n value: \"png\",\n },\n {\n id: \"2\",\n label: \"JPEG\",\n value: \"jpeg\",\n },\n {\n id: \"3\",\n label: \"WEBP\",\n value: \"webp\",\n },\n]\n```\n\n```text\nimport * as React from \"react\"\nimport { Listbox, Transition } from \"@headlessui/react\"\nimport clsx from \"clsx\"\n\ninterface Option {\n id: string\n value: string\n label: string\n}\n\ninterface IProps {\n className?: string\n label?: string\n selectedOption: Option\n onChange: (selectedOption: Option) => void\n options: Array<Option>\n}\n\nconst Selector = () => (\n <svg\n className=\"w-5 h-5 text-indigo-600\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n />\n </svg>\n)\n\nexport const Select = ({\n className,\n label,\n options,\n selectedOption,\n onChange,\n}: IProps) => {\n return (\n <Listbox\n as=\"div\"\n className={className}\n value={selectedOption}\n onChange={(selectedOption: Option) => {\n onChange(selectedOption)\n }}\n >\n {({ open }) => (\n <>\n {label && (\n <Listbox.Label className=\"mb-1 text-sm font-medium text-blue-gray-500\">\n {label}\n </Listbox.Label>\n )}\n <div className=\"relative mt-1\">\n <Listbox.Button className=\"relative w-full py-2 pl-3 pr-10 text-left bg-white border border-gray-300 rounded-md shadow-sm cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\">\n <span className=\"block ml-1\">{selectedOption.label}</span>\n <span className=\"absolute inset-y-0 right-0 flex items-center pr-2 ml-3 pointer-events-none\">\n <Selector />\n </span>\n </Listbox.Button>\n\n <div className=\"absolute bottom-0 z-10 w-full mt-1 bg-white rounded-md shadow-lg mb-11\">\n {/* bottom-0 will open the select menu up & mb-11 will put the dropup above the select option */}\n <Transition\n show={open}\n leave=\"transition duration-100 ease-in\"\n leaveFrom=\"transform opacity-100\"\n leaveTo=\"transform opacity-0\"\n >\n <Listbox.Options\n static\n className=\"py-1 overflow-auto text-base rounded-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\"\n >\n {options.map((option) => {\n return (\n <Listbox.Option\n as={React.Fragment}\n key={option.id}\n value={option}\n >\n {({ active, selected }) => {\n return (\n <li\n className={clsx(\n \"relative py-2 pl-3 cursor-default select-none pr-9 text-sm\",\n {\n \"text-white bg-indigo-600\": active,\n \"text-gray-900\": !active,\n },\n )}\n >\n <div className=\"flex items-center\">\n <span\n className={clsx(\"ml-3 block\", {\n \"font-semibold\": selected,\n \"font-normal\": !selected,\n })}\n >\n {option.label}\n </span>\n </div>\n </li>\n )\n }}\n </Listbox.Option>\n )\n })}\n </Listbox.Options>\n </Transition>\n </div>\n </div>\n </>\n )}\n </Listbox>\n )\n}\n```\n\n```text\nimport * as React from \"react\"\n\nimport { Select } from \"./Select\"\nimport { pixelRatios, extensions } from \"./constants\"\n\nexport type Extension = \"jpeg\" | \"png\" | \"webp\"\nexport type PixelRatio = 0.5 | 0.75 | 1 | 1.5 | 2 | 3 | 4\n\nexport default function App() {\n const [pixelRatio, setPixelRatio] = React.useState(pixelRatios[0])\n const [extension, setExtension] = React.useState(extensions[0])\n const [suffix, setSuffix] = React.useState(\"\")\n return (\n <div className=\"w-full\">\n <h1 className=\"text-4xl text-center\">Select (Max Content)</h1>\n <div\n id=\"sidebar\"\n className=\"fixed top-0 right-0 h-full px-3 py-4 overflow-y-auto shadow-md bg-pink-100\"\n style={{\n minWidth: \"300px\",\n }}\n >\n <div className=\"absolute bottom-10\">\n <label className=\"mt-1 text-sm font-medium text-blue-gray-500\">\n Export\n </label>\n <div className=\"flex items-center justify-between w-full space-x-2\">\n <Select\n className=\"flex-1\"\n options={pixelRatios}\n selectedOption={pixelRatio}\n onChange={(selectedOption) => {\n setPixelRatio(selectedOption)\n }}\n />\n <input\n type=\"text\"\n name=\"suffix\"\n className=\"relative flex-1 w-16 px-2 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500\"\n placeholder=\"Suffix\"\n value={suffix}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n const suffix = e.target.value as string\n setSuffix(suffix)\n }}\n />\n <Select\n className=\"flex-1\"\n options={extensions}\n selectedOption={extension}\n onChange={(selectedOption) => {\n setExtension(selectedOption)\n }}\n />\n </div>\n </div>\n </div>\n </div>\n )\n}\n```\n\n```text\n0.75x\n```\n\n```text\nWEBP\n```\n\n```text\nwidth: calc(100% - 2 * padding)\n```\n\n```text\nflex: 1\n```\n\n```text\nposition: absolute\n```\n\n========================================\n\nComments:\n- did you try to make select boxes fixed width? please check: link\n- Figuring out the optimal size in JS is doable but it's not easy. You would have to measure all of the options based on the innermost element `` as that's the only one which varies in size, find the max, and then do some calculations to get the width of the dropdown.\n- @zonay if i make it fixed width then i have to increase my sidebar width a bit or like right now, it increases automatically as i'm only setting `min-width` on the sidebar. but that seems like the only option i guess so i went with it for now :)\n- @LindaPaiste that sounds tedious & probably not needed. i went with the fixed width approach for now as described in the above comment :)\n- Thank you Armin. I went with a 300px width sidebar so it all fits perfectly for now. However, take my upvote. The codesandbox looks perfect :)","metadata":{"transformedAt":"2026-08-18T18:33:42.906Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":484,"estimatedTokens":3252}}264{"id":"stack-74879885","source":"stackoverflow","questionId":74879885,"title":"Focus state shouldn't change, React.JS + TailwindCSS","tags":["javascript","css","reactjs","react-router","tailwind-css"],"text":"Title: Focus state shouldn't change, React.JS + TailwindCSS\nTags: javascript, css, reactjs, react-router, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a question related to tailwindcss and React. I have a property that if a `` is focused then the background and the text will change. `` is another component, and if it is focused, I want it to not change focus state of other items in navbar. `` doesn't affect URL.\n\nHere's my code for item in navigation bar and images of how `` affects focus state of other items:\n\nhttps://i.sstatic.net/n44C9.jpg\n\nhttps://i.sstatic.net/6bMo1.jpg\n\n```\nimport React from \"react\";\n\nimport { Link } from \"react-router-dom\";\n\ninterface Props {\n title: string;\n url: string;\n icon: JSX.Element;\n}\n\nconst NavItem: React.FC = ({ title, url, icon }) => {\n //https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes\n return (\n \n \n {icon}\n \n {title}\n \n );\n};\n\nexport default NavItem;\n```\n\nIs it possible? If so, how can I do it, maybe with `useLocation` from `react-router-dom` or directly with tailwindcss?\n\n========================================\n\nCode:\n```text\nimport React from \"react\";\n\nimport { Link } from \"react-router-dom\";\n\ninterface Props {\n title: string;\n url: string;\n icon: JSX.Element;\n}\n\nconst NavItem: React.FC<Props> = ({ title, url, icon }) => {\n //https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes\n return (\n <Link\n to={url}\n className=\"text-center items-center flex-col justify-center font-medium px-1 text-white capitalize hover:font-semibold select-none group\"\n >\n <div className=\"flex items-center justify-center mb-1 rounded-3xl px-2 py-1 group-hover:bg-btnHover group-focus:bg-btnActive group-focus:text-textActive transition-colors duration-75\">\n {icon}\n </div>\n <span>{title}</span>\n </Link>\n );\n};\n\nexport default NavItem;\n```\n\n```text\n<NavItem />\n```\n\n```text\n<LanguageSwitcher />\n```\n\n```text\n<LanguageSwitcher />\n```\n\n```text\n<LanguageSwitcher />\n```\n\n```text\nuseLocation\n```\n\n```text\nreact-router-dom\n```\n\n```text\nimport React from \"react\";\nimport { NavLink } from \"react-router-dom\";\n\ninterface Props {\n title: string;\n url: string;\n icon: JSX.Element;\n}\n\nconst NavItem: React.FC<Props> = ({ title, url, icon }) => {\n //https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes\n return (\n <NavLink\n to={url}\n className=\"text-center items-center flex-col justify-center font-medium px-1 text-white capitalize hover:font-semibold select-none group\"\n >\n {({ isActive }: { isActive: boolean }) => (\n <>\n <div\n className={\n [\n \"flex items-center justify-center mb-1 rounded-3xl px-2 py-1 group-hover:bg-btnHover transition-colors duration-75\"\n isActive ? \"group-focus:bg-btnActive group-focus:text-textActive\" : null\n ]\n .filter(Boolean)\n .join(\" \")\n }\n >\n {icon}\n </div>\n <span>{title}</span>\n </>\n )}\n </NavLink>\n );\n};\n\nexport default NavItem;\n```\n\n```text\nLink\n```\n\n```text\nNavLink\n```\n\n========================================\n\nComments:\n- Thanks for your feedback! I corrected some CSS classnames in your answer and everything works as needed.","metadata":{"transformedAt":"2026-08-18T18:33:42.906Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":150,"estimatedTokens":832}}265{"id":"stack-67730273","source":"stackoverflow","questionId":67730273,"title":"Laravel - Outputting a view styled with TailwindCSS as PDF","tags":["laravel","tcpdf","dompdf","tailwind-css","mpdf"],"text":"Title: Laravel - Outputting a view styled with TailwindCSS as PDF\nTags: laravel, tcpdf, dompdf, tailwind-css, mpdf\nSource: Stack Overflow\n\nQuestion:\nI'm trying to make generate a pdf from a view but the styles just won't come out. I've tried using 3 different libraries but the results aren't much different. Am I missing something?\n\n`view`\n\n```\n\n \n \n Test View\n \n \n\n \n \n \n \n \n TEST\n \n \n \n \n\n```\n\n`appearance`\n\nhttps://i.sstatic.net/PLavA.png\n\n`dompdf export method`\n\n```\nprotected function dompdfImplementation()\n{\n $dompdf = new Dompdf;\n $dompdf->getOptions()->setChroot(public_path());\n $dompdf->loadHtml(view('view')->render());\n\n $dompdf->stream('view.pdf', ['Attachment' => false]);\n}\n```\n\n`dompdf export result`\n\nhttps://i.sstatic.net/YbMly.png\n\n`mpdf export method`\n\n```\nprotected function mpdfImplementation()\n{\n $mpdf = new Mpdf;\n $mpdf->WriteHTML(view('view')->render());\n\n $mpdf->output();\n}\n```\n\n`mpdf export result`\n\nhttps://i.sstatic.net/sSEyA.png\n\n`tcpdf export method`\n\n```\nprotected function tcpdfImplementation()\n{\n $tcpdf = new TCPDF('P', 'mm', 'A4', true, 'UTF-8', false);\n $tcpdf->AddPage();\n $tcpdf->writeHTML(view('view')->render());\n\n $tcpdf->Output('view.pdf', 'I');\n}\n```\n\n`tcpdf export result`\n\nhttps://i.sstatic.net/3VBdU.png\n\nIs it not possible to export views to pdf without a css inliner?\n\nAm I better off just manually taking a full page screenshot, pasting it into a text document and saving it as a pdf file?\n\n========================================\n\nTop Answer:\nThis package works like a charm (as usual with spatie) :\nhttps://github.com/spatie/browsershot\n\nAccording to the doc :\n\nThe package can convert a webpage to an image or pdf. The conversion\nis done behind the scenes by Puppeteer which controls a headless\nversion of Google Chrome.\n\n========================================\n\nCode:\n```xml\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>Test View</title>\n <link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"{{ asset('css/app.css') }}\">\n <script src=\"{{ asset('js/app.js') }}\" defer></script>\n</head>\n<body class=\"font-sans antialiased\">\n\n<div class=\"grid grid-cols-3\">\n <div class=\"bg-red-200 col-span-2 h-screen\"></div>\n <div class=\"bg-blue-200 h-screen\">\n <div class=\"grid grid-cols-8\">\n <div class=\"col-span-7\">\n <div class=\"rounded-t-full w-full h-screen flex items-center justify-center bg-green-600\">\n <div class=\"h-60 w-60 rounded-full bg-blue-500\">TEST</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n</body>\n</html>\n```\n\n```text\nprotected function dompdfImplementation()\n{\n $dompdf = new Dompdf;\n $dompdf->getOptions()->setChroot(public_path());\n $dompdf->loadHtml(view('view')->render());\n\n $dompdf->stream('view.pdf', ['Attachment' => false]);\n}\n```\n\n```text\nprotected function mpdfImplementation()\n{\n $mpdf = new Mpdf;\n $mpdf->WriteHTML(view('view')->render());\n\n $mpdf->output();\n}\n```\n\n```text\nprotected function tcpdfImplementation()\n{\n $tcpdf = new TCPDF('P', 'mm', 'A4', true, 'UTF-8', false);\n $tcpdf->AddPage();\n $tcpdf->writeHTML(view('view')->render());\n\n $tcpdf->Output('view.pdf', 'I');\n}\n```\n\n```text\nview\n```\n\n```text\nappearance\n```\n\n```text\ndompdf export method\n```\n\n```text\ndompdf export result\n```\n\n```text\nmpdf export method\n```\n\n```text\nmpdf export result\n```\n\n```text\ntcpdf export method\n```\n\n```text\ntcpdf export result\n```\n\n```text\nbarryvdh/laravel-dompdf\n```\n\n```text\ndompdf/dompdf\n```\n\n```text\nmedia=\"print\"\n```\n\n```text\nprint:*\n```\n\n```text\nchrome-php\n```\n\n```text\nbarryvdh/excel\n```\n\n```php\n<?php\n\nuse HeadlessChromium\\BrowserFactory;\nuse HeadlessChromium\\Page;\n\nrequire_once __DIR__ . '/vendor/autoload.php';\n\n$browserFactory = new BrowserFactory();\n\n$browser = $browserFactory->createBrowser([\n 'noSandbox' => true,\n 'customFlags' => [\n '--proxy-server=\"direct://\"',\n '--proxy-bypass-list=*',\n '--font-render-hinting=none',\n ],\n]);\n\n$page = $browser->createPage();\n\n$tempname = '//<path to your HTML over HTTP>';\n\n$page->navigate('file://' . $tempname)\n ->waitForNavigation(Page::NETWORK_IDLE);\n\n$outputPath = __DIR__ . '/output.pdf';\n\n$page->pdf([\n 'printBackground' => true,\n 'preferCSSPageSize' => true,\n 'marginTop' => 0.4,\n 'marginBottom' => 0.2,\n 'marginLeft' => 0.2,\n 'marginRight' => 0.2,\n])->saveToFile($outputPath);\n```\n\n```text\nchrome-php/chrome\n```\n\n```html\n<html>\n<head>\n...\n<base href=\"http://www.example.com/\">\n<link href=\"/assets/css/style.css\" rel=\"stylesheet\">\n...\n</head>\n```\n\n```text\nbase\n```\n\n```text\nhead\n```\n\n========================================\n\nComments:\n- Have you gone throughTailwind Docs # Styling for print or write your own custom css with @media rule\n- scoping the stylesheet to `media=\"print\"` doesn't seem to work either. I think I'm going to look for an inliner.\n- This is for a personal project so I don't strictly **need** it to be completely automatic. I'm not sure how to use a headless chrome to achieve what I want. Can you elaborate on that? I just tried wkhtmltopdf and the results were the same. (Just text, no styling)\n- github.com/chrome-php/headless-chromium-php\n- That library looks promising, too bad it's not mantained and just doesn't work.\n- There are many others, just pick. Do some work yourself. packagist.org/packages/chrome-php/chrome\n- I'll try that code out tomorrow, but the last time I tried chrome-php it didn't get past the stage of `createBrowser()`. It threw me errors about the browser not starting and diving into the source code revealed it did not properly support windows .At first glance it does, but for example the first step that library does to create a browser is checking the chrome version... with a command that is meaningless in windows, causing a timeout. Even commenting out that entire section or tripling the timeout didn't help.\n- If this is an acceptable solution, why not print the page to PDF directly with, say, PDFCreator?\n- That could be a solution but I'm not familiar with that software. It's the first time I've heard of it. ***IF*** it works, I'd consider it an acceptable solution as well.","metadata":{"transformedAt":"2026-08-18T18:33:42.906Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":23,"totalLines":292,"estimatedTokens":1552}}266{"id":"stack-74980740","source":"stackoverflow","questionId":74980740,"title":"html2canvas shifting text downwards","tags":["tailwind-css","html2canvas"],"text":"Title: html2canvas shifting text downwards\nTags: tailwind-css, html2canvas\nSource: Stack Overflow\n\nQuestion:\nI am trying to convert a `` to an image using html2canvas. However, there's an issue. The text inside the `` marked with the red circle in `Figure 1` has no padding or any kind of offset introducing parameters. But when converted to an image, there's an error gap above the text as shown by the red circle in `Figure 2`. I have used `` (marked with black background) and a `` (marked with a green background).\n\n`Figure 1`\n\nhttps://i.sstatic.net/oVVNN.png\n\n`Figure 2`\n\nhttps://i.sstatic.net/ks6cP.png\n\nWhy is it behaving this way and is there a way to fix this ?\n\n========================================\n\nTop Answer:\nThis works for me.\n\n```\n\n body{\n line-height: initial !important;\n }\n\n```\n\n========================================\n\nCode:\n```text\n<div>\n```\n\n```text\n<div>\n```\n\n```text\nFigure 1\n```\n\n```text\nFigure 2\n```\n\n```text\n<h3>\n```\n\n```text\n<span>\n```\n\n```text\nFigure 1\n```\n\n```text\nFigure 2\n```\n\n```text\n@layer base {\n img {\n @apply inline-block;\n }\n}\n```\n\n```text\ndisplay\n```\n\n```text\nimg\n```\n\n```text\ndisplay: block;\n```\n\n```text\nhtml2canvas\n```\n\n```text\ntailwind.css\n```\n\n```text\n@tailwind base;\n```\n\n```text\n<style>\n body{\n line-height: initial !important;\n }\n</style>\n```\n\n```text\nconst originalCreateElement = document.createElement;\n document.createElement = (tagName: string, options: any) => {\n const el = originalCreateElement.call(document, tagName, options);\n\n // only change img，don't affect other tags\n if (tagName.toLowerCase() === 'img') {\n el.style.display = 'inline-block'; // or inline\n }\n\n return el;\n };\n // Call html2canvas api\n const canvas = await html2canvas(shareCardRef.current, {});\n\n document.createElement = originalCreateElement;\n```\n\n========================================\n\nComments:\n- This is a pending issue that is still not resolved. Here's the link to relevant github issue github.com/niklasvh/html2canvas/issues/2775\n- How do we do this without affecting the whole project?\n- You can use Custom CSS through inline styling to handle this as shown below: .random-class { display: inline-block !important; } try this an let me know.\n- Yes, it worked. just before the creation of the pdf, I added the style to the dom and then removed it after pdf creation. Thank you\n- I am using Chakra UI and I applied this in theme.js to all images and it worked! It's very helpful, thank you.\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.906Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":132,"estimatedTokens":691}}267{"id":"stack-71870743","source":"stackoverflow","questionId":71870743,"title":"Tailwind height transition not working on h-min, h-fit, h-max, and h-auto","tags":["javascript","next.js","tailwind-css"],"text":"Title: Tailwind height transition not working on h-min, h-fit, h-max, and h-auto\nTags: javascript, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nSo I like to make transition whenever the element change it's height. It works on h-10, h-20, etc. But it doesnt work on h-min, h-max, h-auto.\n\n\n```\n\n {\n menu.map((item, index) => {\n return (\n \n \n {item.name}\n \n \n )\n })\n }\n\n \n```\n\ntailwind.config.js\n\n```\nmodule.exports = {\n content: [\n \"./src/components/**/*.{js,ts,jsx,tsx}\",\n \"./src/pages/**/*.{js,ts,jsx,tsx}\",\n ],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n colors: {\n primary: {\n DEFAULT: '#6558F5',\n },\n secondary: '#FED103',\n container: {\n 100: '#E0E0E0',\n 200: '#C4C4C4'\n }\n },\n\n gridTemplateColumns: {\n title: '0.1fr 0.9fr'\n },\n transitionProperty: {\n 'height': 'height',\n }\n }\n },\n variants: {\n extend: {}\n },\n}\n``` \n```\n\n========================================\n\nTop Answer:\nYou could use CSS instead if Tailwind wasn't cooperating\n\n```\n\n```\n\nsee How can I transition height: 0; to height: auto; using CSS?\n\n========================================\n\nCode:\n```text\n<div id=\"botnav\" className={`${isOpen ? 'h-min' : 'h-0'}\n bg-primary\n flex flex-col\n transition-all duration-500 ease\n \n `}>\n {\n menu.map((item, index) => {\n return (\n <Link href={item.link} key={index} className=\"\">\n <a className=\" w-full px-1 py-1 text-white font-bold items-center justify-center border-none \">\n {item.name}\n </a>\n </Link>\n )\n })\n }\n\n </div>\n```\n\n```text\nmodule.exports = {\n content: [\n \"./src/components/**/*.{js,ts,jsx,tsx}\",\n \"./src/pages/**/*.{js,ts,jsx,tsx}\",\n ],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n colors: {\n primary: {\n DEFAULT: '#6558F5',\n },\n secondary: '#FED103',\n container: {\n 100: '#E0E0E0',\n 200: '#C4C4C4'\n }\n },\n\n gridTemplateColumns: {\n title: '0.1fr 0.9fr'\n },\n transitionProperty: {\n 'height': 'height',\n }\n }\n },\n variants: {\n extend: {}\n },\n}\n``` \n```\n\n```text\n<div id=\"botnav\" className={`${isOpen ? 'max-h-40' : 'max-h-0'} transition-all duration-500 ease`}>\n```\n\n```text\nheight: auto\n```\n\n```text\nmax-height\n```\n\n```text\n<div \n id=\"botnav\"\n style={ isOpen\n ? { maxHeight: \"10rem\", transition: \"max-height 0.15s ease-out\"}\n : { maxHeight: \"0rem\", transition: \"max-height 0.15s ease-in\"}\n}>\n```\n\n```text\nimport { Transition } from '@headlessui/react';\n\n <Transition\n show={isOpen}\n className=\"transition-all duration-500 overflow-hidden\"\n enterFrom=\"transform max-h-0\"\n enterTo=\"transform max-h-[9999px]\"\n leaveFrom=\"transform max-h-[9999px]\"\n leaveTo=\"transform max-h-0\"\n >\n <div id=\"botnav\">\n <Link href={item.link} key={index} className=\"\">\n <a className=\" w-full px-1 py-1 text-white font-bold items-center justify-center border-none \">\n {item.name}\n </a>\n </Link>\n </div>\n </Transition>\n```\n\n```text\nmax-height\n```\n\n```text\nheight\n```\n\n```text\nheadless-ui\n```\n\n```text\nTransition\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.906Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":190,"estimatedTokens":2127}}268{"id":"stack-76970920","source":"stackoverflow","questionId":76970920,"title":"How to make vscode recognize Tailwind's @apply?","tags":["css","visual-studio-code","configuration","tailwind-css"],"text":"Title: How to make vscode recognize Tailwind's @apply?\nTags: css, visual-studio-code, configuration, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am writing a Vuejs + Tailwindcss in pure CSS mode and everything works fine (i.e. the app works as expected from the code).\n\nSince I use vscode I configured it according to the Tailwindcss recommendations and I have Intellisense working fine.\n\nOne thing that is an eyesore is that directives are highlighted by vscode as `Unknown at rule @tailwind`\n\nhttps://i.sstatic.net/mWWRn.png\n\nSame with `@apply` (the Tailwind `@apply`, not the abandoned CSS one).\n\nIs there a way to fix this?\n\n*Note: a previous question mentioned this issue but it was using Sass and the recommendation was to use pure CSS, which is my case.*\n\n========================================\n\nTop Answer:\nAdding my 2c to the great answer by @Wongin\n\n- You can change your project settings for one file only (like `input.css`)\n\n- You can also use GUI to edit this setting:\n\n**https://i.sstatic.net/AJ0ZGob8.png**\n\n========================================\n\nCode:\n```text\nUnknown at rule @tailwind\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```json\n\"files.associations\": {\n \"*.css\": \"tailwindcss\"\n}\n```\n\n```text\n<style lang=\"postcss\">\n</style>\n```\n\n```text\nfiles.associations\n```\n\n```text\n.css\n```\n\n```text\nlang=\"postcss\"\n```\n\n```text\n<style>\n```\n\n```text\ninput.css\n```\n\n========================================\n\nComments:\n- Thank you! I added to your answer information about how to deal with components, feel free to modify if needed.","metadata":{"transformedAt":"2026-08-18T18:33:42.906Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":80,"estimatedTokens":389}}269{"id":"stack-70413260","source":"stackoverflow","questionId":70413260,"title":"Prevent whole page scrolling in Next JS but allow components to scroll","tags":["html","css","next.js","tailwind-css"],"text":"Title: Prevent whole page scrolling in Next JS but allow components to scroll\nTags: html, css, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nDesired goal: I ultimately want my app to have a fixed, sticky menu bar at the top, then a div/component that contains the rest of the content and *not scroll*, while allowing the sub-components *freedom to scroll when necessary*. I will ultimately build this in Next JS, but I can't even make it work in plain HTML/CSS, so I'm unsure of the styles to apply in the Next code. I *suspect* that I have to apply styles to the outermost `` tag, but nothing I tried seems to work. I also suspect that (to use Next), I will need to override the Document as they describe in the Next documentation and apply styles to ``. But first, just in plain HTML...\n\nIf I write this in **bad, incorrect** pseudocode, I'm looking for:\n\n```\n\n \n \n \n \n \n \n \n\n```\n\nI tried the brute force method of sticking `overflow: hidden` on just about every tag in the tree, but still nothing working.\n\nI consulted this good post and saw this close post (with a terse answer) but didn't think the second post applied.\n\nHere's dumb HTML that I was trying to get to work (ignoring the sticky nav part):\n\n```\n\n \n \n Nav bar\n\n \n \n \n \n \n Item 1\n \n \n \n \n \n \n Footer here\n\n \n\n```\n\nFor what it's worth, this is the Next/React code with Tailwind that will be the base of the main page:\n\n```\nconst AppLayout = ({ children }) => (\n <>\n \n \n \n \n {children}\n \n \n);\n```\n\nI added extra tags in there with styles in random and unstructured ways, trying to hack it to work and no dice.\n\nIf someone could show me my errors, or post anything simple that works, I'd appreciate it. I use tailwindcss so you can express it that way if helpful.\n\n========================================\n\nCode:\n```text\n<html>\n <nav style=\"sticky to top\">\n <!-- Markup to render a menu. -->\n </nav>\n <body style=\"don't scroll; size=take up the rest of the page\">\n <table style=\"overflow-y: auto\"\n <!-- TONS OF TABLE ROWS. -->\n </table>\n </body>\n</html>\n```\n\n```text\n<html>\n <nav>\n <div style=\"background-color: purple;\">\n <p>Nav bar</p>\n </div>\n </nav>\n <body style=\"overflow:hidden\">\n <div style=\"overflow: scroll\">\n <table style=\"color: red; overflow:scroll\">\n <tr><td>Item 1</td></tr>\n <!-- Repeated the above about 20 times. -->\n </table>\n </div>\n </body>\n <footer>\n <!-- Only put this here so the page bottom is obvious; not in my app. -->\n <p>Footer here</p>\n </footer>\n</html>\n```\n\n```text\nconst AppLayout = ({ children }) => (\n <>\n <header className = \"sticky top-0 z-50\">\n <Menu />\n </header>\n <main id = \"AppLayoutMain\" className=\"relative bg-white antialiased overflow-hidden\">\n {children}\n </main>\n </>\n);\n```\n\n```text\n<body>\n```\n\n```text\n<body>\n```\n\n```text\noverflow: hidden\n```\n\n```html\n<div class=\"flex flex-col h-screen overflow-hidden\">\n <div class=\"flex-shrink-0\">Header content</div>\n <div class=\"overflow-hidden\">\n <div class=\"w-40 max-h-full overflow-y-auto\">\n Scrolling content\n ...\n </div>\n </div>\n <div class=\"flex-shrink-0\">Footer Content</div>\n</div>\n```\n\n```text\nflex-col\n```\n\n```text\noverflow-hidden\n```\n\n========================================\n\nComments:\n- For starters, your header and footer HTML need to be nested inside the `` (see: w3docs.com/snippets/html/html5-page-structure.html).\n- Doh! You're right, thanks. Way too tired when writing.\n- Nice! Thanks Ed. I knew it was simple and I was just missing it. Weird thing, though - doesn't scroll on Safari, but does on Chrome and Brave. Any idea why (other than \"avoid Safari\"?)\n- @partnerd Sorry, but I don't have Safari on my PC...maybe play with the height settings of the innermost div? FYI, it also works in FireFox and Edge.","metadata":{"transformedAt":"2026-08-18T18:33:42.906Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":161,"estimatedTokens":951}}270{"id":"stack-69028815","source":"stackoverflow","questionId":69028815,"title":"how to make div scroll internally tailwind css","tags":["css","scroll","tailwind-css"],"text":"Title: how to make div scroll internally tailwind css\nTags: css, scroll, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a dashboard with two sides, a nav on the left and the main content on the right, simple. They both are housed by a main div which has the height of the current screen.\nI need the main content div to scroll internally not scroll with the entire view when content overflows. All this while the nav on the right remains as is without being affected by the content overflow on the main content div\n\n```\n\n////This is the side nav\n\n /// this is the main content div that i need the content inside to scroll internally\n /// what i mean by this is i dont want the whole page to move when there is a lot of content \n /// just the content inside this div\n\n```\n\nHow can I achieve this\n\n========================================\n\nCode:\n```text\n<main className=\" flex flex-row h-screen\">\n\n<div className=\" w-1/5 h-full flex flex-col flex-grow bg-purple-50\">\n////This is the side nav\n</div>\n\n<div className=\" w-4/5 bg-gray-50 h-screen overscroll-auto\">\n /// this is the main content div that i need the content inside to scroll internally\n /// what i mean by this is i dont want the whole page to move when there is a lot of content \n /// just the content inside this div\n</div>\n\n</main>\n```\n\n```text\n<main className=\" flex flex-row h-screen\">\n\n<div className=\" w-1/5 h-full max-h-screen overflow-y-auto flex flex-col flex-grow bg-purple-50\">\n////This is the side nav\n</div>\n\n<div className=\" w-4/5 bg-gray-50 max-h-screen overflow-y-auto\">\n /// this is the main content div that i need the content inside to scroll internally\n /// what i mean by this is i dont want the whole page to move when there is a lot of content \n /// just the content inside this div\n</div>\n\n</main>\n```\n\n========================================\n\nComments:\n- Can you make the side nav sticky?","metadata":{"transformedAt":"2026-08-18T18:33:42.906Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":59,"estimatedTokens":472}}271{"id":"stack-62412728","source":"stackoverflow","questionId":62412728,"title":"Tailwind CSS custom color applying to text but not background in ReactJS","tags":["javascript","reactjs","tailwind-css"],"text":"Title: Tailwind CSS custom color applying to text but not background in ReactJS\nTags: javascript, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nOkay so my problem is more than just as titled.\nI have been trying to add customize the color in my React app, and have run into multiple problems.\n\nHere's some of my code:\n\n```\n// tailwind.config.js\nmodule.exports = {\n purge: [],\n theme: {\n colors: {\n primary: \"var(--color-primary)\",\n secondary: \"var(--color-secondary)\",\n },\n extend: {},\n },\n variants: {},\n plugins: [],\n};\n```\n\n```\n// tailwind.css\n@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;\n\n.theme-TCD {\n --color-primary: #411218;\n --color-secondary: #e8982e;\n}\n```\n\nI originally setup my React app following this tutorial using npm but that would not work. When I this tutorial using yarn, some custom colors are applying correctly.\n\nOnly custom text colors are applying, not bg colors.\n\nCustom text color only applies if it's a React element. It doesn't work in a plain HTML tag.\nI.E.\n\n```\nimport React from \"react\";\nimport Hello from \"./hello\";\n\nfunction App() {\n return (\n \n \n\n### Hello World!\n\n // This does not work\n // This works\n \n );\n}\n\nexport default App;\n```\n\n========================================\n\nCode:\n```text\n// tailwind.config.js\nmodule.exports = {\n purge: [],\n theme: {\n colors: {\n primary: \"var(--color-primary)\",\n secondary: \"var(--color-secondary)\",\n },\n extend: {},\n },\n variants: {},\n plugins: [],\n};\n```\n\n```text\n// tailwind.css\n@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;\n\n.theme-TCD {\n --color-primary: #411218;\n --color-secondary: #e8982e;\n}\n```\n\n```text\nimport React from \"react\";\nimport Hello from \"./hello\";\n\nfunction App() {\n return (\n <div className=\"theme-TCD\">\n <h1 className=\"text-primary\">Hello World!</h1> // This does not work\n <Hello /> // This works\n </div>\n );\n}\n\nexport default App;\n```\n\n```text\n:root {\n --color-primary: #411218;\n --color-secondary: #e8982e;\n}\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.906Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":126,"estimatedTokens":516}}272{"id":"stack-71125642","source":"stackoverflow","questionId":71125642,"title":"How to add Tailwind CSS scroll-smooth class to Next.js","tags":["next.js","tailwind-css"],"text":"Title: How to add Tailwind CSS scroll-smooth class to Next.js\nTags: next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to add scroll behaviour **smooth** to my Next.js app, and the Tailwind CSS documentation instructs us to add the utility class in ``.\n\n```\n\n \n \n```\n\nThis file does not contain an `html` tag:\n\n```\nimport Head from \"next/head\";\n import \"@material-tailwind/react/tailwind.css\";\n import \"../styles/globals.css\";\n \n function MyApp({ Component, pageProps }) {\n return (\n <>\n \n \n \n \n \n \n \n );\n }\n \n export default MyApp;\n```\n\nHow and where can I add the `smooth-scroll` utility class in my project?\n\n========================================\n\nTop Answer:\nUse a custom `_document.js` and add it there - Here is an explanation of what it does -\n\n```\nimport Document, { Html, Head, Main, NextScript } from 'next/document'\n\nclass MyDocument extends Document {\n static async getInitialProps(ctx) {\n const initialProps = await Document.getInitialProps(ctx)\n return { ...initialProps }\n }\n\n render() {\n return (\n \n \n \n \n \n \n \n )\n }\n}\n\nexport default MyDocument\n```\n\n========================================\n\nCode:\n```html\n<html class=\"scroll-smooth \">\n <!-- ... -->\n </html>\n```\n\n```js\nimport Head from \"next/head\";\n import \"@material-tailwind/react/tailwind.css\";\n import \"../styles/globals.css\";\n \n function MyApp({ Component, pageProps }) {\n return (\n <>\n <Head>\n <link\n href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\n rel=\"stylesheet\"\n />\n </Head>\n \n <Component {...pageProps} />\n \n </>\n );\n }\n \n export default MyApp;\n```\n\n```text\n<html/>\n```\n\n```text\nhtml\n```\n\n```text\nsmooth-scroll\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n html {\n @apply scroll-smooth;\n }\n}\n```\n\n```js\nimport Document, { Html, Head, Main, NextScript } from 'next/document'\n\nclass MyDocument extends Document {\n static async getInitialProps(ctx) {\n const initialProps = await Document.getInitialProps(ctx)\n return { ...initialProps }\n }\n\n render() {\n return (\n <Html class=\"scroll-smooth\">\n <Head />\n <body>\n <Main />\n <NextScript />\n </body>\n </Html>\n )\n }\n}\n\nexport default MyDocument\n```\n\n```text\n_document.js\n```\n\n```text\nimport '../styles/globals.css'\n\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <html className='scroll-smooth'>\n <head />\n <body>{children}</body>\n </html>\n )\n}\n```\n\n========================================\n\nComments:\n- ctx.defaultGetInitialProps is not a function. I am getting this error\n- your link in the answer is not working\n- Fixed the link, hope that works\n- done thanks it is helpful\n- both answers are correct but I will prefer this answer because this is simple and working","metadata":{"transformedAt":"2026-08-18T18:33:42.906Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":180,"estimatedTokens":733}}273{"id":"stack-66796367","source":"stackoverflow","questionId":66796367,"title":"Styling Navlink using Tailwind css","tags":["react-router-dom","tailwind-css"],"text":"Title: Styling Navlink using Tailwind css\nTags: react-router-dom, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to add tailwind-css to Navlink(react-router-dom). I want to add active style. To add active styles I can use\n\n```\n\n FAQs\n\n```\n\nIs there a way to do this with tailwind-css, I don't want to use css, maybe something like this?\n\n```\n\n FAQs\n\n```\n\n========================================\n\nTop Answer:\nRecently I've been using that aria attribute that NavLink create when it's the current page:\n\n```\n\n Home\n\n```\n\n========================================\n\nCode:\n```text\n<NavLink to=\"/faq\" activeStyle={{fontWeight: \"bold\",color: \"red\"}}>\n FAQs\n</NavLink>\n```\n\n```text\n<NavLink to=\"/faq\" className={`${active?'font-bold text-red':'text-gray-900'}...`}>\n FAQs\n</NavLink>\n```\n\n```text\n<NavLink\n to=\"tasks\"\n className={({ isActive }) =>\n isActive ? activeClassName : undefined\n }\n >\n Tasks\n </NavLink>\n```\n\n```text\nactiveClassName\n```\n\n```text\nNavLink\n```\n\n```text\nactiveClassName\n```\n\n```js\n<NavLink\n className=\"text-white aria-[current=page]:text-blue-400\"\n to=\"/\"\n>\n Home\n</NavLink>\n```\n\n```css\n.active {\n @apply text-red-600 ....\n }\n```\n\n```text\n<NavLink to=\"/home\" className=\"group\">\n <span className=\"group-[.active]:underline\">Home</span>\n</NavLink>\n```\n\n```text\nNavLink\n```\n\n```text\nactive\n```\n\n```text\ngroup\n```\n\n```text\nNavLink\n```\n\n```text\ngroup-[.active]:\n```\n\n========================================\n\nComments:\n- v6 of ReactRouter no longer has this :(\n- why the need to use Remix I dont get it?\n- @StevenAguilar Remix isnt a requirement, it just that the code snippet is from Remix's docs. Work the same for React.\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- Perfect. I was looking for a simple solution to work with react js and Gatsby js and this is it.","metadata":{"transformedAt":"2026-08-18T18:33:42.906Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":119,"estimatedTokens":507}}274{"id":"stack-62502500","source":"stackoverflow","questionId":62502500,"title":"Custom font in Next.js + Tailwind: no error, but wrong font","tags":["javascript","reactjs","webpack","next.js","tailwind-css"],"text":"Title: Custom font in Next.js + Tailwind: no error, but wrong font\nTags: javascript, reactjs, webpack, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn my Next.js (9.4.4) / Tailwind.css (1.4.6) project, I'm using a custom font called SpaceGrotesk. To make it work, I put my fonts my `public/fonts/spaceGrotesk`, and then, I configured my files as follows:\n\n```\n// next.config.js\nmodule.exports = {\n cssModules: true,\n webpack: (config, options) => {\n config.node = {\n fs: \"empty\",\n };\n config.module.rules.push({\n test: /\\.(png|woff|woff2|eot|ttf|svg)$/,\n use: [\n options.defaultLoaders.babel,\n {\n loader: \"url-loader?limit=100000\",\n },\n {\n loader: \"file-loader\",\n },\n ],\n });\n return config;\n },\n};\n```\n\n```\n/** tailwind.css */\n@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;\n\n@font-face {\n font-family: SpaceGrotesk;\n font-weight: 400;\n font-display: auto;\n src: url(../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format(\"woff\");\n}\n```\n\n```\n// tailwind.config.js\nmodule.exports = {\n purge: {\n mode: \"all\",\n content: [\n \"./components/**/*.js\",\n \"./Layout/**/*.js\",\n \"./pages/**/*.js\"\n ],\n },\n\n important: true,\n theme: {\n extend: {\n fontFamily: {\n paragraph: [\"Crimson Text, serif\"],\n spaceGrotesk: [\"SpaceGrotesk, sans-serif\"],\n },\n },\n },\n};\n```\n\nI used to have a lot of trouble with import errors displayed on the console, but fixed them all. Now, however, I still don't get the right fonts. The console shows no warning, the inspector seems to say that the font is loaded correctly, but the back-up font (sans-serif) is still used instead of SpaceGrotesk.\n\nWhat did I do wrong to import my font?\n\n========================================\n\nTop Answer:\nIn order to integrate your own fonts into your Next project, you do not need another dependency in the form of an npm module.\n\nTo get to the font in your globals.css, you have to put the font into the public folder. Then you integrate the font in the globals.css to give it to the CSS-framework in the tailwind.config.js. Afterwards, you simply have to add it to the respective element, or you define it globally.\n\n**globals.css**\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@font-face {\n font-family: \"Custom\";\n src: url(\"/CustomFont.woff2\");\n}\n\nbody {\n @apply font-custom; //if u want the font globally applied\n}\n```\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\n purge: [\"./pages/**/*.{js,ts,jsx,tsx}\", \"./components/**/*.{js,ts,jsx,tsx}\"],\n darkMode: false,\n theme: {\n extend: {\n fontFamily: {\n custom: [\"Custom\", \"sans-serif\"]\n }\n }\n }\n}\n```\n\n========================================\n\nCode:\n```js\n// next.config.js\nmodule.exports = {\n cssModules: true,\n webpack: (config, options) => {\n config.node = {\n fs: \"empty\",\n };\n config.module.rules.push({\n test: /\\.(png|woff|woff2|eot|ttf|svg)$/,\n use: [\n options.defaultLoaders.babel,\n {\n loader: \"url-loader?limit=100000\",\n },\n {\n loader: \"file-loader\",\n },\n ],\n });\n return config;\n },\n};\n```\n\n```css\n/** tailwind.css */\n@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;\n\n@font-face {\n font-family: SpaceGrotesk;\n font-weight: 400;\n font-display: auto;\n src: url(../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format(\"woff\");\n}\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n purge: {\n mode: \"all\",\n content: [\n \"./components/**/*.js\",\n \"./Layout/**/*.js\",\n \"./pages/**/*.js\"\n ],\n },\n\n important: true,\n theme: {\n extend: {\n fontFamily: {\n paragraph: [\"Crimson Text, serif\"],\n spaceGrotesk: [\"SpaceGrotesk, sans-serif\"],\n },\n },\n },\n};\n```\n\n```text\npublic/fonts/spaceGrotesk\n```\n\n```sh\nnpm install --save next-fonts\n```\n\n```js\n// next.config.js\n\nconst withFonts = require(\"next-fonts\");\n\nmodule.exports = withFonts({\n webpack(config, options) {\n config.node = {\n fs: \"empty\",\n };\n config.module.rules.push({\n test: /\\.(png|woff|woff2|eot|ttf|svg)$/,\n use: [\n options.defaultLoaders.babel,\n {\n loader: \"url-loader?limit=100000\",\n },\n {\n loader: \"file-loader\",\n },\n ],\n });\n return config;\n },\n});\n```\n\n```css\n// tailwind.css\n\n@font-face {\n font-family: \"SpaceGrotesk\";\n font-weight: 400;\n src: url(/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format(\"woff\");\n}\n```\n\n```css\n// tailwind.css\n\na {\n font-family: \"SpaceGrotesk\";\n}\n```\n\n```js\n// tailwind.config.js\n\nmodule.exports = {\n // ...The rest of your config here...\n theme: {\n extend: {\n fontFamily: {\n \"space-grotesk\": [\"SpaceGrotesk, sans-serif\"],\n },\n },\n },\n};\n```\n\n```text\nnext-fonts\n```\n\n```text\nnext-fonts\n```\n\n```text\nnext.config.js\n```\n\n```text\npublic\n```\n\n```text\npublic/fonts/spaceGrotesk\n```\n\n```text\n/public\n```\n\n```text\nfont-space-grotesk\n```\n\n```text\nsrc: url(../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format(\"font-woff\");\n```\n\n```text\nsrc: url(../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format(\"woff\");\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@font-face {\n font-family: \"Custom\";\n src: url(\"/CustomFont.woff2\");\n}\n\nbody {\n @apply font-custom; //if u want the font globally applied\n}\n```\n\n```text\nmodule.exports = {\n purge: [\"./pages/**/*.{js,ts,jsx,tsx}\", \"./components/**/*.{js,ts,jsx,tsx}\"],\n darkMode: false,\n theme: {\n extend: {\n fontFamily: {\n custom: [\"Custom\", \"sans-serif\"]\n }\n }\n }\n}\n```\n\n```text\n../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff\n```\n\n```text\n/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff\n```\n\n========================================\n\nComments:\n- I used to have that, and I had 2 warnings: `Failed to decode downloaded font`, `OTS parsing error: invalid version tag`. I found the \"font-woff\" solution here and it removed my warning: stackoverflow.com/questions/30442319/…\n- The answer is you are linking is wrong, and you can even read this in comment. Like I said, there is no format \"font-woff\". You could write \"whatever-woff-whatever\" with same effect. Error you are getting now has nothing to do with this question so you should make new one describing this error. My answer is still correct based on code provided in this question.\n- Thanks, then I'm going to edit it. The true problem is truly coming from the way I import the font, though... \"font-woff\" was just a temporary fix that I kept to remove the warning.","metadata":{"transformedAt":"2026-08-18T18:33:42.906Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":22,"totalLines":331,"estimatedTokens":1707}}275{"id":"stack-76689520","source":"stackoverflow","questionId":76689520,"title":"Can Shadcn ui be installed for Vite + React with javascript and not typescript?","tags":["reactjs","typescript","tailwind-css","vite"],"text":"Title: Can Shadcn ui be installed for Vite + React with javascript and not typescript?\nTags: reactjs, typescript, tailwind-css, vite\nSource: Stack Overflow\n\nQuestion:\nI am having trouble installing and using shadcn components on mt vite + react + tailwind project. i tried following the guide in their documentation here. It seems that it requires typescript for it to work?\n\nI tried to:\n\n- Create a React Javascript project with Vite\n\n- Install Tailwind for Vite React from their doc.\n\n- the shadcn guide in their docs i linked above.\n\nIt says it needs the \"tsconfig.json\" file, which means typescript. I then tried the steps above again, but instead of javascript i created a Typescript project. But it still did not work, i get this error when i try to run the server with `npm run dev` :\nEISDIR: illegal operation on a directory, read\n\nI have uploaded the source code on github here\n\n========================================\n\nTop Answer:\nTypeScript is the recommended way but they provide components in JavaScript version too which you can use by:\n\n- create `jsconfig.json` in root folder instead of `tsconfig.json` and paste the below content:\n\n```\n{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n }\n}\n```\n\n- Update your `vite.config.js` code with below content:\n\n```\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport tailwindcss from \"@tailwindcss/vite\";\nimport path from \"path\";\nimport { fileURLToPath } from \"url\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\n// https://vite.dev/config/\nexport default defineConfig({\n plugins: [react(), tailwindcss()],\n resolve: {\n alias: {\n \"@\": path.resolve(__dirname, \"./src\"),\n },\n },\n});\n```\n\n- Run on terminal (Verifies everything and initialize shadcn)\n\n```\nnpx shadcn-ui@latest init\n```\n\n========================================\n\nCode:\n```text\nnpm run dev\n```\n\n```text\nimport { Button } from \"@/components/ui/button\"\n```\n\n```text\n{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n }\n}\n```\n\n```text\nimport { defineConfig } from \"vite\";\nimport path from \"path\";\nimport react from \"@vitejs/plugin-react\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [react()],\n resolve: {\n alias: {\n \"@\": path.resolve(__dirname, \"./src\"),\n },\n },\n});\n```\n\n```text\njsconfig.json\n```\n\n```text\nvite.config.js\n```\n\n```text\n{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n }\n}\n```\n\n```text\nimport { defineConfig } from \"vite\";\nimport path from \"path\";\nimport react from \"@vitejs/plugin-react\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [react()],\n resolve: {\n alias: {\n \"@\": path.resolve(__dirname, \"./src\"),\n },\n },\n});\n```\n\n```json\n{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n }\n}\n```\n\n```js\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport tailwindcss from \"@tailwindcss/vite\";\nimport path from \"path\";\nimport { fileURLToPath } from \"url\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\n// https://vite.dev/config/\nexport default defineConfig({\n plugins: [react(), tailwindcss()],\n resolve: {\n alias: {\n \"@\": path.resolve(__dirname, \"./src\"),\n },\n },\n});\n```\n\n```bash\nnpx shadcn-ui@latest init\n```\n\n```text\njsconfig.json\n```\n\n```text\ntsconfig.json\n```\n\n```text\nvite.config.js\n```\n\n========================================\n\nComments:\n- The code for most if not all of the components use TypeScript. you can download them and remove the typescript annotations probably (and have less intellisense and such). if you're intent on using javascript, nothings stopping you from setting up a TypeScript project and then using JavaScript for your own stuff (though i highly recommend learning basic TypeScript). as for your error, i would completely delete the project folders you made for this and make a new ts project through vite. make sure you're either on the latest version of node or using the LTS version of node\n- @Samathingamajig thanks for your reply! I did create a ts vite project with react and i followed the docs and added/installed the button component just to test it but i got this error message. did i configure something wrong?\n- code styling is corrupted.","metadata":{"transformedAt":"2026-08-18T18:33:42.907Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":194,"estimatedTokens":1109}}276{"id":"stack-68619975","source":"stackoverflow","questionId":68619975,"title":"How to enable JIT(Just in time mode) with create react app?","tags":["javascript","reactjs","tailwind-css","craco"],"text":"Title: How to enable JIT(Just in time mode) with create react app?\nTags: javascript, reactjs, tailwind-css, craco\nSource: Stack Overflow\n\nQuestion:\nI tried setting up the JIT in create-react-app by myself but it doesn't seem to be working as in the styles are not getting updated. I am using craco to build the app with tailwind css and also added TAILWIND mode=WATCH as they suggested to make it work with most builds . Here are my configs:\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\nmode: \"jit\",\npurge: [\"./src/**/*.{js,jsx,ts,tsx}\", \"./public/index.html\"],\ndarkMode: false, // or 'media' or 'class'\ntheme: {\n extend: {\n colors: {\n primary: \"#ffa500\",\n secondary: {\n 100: \"#E2E2D5\",\n 200: \"#888883\",\n },\n },\n },\n},\nvariants: {\n extend: {\n opacity: [\"disabled\"],\n },\n},\nplugins: [],};\n```\n\n**package.json scripts**\n\n```\n\"scripts\": {\n \"start\": \" craco start\",\n \"build\": \"TAILWIND_MODE=watch craco build\",\n \"test\": \"craco test\",\n \"server\": \"nodemon ./server/server.js\",\n \"eject\": \"react-scripts eject\"\n},\n```\n\n**package.json devDependencies**\n\n```\n\"devDependencies\": {\n \"autoprefixer\": \"^9.8.6\",\n \"postcss\": \"^7.0.36\",\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.2.4\"\n},\n```\n\nI'll be glad if I could get any way to fix this .\n\n========================================\n\nTop Answer:\nyou must use `TAILWIND_MODE=watch` in your *start* script not *build*, and after you have developed what you want build it just with `craco build` script. so your package.json scripts must look like this:\n\n```\n\"scripts\": {\n \"start\": \"TAILWIND_MODE=watch craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\",\n },\n```\n\nalso in purge prop inside the tailwind.config.css file you must add `'./src/components/*.{js,jsx}'` so purge should look like this:\n\n```\npurge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html', './src/components/*.{js,jsx}'],\n```\n\nand after you built your app you must serve the *index.html* file inside build folder.\n\nclone this repo and after building the project use `npm run servebuild` and see if it works.\nhttps://github.com/ako-v/cra-tailwindcss-jit-craco\n\n========================================\n\nCode:\n```text\nmodule.exports = {\nmode: \"jit\",\npurge: [\"./src/**/*.{js,jsx,ts,tsx}\", \"./public/index.html\"],\ndarkMode: false, // or 'media' or 'class'\ntheme: {\n extend: {\n colors: {\n primary: \"#ffa500\",\n secondary: {\n 100: \"#E2E2D5\",\n 200: \"#888883\",\n },\n },\n },\n},\nvariants: {\n extend: {\n opacity: [\"disabled\"],\n },\n},\nplugins: [],};\n```\n\n```text\n\"scripts\": {\n \"start\": \" craco start\",\n \"build\": \"TAILWIND_MODE=watch craco build\",\n \"test\": \"craco test\",\n \"server\": \"nodemon ./server/server.js\",\n \"eject\": \"react-scripts eject\"\n},\n```\n\n```text\n\"devDependencies\": {\n \"autoprefixer\": \"^9.8.6\",\n \"postcss\": \"^7.0.36\",\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.2.4\"\n},\n```\n\n```text\n\"start\": \"cross-env TAILWIND_MODE=watch craco start\"\n```\n\n```text\nnpx tailwindcss -o ./src/App.css --watch\n```\n\n```text\nnpm start\n```\n\n```text\n\"scripts\": {\n \"start\": \"TAILWIND_MODE=watch craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\",\n },\n```\n\n```text\npurge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html', './src/components/*.{js,jsx}'],\n```\n\n```text\nTAILWIND_MODE=watch\n```\n\n```text\ncraco build\n```\n\n```text\n'./src/components/*.{js,jsx}'\n```\n\n```text\nnpm run servebuild\n```\n\n========================================\n\nComments:\n- it's good to mark the answer that was the solution as the answer or if you solved your problem in another way, write it down here and mark it as the answer, for others that had the same problem to know it.\n- Umm I wasn't able to figure it out yet,sorry !\n- So should I remove craco and try this?\n- Not mandatorily, but if they work fine, then you can leave them.\n- Like when I do npm start it automatically does craco build so I did TAILWIND_MODE=watch flag so it automatically enables the flag variable but the style dont seem to get updated :(\n- then I suggest you remove the craco, and just go with JIT, Also with Tailwind v3 it is faster also.\n- I changed the tailwind config and updated the react scripts but now I am getting 'TAILWIND_MODE' is not recognized as an internal or external command,\n- I don't know what is your project structure or other configurations, there maybe other problems that I can not find with just this information you provided, use the git repo that I provided and see if you have still the problem.\n- It didn't work for me until I added `export`, e.g. `\"start\": \"export TAILWIND_MODE=watch craco start\"`.\n- I am using env-cmd instead of cross-env. How can I get it working with env-cmd?","metadata":{"transformedAt":"2026-08-18T18:33:42.907Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":181,"estimatedTokens":1197}}277{"id":"stack-68422354","source":"stackoverflow","questionId":68422354,"title":"Tailwind is not working on a new laravel project","tags":["html","laravel","tailwind-css"],"text":"Title: Tailwind is not working on a new laravel project\nTags: html, laravel, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI just installed a clean Laravel project with the Jetstream starter kit, so it also installed Tailwind CSS.\n\nI then tried to use the sample code from Tailwind but it won't show up.\n\nThis is my simple test code from the Tailwind docs: (from https://tailwindcss.com/docs/hover-focus-and-other-states)\n\n`app.blade.php`: (You can run the code snippet because this is actually what I get in my project)\n\n\r\n\r\n\n```\n\ngetLocale()) }}\">\n\n \n \n \n\n {{ config('app.name', 'Laravel') }}\n\n \n \n\n \n \n\n \n \n \n\n \n Hover me\n \n\n```\n\n\r\n\r\n\r\n\nthis is the `tailwind.config.js` file:\n\n```\nconst defaultTheme = require('tailwindcss/defaultTheme');\n\nmodule.exports = {\n mode: 'jit',\n purge: [\n './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',\n './vendor/laravel/jetstream/**/*.blade.php',\n './storage/framework/views/*.php',\n './resources/views/**/*.blade.php',\n './resources/js/**/*.vue',\n ],\n\n theme: {\n extend: {\n fontFamily: {\n sans: ['Nunito', ...defaultTheme.fontFamily.sans],\n },\n },\n },\n\n variants: {\n extend: {\n opacity: ['disabled'],\n },\n },\n\n plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],\n};\n```\n\nthis is the `webpack.mix.js` file:\n\n```\nconst mix = require('laravel-mix'); \n \nmix.js('resources/js/app.js', 'public/js').vue()\n .postCss('resources/css/app.css', 'public/css', [\n require('postcss-import'),\n require('tailwindcss'),\n ])\n .webpackConfig(require('./webpack.config'));\n\nif (mix.inProduction()) {\n mix.version();\n}\n```\n\nand this is the `app.css` file:\n\n```\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\n========================================\n\nTop Answer:\nI had the same problem on 5-12-2024 for a fresh Laravel project.\nI did all the things, like putting `@vite(['resources/css/app.css', 'resources/js/app.js'])` at the top of the layout's HTML file(or blade file) and running the command `npm run dev`. Yet it didn't work for me.\n\nThen suddenly a thought came to my mind: What if I try to run\n\nnpm run build\n\nI did this and boom ! It worked.\nYou might try all the solutions given up there, and if it still doesn't work, you may try running this command too,\n\n```\nnpm run build\n```\n\n========================================\n\nCode:\n```html\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n\n <title>{{ config('app.name', 'Laravel') }}</title>\n\n <!-- Fonts -->\n <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap\">\n\n <!-- Styles -->\n <link rel=\"stylesheet\" href=\"{{ mix('css/app.css') }}\">\n\n <!-- Scripts -->\n \n <script src=\"{{ mix('js/app.js') }}\" defer></script>\n</head>\n\n<body class=\"font-sans antialiased\">\n <button class=\"bg-red-500 hover:bg-red-700\">\n Hover me\n </button>\n\n</body>\n\n</html>\n```\n\n```text\nconst defaultTheme = require('tailwindcss/defaultTheme');\n\nmodule.exports = {\n mode: 'jit',\n purge: [\n './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',\n './vendor/laravel/jetstream/**/*.blade.php',\n './storage/framework/views/*.php',\n './resources/views/**/*.blade.php',\n './resources/js/**/*.vue',\n ],\n\n theme: {\n extend: {\n fontFamily: {\n sans: ['Nunito', ...defaultTheme.fontFamily.sans],\n },\n },\n },\n\n variants: {\n extend: {\n opacity: ['disabled'],\n },\n },\n\n plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],\n};\n```\n\n```text\nconst mix = require('laravel-mix'); \n \nmix.js('resources/js/app.js', 'public/js').vue()\n .postCss('resources/css/app.css', 'public/css', [\n require('postcss-import'),\n require('tailwindcss'),\n ])\n .webpackConfig(require('./webpack.config'));\n\nif (mix.inProduction()) {\n mix.version();\n}\n```\n\n```text\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\n```text\napp.blade.php\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nwebpack.mix.js\n```\n\n```text\napp.css\n```\n\n```text\nnpm run dev\n```\n\n```text\nnpm run watch\n```\n\n```text\nnpm run dev\n```\n\n```text\nphp artisan serve\n```\n\n```text\n<link rel=\"stylesheet\" href=\"{{ asset('css/app.css') }}\">\n <script src=\"{{ asset('js/app.js') }}\" defer></script>\n```\n\n```text\nnpm run dev\n```\n\n```text\nnpm run build\n```\n\n```text\n@vite(['resources/css/app.css', 'resources/js/app.js'])\n```\n\n```text\nnpm run dev\n```\n\n========================================\n\nComments:\n- Yes! and also the Tailwind documentation doesn't show the entire tailwind classes that create the elements as seen on their website - so you actually need to copy the entire element to get the real code behind what you see on the screen! (I do \"Right click with mouse > Inspect > Copy > Copy element\" on Google Chrome for example)\n- This really solved my issue. It was difficult to search for this, as only parts of Laravel were not working. Luckily, I found your answer! Thanks!\n- the problem is only when open the website in monbile","metadata":{"transformedAt":"2026-08-18T18:33:42.907Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":267,"estimatedTokens":1343}}278{"id":"stack-69114800","source":"stackoverflow","questionId":69114800,"title":"Nuxt3: how to use tailwindcss","tags":["nuxt.js","tailwind-css","unocss"],"text":"Title: Nuxt3: how to use tailwindcss\nTags: nuxt.js, tailwind-css, unocss\nSource: Stack Overflow\n\nQuestion:\nVery first try on Nuxt3 via Nuxt3 Starter\n\nI wonder how can I use tailwindcss in Nuxt3 Starter manually.\n\n(Not via @nuxtjs/tailwindcss , because it's for Nuxt2, and not work with Nuxt3.)\n\nI created a blank Nuxt3 project by\n\n```\nnpx degit \"nuxt/starter#v3\" my-nuxt3-project\n```\n\nthen, I installed the tailwindcss manually\n\n```\nnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\n**nuxt.config.ts**\n\n```\nexport default {\n css: [\n '~/assets/tailwind.css',\n ]\n}\n```\n\n**assets/tailwind.css**\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nbut I can only get the raw code but not the compiled css:\n\nHow can I use tailwindcss in Nuxt3?\n\nAny help is greatly appreciated!\n\nonline mini demo\n\nupdate:\n\n@nuxtjs/tailwindcss is already supported in Nuxt3\n\nbasic example\n\n========================================\n\nTop Answer:\nI made a fully configured nuxt 3 \"starter-kit\", supporting TypeScript and several considered as useful libraries, fully configured and ready to use in real world projects: TypeScript, Tailwind CSS, Sass, Storybook, Vitest & Pinia. I just pushed it yesterday - should be ready to use...\n\nMaybe it will help someone: https://github.com/lazercaveman/nuxt3-starter :)\n\n========================================\n\nCode:\n```bash\nnpx degit \"nuxt/starter#v3\" my-nuxt3-project\n```\n\n```text\nnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\n```text\nexport default {\n css: [\n '~/assets/tailwind.css',\n ]\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nbuild: {\n postcss: {\n postcssOptions: {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n },\n },\n}\n```\n\n```text\ncss: [\"~/assets/css/tailwind.css\"]\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\ncontent: [\n \"./components/**/*.{vue,js}\",\n \"./layouts/**/*.vue\",\n \"./pages/**/*.vue\",\n \"./plugins/**/*.{js,ts}\",\n \"./nuxt.config.{js,ts}\",\n ],\n```\n\n```text\nnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nnuxt.config.js\n```\n\n```text\nnuxt.config.js\n```\n\n```text\ntailwind.css\n```\n\n```text\ntailwind.config.js\n```\n\n```sh\nyarn run tailwindcss init\n```\n\n```text\ntailwindcss.config.js\n```\n\n```text\ncss: ['~/assets/styles/tailwind.css'],\nbuild: {\n postcss: {\n postcssOptions: {\n plugins: {\n tailwindcss: {},\n autoprefixer: {}\n }\n }\n }\n},\n```\n\n```text\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\n```text\nyarn add postcss && tailwindcss\n```\n\n```text\nyarn dev\n```\n\n```text\nyarn add --dev @nuxtjs/tailwindcss\n\n// OR\n\nnpm install --save-dev @nuxtjs/tailwindcss\n```\n\n```js\nexport default defineNuxtConfig({\n modules: ['@nuxtjs/tailwindcss']\n})\n```\n\n```text\ncontent\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ncomponents\n```\n\n```text\npages\n```\n\n```text\nlayouts\n```\n\n========================================\n\nComments:\n- There is probably some configuration to do with postcss too? tailwindcss.com/docs/…\n- @kissu Thanks a lot! I use the default `postcss.config.js`, but I just found it has never been ran.\n- check the official docs of tailwind css tailwindcss.com/docs/guides/nuxtjs\n- Thanks a lot for you answer! This question is asked a month ago when nuxt3 is in private beta, nuxt3 is support tailwindcss now.\n- This should not be accepted answer as it's outdated, Nuxt3 supports TailwindCSS just fine.\n- Actually, technically Tailwind CSS isn't supported in Nuxt 3 - https://modules.nuxtjs.org/?version=3.x, however, WindiCSS is.\n- @23johanningmeierjl, how is it not supported? I'm using it in my Nuxt3 project just fine without any issues whatsoever. You simply do not need a module for Tailwind. It simply needs to be configured in nuxt.config.js in build params.\n- @SamAxe, I answered this months ago when Tailwind 3 was not out yet. The docs were old, and when following the docs on the basis for the installation with Nuxt, it yielded errors. This is because the Nuxt Tailwind module was and still is incompatible with Nuxt 3. You can review the old docs here. I found WindiCSS as the best alternative then, and was my best answer at the time. Also, the alternative method is less-than-preferable because it doesn't work when running 'npm run dev', it only works when building.\n- @23jjl the above answer update is still not accurate, running `nuxi dev` supports hot refresh without a problem and will recompile tailwind on the fly\n- @SamAxe, I tried it yesterday. Tailwind worked when I deployed it, however, not when I ran `nuxi dev`. None of the styling showed up whatsoever. This is because in the `nuxt.config.ts` file, Post CSS is set to run when it “builds”, not when you run it using the 'dev' command. I will say it would work great with CodeSandbox, because it \"builds\" it when it generates the app automatically. As a VS Code (or sometime Gitpod) user, it won't work at all because it doesn't compile Tailwind when running `nuxi dev`. Unless I'm missing something, I'm fairly sure I'm still accurate.\n- @SamAxe, you missed something in your answer. You need to add \"./app.vue/\" under the \"content\" declaration in `tailwind.config.js` as well as a few other things if you want your app to be styled. Wasn't aware of that. I did not add this, when I tried it.\n- @SamAxe, I think I have clarified. I feel that the video gives a better example of how to do it. (Personally, I'm a bit of a visual learner). I also kept the idea of Windi CSS (I have to recommend it) and UnoCSS. The benchmarks I included are also useful. I hope this is better.\n- @23jjl good catch regards the config.js, amended my answer, thanks for pointing that out\n- Not like Tailwind3 is a big deal anyway. You can always ask to support some features ok the Windi project.\n- Especially with this: twitter.com/windi_css/status/…\n- @AndrewP. Interesting, 3-rc3 was not available at the time I wrote this answer, I assume something may have changed the way postcss is configured during build. In theory, above set up relies on Nuxt itself very little so still should work, but I might be wrong.\n- It seems Nuxt v3 rc 13 has changed the nuxtx.config file structure slightly and it's now. postcss -> plugins -> tailwindcss, ... without being wrapped in \"build\" and without \"postcssOptions\"\n- That is not valid anymore since Nuxt 3 stable doesn't support the nuxt 2 syntax anymore - but tailwind did update their. documentation, on how to setup tailwind with nuxt 3: tailwindcss.com/docs/guides/nuxtjs#3\n- how can we modify this config though? tailwind config changes not being respected by nuxt\n- tailwindcss.nuxtjs.org/tailwind/…","metadata":{"transformedAt":"2026-08-18T18:33:42.907Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":28,"totalLines":241,"estimatedTokens":1745}}279{"id":"stack-66006053","source":"stackoverflow","questionId":66006053,"title":"How to import tailwindcss/colors?","tags":["laravel","tailwind-css"],"text":"Title: How to import tailwindcss/colors?\nTags: laravel, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to make the extended pallet work as outline in here\nhttps://tailwindcss.com/docs/customizing-colors#color-palette-reference\n\nI have installed tailwind, but only have the default colors.\n\nhttps://i.sstatic.net/8gVQT.png\n\nWhen I try and add the code with the `;` or without it doesn't work.\n\nhttps://i.sstatic.net/1kGEQ.png\n\nI than realized the file is missing.\n\nhttps://i.sstatic.net/qPEUl.png\n\nHow do you get this file? I know I have tailwind working because the regular color scheme works and all the other functionalities. I just can't seem to get the custom colors to work ,and I really don't want to manually add all of them if I can prevent it lol\n\nI am referring to these extended ones\n\nhttps://i.sstatic.net/BFVv3.png\n\nAny help much appreciated! :)\n\n========================================\n\nCode:\n```text\n;\n```\n\n```text\n{\n // .. other stuff\n\n \"devDependencies\": {\n \"@tailwindcss/forms\": \"^0.2.1\",\n \"@tailwindcss/typography\": \"^0.3.0\",\n // ... other packages\n \"tailwindcss\": \"^2.0.1\"\n }\n}\n```\n\n```js\nconst colors = require('tailwindcss/colors');\n\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n // Colors you want to add go here\n rose: colors.rose,\n cyan: colors.cyan\n }\n }\n }\n}\n```\n\n```text\nnode_modules\n```\n\n```text\n@tailwindcss\n```\n\n```text\ntailwindcss\n```\n\n```text\npackage.json\n```\n\n```text\ntailwindcss\n```\n\n```text\ncolors.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nextend\n```\n\n```text\ntheme\n```\n\n```text\nnpm run dev\n```\n\n========================================\n\nComments:\n- what if this were an npm package and we also want these custom colors to be usable in consumer apps? also want intellisense to work","metadata":{"transformedAt":"2026-08-18T18:33:42.907Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":108,"estimatedTokens":454}}280{"id":"stack-70557911","source":"stackoverflow","questionId":70557911,"title":"Keep same icon size with flex box responsive","tags":["html","css","reactjs","tailwind-css"],"text":"Title: Keep same icon size with flex box responsive\nTags: html, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a problem with my tuner, I try to keep the same size arrow, but when I reduce the resolution the arrow becomes smaller\n\n```\n\n toggle(index)} key={index} className=\"bg-[#8e9fbc] rounded text-white font-bold flex justify-between items-center cursor-pointer p-5\">\n {item.question}\n {clicked === index ? () :}\n \n \n {clicked === index ? ( {item.reponse}) : null} \n```\n\nhttps://i.sstatic.net/IHl1i.png\n\nCan you help me? Thank you!\n\n========================================\n\nCode:\n```text\n<div className=\"shadow rounded my-5\">\n <div onClick={() => toggle(index)} key={index} className=\"bg-[#8e9fbc] rounded text-white font-bold flex justify-between items-center cursor-pointer p-5\">\n <span>{item.question}</span>\n {clicked === index ? (<ChevronDownIcon className=\"w-6 \"/>) :<ChevronRightIcon className=\"w-6 \"/>}\n \n </div>\n {clicked === index ? (<div className=\"p-5\"> {item.reponse}</div>) : null} </div>\n```\n\n```text\nflex-shrink: 0;\n```\n\n========================================\n\nComments:\n- The Tailwind utility class is `shrink-0`.","metadata":{"transformedAt":"2026-08-18T18:33:42.907Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":42,"estimatedTokens":301}}281{"id":"stack-70054408","source":"stackoverflow","questionId":70054408,"title":"Tailwind css with flex layout with truncated text","tags":["css","flexbox","tailwind-css"],"text":"Title: Tailwind css with flex layout with truncated text\nTags: css, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\ni created a page layout with tailwind css with help of the flex utilities. Now i struggle with one issue.\n\nOn the right side there is a header section with title and description.\n\nI want now that the description is never taking more than 100% of the width and automatically truncates the text if it has more.\n\nI prepared a working example to demonstrate my problem:\n\n\r\n\r\n\n```\n\n A\n SB\n \n \n \n \n\n### Title\n\n \n\n### Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element\n\n \n ...\n \n \n\n```\n\n\r\n\r\n\r\n\nIt would be super nice if someone could help my by solving this problem.\n\nMany thanks in advance\n\nKai\n\n========================================\n\nTop Answer:\nI suggest you\nuse overflow-ellipsis together overflow-hidden, that will help you description is never taking more than 100% of the width, even help for responsive design on the tablet mode(768px) easily\n\n```\n\n \n\n### Title\n\n \n\n### Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element\n\n```\n\nI hope helped you\n\n========================================\n\nCode:\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div class=\"flex bg-blue-100 h-screen\">\n <div class=\"bg-green-100 w-16 flex-none\">A</div>\n <div class=\"bg-blue-100 w-96 flex-none\">SB</div>\n <div class=\"bg-red-100 flex-auto\">\n <div class=\"flex flex-col\">\n <div class=\"flex flex-col space-y-2 bg-pink-100 p-3\">\n <h1 class=\"bg-yellow-100\">Title</h1>\n <h2 class=\"bg-yellow-200 truncate\">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>\n </div>\n <div class=\"bg-pink-200 p-3\">...</div>\n </div>\n </div>\n</div>\n```\n\n```text\n<div class=\"flex bg-blue-100 h-screen\">\n <div class=\"bg-green-100 w-16 flex-none\">A</div>\n <div class=\"bg-blue-100 w-96 flex-none\">SB</div>\n <div class=\"bg-red-100 flex-auto overflow-hidden\">\n <div class=\"flex flex-col\">\n <div class=\"flex flex-col space-y-2 bg-pink-100 p-3\">\n <h1 class=\"bg-yellow-100\">Title</h1>\n <h2 class=\"bg-yellow-200 truncate\">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>\n </div>\n <div class=\"bg-pink-200 p-3\">...</div>\n </div>\n </div>\n</div>\n```\n\n```text\n<div class=\"flex flex-col space-y-2 bg-pink-100 p-3 \">\n <h1 class=\"bg-yellow-100\">Title</h1>\n <h2 class=\"bg-yellow-200 overflow-clip overflow-hidden\">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>\n</div>\n```\n\n========================================\n\nComments:\n- This was easier than expected. Thank you so much Nico","metadata":{"transformedAt":"2026-08-18T18:33:42.907Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":3,"totalLines":116,"estimatedTokens":743}}282{"id":"stack-70716659","source":"stackoverflow","questionId":70716659,"title":"Nuxt \"npm run dev\" build loop after setting up Tailwind CSS v3","tags":["nuxt.js","tailwind-css","postcss"],"text":"Title: Nuxt \"npm run dev\" build loop after setting up Tailwind CSS v3\nTags: nuxt.js, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI followed these steps from the Tailwind docs to add Tailwind CSS v3 to my Nuxt.js v2.15.8 project. Now, when I save a file while having `npm run dev` running, I get stuck in a rebuilding loop. It keeps building successfully, but then claiming that some random number was just updated so it rebuilds. I have to use Control + C to get it to exit.\n\n```\n↻ Updated components/Comment.vue 21:08:59\n\n✔ Client\n Compiled successfully in 1.86s\n\n✔ Server\n Compiled successfully in 1.49s\n\n↻ Updated 1642194543006 \n\n✔ Client\n Compiled successfully in 1.14s\n\n✔ Server\n Compiled successfully in 1.62s \n\n↻ Updated 1642194545447\n\n✔ Client\n Compiled successfully in 1.13s\n\n✔ Server\n Compiled successfully in 947.08ms\n\n↻ Updated 1642194547991\n\n...\n```\n\nDoes anyone know what might be causing this? The only 2 things I added to \"nuxt.config.js\" are below, directly out of the Tailwind CSS documentation.\n\n```\n// nuxt.config.js\n\nbuildModules: [\n // ...\n '@nuxt/postcss8',\n],\n// ...\nbuild: {\n // ...\n postcss: {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n },\n}\n```\n\n```\n// tailwind.config.js\n\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n content: [\n './components/**/*.{js,vue,ts}',\n './layouts/**/*.vue',\n './pages/**/*.vue',\n './plugins/**/*.{js,ts}',\n './nuxt.config.{js,ts}',\n ],\n theme: {\n screens: {\n xxs: '360px',\n xs: '480px',\n ...defaultTheme.screens,\n },\n extend: {\n colors: {\n 'blue-100': '#8ac7f9',\n 'blue-150': '#72bbf7',\n 'blue-200': '#5bb0f6',\n 'blue-300': '#43a5f5',\n 'blue-400': '#2c99f3',\n 'blue-500': '#148ef2',\n 'blue-600': '#1280da',\n 'blue-700': '#1072c2',\n 'blue-800': '#0e63a9',\n 'blue-900': '#0c5591',\n },\n },\n },\n plugins: [],\n}\n```\n\n========================================\n\nTop Answer:\nI've solve the problem with the following steps:\n\n- Remove nuxt/tailwind module\n\n- the instructions for Tailwind 3 setup with Nuxt in the official documentation\n\n- Check your buildModules in nuxt.config, **remove '@nuxtjs/eslint-module'** and add '@nuxt/postcss8'\n\n- yarn clean\n\n- yarn install\n\n========================================\n\nCode:\n```text\n↻ Updated components/Comment.vue 21:08:59\n\n✔ Client\n Compiled successfully in 1.86s\n\n✔ Server\n Compiled successfully in 1.49s\n\n↻ Updated 1642194543006 \n\n✔ Client\n Compiled successfully in 1.14s\n\n✔ Server\n Compiled successfully in 1.62s \n\n↻ Updated 1642194545447\n\n✔ Client\n Compiled successfully in 1.13s\n\n✔ Server\n Compiled successfully in 947.08ms\n\n↻ Updated 1642194547991\n\n...\n```\n\n```text\n// nuxt.config.js\n\nbuildModules: [\n // ...\n '@nuxt/postcss8',\n],\n// ...\nbuild: {\n // ...\n postcss: {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n },\n}\n```\n\n```text\n// tailwind.config.js\n\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n content: [\n './components/**/*.{js,vue,ts}',\n './layouts/**/*.vue',\n './pages/**/*.vue',\n './plugins/**/*.{js,ts}',\n './nuxt.config.{js,ts}',\n ],\n theme: {\n screens: {\n xxs: '360px',\n xs: '480px',\n ...defaultTheme.screens,\n },\n extend: {\n colors: {\n 'blue-100': '#8ac7f9',\n 'blue-150': '#72bbf7',\n 'blue-200': '#5bb0f6',\n 'blue-300': '#43a5f5',\n 'blue-400': '#2c99f3',\n 'blue-500': '#148ef2',\n 'blue-600': '#1280da',\n 'blue-700': '#1072c2',\n 'blue-800': '#0e63a9',\n 'blue-900': '#0c5591',\n },\n },\n },\n plugins: [],\n}\n```\n\n```text\nnpm run dev\n```\n\n```text\nmodule.exports = {\n content: [\n './nuxt.config.{js,ts}',\n ]\n}\n```\n\n```text\nmodule.exports = {\n content: [\n './nuxt.config.js',\n './nuxt.config.ts'\n ]\n}\n```\n\n========================================\n\nComments:\n- What about tailwind config? Have you configured it?\n- @Danila Yes, it is configured. Added it to the bottom of the original question.\n- And you installed `postcss@latest` and `autoprefixer@latest`? **latest** might be the key, because Nuxt uses not latest versions by default. You can also try to move plugins or buildModules around, maybe it should be first or something\n- I tried playing around with removing everything, then just installing \"@nuxt/postcss8\" and I am still seeing the issue, so I don't think it is `@latest` related.\n- Same here, with almost identical configuration.\n- @Wonderman I didn't solve the issue, but but what I did find, is that Tailwind v3 is conflicting with the ESLint module in Nuxt. Are you using the ESLint module? If so, try disabling it and it should build correctly. For the time being, I am just using ESLint via VS Code. Don't need it as a built in build tool.\n- This works, but it would've been useful to explain and state what your findings were rather than just posting simple steps. It seems like there is a conflict between `@nuxtjs/tailwind` and `@nuxtjs/eslint-module`. As it was already stated in the comments, I don't think I need `@nuxtjs/eslint-module`, so I just removed it.\n- You just saved my life! I had first attempts to update whole project with multiple dependecies last month, but literally gave up, bc i was not able to find the source of this evil endless build loop. Today another attempt, and by accident found out it was a tailwind issue. Your answer is first result on my google search. much love!\n- for me is not working :(","metadata":{"transformedAt":"2026-08-18T18:33:42.907Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":234,"estimatedTokens":1385}}283{"id":"stack-60567333","source":"stackoverflow","questionId":60567333,"title":"String together responsive classes in TailwindCSS","tags":["html","css","responsive","tailwind-css"],"text":"Title: String together responsive classes in TailwindCSS\nTags: html, css, responsive, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've been trying to Google this, but I'm either not using the right terms or nobody has asked my question yet.\n\n**Question:** Is there a way to stack responsive classes in TailwindCSS? What I'd like to do is change something like:\n\n`class=\"grid gap-12 md:grid-cols-2 md:col-gap-12 md:py-16 lg:grid-cols-3 lg:py-12\"`\n\nInto something more like:\n\n`class=\"grid gap-12 md:grid-cols-2:col-gap-12:py-16 lg:grid-cols-3:py-12\"`\n\nI realize that it does not cut down that much in line length, but to me it just seems a little more sane grouping the responsive classes together. I'm new to TailwindCSS and just wanted to ask if this was possible.\n\n========================================\n\nTop Answer:\nThis is actually something that is addressed in Windi.css, you can use group variants like this:\n\n```\ntext-blue md:text-green lg:(p-2 m-2 text-red-400)\n```\n\nAt the moment, it doesn't look as though tailwind has added this in, but I would be very surprised if they don't get round to doing so soon. Being able to ground breakpoints really helps keeping you class lists tidy... especially when tailwind can lead to some long, long lists.\n\nCheck out Windi if you have the chance, it's a good project, but I do think Tailwind will be introducing most of their (good) features before long.\n\n========================================\n\nCode:\n```text\nclass=\"grid gap-12 md:grid-cols-2 md:col-gap-12 md:py-16 lg:grid-cols-3 lg:py-12\"\n```\n\n```text\nclass=\"grid gap-12 md:grid-cols-2:col-gap-12:py-16 lg:grid-cols-3:py-12\"\n```\n\n```text\nTailwind.css\n```\n\n```text\nmd:grid-cols-2:col-gap-12:py-1\n```\n\n```text\nmd\n```\n\n```text\nmd\n```\n\n```text\ntext-blue md:text-green lg:(p-2 m-2 text-red-400)\n```\n\n```css\n@media screen(md) {\n /* css to be overriden for >md screens */ \n}\n```\n\n```css\n@screen md {\n /* css to be overriden for >md screens */\n}\n```\n\n```text\nscreen\n```\n\n```js\nexport default {\n // ...\n plugins: [\n require('tailwindcss/plugin')(({ matchUtilities }) => {\n matchUtilities({\n 'group': (value) => ({\n [`@apply ${value.replaceAll(',', ' ')}`]: {}\n })\n })\n })\n ]\n}\n```\n\n```text\n{/* then */}\n<section className='text-[#f00] text-[25px] font-semibold md:text-[#0f0] md:text-[36px] md:font-bold'>\n {...}\n</section>\n\n{/* now */}\n<section className='text-[#f00] text-[25px] font-semibold md:group-[text-[#0f0],text-[36px],font-bold]'>\n {...}\n</section>\n```\n\n```text\n<div class=\"md:group-[grid-cols-2,col-gap-12,py-16]\">\n```\n\n========================================\n\nComments:\n- Shared an answer around a similar question like this here: stackoverflow.com/a/75265918/17741068\n- Update: there is a discussion on the github repo that might be worth keeping an eye on if you are interested in this.","metadata":{"transformedAt":"2026-08-18T18:33:42.907Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":113,"estimatedTokens":713}}284{"id":"stack-71718228","source":"stackoverflow","questionId":71718228,"title":"How to resolve Tailwind and Bootstrap conflicts in an Angular project","tags":["css","user-interface","bootstrap-4","tailwind-css"],"text":"Title: How to resolve Tailwind and Bootstrap conflicts in an Angular project\nTags: css, user-interface, bootstrap-4, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using Tailwind CSS and Bootstrap (ngx-bootstrap) in the same Angular project. For the most part, they play along nicely. However, when it comes to padding and margins, they fight like siblings. I want to use Tailwind for padding because it is consistent. For example, the class `p-X` is X times 0.25 rem but with bootstrap, it is all over the place. The annoying thing is that Bootstrap puts `!important` everywhere.\n\n`utilities.css` comes from Tailwind and `_spacing.scss` comes from Bootstrap.\n\nhttps://i.sstatic.net/wEXS8.png\n\nhttps://i.sstatic.net/fnIAv.png\n\nhttps://i.sstatic.net/tIO1N.png\n\nIs there a convenient way to solve this?\n\n========================================\n\nTop Answer:\nWhen you use both **bootstrap** and **tailwind-css** at the same time, you will face naming conflicts which will lead to undefined behavior ,\n\nThere are two ways to overcome .\n\nFirst way is to solve is by using `prefix option` in your\n`tailwind.config.css` file\n\n```\n// tailwind.config.js\n module.exports = {\n prefix: 'tw-',\n }\n```\n\nSo now you can use the prefix `tw-` before the class name of tailwind-css which wont break any of your existing styles.\n\n- If you are facing problem in changing of the overall changes caused by adding `tailwind-css` to the existing `bootstrap` project setting off the `preflight` of tailwind-css would be preferred.\n\nPreflight by default in their projects which is an opinionated set of base styles.\n\nAnd this is build on top of modern-normalize\n\nAnd Tailwind automatically injects these styles in `@tailwind base`.\n\nSo to overcome this .Remove `@tailwind base` from the css file or Add `preflight: false,`\n\n```\nmodule.exports = {\n corePlugins: {\n preflight: false,\n }\n}\n```\n\nHope it helps!\n\n========================================\n\nCode:\n```text\np-X\n```\n\n```text\n!important\n```\n\n```text\nutilities.css\n```\n\n```text\n_spacing.scss\n```\n\n```text\nmodule.exports = {\n prefix: 'tw-',\n}\n```\n\n```text\nmodule.exports = {\n important: true,\n}\n```\n\n```text\nprefix\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n!important\n```\n\n```text\nimportant\n```\n\n```text\nimportant\n```\n\n```text\n// tailwind.config.js\n module.exports = {\n prefix: 'tw-',\n }\n```\n\n```text\nmodule.exports = {\n corePlugins: {\n preflight: false,\n }\n}\n```\n\n```text\nprefix option\n```\n\n```text\ntailwind.config.css\n```\n\n```text\ntw-\n```\n\n```text\ntailwind-css\n```\n\n```text\nbootstrap\n```\n\n```text\npreflight\n```\n\n```text\n@tailwind base\n```\n\n```text\n@tailwind base\n```\n\n```text\npreflight: false,\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n // ...\n important: '#app',\n}\n```\n\n```html\n<html>\n<!-- ... -->\n<style>\n .high-specificity .nested .selector {\n color: blue;\n }\n</style>\n<body id=\"app\">\n <div class=\"high-specificity\">\n <div class=\"nested\">\n <!-- Will be red-500 -->\n <div class=\"selector text-red-500\"><!-- ... --></div>\n </div>\n </div>\n\n <!-- Will be #bada55 -->\n <div class=\"text-red-500\" style=\"color: #bada55;\"><!-- ... --></div>\n</body>\n</html>\n```\n\n```html\n<p class=\"!font-medium font-bold\">\n This will be medium even though bold comes later in the CSS.\n</p>\n```\n\n```text\n!important\n```\n\n```text\nimportant\n```\n\n```text\ntrue\n```\n\n```text\n!important\n```\n\n```text\nimportant\n```\n\n```text\n#app\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n!important\n```\n\n```text\nimportant\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nid\n```\n\n```text\napp\n```\n\n```text\n!\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.907Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":38,"totalLines":245,"estimatedTokens":895}}285{"id":"stack-60932918","source":"stackoverflow","questionId":60932918,"title":"The light effect in tailwind","tags":["tailwind-css"],"text":"Title: The light effect in tailwind\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow to implement the light effect in tailwind? Need the icon to shine.\n\nExample (watch first icon):\n\nenter image description here\n\nTried to make it through \"box-shadow\" changing the color of the shadow to white. The effect is not like i wanted: a shadow is formed on the borders of the icon. \n\nCurrently implemented via css:\n\n```\n.box-shadow-hover:hover {\n filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.50));\n }\n```\n\nIs this possible in tailwind ?\n\n========================================\n\nTop Answer:\nFor anyone want just quick copy here is add this to tailwind config\n\n-> https://tailwindcss.com/docs/theme\n\n```\nextend: {\n dropShadow: {\n glow: [\n \"0 0px 20px rgba(255,255, 255, 0.35)\",\n \"0 0px 65px rgba(255, 255,255, 0.2)\"\n ]\n }\n}\n```\n\n========================================\n\nCode:\n```text\n.box-shadow-hover:hover {\n filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.50));\n }\n```\n\n```text\ntailwind\n```\n\n```js\nextend: {\n dropShadow: {\n glow: [\n \"0 0px 20px rgba(255,255, 255, 0.35)\",\n \"0 0px 65px rgba(255, 255,255, 0.2)\"\n ]\n }\n}\n```\n\n========================================\n\nComments:\n- Does this answer your question? Use colored Box Shadow in Tailwind CSS for NProgress Glow effect?\n- In tailwind the shadow does not interact well with the icons. Either I do something wrong. Thank you for your answer\n- For those 'one offs' no need to extend now although for a button you probably want to define it. Arbitrary values can now be applied inline if need be: tailwindcss.com/docs/box-shadow#arbitrary-values","metadata":{"transformedAt":"2026-08-18T18:33:42.907Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":3,"totalLines":71,"estimatedTokens":407}}286{"id":"stack-63858991","source":"stackoverflow","questionId":63858991,"title":"How to setup Tailwind for a new Angular project?","tags":["javascript","angular","webpack","angular-cli","tailwind-css"],"text":"Title: How to setup Tailwind for a new Angular project?\nTags: javascript, angular, webpack, angular-cli, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to create a new Angular project using Tailwind CSS. My current CLI version is 10.1.1. Things I have done so far:\n\n- Create a new app using `ng new my-app`\n\n- Use Angular routing => yes\n\n- Use SCSS as the stylesheet\n\n- In the root directory of the project run `npm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D`\n\n- In the src folder there is a **styles.scss** file, modify it to\n\n.\n\n```\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\n- In the root directory of the project run `npx tailwind init`\n\n- In the root directory of the project create a new file **webpack.config.js** with the following content\n\n.\n\n```\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.scss$/,\n loader: \"postcss-loader\",\n options: {\n ident: \"postcss\",\n syntax: \"postcss-scss\",\n plugins: () => [\n require(\"postcss-import\"),\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ],\n },\n },\n ],\n },\n};\n```\n\nIn the root directory there is a **Angular.json** file\n\nSearch for the key projects => my-app => architect => build\n\n- Change the builder to `\"builder\": \"@angular-builders/custom-webpack:browser\",`\n\n- Add to the options\n\n.\n\n```\n\"customWebpackConfig\": {\n \"path\": \"./webpack.config.js\"\n},\n```\n\nSearch for the key projects => my-app => architect => serve\n\n- Change the builder to `\"builder\": \"@angular-builders/custom-webpack:dev-server\",`\n\n- Add to the options\n\n.\n\n```\n\"customWebpackConfig\": {\n \"path\": \"./webpack.config.js\"\n},\n```\n\n- Run the app with `ng serve` from the app's root directory\n\nI'm getting this error\n\nERROR in ./src/styles.scss\n(./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/postcss-loader/dist/cjs.js??postcss!./src/styles.scss)\nModule build failed (from ./node_modules/postcss-loader/dist/cjs.js):\nValidationError: Invalid options object. PostCSS Loader has been\ninitialized using an options object that does not match the API\nschema.\n\noptions has an unknown property 'plugins'. These properties are valid: object { postcssOptions?, execute?, sourceMap? }\nat validate (/.../my-app/node_modules/schema-utils/dist/validate.js:98:11)\nat Object.loader (/.../my-app/node_modules/postcss-loader/dist/index.js:43:28)\n\nERROR in Module build failed (from\n./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid\noptions object. PostCSS Loader has been initialized using an options\nobject that does not match the API schema.\n\n- same text as above\n\nHow can I setup Tailwind correctly?\n\n========================================\n\nTop Answer:\nI have found the answer after banging my head everywhere today, change your webpack.config.js to,\n\n```\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.scss$/,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n ident: \"postcss\",\n syntax: \"postcss-scss\",\n plugins: [\n require(\"postcss-import\"),\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ],\n },\n },\n },\n ],\n },\n};\n```\n\nThere is small change, plugins now take array instead of function.\nThanks in advance 😉.\n\nIf anyone is still running into issue, checkout this blog I've written on Angular 10 + Tailwind CSS 👇\n\nhttps://fullyunderstood.com/get-started-with-angular-tailwind-css/\n\n========================================\n\nCode:\n```text\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\n```text\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.scss$/,\n loader: \"postcss-loader\",\n options: {\n ident: \"postcss\",\n syntax: \"postcss-scss\",\n plugins: () => [\n require(\"postcss-import\"),\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ],\n },\n },\n ],\n },\n};\n```\n\n```text\n\"customWebpackConfig\": {\n \"path\": \"./webpack.config.js\"\n},\n```\n\n```text\n\"customWebpackConfig\": {\n \"path\": \"./webpack.config.js\"\n},\n```\n\n```text\nng new my-app\n```\n\n```text\nnpm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D\n```\n\n```text\nnpx tailwind init\n```\n\n```text\n\"builder\": \"@angular-builders/custom-webpack:browser\",\n```\n\n```text\n\"builder\": \"@angular-builders/custom-webpack:dev-server\",\n```\n\n```text\nng serve\n```\n\n```text\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\n```text\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.scss$/,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n ident: \"postcss\",\n syntax: \"postcss-scss\",\n plugins: [\n require(\"postcss-import\"),\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ],\n },\n },\n },\n ],\n },\n};\n```\n\n```text\nError: true is not a PostCSS plugin\n```\n\n```text\nError: Failed to find '~@angular/material/theming'\n```\n\n```text\ntest: /tailwind\\.scss$/\n```\n\n```html\n<body class=\"dark\">\n <app-root></app-root>\n</body>\n```\n\n```css\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\n```text\nng add @ngneat/tailwind\n```\n\n```text\nclass\n```\n\n```text\nYes\n```\n\n```text\nforms\n```\n\n```text\ntypography\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nwebpack.config.js\n```\n\n```text\ndark\n```\n\n```text\nindex.html\n```\n\n```text\nstyles.scss\n```\n\n========================================\n\nComments:\n- Maybe this is easier: trungk18.com/experience/configure-tailwind-css-with-angular\n- thanks but I would like to avoid installing a tool to use another tool\n- I can reproduce that on my machine\n- Hey, thanks a lot for your reply! That solved one error, but there is still one left. I will post it in the next comment\n- `ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_mod‌​ules/@angular-devkit‌​/build-angular/node_‌​modules/postcss-load‌​er/src??embedded!./n‌​ode_modules/resolve-‌​url-loader??ref--13-‌​3!./node_modules/sas‌​s-loader/dist/cjs.js‌​??ref--13-4!./node_m‌​odules/postcss-loade‌​r/dist/cjs.js??ref--‌​17!./src/styles.scss‌​) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: Failed to find 'tailwind/base' in [ /.../my-app/src ] at /.../my-app/node_modules/postcss-import/lib/resolve-id.js:35‌​:13`\n- but as I mentioned in the question I'm importing `tailwind/base` in the styles.scss file\n- I also tested it on another fresh installed machine, I get the same error\n- Hi, Thanks for your answer. It resolved my issue. But the CSS is not working on the website.\n- while I can reproduce the errors your solution unforunately only fixes one error, as the OP already mentioned\n- Assuming the project is scss – for me using postcss v8.x worked, i didn't need the other steps.\n- I was searching for a solution for hours you third step just save me thanks !\n- Given that the dev.to article was authored by \"Pato\", who says they are \"Google Developer Expert on Angular and Web Technologies\" and this answer's author profile (Patricio) says they are \"Google Developer Expert on Angular and Web Technologies\", I'm inclined to believe it's one and the same person, and just needs to disclose that fact more directly.","metadata":{"transformedAt":"2026-08-18T18:33:42.907Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":27,"totalLines":319,"estimatedTokens":1959}}287{"id":"stack-48272554","source":"stackoverflow","questionId":48272554,"title":"How to get Tailwind.css working with Gatsby.js?","tags":["css","gatsby","tailwind-css"],"text":"Title: How to get Tailwind.css working with Gatsby.js?\nTags: css, gatsby, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHas anyone managed to get Tailwind.css working with Gatsby.js?\n\nConfiguring postCSS plugins with Gatsby is a bit tricky... If anyone has managed to get Tailwind up and running with Gatsby, I'd love to know how!\n\n========================================\n\nTop Answer:\nAs a supplement to morgler's answer, here is a similar solution I ended up with (which includes Sass and PurgeCSS). \n\nI went with a CLI solution because `gatsby-plugin-postcss-sass` currently runs PostCSS before Sass (which breaks Tailwind), and Gatsby's PostCSS plugins are a bit difficult to configure via Webpack at the moment. \n\nI included Sass so I can break `main.sass` into more manageable partials, and added PurgeCSS so I can remove any unused Tailwinds classes in production. I've found that PurgeCSS is more effective than PurifyCSS, which is why I opted not to use `gatsby-plugin-purify-css`.\n\nTo begin, create a `src/styles` folder with the following structure (feel free to customize this for your project and adapt the settings below accordingly):\n\n```\nsrc/\n styles/\n builds/\n after-postcss/\n main.css\n after-purgecss/\n main.css\n after-sass/\n main.css\n // other subfolders for sass partials...\n main.sass\n```\n\nInstall the necessary dependencies:\n\n`npm i node-sass-chokidar postcss-cli purgecss`\n\nAdd the following to `gatsby-node.js` (to disable Gatsby's default PostCSS plugins):\n\n```\nconst ExtractTextPlugin = require('extract-text-webpack-plugin')\n\nexports.modifyWebpackConfig = ({ config, stage }) => {\n switch (stage) {\n case 'develop':\n // Remove postcss from Gatsby's dev process:\n config.removeLoader(`css`)\n config.loader(`css`, {\n test: /\\.css$/,\n loaders: [`style`, `css`]\n })\n\n break\n\n case 'build-css':\n // Remove postcss from Gatsby's build process:\n config.removeLoader(`css`)\n config.loader(`css`, {\n test: /after-purgecss\\/main\\.css/,\n loader: ExtractTextPlugin.extract([`css?minimize`])\n })\n\n break\n }\n return config\n}\n```\n\nAdd a `postcss.config.js` file to the project root:\n\n```\nconst tailwind = require('tailwindcss')\nconst cssnext = require('postcss-cssnext')\n\nmodule.exports = {\n plugins: [\n // your file's name or path may differ:\n tailwind('./src/styles/tailwind.config.js'), \n cssnext()\n // add any other postcss plugins you like...\n ]\n}\n```\n\nAdd the following scripts to `package.json`:\n\n```\n\"scripts\": {\n \"watch:sass\": \"node-sass-chokidar --source-map true src/styles/main.sass -o src/styles/builds/after-sass -w\",\n \"watch:postcss\": \"postcss src/styles/builds/after-sass/main.css -o src/styles/builds/after-postcss/main.css -w\",\n \"watch:styles\": \"npm run watch:sass & npm run watch:postcss\",\n \"build:sass\": \"node-sass-chokidar src/styles/main.sass -o src/styles/builds/after-sass\",\n \"build:postcss\": \"postcss src/styles/builds/after-sass/main.css -o src/styles/builds/after-postcss/main.css\",\n \"build:purgecss\":\n \"purgecss --css src/styles/builds/after-postcss/main.css --con public/index.html src/**/*.js -o src/styles/builds/after-purgecss\",\n \"build:styles\": \"npm run build:sass && npm run build:postcss && npm run build:purgecss\",\n \"develop\": \"gatsby develop & npm run watch:styles\",\n \"build\": \"npm run build:styles && gatsby build\"\n // ...\n},\n```\n\nIn development, run `npm run develop` instead of `gatsby develop`. The `watch:` scripts will run Sass + PostCSS (in that order) whenever a change is made to `main.sass` or any of its imports.\n\nTo build the site, run `npm run build` instead of `gatsby build`. The `build:` scripts will run Sass + PostCSS (without the watch tasks) + PurgeCSS (in that order).\n\nAdd the following to `layouts/index.js` to import the `after-postcss` version of `main.css` during development and the `after-purgecss` version during production:\n\n```\nswitch (process.env.NODE_ENV) {\n case `development`:\n require('../styles/builds/after-postcss/main.css')\n break\n case `production`:\n require('../styles/builds/after-purgecss/main.css')\n break\n}\n```\n\nHope that helps someone! If anyone knows how to convert this into a Webpack equivalent that works with Gatsby, please feel free to post it here.\n\n========================================\n\nCode:\n```text\nconst tailwindcss = require('tailwindcss');\nmodule.exports = {\n plugins: [\n tailwindcss('./tailwind.js'),\n require('autoprefixer'),\n ],\n};\n```\n\n```text\n\"scripts\": {\n \"build:css\": \"postcss src/layouts/index.css -o src/layouts/generated.css\",\n \"watch:css\": \"postcss src/layouts/index.css -o src/layouts/generated.css -w\",\n \"build\": \"npm run build:css && gatsby build\",\n \"develop\": \"npm run watch:css & gatsby develop\",\n ...\n}\n```\n\n```text\nnpm install autoprefixer postcss-cli\n```\n\n```text\npostcss.config.js\n```\n\n```text\npackage.json\n```\n\n```text\nsrc/\n styles/\n builds/\n after-postcss/\n main.css\n after-purgecss/\n main.css\n after-sass/\n main.css\n // other subfolders for sass partials...\n main.sass\n```\n\n```text\nconst ExtractTextPlugin = require('extract-text-webpack-plugin')\n\nexports.modifyWebpackConfig = ({ config, stage }) => {\n switch (stage) {\n case 'develop':\n // Remove postcss from Gatsby's dev process:\n config.removeLoader(`css`)\n config.loader(`css`, {\n test: /\\.css$/,\n loaders: [`style`, `css`]\n })\n\n break\n\n case 'build-css':\n // Remove postcss from Gatsby's build process:\n config.removeLoader(`css`)\n config.loader(`css`, {\n test: /after-purgecss\\/main\\.css/,\n loader: ExtractTextPlugin.extract([`css?minimize`])\n })\n\n break\n }\n return config\n}\n```\n\n```text\nconst tailwind = require('tailwindcss')\nconst cssnext = require('postcss-cssnext')\n\nmodule.exports = {\n plugins: [\n // your file's name or path may differ:\n tailwind('./src/styles/tailwind.config.js'), \n cssnext()\n // add any other postcss plugins you like...\n ]\n}\n```\n\n```text\n\"scripts\": {\n \"watch:sass\": \"node-sass-chokidar --source-map true src/styles/main.sass -o src/styles/builds/after-sass -w\",\n \"watch:postcss\": \"postcss src/styles/builds/after-sass/main.css -o src/styles/builds/after-postcss/main.css -w\",\n \"watch:styles\": \"npm run watch:sass & npm run watch:postcss\",\n \"build:sass\": \"node-sass-chokidar src/styles/main.sass -o src/styles/builds/after-sass\",\n \"build:postcss\": \"postcss src/styles/builds/after-sass/main.css -o src/styles/builds/after-postcss/main.css\",\n \"build:purgecss\":\n \"purgecss --css src/styles/builds/after-postcss/main.css --con public/index.html src/**/*.js -o src/styles/builds/after-purgecss\",\n \"build:styles\": \"npm run build:sass && npm run build:postcss && npm run build:purgecss\",\n \"develop\": \"gatsby develop & npm run watch:styles\",\n \"build\": \"npm run build:styles && gatsby build\"\n // ...\n},\n```\n\n```text\nswitch (process.env.NODE_ENV) {\n case `development`:\n require('../styles/builds/after-postcss/main.css')\n break\n case `production`:\n require('../styles/builds/after-purgecss/main.css')\n break\n}\n```\n\n```text\ngatsby-plugin-postcss-sass\n```\n\n```text\nmain.sass\n```\n\n```text\ngatsby-plugin-purify-css\n```\n\n```text\nsrc/styles\n```\n\n```text\nnpm i node-sass-chokidar postcss-cli purgecss\n```\n\n```text\ngatsby-node.js\n```\n\n```text\npostcss.config.js\n```\n\n```text\npackage.json\n```\n\n```text\nnpm run develop\n```\n\n```text\ngatsby develop\n```\n\n```text\nwatch:\n```\n\n```text\nmain.sass\n```\n\n```text\nnpm run build\n```\n\n```text\ngatsby build\n```\n\n```text\nbuild:\n```\n\n```text\nlayouts/index.js\n```\n\n```text\nafter-postcss\n```\n\n```text\nmain.css\n```\n\n```text\nafter-purgecss\n```\n\n```js\nmodule.exports = {\n mode: \"jit\",\n purge: [\n \"./src/pages/**/*.{js,ts,jsx,tsx}\",\n \"./src/components/**/*.{js,ts,jsx,tsx}\",\n ],\n```\n\n```js\n\"scripts\": {\n \"develop\": \"gatsby develop\",\n \"start\": \"gatsby develop\",\n \"build\": \"gatsby build\",\n \"serve\": \"gatsby serve\",\n \"clean\": \"gatsby clean\",\n \"tw:build\": \"tailwindcss build ./src/styles/global.css -o ./public/styles/global.css\",\n \"tw:prod\": \"cross-env NODE_ENV=production postcss build ./src/styles/global.css -o ./public/styles/global.css\",\n \"tw:watch\": \"onchange \\\"tailwind.config.js\\\" \\\"src/**/*.css\\\" -- npm run tw:build\"\n },\n```\n\n```js\nconst cssnano = require(\"cssnano\");\n\nmodule.exports = {\n plugins: [\n require(\"tailwindcss\"),\n cssnano({\n preset: \"default\",\n }),\n require(\"autoprefixer\"),\n ],\n};\n```\n\n```js\n\"devDependencies\": {\n \"autoprefixer\": \"^10.3.6\",\n \"gatsby-plugin-postcss\": \"^4.14.0\",\n \"postcss\": \"^8.3.9\",\n \"postcss-cli\": \"^9.0.1\",\n \"tailwindcss\": \"^2.2.17\"\n }\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n========================================\n\nComments:\n- There is a starter now for Gatsby Tailwind github.com/taylorbryant/gatsby-starter-tailwind\n- Great! Thanks for sharing that.\n- Thank you! I saw the same article yesterday and worked out a similar solution (posted below).\n- thanks! gatsby + tailwind is a very nice combo, and I was looking to add autoreload on tailwind.js file, now it is perfect\n- Heyo... This works during development... But it throws are error when building: ⠂ Building CSSThere were errors with your webpack config: [1] module.loaders.6.loader string.base , \"loader\" must be a string\n- huzzah! managed to get it working with a regular gatsby setup.... the hack is to install the latest version of postcss and postcss-loader: github.com/magicspon/gatsby-tailwind-hack-example\n- it's not quite there... `@apply` will only work in the main file... Not to worry, i'm mixing it up with styled components... Wooot\n- With Gatsby v2 and the new gatsby-plugin-postcss, it's now possible use Tailwinds with Gatsby without using the CLI tool. See my comment here for an updated approach.","metadata":{"transformedAt":"2026-08-18T18:33:42.908Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":34,"totalLines":381,"estimatedTokens":2443}}288{"id":"stack-68029040","source":"stackoverflow","questionId":68029040,"title":"Why is the custom color in tailwind not defined in NextJS production stage","tags":["next.js","tailwind-css"],"text":"Title: Why is the custom color in tailwind not defined in NextJS production stage\nTags: next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI created a custom color on tailwind in next js. On localhost the defined color appears fine, but when I deploy to vercel the color doesn't appear.\n\nhere's the picture localhost\n\nhttps://i.sstatic.net/OeeG9.png\n\nproduction in vercel\n\nhttps://i.sstatic.net/0CUZf.png\n\ntailwind.config.js\n\n```\nconst colors = require('tailwindcss/colors');\n\nmodule.exports = {\n purge: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}'\n ],\n darkMode: false, // or 'media' or 'class'\n theme: {\n colors: {\n transparent: 'transparent',\n current: 'currentColor',\n black: {\n DEFAULT: '#23232D'\n },\n white: colors.white,\n gray: {\n DEFAULT: '#A1A1A1',\n },\n ...\n }\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nButtonColor/index.js\n\n```\nimport PropTypes from 'prop-types';\nimport { motion } from 'framer-motion';\n\nfunction ButtonColor({ color, isOpen, onClick }) {\n\n const variants = {\n open: { width: '100%' },\n closed: { width: '50%' },\n }\n\n return (\n \n \n )\n}\n\nButtonColor.propTypes = {\n color: PropTypes.string.isRequired,\n isOpen: PropTypes.bool.isRequired,\n onClick: PropTypes.func.isRequired,\n}\n\nexport default ButtonColor;\n```\n\nAny solutions for this case? thanks.\n\n========================================\n\nCode:\n```text\nconst colors = require('tailwindcss/colors');\n\nmodule.exports = {\n purge: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}'\n ],\n darkMode: false, // or 'media' or 'class'\n theme: {\n colors: {\n transparent: 'transparent',\n current: 'currentColor',\n black: {\n DEFAULT: '#23232D'\n },\n white: colors.white,\n gray: {\n DEFAULT: '#A1A1A1',\n },\n ...\n }\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nimport PropTypes from 'prop-types';\nimport { motion } from 'framer-motion';\n\nfunction ButtonColor({ color, isOpen, onClick }) {\n\n const variants = {\n open: { width: '100%' },\n closed: { width: '50%' },\n }\n\n return (\n <motion.div\n className={`bg-${color} h-6 cursor-pointer`}\n onClick={onClick}\n animate={isOpen ? \"open\" : \"closed\"}\n variants={variants}\n >\n </motion.div>\n )\n}\n\nButtonColor.propTypes = {\n color: PropTypes.string.isRequired,\n isOpen: PropTypes.bool.isRequired,\n onClick: PropTypes.func.isRequired,\n}\n\nexport default ButtonColor;\n```\n\n```js\nclassName={`${color === 'red' ? 'bg-red' : 'bg-blue'} h-6 cursor-pointer`}\n```\n\n```css\n.button {\n @apply h-6;\n @apply cursor-pointer;\n &.red{\n @apply bg-red-700 dark:bg-red-900;\n @apply text-white;\n @apply hover:bg-red-800 dark:hover:bg-red-800;\n }\n &.gray {\n @apply bg-gray-300 dark:bg-gray-600;\n @apply text-gray-900 dark:text-gray-200;\n @apply hover:bg-gray-400 dark:hover:bg-gray-500;\n }\n}\n```\n\n```js\n<motion.button className=\"button\"> ...\n```\n\n```text\nCSS/SCSS\n```\n\n```text\nmotion.div\n```\n\n```text\nmotion.button\n```\n\n========================================\n\nComments:\n- Better enable JIT mode, then you won't get differences (due to Tailwind) between production and development builds.\n- Thanks @Sean! I am using the default Next setup that has CSS modules enabled and SCSS wasn't required. Perhaps it could be worth mentioning that SCSS is not the only option?","metadata":{"transformedAt":"2026-08-18T18:33:42.908Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":183,"estimatedTokens":843}}289{"id":"stack-75364475","source":"stackoverflow","questionId":75364475,"title":"Implementing a variable width in Tailwind CSS/NativeWind","tags":["javascript","react-native","tailwind-css"],"text":"Title: Implementing a variable width in Tailwind CSS/NativeWind\nTags: javascript, react-native, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to use a variable to create a progress bar by using two views and setting the width equal to a percentage of the parent view. I would like to do this using Tailwind's utility classes.\n\n```\n\n // this uses back ticks, which works for px values, but not percentage\n \n```\n\nI have tried adding % sign everywhere in the `className`, with no success. Obviously, it works if I use the `style` attribute, but ideally I would only use the `className` attribute.\n\n========================================\n\nCode:\n```js\n<View className='w-full h-10 bg-blue-500'>\n <View className={`w-[${percentage}] h-10 bg-blue-300`}/> // this uses back ticks, which works for px values, but not percentage\n <View/>\n```\n\n```text\nclassName\n```\n\n```text\nstyle\n```\n\n```text\nclassName\n```\n\n```text\npercentage\n```\n\n```text\nstyle\n```\n\n========================================\n\nComments:\n- Tailwind cannot detect dynamic classes. You'll want to use static classes instead tailwindcss.com/docs/content-configuration#dynamic-class-nam‌​es. Use the style property to apply the width in your use case.","metadata":{"transformedAt":"2026-08-18T18:33:42.908Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":48,"estimatedTokens":310}}290{"id":"stack-71100431","source":"stackoverflow","questionId":71100431,"title":"Change Next.js background color with TailwindCSS","tags":["reactjs","next.js","tailwind-css"],"text":"Title: Change Next.js background color with TailwindCSS\nTags: reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI recently started with Next.js and TailwindCSS and I wanted to change the background of my page. It is probably a really simple thing to do but I can't figure it out how to do. You can't add classes to the `body` tag in Next.js right? I tried to wrap the `Component` in the `_app.tsx` with a `div` but that is also wrapped inside a different `div`, so the background color isn't the full height.\n\nHow should I set the background color for my application and is it also possible to overrule it for a single page?\n\n========================================\n\nCode:\n```text\nbody\n```\n\n```text\nComponent\n```\n\n```text\n_app.tsx\n```\n\n```text\ndiv\n```\n\n```text\ndiv\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n body {\n @apply bg-slate-900;\n }\n}\n```\n\n```text\n// pages/_document.js\n\nimport { Html, Head, Main, NextScript } from 'next/document'\n\nconst Document = () => (\n <Html>\n <Head />\n <body className=\"bg-slate-900\">\n <Main />\n <NextScript />\n </body>\n </Html>\n)\n\nexport default Document\n```\n\n```text\nstyles/globals.css\n```\n\n========================================\n\nComments:\n- What would be the nicest solution? The custom Document or the Tailwind layer? I guess if it's pure for styling the layer would be nicest but if you would need also other things the Document would be better. What is your opinion?\n- @BartBergmans yeah I also think the same. There is no need to introduce custom document unless you already have it for some other reasons. The tailwind solution doesn't requires creating anything extra. One already has that globals file with `@tailwind` directives. Both are fine in my opinion. And yeah, with custom document, you can also selectively add some classes depending on which page you're rendering. So that might be a plus point for custom document. But it depends completely on your use case.\n- How to add classes depending on the page? The documentation about the custom Document is for the entire app right, not depening on what page you are on?\n- @BartBergmans Check that link to a comment.","metadata":{"transformedAt":"2026-08-18T18:33:42.908Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":73,"estimatedTokens":551}}291{"id":"stack-71725212","source":"stackoverflow","questionId":71725212,"title":"Transition max-height with TailwindCSS arbitrary values","tags":["css","css-transitions","tailwind-css"],"text":"Title: Transition max-height with TailwindCSS arbitrary values\nTags: css, css-transitions, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to animate the max-height of a div from 0 to 100% using Tailwind's arbitrary values feature, but it's not working:\n\n\r\n\r\n\n```\ndocument.getElementById(\"toggle\").addEventListener(\"click\", () => {\n document.getElementById(\"txt\").classList.toggle(\"max-h-full\");\n document.getElementById(\"txt\").classList.toggle(\"max-h-0\");\n});\n```\n\n\r\n\n```\n\nToggle text\n\n This is a text.\nThat can be collapsed.\nOr expanded.\nAnd so forth.\nEt cetera.\n\n```\n\n\r\n\r\n\r\n\nIt just collapses and expands instantly, without any transition of the `max-height`.\n\nThe weird thing is that I do see the right properties being set in the developer tools:\n\n```\ntransition-timing-function: cubic-bezier(0, 0, 0.2, 1);\ntransition-property: max-height;\ntransition-duration: 150ms;\n```\n\nPlus of course the `max-height`.\n\nWhat else do I need to set or configure to make it transition?\n\n========================================\n\nTop Answer:\nThis is working for me :\n\ntailwind.config.js\n\n```\ntheme: {\n extend: {\n transitionProperty: {\n 'max-height': 'max-height'\n }\n }\n}\n```\n\nAnd my classes\n\n```\n\n```\n\n========================================\n\nCode:\n```js\ndocument.getElementById(\"toggle\").addEventListener(\"click\", () => {\n document.getElementById(\"txt\").classList.toggle(\"max-h-full\");\n document.getElementById(\"txt\").classList.toggle(\"max-h-0\");\n});\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<button id=\"toggle\" class=\"m-3 p-2 border hover:bg-slate-300\">Toggle text</button>\n<p id=\"txt\" class=\"m-3 border overflow-hidden max-h-full transition-[max-height] ease-out\">\n This is a text.<br>That can be collapsed.<br>Or expanded.<br>And so forth.<br>Et cetera.\n</p>\n```\n\n```text\ntransition-timing-function: cubic-bezier(0, 0, 0.2, 1);\ntransition-property: max-height;\ntransition-duration: 150ms;\n```\n\n```text\nmax-height\n```\n\n```text\nmax-height\n```\n\n```text\n100%\n```\n\n```text\n100px\n```\n\n```text\ntheme: {\n extend: {\n transitionProperty: {\n 'max-height': 'max-height'\n }\n }\n}\n```\n\n```text\n<!-- Hidden -->\n<div class=\"overflow-hidden transition-max-height max-h-0\"></div>\n\n<!-- Visible -->\n<div class=\"overflow-hidden transition-max-height max-h-[32]\"></div>\n```\n\n```js\ndocument.getElementById(\"toggle\").addEventListener(\"click\", () => {\n document.getElementById(\"txt\").classList.toggle(\"max-h-[300px]\");\n document.getElementById(\"txt\").classList.toggle(\"max-h-0\");\n});\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<button id=\"toggle\" class=\"m-3 p-2 border hover:bg-slate-300\">Toggle text</button>\n<p id=\"txt\" class=\"m-3 border overflow-hidden max-h-0 transition-[max-height] duration-500 ease-in-out\">\n This is a text.<br>That can be collapsed.<br>Or expanded.<br>And so forth.<br>Et cetera.\n</p>\n```\n\n```text\n(max-height-[*px])\n```\n\n```text\n(max-height-full)\n```\n\n========================================\n\nComments:\n- Ahh, you're right. The other post I had referred to also uses a fixed `500px` `max-height` to cheat their way out of things.","metadata":{"transformedAt":"2026-08-18T18:33:42.908Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":157,"estimatedTokens":775}}292{"id":"stack-65542265","source":"stackoverflow","questionId":65542265,"title":"adding dynamic class name in svelte","tags":["css","svelte","tailwind-css","rollup","sapper"],"text":"Title: adding dynamic class name in svelte\nTags: css, svelte, tailwind-css, rollup, sapper\nSource: Stack Overflow\n\nQuestion:\nI am currently writing an app with svelte, sapper and tailwind. So to get tailwind working I have added this to my rollup config\n\n```\nsvelte({\n compilerOptions: {\n dev,\n hydratable: true,\n },\n preprocess: sveltePreprocess({\n sourceMap: dev,\n postcss: {\n plugins: [\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n require(\"postcss-nesting\"),\n ],\n },\n }),\n emitCss: true,\n })\n```\n\nAll in all this works, but I am getting some issues with dynamic class names.\n\nWriting something like this always seems to work\n\n```\n\n```\n\nboth `class-a` and `class-b` will be included in the final emitted CSS and everything works as expected.\n\nBut when I try to add a variable class name it won't work. So imagine this:\n\n```\n\n```\n\nIt will work exactly as expected and it will get the proper styling from the css class `col-span-6` in tailwind.\n\nBut if I change it to this:\n\n```\n\n```\n\nThen the style won't be included.\nIf I on the other hand already have a DOM element with the class `col-span-6` then the styling will be added to both elements.\n\nSo my guess here is that the compiler sees that the css is not used and it gets removed.\nAnd I suppose that my question is then if there is any way to force in all the styling from tailwind? so that I can use more dynamic class names\n\nand not sure if it is relevant but the component I have been testing this on, have this style block\n\n```\n\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n```\n\n*edit:* can add that I am getting a bunch of prints in the log saying that there are unused css selectors that seems to match all tailwind classes\n\n========================================\n\nTop Answer:\nI think that when the class attribute is a variable or depends on a variable it will not used to extract style during compilation (`class-${6}` is not evaluated during compilation but during runtime), because svelte marks it as unused css selector because the value of that class attribute is not known when the code is compiled.\n\nTo force svelte to include your style you must mark it as global, and to do that we have two options:\n\n```\n\n// component logic goes here\n\ndiv class={`class-${6}`}/>\n```\n\noption 1:\n\n```\n\n :global(.class-6){\n // style goes here\n }\n\n```\n\noption 2: this will mark all your style as global\n\n```\n\n .class-6{\n // style goes here\n }\n\n```\n\n========================================\n\nCode:\n```text\nsvelte({\n compilerOptions: {\n dev,\n hydratable: true,\n },\n preprocess: sveltePreprocess({\n sourceMap: dev,\n postcss: {\n plugins: [\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n require(\"postcss-nesting\"),\n ],\n },\n }),\n emitCss: true,\n })\n```\n\n```text\n<div class={true ? 'class-a' : 'class-b'}>\n```\n\n```text\n<div class={`col-span-6`}>\n```\n\n```text\n<div class={`col-span-${6}`}>\n```\n\n```text\n<style>\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n</style>\n```\n\n```text\nclass-a\n```\n\n```text\nclass-b\n```\n\n```text\ncol-span-6\n```\n\n```text\ncol-span-6\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n purge: {\n content: ['./src/**/*.html'],\n\n // These options are passed through directly to PurgeCSS\n options: {\n // Generate col-span-1 -> 12\n safelist: [...Array.from({ length: 12. }).fill('').map((_, i) => `col-span-${i + 1}`],\n },\n },\n // ...\n}\n```\n\n```js\n<script>\n// component logic goes here\n</script>\ndiv class={`class-${6}`}/>\n```\n\n```js\n<style>\n :global(.class-6){\n // style goes here\n }\n</style>\n```\n\n```js\n<style global>\n .class-6{\n // style goes here\n }\n</style>\n```\n\n```text\nclass-${6}\n```\n\n```text\n<div class=\"pl-{indent*4}\">\n```\n\n```text\n<div style=\"padding-left:{indent}rem\">\n```\n\n```text\npl-1\n```\n\n```text\npadding-left: 0.25rem; /* 4px */\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.908Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":18,"totalLines":220,"estimatedTokens":984}}293{"id":"stack-51619741","source":"stackoverflow","questionId":51619741,"title":"Special grid layout with tailwindcss","tags":["css","css-grid","tailwind-css"],"text":"Title: Special grid layout with tailwindcss\nTags: css, css-grid, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'd like to create this kind of layout:\n\nI want to use the popular utility css framework \"Tailwindcss\" to achieve that. Does anybody know how to proceed? Any direction would help me.\n\nI'm sure this kind of structure is possible but I can't find anything around.\n\nAlso, the data are pulled out a database and arrive in the number order as in the picture.\n\nThanks so much in advance for your time!\n\n========================================\n\nTop Answer:\nYou can achieve that Result using `css grid` only, since \"Tailwindcss\" works based on `display: flex`, it will be really hard to achieve that using it. please have a look at the below working snippet, hope it helps :)\n\n\r\n\r\n\n```\n.item1 { grid-area: a1; }\r\n.item2 { grid-area: a2; }\r\n.item3 { grid-area: a3; }\r\n.item4 { grid-area: a4; }\r\n.item5 { grid-area: a5; }\r\n.item6 { grid-area: a6; }\r\n.item7 { grid-area: a7; }\r\n.item8 { grid-area: a8; }\r\n.item9 { grid-area: a9; }\r\n\r\n.grid-container {\r\n display: grid;\r\n grid-template-areas:\r\n 'a1 a2 a3 a3'\r\n 'a4 a5 a3 a3'\r\n 'a6 a7 a8 a9';\r\n}\r\n\r\n/* Additional styling */\r\n.grid-container > div {\r\n background-color: #fff;\r\n text-align: center;\r\n padding: 20px 0;\r\n font-size: 30px;\r\n}\r\n.grid-container {\r\n grid-gap: 1px;\r\n background-color: #000;\r\n margin: 10px;\r\n padding: 1px;\r\n}\r\n.item3 {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\n```\n\n\r\n\n```\n\r\n 1\r\n 2\r\n 3\r\n 4\r\n 5\r\n 6\r\n 7\r\n 8\r\n 9\r\n\n```\n\n========================================\n\nCode:\n```text\n<div class=\"grid grid-cols-4 grid-rows-3\">\n <div>1</div>\n <div>2</div>\n <div class=\"row-span-2 col-span-2\">3</div>\n <div>4</div>\n <div>5</div>\n <div>6</div>\n <div>7</div>\n <div>8</div>\n <div>9</div>\n</div>\n```\n\n```css\n.item1 { grid-area: a1; }\n.item2 { grid-area: a2; }\n.item3 { grid-area: a3; }\n.item4 { grid-area: a4; }\n.item5 { grid-area: a5; }\n.item6 { grid-area: a6; }\n.item7 { grid-area: a7; }\n.item8 { grid-area: a8; }\n.item9 { grid-area: a9; }\n\n.grid-container {\n display: grid;\n grid-template-areas:\n 'a1 a2 a3 a3'\n 'a4 a5 a3 a3'\n 'a6 a7 a8 a9';\n}\n\n/* Additional styling */\n.grid-container > div {\n background-color: #fff;\n text-align: center;\n padding: 20px 0;\n font-size: 30px;\n}\n.grid-container {\n grid-gap: 1px;\n background-color: #000;\n margin: 10px;\n padding: 1px;\n}\n.item3 {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n```\n\n```html\n<div class=\"grid-container\">\n <div class=\"item1\">1</div>\n <div class=\"item2\">2</div>\n <div class=\"item3\">3</div>\n <div class=\"item4\">4</div>\n <div class=\"item5\">5</div>\n <div class=\"item6\">6</div>\n <div class=\"item7\">7</div>\n <div class=\"item8\">8</div>\n <div class=\"item9\">9</div>\n</div>\n```\n\n```text\ncss grid\n```\n\n```text\ndisplay: flex\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n purge: {\n content: [\n './src/**/*.html',\n ],\n },\n theme: {\n extend: {\n gridTemplateAreas: {\n 'default': [\n '. . hero hero',\n '. . hero hero',\n '. . . .',\n ]\n },\n }\n },\n plugins: [\n require('../tailwindcss-grid-areas'),\n ],\n}\n```\n\n```text\n<div class=\"lg:grid grid-areas-default grid-cols-4 w-full h-64\">\n <div class=\"grid-in-hero\">3 (Hero)</div>\n\n <div>1</div>\n <div>2</div>\n <div>4</div>\n <div>5</div>\n <div>6</div>\n <div>7</div>\n <div>8</div>\n <div>9</div>\n</div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.908Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":195,"estimatedTokens":868}}294{"id":"stack-79562593","source":"stackoverflow","questionId":79562593,"title":"Electron-vite + React + Tailwindcss v4","tags":["reactjs","electron","tailwind-css","tailwind-css-4","electron-vite"],"text":"Title: Electron-vite + React + Tailwindcss v4\nTags: reactjs, electron, tailwind-css, tailwind-css-4, electron-vite\nSource: Stack Overflow\n\nQuestion:\nIve got tailwindcss v4 to work with other applications as a vite plugin in the `vite.config.ts` file.\n\nSimilar to this:\n\n```\nimport { defineConfig } from \"vite\";\nimport tailwindcss from \"@tailwindcss/vite\";\nexport default defineConfig({\n plugins: [\n tailwindcss(),\n ],\n});\n```\n\nI'm unsure if this is the correct approach when using electron-vite tho as every approach Ive attempted does not work.\n\n**My `electron-vite` build is**\n\n```\nnpm create @quick-start/electron@latest\n```\n\n```\n✔ Select a framework: › react\n✔ Add TypeScript: … / Yes\n✔ Add Electron updater plugin: … / Yes\n✔ Enable Electron download mirror proxy: … / Yes\n```\n\nIve removed all files in `/assets` and added a single `global.css` that contains:\n\n```\n@import \"tailwindcss\";\n```\n\nIm getting the error `Cannot find module '@tailwindcss/vite' or its corresponding type declarations.`\n\n```\nimport tailwindcss from '@tailwindcss/vite'\n```\n\nMy `electron.vite.config.ts` File looks like this\n\n```\nimport { resolve } from 'path'\nimport { defineConfig, externalizeDepsPlugin } from 'electron-vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default defineConfig({\n main: {\n plugins: [externalizeDepsPlugin()]\n },\n preload: {\n plugins: [externalizeDepsPlugin()]\n },\n renderer: {\n resolve: {\n alias: {\n '@renderer': resolve('src/renderer/src')\n }\n },\n plugins: [react(), tailwindcss()]\n }\n})\n```\n\nIve already attempted to use a `postcss.config.js`. But In v4 it should be as easy as stated in the tailwindcss-v4 blog:\n\n```\nnpm i tailwindcss @tailwindcss/postcss;\n```\n\n```\nexport default {\n plugins: [\"@tailwindcss/postcss\"],\n};\n```\n\n```\n@import \"tailwindcss\";\n```\n\nI haven't found any documentation on this yet either.\nDoes someone have a fix?\n\n========================================\n\nCode:\n```ts\nimport { defineConfig } from \"vite\";\nimport tailwindcss from \"@tailwindcss/vite\";\nexport default defineConfig({\n plugins: [\n tailwindcss(),\n ],\n});\n```\n\n```text\nnpm create @quick-start/electron@latest\n```\n\n```yaml\n✔ Select a framework: › react\n✔ Add TypeScript: … / Yes\n✔ Add Electron updater plugin: … / Yes\n✔ Enable Electron download mirror proxy: … / Yes\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```ts\nimport tailwindcss from '@tailwindcss/vite'\n```\n\n```ts\nimport { resolve } from 'path'\nimport { defineConfig, externalizeDepsPlugin } from 'electron-vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default defineConfig({\n main: {\n plugins: [externalizeDepsPlugin()]\n },\n preload: {\n plugins: [externalizeDepsPlugin()]\n },\n renderer: {\n resolve: {\n alias: {\n '@renderer': resolve('src/renderer/src')\n }\n },\n plugins: [react(), tailwindcss()]\n }\n})\n```\n\n```text\nnpm i tailwindcss @tailwindcss/postcss;\n```\n\n```ts\nexport default {\n plugins: [\"@tailwindcss/postcss\"],\n};\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```text\nvite.config.ts\n```\n\n```text\nelectron-vite\n```\n\n```text\n/assets\n```\n\n```text\nglobal.css\n```\n\n```text\nCannot find module '@tailwindcss/vite' or its corresponding type declarations.\n```\n\n```text\nelectron.vite.config.ts\n```\n\n```text\npostcss.config.js\n```\n\n```none\nnpm create vite@latest my-electron-vite-project\n\n? Select a framework: › - Use arrow-keys. Return to submit.\n Vanilla\n Vue\n React\n Preact\n Lit\n Svelte\n❯ Others\n\n? Select a variant: › - Use arrow-keys. Return to submit.\n Extra Vite Starters (create-vite-extra) ↗\n❯ Electron (create-electron-vite) ↗\n\n# Choose your preferred front-end framework language\n? Project template: › - Use arrow-keys. Return to submit.\n Vue\n❯ React\n Vanilla\n\n# Enter the project to download dependencies and run them\ncd my-electron-vite-project\nnpm install\nnpm run dev\n```\n\n```js\nimport { defineConfig } from 'vite'\nimport electron from 'vite-plugin-electron'\nimport react from '@vitejs/plugin-react'\n\nexport default {\n plugins: [\n react(),\n electron({\n main: {\n entry: 'electron/main.ts',\n },\n preload: {\n input: path.join(__dirname, 'electron/preload.ts'),\n },\n renderer: process.env.NODE_ENV === 'test'\n ? undefined\n : {},\n }),\n ],\n}\n```\n\n```none\nnpm install tailwindcss @tailwindcss/vite\n```\n\n```js\nimport { defineConfig } from 'vite'\nimport electron from 'vite-plugin-electron'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite' // import here\n\nexport default {\n plugins: [\n tailwindcss(), // use here\n react(),\n electron({\n main: {\n entry: 'electron/main.ts',\n },\n preload: {\n input: path.join(__dirname, 'electron/preload.ts'),\n },\n renderer: process.env.NODE_ENV === 'test'\n ? undefined\n : {},\n }),\n ],\n}\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```text\nquick-start\n```\n\n```text\nvite.config.ts\n```\n\n========================================\n\nComments:\n- If you're using Vite, then `@tailwindcss/vite` is one of the best options starting from v4, as it's a plugin that communicates directly with Vite. The PostCSS solution is great if you're not using Vite.\n- At first glance, it seems that your quick-start package is developed by a third party, used by quite few people, and has limited support. I prefer official solutions directly from the source. I haven't started reviewing why this specific starter kit might not be suitable. I outlined in my answer, following the documentation, how you can perform the installation with the desired stack.\n- Oh I did not know I was using an third party package.\n- Fixed, Using electron-vite.github.io not electron-vite.org\n- Oh, I didn't even notice the domain names, but this is really misleading.\n- Yea I saw the domain so I instinctively chose it over the github one thinking it was their official site.","metadata":{"transformedAt":"2026-08-18T18:33:42.908Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":23,"totalLines":290,"estimatedTokens":1490}}295{"id":"stack-73505695","source":"stackoverflow","questionId":73505695,"title":"How apply tailwindcss styles to emails in Laravel 9 with vite","tags":["php","laravel","email","tailwind-css","vite"],"text":"Title: How apply tailwindcss styles to emails in Laravel 9 with vite\nTags: php, laravel, email, tailwind-css, vite\nSource: Stack Overflow\n\nQuestion:\nI am not able to make work styles in my mails blade.\n\nThe final goal is to have a layout for mails. By now, for testing puposes, I have:\n\n- The controller that sends the mail\n\n- The mail component\n\n- The maileable class\n\n- The layout for emails, as a duplicated of guest.blade.php jetstream file\n\n- One specific email blade file, the content to add in the previus layout, is a duplicated of welcome.blade.php jetstream file\n\napp\\Http\\Controllers\\TestController.php\n\n```\nuser())\n ->send(new TestingMail());\n return view('welcome');\n }\n}\n```\n\napp\\View\\Components\\MailLayout.php\n\n```\napp\\Mail\\TestingMail.php\n\n```\nview('mails.general');\n }\n}\n```\n\nresources\\views\\layouts\\mail.blade.php\n\n```\n\ngetLocale()) }}\">\n \n \n \n \n\n {{ config('app.name', 'Laravel') }}\n\n \n \n\n \n @vite(['resources/css/app.scss', 'resources/js/app.js'])\n \n \n \n {{ $slot }}\n \n \n\n```\n\nresources\\views\\mails\\general.blade.php\n\n```\n\n \n \n {{ __('Dashboard') }}\n \n \n\n \n \n \n \n \n \n \n\n```\n\nI receive the mail with no styles. The only help that I found was this link https://ralphjsmit.com/tailwind-css-multiple-configurations-laravel-mix but that was wrote for laravel mix, I don't have idea to migrate this webpack.mix.js to vite.\n\nAny help or orientation will be apreciated, thanks.\n\n**EDIT**\nI finnally made it work, combining the @Jaap's answer and other package:\nhttps://github.com/fedeisas/laravel-mail-css-inliner\n\nhttps://github.com/motomedialab/laravel-vite-helper\n\nvite helper is not ideal because it does not work when npm run dev is running, but it is sufficient for me.\n\n========================================\n\nTop Answer:\nI don't know if you still need this.\n\nBut I managed to get it to work nicely with some packages, a custom vite config and the --watch flag. Probably the best work around that I created for this.\n\nThis allows you to quickly build emails locally which almost works the same as `dev`\n\nFirst I created a file called `mail.scss` in `resources/css/` with these contents:\n\n```\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\nI only need the tailwind basics so I keep these for now.\n\nThen I installed these packages\n\n- https://github.com/fedeisas/laravel-mail-css-inliner\n\n- https://github.com/motomedialab/laravel-vite-helper\n\nAnd inside the config from `laravel-mail-css-inliner` I will add my SCSS file like:\n\n`config/css-inliner.php`\n\n```\n [\n public_path(vite('resources/css/mail.scss', 'build', true))\n ],\n\n];\n```\n\nNow I created a new vite config for just my emails that's really basic:\n\n`vite-email.config.js`\n\n```\nimport { defineConfig } from 'vite';\nimport laravel from 'laravel-vite-plugin';\n\nexport default defineConfig({\n plugins: [\n laravel({\n input: [\n 'resources/css/mail.scss',\n ],\n refresh: true,\n }),\n ],\n});\n```\n\nNow finally in my `package.json` I have added the following script:\n\n```\n{\n \"scripts\": {\n // Mail\n \"build:mail\": \"vite build --config ./vite-email.config.js --watch\",\n // General\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"build:server\": \"vite build --ssr\",\n \"build:all\": \"npm run build && npm run build:server\"\n },\n}\n```\n\nAs you see in the top script `build:mail` I am using the `vite-email.config.js` I created. This will only build the `mail.scss` to the `public/build` folder.\n\nNow I am also using the flag `--watch`. This enables rollup watcher and will watch all the files and trigger a rebuild.\n\nSo if I change `mail/order-sent.blade.php` and add some extra tailwindcss classes. It will rebuild again.\n\nBecause you're using a custom vite config, and you're only rebuilding your `mail.scss` and not `app.js` **and** `app.scss` for example, this will be really fast. It usually builds in roughly 100-500ms at me.\n\n========================================\n\nCode:\n```text\n<?php\nnamespace App\\Http\\Controllers;\n\nuse App\\Mail\\TestingMail;\nuse Illuminate\\Http\\Request;\nuse Illuminate\\Support\\Facades\\Mail;\n\nclass TestController extends Controller\n{\n public function __invoke(Request $request)\n {\n $result = Mail::to($request->user())\n ->send(new TestingMail());\n return view('welcome');\n }\n}\n```\n\n```text\n<?php\n\nnamespace App\\View\\Components;\n\nuse Illuminate\\View\\Component;\n\nclass MailLayout extends Component\n{\n /**\n * Create a new component instance.\n *\n * @return void\n */\n public function __construct()\n {\n //\n }\n\n /**\n * Get the view / contents that represent the component.\n *\n * @return \\Illuminate\\Contracts\\View\\View|\\Closure|string\n */\n public function render()\n {\n return view('layouts.mail');\n }\n}\n```\n\n```text\n<?php\n\nnamespace App\\Mail;\n\nuse Illuminate\\Bus\\Queueable;\nuse Illuminate\\Mail\\Mailable;\nuse Illuminate\\Queue\\SerializesModels;\n\nclass TestingMail extends Mailable\n{\n use Queueable, SerializesModels;\n\n /**\n * Create a new message instance.\n *\n * @return void\n */\n public function __construct()\n {\n //\n }\n\n /**\n * Build the message.\n *\n * @return $this\n */\n public function build()\n {\n return $this->view('mails.general');\n }\n}\n```\n\n```text\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n\n <title>{{ config('app.name', 'Laravel') }}</title>\n\n <!-- Fonts -->\n <link rel=\"stylesheet\" href=\"https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap\">\n\n <!-- Scripts -->\n @vite(['resources/css/app.scss', 'resources/js/app.js'])\n </head>\n <body>\n <div class=\"font-sans text-gray-900 antialiased\">\n {{ $slot }}\n </div>\n </body>\n</html>\n```\n\n```text\n<x-mail-layout>\n <x-slot name=\"header\">\n <h2 class=\"font-semibold text-xl text-gray-800 leading-tight\">\n {{ __('Dashboard') }}\n </h2>\n </x-slot>\n\n <div class=\"py-12\">\n <div class=\"max-w-7xl mx-auto sm:px-6 lg:px-8\">\n <div class=\"bg-white overflow-hidden shadow-xl sm:rounded-lg\">\n <x-jet-welcome />\n </div>\n </div>\n </div>\n</x-mail-layout>\n```\n\n```text\nnpm run build\n```\n\n```text\n<style>\n```\n\n```text\nwelcome.blade.php\n```\n\n```text\nnpx tailwindcss -o build.css --minify\n```\n\n```text\n@vite('YOURPATH/build.css')\n```\n\n```css\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\n```php\n<?php\nreturn [\n 'css-files' => [\n public_path(vite('resources/css/mail.scss', 'build', true))\n ],\n\n];\n```\n\n```js\nimport { defineConfig } from 'vite';\nimport laravel from 'laravel-vite-plugin';\n\nexport default defineConfig({\n plugins: [\n laravel({\n input: [\n 'resources/css/mail.scss',\n ],\n refresh: true,\n }),\n ],\n});\n```\n\n```json\n{\n \"scripts\": {\n // Mail\n \"build:mail\": \"vite build --config ./vite-email.config.js --watch\",\n // General\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"build:server\": \"vite build --ssr\",\n \"build:all\": \"npm run build && npm run build:server\"\n },\n}\n```\n\n```text\ndev\n```\n\n```text\nmail.scss\n```\n\n```text\nresources/css/\n```\n\n```text\nlaravel-mail-css-inliner\n```\n\n```text\nconfig/css-inliner.php\n```\n\n```text\nvite-email.config.js\n```\n\n```text\npackage.json\n```\n\n```text\nbuild:mail\n```\n\n```text\nvite-email.config.js\n```\n\n```text\nmail.scss\n```\n\n```text\npublic/build\n```\n\n```text\n--watch\n```\n\n```text\nmail/order-sent.blade.php\n```\n\n```text\nmail.scss\n```\n\n```text\napp.js\n```\n\n```text\napp.scss\n```\n\n========================================\n\nComments:\n- Works perfectly, thanks! Now I have other problem, in the package config file you must provide the path of css file in public dir, but vite generates public\\build\\assets\\app.68478134.css file, with this random number. I can't find in vite docs how to get this path dinamically from php\n- finnally I used a vite helper from github, it is not ideally because in dev not loads the styles...but in prouduction works. I will update the question.\n- What is the vite helper? @msolla\n- have problem imppoortinng the hot viiite fille :(\n- Yes, that is done. My resources\\views\\mails\\general.blade.php file is extending resources\\views\\layouts\\mail.blade.php and I include assets with vite there (@vite(['resources/css/app.scss', 'resources/js/app.js'])) I had run npm run build and npm run dev, but doesn't work.\n- Wow, this looks nice. I will test it as soon as possible. Thanks @Aspheleia !!\n- @msolla Did you end up testing this solution yet?\n- Using the public path results in file_get_contents errors.\n- @Oddman: were you able to solve the public path problem?\n- @YeasirArafatMajumder yes - you have to build the file, and then use the usual process vite path using the vite helper. And you can't have the dev process running for your CSS builds, else it all fucks up. It's extremely fickle. But once on production it's generally fine.\n- @Oddman For me locally it all works great, even with vite running in watch mode. but when i send the emails out, in gmail the email is not styled at all. Locally i trap the emials with mailhog and that looks good too! I am not sure what is wrong\n- @YeasirArafatMajumder that could be due to what classes you're using - google stirps a lot of unsupported styles - and if just one class contains unsupported styling, you won't see ANY styles. You will need to educate yourself on what they support - one thing, is rgba background colors, which tailwind uses by default.","metadata":{"transformedAt":"2026-08-18T18:33:42.908Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":30,"totalLines":454,"estimatedTokens":2436}}296{"id":"stack-73354281","source":"stackoverflow","questionId":73354281,"title":"Tailwind space-x-4 -> first item not getting the space applied","tags":["html","tailwind-css"],"text":"Title: Tailwind space-x-4 -> first item not getting the space applied\nTags: html, tailwind-css\nSource: Stack Overflow\n\nQuestion:\n```\n\n \n \n \n \n \n Document\n \n \n \n Item\n Item\n Item\n Item\n Item\n Item\n Item\n \n \n\n```\n\nThis is my markdown. It should be reproducible. My Problem is that the first item does not get the spacing applied. Every other item does get the space applied. Am I doing something wrong here? I want ALL the items to have space.\n\nhttps://i.sstatic.net/rc4Cr.jpg\n\n========================================\n\nTop Answer:\nYou can also use gap by simply doing `gap-4`.\n\nAs per the docs, space-x has limitations.\n\nThese utilities are really just a shortcut for adding margin to\nall-but-the-first-item in a group, and aren’t designed to handle\ncomplex cases like grids, layouts that wrap, or situations where the\nchildren are rendered in a complex custom order rather than their\nnatural DOM order.\n\nFor those situations, it’s better to use the gap utilities when\npossible, or add margin to every element with a matching negative\nmargin on the parent.\n\nhttps://tailwindcss.com/docs/gap\n\n========================================\n\nCode:\n```text\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <title>Document</title>\n </head>\n <body>\n <div class=\"flex space-x-4 flex-col\">\n <div>Item</div>\n <div>Item</div>\n <div>Item</div>\n <div>Item</div>\n <div>Item</div>\n <div>Item</div>\n <div>Item</div>\n </div>\n </body>\n</html>\n```\n\n```text\n<div class=\"ml-4\">\n <div>Item</div>\n <div>Item</div>\n ...etc.\n</div>\n```\n\n```text\nspace-x-4\n```\n\n```text\nspace-x-4\n```\n\n```text\ngap-4\n```\n\n```text\n<div className=\"space-x-4\">\n <div className=\"inline\">Item</div>\n <div className=\"inline\">Item</div>\n <div className=\"inline\">Item</div>\n <div className=\"inline\">Item</div>\n <div className=\"inline\">Item</div>\n <div className=\"inline\">Item</div>\n <div className=\"inline\">Item</div>\n </div>\n```\n\n```text\n<div className=\"flex flex-col gap-4\">\n <div>Item</div>\n <div>Item</div>\n <div>Item</div>\n <div>Item</div>\n <div>Item</div>\n <div>Item</div>\n <div>Item</div>\n </div>\n```\n\n```text\nspace-x\n```\n\n```text\nflexbox\n```\n\n```text\ngap\n```\n\n```text\nspace-x\n```\n\n```text\nflexbox\n```\n\n```text\nflex-direction:column\n```\n\n```text\n<div class=\"flex space-x-4 flex-col\">\n```\n\n```text\ngap-4\n```\n\n========================================\n\nComments:\n- I found this one to be a much better solution than this other answer","metadata":{"transformedAt":"2026-08-18T18:33:42.908Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":158,"estimatedTokens":681}}297{"id":"stack-67857322","source":"stackoverflow","questionId":67857322,"title":"Laravel 8 Tailwind: webpack-cli TypeError: compiler.plugin is not a function","tags":["laravel","npm","webpack","tailwind-css","laravel-mix"],"text":"Title: Laravel 8 Tailwind: webpack-cli TypeError: compiler.plugin is not a function\nTags: laravel, npm, webpack, tailwind-css, laravel-mix\nSource: Stack Overflow\n\nQuestion:\nI want to install Tailwind in Laravel 8. I've followed the documentation and typed the following (showed no error).\n\n```\nnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\nThen I could not successfully run `npm run watch` because there was a problem with installing the latest PostCSS version, v8. I've looked at a solution, and according to Tailwind CSS Laravel Mix Error - Forces PostCSS 8 to be installed, I had to upgrade Webpack. Then I typed:\n\n```\nnpm install laravel-mix@latest\n```\n\nThis includes the latest Webpack version, according to the docs https://laravel-mix.com/docs/6.0/upgrade. (no error was shown)\n\nIf I type `npm run watch,` I have the following error; I don't understand it and didn't find anything in Google... I'm looking for some help:\n\nnpm WARN lifecycle The node binary used for scripts is /snap/bin/node\nbut npm is using /snap/node/3292/bin/node itself. Use the\n`--scripts-prepend-node-path` option to include the path for the node\nbinary npm was executed with.\n\n@ watch /home/x/Documents/projets/web/site_perso\nnpm run development -- --watch\n\nnpm WARN lifecycle The node binary used for scripts is /snap/bin/node\nbut npm is using /snap/node/3292/bin/node itself. Use the\n`--scripts-prepend-node-path` option to include the path for the node\nbinary npm was executed with.\n\n@ development /home/x/Documents/projets/web/site_perso\ncross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js \"--watch\"\n\n**[webpack-cli] TypeError: compiler.plugin is not a function**\nat BrowserSyncPlugin.apply (/home/x/Documents/projets/web/site_perso/node_modules/browser-sync-webpack-plugin/lib/BrowserSyncPlugin.js:22:12)\nat createCompiler (/home/x/Documents/projets/web/site_perso/node_modules/webpack/lib/webpack.js:74:12)\nat create (/home/x/Documents/projets/web/site_perso/node_modules/webpack/lib/webpack.js:127:16)\nat webpack (/home/x/Documents/projets/web/site_perso/node_modules/webpack/lib/webpack.js:135:47)\nat WebpackCLI.f [as webpack] (/home/x/Documents/projets/web/site_perso/node_modules/webpack/lib/index.js:55:16)\nat WebpackCLI.createCompiler (/home/x/Documents/projets/web/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:1845:29)\nat async WebpackCLI.buildCommand (/home/x/Documents/projets/web/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:1952:20)\nat async Command. (/home/x/Documents/projets/web/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:742:25)\nat async Promise.all (index 1)\nat async Command. (/home/x/Documents/projets/web/site_perso/node_modules/webpack-cli/lib/webpack-cli.js:1289:13)\nnpm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ development:\n`cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js \"--watch\"` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @\ndevelopment script. npm ERR! This is probably not a problem with npm.\nThere is likely additional logging output above.\n\nnpm ERR! A complete log of this run can be found in: npm ERR!\n\n/home/x/.npm/_logs/2021-06-06T08_40_27_985Z-debug.log npm ERR! code\nELIFECYCLE npm ERR! errno 2 npm ERR! @ watch: `npm run development -- --watch` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ watch script. npm ERR! This is probably not a problem with npm. There\nis likely additional logging output above.\n\nnpm ERR! A complete log of this run can be found in: npm ERR!\n\n/home/x/.npm/_logs/2021-06-06T08_40_28_010Z-debug.log\n\nHere is an extract of my `package.JSON` file, for dependencies:\n\n```\n\"devDependencies\": {\n \"autoprefixer\": \"^10.2.6\",\n \"axios\": \"^0.19\",\n \"browser-sync\": \"^2.26.13\",\n \"browser-sync-webpack-plugin\": \"^2.0.1\",\n \"cross-env\": \"^7.0.3\",\n \"laravel-mix\": \"^6.0.19\",\n \"less\": \"^3.12.2\",\n \"less-loader\": \"^7.0.2\",\n \"lodash\": \"^4.17.19\",\n \"resolve-url-loader\": \"^3.1.0\",\n \"tailwindcss\": \"^2.1.4\",\n \"vue-template-compiler\": \"^2.6.12\"\n}\n```\n\n========================================\n\nCode:\n```text\nnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\n```text\nnpm install laravel-mix@latest\n```\n\n```text\n\"devDependencies\": {\n \"autoprefixer\": \"^10.2.6\",\n \"axios\": \"^0.19\",\n \"browser-sync\": \"^2.26.13\",\n \"browser-sync-webpack-plugin\": \"^2.0.1\",\n \"cross-env\": \"^7.0.3\",\n \"laravel-mix\": \"^6.0.19\",\n \"less\": \"^3.12.2\",\n \"less-loader\": \"^7.0.2\",\n \"lodash\": \"^4.17.19\",\n \"resolve-url-loader\": \"^3.1.0\",\n \"tailwindcss\": \"^2.1.4\",\n \"vue-template-compiler\": \"^2.6.12\"\n}\n```\n\n```text\nnpm run watch\n```\n\n```text\nnpm run watch,\n```\n\n```text\n--scripts-prepend-node-path\n```\n\n```text\n--scripts-prepend-node-path\n```\n\n```text\ncross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js \"--watch\"\n```\n\n```text\nnpm run development -- --watch\n```\n\n```text\npackage.JSON\n```\n\n```text\nnpm uninstall browser-sync-webpack-plugin\nnpm install browser-sync-webpack-plugin\n```\n\n```text\nbrowser-sync-webpack-plugin\n```\n\n```text\npackage.JSON\n```\n\n```text\nnpm outdated\n```\n\n```text\nnpm update\n```\n\n========================================\n\nComments:\n- Or just run `npm install -D browser-sync-webpack-plugin@latest` to update","metadata":{"transformedAt":"2026-08-18T18:33:42.908Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":15,"totalLines":163,"estimatedTokens":1356}}298{"id":"stack-74078603","source":"stackoverflow","questionId":74078603,"title":"Tailwind CSS how to make footer stay at the bottom when the page size is less than VH","tags":["css","tailwind-css"],"text":"Title: Tailwind CSS how to make footer stay at the bottom when the page size is less than VH\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a simple file here. I want the footer to stay at the bottom when the page size is less than the screen size.\n\nNot sticky at the bottom always. It just has to be the last thing. If the content is less than the screen height, it has to stay at the bottom of the screen.\n\nI tried adding `min-h-screen` to ``. But it creates a lot of space and pushes the footer off the screen.\n\n\r\n\r\n\n```\n\n \n \n \n ABC Blog\n \n\n \n \n \n ABC\n \n \n \n\n \n\n \n\n \n \n\n### Blog - Articles, Insights, Tips and Tools\n\n \n\n \n \n \n\n### Lorem ipsum dolor sit amet.\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Curabitur at viverra justo. In ut tellus laoreet, iaculis velit in, imperdiet.\n \n\n \n Oct 13, 2022\n\n |\n\n John\n\n \n \n \n \n \n\n \n © 2022 ABC.\n All Rights Reserved.\n \n \n\n```\n\n========================================\n\nTop Answer:\nYou can wrap your `header`, `main` and `footer` inside a div with `display: grid` and use the pancake stack\n\n\r\n\r\n\n```\n\n \n \n \n ABC Blog\n \n\n \n \n \n \n ABC\n \n \n \n\n \n\n \n\n \n \n\n### Blog - Articles, Insights, Tips and Tools\n\n \n\n \n \n \n\n### Lorem ipsum dolor sit amet.\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Curabitur at viverra justo. In ut tellus laoreet, iaculis velit in, imperdiet.\n \n\n \n Oct 13, 2022\n\n |\n\n John\n\n \n \n \n \n \n\n \n © 2022 ABC.\n All Rights Reserved.\n \n \n\n```\n\n========================================\n\nCode:\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- Primary Meta Tags -->\n <title>ABC Blog</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n\n<body style=\"background-color:#f8f7f3;\">\n\n <header class=\"bg-white px-2 sm:px-4 py-2.5 fixed w-full z-20 top-0 left-0 border-b border-gray-200\">\n <div class=\"container flex flex-wrap justify-between items-center mx-auto\">\n <a href=\"#\" class=\"flex items-center\">\n <span class=\"self-center text-2xl font-semibold whitespace-nowrap\">ABC</span>\n </a>\n </div>\n </header>\n\n <main>\n\n <div class=\"container mx-auto px-5 md:max-w-screen-lg mt-20 md:mt-36\">\n\n <div class=\"p-6 text-center mb-10 md:mb-20\">\n <h1 class=\"text-3xl\">Blog - Articles, Insights, Tips and Tools</h1>\n </div>\n\n <a href=\"#/shopify-dawn-theme-hidedisable-add-to-cart-popup\">\n <div class=\"px-6 py-3 border-2 border-white rounded-lg space-y-2 hover:shadow mt-2\">\n <h2 class=\"text-xl font-medium\">Lorem ipsum dolor sit amet.</h2>\n <p class=\"py-3 md:py-0 text-gray-500\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Curabitur at viverra justo. In ut tellus laoreet, iaculis velit in, imperdiet.\n </p>\n <div class=\"flex space-x-2 text-xs\">\n <p class=\"text-gray-500\">Oct 13, 2022</p>\n <p>|</p>\n <p>John</p>\n </div>\n </div>\n </a>\n </div>\n </main>\n\n <footer class=\"w-full p-4 bg-white shadow md:flex md:items-center md:justify-between md:p-6 mt-20\">\n <span class=\"text-sm sm:text-center\">© 2022 <a href=\"#\" class=\"hover:underline\">ABC</a>.\n All Rights Reserved.\n </span>\n </footer>\n\n</body>\n\n</html>\n```\n\n```text\nmin-h-screen\n```\n\n```text\n<main>\n```\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- Primary Meta Tags -->\n <title>ABC Blog</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n\n<body style=\"background-color:#f8f7f3;\">\n <div class=\"grid grid-rows-[auto-1fr-auto] min-h-screen\">\n <header class=\"bg-white px-2 sm:px-4 py-2.5 fixed w-full z-20 top-0 left-0 border-b border-gray-200\">\n <div class=\"container flex flex-wrap justify-between items-center mx-auto\">\n <a href=\"#\" class=\"flex items-center\">\n <span class=\"self-center text-2xl font-semibold whitespace-nowrap\">ABC</span>\n </a>\n </div>\n </header>\n\n <main>\n\n <div class=\"container mx-auto px-5 md:max-w-screen-lg mt-20 md:mt-36\">\n\n <div class=\"p-6 text-center mb-10 md:mb-20\">\n <h1 class=\"text-3xl\">Blog - Articles, Insights, Tips and Tools</h1>\n </div>\n\n <a href=\"#/shopify-dawn-theme-hidedisable-add-to-cart-popup\">\n <div class=\"px-6 py-3 border-2 border-white rounded-lg space-y-2 hover:shadow mt-2\">\n <h2 class=\"text-xl font-medium\">Lorem ipsum dolor sit amet.</h2>\n <p class=\"py-3 md:py-0 text-gray-500\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Curabitur at viverra justo. In ut tellus laoreet, iaculis velit in, imperdiet.\n </p>\n <div class=\"flex space-x-2 text-xs\">\n <p class=\"text-gray-500\">Oct 13, 2022</p>\n <p>|</p>\n <p>John</p>\n </div>\n </div>\n </a>\n </div>\n </main>\n\n <footer class=\"w-full p-4 bg-white shadow md:flex md:items-center md:justify-between md:p-6 mt-20\">\n <span class=\"text-sm sm:text-center\">© 2022 <a href=\"#\" class=\"hover:underline\">ABC</a>.\n All Rights Reserved.\n </span>\n </footer>\n</div>\n</body>\n\n</html>\n```\n\n```text\nheader\n```\n\n```text\nmain\n```\n\n```text\nfooter\n```\n\n```text\ndisplay: grid\n```\n\n========================================\n\nComments:\n- Here's the solution in tailwind-playground: link.","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":282,"estimatedTokens":1458}}299{"id":"stack-72018297","source":"stackoverflow","questionId":72018297,"title":"Tailwind CSS responsive classes not working with Rails ViewComponent gem","tags":["ruby-on-rails","ruby","responsive-design","tailwind-css","view-components"],"text":"Title: Tailwind CSS responsive classes not working with Rails ViewComponent gem\nTags: ruby-on-rails, ruby, responsive-design, tailwind-css, view-components\nSource: Stack Overflow\n\nQuestion:\nI'm using the ViewComponent gem with Tailwind CSS. I render components from my view files with . In my app/components directory, I have example_component.rb and example_component.html.erb files. The component renders fine. But if I have Tailwind CSS classes that use responsive utility variants, it's hit or miss whether or not they work. For example, say I'm rendering using a view component:\n\n```\n# app/components/example_component.rb\nclass ExampleComponent with a view component html.erb file:\n\n```\n# app/components/example_component.html.erb\n\n \n \n\n```\n\nThe Tailwind classes make the bottom margin change from 2 to 0 when the display is medium (md) or larger. Also, the submit button changes from width 100% to width fit-content when the display is medium or larger. If I render this with the usual Rails render from a partial in the views directory, it works fine. If I render the exact same html.erb file using a ViewComponent class, it doesn't recognize the class changes with the \"md:\" responsive utilities. If I use the Chrome dev tools to inspect the element, it doesn't list the @media classes at all. The \"md:\" classes are displayed in the element's class, but they aren't listed in the dev tools' style section and they don't work. Another weird thing that happens sometimes is that occasionally these responsive class utilities do work and sometimes they don't. Other times, they work and if I change a value in the responsive class utility and reload the page, it stops working.\n\nAnother strange behavior I've noticed is some Tailwind classes aren't working. I have an element with \"border-4\" in the class which sets the border-width to 4px. It works fine as a Rails partial, but it stops working when I render it with a ViewComponent class. This particular one does start working in the view component if I change it to \"border-2\" for some reason. Bizare.\n\n========================================\n\nTop Answer:\nI faced same issue. In `tailwind.config.js` add following line to your content:\n\n```\ncontent: [\n './app/components/**/*.{erb,html}',\n],\n```\n\n========================================\n\nCode:\n```text\n# app/components/example_component.rb\nclass ExampleComponent < ViewComponent::Base\n def initialize(resource:)\n @resource = resource\n end\nend\n```\n\n```text\n# app/components/example_component.html.erb\n<%= form_with url: resource_path, target: '_top', class: 'mb-2 md:mb-0' do |f| %>\n <%= f.hidden_field :resource_id, value: @resource.id %>\n <%= f.submit 'Submit', class: \"w-full md:w-fit\" %>\n<% end %>\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ncontent:\n```\n\n```text\ncontent: [\n './app/components/**/*.{erb,html}',\n],\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- i'm curious why this works for me, when my structure has the components directly in `app/components/` and there's no other directory in `app/components/`.\n- @J.R.BobDobbs the `/**/` part just means that there could be 0 or more subdirectories in between `./app/components/` directory and your actual component files. That's why it works for your structure as well","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":77,"estimatedTokens":832}}300{"id":"stack-68025173","source":"stackoverflow","questionId":68025173,"title":"How to change image on hover with NextJS and TailwindCSS?","tags":["next.js","tailwind-css"],"text":"Title: How to change image on hover with NextJS and TailwindCSS?\nTags: next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to get a Logo that utilizes React.forwardRef and NextJS Link to change to a different image on hover and still work.\n\nThis was fairly straightforward in CSS, but I'm stuck on how to do this in the NextJS / Tailwind world.\n\nCurrently I'm getting by with a `hover: animate-pulse` at the moment...\n\nHelp appreciated!\n\n```\nimport React from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\n\nconst MyLogo = React.forwardRef(({ onClick, href }, ref) => {\n return (\n \n \n \n );\n});\n\nexport default function Nav() {\n return (\n \n \n \n \n \n \n \n );\n}\n```\n\n========================================\n\nTop Answer:\nMy solution thanks to Sean W's suggested reading:\n\n```\nimport React, { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\n\nconst MyLogo = React.forwardRef(({ onClick, href }, ref) => {\n return (\n \n \n \n );\n});\n\nconst MyLogoAlt = React.forwardRef(({ onClick, href }, ref) => {\n return (\n \n \n \n );\n});\n\nexport default function Nav() {\nconst [isShown, setIsShown] = useState(false);\n\n return (\n \n setIsShown(true)}\n onMouseLeave={() => setIsShown(false)}\n >\n {isShown && (\n \n \n \n )}\n {!isShown && (\n \n \n \n )}\n \n \n );\n}\n```\n\n========================================\n\nCode:\n```text\nimport React from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\n\nconst MyLogo = React.forwardRef(({ onClick, href }, ref) => {\n return (\n <a href={href} onClick={onClick} ref={ref}>\n <Image src=\"/logo1.png\" width={88} height={77} alt=\"logo\" />\n </a>\n );\n});\n\nexport default function Nav() {\n return (\n <nav className=\"flex items-center justify-between flex-wrap bg-raisin-black p-6\">\n <div className=\"flex items-center flex-shrink-0 mr-6 cursor-pointer hover:animate-pulse\">\n <Link href=\"/\">\n <MyLogo />\n </Link>\n </div>\n </nav>\n );\n}\n```\n\n```text\nhover: animate-pulse\n```\n\n```js\nimport React, { useState } from 'react';\nimport Link from 'next/link';\nimport Image from 'next/image';\n\nconst MyLink = React.forwardRef(\n (\n { as, children, href, replace, scroll, shallow, passHref, ...rest }, // extract all next/link props and pass the rest to the anchor tag\n ref,\n ) => (\n <Link as={as} href={href} passHref={passHref} replace={replace}>\n <a {...rest} ref={ref}>\n {children}\n </a>\n </Link>\n ),\n);\n\nconst Logo = () => {\n const [isHovering, setIsHovered] = useState(false);\n const onMouseEnter = () => setIsHovered(true);\n const onMouseLeave = () => setIsHovered(false);\n return (\n <div\n className=\"flex items-center flex-shrink-0 mr-6 cursor-pointer\"\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n >\n <MyLink href=\"/\">\n {isHovering ? (\n <Image src=\"/logo4.png\" width={88} height={77} alt=\"logo\" />\n ) : (\n <Image src=\"/logo1.png\" width={88} height={77} alt=\"logo\" />\n )}\n </MyLink>\n </div>\n );\n};\n\nexport default function Nav() {\n return (\n <nav className=\"flex items-center justify-between flex-wrap bg-raisin-black p-6\">\n <Logo />\n </nav>\n );\n}\n```\n\n```text\nimport React, { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\n\nconst MyLogo = React.forwardRef(({ onClick, href }, ref) => {\n return (\n <a href={href} onClick={onClick} ref={ref}>\n <Image src=\"/logo1.png\" width={88} height={77} alt=\"logo\" />\n </a>\n );\n});\n\nconst MyLogoAlt = React.forwardRef(({ onClick, href }, ref) => {\n return (\n <a href={href} onClick={onClick} ref={ref}>\n <Image src=\"/logo4.png\" width={88} height={77} alt=\"logo\" />\n </a>\n );\n});\n\nexport default function Nav() {\nconst [isShown, setIsShown] = useState(false);\n\n return (\n <nav className=\"flex items-center justify-between flex-wrap bg-raisin-black p-6\">\n <div\n className=\"flex items-center flex-shrink-0 mr-6 cursor-pointer\"\n onMouseEnter={() => setIsShown(true)}\n onMouseLeave={() => setIsShown(false)}\n >\n {isShown && (\n <Link href=\"/\">\n <MyLogoAlt />\n </Link>\n )}\n {!isShown && (\n <Link href=\"/\">\n <MyLogo />\n </Link>\n )}\n </div>\n </nav>\n );\n}\n```\n\n========================================\n\nComments:\n- Check out upmostly.com/tutorials/…\n- Thank you very much @SeanW! This is exactly what I needed to read, I am now using a Hook and onMouseEnter() / onMouseLeave() to accomplish this\n- Instead of repeating all that logic, just create a state [src, setSrc] and set it onMouseEnter and onMouseLeave.\n- wow that is just so nasty. it works but boy so much code just for that. React really is a train wreck.\n- Thanks for the next level refactor! I learned a lot from seeing this.","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":225,"estimatedTokens":1224}}301{"id":"stack-69593460","source":"stackoverflow","questionId":69593460,"title":"Markdown styles not getting loaded in Nuxt + Vue project","tags":["vue.js","nuxt.js","markdown","tailwind-css","javascript-marked"],"text":"Title: Markdown styles not getting loaded in Nuxt + Vue project\nTags: vue.js, nuxt.js, markdown, tailwind-css, javascript-marked\nSource: Stack Overflow\n\nQuestion:\nI am working on a Vue + Nuxt + Tailwind project and using the marked library to convert a text into markdown.\n\nThe issue is that some styles like \"Headings\" and \"Link\" are loading properly, while some basic styles like \"bold\", \"italics\" are working fine.\n\nFor example:\n\n- When I use \"*hello* world\", it gets converted to \"*hello* world\".\n\n- When I use \"# hello world\", it does not increase the size of the text.\n\n- When I use \"[google](https://google.com)\", it does create a link, but the link is not blue colored.\n\nNot sure what the issue is here. If any more details are required, please let me know.\n\n========================================\n\nTop Answer:\nIts because of the tailwind.css\nin tailwind, h1 - h6 headers dont work.\n\nOption 1)\nadd this to your `tailwind.config.js`:\n\n```\nmodule.exports = {\n corePlugins: {\n preflight: false,\n },\n....\n}\n```\n\nsource :https://github.com/tailwindlabs/tailwindcss/issues/1460\n\nOption 2)Try adding custom css for `h1`..`h6` in your `css` file.\n\nhttps://www.w3schools.com/tags/tag_hn.asp *copy the styles from here*\n\nSimilarly try add custom css for other issues.\n\n========================================\n\nCode:\n```text\n// tailwind.config.js\nmodule.exports = {\n theme: {\n // ...\n },\n plugins: [\n require('@tailwindcss/typography'),\n // ...\n ],\n}\n```\n\n```text\nnpm install @tailwindcss/typography\n```\n\n```text\nyarn add @tailwindcss/typography\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nprose\n```\n\n```text\n<div class=\"prose\" v-html=\"cleanedMarkdown\"></div>\n```\n\n```js\nmodule.exports = {\n corePlugins: {\n preflight: false,\n },\n....\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nh1\n```\n\n```text\nh6\n```\n\n```text\ncss\n```\n\n========================================\n\nComments:\n- Option 1 wont work because it will remove all the core plugins..\n- If u inspect your markdown output, the link wont be blue because of the same reason..\n- for a `link` `css a:link { color: blue !important; background-color: transparent; text-decoration: none; }`\n- Thanks Kaartik. Adding custom CSS works, but I was wondering if there was a simpler way to do this. For example, lists also don't work here.\n- I was fighting this issue for hours. Thanks for the comment, man. I can add this documentation resources in addition to the github link you provided: tailwindcss.com/docs/typography-plugin\n- Worked for me, thanks. I'm very interested in why the styling does not work out of the box as the docs say, does tailwind do something to the default markdown styling?","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":115,"estimatedTokens":666}}302{"id":"stack-68458179","source":"stackoverflow","questionId":68458179,"title":"How do I get Tailwind grid to work on mobile under 640px?","tags":["tailwind-css"],"text":"Title: How do I get Tailwind grid to work on mobile under 640px?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nMy issue is that I can not see my pricing page on mobile view. The top line class is what I am looking at. here is the code that I had\n\n```\n\n \n \n \n \n \n \n\n```\n\nLooking at the docs I figured I just need to do grid grid-cols-1 but when I do nothing at all shows up. the page is just blank where the pricing should be on any screen size\n\n```\n\n \n \n \n \n \n \n\n```\n\n========================================\n\nTop Answer:\nI had the same problem and this is my solution, try it\n\n```\nmax-sm:mb-6...\n```\n\n========================================\n\nCode:\n```text\n<div data-target=\"pricing.yearlyPlans\" class=\"mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-1 sm:gap-6 md:grid-cols-2 xl:grid-cols-4\">\n <%= render 'free_plan' %>\n <% Plan.yearly.sorted.each do |plan| %>\n <%= render layout: \"subscriptions/styled_payment\", locals: { plan: plan } do %>\n <%= link_to plan.name, new_subscription_path(plan: plan.id), class: \"flex items-center justify-center mt-3 px-5 py-3 border border-transparent text-base font-medium rounded-md text-white hover:text-white bg-tertiary-500 hover:bg-gray-900\" %>\n <% end %>\n <% end %>\n</div>\n```\n\n```text\n<div data-target=\"pricing.yearlyPlans\" class=\"mt-12 space-y-4 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4\">\n <%= render 'free_plan' %>\n <% Plan.yearly.sorted.each do |plan| %>\n <%= render layout: \"subscriptions/styled_payment\", locals: { plan: plan } do %>\n <%= link_to plan.name, new_subscription_path(plan: plan.id), class: \"flex items-center justify-center mt-3 px-5 py-3 border border-transparent text-base font-medium rounded-md text-white hover:text-white bg-tertiary-500 hover:bg-gray-900\" %>\n <% end %>\n <% end %>\n</div>\n```\n\n```text\ntheme: {\n extend: {\n screens: { 'sm': { 'max': '640px' } },\n },\n},\n```\n\n```text\nmax-sm:mb-6...\n```\n\n========================================\n\nComments:\n- Hi @Jamie Can you please post an image of your output, before and after. As it will be easier for people visiting this question in the future to have a better idea.\n- There wasn't much of an image as the page was blank. My issue ended up being a tailwind css purge, I think I white listed sm:grid-col-1\n- This was the classes I used for the out come\n- Also kindly refer this docs tailwindcss.com/docs/responsive-design#targeting-mobile-scre‌​ens\n- Hi @Fazeel My doubt is that, the tailwind docs say that they are by default approached with the mobile first approach, so they do recommend to use the default styles for the mobile, and break them up at the breakpoints (sm, md, lg, xl) to match the larger screens, Kindly clarify me regarding this. Also a working example can be more useful for better understanding for the people visiting this question in the future. 😊\n- @SARANSURYA You should have a look on section \"Targeting mobile screens\" tailwindcss.com/docs/responsive-design I was working on responsive design, and I used sm breakpoint but it wasn't working for me when I visit my react app on mobile. By default media queries which tailwind generate contains min-value so sm breakpoint only works for screens 640px and wider.\n- So the default values should work for smaller screens right? As of what they mentioned in their YouTube channel. The classes without a breakpoint will by default work for mobile screens, and you can use the breakpoints from sm:,... 2xl: for the others right? Anyways thanks for the info. Also kindly check this tailwindcss.com/docs/responsive-design#targeting-mobile-scre‌​ens\n- Please do not upload images of code/data/errors.","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":88,"estimatedTokens":919}}303{"id":"stack-65231965","source":"stackoverflow","questionId":65231965,"title":"TailwindCSS: How to add elements from the right side in a grid?","tags":["grid","tailwind-css","right-align"],"text":"Title: TailwindCSS: How to add elements from the right side in a grid?\nTags: grid, tailwind-css, right-align\nSource: Stack Overflow\n\nQuestion:\nGiven the classnames \"grid grid-cols-5 gap-2 place-items-end\"\n\nI get:\nhttps://i.sstatic.net/zTe7t.png\n\nWanted:\nhttps://i.sstatic.net/CIJZa.png\n\nIs there a CSS-only way of resolving this ? Having to set a \"col-span-4\" on the 6h star from js is a bit tedious (considering the number of stars I can get is unknown).\n\n========================================\n\nCode:\n```text\n<div class=\"rtl-grid container w-96 bg-red-700 h-auto grid grid-cols-5 gap-4 p-4 -mt-4\">\n <div class=\"bg-white h-12\"></div>\n <div class=\"bg-white h-12\"></div>\n</div>\n```\n\n```text\n.rtl-grid {\n direction: rtl;\n}\n```\n\n```text\ndirection: rtl;\n```\n\n========================================\n\nComments:\n- `direction: rtl;` can be a possible way to achieve it. play.tailwindcss.com/lVJN7npilZ\n- lovely. If you make it an answer, I'll accept it, thanks a lot for sharing this trick!","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":40,"estimatedTokens":248}}304{"id":"stack-74840098","source":"stackoverflow","questionId":74840098,"title":"In Tailwindcss, how do I set a margin for the smallest screen only, and leave the rest screen sizes untouched","tags":["reactjs","tailwind-css"],"text":"Title: In Tailwindcss, how do I set a margin for the smallest screen only, and leave the rest screen sizes untouched\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn my specific case i want\n\n```\n\n```\n\nbut only if the screen is the smallest.\nDoing:\n\n```\n\n```\n\nwill have the opposite affect (of setting margin to auto for small screens and up).\n\n========================================\n\nCode:\n```text\n<div className=\"mx-auto\"...</div>\n```\n\n```text\n<div className=\"sm:mx-auto\"...</div>\n```\n\n```text\nmax-sm:mx-auto\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":34,"estimatedTokens":133}}305{"id":"stack-54308899","source":"stackoverflow","questionId":54308899,"title":"How can I use apply here?","tags":["css","tailwind-css"],"text":"Title: How can I use apply here?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using tailwind css to customize my menu. I have a bunch of buttons and I want to change the first letter of each button's content to show the linked shortcut. This is used by Blizzard in Warcraft3:\n\nTailwind's docs provide a button example. It works as expected.\n\nTo change the color of my letter. I can use the css pseudo element first-letter.\n\nBut, there is a problem (or I would not be here). `apply` works in the tailwind example but not with my custom css. Does `apply` only, well, apply to tailwind's own css? What did I miss?\n\n\r\n\r\n\n```\n.btn {\r\n @apply font-bold py-2 px-4 rounded; /* works as expected */\r\n }\r\n .btn-blue {\r\n @apply bg-blue text-white; /* works as expected */\r\n }\r\n .btn-blue:hover {\r\n @apply bg-blue-dark; /* works as expected */\r\n }\r\n \r\n.btn::first-letter {\r\n font-size: 130%; /* works as expected */\r\n @apply bg-orange; /* nope */\r\n}\r\n\r\ndiv::first-letter {\r\n font-size: 130%; /* works as expected */\r\n @apply bg-orange; /* nope */\r\n}\r\n\r\ndiv {\r\n @apply bg-red; /* nope */\r\n}\n```\n\n\r\n\n```\n\r\n\r\n\r\n Button\r\n\r\n\r\n\r\n\r\n Button\r\n\r\n\r\n\r\n\r\nsd\r\n\n```\n\n\r\n\r\n\r\n\njsfiddle to mess around\n\n========================================\n\nTop Answer:\nAs of 2024, you can use `@apply` even with the CDN build. This is done by placing your style definition in a special `` tag:\n\n```\n\n .custom {\n @apply flex flex-row;\n }\n \n```\n\n========================================\n\nCode:\n```css\n.btn {\n @apply font-bold py-2 px-4 rounded; /* works as expected */\n }\n .btn-blue {\n @apply bg-blue text-white; /* works as expected */\n }\n .btn-blue:hover {\n @apply bg-blue-dark; /* works as expected */\n }\n \n.btn::first-letter {\n font-size: 130%; /* works as expected */\n @apply bg-orange; /* nope */\n}\n\ndiv::first-letter {\n font-size: 130%; /* works as expected */\n @apply bg-orange; /* nope */\n}\n\ndiv {\n @apply bg-red; /* nope */\n}\n```\n\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n<!-- Using utilities: -->\n<button class=\"bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded\">\n Button\n</button>\n\n<!-- Extracting component classes: -->\n<button class=\"btn btn-blue\">\n Button\n</button>\n\n\n<div>\nsd\n</div>\n```\n\n```text\napply\n```\n\n```text\napply\n```\n\n```text\n@apply\n```\n\n```text\n.btn\n```\n\n```text\n.btn-blue\n```\n\n```html\n<style type=\"text/tailwindcss\">\n .custom {\n @apply flex flex-row;\n }\n </style>\n```\n\n```text\n@apply\n```\n\n```text\n<style>\n```\n\n========================================\n\nComments:\n- Note that @hillin posted a working solution introduced this year.","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":168,"estimatedTokens":664}}306{"id":"stack-72381228","source":"stackoverflow","questionId":72381228,"title":"How can I vertically center this \"Content\" div with TailwindCSS?","tags":["tailwind-css"],"text":"Title: How can I vertically center this \"Content\" div with TailwindCSS?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'd like to vertically center the div containing \"Content\" here using TailwindCSS and without resizing the width of the div:\n\n```\n\n \n \n \n Header.\n\n \n \n \n\n \n \n \n \n \n Content.\n \n \n \n \n \n\n```\n\nHere's an example of what this currently looks like: https://play.tailwindcss.com/whHEd0QsMB.\n\nHow can this div be vertically centered such that it doesn't change the width sizing behavior of the div?\n\n========================================\n\nTop Answer:\nTailwindCss works on the mobile-first design. Your style is mostly inspired from bootstrap.\n\nUnsure about your experience with tailwindCss. I want to attempt to clearly convey the concept i have understood with my experience instead of just answering. Hope it helps.\n\nAs said above . Tailwind works on mobile first design, meaning any design you build is assumed to work on the mobile , and then for medium and larger devices appropriate tweeks are to be done.\nSo `px-4 md:px-6 lg:px-8` is preferred over `px-6 sm:px-4 lg:px-8` unless you want to be very specific with the design below `sm:` i.e mobile design\n\nAnd if you are targetting design for devices of size between `sm` to `md` , you'll have to use `sm:` then.\n\nLet's understand even further with the solution to the problem you are facing.\n\nI have kept things simple. So that i concentrate more on the concept rather than just the code and for simplicity we'll consider we are focusing on just the mobile devices i.e anything less than `md:` and anything above the `md:` with different design.\n\nThe code goes like:\n\n```\n\n \n \n Header\n \n \n \n Content\n \n \n \n\n```\n\n**The code logic:**\n\n- The entire display type is set to `flex` and made it `flex-col` because by default it is `flex-row`\n\n- Inside which there are two items `header` and `main`\n\n- And to align the just a `text` to the center we use `text-center`\n\n- By default childrens of flex take just the height of its child, so to give the `main` complete height we use `flex-1` property to fill the entire available in parent space.\n\n- `justify-center` and `items-center` is to center all the children inside the `main` , in our case it is `Content`\n\n- You can ignore the responsive design , i had put it to understand the tailwindcss's responsive design better.\n\n**For medium size devices:**\n\n- header with margin of m-2\ncontent with padding of p-2\nhttps://i.sstatic.net/CheKw.png\n\n**For every devices less than medium size**\n\n- header with margin of m-4\ncontent with padding of p-6\nhttps://i.sstatic.net/hNJJ0.png\n\nHope it helps !!\n\n========================================\n\nCode:\n```text\n<div class=\"flex h-screen min-h-full flex-col justify-center bg-gray-100\">\n <header class=\"h-10 bg-blue-600 text-white\">\n <div class=\"mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8\">\n <div class=\"pr-16 sm:px-16 sm:text-center\">\n <p class=\"font-small text-white\"><span class=\"md:inline\">Header.</span></p>\n </div>\n </div>\n </header>\n\n <main class=\"flex-grow place-content-center\">\n <div class=\"mx-auto max-w-6xl pb-10 lg:py-12 lg:px-8\">\n <div class=\"space-y-6 sm:px-6 lg:col-span-12 lg:px-0\">\n <div class=\"min-w-0 flex-1\">\n <div class=\"shadow sm:overflow-hidden sm:rounded-md\">\n <div class=\"bg-white px-4 py-6 sm:p-6\">Content.</div>\n </div>\n </div>\n </div>\n </div>\n </main>\n</div>\n```\n\n```text\nflex flex-col\n```\n\n```text\nw-full\n```\n\n```text\nflex\n```\n\n```text\n<div class=\"flex min-h-full flex-col bg-gray-200\">\n <header class=\"h-10 bg-blue-600 text-white\">\n <div class=\"mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8\">\n <div class=\"pr-16 sm:px-16 sm:text-center\">\n <p class=\"font-small text-white\"><span class=\"md:inline\">Header.</span></p>\n </div>\n </div>\n </header>\n\n <main class=\"flex h-screen w-full place-content-center items-center\">\n <div class=\"mx-auto w-full max-w-6xl pb-10 lg:py-12 lg:px-8\">\n <div class=\"space-y-6 sm:px-6 lg:col-span-12 lg:px-0\">\n <div class=\"min-w-0 flex-1\">\n <div class=\"shadow sm:overflow-hidden sm:rounded-md\">\n <div class=\"bg-white px-4 py-6 sm:p-6\">Content.</div>\n </div>\n </div>\n </div>\n </div>\n </main>\n</div>\n```\n\n```text\n<div>\n <div className=\"flex h-screen flex-col bg-gray-100\">\n <header className=\"text-white text-center bg-blue-600 m-4 md:m-2\">\n Header\n </header>\n <main className=\" flex flex-1 justify-center items-center\">\n <div className=\"shadow bg-white rounded-md p-6 md:p-2 w-full text-center\">\n Content\n </div>\n </main>\n </div>\n</div>\n```\n\n```text\npx-4 md:px-6 lg:px-8\n```\n\n```text\npx-6 sm:px-4 lg:px-8\n```\n\n```text\nsm:\n```\n\n```text\nsm\n```\n\n```text\nmd\n```\n\n```text\nsm:\n```\n\n```text\nmd:\n```\n\n```text\nmd:\n```\n\n```text\nflex\n```\n\n```text\nflex-col\n```\n\n```text\nflex-row\n```\n\n```text\nheader\n```\n\n```text\nmain\n```\n\n```text\ntext\n```\n\n```text\ntext-center\n```\n\n```text\nmain\n```\n\n```text\nflex-1\n```\n\n```text\njustify-center\n```\n\n```text\nitems-center\n```\n\n```text\nmain\n```\n\n```text\nContent\n```\n\n========================================\n\nComments:\n- Do you want to vertically center the div containing content or the content inside the div. If you want to center content in div use flex and center-items class.\n- The former not the latter.\n- In this version I have replaced the `h-screen` with `min-h-[calc(100vh-2.5rem)]` which helps take into account the header height. play.tailwindcss.com/tZ0sD7mUL9\n- This indeed works. Thank you!\n- The example is based on TailwindUI, not Bootstrap. The media queries related to padding and margins aren’t really relevant to the question being asked. Your answer does not explain how to center the div (although based on the screenshot it might work).\n- I gave an insight of how the code is supposed to look , you want me to explain how the div is centred ? I can edit my answer. I guess the div being centred is self explanatory because of the minimal code written , let me know if any changes required , or if you are expecting a definite answer\n- I focused on the actual concept and actual best practices followed in tailwind and tried to explain the concept as in whole .., instead of just directly answering the question . Next time I'll try to keep it short and very relevant to the question asked . Thank you !\n- I just now added the code explanation, . I tried to precisely give a solution and explanation to the problem you were facing in the simple way, hope the edit helps. Thank you !","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":27,"totalLines":270,"estimatedTokens":1636}}307{"id":"stack-54764833","source":"stackoverflow","questionId":54764833,"title":"Flexbox children not having same height","tags":["html","css","flexbox","alignment","tailwind-css"],"text":"Title: Flexbox children not having same height\nTags: html, css, flexbox, alignment, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI thought flexbox makes its children having same height, meaning all children will be as tall as the highest (tallest) child and parent makes this by having default value of align-stretch for cross axis (if it is flex-row). In my case it is not like so.\nI have following pen:\n Codepen link \n\n```\n\n \n \n\n### Smaller text\n\n This one has smaller text\n\n \n \n \n\n### Bigger text that controls element height\n\n \n Blue element has more text thus making red element smaller and unable to fit entire height \n \n\n \n\n```\n\nNote that taller element (background red) is not having same height as the blue element. \n\nI am using tailwind.css here, but I think code is self explanatory.\n\n========================================\n\nCode:\n```text\n<div class=\"flex w-full items-center flex-wrap\">\n <div class=\"flex flex-col md:w-1/2 items-center px-16 py-20 bg-red\">\n <h2 class=\"marjan-col\">Smaller text</h2>\n <p>This one has smaller text</p>\n </div>\n <div class=\"flex flex-col md:w-1/2 items-center px-16 py-20 bg-blue\">\n <h2 class=\"text-white\">Bigger text that controls element height</h2>\n <p class=\"text-white\">\n Blue element has more text thus making red element smaller and unable to fit entire height \n </p>\n </div>\n</div>\n```\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css\">\n\n<div class=\"flex w-full flex-wrap\">\n <!-- CHANGED HERE -->\n\n <div class=\"flex flex-col md:w-1/2 items-center px-16 py-20 bg-red\">\n <h2 class=\"marjan-col\">Smaller text</h2>\n <p>This one has smaller text</p>\n </div>\n\n <div class=\"flex flex-col md:w-1/2 items-center px-16 py-20 bg-blue\">\n <h2 class=\"text-white\">Bigger text that controls element height</h2>\n <p class=\"text-white\">\n Blue element has more text thus making red element smaller and unable to fit entire height\n </p>\n </div>\n</div>\n```\n\n```text\nitems-center\n```\n\n```text\nalign-items: center\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":81,"estimatedTokens":519}}308{"id":"stack-76499537","source":"stackoverflow","questionId":76499537,"title":"How to make a button a linear gradient color border in tailwind css?","tags":["javascript","reactjs","next.js","tailwind-css"],"text":"Title: How to make a button a linear gradient color border in tailwind css?\nTags: javascript, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying Nextjs and tailwind css i created a simple page with that but now i am facing a problem that i want to make the button a linear gradient color border in tailwind css how can i do that with my code?\n\n```\n\n \n Learn More\n \n \n```\n\n========================================\n\nTop Answer:\nThis worked for me\n\n\r\n\r\n\n```\n\n \n Gradient border\n \n\n```\n\n========================================\n\nCode:\n```text\n<Link href={'/about'}>\n <button className=\"bg-black-500 hover:bg-blue-700 mt-5 text-white font-bold py-2 px-4 rounded-full border border-blue-500 shadow-md transition duration-300 ease-in-out transform hover:scale-105\">\n Learn More\n </button>\n </Link>\n```\n\n```html\n<button class=\"bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold py-2 px-4 rounded\">\n Gradient Button\n </button>\n```\n\n```html\n<button class=\"bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold rounded p-1\">\n <span class=\"flex w-full bg-gray-900 text-white rounded p-2\">\n Gradient border\n </span>\n</button>\n```\n\n```text\n<Link href=\"/about\">\n <button className=\"relative mt-5 text-white font-bold py-2 px-4 rounded-full overflow-hidden shadow-md transition duration-300 ease-in-out transform hover:scale-105\">\n <span className=\"relative z-10\">Learn More</span>\n <span className=\"absolute inset-0 bg-gradient-to-r from-blue-500 to-green-500 border-2 border-transparent rounded-full\"></span>\n </button>\n</Link>\n```\n\n```text\nbg-gradient-to\n```\n\n```text\nfrom\n```\n\n```text\nto\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<button class=\"bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold rounded p-1\">\n <span class=\"flex w-full bg-gray-900 text-white rounded p-2\">\n Gradient border\n </span>\n</button>\n```\n\n========================================\n\nComments:\n- Here is an example of a gradient border: dhairyashah.dev/posts/…\n- @BrijeshBhakta Can you please give me a simple code example? i saw that blog post how to do things in my code please?\n- I am saying to say that How can i make the border linear gradient its making the whole color background color linear gradient\n- @cwecae, now please check and let me know if this meets your requirement.\n- Thank you for trying the but the above code by @Vibhor works\n- Thanks this works well for Gradient border code how can i make it like when a user hover over it hover over with a Gradient background color\n- Sure. You can add a `group` class on the button element and `group-hover:bg-transparent` class on the span element. That way when the user will hover over the button the full gradient will be visible instead of the border. You can learn more about it here tailwindcss.com/docs/hover-focus-and-other-states","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":96,"estimatedTokens":731}}309{"id":"stack-70306004","source":"stackoverflow","questionId":70306004,"title":"Running Cypress tests with TailwindCSS 3","tags":["cypress","vuejs3","tailwind-css","cypress-component-test-runner"],"text":"Title: Running Cypress tests with TailwindCSS 3\nTags: cypress, vuejs3, tailwind-css, cypress-component-test-runner\nSource: Stack Overflow\n\nQuestion:\nI've been running my component tests via `cypress open-ct` for a while now, relying on importing `/node_modules/tailwindcss/dist/tailwindcss.min.css`.\n\nSince upgrading to Tailwind v3 some of my tests are failing as there is no prebuilt CSS file I can import - everything is generated just in time.\n\nFor example, testing if a modal closes when clicking on a overlay that is fixed and full width fails as the whole modal is rendered so that it is inaccessible by Cypress.\n\nAnother side-issue that stems from not having access to Tailwind classes is that videos recorded when running tests in CI are unusable as they are just a bunch of random native elements.\n\nI've been importing Tailwind like this at the top of each Test file (before describes)\n\n```\nimport { mount } from '@cypress/vue'\nimport '/node_modules/tailwindcss/dist/tailwind.min.css'\nimport MultiSelectField from './MultiSelectField.vue'\nimport { ref } from \"vue\";\n```\n\nAny ideas how to include Tailwind (preferably globally) so tests won't fail?\n\n========================================\n\nTop Answer:\nMichael Hays' solution works, but it rebuilds the whole `.css` file every time changes to the code are made, which slows tests down. An alternative would be to run tailwind externally in watch mode.\n\n```\nnpm i -D concurrently\n```\n\n### package.json\n\n```\n\"scripts\": {\n \"test\": \"concurrently \\\"tailwindcss -i ./src/index.css -o ./dist/index.css --watch\\\" \\\"cypress open\\\" \"\n },\n```\n\n### cypress/support/component.ts\n\n```\nimport \"../../dist/index.css\";\n```\n\n========================================\n\nCode:\n```text\nimport { mount } from '@cypress/vue'\nimport '/node_modules/tailwindcss/dist/tailwind.min.css'\nimport MultiSelectField from './MultiSelectField.vue'\nimport { ref } from \"vue\";\n```\n\n```text\ncypress open-ct\n```\n\n```text\n/node_modules/tailwindcss/dist/tailwindcss.min.css\n```\n\n```js\nbefore(() => {\n cy.exec('npx tailwindcss -i ./src/styles/globals.css -m').then(\n ({ stdout }) => {\n if (!document.head.querySelector('#tailwind-style')) {\n const link = document.createElement('style')\n link.id = 'tailwind-style'\n link.innerHTML = stdout\n\n document.head.appendChild(link)\n }\n },\n )\n})\n```\n\n```js\nimport '../plugins/tailwind'\n```\n\n```json\n{\n \"component\": {\n \"supportFile\": \"cypress/support/component.js\",\n },\n \"e2e\": {\n \"supportFile\": \"cypress/support/e2e.js\"\n }\n}\n```\n\n```text\ncypress/plugins/tailwind.js\n```\n\n```text\n-i\n```\n\n```text\n./src/styles/globals.css\n```\n\n```text\ncypress/support/index.js\n```\n\n```text\ncypress/support/component.js\n```\n\n```text\ncypress.json\n```\n\n```text\nimport '../plugins/tailwind'\n```\n\n```text\ncypress/support/component.js\n```\n\n```text\nimport '/node_modules/tailwindcss/dist/tailwind.min.css'\n```\n\n```text\nhttps://cdn.tailwindcss.com/\n```\n\n```bash\nnpm i -D concurrently\n```\n\n```json\n\"scripts\": {\n \"test\": \"concurrently \\\"tailwindcss -i ./src/index.css -o ./dist/index.css --watch\\\" \\\"cypress open\\\" \"\n },\n```\n\n```text\nimport \"../../dist/index.css\";\n```\n\n```text\n.css\n```\n\n========================================\n\nComments:\n- Thanks for you response. Customisation isn't much of an issue because I am using TailwindUI out of the box with minimal changes to tailwind config. I will try to fiddle with CDN but am curious how it will work out since the CDN version is no longer a CSS file, but a JS file that lets you specify your config on any website and using classes like `mt-[20px]`.\n- Allright - injecting the CDN in a `` tag before each test works for now. Thanks again!\n- Thanks for Your response! This is actually much cleaner and predictable and was a breeze to implement! Working as expected, thank you very much\n- I get an error: `ReferenceError: before is not defined` Is there any other imports needed in the `cypress/plugins/tailwind.js` file?","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":161,"estimatedTokens":992}}310{"id":"stack-71349311","source":"stackoverflow","questionId":71349311,"title":"How to use Tailwind CSS with Yew?","tags":["rust","tailwind-css","yew","trunk-rs"],"text":"Title: How to use Tailwind CSS with Yew?\nTags: rust, tailwind-css, yew, trunk-rs\nSource: Stack Overflow\n\nQuestion:\nI have tried to the steps described in https://dev.to/arctic_hen7/how-to-set-up-tailwind-css-with-yew-and-trunk-il9 to make use of Tailwind CSS in Yew, but it doesn't work.\n\nMy test project folder:\n\nhttps://i.sstatic.net/g0FOd.png\n\nCargo.toml:\n\n```\n[package]\nname = \"yew-tailwind-app\"\nversion = \"0.1.0\"\nedition = \"2021\"\n\n[dependencies]\nyew = { version = \"0.19\" }\n```\n\nindex.html:\n\n```\n\n \n \n \n\n \n \n\n```\n\nThe codes in main.rs:\n\n```\nuse yew::prelude::*;\n\n#[function_component(App)]\nfn app() -> Html {\n html! {\n <>\n \n\n### { \"Hello World\" }\n\n {\"Test!\"}\n\n \n }\n}\n\nfn main() {\n yew::start_app::();\n}\n```\n\nBut I don't see the red background color in \"Test!\". Can you help?\n\nhttps://i.sstatic.net/g4ImS.png\n\n========================================\n\nTop Answer:\nI think by far the cleanest solution is to use a trunk hook to build the CSS using the tailwind CLI. Something like is described here: https://www.matsimitsu.com/blog/2022-01-04-taliwind-cli-with-yew-and-trunk/\n\nI personally installed the tailwind cli via yarn with a package.json (or npm if you prefer), but it's the same idea.\n\nOne benefit of this is the biggest benefit of tailwind: only the classes you need are included in the generated file.\n\nAdditionally, the use of the trunk hook means it's recompiled whenever trunk re-builds, including during development, and there's no unnecessary css files elsewhere in the project, it just uses the generated one.\n\n========================================\n\nCode:\n```ini\n[package]\nname = \"yew-tailwind-app\"\nversion = \"0.1.0\"\nedition = \"2021\"\n\n[dependencies]\nyew = { version = \"0.19\" }\n```\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <link data-trunk href=\"./tailwind.css\" rel=\"css\" />\n </head>\n\n <body>\n </body>\n</html>\n```\n\n```rust\nuse yew::prelude::*;\n\n#[function_component(App)]\nfn app() -> Html {\n html! {\n <>\n <h1>{ \"Hello World\" }</h1>\n <p class={ classes!(\"bg-red-500\") }>{\"Test!\"}</p>\n </>\n }\n}\n\nfn main() {\n yew::start_app::<App>();\n}\n```\n\n```js\nmodule.exports = {\n content: [\"./src/**/*.{html,rs}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nnpx tailwindcss -i ./input.css -o ./output.css --watch\n```\n\n```text\n<script src=\"https://cdn.tailwindcss.com\"></script>\n```\n\n```ini\n[build]\ntarget = \"index.html\"\ndist = \"dist\"\n\n[[hooks]]\nstage = \"build\"\ncommand = \"sh\"\ncommand_arguments = [\n \"-c\",\n \"npx @tailwindcss/cli -i ./PATH_TO_TAILWIND/tailwind.css -o $TRUNK_STAGING_DIR/tailwind.css --minify\",\n]\n```\n\n```text\nTrunk.toml\n```\n\n========================================\n\nComments:\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- Make use of Yew Tailwind builder indeed works. Thank you.\n- I have tried your solution, but it still doesn't work.","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":164,"estimatedTokens":775}}311{"id":"stack-73469689","source":"stackoverflow","questionId":73469689,"title":"VueJS/Tailwind CSS/VITE: use env variables as colors for a Tailwind theme","tags":["vue.js","tailwind-css","vite"],"text":"Title: VueJS/Tailwind CSS/VITE: use env variables as colors for a Tailwind theme\nTags: vue.js, tailwind-css, vite\nSource: Stack Overflow\n\nQuestion:\nI have a VueJS setup with Vite, Tailwind CSS and postcss, and would like to define different colors using variables in a `.env.name` file so that I can apply different color themes depending where the code is deployed.\n\nI tried with a `.env` file containing\n\n```\nVITE_COLOR=\"FF0000\"\n```\n\nand an import within the `tailwind.config.js`\n\n```\n...\ntheme: {\n colors: {\n primary: import.meta.env.COLOR\n }\n}\n...\n```\n\nHowever, I get the following error:\n\nSyntaxError: Cannot use 'import.meta' outside a module\n\nWhat do I have to change to get this to work or is there an even better method?\n\n========================================\n\nCode:\n```text\nVITE_COLOR=\"FF0000\"\n```\n\n```js\n...\ntheme: {\n colors: {\n primary: import.meta.env.COLOR\n }\n}\n...\n```\n\n```text\n.env.name\n```\n\n```text\n.env\n```\n\n```text\ntailwind.config.js\n```\n\n```bash\nnpm i dotenv\n```\n\n```js\nrequire('dotenv').config()\n\nmodule.exports = {/** */}\n```\n\n```text\nANY_COLOR='#ffc8dd'\n```\n\n```js\ntheme: {\n colors: {\n primary: process.env.ANY_COLOR\n }\n}\n```\n\n```css\n:root {\n --theme-color: #ffc8dd;\n}\n```\n\n```js\ntheme: {\n colors: {\n primary: 'var(--theme-color)'\n }\n}\n```\n\n```text\nimport\n```\n\n```text\n.env\n```\n\n```text\nVITE_\n```\n\n```text\n.env\n```\n\n```text\nstyle\n```\n\n```text\n<head>\n```\n\n```text\nindex.html\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":18,"totalLines":123,"estimatedTokens":361}}312{"id":"stack-75915737","source":"stackoverflow","questionId":75915737,"title":"Tailwind - Is there a way to disable preflight ONLY for ul / ol lists?","tags":["html","tailwind-css"],"text":"Title: Tailwind - Is there a way to disable preflight ONLY for ul / ol lists?\nTags: html, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn tailwind, `ul` and `ol` lists are unstyled by default due to preflight. I need lists to work as they normally do before preflight strips it to nothing. Specifically, I need bullets to appear and nested bullets to appear and be indented. Putting the following code in `application.tailwind.css` doesn't work (nested lists don't appear as they should):\n\n```\n@layer base {\n ul, ol {\n list-style: revert;\n }\n}\n```\n\nExpected:\n\nitem1\n\n- item2\n\n- item3\n\nCurrent:\n\n- item1\n\n- item2\n\n- item3\n\nis there any way to make lists appear normal?\n\n========================================\n\nCode:\n```text\n@layer base {\n ul, ol {\n list-style: revert;\n }\n}\n```\n\n```text\nul\n```\n\n```text\nol\n```\n\n```text\napplication.tailwind.css\n```\n\n```text\n@layer base {\n ul, ol {\n list-style: revert;\n margin: revert;\n padding: revert;\n }\n}\n```\n\n```text\nrevert\n```\n\n```text\nmargin\n```\n\n```text\npadding\n```\n\n```text\napplication.tailwind.css\n```\n\n========================================\n\nComments:\n- For what it's worth, I'm trying to get pymdownx.fancylists working in a Django application. Tailwind's preflight kept overriding the fancylists features. When I used the code here it just reverted back to browser defaults and wouldn't allow for use of fancylists settings. I had to change it to `list-style: revert-layer` to make it work.","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":86,"estimatedTokens":365}}313{"id":"stack-77666669","source":"stackoverflow","questionId":77666669,"title":"VSCode - EsLint warning \"Classname is not a Tailwind CSS class\" shown mistakenly","tags":["reactjs","visual-studio-code","tailwind-css","eslint","vite"],"text":"Title: VSCode - EsLint warning \"Classname is not a Tailwind CSS class\" shown mistakenly\nTags: reactjs, visual-studio-code, tailwind-css, eslint, vite\nSource: Stack Overflow\n\nQuestion:\nIn my vite + react + tailwind project, I get the following warning by VsCode:\n\nhttps://i.sstatic.net/j2kB2.png\n\nHowever, the font-size `myLarge` is correctly defined in my `tailwind.config.js`:\n\n```\nmodule.exports = {\n content: [\"./src/**/*.{ts,tsx}\"],\n theme: {\n extend: {\n fontSize: {\n myLarge: \"10rem\",\n },\n },\n },\n};\n```\n\n- As we can see in the screenshot, the IDE correctly recognizes the css rule for `text-myLarge`\n\n- If I run `npm run lint` in a terminal outside of the IDE the warning is NOT shown\n\n- The font-size is CORRECTLY applied in the app, when I view it in the browser\n\n- I do not want to disable the `\"tailwindcss/no-custom-classname\"` rule. I just want it to be correctly applied in VsCode\n\nCan you help me on how to fix that warning in VsCode? Are there any settings I'm missing? I've already restarted the VsCode Eslint-server and also the whole IDE. Do you have any hints on how to track down that issue?\n\nFor reference, this is my `.eslintrc.js`:\n\n```\nmodule.exports = {\n root: true,\n env: { browser: true, es2020: true, node: true },\n extends: [\n \"eslint:recommended\",\n \"plugin:@typescript-eslint/recommended\",\n \"plugin:react-hooks/recommended\",\n \"prettier\",\n \"plugin:tailwindcss/recommended\",\n ],\n ignorePatterns: [\"dist\"],\n parser: \"@typescript-eslint/parser\",\n plugins: [\"react\"],\n rules: {\n \"tailwindcss/no-custom-classname\": [\n \"warn\",\n {\n cssFiles: [\"src/**/*.css\"],\n callees: [\"classnames\", \"clsx\", \"twMerge\", \"cn\"],\n },\n ],\n },\n};\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n content: [\"./src/**/*.{ts,tsx}\"],\n theme: {\n extend: {\n fontSize: {\n myLarge: \"10rem\",\n },\n },\n },\n};\n```\n\n```text\nmodule.exports = {\n root: true,\n env: { browser: true, es2020: true, node: true },\n extends: [\n \"eslint:recommended\",\n \"plugin:@typescript-eslint/recommended\",\n \"plugin:react-hooks/recommended\",\n \"prettier\",\n \"plugin:tailwindcss/recommended\",\n ],\n ignorePatterns: [\"dist\"],\n parser: \"@typescript-eslint/parser\",\n plugins: [\"react\"],\n rules: {\n \"tailwindcss/no-custom-classname\": [\n \"warn\",\n {\n cssFiles: [\"src/**/*.css\"],\n callees: [\"classnames\", \"clsx\", \"twMerge\", \"cn\"],\n },\n ],\n },\n};\n```\n\n```text\nmyLarge\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntext-myLarge\n```\n\n```text\nnpm run lint\n```\n\n```text\n\"tailwindcss/no-custom-classname\"\n```\n\n```text\n.eslintrc.js\n```\n\n```text\nsettings: {\n tailwindcss: {\n config: path.join(__dirname, \"./tailwind.config.js\"),\n },\n },\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n.eslintrc.js\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":143,"estimatedTokens":726}}314{"id":"stack-74038347","source":"stackoverflow","questionId":74038347,"title":"How to add Flowbite Tailwind plugin to my Laravel 9 + Vite project?","tags":["vuejs3","tailwind-css","vite","laravel-9","flowbite"],"text":"Title: How to add Flowbite Tailwind plugin to my Laravel 9 + Vite project?\nTags: vuejs3, tailwind-css, vite, laravel-9, flowbite\nSource: Stack Overflow\n\nQuestion:\nI tried adding flowbite to my Laravel project. I am using Laravel version 9 with Vite.\n\nSo far, I did the following steps:\n\n- Installed `flowbite` as a dependency:\n\n```\nnpm i flowbite\n```\n\n- Added plugin in `tailwind.config.js`:\n\n```\nplugins: [\n require('@tailwindcss/forms'),\n require('@tailwindcss/typography'),\n require('flowbite/plugin')\n],\n```\n\n- I imported it in `App.js`:\n\n```\nimport Flowbite from 'flowbite';\n\n4. Then I ran the app:\n```shell\nnpm run dev\n```\n\nI also tried adding it using CDN links, but it's not working.\n\nCould someone please tell me what I am doing wrong? Or maybe you can suggest me a better library to use with Tailwind CSS, as Tailwind doesn't provide js components like tooltip, dropdown, etc.\n\n```\ncreateInertiaApp({\n title: (title) => `${title} - ${appName}`,\n resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),\n setup({ el, app, props, plugin }) {\n return createApp({ render: () => h(app, props) })\n .use(plugin)\n .use(ZiggyVue, Ziggy)\n .mixin({ components: { FilePond } })\n .mount(el);\n },\n});\n```\n\n========================================\n\nTop Answer:\nFor me worked to add this line of code in to the app.js\n\n```\nimport 'flowbite';\n```\n\n========================================\n\nCode:\n```bash\nnpm i flowbite\n```\n\n```js\nplugins: [\n require('@tailwindcss/forms'),\n require('@tailwindcss/typography'),\n require('flowbite/plugin')\n],\n```\n\n```js\nimport Flowbite from 'flowbite';\n\n\n4. Then I ran the app:\n```shell\nnpm run dev\n```\n\n```text\ncreateInertiaApp({\n title: (title) => `${title} - ${appName}`,\n resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),\n setup({ el, app, props, plugin }) {\n return createApp({ render: () => h(app, props) })\n .use(plugin)\n .use(ZiggyVue, Ziggy)\n .mixin({ components: { FilePond } })\n .mount(el);\n },\n});\n```\n\n```text\nflowbite\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nApp.js\n```\n\n```js\nimport { initFlowbite } from 'flowbite';\n \nonMounted(() => {\n initFlowbite();\n});\n```\n\n```text\nApp.vue\n```\n\n```text\ninitFlowbite\n```\n\n```text\n'flowbite'\n```\n\n```text\nonMounted\n```\n\n```text\nApp.vue\n```\n\n```html\n<link href=\"{{ url('css/flowbite.min.css') }}\" rel=\"stylesheet\" />\n<script src=\"{{ url('js/flowbite.js') }}\" type=\"text/javascript\"></script>\n```\n\n```js\nimport \"../../path/to/node_modules/flowbite/dist/flowbite\"; // @see https://flowbite.com/docs/getting-started/laravel/\n```\n\n```php\n<script src=\"{{ \\Illuminate\\Support\\Facades\\Vite::asset('resources/js/app.js') }}\"></script>\n```\n\n```text\nimport 'flowbite';\n```\n\n========================================\n\nComments:\n- Keep your question properly formatted rather than rollback'ing it to a previous state, your question is self-answered anyway so I don't really see the benefit of making the question look worse.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.909Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":162,"estimatedTokens":835}}315{"id":"stack-70820966","source":"stackoverflow","questionId":70820966,"title":"Adding a className dynamically in React.js with Tailwind.css","tags":["reactjs","react-hooks","tailwind-css"],"text":"Title: Adding a className dynamically in React.js with Tailwind.css\nTags: reactjs, react-hooks, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nLet's say I have a React component that gets the Tailwind class name from `props`\nfor example :\n\n```\nimport React from \"react\";\n\nexport default function Header({navColor}) {\n\n return (\n //I want to add a class that it's name is the (navColor) value to the nav tag \n TEST\n \n );\n}\n```\n\nHow can achieve this?\n\n========================================\n\nTop Answer:\n```\nimport classNames from \"classnames\";\nimport React from \"react\";\n\nexport default function Header({ navColor }) {\n const headerClass = classNames(\n \"flex justify-center items-center text-white text-xl h-14\",\n navColor,\n );\n return TEST;\n}\n```\n\nclassNames is also one of good option. You don't have to worry about misadding whitespace.\n\n========================================\n\nCode:\n```text\nimport React from \"react\";\n\nexport default function Header({navColor}) {\n\n return (\n <nav\n className=\"flex justify-center items-center text-white text-xl h-14\"> //I want to add a class that it's name is the (navColor) value to the nav tag \n TEST\n </nav>\n );\n}\n```\n\n```text\nprops\n```\n\n```text\n<nav\n className={`flex justify-center items-center text-white text-xl h-14 ${navColor}`}> \n TEST\n</nav>\n```\n\n```text\n${}\n```\n\n```js\nimport classNames from \"classnames\";\nimport React from \"react\";\n\nexport default function Header({ navColor }) {\n const headerClass = classNames(\n \"flex justify-center items-center text-white text-xl h-14\",\n navColor,\n );\n return <nav className={headerClass}>TEST</nav>;\n}\n```\n\n========================================\n\nComments:\n- This npm package is better for that purpose => npmjs.com/package/classnames\n- Thank you, what are the benefits of using this library over Template literals?\n- It abstract out all the possible ways to set class name dynamically with different conditions into a single function. You can reuse it everywhere.\n- Related: How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?\n- Not much need for `classnames` dependency when we can use template literals as above answer.\n- @CodeFinity Penguin's point is, not worrying about whitespaces. That's a big headache. Thats what classnames is solving. Not every dependency is heavy. Its a minimalistic function github.com/JedWatson/classnames/blob/main/index.js Thats all","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":95,"estimatedTokens":618}}316{"id":"stack-66792725","source":"stackoverflow","questionId":66792725,"title":"Tailwind doesn't apply some font size classes","tags":["css","reactjs","tailwind-css"],"text":"Title: Tailwind doesn't apply some font size classes\nTags: css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nSo I started using Tailwind 2.0 in my React project and most things seem to work fine. Colors, sizing, flexbox, grid, etc. No problem with these utilities so far. But for some reason some font-size classes won't work properly. For instance, if I use `text-lg`, the style is applied\nas you can see here.\n\nBut if I try anything bigger than that, like `text-2x1` or higher, the class isn't applied.\n\nI searched around a lot but didn't find anything that could help me.\n\nI don't know it this helps, but that's my config file (even though it was already happening even before I made any change to it):\n\n```\nmodule.exports = {\n purge: [\"./src/**/*.{js,jsx,ts,tsx}\", \"./public/index.html\"],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n colors: {\n normal: \"#A8A878\",\n poison: \"#A040A0\",\n psychic: \"#F85888\",\n grass: \"#78C850\",\n ground: \"#E0C068\",\n ice: \"#98D8D8\",\n fire: \"#F08030\",\n rock: \"#B8A038\",\n dragon: \"#7038F8\",\n water: \"#6890F0\",\n bug: \"#A8B820\",\n dark: \"#705848\",\n fighting: \"#C03028\",\n ghost: \"#705898\",\n steel: \"#B8B8D0\",\n flying: \"#A890F0\",\n electric: \"#F8D030\",\n fairy: \"#EE99AC\",\n noType: \"lightgray\",\n },\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n};\n```\n\nindex.css has nothing but the bare minimum for Tailwind to work:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nHere's the repository: https://github.com/TheSirion/pokedex\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n purge: [\"./src/**/*.{js,jsx,ts,tsx}\", \"./public/index.html\"],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n colors: {\n normal: \"#A8A878\",\n poison: \"#A040A0\",\n psychic: \"#F85888\",\n grass: \"#78C850\",\n ground: \"#E0C068\",\n ice: \"#98D8D8\",\n fire: \"#F08030\",\n rock: \"#B8A038\",\n dragon: \"#7038F8\",\n water: \"#6890F0\",\n bug: \"#A8B820\",\n dark: \"#705848\",\n fighting: \"#C03028\",\n ghost: \"#705898\",\n steel: \"#B8B8D0\",\n flying: \"#A890F0\",\n electric: \"#F8D030\",\n fairy: \"#EE99AC\",\n noType: \"lightgray\",\n },\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\ntext-lg\n```\n\n```text\ntext-2x1\n```\n\n```text\ntext-2x1\n```\n\n```text\ntext-2xl\n```\n\n========================================\n\nComments:\n- Thank you! I can't believe I spent so long trying to figure it out just because I confounded a lowercase L for a 1. Wow!\n- Oh man, I can't believe this tripped me up too. For what it's worth, I think the docs could really make this detail much clearer ...\n- for me it still doesn't work ):\n- Wow. I genuinely thought it was a 1 not the letter","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":128,"estimatedTokens":717}}317{"id":"stack-73351938","source":"stackoverflow","questionId":73351938,"title":"module not defined in Vue Project","tags":["vue.js","node-modules","tailwind-css"],"text":"Title: module not defined in Vue Project\nTags: vue.js, node-modules, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI just created a new Vue app by running `npm init vue@latest` like specified in the official documentation. Then I tried adding Tailwind to my app by following the guide for Vue & Vite on their website. However, when opening the file `tailwind.config.js` I noticed that ESLint tells me that `module` is not defined and the `module.exports` syntax does not work.\n\nWhy is that and how can I fix it?\n\nEdit: The default `.eslintrc.cjs` file that gets created by Vue looks like this:\n\n```\n/* eslint-env node */\nrequire(\"@rushstack/eslint-patch/modern-module-resolution\");\n\nmodule.exports = {\n root: true,\n extends: [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\",\n \"@vue/eslint-config-prettier\",\n ],\n parserOptions: {\n ecmaVersion: \"latest\",\n },\n};\n```\n\n========================================\n\nTop Answer:\nConsider to use\n\n`.eslintrc.cjs`\n\n```\n…\n overrides: [\n {\n files: [\"{vue,vite}.config.*\"],\n env: {\n node: true,\n },\n },\n ],\n```\n\nas well as setting `compilerOptions.types: [\"node\"]` TS option only for those files.\n\n**This is necessary** to ensure that I'm not using NodeJS API in sourcecode and doesn't pulling polyfills on it.\n\n \n\nThis is how it might looks like:\n\n`.eslintrc.cjs`\n\n```\n/* eslint-env node */\nrequire(\"@rushstack/eslint-patch/modern-module-resolution\");\n\nmodule.exports = {\n root: true,\n extends: [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\",\n \"@vue/eslint-config-typescript\",\n \"@vue/eslint-config-prettier\",\n ],\n overrides: [\n {\n files: [\"cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}\"],\n extends: [\"plugin:cypress/recommended\"],\n },\n {\n files: [\"{vue,vite}.config.*\"],\n env: {\n node: true,\n },\n },\n ],\n parserOptions: {\n ecmaVersion: \"latest\",\n },\n};\n```\n\n`tsconfig.config.json`\n\n```\n{\n \"extends\": \"@vue/tsconfig/tsconfig.node.json\",\n \"include\": [\"vue.config.*\", \"vite.config.*\", \"vitest.config.*\", \"cypress.config.*\", \"playwright.config.*\"],\n \"compilerOptions\": {\n \"composite\": true,\n \"types\": [\"node\"]\n }\n}\n```\n\n========================================\n\nCode:\n```js\n/* eslint-env node */\nrequire(\"@rushstack/eslint-patch/modern-module-resolution\");\n\nmodule.exports = {\n root: true,\n extends: [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\",\n \"@vue/eslint-config-prettier\",\n ],\n parserOptions: {\n ecmaVersion: \"latest\",\n },\n};\n```\n\n```text\nnpm init vue@latest\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmodule\n```\n\n```text\nmodule.exports\n```\n\n```text\n.eslintrc.cjs\n```\n\n```js\nenv: {\n node: true,\n},\n```\n\n```js\n/* eslint-env node */\nrequire(\"@rushstack/eslint-patch/modern-module-resolution\");\n\nmodule.exports = {\n root: true,\n env: {\n node: true,\n },\n extends: [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\",\n \"@vue/eslint-config-prettier\",\n ],\n parserOptions: {\n ecmaVersion: \"latest\",\n },\n};\n```\n\n```text\n.eslintrc.cjs\n```\n\n```js\n…\n overrides: [\n {\n files: [\"{vue,vite}.config.*\"],\n env: {\n node: true,\n },\n },\n ],\n```\n\n```text\n/* eslint-env node */\nrequire(\"@rushstack/eslint-patch/modern-module-resolution\");\n\nmodule.exports = {\n root: true,\n extends: [\n \"plugin:vue/vue3-essential\",\n \"eslint:recommended\",\n \"@vue/eslint-config-typescript\",\n \"@vue/eslint-config-prettier\",\n ],\n overrides: [\n {\n files: [\"cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}\"],\n extends: [\"plugin:cypress/recommended\"],\n },\n {\n files: [\"{vue,vite}.config.*\"],\n env: {\n node: true,\n },\n },\n ],\n parserOptions: {\n ecmaVersion: \"latest\",\n },\n};\n```\n\n```json\n{\n \"extends\": \"@vue/tsconfig/tsconfig.node.json\",\n \"include\": [\"vue.config.*\", \"vite.config.*\", \"vitest.config.*\", \"cypress.config.*\", \"playwright.config.*\"],\n \"compilerOptions\": {\n \"composite\": true,\n \"types\": [\"node\"]\n }\n}\n```\n\n```text\n.eslintrc.cjs\n```\n\n```text\ncompilerOptions.types: [\"node\"]\n```\n\n```text\n.eslintrc.cjs\n```\n\n```text\ntsconfig.config.json\n```\n\n========================================\n\nComments:\n- You'll need to more info, include your `.eslintrc.js` in your question.\n- I edited my question. Also: Vue created a `.eslintrc.cjs` not `.js` file. Is that the problem?\n- Alternatively, you can also use the comment `/* eslint-env node */` in the affected files. This is just a per-file based variant of the accepted answer, but I wanted to mention it for completeness sake.\n- @muell true. You're welcome to edit the answer","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":246,"estimatedTokens":1122}}318{"id":"stack-69003514","source":"stackoverflow","questionId":69003514,"title":"Headless UI \"leave\" transition not working in React","tags":["reactjs","animation","transition","tailwind-css","headless"],"text":"Title: Headless UI \"leave\" transition not working in React\nTags: reactjs, animation, transition, tailwind-css, headless\nSource: Stack Overflow\n\nQuestion:\nMy navbar is setup such that on state change the hamburger menu opens and closes. While the `enter` animation works perfectly, the `leave` doesn't. My animation is a smooth slide in and slide out, but only the slide in works whereas on leave it just closes normally.\n\n```\nconst NavbarMenu = ({ isOpen, menuClick }) => {\n return (\n \n \n menuClick()} />\n \n About\n About\n About\n \n \n \n );\n};\n```\n\n========================================\n\nTop Answer:\nMost often when \"leave transitions\" doesn't work it's because it unmounts before the transition ends. To work around that you need a \"between state\" that is triggered when the Transition is in show mode. Then create a useEffect that listens to this state, and set a setTimeout that does the actual unmount of the element.\n\n========================================\n\nCode:\n```text\nconst NavbarMenu = ({ isOpen, menuClick }) => {\n return (\n <Transition appear={true} show={isOpen}>\n <Transition.Child\n class=\"flex flex-col bg-yellow-700 fixed top-0 right-0 p-5 z-20 w-1/2 h-full transition ease-in-out duration-300\"\n enter=\"transition-opacity ease-in-out duration-700\"\n enterFrom=\"translate-x-full\"\n enterTo=\"translate-x-0\"\n leave=\"transition-opacity ease-out duration-700\"\n leaveFrom=\"opacity-100\"\n leaveTo=\"opacity-0\"\n >\n <Exit className=\"text-yellow-100 w-1/6\" onClick={() => menuClick()} />\n <div className=\"flex flex-col gap-y-4 mt-10 font-poppins font-bold text-xl text-yellow-100\">\n <span>About</span>\n <span>About</span>\n <span>About</span>\n </div>\n </Transition.Child>\n </Transition>\n );\n};\n```\n\n```text\nenter\n```\n\n```text\nleave\n```\n\n```text\nconst NavbarMenu = ({ isOpen, menuClick }) => {\n return (\n <Transition appear={true} show={isOpen}>\n <Transition.Child\n class=\"flex flex-col bg-yellow-700 fixed top-0 right-0 p-5 z-20 w-1/2 h-full transition duration-700\"\n enter=\"ease-in-out\"\n enterFrom=\"translate-x-full opacity-0\"\n enterTo=\"translate-x-0 opacity-100\"\n leave=\"ease-out\"\n leaveFrom=\"translate-x-0 opacity-100\"\n leaveTo=\"translate-x-full opacity-0\"\n >\n <Exit className=\"text-yellow-100 w-1/6\" onClick={() => menuClick()} />\n <div className=\"flex flex-col gap-y-4 mt-10 font-poppins font-bold text-xl text-yellow-100\">\n <span>About</span>\n <span>About</span>\n <span>About</span>\n </div>\n </Transition.Child>\n </Transition>\n );\n};\n```\n\n```text\nconst NavbarMenu = ({ isOpen, menuClick }) => {\n return (\n <Transition appear={true} show={isOpen}>\n <Transition.Child\n class=\"flex flex-col bg-yellow-700 fixed top-0 right-0 p-5 z-20 w-1/2 h-full transition ease-in-out duration-300\"\n enter=\"transition-opacity ease-in-out duration-700\"\n enterFrom=\"translate-x-full\"\n enterTo=\"translate-x-0\"\n leave=\"transition-opacity ease-out duration-700\"\n leaveFrom=\"opacity-100\"\n leaveTo=\"opacity-0\"\n >\n <Exit className=\"text-yellow-100 w-1/6\" \n onClick={() => \n setTimeout(() => {\n menuClick();\n }, 0);\n } />\n <div className=\"flex flex-col gap-y-4 mt-10 font-poppins font-bold text-xl text-yellow-100\">\n <span>About</span>\n <span>About</span>\n <span>About</span>\n </div>\n </Transition.Child>\n </Transition>\n );\n};\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":119,"estimatedTokens":912}}319{"id":"stack-72055694","source":"stackoverflow","questionId":72055694,"title":"Tailwind default color classes not working","tags":["javascript","reactjs","npm","npm-install","tailwind-css"],"text":"Title: Tailwind default color classes not working\nTags: javascript, reactjs, npm, npm-install, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm building a **React** application using **Tailwind CSS Framework**. I have used **NPM** to install tailwind in my react app in the following manner:\n\n```\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\nThen I have also edited my **tailwind.config.js** file in the following manner:\n\n```\nmodule.exports = {\n\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nAnd updated my **index.css** file in the following manner:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nThen I tried to use default color classes that tailwind CSS provides in the following manner:\n\n```\n\n### ...\n\n```\n\nOr\n\n```\n\n ...\n\n```\n\nBut using this class is not changing the color of the text or the background of the div. Please, tell me how to solve this problem? Thanks in advance.\n\nFor your kind information, I can use **custom color classes** by writing them in the **tailwind.config.js** in the following manner:\n\n```\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n colors: {\n 'custom-base-red': '#ff2f23',\n 'custom-light-red': '#fb4a40',\n 'custom-white': '#fefcfb',\n 'custom-dark-gray': '#5f5f6c',\n 'custom-light-gray': '#f7f7f7',\n 'custom-border-gray': '#eeeeee',\n 'custom-footer-bg': '#1d2124',\n },\n fontFamily: {\n 'poppins': [\"'Poppins'\", 'sans-serif'],\n },\n dropShadow: {\n 'custom-btn-shadow': '0px 5px 15px rgba(255, 47, 35, 0.4)',\n },\n extend: {},\n },\n plugins: [],\n}\n```\n\n========================================\n\nTop Answer:\nCheck if there is *import './index.css'* in the index.js file.\n\nAlso, make sure that You are editing the *App.js* file\n\n========================================\n\nCode:\n```text\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n```text\nmodule.exports = {\n\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n<h1 className='text-white'>...</h1>\n```\n\n```text\n<div className='bg-white'>\n ...\n</div>\n```\n\n```text\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n colors: {\n 'custom-base-red': '#ff2f23',\n 'custom-light-red': '#fb4a40',\n 'custom-white': '#fefcfb',\n 'custom-dark-gray': '#5f5f6c',\n 'custom-light-gray': '#f7f7f7',\n 'custom-border-gray': '#eeeeee',\n 'custom-footer-bg': '#1d2124',\n },\n fontFamily: {\n 'poppins': [\"'Poppins'\", 'sans-serif'],\n },\n dropShadow: {\n 'custom-btn-shadow': '0px 5px 15px rgba(255, 47, 35, 0.4)',\n },\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}',\n ],\n theme: {\n extend: {\n colors: {\n 'custom-base-red': '#ff2f23',\n 'custom-light-red': '#fb4a40',\n 'custom-white': '#fefcfb',\n 'custom-dark-gray': '#5f5f6c',\n 'custom-light-gray': '#f7f7f7',\n 'custom-border-gray': '#eeeeee',\n 'custom-footer-bg': '#1d2124',\n },\n fontFamily: {\n poppins: [\"'Poppins'\", 'sans-serif'],\n },\n dropShadow: {\n 'custom-btn-shadow': '0px 5px 15px rgba(255, 47, 35, 0.4)',\n },\n },\n },\n plugins: [],\n};\n```\n\n========================================\n\nComments:\n- Is your react file actually in the src folder?\n- Yes, my react file is in the src folder.\n- Your reply to an answer below says that your \"custom color classes are working fine\". How are you adding the custom classes? If you're adding them to your `tailwind.config.js`, could you show the file with those additions?\n- Thank you for your comment. I have updated the issue with my `tailwind.config.js` file. Please do check it. Thank you. @EdLucas\n- Thank you for answering. Yes, I have checked, there is import './index.css' in the index.js file. But I did not understand your answer's second part. I should mention that other classes are working properly. Just facing issue with the default color classes. But custom color classes are working fine.\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- It's working !!! Thank you so much. That was indeed a silly mistake done by me. :) @Aaditey Nair\n- Glad to be of service","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":193,"estimatedTokens":1156}}320{"id":"stack-67363406","source":"stackoverflow","questionId":67363406,"title":"What is the difference between transition-all and transition in TailwindCSS","tags":["html","css","css-transitions","tailwind-css"],"text":"Title: What is the difference between transition-all and transition in TailwindCSS\nTags: html, css, css-transitions, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nTailwind offers multiple utilities for controlling which CSS properties transition, among these properties there are `transition` and `transition-all`.\n\nI went and checked the CSS properties for both classes and here they are in the same order.\n\n```\ntransition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\ntransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\ntransition-duration: 150ms;\n```\n\n```\ntransition-property: all;\ntransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\ntransition-duration: 150ms;\n```\n\nWhat is the difference between both classes and which one should I use for general transitions?\n\n========================================\n\nTop Answer:\nAs you mentioned, Tailwind's `transition` class defines transitions for a limited set of CSS properties: `background-color`, `border-color`, `color`, `fill`, `stroke`, `opacity`, `box-shadow`, `transform`, `filter`, `backdrop-filter`.\n\nWhen using `transition-all` all properties that can transition will - this includes all animatable CSS properties (properties in `transition` and much more).\n\nUsing one or the other will depend on which properties you want to animate, if they're all covered by `transition` then there's no need to use `transition-all`.\n\n========================================\n\nCode:\n```css\ntransition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\ntransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\ntransition-duration: 150ms;\n```\n\n```css\ntransition-property: all;\ntransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\ntransition-duration: 150ms;\n```\n\n```text\ntransition\n```\n\n```text\ntransition-all\n```\n\n```text\ntransition\n```\n\n```text\ntransition-all\n```\n\n```text\ntransition\n```\n\n```text\ntransition-all\n```\n\n```text\ncolor\n```\n\n```text\ntransform\n```\n\n```text\ntransition-all\n```\n\n```text\ntransition-{properties}\n```\n\n```text\ntransition-color\n```\n\n```text\ntransition-property: background-color, border-color, color, fill, stroke;\n```\n\n```text\ntransition\n```\n\n```text\nbackground-color\n```\n\n```text\nborder-color\n```\n\n```text\ncolor\n```\n\n```text\nfill\n```\n\n```text\nstroke\n```\n\n```text\nopacity\n```\n\n```text\nbox-shadow\n```\n\n```text\ntransform\n```\n\n```text\nfilter\n```\n\n```text\nbackdrop-filter\n```\n\n```text\ntransition-all\n```\n\n```text\ntransition\n```\n\n```text\ntransition\n```\n\n```text\ntransition-all\n```\n\n========================================\n\nComments:\n- I am talking about the specific `transition` class, it references all properties as you can see in the CSS but still has a different syntax to `transition-all`. I am wondering if they are any different.\n- is the same true for `transition-opacity`? Will that be more efficient than `transition`? I like the conciseness of `transition` but I don't want to trade off performance for it.","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":29,"totalLines":160,"estimatedTokens":761}}321{"id":"stack-75124039","source":"stackoverflow","questionId":75124039,"title":"how to remove tailwind prefights for specific pages","tags":["reactjs","tailwind-css"],"text":"Title: how to remove tailwind prefights for specific pages\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThere is an option in `tailwind.config.cjs` to turn off preflights. But i don't want to turn them off for the whole project. i need them to be enabled for some specific pages. Is there a way to do that.\n\nTurn off preflights:\n\n```\n// tailwind.config.cjs\n...\ncorePlugins: {\n preflight: false,\n},\n...\n```\n\n========================================\n\nTop Answer:\n2026 update (v4)\n\n```\n/* before */\n@import \"tailwindcss\";\n\n/* after */\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/utilities.css\" layer(utilities);\n// So you would be excluding this (just including for ref)\n// @import \"tailwindcss/preflight.css\" layer(base);\n```\n\nDocumentation: https://tailwindcss.com/docs/preflight\n\n========================================\n\nCode:\n```js\n// tailwind.config.cjs\n...\ncorePlugins: {\n preflight: false,\n},\n...\n```\n\n```text\ntailwind.config.cjs\n```\n\n```js\n// with class \"tailwind-preflight\" we can now add preflight only to components we want\n// to prevent conflicts between ant design and tailwind\n\nconst plugin = require(\"tailwindcss/plugin\");\nconst fs = require(\"fs\");\nconst path = require(\"path\");\nconst postcss = require(\"postcss\");\n\nmodule.exports = plugin(function ({ addBase }) {\n const preflightStyles = postcss.parse(\n fs.readFileSync(path.join(__dirname, \"./preflight.css\"), \"utf8\"),\n );\n\n // Scope the selectors to specific components\n preflightStyles.walkRules((rule) => {\n rule.selector = \".tailwind-preflight \" + rule.selector;\n });\n\n addBase(preflightStyles.nodes);\n});\n```\n\n```text\n/* before */\n@import \"tailwindcss\";\n\n/* after */\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/utilities.css\" layer(utilities);\n// So you would be excluding this (just including for ref)\n// @import \"tailwindcss/preflight.css\" layer(base);\n```\n\n========================================\n\nComments:\n- Do you have one CSS file for every page or you may specify which CSS file to use on which page?\n- @IharAliakseyenka no i dont have one css file for every page\n- Remove `preflight: false` and import `@tailwind base` only on the pages your need\n- Can you me how to do this?\n- Hi @Samyar, I'm facing the same problem but cannot piece together your answer. Can you please show how to do this with examples on how to add preflight to certain components?\n- @Ryan refer to the mentioned GitHub page and the tailwind docs about plugins","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":95,"estimatedTokens":622}}322{"id":"stack-76018521","source":"stackoverflow","questionId":76018521,"title":"How to import ES module in Tailwind config file?","tags":["javascript","node.js","reactjs","next.js","tailwind-css"],"text":"Title: How to import ES module in Tailwind config file?\nTags: javascript, node.js, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am configuring my own plugins in Tailwind config file by import ES module with CommonJS syntax `require('/my-plugin');` but I get an error when trying to build:\n\n```\nSyntaxError: Cannot use import statement outside a module\n at compileFunction ()\n```\n\nSince I am using ES6 statements in the `my-plugin` file (e.g `import`, `export default`) so these causing to throw errors even though I use regular `require` statements to import it in my Tailwind config file.\n\nHow do I resolve this problem?\n\nMy code:\n\n*tailwind.config.js*\n\n```\nconst myPlugin = require('./my-plugin');\n\nmodule.exports = {\n mode: 'jit',\n darkMode: 'class',\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}',\n ],\n theme: {\n } \n plugins: [\n myPlugin(), \n ],\n};\n```\n\n*./my-plugin*\n\n```\nimport ... from ...\n\nconst MyPlugin = () => {}\n\nexport default MyPlugin\n```\n\n========================================\n\nCode:\n```text\nSyntaxError: Cannot use import statement outside a module\n at compileFunction (<anonymous>)\n```\n\n```text\nconst myPlugin = require('./my-plugin');\n\nmodule.exports = {\n mode: 'jit',\n darkMode: 'class',\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}',\n ],\n theme: {\n } \n plugins: [\n myPlugin(), \n ],\n};\n```\n\n```text\nimport ... from ...\n\nconst MyPlugin = () => {}\n\nexport default MyPlugin\n```\n\n```text\nrequire('/my-plugin');\n```\n\n```text\nmy-plugin\n```\n\n```text\nimport\n```\n\n```text\nexport default\n```\n\n```text\nrequire\n```\n\n```js\nimport myPlugin from './my-plugin';\n\nexport default {\n mode: 'jit',\n darkMode: 'class',\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}',\n ],\n theme: {\n },\n plugins: [\n myPlugin, \n ],\n};\n```\n\n```text\nmjs\n```\n\n```text\ntailwind.config.mjs\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n\"type\": \"module\"\n```\n\n```text\npackage.json\n```\n\n```text\ntheme\n```\n\n```text\nimport\n```\n\n========================================\n\nComments:\n- thanks @Wongjin, I have upgrade Tailwind version to latest and it worked.\n- \"Do not execute the `import`ed plugin function\" Unless one intends to configure the plugin, right?\n- Execute the `import`ed plugin function only if it has been constructed via the `plugin.withOptions()` wrapper or similar.","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":16,"totalLines":154,"estimatedTokens":622}}323{"id":"stack-74749448","source":"stackoverflow","questionId":74749448,"title":"Dark mode switcher in Nuxt 3 not working with official @nuxtjs/color-mode","tags":["javascript","nuxt.js","tailwind-css","nuxt3.js","darkmode"],"text":"Title: Dark mode switcher in Nuxt 3 not working with official @nuxtjs/color-mode\nTags: javascript, nuxt.js, tailwind-css, nuxt3.js, darkmode\nSource: Stack Overflow\n\nQuestion:\nI wanted to implement dark mode on my Nuxt app using tailwind and the recommended @nuxtjs/color-mdoe module. Testing tailwind's dark: classes went fine and worked as expected, however I can't make a button switcher work to set the color mode programmatically.\n\nI installed in devDeps the module in version 3.2.0, which should be compatible with Nuxt 3, according to the docs\n\n```\n\"@nuxtjs/tailwindcss\": \"^6.1.3\",\n\"@nuxtjs/color-mode\": \"^3.2.0\"\n```\n\nAnd applied the proper configuration in `nuxt.config.ts`\n\n```\nmodules: [ '@nuxtjs/color-mode' ],\ncolorMode: {\n classSuffix: '',\n preference: 'system',\n fallback: 'dark'\n }\n```\n\nI used tailwind nuxt module\nIn **tailwind.config.js**\n\n```\nmodule.exports= {\n theme: {\n colors: {\n transparent: 'transparent',\n current: 'currentColor',\n dark: '#212129',\n darkPrimary: '#00E1FF',\n darkSecondary: '#00D6D6',\n light: '#E9DAC1',\n lightPrimary: '#1d68f3',\n lightSecondary: '#00b5f0',\n main: '#0073FF',\n white: '#FFFFFF',\n },\n spacing: {\n 'header': '120px',\n },\n darkMode: 'class'\n }\n}\n```\n\nWhile in **./assets/css/main.css** I have no meaningful config about dark mode, just some classes I defined globally\n\n```\nhtml {\n @apply transition-colors ease-in duration-1000;\n @apply bg-gradient-to-b bg-no-repeat w-screen ;\n @apply dark:from-dark/95 dark:via-dark/95 dark:to-dark dark:text-white from-white via-light/50 to-light;\n}\n\n.contain {\n @apply px-[5%] md:px-[25%]; \n}\n```\n\nSince I wanted to place the switch in the header here's what I did in the component:\n\n```\n\n \n \n \n \n \n \n\nfunction toggleDarkMode(theme) {\n useColorMode().preference = theme\n}\n\n```\n\nThe classes are actually toggling when I manually change the color mode from my os (win11) settings, but clicking the button won't replicate the same behavior. The mode seems to be switching since the icon does change accordingly.\n\nLooking at the docs and tutorials I found elsewhere it should just work like that.\n\nDo I need to set the mode as a global state inside the store? Should I call the hook in a root-level component?\n\n========================================\n\nTop Answer:\nFor anybody else wondering,\nthis is a working solution with **`@nuxt/ui` module** but you can use your own element.\n\nThe trick is in changing the **model-value (with Vue)**, otherwise, the toggle will change the value to `true` and `false` and not string values.\n\n```\n\n```\n\n========================================\n\nCode:\n```json\n\"@nuxtjs/tailwindcss\": \"^6.1.3\",\n\"@nuxtjs/color-mode\": \"^3.2.0\"\n```\n\n```js\nmodules: [ '@nuxtjs/color-mode' ],\ncolorMode: {\n classSuffix: '',\n preference: 'system',\n fallback: 'dark'\n }\n```\n\n```js\nmodule.exports= {\n theme: {\n colors: {\n transparent: 'transparent',\n current: 'currentColor',\n dark: '#212129',\n darkPrimary: '#00E1FF',\n darkSecondary: '#00D6D6',\n light: '#E9DAC1',\n lightPrimary: '#1d68f3',\n lightSecondary: '#00b5f0',\n main: '#0073FF',\n white: '#FFFFFF',\n },\n spacing: {\n 'header': '120px',\n },\n darkMode: 'class'\n }\n}\n```\n\n```css\nhtml {\n @apply transition-colors ease-in duration-1000;\n @apply bg-gradient-to-b bg-no-repeat w-screen ;\n @apply dark:from-dark/95 dark:via-dark/95 dark:to-dark dark:text-white from-white via-light/50 to-light;\n}\n\n.contain {\n @apply px-[5%] md:px-[25%]; \n}\n```\n\n```html\n<template>\n <header class=\"contain py-[15px] flex items-center justify-between backdrop-blur-3xl\">\n <button @click=\"toggleDarkMode($colorMode.preference === 'dark' ? 'light' : 'dark')\">\n <nuxt-icon v-if=\"$colorMode.preference === 'dark'\" name=\"sun\"/>\n <nuxt-icon v-else name=\"moon\"/>\n </button>\n </header>\n</template>\n\n<script setup>\nfunction toggleDarkMode(theme) {\n useColorMode().preference = theme\n}\n</script>\n```\n\n```text\nnuxt.config.ts\n```\n\n```json\n\"devDependencies\": {\n \"@nuxtjs/color-mode\": \"^3.2.0\",\n \"autoprefixer\": \"^10.4.13\",\n \"nuxt\": \"3.0.0\",\n \"postcss\": \"^8.4.19\",\n \"tailwindcss\": \"^3.2.4\"\n }\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: ['./app.vue'], // you forget content\n darkMode: 'class', //you should define darkMode here\n theme: {\n extend: {},\n //darkMode: 'class' >> this is mistake\n },\n plugins: [],\n};\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n body{\n @apply bg-lightPrimary dark:bg-darkPrimary;\n }\n}\n```\n\n```text\n// https://v3.nuxtjs.org/api/configuration/nuxt.config\nexport default defineNuxtConfig({\n modules: ['@nuxtjs/color-mode'],\n colorMode: {\n classSuffix: '',\n preference: 'system',\n fallback: 'dark',\n },\n css: ['/assets/css/main.css'],\n postcss: {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n },\n});\n```\n\n```text\npackage.json\n```\n\n```text\n3.1.6\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ncontent\n```\n\n```text\ndarkMode\n```\n\n```text\ntheme\n```\n\n```text\nmain.css\n```\n\n```text\nnuxt.config.ts\n```\n\n```text\ndarkMode\n```\n\n```text\ndarkMode: 'class'\n```\n\n```text\ncontent\n```\n\n```text\nmain.css\n```\n\n```text\nnuxt.config.ts\n```\n\n```html\n<UToggle\n:model-value=\"colorMode.preference === 'dark'\"\n@update:model-value=\"colorMode.preference = $event ? 'dark' : 'light'\"\n/>\n```\n\n```text\n@nuxt/ui\n```\n\n```text\ntrue\n```\n\n```text\nfalse\n```\n\n========================================\n\nComments:\n- hi, what do you mean when you say, classes toggling and where is your CSS or SCSS file I have exactly the same code and it's working when I press the button the root class changes to dark\n- pls check this link stackblitz.com/edit/github-ac9rz7?file=README.md\n- The demo is working perfectly fine, are you sure you don't have an extension running? .cleanshot.com/ejDEUZ\n- Also, if that Nuxt module doesn't work well, maybe give a try to that VueUse composable used here: github.com/antfu/vitesse/blob/… (`useDark`)\n- @sadeqshahmoradi I mean I wanted to switch mode with a button. I edited my question to post the tailwind and css files too\n- @kissu I have the dark reader extension but I did disabled it on localhost. I tried useDark hook too from vueuse but to no avail\n- I was indeed the 'darkMode' property of tailwind's config in the wrong place (theme). Such a silly mistake, thank you so much ahahah. Anyway all the missing configs you saw in my snippets were due to me using the tailwind's nuxt official module, which should have made it easier actually. Therefore no content property, in fact my custom colors and other tailwind's classes were all working correctly. Thanks a lot <3\n- Happy to help my friend","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":27,"totalLines":309,"estimatedTokens":1674}}324{"id":"stack-67942748","source":"stackoverflow","questionId":67942748,"title":"Tailwind - ensure dropdown list is above everything","tags":["html","css","frontend","position","tailwind-css"],"text":"Title: Tailwind - ensure dropdown list is above everything\nTags: html, css, frontend, position, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm having a problem trying to set the position of a dropdown list. I want it to be on top of everything, but when it comes into a relative positioned element, it just goes behind it. Here is a code example of what I mean.\n\nhtml example:\n\n```\n\n \n Dropdown\n \n \n \n \n- One\n \n- Two\n \n- Three is the magic number\n \n \n \n \n Dropdown\n \n \n \n \n- One\n \n- Two\n \n- Three is the magic number\n \n \n\n```\n\ncss:\n\n```\n.dropdown:hover .dropdown-menu {\n display: block;\n}\n```\n\nlive:\nhttps://codepen.io/lcsalt/pen/MWpPvJp\n\nHow can I ensure that the list is above everything, no matter what? I tried with z-index, but didn't help.\n\n========================================\n\nCode:\n```text\n<div class=\"dropdown relative\">\n <button class=\"bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center\">\n <span class=\"mr-1\">Dropdown</span>\n <svg class=\"fill-current h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\"/> </svg>\n </button>\n <ul class=\"dropdown-menu absolute hidden text-gray-700 pt-1\">\n <li class=\"\"><a class=\"rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap\" href=\"#\">One</a></li>\n <li class=\"\"><a class=\"bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap\" href=\"#\">Two</a></li>\n <li class=\"\"><a class=\"rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap\" href=\"#\">Three is the magic number</a></li>\n </ul>\n </div>\n <div class=\"dropdown relative\">\n <button class=\"bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center\">\n <span class=\"mr-1\">Dropdown</span>\n <svg class=\"fill-current h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\"/> </svg>\n </button>\n <ul class=\"dropdown-menu absolute hidden text-gray-700 pt-1\">\n <li class=\"\"><a class=\"rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap\" href=\"#\">One</a></li>\n <li class=\"\"><a class=\"bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap\" href=\"#\">Two</a></li>\n <li class=\"\"><a class=\"rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap\" href=\"#\">Three is the magic number</a></li>\n </ul>\n </div>\n\n</div>\n```\n\n```text\n.dropdown:hover .dropdown-menu {\n display: block;\n}\n```\n\n```text\n<ul class=\"dropdown-menu absolute hidden text-gray-700 pt-1 z-50\">\n```\n\n```text\nz-index\n```\n\n```text\n<ul>\n```\n\n```text\nz-50\n```\n\n========================================\n\nComments:\n- Thanks! It worked for this codepen, however, i have a more complex code in react, i tried with this z-50 and didnt work, another element that has a position relative class below is being displayed over no matter the z-index.. do you have any idea where the problem could be?\n- @LucasAltamirano, z-50 is z-index: 50. So your code has z-index higher than z-index: 50. After all, Tailwind is a set of CSS styles, and it probably overlaps something. Take a look at the developer tool.\n- I had to set z-index: -1 as inline style property for it to work properly.. tailwinds z-0 vs z-50 wasn't working right.. wonder why","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":112,"estimatedTokens":853}}325{"id":"stack-76322961","source":"stackoverflow","questionId":76322961,"title":"PrelineUI plugin not working, causing a few components which uses JavaScript to not work","tags":["javascript","tailwind-css","ejs","astrojs","tailwind-ui"],"text":"Title: PrelineUI plugin not working, causing a few components which uses JavaScript to not work\nTags: javascript, tailwind-css, ejs, astrojs, tailwind-ui\nSource: Stack Overflow\n\nQuestion:\nI am currently using the latest @astrojs/tailwind integration. I also installed the PrelineUI nav component which works on JavaScript injected through the PrelineUI plugin.\nNow the main issue is the components which uses Preline JavaScript isnt working. Eg. the hamburger menu. I tried reading and implemented all the instructions give in the docs but still couldnt make the hamburger or any other component which uses Preline JavaScript to work.\n\nHere is the original - header nav component\nHere is a sample Codesandbox - Try clicking the hamburger menu or any of the dropdowns [Codesanbox link] (https://codesandbox.io/p/sandbox/gallant-wind-itec94?file=%2Ftailwind.config.cjs%3A10%2C38)\n\nThis is my **tailwind.config.cjs file**\n\n```\n/** @type {import('tailwindcss').Config} */\n\nconst preline = require('preline/plugin.js');\n\nmodule.exports = {\n content: [\n './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',\n './public/**/*.astro',\n 'node_modules/preline/dist/*.js',\n ],\n theme: {\n extend: {},\n },\n\n plugins: [preline],\n};\n```\n\nThis is my **package.json file**\n\n```\n{\n \"name\": \"funny-orbs-2023\",\n \"type\": \"module\",\n \"version\": \"0.0.1\",\n \"scripts\": {\n \"dev\": \"astro dev\",\n \"start\": \"astro dev\",\n \"build\": \"astro build\",\n \"preview\": \"astro preview\",\n \"astro\": \"astro\"\n },\n \"dependencies\": {\n \"@astrojs/tailwind\": \"^3.1.2\",\n \"@fontsource/inter\": \"^4.5.15\",\n \"@fontsource/inter-tight\": \"^4.5.2\",\n \"@preline/dropdown\": \"^1.3.0\",\n \"astro\": \"^2.4.5\",\n \"preline\": \"^1.8.0\",\n \"tailwindcss\": \"^3.3.2\"\n }\n}\n```\n\nCan somebody please help me what this issue is ?? I have been trying to figure this out for days now. Thanks in advance.\n\n========================================\n\nTop Answer:\nin the file tailwind.config.mjs\n\n\r\n\r\n\n```\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',\n './node_modules/preline/preline.js',\n ],\n theme: {\n extend: {},\n },\n plugins: [\n // require('@tailwindcss/forms'),\n require('preline/plugin'),\n ],\n}\n```\n\n\r\n\r\n\r\n\nthem add line out tag :\n\nAnd thats it´s, it´s should work for you\n\n========================================\n\nCode:\n```text\n/** @type {import('tailwindcss').Config} */\n\nconst preline = require('preline/plugin.js');\n\nmodule.exports = {\n content: [\n './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',\n './public/**/*.astro',\n 'node_modules/preline/dist/*.js',\n ],\n theme: {\n extend: {},\n },\n\n plugins: [preline],\n};\n```\n\n```text\n{\n \"name\": \"funny-orbs-2023\",\n \"type\": \"module\",\n \"version\": \"0.0.1\",\n \"scripts\": {\n \"dev\": \"astro dev\",\n \"start\": \"astro dev\",\n \"build\": \"astro build\",\n \"preview\": \"astro preview\",\n \"astro\": \"astro\"\n },\n \"dependencies\": {\n \"@astrojs/tailwind\": \"^3.1.2\",\n \"@fontsource/inter\": \"^4.5.15\",\n \"@fontsource/inter-tight\": \"^4.5.2\",\n \"@preline/dropdown\": \"^1.3.0\",\n \"astro\": \"^2.4.5\",\n \"preline\": \"^1.8.0\",\n \"tailwindcss\": \"^3.3.2\"\n }\n}\n```\n\n```html\n<script is:inline src=\"./assets/vendor/preline/dist/preline.js\"></script>\n```\n\n```html\n<script src=\"../../node_modules/preline/dist/preline.js\"></script>\n```\n\n```text\n<script>\n```\n\n```text\nis:inline\n```\n\n```text\n<script>\n```\n\n```text\nis:inline\n```\n\n```html\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',\n './node_modules/preline/preline.js',\n ],\n theme: {\n extend: {},\n },\n plugins: [\n // require('@tailwindcss/forms'),\n require('preline/plugin'),\n ],\n}\n```\n\n========================================\n\nComments:\n- Whoa. That actually worked. Appreciate your help, mate!","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":184,"estimatedTokens":987}}326{"id":"stack-75712335","source":"stackoverflow","questionId":75712335,"title":"Prettier won't auto-fix longer Tailwind CSS class name stack according to print width","tags":["visual-studio-code","next.js","tailwind-css","eslint","prettier"],"text":"Title: Prettier won't auto-fix longer Tailwind CSS class name stack according to print width\nTags: visual-studio-code, next.js, tailwind-css, eslint, prettier\nSource: Stack Overflow\n\nQuestion:\nIsn't Prettier supposed to auto-fix longer Tailwind CSS class name stack according to print width?\n\n- Next.js Project: Github, package.json, .eslintrc.js, .prettierrc.js, example line\n\n- Visual Studio Code: ESLint, Prettier, Tailwind CSS IntelliSense, settings.json\n\n### Behaviour\n\n```\n setText(e.target.value)}\n type=\"text\"\n className=\"focus:shadow-outline mb-3 w-60 appearance-none rounded border border-purple-700 py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none dark:bg-slate-600 dark:text-gray-300\" \n/>\n```\n\n### Expected\n\n```\n setText(e.target.value)}\n type=\"text\"\n className=\"focus:shadow-outline mb-3 w-60 appearance-none rounded border \n border-purple-700 py-2 px-3 leading-tight text-gray-700 \n shadow focus:outline-none dark:bg-slate-600 \n dark:text-gray-300\" \n/>\n```\n\n========================================\n\nCode:\n```js\n<input\n id=\"helloInput\"\n placeholder=\"Type in hello\"\n onChange={(e) => setText(e.target.value)}\n type=\"text\"\n className=\"focus:shadow-outline mb-3 w-60 appearance-none rounded border border-purple-700 py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none dark:bg-slate-600 dark:text-gray-300\" \n/>\n```\n\n```js\n<input\n id=\"helloInput\"\n placeholder=\"Type in hello\"\n onChange={(e) => setText(e.target.value)}\n type=\"text\"\n className=\"focus:shadow-outline mb-3 w-60 appearance-none rounded border \n border-purple-700 py-2 px-3 leading-tight text-gray-700 \n shadow focus:outline-none dark:bg-slate-600 \n dark:text-gray-300\" \n/>\n```\n\n========================================\n\nComments:\n- have you found the way to display the tailwindCSS classes in column or a parameter that take into account the prettier `printWidth` parameters. With a lot of classes, it becomes hard to read\n- No, I haven't found any solution.","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":63,"estimatedTokens":501}}327{"id":"stack-72109029","source":"stackoverflow","questionId":72109029,"title":"Vue.js 3: How to get props value and use it in functions in script setup?","tags":["vue.js","vuejs3","tailwind-css","vue-composition-api","vue-script-setup"],"text":"Title: Vue.js 3: How to get props value and use it in functions in script setup?\nTags: vue.js, vuejs3, tailwind-css, vue-composition-api, vue-script-setup\nSource: Stack Overflow\n\nQuestion:\nWe all love vue 3 new script setup, but it is difficult to shift to it because of low usage and less support. I faced problem while getting and using props value inside functions.My code was like below\n\n```\n\ndefineProps({\n text: String,\n howShow: Number,\n text1: String,\n text2: String,\n text3: String,\n widths: {\n type: String,\n default: \"100%\",\n },\n})\n\n```\n\n========================================\n\nTop Answer:\nYou can solve this problem by doing this\n\n```\n\nimport { toRefs } from \"@vue/reactivity\";\nconst props = defineProps({\n text: String,\n howShow: Number,\n text1: String,\n text2: String,\n text3: String,\n widths: {\n type: String,\n default: \"100%\",\n },\n})\nconst { widths } = toRefs(props);\nlet getValue = () => {\n console.log(\"Getting Value\");\n console.log(widths.value);\n};\n\n```\n\nThat All **Enjoy**\n\n========================================\n\nCode:\n```text\n<script setup>\ndefineProps({\n text: String,\n howShow: Number,\n text1: String,\n text2: String,\n text3: String,\n widths: {\n type: String,\n default: \"100%\",\n },\n})\n</script>\n```\n\n```js\n<script setup>\nimport { computed } from 'vue'\nconst props = defineProps({\n widths: {\n type: String,\n default: '100%',\n }\n})\n// do some stuff\n// access the value by \n// let w = props.widths\n</script>\n```\n\n```html\n<div :style=\"{ width: widths }\" />\n```\n\n```text\nprops.widths\n```\n\n```text\nprops\n```\n\n```text\nwidths\n```\n\n```text\n<script setup>\nimport { toRefs } from \"@vue/reactivity\";\nconst props = defineProps({\n text: String,\n howShow: Number,\n text1: String,\n text2: String,\n text3: String,\n widths: {\n type: String,\n default: \"100%\",\n },\n})\nconst { widths } = toRefs(props);\nlet getValue = () => {\n console.log(\"Getting Value\");\n console.log(widths.value);\n};\n</script>\n```\n\n========================================\n\nComments:\n- you can get the value by using `props.widths`\n- and instead of `{ widths } = toRefs(props)` you could also `widths = toRef(props, 'widths')` getting only the desired. see toRef\n- In this case `w` will not be reactive, because getting a value from the `props` in root scope of `` will cause the value to lose reactivity. See `vue/no-setup-props-destructure` lint rule.","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":130,"estimatedTokens":593}}328{"id":"stack-79386415","source":"stackoverflow","questionId":79386415,"title":"Error: 'could not determine executable to run' when initializing Tailwind CSS with shadcn/ui","tags":["reactjs","tailwind-css","shadcnui","tailwind-css-4"],"text":"Title: Error: 'could not determine executable to run' when initializing Tailwind CSS with shadcn/ui\nTags: reactjs, tailwind-css, shadcnui, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI'm working on a React project and using `shadcn/ui`. I tried to install and set up Tailwind CSS using the following commands:\n\n- Installed Tailwind CSS, PostCSS, and Autoprefixer:\n\n```\nnpm install -D tailwindcss postcss autoprefixer\n```\n\n- Tried to initialize the Tailwind CSS configuration:\n\n```\nnpx tailwindcss init -p\n```\n\nHowever, when I ran the second command, I got the following error:\n\nnpm error could not determine executable to run npm error A complete\nlog of this run can be found in:\nC:\\Users\\Pc\\AppData\\Local\\npm-cache_logs-debug-0.log\n\nlog file:\n\n0 verbose cli C:\\Program Files\\nodejs\\node.exe\nC:\\Users\\Pc\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js 1 info\nusing npm@11.0.0 2 info using node@v20.18.0 3 silly config\nload:file:C:\\Users\\Pc\\AppData\\Roaming\\npm\\node_modules\\npm\\npmrc 4\nsilly config load:file:D:\\ReactJS\\travel-site.npmrc 5 silly config\nload:file:C:\\Users\\Pc.npmrc 6 silly config\nload:file:C:\\Users\\Pc\\AppData\\Roaming\\npm\\etc\\npmrc 7 verbose title\nnpm exec tailwindcss init -p 8 verbose argv \"exec\" \"--\" \"tailwindcss\"\n\"init\" \"-p\" 9 verbose logfile logs-max:10\ndir:C:\\Users\\Pc\\AppData\\Local\\npm-cache_logs\\2025-01-25T08_30_42_408Z-\n10 verbose logfile\nC:\\Users\\Pc\\AppData\\Local\\npm-cache_logs\\2025-01-25T08_30_42_408Z-debug-0.log\n11 silly logfile start cleaning logs, removing 1 files 12 silly\nlogfile done cleaning log files 13 silly packumentCache\nheap:2197815296 maxSize:549453824 maxEntrySize:274726912 14 verbose\nstack Error: could not determine executable to run 14 verbose stack\n\nat getBinFromManifest\n(C:\\Users\\Pc\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\libnpmexec\\lib\\get-bin-from-manifest.js:17:23)\n14 verbose stack at exec\n(C:\\Users\\Pc\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\libnpmexec\\lib\\index.js:202:15)\n14 verbose stack at async Npm.exec\n(C:\\Users\\Pc\\AppData\\Roaming\\npm\\node_modules\\npm\\lib\\npm.js:207:9) 14\nverbose stack at async module.exports\n(C:\\Users\\Pc\\AppData\\Roaming\\npm\\node_modules\\npm\\lib\\cli\\entry.js:69:5)\n15 verbose pkgid tailwindcss@4.0.0 16 error could not determine\nexecutable to run 17 verbose cwd D:\\ReactJS\\travel-site 18 verbose os\nWindows_NT 10.0.19045 19 verbose node v20.18.0 20 verbose npm v11.0.0\n21 verbose exit 1 22 verbose code 1 23 error A complete log of this\nrun can be found in:\nC:\\Users\\Pc\\AppData\\Local\\npm-cache_logs\\2025-01-25T08_30_42_408Z-debug-0.log\n\nI've noticed that some others have reported the same issue, but I couldn't find a clear solution that worked for my case.\n\nHow can I fix this issue and successfully initialize Tailwind CSS using npx in my project?\n\n========================================\n\nCode:\n```text\nnpm install -D tailwindcss postcss autoprefixer\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n```text\nshadcn/ui\n```\n\n```text\nnpm install tailwindcss@3\n```\n\n```text\nshadcn-ui/ui\n```\n\n```text\nshadcn/ui\n```\n\n```text\nnpm install tailwindcss@3\n```\n\n```text\nshadcn-ui/ui\n```\n\n```text\nshadcn-ui/ui\n```\n\n```text\nshadcn/ui\n```\n\n========================================\n\nComments:\n- This question is similar to: Problem installing TailwindCSS with Vite, after \"npx tailwindcss init -p\" command. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.\n- Why not working TailwindCSS\n- A few days ago, Shadcn officially started supporting TailwindCSS v4; See: `shadcn-ui/ui` #6427 and Shadcn UI with TailwindCSS v4","metadata":{"transformedAt":"2026-08-18T18:33:42.910Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":112,"estimatedTokens":908}}329{"id":"stack-70153513","source":"stackoverflow","questionId":70153513,"title":"Tailwind purge with Nx, no ProjectGraph error","tags":["angular","tailwind-css","nrwl-nx"],"text":"Title: Tailwind purge with Nx, no ProjectGraph error\nTags: angular, tailwind-css, nrwl-nx\nSource: Stack Overflow\n\nQuestion:\nThe documentation here: https://nx.dev/l/r/guides/using-tailwind-css-in-react#introducing-nx-utility-for-better-tailwind-purging suggests to use `createGlobPatternsForDependencies(__dirname)` for ease of maintenance.\n\nI am using this from '@nrwl/angular/tailwind', not '@nrwl/react/tailwind'.\n\nWhen I use this and trigger a build of my app, I get the following errors:\n\n`[createGlobPatternsForDependencies] WARNING: There was no ProjectGraph available to read from, returning an empty array of glob patterns`\n\n**Q: How can I resolve this?**\n\nI can run `nx dep-graph` and the dependency graph generates fine.\n\n**EDIT**: I debugged this, and `__dirname` documentation says *workspace relative directory path that will be used to infer the parent project and dependencies*\nbut then it fails later on line 20 of `generate-globs.js` because `filenameRelativeToWorkspaceRoot` is the '', i.e. its trying to find a project name but `__dirname` is the workspace name itself?\n\nso\n\n`purge: createGlobPatternsForDependencies(join(__dirname, 'apps/simple-app')),`\n\ndoesn't give the ProjectGraph error but\n\n`purge: createGlobPatternsForDependencies(__dirname),` does\n\n========================================\n\nTop Answer:\nI am neither sure if that is the right solution or if it helps anyone but me. But resetting the nx workspace with `nx reset` did the job for me.\n\n========================================\n\nCode:\n```text\ncreateGlobPatternsForDependencies(__dirname)\n```\n\n```text\n[createGlobPatternsForDependencies] WARNING: There was no ProjectGraph available to read from, returning an empty array of glob patterns\n```\n\n```text\nnx dep-graph\n```\n\n```text\n__dirname\n```\n\n```text\ngenerate-globs.js\n```\n\n```text\nfilenameRelativeToWorkspaceRoot\n```\n\n```text\n__dirname\n```\n\n```text\npurge: createGlobPatternsForDependencies(join(__dirname, 'apps/simple-app')),\n```\n\n```text\npurge: createGlobPatternsForDependencies(__dirname),\n```\n\n```text\ncreateGlobPatternsForDependencies\n```\n\n```text\n__dirname\n```\n\n```text\n[createGlobPatternsForDependencies] WARNING: There was no ProjectGraph available to read from, returning an empty array of glob patterns\n```\n\n```text\ntailwind.js\n```\n\n```text\nnx reset\n```\n\n```text\nsourceRoot\n```\n\n```text\nsourceRoot\n```\n\n========================================\n\nComments:\n- So out of curiosity, does `purge: createGlobPatternsForDependencies(join(__dirname, 'apps/simple-app')),` actually purge correctly, when not in JIT mode?\n- It worked for me but only for the one app and only with setting `enabled: true` which meant it would also purge for local dev. There was a separate issue with NODE_ENV not coming through.\n- We also encountered this problem when we tried to add tailwind to a project with circular dependencies. The inner method of `createGlobPatternsForDependencies` was throwing `callstack exceeded` error and the `[createGlobPatternsForDependencies] WARNING: There was no ProjectGraph available to read from, returning an empty array of glob patterns` was shown instead.\n- yes so that is the expected error for circular dependencies. whereas in this case there were no circular dependencies but it still failed to build the project graph because it wasn't coping with glob-ing for all apps.\n- I have two apps and the following dependencies `[a] -> [lib-a]` and `[b] -> [lib-a]`. While the **first app works fine** and processes the Tailwind Classes of the library, the **second one doesn't**. **Both have the** the \"[createGlobPatternsForDependencies] WARNING: There was no ProjectGraph available to read from, returning an empty array of glob patterns \" warnings. While I have no idea what it else could be, it's weird that the first IS working despite not returning the patterns for my library","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":108,"estimatedTokens":962}}330{"id":"stack-68592359","source":"stackoverflow","questionId":68592359,"title":"Is there a way to avoid purging a specific library with Tailwind?","tags":["reactjs","tailwind-css"],"text":"Title: Is there a way to avoid purging a specific library with Tailwind?\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have this on my tailwind config:\n\n```\npurge: {\n content: ['./src/**/*.css', './src/**/*.tsx', './src/**/*.js'],\n safelist: ['animate-spin'],\n},\n```\n\nHad to add \"animate-spin\" to the safelist because it was getting purged. This class is only being used on a component library, but I'm seeing that there are still some classes missing.\n\nThe problem is that I don't want to add one by one all the classes missing, is there a way to add an entire library to the safelist?\n\n========================================\n\nCode:\n```text\npurge: {\n content: ['./src/**/*.css', './src/**/*.tsx', './src/**/*.js'],\n safelist: ['animate-spin'],\n},\n```\n\n```text\ncontent: ['./src//*.css','./src//.tsx','./src/**/.js',\n './node_modules/@mylib//*.css','./node_modules/@mylib//.tsx',\n './node_modules/@mylib/**/.js',],\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":33,"estimatedTokens":240}}331{"id":"stack-66210313","source":"stackoverflow","questionId":66210313,"title":"How to do cursor:pointer in group-hover Tailwind Css?","tags":["tailwind-css"],"text":"Title: How to do cursor:pointer in group-hover Tailwind Css?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have been trying to change cursor on group-hover like this,\n\n```\n\n \n \n \n \n \n \n \n \n \n \n \n```\n\nBut it's not supported guess,\nSo is there any alternate way to do that?\n\n========================================\n\nCode:\n```text\n<nav class=\"bg-indigo-800 flex justify-center w-screen\">\n <div class=\"mt-2 flex justify-between items-center w-11/12 h-16 bg-gradient-to-t\">\n <div class=\"w-16\">\n <img class=\"w-full\" src=\"./images/Logo.png\" alt=\"logo\">\n </div>\n <div class=\"group\">\n <div class=\"group-hover:border-white group-hover:hover:cursor-pointer mb-1 w-6 border-t-2\"></div>\n <div class=\"group-hover:border-white group-hover:hover:cursor-pointer mb-1 w-6 border-t-2\"></div>\n <div class=\"group-hover:border-white group-hover:hover:cursor-pointer mb-1 w-6 border-t-2\"></div>\n </div>\n </div>\n </nav>\n```\n\n```text\nhover:cursor-pointer\n```\n\n========================================\n\nComments:\n- Did you add the variant for your wished utilities into your config file ? v1.tailwindcss.com/docs/pseudo-class-variants#group-hover\n- My previous' comment solution is not working, could you rather just put the `cusor-pointer` on the div with the `group` class ? I mean, if you want to have all the divs with a cursor inside of it, you could basically pass it to the parent. Otherwise, I tried some stuff but it looks like you should rely on JS here.","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":52,"estimatedTokens":393}}332{"id":"stack-66069627","source":"stackoverflow","questionId":66069627,"title":"Image grid fixed aspect ratio with dynamic size","tags":["html","css","tailwind-css"],"text":"Title: Image grid fixed aspect ratio with dynamic size\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\n```\n\n \n \n \n \n \n \n \n\n```\n\n\r\n\r\n\r\n\nIf I have a grid-like this, how can I force the images to have a 1:1 aspect ratio? Yes, I can use `object-cover`, but then I would need to set a fixed width/height. Is there a way to do this while still keeping the dynamic width?\n\n========================================\n\nTop Answer:\nYou could achieve this with extra container `div`s around your image with bottom padding 100%.\n\nYou first need to extend `spacing` in your `tailwind.config.js` to include the percentage you want.\n\n```\nmodule.exports = {\n theme: {\n extend: {\n spacing: {\n '1/1': '100%',\n }\n }\n },\n variants: {},\n plugins: [],\n}\n```\n\nThen add the `div`s around your images:\n\n```\n\n \n \n \n \n \n \n \n \n \n \n \n\n```\n\n========================================\n\nCode:\n```html\n<div class=\"p-4\">\n <div class=\"grid gap-4 sm:gap-8 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6\">\n <img src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" />\n <img src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" />\n <img src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" />\n <img src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" />\n <img src=\"https://images.unsplash.com/photo-1612476464716-431a2751e006\" />\n </div>\n</div>\n```\n\n```text\nobject-cover\n```\n\n```css\n.grid div {\n padding-top:100%;\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n<div class=\"p-4\">\n <div class=\"grid gap-4 sm:gap-8 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6\">\n <div class=\"relative\"><img src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" class=\"w-full h-full absolute inset-0 object-cover\"></div>\n <div class=\"relative\"><img src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" class=\"w-full h-full absolute inset-0 object-cover\"></div>\n <div class=\"relative \"><img src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" class=\"w-full h-full absolute inset-0 object-cover\"></div>\n <div class=\"relative\"><img src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" class=\"w-full h-full absolute inset-0 object-cover\"></div>\n <div class=\"relative\"><img src=\"https://images.unsplash.com/photo-1612476464716-431a2751e006\" class=\"w-full h-full absolute inset-0 object-cover\"></div>\n </div>\n</div>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n<div class=\"p-4\">\n <div class=\"grid gap-4 sm:gap-8 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6\">\n <div class=\"relative aspect-h-1 aspect-w-1\"><img src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" class=\"w-full h-full absolute inset-0 object-cover\"></div>\n <div class=\"relative aspect-h-1 aspect-w-1\"><img src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" class=\"w-full h-full absolute inset-0 object-cover\"></div>\n <div class=\"relative aspect-h-1 aspect-w-1\"><img src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" class=\"w-full h-full absolute inset-0 object-cover\"></div>\n <div class=\"relative aspect-h-1 aspect-w-1\"><img src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" class=\"w-full h-full absolute inset-0 object-cover\"></div>\n <div class=\"relative aspect-h-1 aspect-w-1\"><img src=\"https://images.unsplash.com/photo-1612476464716-431a2751e006\" class=\"w-full h-full absolute inset-0 object-cover\"></div>\n </div>\n</div>\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n spacing: {\n '1/1': '100%',\n }\n }\n },\n variants: {},\n plugins: [],\n}\n```\n\n```html\n<div class=\"p-4\">\n <div class=\"grid gap-4 sm:gap-8 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6\">\n <div class=\"relative pb-1/1\">\n <img class=\"absolute w-full h-full object-cover\" src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" />\n </div>\n <div class=\"relative pb-1/1\">\n <img class=\"absolute w-full h-full object-cover\" src=\"https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg\" />\n </div>\n <div class=\"relative pb-1/1\">\n <img class=\"absolute w-full h-full object-cover\" src=\"https://images.unsplash.com/photo-1612476464716-431a2751e006\" />\n </div>\n </div>\n</div>\n```\n\n```text\ndiv\n```\n\n```text\nspacing\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ndiv\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":158,"estimatedTokens":1144}}333{"id":"stack-73508899","source":"stackoverflow","questionId":73508899,"title":"Padding not working for table component in Tailwind","tags":["tailwind-css","tailwind-in-js"],"text":"Title: Padding not working for table component in Tailwind\nTags: tailwind-css, tailwind-in-js\nSource: Stack Overflow\n\nQuestion:\nI am trying to add padding for table head and table rows in Tailwind based React App.\n\nHere's my code:\n\n```\nimport React from \"react\";\nimport \"./styles.css\";\nimport \"./styles/tailwind-pre-build.css\";\n\nexport default function App() {\n return (\n \n \n \n App Name\n Owner\n Date Created\n Scopes\n Actions\n \n \n \n \n Test App\n Shivam Sahil\n 20 May 2022, 19:58 AM\n all.create all.update all.read\n Edit\n \n \n \n );\n}\n```\n\nFor some reason the padding doesn't seem to happen at all. I tried to inspect and check but even when adding padding in styles it won't show up, can someone help me understand what wrong am I doing here?\n\nHere's the live sandbox:https://codesandbox.io/s/tailwind-css-and-react-forked-xwvdue?file=/src/App.js:0-884\n\n========================================\n\nTop Answer:\nWe need to apply padding for every `th` or `td` tag . So I suggest applying it in global css like this :\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n tr th {\n @apply p-3;\n }\n tr td {\n @apply p-3;\n }\n}\n```\n\n========================================\n\nCode:\n```text\nimport React from \"react\";\nimport \"./styles.css\";\nimport \"./styles/tailwind-pre-build.css\";\n\nexport default function App() {\n return (\n <table className=\"w-full px-2 rounded-t-md\">\n <thead className=\"text-white bg-blue-600 text-left border border-red-600 p-2\">\n <tr className=\"w-full p-2\">\n <th className=\"font-medium\">App Name</th>\n <th className=\"font-medium\">Owner</th>\n <th className=\"font-medium\">Date Created</th>\n <th className=\"font-medium\">Scopes</th>\n <th className=\"font-medium\">Actions</th>\n </tr>\n </thead>\n <tbody>\n <tr className=\"p-2\">\n <td>Test App</td>\n <td>Shivam Sahil</td>\n <td>20 May 2022, 19:58 AM</td>\n <td className=\"break-words\">all.create all.update all.read</td>\n <td>Edit</td>\n </tr>\n </tbody>\n </table>\n );\n}\n```\n\n```html\n<table className=\"w-full rounded-t-md\">\n <thead className=\"text-white bg-blue-600 text-left border border-red-600\">\n <tr className=\"w-full\">\n <th className=\"font-medium p-2\">App Name</th>\n <th className=\"font-medium p-2\">Owner</th>\n <th className=\"font-medium p-2\">Date Created</th>\n <th className=\"font-medium p-2\">Scopes</th>\n <th className=\"font-medium p-2\">Actions</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td className=\"p-2\">Test App</td>\n <td className=\"p-2\">Shivam Sahil</td>\n <td className=\"p-2\">20 May 2022, 19:58 AM</td>\n <td className=\"break-words p-2\">all.create all.update all.read</td>\n <td className=\"p-2\">Edit</td>\n </tr>\n </tbody>\n</table>\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer utilities {\n td,\n th {\n @apply p-2;\n }\n}\n```\n\n```text\n<tr>\n```\n\n```text\n<th>\n```\n\n```text\n<td>\n```\n\n```text\np-2\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n tr th {\n @apply p-3;\n }\n tr td {\n @apply p-3;\n }\n}\n```\n\n```text\nth\n```\n\n```text\ntd\n```\n\n========================================\n\nComments:\n- thank you very much what you suggested worked however I wanted to know why it didn't work when we apply it at top level\n- This is weird for me too, but it's the www.w3.org specification and just need to remember this exception.\n- I've found that setting the padding on the first `` or `` tag sets it for all cells if you hate being repetetive","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":179,"estimatedTokens":899}}334{"id":"stack-67837075","source":"stackoverflow","questionId":67837075,"title":"Tailwind classes not working after page refresh in production","tags":["javascript","reactjs","next.js","tailwind-css","css-purge"],"text":"Title: Tailwind classes not working after page refresh in production\nTags: javascript, reactjs, next.js, tailwind-css, css-purge\nSource: Stack Overflow\n\nQuestion:\n### Problem Statement:\n\nI have a `nextjs` project with `tailwindcss`. On the login page, the UI has the necessary classes available on the first page load, but if I refresh the page then the classes go away from the DOM and the UI is broken.\n\nThis is the deployed link to the site's login page\n\n### How to reproduce?\n\n- open the above given link, you will observe the login form UI *looks okay.*\n\nhttps://i.sstatic.net/gkkyU.png\n\n- Ctrl+R (Refresh the page), you will observe that the login UI is *now broken*\n\nhttps://i.sstatic.net/c6AIZ.jpg\n\n### Code Files\n\ntailwind.config.js\n\n```\nconst colors = require('tailwindcss/colors')\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n purge: {\n content:[\n './src/pages/**/*.js',\n './src/pages/**/*.ts',\n './src/pages/**/*.tsx',\n './src/design-system/**/*.js',\n './src/design-system/**/*.ts',\n './src/design-system/**/*.tsx',\n './src/components/**/*.js',\n './src/components/**/*.ts',\n './src/components/**/*.tsx'\n ],\n \n // options: {whitelist:['h-52', 'py-9', 'max-w-2xl', 'text-white', 'h-screen']}\n},\n darkMode: false, // or 'media' or 'class'\n theme: {\n fontSize: {\n 'xxs': '10px',\n 'xs': '.75rem',\n 'sm': '.875rem',\n 'tiny': '.875rem',\n 'base': '1rem',\n 'lg': '1.125rem',\n 'xl': '1.25rem',\n '2xl': '1.5rem',\n '3xl': '1.875rem',\n '4xl': '2.25rem',\n '5xl': '3rem',\n '6xl': '4rem',\n '7xl': '5rem'\n },\n flex: {\n 1: '1 1 0%',\n '30p': '0 0 30%',\n auto: '1 1 auto',\n initial: '0 1 auto',\n inherit: 'inherit',\n none: 'none',\n 2: '2 2 0%',\n full: '0 0 100%',\n half: '0 0 50%'\n },\n colors: {\n white: colors.white,\n gray: colors.trueGray,\n indigo: colors.indigo,\n green: colors.green,\n red: colors.rose,\n rose: colors.rose,\n purple: colors.purple,\n orange: colors.orange,\n 'light-blue': colors.lightBlue,\n fuchsia: colors.fuchsia,\n pink: colors.pink,\n cyan: colors.cyan,\n\n // NEW UI COLORS\n 'CD-blue': '#2357DE',\n 'CD-blue-accent': '#4770FF',\n 'CD-black-dark': '#1D1D1D',\n 'CD-black-dark-accent': '#202020',\n 'CD-black-medium-dark': '#242424',\n 'CD-black-extra-dark': '#1B1B1B',\n 'CD-black-light': '#2E2E2E',\n 'CD-gray': '#3E3E3E',\n 'CD-gray-accent': '#353535',\n 'CD-red-accent': '#FF745F',\n 'CD-yellow-accent': '#FFC167'\n },\n minHeight: {\n 0: '0',\n '1/4': '25%',\n '1/2': '50%',\n '3/4': '75%',\n full: '100%',\n '90vh': '90vh'\n },\n minWidth: {\n 0: '0',\n '1/4': '25%',\n '1/2': '50%',\n '3/4': '75%',\n full: '100%',\n '250px': '250px'\n },\n screens: {\n xs: { min: '0px', max: '390px' },\n ...defaultTheme.screens\n },\n extend: {}\n },\n variants: {\n extend: {}\n },\n plugins: []\n}\n```\n\nlogin.jsx --> login UI's JSX\n\n```\n\n \n \n \n\n### Creator Login\n\n \n \n setUsername(val)}\n data-testid=\"username\"\n />\n \n setPassword(val)}\n data-testid=\"password\"\n />\n \n \n Forgot Password?\n \n \n\n \n \n \n \n \n Regular Login\n \n \n\n \n \n \n \n\n \n Creator Login | codedamn\n \n\n```\n\n========================================\n\nTop Answer:\nI think the problem is on \"purge\" property\ntry something like this:\n\n```\npurge: [\"./src/pages/**/*.{js,jsx,ts,tsx}\", './src/styles/**/*.css'],\n```\n\nref: https://tailwindcss.com/docs/guides/nextjs\n\n========================================\n\nCode:\n```js\nconst colors = require('tailwindcss/colors')\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n purge: {\n content:[\n './src/pages/**/*.js',\n './src/pages/**/*.ts',\n './src/pages/**/*.tsx',\n './src/design-system/**/*.js',\n './src/design-system/**/*.ts',\n './src/design-system/**/*.tsx',\n './src/components/**/*.js',\n './src/components/**/*.ts',\n './src/components/**/*.tsx'\n ],\n \n // options: {whitelist:['h-52', 'py-9', 'max-w-2xl', 'text-white', 'h-screen']}\n},\n darkMode: false, // or 'media' or 'class'\n theme: {\n fontSize: {\n 'xxs': '10px',\n 'xs': '.75rem',\n 'sm': '.875rem',\n 'tiny': '.875rem',\n 'base': '1rem',\n 'lg': '1.125rem',\n 'xl': '1.25rem',\n '2xl': '1.5rem',\n '3xl': '1.875rem',\n '4xl': '2.25rem',\n '5xl': '3rem',\n '6xl': '4rem',\n '7xl': '5rem'\n },\n flex: {\n 1: '1 1 0%',\n '30p': '0 0 30%',\n auto: '1 1 auto',\n initial: '0 1 auto',\n inherit: 'inherit',\n none: 'none',\n 2: '2 2 0%',\n full: '0 0 100%',\n half: '0 0 50%'\n },\n colors: {\n white: colors.white,\n gray: colors.trueGray,\n indigo: colors.indigo,\n green: colors.green,\n red: colors.rose,\n rose: colors.rose,\n purple: colors.purple,\n orange: colors.orange,\n 'light-blue': colors.lightBlue,\n fuchsia: colors.fuchsia,\n pink: colors.pink,\n cyan: colors.cyan,\n\n // NEW UI COLORS\n 'CD-blue': '#2357DE',\n 'CD-blue-accent': '#4770FF',\n 'CD-black-dark': '#1D1D1D',\n 'CD-black-dark-accent': '#202020',\n 'CD-black-medium-dark': '#242424',\n 'CD-black-extra-dark': '#1B1B1B',\n 'CD-black-light': '#2E2E2E',\n 'CD-gray': '#3E3E3E',\n 'CD-gray-accent': '#353535',\n 'CD-red-accent': '#FF745F',\n 'CD-yellow-accent': '#FFC167'\n },\n minHeight: {\n 0: '0',\n '1/4': '25%',\n '1/2': '50%',\n '3/4': '75%',\n full: '100%',\n '90vh': '90vh'\n },\n minWidth: {\n 0: '0',\n '1/4': '25%',\n '1/2': '50%',\n '3/4': '75%',\n full: '100%',\n '250px': '250px'\n },\n screens: {\n xs: { min: '0px', max: '390px' },\n ...defaultTheme.screens\n },\n extend: {}\n },\n variants: {\n extend: {}\n },\n plugins: []\n}\n```\n\n```html\n<div>\n<div className=\"h-screen w-full flex justify-center items-center mx-auto max-w-2xl text-white\">\n <div className=\"w-full md:min-w-full bg-CD-black-dark-accent rounded px-8 mx-4 sm:px-16 py-10\">\n <div className=\"text-center mb-16\">\n <h1 className=\"text-3xl\">Creator Login</h1>\n </div>\n <div className=\"space-y-4\">\n <Input\n label=\"Enter username\"\n type=\"text\"\n placeholder=\"For e.g. noobmaster69\"\n value={username}\n onChange={val => setUsername(val)}\n data-testid=\"username\"\n />\n <div>\n <Input\n label=\"Password\"\n type=\"password\"\n placeholder=\"For e.g. **************\"\n value={password}\n onChange={val => setPassword(val)}\n data-testid=\"password\"\n />\n <p className=\"mt-2\">\n <a\n className=\"text-xs text-CD-blue cursor-pointer font-semibold\"\n href=\"https://codedamn.com/contact\"\n tabIndex={1}>\n Forgot Password?\n </a>\n </p>\n </div>\n <div>\n <Button\n label=\"Continue\"\n type=\"blue\"\n fullWidth\n data-testid=\"login\"\n onClick={attemptUserLogin}\n loading={busy}\n disabled={busy}\n />\n <p className=\"text-center my-4\">\n <a\n className=\"text-xs cursor-pointer font-semibold\"\n href=\"https://codedamn.com/login\"\n tabIndex={1}>\n Regular Login\n </a>\n </p>\n </div>\n </div>\n </div>\n </div>\n\n <Head>\n <title>Creator Login | codedamn</title>\n </Head>\n</div>\n```\n\n```text\nnextjs\n```\n\n```text\ntailwindcss\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n<div>\n <div className={\"flex flex-row w-screen p-2 items-center\"}>\n {...content}\n </div>\n</div>\n```\n\n```text\ndiv\n```\n\n```text\ndiv\n```\n\n```text\npurge: [\"./src/pages/**/*.{js,jsx,ts,tsx}\", './src/styles/**/*.css'],\n```\n\n```text\nrouter.push()\n```\n\n```text\nwindow.location.href='\\'\n```\n\n========================================\n\nComments:\n- I see that when loaded, the `main` tag disappears, also it changes the `w-full md:min-w-full bg-CD-black-dark-accent rounded px-8 mx-4 sm:px-16 py-10` class to `h-screen w-full flex justify-center items-center mx-auto max-w-2xl text-white`. Do check if there any function changes this classes in your react app. If not, it on codesandox for further debugging.\n- Please see github.com/vercel/next.js/issues/43878.\n- Can u post a simple sample of your suggestion, please\n- Or you can change something in .scss file to make the classes work! But it's not an ideal solution!\n- Thank you, this solved my problem! I just edited something inside `tailwind.config.js` without changing any content only to save and the buggy styles started working.","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":404,"estimatedTokens":2502}}335{"id":"stack-68316128","source":"stackoverflow","questionId":68316128,"title":"InstantSearch can't remove blue cross which resets query","tags":["reactjs","tailwind-css","algolia","instantsearch"],"text":"Title: InstantSearch can't remove blue cross which resets query\nTags: reactjs, tailwind-css, algolia, instantsearch\nSource: Stack Overflow\n\nQuestion:\nI'm using InstantSearch from algolia to create a input field, but I'm having trouble debugging where this cross comes from. It appears when the input field gets focused or hovered, the blue cross appear and it looks like it clears the query. (I already have a button for reseting). Inspecting elements wont show anything \"popping\" up when hovering/focusing and I'm wondering how it got there\n\nIs there something i have skipped? or added extras in the css? I may have used a template for this before implementing\n\nhttps://i.sstatic.net/w4qBr.png\n\nmy html:\n\n```\n\n \n \n \n }\n autoFocus={true}\n />\n \n \n \n \n```\n\nmy css:\n\n```\n.ais-SearchBox {\n}\n\n.ais-SearchBox-form {\n display: flex;\n}\n.ais-Pagination {\n margin-top: 1em;\n}\n.ais-SearchBox-resetIcon {\n height: 2rem;\n width: 2rem;\n}\n.left-panel {\n float: left;\n width: 250px;\n}\n\n.right-panel {\n margin-left: 260px;\n}\n\n.ais-InstantSearch {\n max-width: 960px;\n overflow: hidden;\n margin: 0 auto;\n}\n\n.ais-Hits-item {\n margin-bottom: 1em;\n width: calc(50% - 1rem);\n}\n\n.ais-Hits-item img {\n margin-right: 1em;\n}\n\n.hit-name {\n margin-bottom: 0.5em;\n}\n\n.hit-description {\n color: #888;\n font-size: 14px;\n margin-bottom: 0.5em;\n}\n.ais-SearchBox-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0.3rem 1.7rem;\n position: relative;\n background-color: transparent;\n border: 1px solid white;\n color: white;\n text-align: center;\n font-size: 2.5rem;\n caret-color: #d8fc91;\n}\n.ais-SearchBox-input::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: white;\n opacity: 1; /* Firefox */\n}\n\n.ais-SearchBox-input:-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: white;\n}\n\n.ais-SearchBox-input::-ms-input-placeholder {\n /* Microsoft Edge */\n color: white;\n}\n.ais-SearchBox-input:focus {\n outline: none;\n}\n.ais-Highlight-highlighted {\n background-color: aqua;\n}\n.ais-SearchBox-submitIcon {\n display: none;\n}\n@media (min-width: 768px) {\n /*Medium in tailwind*/\n .ais-SearchBox-input {\n font-size: 5.625rem;\n }\n}\n```\n\n========================================\n\nCode:\n```text\n<div className=\"items-center h-full\">\n <InstantSearch\n indexName={variables.ALGOLIA_INDEX}\n searchClient={algolia}\n >\n <div className=\"h-full flex flex-col items-center justify-center\">\n <SearchBox\n translations={{\n placeholder: '',\n resetTitle: 'Tøm søkefeltet',\n }}\n reset={\n <SearchCloseIcon className=\" h-5 md:h-10 transform duration-500 hover:scale-110 cursor-pointer\" />\n }\n autoFocus={true}\n />\n <Results />\n </div>\n </InstantSearch>\n </div>\n```\n\n```text\n.ais-SearchBox {\n}\n\n.ais-SearchBox-form {\n display: flex;\n}\n.ais-Pagination {\n margin-top: 1em;\n}\n.ais-SearchBox-resetIcon {\n height: 2rem;\n width: 2rem;\n}\n.left-panel {\n float: left;\n width: 250px;\n}\n\n.right-panel {\n margin-left: 260px;\n}\n\n.ais-InstantSearch {\n max-width: 960px;\n overflow: hidden;\n margin: 0 auto;\n}\n\n.ais-Hits-item {\n margin-bottom: 1em;\n width: calc(50% - 1rem);\n}\n\n.ais-Hits-item img {\n margin-right: 1em;\n}\n\n.hit-name {\n margin-bottom: 0.5em;\n}\n\n.hit-description {\n color: #888;\n font-size: 14px;\n margin-bottom: 0.5em;\n}\n.ais-SearchBox-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0.3rem 1.7rem;\n position: relative;\n background-color: transparent;\n border: 1px solid white;\n color: white;\n text-align: center;\n font-size: 2.5rem;\n caret-color: #d8fc91;\n}\n.ais-SearchBox-input::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: white;\n opacity: 1; /* Firefox */\n}\n\n.ais-SearchBox-input:-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: white;\n}\n\n.ais-SearchBox-input::-ms-input-placeholder {\n /* Microsoft Edge */\n color: white;\n}\n.ais-SearchBox-input:focus {\n outline: none;\n}\n.ais-Highlight-highlighted {\n background-color: aqua;\n}\n.ais-SearchBox-submitIcon {\n display: none;\n}\n@media (min-width: 768px) {\n /*Medium in tailwind*/\n .ais-SearchBox-input {\n font-size: 5.625rem;\n }\n}\n```\n\n```text\n.ais-SearchBox-input[type=\"search\"]::-webkit-search-cancel-button {\n display: none;\n}\n```\n\n========================================\n\nComments:\n- Try to hide it with `::-ms-clear: { display: none; }`\n- @IharAliakseyenka, it did nothing unfortunately :(\n- I guess your has `type=\"search\"` attribute. Maybe this stackoverflow.com/questions/18856246/… will help?\n- @IharAliakseyenka thanks the solution there fixed it!!","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":252,"estimatedTokens":1184}}336{"id":"stack-72954236","source":"stackoverflow","questionId":72954236,"title":"How to use tailwindcss in nodejs","tags":["html","css","tailwind-css"],"text":"Title: How to use tailwindcss in nodejs\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIs there a way to use tailwindcss as a nodejs api like this\n\n```\nconst tailwind = require('tailwindcss')\n\nconst css = tailwind(html,css,....)\n```\n\n========================================\n\nTop Answer:\nI don't think there is any. You can try using the CDN if it works for your use case.\n\n```\n\n```\n\n========================================\n\nCode:\n```js\nconst tailwind = require('tailwindcss')\n\nconst css = tailwind(html,css,....)\n```\n\n```js\nconst autoprefixer = require('autoprefixer')\nconst postcss = require('postcss')\nconst postcssNested = require('postcss-nested')\nconst tailwindcss = require('tailwindcss');\nconst fs = require('fs')\n\nfs.readFile('src/app.css', (err, css) => {\n postcss([autoprefixer, postcssNested, tailwindcss])\n .process(css, { from: 'src/app.css', to: 'dest/app.css' })\n .then(result => {\n fs.writeFile('dest/app.css', result.css, () => true)\n if ( result.map ) {\n fs.writeFile('dest/app.css.map', result.map.toString(), () => true)\n }\n })\n})\n```\n\n```text\npostcss\n```\n\n```html\n<script src=\"//cdn.tailwindcss.com\"></script>\n```\n\n========================================\n\nComments:\n- Interesting that this doesn't exist. Looks like the npm package only exports the postcss plugin but no API that provides similar features to the cli: github.com/tailwindlabs/tailwindcss/blob/master/src/index.js","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":62,"estimatedTokens":363}}337{"id":"stack-77639125","source":"stackoverflow","questionId":77639125,"title":"Tailwind background colors not working after installing Shadcn","tags":["reactjs","frontend","jsx","tailwind-css","remix.run"],"text":"Title: Tailwind background colors not working after installing Shadcn\nTags: reactjs, frontend, jsx, tailwind-css, remix.run\nSource: Stack Overflow\n\nQuestion:\nI am making a Remix JS React app and using Tailwind for theming. Initially Tailwind served me perfectly until I tried to use a `` in a form and couldn't get it to remove that ugly down arrow in the browser render of the element. I then installed `@Shadcn` on recommendation and refactored my screen to use its inbuilt `` components.\n\nThe problem is that when I try to run the app my background colors (`className=\"bg-`\") are no longer applying. second and most concerningly, the custom class component I made to make all the inputs of the form uniform is causing the build to fail with the error:\n\n```\n[plugin: postcss-plugin] ~\\appdir\\app\\tailwind.css:7:9: The `bg-search-panel-element-color` class does not exist. If `bg-search-panel-element-color` is a custom class, make sure it is defined within a `@layer` directive.\n```\n\n`search-panel-element-color` is a cutom color I defined in the `tailwindconfig.ts` file under `theme.extend.colors`. the bg- prefix is for Tailwind to know that I am setting a background color. The code was compiling before and the only change was that I installed shadcn. I was reliably informed that shadcn builds ontop of Tailwind so I don't know why it is causing a valid Tailwind styling to fail.\n\nSo far I have tried setting `tailwind.cssVariables` setting to `false` in `components.json` but it still fails to build unless I remove my background color from the custom Tailwind class.\n\nhere is my code:\n\ncomponents.json:\n\n```\n{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n \"style\": \"default\",\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {\n \"config\": \"tailwind.config.js\",\n \"css\": \"app/globals.css\",\n \"baseColor\": \"gray\",\n \"cssVariables\": false\n },\n \"aliases\": {\n \"components\": \"@/components\",\n \"utils\": \"@/lib/utils\"\n }\n}\n```\n\ntailwind.config.ts:\n\n```\nimport type { Config } from 'tailwindcss'\n\nexport default {\n content: [\"./app/**/*.{js,jsx,ts,tsx}\"],\n theme: {\n extend: {\n colors:{\n 'search-panel-element' : '#EDEDED',\n }\n },\n },\n plugins: [],\n} satisfies Config\n```\n\nthe custom component in tailwind.css that's causing the failed build:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components{\n .search-panel-input{\n @apply mx-1 pl-1 w-32 bg-search-panel-element rounded-md appearance-none;\n }\n}\n```\n\nwhen I remove the background color and the custom components looks like this:\n\n```\n@layer components{\n .search-panel-input{\n @apply mx-1 pl-1 w-32 rounded-md appearance-none;\n}\n```\n\nthe code compiles again.\n\nit seems as though shadcn has somehow made the `bg-` convention invalid cos the background does not set in elements where the class is applied inline.\nAny help you can render will be greatly appreciated.\n\n========================================\n\nTop Answer:\nIn my case, I had forgot to add the features folder in tailwind conifg yet my component is under ./features/components/*\n\n========================================\n\nCode:\n```bash\n[plugin: postcss-plugin] ~\\appdir\\app\\tailwind.css:7:9: The `bg-search-panel-element-color` class does not exist. If `bg-search-panel-element-color` is a custom class, make sure it is defined within a `@layer` directive.\n```\n\n```json\n{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n \"style\": \"default\",\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {\n \"config\": \"tailwind.config.js\",\n \"css\": \"app/globals.css\",\n \"baseColor\": \"gray\",\n \"cssVariables\": false\n },\n \"aliases\": {\n \"components\": \"@/components\",\n \"utils\": \"@/lib/utils\"\n }\n}\n```\n\n```js\nimport type { Config } from 'tailwindcss'\n\nexport default {\n content: [\"./app/**/*.{js,jsx,ts,tsx}\"],\n theme: {\n extend: {\n colors:{\n 'search-panel-element' : '#EDEDED',\n }\n },\n },\n plugins: [],\n} satisfies Config\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components{\n .search-panel-input{\n @apply mx-1 pl-1 w-32 bg-search-panel-element rounded-md appearance-none;\n }\n}\n```\n\n```css\n@layer components{\n .search-panel-input{\n @apply mx-1 pl-1 w-32 rounded-md appearance-none;\n}\n```\n\n```text\n<datalist>\n```\n\n```text\n@Shadcn\n```\n\n```text\n<Select>\n```\n\n```text\nclassName=\"bg-<color>\n```\n\n```text\nsearch-panel-element-color\n```\n\n```text\ntailwindconfig.ts\n```\n\n```text\ntheme.extend.colors\n```\n\n```text\ntailwind.cssVariables\n```\n\n```text\nfalse\n```\n\n```text\ncomponents.json\n```\n\n```text\nbg-<color>\n```\n\n```json\n{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n \"style\": \"default\",\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {\n \"config\": \"tailwind.config.js\",\n \"css\": \"app/globals.css\",\n \"baseColor\": \"gray\",\n \"cssVariables\": false\n },\n \"aliases\": {\n \"components\": \"@/components\",\n \"utils\": \"@/lib/utils\"\n }\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.ts\n```\n\n```text\ntailwind.config\n```\n\n```text\ntailwind.config.ts\n```\n\n```text\ncomponents.json\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.ts\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ncomponents.json\n```\n\n```text\ntailwind.config.ts\n```\n\n```text\ntailwind.config.ts\n```\n\n```text\ntailwind.config.ts\n```\n\n```text\ntailwind.config.ts\n```\n\n========================================\n\nComments:\n- Adding this Comment in case it will help someone: In my case, my problem was that i was trying to add a class to a component that already had a background color. I added new variants to avoid clashing with the component's class definition. Pretty stupid from my part...\n- it's stupid on shadcn's part tbh - it uses the cn function so there's no reason why it can't overwrite the class\n- I get the advice to install `ShadCN` at the beginning of the project but sometimes that's very unrealistic like in my case where the project was already started. I had no choice but to install it after project initial setup. also Shad uses `cn class` so it in theory should have merged both classes. in any case, thanks for providing an alternative view on the error. I still think merging the definitions of the two files and pointing the app app level config to point at the merged file then deleting the unneeded config is the best solution.","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":30,"totalLines":273,"estimatedTokens":1563}}338{"id":"stack-74466869","source":"stackoverflow","questionId":74466869,"title":"Nuxt build error: TypeError: Cannot destructure property 'nuxt' of 'this' as it is undefined","tags":["vue.js","npm","nuxt.js","tailwind-css"],"text":"Title: Nuxt build error: TypeError: Cannot destructure property 'nuxt' of 'this' as it is undefined\nTags: vue.js, npm, nuxt.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to create a new Nuxt project and followed their instructions here: https://nuxtjs.org/docs/get-started/installation. Basically just running `npm init nuxt-app@latest `.\n\nAfter going through the setup (in which I choose Tailwind as my UI of choice), I run `npm run dev` and it crashes while trying to build saying \"Cannot destructure property 'nuxt' of 'this' as it is undefined.\"\n\nHere is the full stack:\n\n```\nFATAL Cannot destructure property 'nuxt' of 'this' as it is undefined. 15:22:52 \n\n at postcss8Module (node_modules\\@nuxt\\postcss8\\dist\\index.js:15:10)\n at installModule (/C:/Users/conmi/Documents/Personal/Katie's%20Website/katierose-photos/node_modules/@nuxt/kit/dist/index.mjs:416:9)\n at async setup (/C:/Users/conmi/Documents/Personal/Katie's%20Website/katierose-photos/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:186:7)\n at async ModuleContainer.normalizedModule (/C:/Users/conmi/Documents/Personal/Katie's%20Website/katierose-photos/node_modules/@nuxt/kit/dist/index.mjs:167:5)\n at async ModuleContainer.addModule (node_modules\\@nuxt\\core\\dist\\core.js:239:20)\n at async ModuleContainer.ready (node_modules\\@nuxt\\core\\dist\\core.js:51:7)\n at async Nuxt._init (node_modules\\@nuxt\\core\\dist\\core.js:478:5)\n```\n\nI found not including `'@nuxtjs/tailwindcss'` in the buildModules in nuxt.config.js removes the error, but it does not create the tailwind config files I need. Also, the line causing the error in postcss8Module's index.js is `const { nuxt } = this`. For some reason `this` is undefined.\n\n========================================\n\nTop Answer:\nThe error comes from the recent Nuxt 3 Release and is being tracked on the create-nuxt-app Github.\n\nCreate-nuxt-app is not compatible with Nuxt 3 yet. Therefore, for now, you have to install Nuxt 3 and Tailwind CSS manually:\n\n```\nnpx nuxi init \ncd \nnpm install\nnpm install @nuxtjs/tailwindcss --save-dev\n```\n\nNow you should be able to run your app as expected:\n\n```\nnpm run dev\n```\n\n========================================\n\nCode:\n```text\nFATAL Cannot destructure property 'nuxt' of 'this' as it is undefined. 15:22:52 \n\n at postcss8Module (node_modules\\@nuxt\\postcss8\\dist\\index.js:15:10)\n at installModule (/C:/Users/conmi/Documents/Personal/Katie's%20Website/katierose-photos/node_modules/@nuxt/kit/dist/index.mjs:416:9)\n at async setup (/C:/Users/conmi/Documents/Personal/Katie's%20Website/katierose-photos/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:186:7)\n at async ModuleContainer.normalizedModule (/C:/Users/conmi/Documents/Personal/Katie's%20Website/katierose-photos/node_modules/@nuxt/kit/dist/index.mjs:167:5)\n at async ModuleContainer.addModule (node_modules\\@nuxt\\core\\dist\\core.js:239:20)\n at async ModuleContainer.ready (node_modules\\@nuxt\\core\\dist\\core.js:51:7)\n at async Nuxt._init (node_modules\\@nuxt\\core\\dist\\core.js:478:5)\n```\n\n```text\nnpm init nuxt-app@latest <project-name>\n```\n\n```text\nnpm run dev\n```\n\n```text\n'@nuxtjs/tailwindcss'\n```\n\n```text\nconst { nuxt } = this\n```\n\n```text\nthis\n```\n\n```bash\nnpx nuxi init <project-name>\ncd <project-name>\nnpm install\nnpm install @nuxtjs/tailwindcss --save-dev\n```\n\n```text\nnpm run dev\n```\n\n```json\n\"resolutions\": {\n \"@nuxt/kit\": \"3.0.0-rc.13\"\n }\n```\n\n```text\nnpm install nuxt@latest vue-router@latest vue@latest --save-dev\n```\n\n```text\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n name: 'IndexPage'\n})\n</script>\n```\n\n========================================\n\nComments:\n- Use node v16 and try `npx create-nuxt-app my-new-project`, see if works better anyhow.\n- @kissu I am still getting the same error.\n- Something is wrong with your system then because that one should work flawlessly.\n- I succeeded to use Tailwind as advised by its documentation: tailwindcss.com/docs/guides/nuxtjs\n- OP didn't say that he wanted to use Nuxt3.\n- This should be the accepted answer (for the moment)\n- Same comment as of here: stackoverflow.com/questions/74936551/…","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":121,"estimatedTokens":1072}}339{"id":"stack-70925696","source":"stackoverflow","questionId":70925696,"title":"Why any postcss nesting plugins doesn't work?","tags":["reactjs","tailwind-css","postcss"],"text":"Title: Why any postcss nesting plugins doesn't work?\nTags: reactjs, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\n(4:3) Nested CSS was detected, but CSS nesting has not been configured correctly.\nPlease enable a CSS nesting plugin *before* Tailwind in your configuration.\nSee how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting\n\nMy postcss.config.js file:\n\n```\nplugins: [\n \"postcss-import\",\n \"tailwindcss/nesting\",\n \"tailwindcss\",\n \"autoprefixer\",\n ],\n};\n```\n\nI tried to write it down like this:\n\n```\nplugins: {\n \"postcss-import\": {},\n \"tailwindcss/nesting\": {},\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\nand like this:\n\n```\nplugins: [\n require(\"postcss-import\"),\n require(\"tailwindcss/nesting\"),\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ],\n};\n```\n\nGithub repo with this project: https://github.com/frkam/test-app\n\nWhen I try to use nesting, i get this:enter image description here\n\n========================================\n\nCode:\n```text\nplugins: [\n \"postcss-import\",\n \"tailwindcss/nesting\",\n \"tailwindcss\",\n \"autoprefixer\",\n ],\n};\n```\n\n```text\nplugins: {\n \"postcss-import\": {},\n \"tailwindcss/nesting\": {},\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n```text\nplugins: [\n require(\"postcss-import\"),\n require(\"tailwindcss/nesting\"),\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ],\n};\n```\n\n```text\nmodule.exports = {\n style: {\n postcss: {\n loaderOptions: (postcssLoaderOptions) => {\n postcssLoaderOptions.postcssOptions.plugins = [\n require('tailwindcss/nesting'),\n require('tailwindcss'),\n require('postcss-mixins'),\n 'postcss-flexbugs-fixes',\n [\n 'postcss-preset-env',\n {\n autoprefixer: {\n flexbox: 'no-2009',\n },\n stage: 0,\n },\n ],\n ]\n\n return postcssLoaderOptions\n },\n },\n },\n}\n```\n\n========================================\n\nComments:\n- Are you using Create React App, version 5? There are some known issues with PostCSS support, which is now included along with Tailwind, and CRA 5 does not allow overrides using `postcss.config.js`. See: github.com/facebook/create-react-app/pull/…\n- @EdLucas yes, i use CRA5. As I understand it, the solution to this problem may be to roll back to a previous version or use a different preprocessor. Thanks.\n- There's an open PR to fix this, which will hopefully be implemented. You can the issue here: github.com/tailwindlabs/tailwindcss/discussions/7049","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":116,"estimatedTokens":645}}340{"id":"stack-76469558","source":"stackoverflow","questionId":76469558,"title":"How to hide a component only on home navbar using next.js 13?","tags":["reactjs","tailwind-css","next.js13"],"text":"Title: How to hide a component only on home navbar using next.js 13?\nTags: reactjs, tailwind-css, next.js13\nSource: Stack Overflow\n\nQuestion:\nI'm finishing my undergraduate degree and creating a website as my course's final project to promote my research. I'm learning next.js just for this.\n\nI have this sidebar in my layout.tsx, but I want to hide the \"menuAlt\" component only on the homepage. I've done quite a bit of research and haven't found a solution yet. Would anyone know how to help me? Thank you.\n\n```\nimport Link from \"next/link\"\nimport MenuAlt from \"../MenuAlt/MenuAlt\"\n\nexport default function Sidebar() {\n return (\n \n \n \n JOGO DA MOBILIDADE ATIVA\n \n \n )\n}\n```\n\nI've tride to useRouter, but it can't seem to work, don't know what i'm doing wrong.\n\n========================================\n\nTop Answer:\nOr if you want to hide some paths you can use this method\n\n\r\n\r\n\n```\nimport Link from \"next/link\"\nimport MenuAlt from \"../MenuAlt/MenuAlt\"\nimport { useRouter } from \"next/router\"\n\nexport default function Sidebar() {\n const { pathname } = useRouter()\n const disablePathname = [\"/first-pathname\", \"/second-pathname\"]\n\n return (\n \n {!disablePathname.includes(pathname) ? : null}\n \n JOGO DA MOBILIDADE ATIVA\n \n \n )\n}\n```\n\n========================================\n\nCode:\n```text\nimport Link from \"next/link\"\nimport MenuAlt from \"../MenuAlt/MenuAlt\"\n\n\n\nexport default function Sidebar() {\n return (\n <div className=\"flex flex-col justify-between w-40 h-screen py-12 text-sm font-semibold leading-tight text-center text-white align-middle bg-black border-black\">\n <MenuAlt/>\n <Link\n className=\"hover:scale-110\"\n href=\"/\">\n JOGO DA MOBILIDADE ATIVA\n </Link>\n </div>\n )\n}\n```\n\n```text\n'use client'\n \nimport { usePathname } from 'next/navigation'\nimport Link from \"next/link\"\nimport MenuAlt from \"../MenuAlt/MenuAlt\"\n\nexport default function Sidebar() {\n const pathname = usePathname();\n return (\n <div className=\"flex flex-col justify-between w-40 h-screen py-12 text-sm font-semibold leading-tight text-center text-white align-middle bg-black border-black\">\n {pathname !== 'homepage-path' && <MenuAlt/>}\n <Link\n className=\"hover:scale-110\"\n href=\"/\">\n JOGO DA MOBILIDADE ATIVA\n </Link>\n </div>\n )\n}\n```\n\n```js\nimport Link from \"next/link\"\nimport MenuAlt from \"../MenuAlt/MenuAlt\"\nimport { useRouter } from \"next/router\"\n\nexport default function Sidebar() {\n const { pathname } = useRouter()\n const disablePathname = [\"/first-pathname\", \"/second-pathname\"]\n\n return (\n <div className=\"flex flex-col justify-between w-40 h-screen py-12 text-sm font-semibold leading-tight text-center text-white align-middle bg-black border-black\">\n {!disablePathname.includes(pathname) ? <MenuAlt/> : null}\n <Link\n className=\"hover:scale-110\"\n href=\"/\">\n JOGO DA MOBILIDADE ATIVA\n </Link>\n </div>\n )\n}\n```\n\n========================================\n\nComments:\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":3,"totalLines":126,"estimatedTokens":828}}341{"id":"stack-71937890","source":"stackoverflow","questionId":71937890,"title":"Tailwind CSS classes show up in the DOM, but the styles are not being applied","tags":["css","reactjs","tailwind-css"],"text":"Title: Tailwind CSS classes show up in the DOM, but the styles are not being applied\nTags: css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm having issues when dynamically assigning text colors to some headings. I have a .map function that runs and outputs some divs with different heading colors. This is example of my code:\n\n```\n{nftInfo.map((nft, index) => (\n \n \n \n {nft.title} {nft.color} \n {nft.icon}\n \n \n```\n\nExample of JSON:\n\n```\n{\n title: 'Dummy text 2',\n description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime minima odit aspernatur aliquam deleniti in corporis omnis cupiditate optio, voluptatum quasi reiciendis dolor, nostrum nihil quaerat est, doloremque mollitia possimus.',\n bottomText: 'Lorem ipsum dolor sit amet consectetur adipisicing',\n buttonText: 'Generate contract',\n icon: ,\n color: 'pink'\n }\n```\n\nHere you can see that I'm assigning text colors depending on the color I set in the JSON above.\n\n```\ntext-${nft.color}-600 dark:text-${nft.color}-400\n```\n\nI can also see the string being correctly assigned in the developer tools DOM view, but when I check the CSS in the dev tools the style is not applied...\n\nhttps://i.sstatic.net/JmSTM.png\nhttps://i.sstatic.net/l2Xgp.png\n\nAlso, if I manually add the class to the div the heading does get colored...\n\n========================================\n\nTop Answer:\nI have a Firebase document storing all information to build a site with Tailwind CSS and NextJs. What I did was run a script that checked for all unique classes present on the document and updated the tailwind.config before running `npm run build`.\n\n========================================\n\nCode:\n```text\n{nftInfo.map((nft, index) => (\n <div\n className=\"flex flex-col space-y-3 rounded-lg border-2 border-opacity-25 bg-white p-5 hover:bg-slate-50 dark:border-slate-500 dark:bg-gray-700\"\n key={index}\n >\n <div\n className={`flex justify-center space-x-4 font-bold text-${nft.color}-600 dark:text-${nft.color}-400`}\n >\n <div className={`text-lg `}>\n {nft.title} {nft.color} <--- This outputs the correct color\n </div>\n {nft.icon}\n </div>\n </div>\n```\n\n```js\n{\n title: 'Dummy text 2',\n description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime minima odit aspernatur aliquam deleniti in corporis omnis cupiditate optio, voluptatum quasi reiciendis dolor, nostrum nihil quaerat est, doloremque mollitia possimus.',\n bottomText: 'Lorem ipsum dolor sit amet consectetur adipisicing',\n buttonText: 'Generate contract',\n icon: <CodeIcon className=\"mt-1 h-6 w-6\" />,\n color: 'pink'\n }\n```\n\n```text\ntext-${nft.color}-600 dark:text-${nft.color}-400\n```\n\n```js\nmodule.exports = {\n ...\n\n safelist: [\n 'text-pink-600',\n 'dark:text-pink-400',\n ]\n}\n```\n\n```text\nconst colors = {\n \"pink\": { \n \"light\": \"text-pink-600\",\n \"dark\": \"dark:text-pink-400\",\n },\n ...\n}\n\n<div className={`${colors[nft.color].light} ${colors[nft.color].dark}`} />\n```\n\n```text\ntext-${nft.color}-600\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nnft.color\n```\n\n```text\nnpm run build\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":122,"estimatedTokens":812}}342{"id":"stack-79814407","source":"stackoverflow","questionId":79814407,"title":"React Tailwind project always flash the light background in the dark mode maybe FOUC?","tags":["javascript","html","css","reactjs","tailwind-css"],"text":"Title: React Tailwind project always flash the light background in the dark mode maybe FOUC?\nTags: javascript, html, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm writing a personal website on my own but running into an issue that I hardly fixed for a long time:\n\nThere is always a flash of light background in the dark mode (FOUC maybe?). Here are the related sources:\n\nThis is part of my Tailwind CSS v4 index.css file.\n\n```\n@import 'tailwindcss';\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-bgprimary: var(--color-zinc-50);\n --color-bgsecondary: var(--color-gray-200);\n --color-primary: var(--color-zinc-800);\n --color-secondary: var(--color-violet-800);\n}\n\n/* Dark mode overrides */\n.dark {\n --color-bgprimary: var(--color-neutral-900);\n --color-bgsecondary: var(--color-gray-700);\n --color-primary: var(--color-zinc-200);\n --color-secondary: var(--color-cyan-400);\n}\n```\n\nThis is my `Applayout` like the entire app entry component. The `util-transition-colors` is just a utility for `transition-colors duration-300 ease-in-out`. It still doesn't work if I remove the related `transition` classes.\n\n```\n\n \n \n \n }>\n \n \n \n \n\n```\n\nI also have the script to set up the initial dark mode in the `index.html` like below:\n\n```\n\n // Set initial theme before rendering to prevent FOUC\n (function () {\n function getInitialTheme() {\n const storedTheme = localStorage.getItem('theme');\n if (typeof storedTheme === 'string') {\n return storedTheme;\n }\n const userMedia = window.matchMedia('(prefers-color-scheme: dark)');\n if (userMedia.matches) {\n return 'dark';\n }\n return 'light';\n }\n\n const theme = getInitialTheme();\n const root = document.documentElement;\n if (theme === 'dark') {\n root.classList.add('dark');\n } else {\n root.classList.remove('dark');\n }\n })();\n\n```\n\nThis is my dark mode switch logic:\n\n```\nuseEffect(() => {\n const root = document.documentElement;\n const applyTheme = () => {\n const systemPrefersDark = isSystemDarkMode();\n const currentTheme = theme === 'system' ? (systemPrefersDark ? 'dark' : 'light') : theme;\n if (currentTheme === 'dark') {\n root.classList.add('dark');\n } else {\n root.classList.remove('dark');\n }\n };\n\n applyTheme();\n\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n const handleChange = () => {\n if (theme === 'system') {\n applyTheme();\n }\n };\n\n mediaQuery.addEventListener('change', handleChange);\n return () => {\n mediaQuery.removeEventListener('change', handleChange);\n };\n}, [theme]);\n```\n\nDespite the above, the problem still exists. It is kind of disturbing me while I tried many ways to solve it.\n\nUpdate: the solution is to change the above `useEffect` to `useLayoutEffect`.\n\n========================================\n\nCode:\n```css\n@import 'tailwindcss';\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-bgprimary: var(--color-zinc-50);\n --color-bgsecondary: var(--color-gray-200);\n --color-primary: var(--color-zinc-800);\n --color-secondary: var(--color-violet-800);\n}\n\n/* Dark mode overrides */\n.dark {\n --color-bgprimary: var(--color-neutral-900);\n --color-bgsecondary: var(--color-gray-700);\n --color-primary: var(--color-zinc-200);\n --color-secondary: var(--color-cyan-400);\n}\n```\n\n```js\n<div className=\"flex min-h-screen max-w-screen flex-col bg-bgprimary p-[0.05px] text-primary util-transition-colors\">\n <SiteHeader onOpenDrawer={openDrawer} isDrawerOpen={drawerOpen} />\n <MobileDrawer visible={drawerVisible} active={drawerActive} onClose={closeDrawer} />\n <main className=\"flex grow flex-col util-transition-colors\" role=\"main\">\n <SuspenseErrorBoundary fallback={<PageLoadingSpinner />}>\n <Outlet />\n </SuspenseErrorBoundary>\n </main>\n <SiteFooter />\n</div>\n```\n\n```html\n<script>\n // Set initial theme before rendering to prevent FOUC\n (function () {\n function getInitialTheme() {\n const storedTheme = localStorage.getItem('theme');\n if (typeof storedTheme === 'string') {\n return storedTheme;\n }\n const userMedia = window.matchMedia('(prefers-color-scheme: dark)');\n if (userMedia.matches) {\n return 'dark';\n }\n return 'light';\n }\n\n const theme = getInitialTheme();\n const root = document.documentElement;\n if (theme === 'dark') {\n root.classList.add('dark');\n } else {\n root.classList.remove('dark');\n }\n })();\n</script>\n```\n\n```js\nuseEffect(() => {\n const root = document.documentElement;\n const applyTheme = () => {\n const systemPrefersDark = isSystemDarkMode();\n const currentTheme = theme === 'system' ? (systemPrefersDark ? 'dark' : 'light') : theme;\n if (currentTheme === 'dark') {\n root.classList.add('dark');\n } else {\n root.classList.remove('dark');\n }\n };\n\n applyTheme();\n\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n const handleChange = () => {\n if (theme === 'system') {\n applyTheme();\n }\n };\n\n mediaQuery.addEventListener('change', handleChange);\n return () => {\n mediaQuery.removeEventListener('change', handleChange);\n };\n}, [theme]);\n```\n\n```text\nApplayout\n```\n\n```text\nutil-transition-colors\n```\n\n```text\ntransition-colors duration-300 ease-in-out\n```\n\n```text\ntransition\n```\n\n```text\nindex.html\n```\n\n```text\nuseEffect\n```\n\n```text\nuseLayoutEffect\n```\n\n```js\nuseLayoutEffect(() => {\n const root = document.documentElement;\n\n const applyTheme = () => {\n const systemPrefersDark = isSystemDarkMode();\n const currentTheme = theme === 'system'\n ? (systemPrefersDark ? 'dark' : 'light')\n : theme;\n if (currentTheme === 'dark') {\n root.classList.add('dark');\n } else {\n root.classList.remove('dark');\n }\n };\n\n applyTheme();\n\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\n const handleChange = () => {\n if (theme === 'system') {\n applyTheme();\n }\n };\n\n mediaQuery.addEventListener('change', handleChange);\n\n return () => {\n mediaQuery.removeEventListener('change', handleChange);\n };\n}, [theme]);\n```\n\n```text\nuseLayoutEffect\n```\n\n```text\nuseEffect\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":273,"estimatedTokens":1519}}343{"id":"stack-73965442","source":"stackoverflow","questionId":73965442,"title":"How to quickly add a debug border in Tailwind?","tags":["tailwind-css"],"text":"Title: How to quickly add a debug border in Tailwind?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWhen debugging traditional CSS I often use a red border to highlight a certain element on my page: `border: 1px solid red`.\n\nIn Tailwind it's quite cumbersome to type something like `className=\"border-2 border-solid border-red\"` over and over again. I'd rather write something like `className=\"debug\"`. Is a shorthand like that possible in Tailwind?\n\n========================================\n\nCode:\n```text\nborder: 1px solid red\n```\n\n```text\nclassName=\"border-2 border-solid border-red\"\n```\n\n```text\nclassName=\"debug\"\n```\n\n```html\n<div class=\"debug\">Text</div>\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer utilities {\n .debug {\n border: 1px solid red;\n }\n}\n```\n\n```html\n<div class=\"debug\">Text</div>\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer utilities {\n .debug {\n @apply border-[1px] border-red-500\n }\n}\n```\n\n```text\nutility\n```\n\n```text\nCSS\n```\n\n```text\n@apply\n```\n\n========================================\n\nComments:\n- You can just add the `debug` class to your `main.css` and add the border classes with `@apply`. tailwindcss.com/docs/adding-custom-styles","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":72,"estimatedTokens":312}}344{"id":"stack-70477538","source":"stackoverflow","questionId":70477538,"title":"Tailwind not working when using variables (React.js)","tags":["reactjs","tailwind-css","react-props","default-parameters"],"text":"Title: Tailwind not working when using variables (React.js)\nTags: reactjs, tailwind-css, react-props, default-parameters\nSource: Stack Overflow\n\nQuestion:\ncurrently have been facing this issue using tailwind and making rehusable react components where you can pass as a prop some styles as tailwind classes. The actual problem is with the \"pb-{number}\" propierty. I can pass it this way and will work fine. This also happens with \"border-{number}\" property, but someway it accepts border-2 and border-4 (only these).\n\n```\nimport './button.css'\n \n export default function Button({\n color = \"orange\",\n inset = \"pb-3\", \n {props.children}\n \n \n```\n\nBut if I try to make it cleaner so a person who don't use tailwind only has to pass a value (like the example below) it wont work.\n\n```\nimport './button.css'\n\nexport default function Button({\n color = \"orange\",\n inset = \"1\", \n {props.children}\n \n\n \n )\n}\n```\n\nSincerely I have no idea why is this happening. Hope someone with more experience can clarify my doubt.\nThanks in advance.\n\n========================================\n\nCode:\n```text\nimport './button.css'\n \n export default function Button({\n color = \"orange\",\n inset = \"pb-3\", <--- this will work\n border = \"border-8\",\n className, \n onClick, \n link\n , ...props}){\n \n return (\n <div onClick={onClick}\n className={`btn-${color} ${border} \n ${className} ${inset}`}> <--- this will work\n \n <div>\n {props.children}\n </div>\n </div>\n```\n\n```text\nimport './button.css'\n\nexport default function Button({\n color = \"orange\",\n inset = \"1\", <--- this\n border = \"4\",\n className, \n onClick, \n link\n , ...props}){\n \n return (\n <div onClick={onClick}\n className={`btn-${color} border-${border} \n ${className} pb-${inset}`}> <--- this wont work\n \n <div>\n {props.children}\n </div> \n\n </div>\n )\n}\n```\n\n```text\nconst Button = () => {\n const color = \"red-500\";\n const inset = \"3\";\n const border = \"border-8\";\n return <div className={`bg-${color} ${border} pb-${inset}`}>Hello</div>;\n};\n\nexport default Button;\n```\n\n```text\npadding\n```\n\n========================================\n\nComments:\n- Yes, as the Tailwind docs state clearly this will not work tailwindcss.com/docs/content-configuration#dynamic-class-nam‌​es your classes will be purged.\n- Do you know if there's a way to avoid general classes like in this case eg: padding, border,.... to be purged? Btw, thanks, didnt get why some composed classes were working while others don't, so if I get it right all the classes that have been used at least 1 time wont be purged? or it needs to be used at least one time within the component?\n- Sure, you can safelist classes tailwindcss.com/docs/content-configuration#safelisting-class‌​es. You could even write a regex to define a long list of classes to safelist from purging. However, if this is a user-facing application or site it's better to avoid this behavior, it can cause some very large output files.","metadata":{"transformedAt":"2026-08-18T18:33:42.911Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":110,"estimatedTokens":803}}345{"id":"stack-69688240","source":"stackoverflow","questionId":69688240,"title":"How do I enable tailwind intellsense in Visual Studio 2022 preview?","tags":["visual-studio","tailwind-css","visual-studio-2022"],"text":"Title: How do I enable tailwind intellsense in Visual Studio 2022 preview?\nTags: visual-studio, tailwind-css, visual-studio-2022\nSource: Stack Overflow\n\nQuestion:\nI tried to add the code below in the *.esproj file\n\n```\n\n \n \n\n```\n\nVisual Studio is able to pick up the default Tailwind CSS, but the IntelliSense does not pick up the additional CSS I defined in the tailwind.config.js.\n\n========================================\n\nCode:\n```xml\n<ItemGroup>\n <None Include=\"node_modules\\tailwindcss\\dist\\*.css\" />\n <None Include=\"node_modules\\@tailwindcss\\forms\\dist\\*.css\" />\n</ItemGroup>\n```\n\n========================================\n\nComments:\n- I haven't checked the latest VS 2022 preview version. Is the Razor Experimental editor turned on in the preview options? If so, I would suggest trying to disable it and see if that helps.\n- I am editing HTML files. I created a standalone TypeScript Angular Template project and installed tailwind CSS. But the IntelliSense does not pick up the extra classes I defined in tailwind.config.js in HTML files.\n- yes I understood. is this turned on, or off? try toggling it and see if you get a better result. visualstudiomagazine.com/articles/2021/01/26/~/media/ECG/…\n- I cannot find that option in Visual Studio 2022 preview. It is probably in Visual Studio 2019.\n- The Visual Studio CSS editor (which is what provides class name intellisense in both HTML and Razor) doesn't know anything about tailwind; it just looks at the .css files in your project.\n- @Jimmy yeah, I think the question comes to where I can find the generated .css file based on the tailwind.config.js.","metadata":{"transformedAt":"2026-08-18T18:33:42.912Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":35,"estimatedTokens":406}}346{"id":"stack-79577507","source":"stackoverflow","questionId":79577507,"title":"Tailwind 4 Utilities Failing (\"Cannot apply unknown utility class\") in Next.js 15 (Pages Router) Build","tags":["css","next.js","tailwind-css","postcss","tailwind-css-4"],"text":"Title: Tailwind 4 Utilities Failing (\"Cannot apply unknown utility class\") in Next.js 15 (Pages Router) Build\nTags: css, next.js, tailwind-css, postcss, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI'm setting up a new project using Next.js (v15.3.0 - Pages Router) and Tailwind CSS (v4.1.4) and I've hit a persistent build issue where Tailwind utility classes are not being recognized.\n\n**The Core Problem:**\n\nThe Next.js development server (`next dev`) fails to compile, throwing errors like:\n\n```\nError: Cannot apply unknown utility class: bg-gray-50\n```\n\nInitially, this happened for default Tailwind classes (`bg-gray-50`) used with `@apply` in my `globals.css`. After trying different configurations in `globals.css` (like using `@import \"tailwindcss/preflight\"; @reference \"tailwindcss/theme.css\";`), the error shifted to my *custom* theme colors:\n\n```\nError: Cannot apply unknown utility class: text-primary-600\n```\n\nWhen trying to use the `theme()` function directly in `@layer base`, I get:\n\n```\nError: Could not resolve value for theme function: theme(colors.gray.50).\n```\n\nEssentially, it seems the PostCSS/Tailwind build process isn't recognizing or applying *any* Tailwind utility classes correctly within the CSS build pipeline.\n\n**Relevant Versions:**\n\n- **Next.js:** 15.3.0 (Using Pages Router)\n\n- **Tailwind CSS:** 4.1.4\n\n- **`@tailwindcss/postcss`:** 4.1.4\n\n- **Node.js:** v20.x\n\n**Configuration Files:**\n\n**`tailwind.config.js` (Simplified attempt):**\n\n```\nconst defaultTheme = require('tailwindcss/defaultTheme');\nconst colors = require('tailwindcss/colors');\n\nmodule.exports = {\n content: [\n \"./src/pages/**/*.{js,ts,jsx,tsx}\",\n \"./src/components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: { // No 'extend'\n fontFamily: {\n sans: ['Inter', ...defaultTheme.fontFamily.sans],\n },\n colors: {\n transparent: 'transparent',\n current: 'currentColor',\n black: colors.black,\n white: colors.white,\n gray: colors.gray, // Explicitly included\n red: colors.red,\n green: colors.green,\n primary: { // My custom color\n DEFAULT: '#2563EB',\n // ... other shades 50-950\n 600: '#2563EB',\n 700: '#1D4ED8',\n },\n secondary: { /* ... custom secondary color ... */ },\n },\n ringOffsetColor: {\n DEFAULT: '#ffffff',\n },\n },\n plugins: [],\n};\n```\n\n**`postcss.config.js`:**\n\n```\nmodule.exports = {\n plugins: {\n \"@tailwindcss/postcss\": {}, // Using the v4 specific plugin\n autoprefixer: {},\n },\n};\n```\n\n**`src/styles/globals.css` (Latest attempt):**\n\n```\n/* src/styles/globals.css */\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');\n\n@import \"tailwindcss/preflight\";\n@tailwind theme;\n@tailwind utilities;\n\n@layer base {\n html {\n font-family: 'Inter', sans-serif;\n scroll-behavior: smooth;\n }\n\n body {\n @apply bg-gray-50 text-gray-900 antialiased;\n }\n\n a {\n @apply text-primary-600 hover:text-primary-700 transition-colors duration-150;\n }\n}\n```\n\n**Troubleshooting Steps Attempted (Without Success):**\n\n- **Complete Clean Installs:** Multiple times deleted `.next`, `node_modules`, `package-lock.json` and re-ran `npm install`.\n\n- **Verified Config Paths:** Checked `content` paths in `tailwind.config.js` and `baseUrl` in `tsconfig.json`.\n\n- **Simplified `tailwind.config.js`:** Tried removing `theme.extend`, defining colors directly under `theme`.\n\n- **Explicit Default Colors:** Explicitly added `gray: colors.gray`, `red: colors.red` etc. to the config.\n**Different `globals.css` Directives:**\n\n- Tried the standard v3 `@tailwind base; @tailwind components; @tailwind utilities;`.\n\n- Tried `@import \"tailwindcss/preflight\"; @reference \"tailwindcss/theme.css\"; @tailwind utilities;` (this fixed default class errors but not custom ones when using `@apply`).\n\n- Tried `@import \"tailwindcss/preflight\"; @tailwind theme; @tailwind utilities;` (current).\n\n- **`@apply` vs. `theme()`:** Tried using each of these methods within `@layer base` in `globals.css`. `@apply` failed first, then `theme()` too.\n\n- **`postcss.config.js` Variations:** Tried using `tailwindcss: {}` instead of `@tailwindcss/postcss: {}`.\n\nDespite these steps, the build consistently fails, unable to recognize or process Tailwind utility classes referenced in CSS (especially within `globals.css`). Standard utility classes used directly on JSX elements (e.g., ``) *also* fail to apply styles correctly because the underlying CSS isn't generated properly.\n\nHas anyone encountered similar issues with this specific stack (Next.js 15 / Tailwind 4 / Pages Router)? What could be causing this fundamental breakdown in Tailwind's processing within the Next.js build? Any configuration nuances I might be missing?\n\nThanks in advance for any insights!\n\n========================================\n\nCode:\n```text\nError: Cannot apply unknown utility class: bg-gray-50\n```\n\n```text\nError: Cannot apply unknown utility class: text-primary-600\n```\n\n```text\nError: Could not resolve value for theme function: theme(colors.gray.50).\n```\n\n```js\nconst defaultTheme = require('tailwindcss/defaultTheme');\nconst colors = require('tailwindcss/colors');\n\nmodule.exports = {\n content: [\n \"./src/pages/**/*.{js,ts,jsx,tsx}\",\n \"./src/components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: { // No 'extend'\n fontFamily: {\n sans: ['Inter', ...defaultTheme.fontFamily.sans],\n },\n colors: {\n transparent: 'transparent',\n current: 'currentColor',\n black: colors.black,\n white: colors.white,\n gray: colors.gray, // Explicitly included\n red: colors.red,\n green: colors.green,\n primary: { // My custom color\n DEFAULT: '#2563EB',\n // ... other shades 50-950\n 600: '#2563EB',\n 700: '#1D4ED8',\n },\n secondary: { /* ... custom secondary color ... */ },\n },\n ringOffsetColor: {\n DEFAULT: '#ffffff',\n },\n },\n plugins: [],\n};\n```\n\n```js\nmodule.exports = {\n plugins: {\n \"@tailwindcss/postcss\": {}, // Using the v4 specific plugin\n autoprefixer: {},\n },\n};\n```\n\n```css\n/* src/styles/globals.css */\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');\n\n@import \"tailwindcss/preflight\";\n@tailwind theme;\n@tailwind utilities;\n\n@layer base {\n html {\n font-family: 'Inter', sans-serif;\n scroll-behavior: smooth;\n }\n\n body {\n @apply bg-gray-50 text-gray-900 antialiased;\n }\n\n a {\n @apply text-primary-600 hover:text-primary-700 transition-colors duration-150;\n }\n}\n```\n\n```text\nnext dev\n```\n\n```text\nbg-gray-50\n```\n\n```text\n@apply\n```\n\n```text\nglobals.css\n```\n\n```text\nglobals.css\n```\n\n```text\n@import \"tailwindcss/preflight\"; @reference \"tailwindcss/theme.css\";\n```\n\n```text\ntheme()\n```\n\n```text\n@layer base\n```\n\n```text\n@tailwindcss/postcss\n```\n\n```text\ntailwind.config.js\n```\n\n```text\npostcss.config.js\n```\n\n```text\nsrc/styles/globals.css\n```\n\n```text\n.next\n```\n\n```text\nnode_modules\n```\n\n```text\npackage-lock.json\n```\n\n```text\nnpm install\n```\n\n```text\ncontent\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nbaseUrl\n```\n\n```text\ntsconfig.json\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntheme.extend\n```\n\n```text\ntheme\n```\n\n```text\ngray: colors.gray\n```\n\n```text\nred: colors.red\n```\n\n```text\nglobals.css\n```\n\n```text\n@tailwind base; @tailwind components; @tailwind utilities;\n```\n\n```text\n@import \"tailwindcss/preflight\"; @reference \"tailwindcss/theme.css\"; @tailwind utilities;\n```\n\n```text\n@apply\n```\n\n```text\n@import \"tailwindcss/preflight\"; @tailwind theme; @tailwind utilities;\n```\n\n```text\n@apply\n```\n\n```text\ntheme()\n```\n\n```text\n@layer base\n```\n\n```text\nglobals.css\n```\n\n```text\n@apply\n```\n\n```text\ntheme()\n```\n\n```text\npostcss.config.js\n```\n\n```text\ntailwindcss: {}\n```\n\n```text\n@tailwindcss/postcss: {}\n```\n\n```text\nglobals.css\n```\n\n```text\n<div className=\"p-4 bg-primary-500\">\n```\n\n```css\n@import \"tailwindcss\";\n\n@layer base {\n html {\n font-family: 'Inter', sans-serif;\n scroll-behavior: smooth;\n }\n\n body {\n @apply bg-gray-50 text-gray-900 antialiased;\n }\n\n a {\n @apply text-primary-600 hover:text-primary-700 transition-colors duration-150;\n }\n}\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n /* Font families */\n --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n\n /* Colors */\n --color-transparent: transparent;\n --color-current: currentColor;\n /* There's no need to declare black, white, gray, red, or green — they're included in TailwindCSS by default */\n /* Primary color */\n --color-primary-600: #2563EB;\n --color-primary-700: #1D4ED8;\n --color-primary: #2563EB;\n /* Secondary color */\n --color-secondary: #FACC15; /* Example: yellow-400, adjust to your desired value */\n\n /* Ring offset */\n --ring-offset-color: #ffffff;\n}\n\n@layer base {\n html {\n font-family: 'Inter', sans-serif;\n scroll-behavior: smooth;\n }\n\n body {\n @apply bg-gray-50 text-gray-900 antialiased;\n }\n\n a {\n @apply text-primary-600 hover:text-primary-700 transition-colors duration-150;\n }\n}\n```\n\n```css\n--color-green-*: initial;\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@theme\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ngreen\n```\n\n```text\ntext-green-500\n```\n\n```text\ntext-green-500\n```\n\n========================================\n\nComments:\n- `... theme: { // No 'extend' ...` - Old mistake. This way - unless it's intentional - you'll lose the default TailwindCSS classes. Using `extend.theme` is much better if you want to keep the defaults while adding your custom styles. --- However, starting from v4, the entire use of `tailwind.config.js` becomes unnecessary.\n- okay, i also had to add `@configure ../../tailwind.config.js` but if usage of `tailwind.config.js` has been discontinued, where should the content of my tailwind config file should go now? new to frontend dev.\n- You simply need to add `@config \"../path/to/tailwind.config.js\"`. Alternatively, you should get familiar with the new CSS-first configuration approach, which I linked to in one of my earlier answer: New CSS-first configuration option in v4 and can read Customizing your theme.\n- I've added your new CSS-first configuration to my answer based on the `tailwind.config.js` you provided in the question.\n- thanks for adding css first config to help me understand. i did went through through the docs and found the `@config` directive. But then i was unsure how and where to setup config css since i only have globals.css file as of now bcz i just set up my project. thanks again.\n- If you're using `@config`, everything works just like in v3 - you just need to declare the path to your `tailwind.config.js` file with it. However, you no longer need to define the `content` property in your `tailwind.config.js`, as v4 introduced automatic source detection.","metadata":{"transformedAt":"2026-08-18T18:33:42.912Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":57,"totalLines":493,"estimatedTokens":2730}}347{"id":"stack-71900377","source":"stackoverflow","questionId":71900377,"title":"Scroll an overflow component in react/next","tags":["javascript","css","reactjs","next.js","tailwind-css"],"text":"Title: Scroll an overflow component in react/next\nTags: javascript, css, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nSo I have a component that have a fixed width with an overflow-x-auto. I decided to hide the scroll bar and replace it with 2 arrow/button both left and right. If I click left, it scroll to left and vice versa. How can I achieve this functionality ?\n\nthis is my component\n\n```\n\n {\n dataConselor.map((item, index) => {\n return \n })\n }\n\n \n```\n\n========================================\n\nTop Answer:\nAs you are using tailwind css, you can use a tailwind carousal component to achieve this behaviour.\n\nThere are various carousals available over here.\n\n========================================\n\nCode:\n```text\n<div className={` vertical-card w-7/12 flex flex-row overflow-x-scroll no-scrollbar pb-4`}>\n {\n dataConselor.map((item, index) => {\n return <VerticalCard key={item.id} name={item.nama} specialist={item.specialist} shortdesc={item.shortdesc} img={item.img} />\n })\n }\n\n </div>\n```\n\n```text\nconst scrollable = useRef(null);\n\n<div id=\"myElement\" ref={scrollable}>\n...\n</div>\n```\n\n```text\nconst scrollIt = (toRight) => {\n const scrollLength = ... //Calculate your scroll length however you want.\n scrollable.current.scrollBy({left: scrollLength * (toRight ? 1 : -1), behavior: \"smooth\"});\n}\n```\n\n```text\n<div id=\"toLeft\" onClick={()=>scrollIt(false)}>...</div>\n<div id=\"toRight\" onClick={()=>scrollIt(true)}>...</div>\n```\n\n========================================\n\nComments:\n- do you have any link for documentation of the \"current\" object? I might need it later becasuse I need the percentage of scroll progress (0-100).","metadata":{"transformedAt":"2026-08-18T18:33:42.912Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":65,"estimatedTokens":435}}348{"id":"stack-72653482","source":"stackoverflow","questionId":72653482,"title":"Flowbite modal not showing","tags":["vue.js","tailwind-css","vite","flowbite"],"text":"Title: Flowbite modal not showing\nTags: vue.js, tailwind-css, vite, flowbite\nSource: Stack Overflow\n\nQuestion:\nI am trying to use flowbite components in my project but they are not working , (e.g dropdown, modal,...).\n\nI followed the documentation but nothing works.\n\nI'm using vuejs 3, Vite v2.9.9.\n\nThis is my `main.js` file:\n\n```\nimport { createApp } from 'vue'\nimport App from \"@/App.vue\";\nimport router from './router/index'\nimport store from './state/store'\n\n// Imported css file [TailwindCSS]\nimport './index.css'\n\n// Imported flowbite\nimport 'flowbite';\n\ncreateApp(App)\n .use(router)\n .use(store)\n .mount('#app')\n```\n\nmodal.vue\n\n```\n\n \n \n Toggle modal\n \n\n \n \n \n \n \n \n \n \n Terms of Service\n \n \n \n \n \n \n test\n \n \n I accept\n Decline\n \n \n \n \n\n```\n\n========================================\n\nTop Answer:\nThis took me 2 weeks to figure out, I am using Vite with Vue.\n\nI followed the instructions here https://flowbite.com/docs/getting-started/vue/\n\nWhere it didn't state to add the `script tag`\n**``**\n\nin my `index.html`\n\nWhich is, stated in #3 https://flowbite.com/docs/getting-started/quickstart/\n\n========================================\n\nCode:\n```js\nimport { createApp } from 'vue'\nimport App from \"@/App.vue\";\nimport router from './router/index'\nimport store from './state/store'\n\n// Imported css file [TailwindCSS]\nimport './index.css'\n\n// Imported flowbite\nimport 'flowbite';\n\ncreateApp(App)\n .use(router)\n .use(store)\n .mount('#app')\n```\n\n```js\n<template>\n\n <!-- Modal toggle -->\n <button class=\"block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800\" type=\"button\" data-modal-toggle=\"default-modal\">\n Toggle modal\n </button>\n\n <!-- Main modal -->\n <div id=\"default-modal\" aria-hidden=\"true\" class=\"hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center h-modal md:h-full md:inset-0\">\n <div class=\"relative px-4 w-full max-w-2xl h-full md:h-auto\">\n <!-- Modal content -->\n <div class=\"relative bg-white rounded-lg shadow dark:bg-gray-700\">\n <!-- Modal header -->\n <div class=\"flex justify-between items-start p-5 rounded-t border-b dark:border-gray-600\">\n <h3 class=\"text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white\">\n Terms of Service\n </h3>\n <button type=\"button\" class=\"text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white\" data-modal-toggle=\"default-modal\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"></path></svg> \n </button>\n </div>\n <!-- Modal body -->\n test\n <!-- Modal footer -->\n <div class=\"flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600\">\n <button data-modal-toggle=\"default-modal\" type=\"button\" class=\"text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800\">I accept</button>\n <button data-modal-toggle=\"default-modal\" type=\"button\" class=\"text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600\">Decline</button>\n </div>\n </div>\n </div>\n </div>\n</template>\n```\n\n```text\nmain.js\n```\n\n```text\nimport 'flowbite/dist/flowbite.js'\n...\nlet modal = new Modal(document.getElementById('modalId'),{placement:'center'})\n...\n<button on:cllick={()=>modal.show()} >Open</button>\n```\n\n```html\n<template>\n <!-- Modal toggle -->\n <button class=\"block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800\" type=\"button\" @click=\"toggleModal\">\n Toggle modal\n </button>\n \n <!-- Main modal -->\n <div id=\"defaultModal\" tabindex=\"-1\" aria-hidden=\"true\" class=\"hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center\">\n <div class=\"relative p-4 w-full max-w-2xl h-full md:h-auto\">\n <!-- Modal content -->\n <div class=\"relative bg-white rounded-lg shadow dark:bg-gray-700\">\n <!-- Modal header -->\n <div class=\"flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600\">\n <h3 class=\"text-xl font-semibold text-gray-900 dark:text-white\">\n Terms of Service\n </h3>\n <button type=\"button\" class=\"text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white\" @click=\"toggleModal\">\n <svg aria-hidden=\"true\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"></path></svg>\n <span class=\"sr-only\">Close modal</span>\n </button>\n </div>\n <!-- Modal body -->\n <div class=\"p-6 space-y-6\">\n <p class=\"text-base leading-relaxed text-gray-500 dark:text-gray-400\">\n With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.\n </p>\n <p class=\"text-base leading-relaxed text-gray-500 dark:text-gray-400\">\n The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.\n </p>\n </div>\n <!-- Modal footer -->\n <div class=\"flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600\">\n <button @click=\"toggleModal\" type=\"button\" class=\"text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800\">I accept</button>\n <button @click=\"toggleModal\" type=\"button\" class=\"text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600\">Decline</button>\n </div>\n </div>\n </div>\n </div>\n </template>\n \n <script>\n export default {\n data() {\n return{\n modal: ''\n }\n \n },\n methods: {\n toggleModal() {\n this.modal.toggle();\n }\n },\n mounted() {\n // set the modal menu element\n const targetEl = document.getElementById('defaultModal');\n \n // options with default values\n const options = {\n placement: 'center',\n backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',\n onHide: () => {\n console.log('modal is hidden');\n },\n onShow: () => {\n console.log('modal is shown');\n },\n onToggle: () => {\n console.log('modal has been toggled');\n }\n };\n \n this.modal = new Modal(targetEl, options);\n } \n }\n </script>\n```\n\n```text\ndata-modal-toggle=\"defaultModal\"\n```\n\n```text\nscript tag\n```\n\n```text\n<script src=\"./node_modules/flowbite/dist/flowbite.js\"></script>\n```\n\n```text\nindex.html\n```\n\n```js\nimport 'flowbite/dist/flowbite.js'\n```\n\n```text\nimport 'flowbite/dist/flowbite.js';\nimport 'flowbite/dist/flowbite.css';\nimport './index.css'\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{vue,js,ts,jsx,tsx}\",\n './node_modules/flowbite/**/*.{js,jsx,ts,tsx}'\n ],\n theme: {\n extend: {},\n },\n plugins: [\n require('flowbite/plugin')\n ],\n}\n```\n\n```text\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport flowbite from 'flowbite/plugin'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [vue(), flowbite()],\n})\n```\n\n```text\nimport Sidebar from './Sidebar.vue';\nimport { onMounted } from 'vue';\nimport { Dropdown } from 'flowbite';\n\nonMounted(() => {\n // Initialize all dropdowns\n const dropdownElements = document.querySelectorAll('[data-dropdown-toggle]');\n dropdownElements.forEach(triggerEl => {\n const targetEl = document.getElementById(triggerEl.getAttribute('data-dropdown-toggle'));\n new Dropdown(targetEl, triggerEl);\n });\n});\n```\n\n```text\n<Sidebar />\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.912Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":300,"estimatedTokens":2517}}349{"id":"stack-68690926","source":"stackoverflow","questionId":68690926,"title":"How To Make A Full Screen Modal In Tailwind","tags":["tailwind-css","alpine.js"],"text":"Title: How To Make A Full Screen Modal In Tailwind\nTags: tailwind-css, alpine.js\nSource: Stack Overflow\n\nQuestion:\nI'm trying to build a modal using Tailwind in alpine, point me to the right direction on building a full screen modal using Tailwind CSS and alpine js\n\n========================================\n\nTop Answer:\nBasic modal components (unstyled) can be found here: https://headlessui.dev/react/dialog\n\nThe styled one below is a small box, but with CSS you can make it full screen.\n\n```\nimport { Dialog, Transition } from '@headlessui/react'\nimport { Fragment, useState } from 'react'\n\nexport default function MyModal() {\n let [isOpen, setIsOpen] = useState(true)\n\n function closeModal() {\n setIsOpen(false)\n }\n\n function openModal() {\n setIsOpen(true)\n }\n\n return (\n <>\n \n \n Open dialog\n \n \n\n \n \n \n \n \n \n\n {/* This element is to trick the browser into centering the modal contents. */}\n \n ​\n \n \n \n \n Payment successful\n \n \n \n Your payment has been successfully submitted. We’ve sent you\n an email with all of the details of your order.\n \n\n \n\n \n \n Got it, thanks!\n \n \n \n \n \n \n \n \n )\n}\n```\n\n========================================\n\nCode:\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <title>Tailwind CSS Full Screen Modal</title>\n <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css\" rel=\"stylesheet\"> \n <style>\n .modal {\n transition: opacity 0.25s ease;\n }\n body.modal-active {\n overflow-x: hidden;\n overflow-y: visible !important;\n }\n .opacity-95 {opacity: .95;}\n </style>\n</head>\n<body class=\"bg-gray-900 flex items-center justify-center h-screen\">\n\n<button class=\"modal-open bg-transparent border border-gray-500 hover:border-indigo-500 text-gray-500 hover:text-indigo-500 font-bold py-2 px-4 rounded-full\">Open Full Screen Modal</button>\n\n<!--Modal-->\n<div class=\"modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center\">\n <div class=\"modal-overlay absolute w-full h-full bg-white opacity-95\"></div>\n\n <div class=\"modal-container fixed w-full h-full z-50 overflow-y-auto \">\n \n <div class=\"modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-black text-sm z-50\">\n <svg class=\"fill-current text-black\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\">\n <path d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\"></path>\n </svg>\n (Esc)\n </div>\n\n <!-- Add margin if you want to see grey behind the modal-->\n <div class=\"modal-content container mx-auto h-auto text-left p-4\">\n \n <!--Title-->\n <div class=\"flex justify-between items-center pb-2\">\n <p class=\"text-2xl font-bold\">Full Screen Modal!</p>\n </div>\n\n <!--Body-->\n <p>Modal content can go here</p>\n \n <!--Footer-->\n <div class=\"flex justify-end pt-2\">\n <button class=\"px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2\">Action</button>\n <button class=\"modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400\">Close</button>\n </div>\n\n </div>\n </div>\n</div>\n\n<script>\n var openmodal = document.querySelectorAll('.modal-open')\n for (var i = 0; i < openmodal.length; i++) {\n openmodal[i].addEventListener('click', function(event){\n event.preventDefault()\n toggleModal()\n })\n }\n \n const overlay = document.querySelector('.modal-overlay')\n overlay.addEventListener('click', toggleModal)\n \n var closemodal = document.querySelectorAll('.modal-close')\n for (var i = 0; i < closemodal.length; i++) {\n closemodal[i].addEventListener('click', toggleModal)\n }\n \n document.onkeydown = function(evt) {\n evt = evt || window.event\n var isEscape = false\n if (\"key\" in evt) {\n isEscape = (evt.key === \"Escape\" || evt.key === \"Esc\")\n } else {\n isEscape = (evt.keyCode === 27)\n }\n if (isEscape && document.body.classList.contains('modal-active')) {\n toggleModal()\n }\n };\n \n \n function toggleModal () {\n const body = document.querySelector('body')\n const modal = document.querySelector('.modal')\n modal.classList.toggle('opacity-0')\n modal.classList.toggle('pointer-events-none')\n body.classList.toggle('modal-active')\n }\n \n \n</script>\n</body>\n</html>\n```\n\n```text\nimport { Dialog, Transition } from '@headlessui/react'\nimport { Fragment, useState } from 'react'\n\nexport default function MyModal() {\n let [isOpen, setIsOpen] = useState(true)\n\n function closeModal() {\n setIsOpen(false)\n }\n\n function openModal() {\n setIsOpen(true)\n }\n\n return (\n <>\n <div className=\"fixed inset-0 flex items-center justify-center\">\n <button\n type=\"button\"\n onClick={openModal}\n className=\"px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75\"\n >\n Open dialog\n </button>\n </div>\n\n <Transition appear show={isOpen} as={Fragment}>\n <Dialog\n as=\"div\"\n className=\"fixed inset-0 z-10 overflow-y-auto\"\n onClose={closeModal}\n >\n <div className=\"min-h-screen px-4 text-center\">\n <Transition.Child\n as={Fragment}\n enter=\"ease-out duration-300\"\n enterFrom=\"opacity-0\"\n enterTo=\"opacity-100\"\n leave=\"ease-in duration-200\"\n leaveFrom=\"opacity-100\"\n leaveTo=\"opacity-0\"\n >\n <Dialog.Overlay className=\"fixed inset-0\" />\n </Transition.Child>\n\n {/* This element is to trick the browser into centering the modal contents. */}\n <span\n className=\"inline-block h-screen align-middle\"\n aria-hidden=\"true\"\n >\n ​\n </span>\n <Transition.Child\n as={Fragment}\n enter=\"ease-out duration-300\"\n enterFrom=\"opacity-0 scale-95\"\n enterTo=\"opacity-100 scale-100\"\n leave=\"ease-in duration-200\"\n leaveFrom=\"opacity-100 scale-100\"\n leaveTo=\"opacity-0 scale-95\"\n >\n <div className=\"inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl\">\n <Dialog.Title\n as=\"h3\"\n className=\"text-lg font-medium leading-6 text-gray-900\"\n >\n Payment successful\n </Dialog.Title>\n <div className=\"mt-2\">\n <p className=\"text-sm text-gray-500\">\n Your payment has been successfully submitted. We’ve sent you\n an email with all of the details of your order.\n </p>\n </div>\n\n <div className=\"mt-4\">\n <button\n type=\"button\"\n className=\"inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-900 bg-blue-100 border border-transparent rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500\"\n onClick={closeModal}\n >\n Got it, thanks!\n </button>\n </div>\n </div>\n </Transition.Child>\n </div>\n </Dialog>\n </Transition>\n </>\n )\n}\n```\n\n========================================\n\nComments:\n- \"The right direction\" would be, look at the docs.\n- @Martin - not an option where there's no modal in the docs but there is in the paid version.","metadata":{"transformedAt":"2026-08-18T18:33:42.912Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":2,"totalLines":279,"estimatedTokens":1970}}350{"id":"stack-67960134","source":"stackoverflow","questionId":67960134,"title":"tailwind css - can't get item to fill out page, always stuck in smaller container","tags":["css","reactjs","tailwind-css"],"text":"Title: tailwind css - can't get item to fill out page, always stuck in smaller container\nTags: css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to make my page look similar to this https://dash.blinq.app/onboarding/personal-details\n\nCurrently with this code, I am getting really bad flex styling using tailwind, i can't seem to work out how to get it to fix properly.\n\n```\nimport { ChevronRightIcon, HomeIcon } from '@heroicons/react/solid'\n\nconst pages = [\n { name: 'Privacy', href: '#', current: false },\n { name: 'Customizations', href: '#', current: true },\n { name: 'Details', href: '#', current: true },\n\n]\n\nfunction BreadCrumbs() {\n return (\n \n \n \n \n \n \n Home\n \n \n \n {pages.map((page) => (\n \n \n \n \n {page.name}\n \n \n \n ))}\n \n \n )\n}\n\n \n\nexport default function Example() {\n return (\n \n \n \n \n \n \n\n \n \n \n \n\n### Welcome to Moodmap\n\n \n Let's get you started!\n\n \n \n\n \n \n \n \n \n \n \n \n \n Email address\n \n \n \n \n \n \n \n \n Password\n \n \n \n \n \n \n \n \n \n \n Next\n \n \n \n \n \n \n \n \n \n )\n }\n```\n\nwhich looks sort of like this.\n\nhttps://i.sstatic.net/bwFDi.png\n\nHow do i get the flex to allow the forms to fit properly?\n\nThanks!\n\n========================================\n\nCode:\n```text\nimport { ChevronRightIcon, HomeIcon } from '@heroicons/react/solid'\n\nconst pages = [\n { name: 'Privacy', href: '#', current: false },\n { name: 'Customizations', href: '#', current: true },\n { name: 'Details', href: '#', current: true },\n\n\n]\n\nfunction BreadCrumbs() {\n return (\n <nav className=\"flex\" aria-label=\"Breadcrumb\">\n <ol className=\"flex items-center space-x-4\">\n <li>\n <div>\n <a href=\"#\" className=\"text-gray-400 hover:text-gray-500\">\n <HomeIcon className=\"flex-shrink-0 h-5 w-5\" aria-hidden=\"true\" />\n <span className=\"sr-only\">Home</span>\n </a>\n </div>\n </li>\n {pages.map((page) => (\n <li key={page.name}>\n <div className=\"flex items-center\">\n <ChevronRightIcon className=\"flex-shrink-0 h-5 w-5 text-gray-400\" aria-hidden=\"true\" />\n <a\n href={page.href}\n className=\"ml-4 text-sm font-medium text-gray-500 hover:text-gray-700\"\n aria-current={page.current ? 'page' : undefined}\n >\n {page.name}\n </a>\n </div>\n </li>\n ))}\n </ol>\n </nav>\n )\n}\n\n \n\n\n\nexport default function Example() {\n return (\n <div className=\"min-h-screen bg-white flex\">\n <div className=\"hidden lg:block relative w-6/12 flex-auto\">\n <img\n className=\"absolute inset-0 h-full object-cover\"\n src=\"https://images.unsplash.com/photo-1505904267569-f02eaeb45a4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1908&q=80\"\n alt=\"\"\n />\n </div>\n <div className=\"flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24\">\n <BreadCrumbs/>\n\n <div className=\"mx-auto w-full max-w-lg lg:w-96\">\n <div>\n \n <h2 className=\"mt-6 text-3xl font-extrabold text-gray-900\">Welcome to Moodmap</h2>\n <p className=\"mt-2 text-sm text-gray-600\">\n Let's get you started!\n\n \n </p>\n </div>\n \n <div className=\"mt-8\">\n \n \n <div className=\"mt-6\">\n <form action=\"#\" method=\"POST\" className=\"space-y-6\">\n <div>\n <label htmlFor=\"email\" className=\"block text-sm font-medium text-gray-700\">\n Email address\n </label>\n <div className=\"mt-1\">\n <input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n autoComplete=\"email\"\n required\n className=\"appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n />\n </div>\n </div>\n \n <div className=\"space-y-1\">\n <label htmlFor=\"password\" className=\"block text-sm font-medium text-gray-700\">\n Password\n </label>\n <div className=\"mt-1\">\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n autoComplete=\"current-password\"\n required\n className=\"appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n />\n </div>\n </div>\n \n \n \n <div>\n <button\n type=\"submit\"\n className=\"w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\"\n >\n Next\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n \n </div>\n )\n }\n```\n\n```text\nimport { ChevronRightIcon, HomeIcon } from '@heroicons/react/solid'\n\nconst pages = [\n { name: 'Privacy', href: '#', current: false },\n { name: 'Customizations', href: '#', current: true },\n { name: 'Details', href: '#', current: true },\n\n\n]\n\nfunction BreadCrumbs() {\n return (\n <nav className=\"flex\" aria-label=\"Breadcrumb\">\n <ol className=\"flex items-center space-x-4\">\n <li>\n <div>\n <a href=\"#\" className=\"text-gray-400 hover:text-gray-500\">\n <HomeIcon className=\"flex-shrink-0 w-5 h-5\" aria-hidden=\"true\" />\n <span className=\"sr-only\">Home</span>\n </a>\n </div>\n </li>\n {pages.map((page) => (\n <li key={page.name}>\n <div className=\"flex items-center\">\n <ChevronRightIcon className=\"flex-shrink-0 w-5 h-5 text-gray-400\" aria-hidden=\"true\" />\n <a\n href={page.href}\n className=\"ml-4 text-sm font-medium text-gray-500 hover:text-gray-700\"\n aria-current={page.current ? 'page' : undefined}\n >\n {page.name}\n </a>\n </div>\n </li>\n ))}\n </ol>\n </nav>\n )\n}\n\n \n\n\n\nexport default function Example() {\n return (\n <div className=\"flex min-h-screen bg-white\">\n <div className=\"relative w-4/12 lg:block\">\n <img\n className=\"absolute inset-0 object-cover h-full\"\n src=\"https://images.unsplash.com/photo-1505904267569-f02eaeb45a4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1908&q=80\"\n alt=\"\"\n />\n </div>\n <div className=\"flex flex-col justify-center flex-1 px-4 py-12 sm:px-6 lg:px-20 xl:px-24\">\n <BreadCrumbs/>\n\n <div className=\"w-full \">\n <div>\n \n <h2 className=\"mt-6 text-3xl font-extrabold text-gray-900\">Welcome to Moodmap</h2>\n <p className=\"mt-2 text-sm text-gray-600\">\n Let's get you started!\n\n \n </p>\n </div>\n \n <div className=\"mt-8\">\n \n \n <div className=\"mt-6\">\n <form action=\"#\" method=\"POST\" className=\"space-y-6\">\n <div>\n <label htmlFor=\"email\" className=\"block text-sm font-medium text-gray-700\">\n Email address\n </label>\n <div className=\"mt-1\">\n <input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n autoComplete=\"email\"\n required\n className=\"block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n />\n </div>\n </div>\n \n <div className=\"space-y-1\">\n <label htmlFor=\"password\" className=\"block text-sm font-medium text-gray-700\">\n Password\n </label>\n <div className=\"mt-1\">\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n autoComplete=\"current-password\"\n required\n className=\"block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n />\n </div>\n </div>\n \n \n \n <div>\n <button\n type=\"submit\"\n className=\"flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\"\n >\n Next\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n \n </div>\n )\n }\n```\n\n========================================\n\nComments:\n- Can you a minimal reproducible example?\n- Yeah I mean, the above code is able to be rendered as a page in react as is\n- Fix the codesandbox to showcase your problem. Right now I faced an `Internal Server Error`\n- @LeCoda without a working sandbox link, we cannot work with your code. Your codesandbox link produces an \"Internal Server Error\" as aloisdg mentioned.","metadata":{"transformedAt":"2026-08-18T18:33:42.912Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":387,"estimatedTokens":2603}}351{"id":"stack-65960909","source":"stackoverflow","questionId":65960909,"title":"Gatsby Dynamic styling not working in production build","tags":["gatsby","tailwind-css"],"text":"Title: Gatsby Dynamic styling not working in production build\nTags: gatsby, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am new in Gatsby and I am using tailwind css with postcss. Some of the color configurations I defined in theme object of tailwind.config.js is working in dev environment but not in production. I have tried cleaning cache and deleting public folder and re-building it. That did not solve the problem. My theme object in tailwind.config.js is like this:\n\n```\ntheme: {\n colors: {\n transparent: 'transparent',\n current: 'currentColor',\n primary: {\n DEFAULT: '#4F9C3A',\n 900: '#25441c',\n },\n secondary: {\n 0: '#ff9563',\n DEFAULT: '#E66437',\n 9: '#ae3409',\n },\n footer: {\n light: '#e66437',\n DEFAULT: '#383e42',\n dark: '#26292c',\n },\n neutral: {\n 0: '#ffffff',\n DEFAULT: '#ffffff',\n 1: '#fafafa',\n 9: '#000000',\n },\n accent: {\n 1: '#388ac5',\n DEFAULT: '#293842',\n },\n brown: {\n DEFAULT: '#C9AC75',\n 2: '#44261c',\n },\n black: '#000000',\n }\n}\n```\n\n**UPDATE:** I have been able to pinpoint source of the problem. I am fetching which class names to apply from a json file using gatsby-transformer-json. I have something like the following code segment to set background color which is working in development environment but not in production.\n\n```\n\nThe development build shows proper background color for this segment but production build does not. \n\n```\n\n========================================\n\nTop Answer:\nAccording to the Tailwind + Gatsby docs, there are two important statements to consider:\n\nIn `gatsby-browser.js` add an import rule for your Tailwind directives\nand custom CSS so that they are accounted for in build.\n\nAnd:\n\n**Note**: By default, PurgeCSS only runs on the build command as it is a\nrelatively slow process. The development server will include all\nTailwind classes, so it’s highly recommended you test on a build\nserver before deploying.\n\nIn your case, the issue may come from the PurgeCSS directive because it's not present so it may be purging all the styling. Fix it by:\n\n```\n// tailwind.config.js\n module.exports = {\n purge: ['./src/**/*.{js,jsx,ts,tsx}'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n }\n```\n\n*Source: https://tailwindcss.com/docs/guides/gatsby*\n\nOr:\n\n```\nmodule.exports = {\n purge: [\"./src/**/*.js\", \"./src/**/*.jsx\", \"./src/**/*.ts\", \"./src/**/*.tsx\"],\n theme: {},\n variants: {},\n plugins: [],\n}\n```\n\n*Source: https://www.gatsbyjs.com/docs/how-to/styling/tailwind-css/*\n\nOne other thing you can try is to move your styles to global styles in your `gatsby-browser.js`:\n\n```\nimport \"tailwindcss/dist/base.min.css\"\n```\n\nI'm assuming that in your `gatsby-config.js` you have already declared the proper instances:\n\n```\nplugins: [\n {\n resolve: `gatsby-plugin-sass`,\n options: {\n postCssPlugins: [\n require(\"tailwindcss\"),\n require(\"./tailwind.config.js\"), // Optional: Load custom Tailwind CSS configuration\n ],\n },\n },\n],\n```\n\n***Note**: Optionally you can add a corresponding configuration file (by default it will be `tailwind.config.js`). If you are adding a custom configuration, you will need to load it after `tailwindcss`.*\n\n========================================\n\nCode:\n```text\ntheme: {\n colors: {\n transparent: 'transparent',\n current: 'currentColor',\n primary: {\n DEFAULT: '#4F9C3A',\n 900: '#25441c',\n },\n secondary: {\n 0: '#ff9563',\n DEFAULT: '#E66437',\n 9: '#ae3409',\n },\n footer: {\n light: '#e66437',\n DEFAULT: '#383e42',\n dark: '#26292c',\n },\n neutral: {\n 0: '#ffffff',\n DEFAULT: '#ffffff',\n 1: '#fafafa',\n 9: '#000000',\n },\n accent: {\n 1: '#388ac5',\n DEFAULT: '#293842',\n },\n brown: {\n DEFAULT: '#C9AC75',\n 2: '#44261c',\n },\n black: '#000000',\n }\n}\n```\n\n```text\n<div className={`bg-${color}>\nThe development build shows proper background color for this segment but production build does not. \n</div>\n```\n\n```text\nmodule.exports = {\n // ...\n purge: {\n content: ['./src/**/*.html'],\n safelist: ['bg-primary', 'bg-secondary']\n }\n}\n```\n\n```text\n/[^<>\"'`\\s]*[^<>\"'`\\s:]/g\n```\n\n```text\npurge\n```\n\n```text\nsafelist\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n<div className={`bg-${color}`>\n```\n\n```text\n<div className={ color === \"red\" ? \"bg-red\" : \"bg-blue\" }>\n```\n\n```text\npurge\n```\n\n```text\npurge\n```\n\n```text\nbg-\n```\n\n```text\ncolor\n```\n\n```text\nbg-color\n```\n\n```text\n// tailwind.config.js\n module.exports = {\n purge: ['./src/**/*.{js,jsx,ts,tsx}'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n }\n```\n\n```text\nmodule.exports = {\n purge: [\"./src/**/*.js\", \"./src/**/*.jsx\", \"./src/**/*.ts\", \"./src/**/*.tsx\"],\n theme: {},\n variants: {},\n plugins: [],\n}\n```\n\n```text\nimport \"tailwindcss/dist/base.min.css\"\n```\n\n```text\nplugins: [\n {\n resolve: `gatsby-plugin-sass`,\n options: {\n postCssPlugins: [\n require(\"tailwindcss\"),\n require(\"./tailwind.config.js\"), // Optional: Load custom Tailwind CSS configuration\n ],\n },\n },\n],\n```\n\n```text\ngatsby-browser.js\n```\n\n```text\ngatsby-browser.js\n```\n\n```text\ngatsby-config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwindcss\n```\n\n========================================\n\nComments:\n- probably it's not a problem with color settings but with a purge. Maybe you didn't configure it or something. Need to see your whole tailwind.config.js and where your working files are (I'm not familiar with Gatsby)\n- Have you tried moving those styles to global styles?\n- There's a typo in your last snippet, should be: ``.\n- An alternative can be to add a \"safelist\" option in the tailwind.config.js file: `purge: {content: ['./src/**/*.html', ..........], safelist: ['bg-primary', 'bg-secondary', .... .....]},},`. In the code you can continue to use `bg-${color}`\n- Thanks @robotu! I've added this to the official answer. This is a great solution.","metadata":{"transformedAt":"2026-08-18T18:33:42.912Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":23,"totalLines":295,"estimatedTokens":1519}}352{"id":"stack-66595161","source":"stackoverflow","questionId":66595161,"title":"Unable to center the `Dialog/Modal` from `@headlessui/react` that uses React Portal with Tailwind CSS?","tags":["html","reactjs","tailwind-css","react-portal"],"text":"Title: Unable to center the `Dialog/Modal` from `@headlessui/react` that uses React Portal with Tailwind CSS?\nTags: html, reactjs, tailwind-css, react-portal\nSource: Stack Overflow\n\nQuestion:\nI want to make it centered like the 1st modal on https://tailwindui.com/components/application-ui/overlays/modals\n\nI copied the same classes on the Modal below but I am unable to center it vertically. The classes are the exact same.\n\nIs it a React Portal issue?\n\n### Modal.tsx\n\n```\nimport * as React from \"react\"\nimport { Dialog } from \"@headlessui/react\"\n\ntype ModalProps = {\n isOpen: boolean\n setIsOpen: React.Dispatch>\n}\n\nexport const Modal = ({ isOpen, setIsOpen }: ModalProps) => {\n return (\n \n \n \n\n \n Deactivate account\n \n \n This will permanently deactivate your account\n \n\n \n Are you sure you want to deactivate your account? All of your data\n will be permanently removed. This action cannot be undone.\n \n\n setIsOpen(false)}\n >\n Deactivate\n \n setIsOpen(false)}\n >\n Cancel\n \n \n \n )\n}\n```\n\nCodesandbox → https://codesandbox.io/s/headless-ui-dialog-1gd8e\n\nI would like to center it vertically & horizontally. How do I do it?\n\n========================================\n\nCode:\n```text\nimport * as React from \"react\"\nimport { Dialog } from \"@headlessui/react\"\n\ntype ModalProps = {\n isOpen: boolean\n setIsOpen: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const Modal = ({ isOpen, setIsOpen }: ModalProps) => {\n return (\n <Dialog\n open={isOpen}\n onClose={setIsOpen}\n as=\"div\"\n className=\"fixed inset-0 z-10 overflow-y-auto\"\n >\n <div className=\"flex flex-col bg-gray-800 text-white w-96 mx-auto py-8 px-4 text-center\">\n <Dialog.Overlay />\n\n <Dialog.Title className=\"text-red-500 text-3xl\">\n Deactivate account\n </Dialog.Title>\n <Dialog.Description className=\"text-xl m-2\">\n This will permanently deactivate your account\n </Dialog.Description>\n\n <p className=\"text-md m-4\">\n Are you sure you want to deactivate your account? All of your data\n will be permanently removed. This action cannot be undone.\n </p>\n\n <button\n className=\"w-full m-4 inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm\"\n onClick={() => setIsOpen(false)}\n >\n Deactivate\n </button>\n <button\n className=\"m-4 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm\"\n onClick={() => setIsOpen(false)}\n >\n Cancel\n </button>\n </div>\n </Dialog>\n )\n}\n```\n\n```text\nimport * as React from \"react\"\nimport { Dialog } from \"@headlessui/react\"\nimport clsx from \"clsx\"\n\ntype ModalProps = {\n isOpen: boolean\n setIsOpen: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const Modal = ({ isOpen, setIsOpen }: ModalProps) => {\n return (\n <Dialog\n open={isOpen}\n onClose={setIsOpen}\n as=\"div\"\n className={clsx(\n \"fixed inset-0 z-10 overflow-y-auto flex justify-center items-center\",\n {\n \"bg-gray-900\": isOpen === true,\n },\n )}\n >\n <div className=\"flex flex-col bg-gray-800 text-white w-96 py-8 px-4 text-center\">\n <Dialog.Overlay />\n\n <Dialog.Title className=\"text-red-500 text-3xl\">\n Deactivate account\n </Dialog.Title>\n <Dialog.Description className=\"text-xl m-2\">\n This will permanently deactivate your account\n </Dialog.Description>\n\n <p className=\"text-md m-4\">\n Are you sure you want to deactivate your account? All of your data\n will be permanently removed. This action cannot be undone.\n </p>\n\n <button\n className=\"w-full m-4 inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm\"\n onClick={() => setIsOpen(false)}\n >\n Deactivate\n </button>\n <button\n className=\"m-4 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm\"\n onClick={() => setIsOpen(false)}\n >\n Cancel\n </button>\n </div>\n </Dialog>\n )\n}\n```\n\n```text\nflex justify-center items-center\n```\n\n```text\nmx-auto\n```\n\n========================================\n\nComments:\n- by removing className props in Dialog, (``) ,the modal is like the example but the open modal button still active\n- @antoineso by removing `className` prop in `Dialog`, it just appears below the button (because everything in DOM is laid-out top to bottom) which is not how a modal works. modal hides everything below it with the focus only on modal. that's why we need the classes. its not the same :)\n- @antoineso got the answer & posted it below :)\n- I found this class names list for tailwind may be this could help you for your future features.","metadata":{"transformedAt":"2026-08-18T18:33:42.912Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":182,"estimatedTokens":1521}}353{"id":"stack-69333295","source":"stackoverflow","questionId":69333295,"title":"Tailwind css not work on Vercel after build and deploy it","tags":["reactjs","next.js","tailwind-css"],"text":"Title: Tailwind css not work on Vercel after build and deploy it\nTags: reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using Tailwind CSS to style my web app, In local, it works perfectly but when I build my GitHub repository and deploy it on Vercel, it does not work, where is the problem with this?\n\none of my col:\n\n```\n\n \n \n PHP\n\n \n \n .\n .\n .\n```\n\nIn local:\nhttps://i.sstatic.net/6mTYW.png\n\nAfter build and deploy it on Vercel:\nhttps://i.sstatic.net/4Qm2E.png\n\nAs you see, in local the `col` display is `flex` but on the server, it is not.\n\nThis is my taiwlind config:\n\n```\nmodule.exports = {\npurge: [\"./pages/**/*.{js,ts,jsx,tsx}\", \"./components/**/*. \n{js,ts,jsx,tsx}\"],\ndarkMode: false, // or 'media' or 'class'\ntheme: {\nextend: {\n transitionDuration: [\"hover\", \"focus\"],\n},\nfontSize: {\n sm: [\"15px\"],\n base: [\"16px\", \"24px\"],\n lg: [\"25px\", \"28px\"],\n xl: \"40px\",\n},\n},\nvariants: {\nextend: {},\n},\ncorePlugins: {\n container: false,\n},\nplugins: [\n function ({ addComponents }) {\n addComponents({\n \".container\": {\n maxWidth: \"100%\",\n \"@screen sm\": {\n maxWidth: \"600px\",\n },\n \"@screen md\": {\n maxWidth: \"765px\",\n },\n \"@screen lg\": {\n maxWidth: \"1320px\",\n },\n \"@screen xl\": {\n maxWidth: \"1320px\",\n },\n },\n });\n},\n],\n};\n```\n\nthis is postccs.config.js:\n\n```\nmodule.exports = {\nplugins: [\n\"tailwindcss\",\n\"postcss-flexbugs-fixes\",\n[\n \"postcss-preset-env\",\n {\n autoprefixer: {\n flexbox: \"no-2009\",\n },\n stage: 3,\n features: {\n \"custom-properties\": false,\n },\n },\n],\n],\n};\n```\n\n========================================\n\nTop Answer:\n- Check if you included tailwind as a devdependency.\n\n- Check if there's any error like variables being undefined which is causing something not rendered.\n\n========================================\n\nCode:\n```text\n<div\n className={`${classes.allTechnicalList} flex flex-wrap items-center justify-center px-0`}\n >\n<Col\n lg={2}\n md={6}\n sm={6}\n xs={12}\n className={`lg:px-0.5 md:pr-0 md:pl-8 py-4 ${classes.allTechnicalListCol}`}\n >\n <div className=\"imgBorder text-center rounded-lg shadow block flex-wrap justify-center items-center px-5 pt-8 pb-16 lg:mb-12 h-44 lg:w-48\">\n <Image\n className=\"max-w-full h-full m-auto\"\n alt=\"\"\n src=\"/php-icon.png\"\n />\n <p className=\"text-sm space-x-1 m-0 pt-2 pb-4\">PHP</p>\n </div>\n </Col>\n .\n .\n .\n```\n\n```text\nmodule.exports = {\npurge: [\"./pages/**/*.{js,ts,jsx,tsx}\", \"./components/**/*. \n{js,ts,jsx,tsx}\"],\ndarkMode: false, // or 'media' or 'class'\ntheme: {\nextend: {\n transitionDuration: [\"hover\", \"focus\"],\n},\nfontSize: {\n sm: [\"15px\"],\n base: [\"16px\", \"24px\"],\n lg: [\"25px\", \"28px\"],\n xl: \"40px\",\n},\n},\nvariants: {\nextend: {},\n},\ncorePlugins: {\n container: false,\n},\nplugins: [\n function ({ addComponents }) {\n addComponents({\n \".container\": {\n maxWidth: \"100%\",\n \"@screen sm\": {\n maxWidth: \"600px\",\n },\n \"@screen md\": {\n maxWidth: \"765px\",\n },\n \"@screen lg\": {\n maxWidth: \"1320px\",\n },\n \"@screen xl\": {\n maxWidth: \"1320px\",\n },\n },\n });\n},\n],\n};\n```\n\n```text\nmodule.exports = {\nplugins: [\n\"tailwindcss\",\n\"postcss-flexbugs-fixes\",\n[\n \"postcss-preset-env\",\n {\n autoprefixer: {\n flexbox: \"no-2009\",\n },\n stage: 3,\n features: {\n \"custom-properties\": false,\n },\n },\n],\n],\n};\n```\n\n```text\ncol\n```\n\n```text\nflex\n```\n\n```text\npurge: [\"./pages/**/*.{js,ts,jsx,tsx}\", \"./components/**/*.{js,ts,jsx,tsx}\"]\n```\n\n```text\npurge: [\"./pages/**/*.{js,ts,jsx,tsx}\", \"./Components/**/*.{js,ts,jsx,tsx}\"]\n```\n\n```text\nmodule.exports = {\n purge: [\n // \"./src/**/*.html\",\n // \"./src/**/*.vue,\n // \"./src/**/*.jsx\"\n ],\n theme: {},\n variants: {},\n plugins: [],\n}```\n```\n\n```text\n{`lg:px-0.5 md:pr-0 md:pl-8 py-4 ${classes.allTechnicalListCol}`}\n```\n\n```text\nimport loginStyles from 'styles/LoginPage.scss'\n\nfunction fun() {\n return <>\n <button className={loginStyles.loginButton}>Login</button>\n </>\n}\n```\n\n```text\n<!-- wrong method -->\n<div className={`mx-auto font-lato ${myModule.myClass}`}></div>\n```\n\n```text\n<!-- right method, use encapsulating divs to have one moduleClass passed as a single prop -->\n<div className={`mx-auto font-lato`}>\n <div className={myModule.myClass}>\n </div>\n</div>\n```\n\n```text\nnpm run build && npm run export\n```\n\n```text\nLoginPage_LoginButton__1Auw8\n```\n\n```text\n{moduleName}_{className}_{randomString}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@import \"xxxx.css\";\n@tailwind utilities;\n```\n\n```text\n@tailwind utilities;\n```\n\n```text\nimportant: true\n```\n\n```text\nmodule.exports\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ncontent: [\n \"./Components/**/*.{js,ts,jsx,tsx}\",\n \"./src/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n```\n\n```text\n\"./src/components/**/*.{js,ts,jsx,tsx,mdx}\",\n```\n\n```text\n\"./src/Components/**/*.{js,ts,jsx,tsx,mdx}\",\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- Can you your `tailwind` and `postcss` config (if present)?\n- @brc-dd I added them both.\n- Can you replicate the issue if your run the prod build locally with `next build && next start`?\n- It says this page could not found\n- All thing is correct\n- My project is based on next.js and I build my Github repository by vercel, so it does it automatically.\n- Are you using Tailwind JIT mode?\n- No, I don't use it. Should I do?\n- Just some style not work, some of them work, in here `flex` not work\n- You could temporarily switch to JIT mode in order to see if that works with your Continuous Deployment configuration with Vercel. BTW I was checking your tailwind config file and I think there's an error with theme.extend, please check this page tailwindcss.com/docs/theme.\n- I added jit mode, but the problem still exist\n- At this point, you should check the compiled CSS file and be sure that the classes used are present. If the classes are not present you should check if there's an update of tailwind or postcss package\n- I checked all, there is not any thing wrong with them\n- I removed all `${classse.className}` but the problem not solved.\n- Could you inspect the DOM and check which classes are loaded to the elements?\n- Also, is the local build working?\n- These classes `lg:px-0.5 md:pr-0 md:pl-8 inline-flex py-4 col-lg-2 col-md-6 col-sm-6 col-12` and also build working in local whiteout any problem\n- if I add those classes so it look like `lg:px-0.5 md:pr-0 md:pl-8 py-4 tools_allTechnicalListCol__1o8IQ col-lg-2 col-md-6 col-sm-6 col-12`\n- in both of them when i run `npm run build` there is not any error.\n- when I run `npm run build` there is not any error but after if i run `npm start` it says this page could not found.\n- What happends when you do `npm run export`?\n- It worked. Awesome. A simple one!! Searched / tried quite a lot of options..","metadata":{"transformedAt":"2026-08-18T18:33:42.912Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":24,"totalLines":340,"estimatedTokens":1721}}354{"id":"stack-64812254","source":"stackoverflow","questionId":64812254,"title":"How do you configure sails + tailwindcss to work together","tags":["sails.js","tailwind-css","postcss"],"text":"Title: How do you configure sails + tailwindcss to work together\nTags: sails.js, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI've been trying to use TailwindCSS for the styling of a brand new SailsJS site.\n\nReferencing the pre-built css from the tailwind CDN works fine, but in order to customize the css and bring the css size down for production I need to use the full asset pipeline to build tailwind.\n\nThe problem I've run into is that tailwind recommends PostCSS (tailwind also recommends PostCSS here) but sailsjs uses grunt by default. In theory I can configure SailsJS to to run PostCSS but I spent a long time trying and my lack of knowledge of the pieces means I've yet to get it all working.\n\nhttps://github.com/jeffjewiss/sails-hook-postcss looked like it might solve the problem but I couldn't get it working.\n\nHas anyone got these two working together, and how did you do it? Public repository links would be greatly appreciated.\n\nThese are my various unfinished and not yet working attempts at all the pieces, plus other related resources:\n\n- https://github.com/timabell/spike-sails\n\n- https://github.com/timabell/spike-sails-gulp\n\n- https://github.com/timabell/sails-tailwind\n\n- https://dev.to/chrisfinnigan/setting-up-grunt-and-tailwindcss-2p1h\n\n========================================\n\nCode:\n```sh\nnpm i --save-dev tailwindcss grunt-postcss postcss autoprefixer\nnpx tailwind init\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\nmodule.exports = function (grunt) {\n grunt.config.set(\"postcss\", {\n options: {\n map: true,\n processors: [require(\"tailwindcss\")(\"./tailwind.config.js\")],\n },\n dist: {\n expand: true,\n cwd: \"assets/styles/tailwindcss\",\n src: [\"tailwind.css\"],\n dest: \".tmp/public/styles\",\n ext: \".css\",\n },\n });\n\n grunt.loadNpmTasks(\"grunt-postcss\");\n};\n```\n\n```js\nmodule.exports = function (grunt) {\n grunt.registerTask(\"compileAssets\", [\n \"clean:dev\",\n \"less:dev\",\n \"copy:dev\",\n \"postcss\", // add this one\n ]);\n};\n```\n\n```js\ngrunt.registerTask(\"syncAssets\", [\n \"less:dev\",\n \"copy:dev\",\n \"postcss\", // add this one\n ]);\n```\n\n```text\nsails lift\n```\n\n```text\n/assets/styles/tailwindcss/tailwind.css\n```\n\n```text\ntasks/config/postcss.js\n```\n\n```text\ntasks/register/compileAssets.js\n```\n\n```text\ntasks/register/syncAssets.js\n```\n\n========================================\n\nComments:\n- This might hold the answer github.com/tailwindlabs/tailwindcss-setup-examples/pull/97/…\n- Yep that worked with minor modification, see the PR comments for modifications","metadata":{"transformedAt":"2026-08-18T18:33:42.912Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":103,"estimatedTokens":651}}355{"id":"stack-70298765","source":"stackoverflow","questionId":70298765,"title":"How do I make white shadows in Tailwind CSS?","tags":["javascript","css","reactjs","tailwind-css"],"text":"Title: How do I make white shadows in Tailwind CSS?\nTags: javascript, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm currently in the process of making a portfolio website with a light and dark mode. In light mode, the cards on the site have a shadow to create a sense of distance from the background. I want to make that same effect in dark mode, but I can't figure out how to make a white shadow in tailwind. I have looked up on the documentation, other questions on similar topics, and still no luck.\n\nYou can find the full code here.\n\nHere's what I've tried so far:\n\n- I've tried defining my own custom shadow in tailwind.config.js using\n\n```\ntheme: {\n extend: {\n boxShadow: {\n 'dark-sm': '0 1px 2px 0 rgba(255, 255, 255, 0.05)', //White shadow\n blue: '0 1px 3px 0 rgba(0, 0, 255, 0.1), 0 1px 2px 0 rgba(0, 0, 255, 0.06)', //Blue shadow (for testing purposes)\n },\n },\n },\n```\n\n- I've also tried using the shadows keyword instead of boxShadow:\n\n```\ntheme: {\n extend: {\n shadows: {\n 'red': 'rgba(255, 0, 0, 0.1)', //Red shadow (for testing puposes)\n }\n },\n },\n```\n\nFor example, when I call\n\n```\n...\n```\n\nor\n\n```\n...\n```\n\nnothing happens, even if I try it with a different color and not in dark mode.\n\nThere was one time when I was able to change the color using the boxShadow method, but it doesn't work any more and I have no idea why. Any help would be appreciated!\n\n========================================\n\nTop Answer:\nYou can give a custom shadow value as follows\n\n\r\n\r\n\n```\n\n```\n\n========================================\n\nCode:\n```text\ntheme: {\n extend: {\n boxShadow: {\n 'dark-sm': '0 1px 2px 0 rgba(255, 255, 255, 0.05)', //White shadow\n blue: '0 1px 3px 0 rgba(0, 0, 255, 0.1), 0 1px 2px 0 rgba(0, 0, 255, 0.06)', //Blue shadow (for testing purposes)\n },\n },\n },\n```\n\n```text\ntheme: {\n extend: {\n shadows: {\n 'red': 'rgba(255, 0, 0, 0.1)', //Red shadow (for testing puposes)\n }\n },\n },\n```\n\n```text\n<div className = \"dark:shadow-dark-sm\">...</div>\n```\n\n```text\n<div className = \"dark:shadow-red\">...</div>\n```\n\n```html\n<div class=\"shadow-[0_35px_60px_-15px_rgba(255,255,255,0.3)]\">\n```\n\n========================================\n\nComments:\n- Is it possible to upgrade to Tailwind CSS v3? It came out today and it supports box shadow color - You can customize like this tailwindcss.com/docs/box-shadow-color#customizing-your-theme","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":104,"estimatedTokens":603}}356{"id":"stack-65089539","source":"stackoverflow","questionId":65089539,"title":"Tailwindcss does not work in Vue.js when all process of intergration has been done?","tags":["css","sass","less","tailwind-css","scss-mixins"],"text":"Title: Tailwindcss does not work in Vue.js when all process of intergration has been done?\nTags: css, sass, less, tailwind-css, scss-mixins\nSource: Stack Overflow\n\nQuestion:\ni installed tailwindcss into a vuejs SPA did all the setup\ncreate a assets/css/tailwind.css and added the necessary base styles\nimported it in the main.js file\ncreate a postcss.config.js file and copied the required configuration from the official documentation but the tailwind styles don't apply to my markups.\n\nInside the tailwind.css:\n\n```\n@tailwind base;\n \n @tailwind components;\n \n @tailwind utilities;\n```\n\nInside the postcss.config.js:\n\n```\nmodule.exports = { \n plugins: [ \n // ... \n require(\"tailwindcss\"),\n require(\"autoprefixer\"), \n // ... \n ],\n }\n```\n\nInside the main.js file:\n\n```\nimport Vue from \"vue\"\n import App from \"./App.vue\"\n import \"./registerServiceWorker\"\n import router from \"./router\"\n import store from \"./store\"\n import axios from \"axios\"\n import \"./assets/css/tailwind.css\"\n import firebase from \"firebase/app\"\n import \"firebase/firestore\"\n import \"firebase/auth\"\n```\n\nThe package.json file:\n\n```\n\"dependencies\": { \n \"autoprefixer\": \"^9.7.6\",\n \"axios\": \"^0.19.2\",\n \"core-js\": \"^3.6.4\",\n \"firebase\": \"^7.14.2\",\n \"register-service-worker\": \"^1.7.1\",\n \"tailwindcss\": \"^1.4.0\",\n \"vue\": \"^2.6.11\",\n \"vue-router\": \"^3.1.6\",\n \"vuex\": \"^3.1.3\"\n },\n```\n\nI don't know what am doing wrong.\n\n========================================\n\nTop Answer:\nMy solution:\n\n- step 1: yarn postcss\n\n- step 2: create file `postcss.config.js` and add content:\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n };\n```\n\n========================================\n\nCode:\n```css\n@tailwind base;\n \n @tailwind components;\n \n @tailwind utilities;\n```\n\n```js\nmodule.exports = { \n plugins: [ \n // ... \n require(\"tailwindcss\"),\n require(\"autoprefixer\"), \n // ... \n ],\n }\n```\n\n```js\nimport Vue from \"vue\"\n import App from \"./App.vue\"\n import \"./registerServiceWorker\"\n import router from \"./router\"\n import store from \"./store\"\n import axios from \"axios\"\n import \"./assets/css/tailwind.css\"\n import firebase from \"firebase/app\"\n import \"firebase/firestore\"\n import \"firebase/auth\"\n```\n\n```json\n\"dependencies\": { \n \"autoprefixer\": \"^9.7.6\",\n \"axios\": \"^0.19.2\",\n \"core-js\": \"^3.6.4\",\n \"firebase\": \"^7.14.2\",\n \"register-service-worker\": \"^1.7.1\",\n \"tailwindcss\": \"^1.4.0\",\n \"vue\": \"^2.6.11\",\n \"vue-router\": \"^3.1.6\",\n \"vuex\": \"^3.1.3\"\n },\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n };\n```\n\n```text\npostcss.config.js\n```\n\n========================================\n\nComments:\n- it's weird, I'm having the same problem, even following the document\n- I have found the answer brother when you complete these process. Then restart server again using \" NPM RUN SERVE\" because when we add configuration files into src files server is not updated that's why tailwind is not working . So after all stuff done then restart serve I hope it will work fine.\n- Thanks Nadeem, I got it by updating node version 10 to 15","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":152,"estimatedTokens":804}}357{"id":"stack-66454639","source":"stackoverflow","questionId":66454639,"title":"Tailwind custom color is not active on hover","tags":["css","tailwind-css","tailwind-in-js"],"text":"Title: Tailwind custom color is not active on hover\nTags: css, tailwind-css, tailwind-in-js\nSource: Stack Overflow\n\nQuestion:\nI modified my `tailwind.config.js` to add a new custom color:\n\n```\nmodule.exports ={\n theme: {\n extend: {\n colors: {\n pepegray: { DEFAULT: \"#323232\" },\n }\n }\n }\n}\n```\n\nNow I want my button to change color on hover.\n\n```\n\n```\n\nBut it doesn't work.\n\nFunny thing is, if I write `bg-pepegray` it works. The only place it doesn't work is in the hover.\n\n========================================\n\nTop Answer:\nIf there is no need to add a color pallete, you can remove object as a color value\n\n```\nmodule.exports ={\n theme: {\n extend: {\n colors: {\n pepegray: \"#323232\",\n }\n }\n }\n}\n```\n\n========================================\n\nCode:\n```js\nmodule.exports ={\n theme: {\n extend: {\n colors: {\n pepegray: { DEFAULT: \"#323232\" },\n }\n }\n }\n}\n```\n\n```js\n<button className=\"h-2 w-2 rounded-full bg-silver hover:bg-pepegray m-0.5\"></button>\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nbg-pepegray\n```\n\n```text\nmodule.exports ={\n theme: {\n extend: {\n colors: {\n 'pepegray': { DEFAULT: \"#323232\" },\n }\n }\n }\n}\n```\n\n```text\n<button className=\"h-2 w-2 rounded-full bg-silver hover:bg-pepegray-DEFAULT m-0.5\"></button>\n```\n\n```text\nmodule.exports ={\n theme: {\n extend: {\n colors: {\n pepegray: \"#323232\",\n }\n }\n }\n}\n```\n\n========================================\n\nComments:\n- Are you sure the background color is not changing? Try increasing the width/height of the button. Also double-check the DOM to see if the class is being applied on hover.","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":105,"estimatedTokens":406}}358{"id":"stack-69187389","source":"stackoverflow","questionId":69187389,"title":"Why do I need to use npm i tailwindcss@npm:@tailwindcss/postcss7-compat when i can just do npm i tailwind?","tags":["npm","create-react-app","tailwind-css"],"text":"Title: Why do I need to use npm i tailwindcss@npm:@tailwindcss/postcss7-compat when i can just do npm i tailwind?\nTags: npm, create-react-app, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThe TailwindCSS getting started guide tells me to install itself using this command:\n\n`npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9`\n\nWhy can't I just do:\n\n`npm install -D tailwindcss postcss autoprefixer`\n\nI don't understand why the long npm install name, what the @ symbol does and if the first command is even different to the second command. If someone could point me in the right direction that would be greatly appreciated :)\n\n========================================\n\nCode:\n```text\nnpm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9\n```\n\n```text\nnpm install -D tailwindcss postcss autoprefixer\n```\n\n```text\ntailwindcss\n```\n\n========================================\n\nComments:\n- How can i use tailwindcss v3 by using @tailwindcss/postcss7-compat","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":34,"estimatedTokens":255}}359{"id":"stack-66962559","source":"stackoverflow","questionId":66962559,"title":"How can you set the root font size within a web component shadow-dom?","tags":["css","web-component","tailwind-css","shadow-dom"],"text":"Title: How can you set the root font size within a web component shadow-dom?\nTags: css, web-component, tailwind-css, shadow-dom\nSource: Stack Overflow\n\nQuestion:\nI am building a third party web component in Vue, which relies on Tailwindcss fairly heavily for most of its styles.\n\nThe shadow-dom of the web component encapsulates most of the styling and css so that there is (mostly) no bleed through of styles from the webpage where the web component sits to the interior of the shadow dom, and vice versa.\n\nHowever, Tailwind uses rem based values for sizing almost all its fonts, padding, height, width, etc.\n\nI just discovered that apparently the one exception where styles from the parent page bleed into the shadow-dom is that the shadow-dom will inherent the base font-size set in the html{ } section of the main page's stylesheet into the shadow-dom.\n\nSince rem-based values inherit from the parent's html{} block, this means that all of my Tailwind-based heights, fonts, padding, etc wind up getting arbitrarily resized if the subject page has set a font-size in their page's html {} block that is set to anything other than 16px.\n\nBefore I go back and try to strip Tailwind completely out from my component, is there any way I can prevent the shadow-dom from inheriting the font-size from the html {} block of the main page? It seems pretty ridiculous for a web component to provide nearly all encapsulated styles, only to be forced to inherit the root font-size from the page.\n\nI have tried overriding the font-size with !important, and also by trying to wrap the component in another tag, but neither seem to work.\n\n========================================\n\nCode:\n```text\n// tailwind.config.js\nmodule.exports = {\n theme: {\n spacing: {\n px: '1px',\n 0: '0',\n 0.5: '0.125rem',\n 1: '0.25rem',\n 1.5: '0.375rem',\n 2: '0.5rem',\n 2.5: '0.625rem',\n 3: '0.75rem',\n 3.5: '0.875rem',\n 4: '1rem',\n 5: '1.25rem',\n 6: '1.5rem',\n 7: '1.75rem',\n 8: '2rem',\n 9: '2.25rem',\n 10: '2.5rem',\n 11: '2.75rem',\n 12: '3rem',\n 14: '3.5rem',\n 16: '4rem',\n 20: '5rem',\n 24: '6rem',\n 28: '7rem',\n 32: '8rem',\n 36: '9rem',\n 40: '10rem',\n 44: '11rem',\n 48: '12rem',\n 52: '13rem',\n 56: '14rem',\n 60: '15rem',\n 64: '16rem',\n 72: '18rem',\n 80: '20rem',\n 96: '24rem',\n }\n }\n};\n```\n\n```text\nfont\n```\n\n```text\n16px\n```\n\n```text\nhtml\n```\n\n```text\nfont-size\n```\n\n```text\nrem\n```\n\n```text\nfont-size\n```\n\n```text\nfont-size\n```\n\n```text\nhtml\n```\n\n```text\npx\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":102,"estimatedTokens":653}}360{"id":"stack-79807587","source":"stackoverflow","questionId":79807587,"title":"Is it possible to customize the speed of the Nuxt UI Marquee component?","tags":["nuxt.js","tailwind-css","nuxtui"],"text":"Title: Is it possible to customize the speed of the Nuxt UI Marquee component?\nTags: nuxt.js, tailwind-css, nuxtui\nSource: Stack Overflow\n\nQuestion:\nGiven the Nuxt UI marquee component\n\n```\n\n \n \n```\n\nis it possible to control its speed? I wasn't able to find a prop for that. Maybe this can be achieved with a Tailwind class inside the `ui` prop?\n\n========================================\n\nCode:\n```html\n<UMarquee>\n <!-- ... -->\n </UMarquee>\n```\n\n```text\nui\n```\n\n```html\n<UMarquee\n :ui=\"{\n root: '[--duration:40s]'\n }\"\n>\n ...\n</UMarquee>\n```\n\n```text\n--duration\n```\n\n========================================\n\nComments:\n- By reviewing the default class names in the Theme section, you can find out which other variables the component uses.","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":46,"estimatedTokens":187}}361{"id":"stack-76645956","source":"stackoverflow","questionId":76645956,"title":"vueuse useDark function blocking the ability to transition an element","tags":["vue.js","vuejs3","tailwind-css","vueuse"],"text":"Title: vueuse useDark function blocking the ability to transition an element\nTags: vue.js, vuejs3, tailwind-css, vueuse\nSource: Stack Overflow\n\nQuestion:\nHey I have been troubleshooting this for a while but can't seem to figure it out. To give some context I am creating a dark mode for my site and I am using useDark from the vueuse library which is referenced here: useDark\n\nessentially it checks localStorage then user preferences to find whether they prefer light or dark mode. it then provides a boolean ref that we can use to do whatever. also it applies the class `dark` to the html documentElement ``.\n\nso whats the problem, well i am using tailwindcss to create a toggle button that allows the user to switch between light and dark.\n\nhere is a stackblitz example: using ref not useDark\n\ncode reference:\n\n```\n\nimport { useDark, useToggle } from '@vueuse/core';\nimport { ref } from 'vue';\n\nconst isDark = ref(true);\n// const isDark = useDark();\nconst toggleDark = useToggle(isDark);\n\n \n \n \n\n```\n\nthis essentially does nothing when using a ref and that is intentional to show that the transition of that toggle works fine\n\nthe problem i am having is if you comment out the ref and use useDark ref instead there is no smooth transition. I have troubleshooted so much to get to this point and I am absolutely lost as to why.\n\none thing you can do to force it to work is adding!transition-all to the inner div giving it importance but I dont know if this is the correct fix or if i just worked around it. What I am looking for is why this is happening\n\nI have tried adding the dark class to the documentElement but using only a ref and it seemed to work as well but then I would not be using useDark and also would need to manage my own localStorage and use preferences lookup.\n\nalso i have done it using raw css and i get the same incorrect behavior\n\n========================================\n\nCode:\n```js\n<script setup>\nimport { useDark, useToggle } from '@vueuse/core';\nimport { ref } from 'vue';\n\nconst isDark = ref(true);\n// const isDark = useDark();\nconst toggleDark = useToggle(isDark);\n</script>\n\n<template>\n <button\n class=\"h-8 w-16 pl-1 rounded-full bg-slate-300\"\n type=\"button\"\n @click=\"toggleDark()\"\n >\n <div\n class=\"h-7 w-7 rounded-full bg-slate-400 transition-all\"\n :class=\"{ 'translate-x-7': isDark }\"\n />\n </button>\n</template>\n```\n\n```text\ndark\n```\n\n```text\n<html class=\"dark\">\n```\n\n========================================\n\nComments:\n- Thanks for raising this, it helped me resolve my performance issues.","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":79,"estimatedTokens":638}}362{"id":"stack-67426358","source":"stackoverflow","questionId":67426358,"title":"How to overlap a div over a div in tailwind-css","tags":["css","tailwind-css"],"text":"Title: How to overlap a div over a div in tailwind-css\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a navbar on my site, when the site is on mobile size I want to have my hamburger menu overlap the contents of my page.\n\nThis is my site :\n\n \n\n```\n\n \n\n### My site\n\n Work\n About\n Contact\n\n \n\n \n\n \n \n Hello\n \n \n```\n\nI tried adding `relative` and `z-10` both on my `nav-links` and `nav` but they dont work, they still push the content downwards instead of having that div overlap.\n\nAny suggestions on what to do?\n\n========================================\n\nCode:\n```text\n<!-- logo Start -->\n<div class=\"nav-logo\">\n <h1>My site</h1>\n</div>\n\n<!-- links Start -->\n<div\n class=\n \"\n w-full\n flex\n flex-col\n items-center\n text-5xl\n md:pr-20\n \"\n\n>\n <a href=\"#\"\n class=\"block md:inline-block\">Work</a>\n <a href=\"#\"\n class=\"block md:inline-block\">About</a>\n <a href=\"#\"\n class=\"block md:inline-block\">Contact</a>\n<div/>\n\n <!-- links End -->\n\n </nav>\n\n <main>\n <article>\n <h1>Hello<h1/>\n </article>\n <main/>\n```\n\n```text\nrelative\n```\n\n```text\nz-10\n```\n\n```text\nnav-links\n```\n\n```text\nnav\n```\n\n```text\n<div class=\"md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500\">\n <div class=\"invisible md:visible bg-blue-400 w-1/3\">\n <div class=\"flex h-full items-center justify-center text-4xl\">\n Desktop Navbar\n </div>\n </div>\n <div class=\"text-4xl\">\n The main content of the file and it has it's content all over the page\n and i want to build a navbar on top of this\n </div>\n <div\n class=\"absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible\"\n >\n <div class=\"flex h-full items-center justify-center text-4xl\">\n Mobile Navbar\n </div>\n </div>\n </div>\n```\n\n```text\nrelative\n```\n\n```text\nabsolute\n```\n\n```text\nz-index\n```\n\n```text\nrelative\n```\n\n```text\nz-index\n```\n\n```text\nabsolute\n```\n\n========================================\n\nComments:\n- Does this answer your question? Div on top of another with Tailwind CSS","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":142,"estimatedTokens":521}}363{"id":"stack-71191344","source":"stackoverflow","questionId":71191344,"title":"Tailwindcss @apply is not working in storybook","tags":["next.js","tailwind-css","storybook","css-loader","sass-loader"],"text":"Title: Tailwindcss @apply is not working in storybook\nTags: next.js, tailwind-css, storybook, css-loader, sass-loader\nSource: Stack Overflow\n\nQuestion:\nI am using Next css modules (sass). I tried every solutions I've encountered but I still cannot get it working.\n\nMy problem is, when I run the storybook, the css doesn't compile @apply method from tailwind. There is a simple solution which is remove the @apply and use the classname directly to the element but I don't have the time to do because the application is too big at this point.\n\n```\n// main.js\nconst path = require('path');\n\nmodule.exports = {\n stories: [\n '../stories/**/*.stories.mdx',\n '../stories/**/*.stories.@(js|jsx|ts|tsx)',\n ],\n addons: [\n '@storybook/addon-links',\n '@storybook/addon-essentials',\n '@storybook/addon-interactions',\n {\n name: '@storybook/addon-postcss',\n options: {\n postcssLoaderOptions: {\n postcssOptions: {\n plugins: [require.resolve('tailwindcss')],\n },\n implementation: require('postcss'),\n },\n },\n },\n ],\n framework: '@storybook/react',\n webpackFinal: async (config) => {\n config.module.rules.push({\n test: /\\.sass$/,\n use: ['style-loader', 'css-loader?modules&importLoaders', 'sass-loader'],\n include: path.resolve(__dirname, '../'),\n });\n\n return config;\n },\n};\n```\n\noutput in storybook\n\nhttps://i.sstatic.net/PbbUO.png\n\nAny help would be appreciated\n\n========================================\n\nTop Answer:\nWhen I tried out the solution by @hdotluna, it didnt seem to work for me with the new storybook 7. However, later I found the solution from a comment on storybook repo for a similar issue.\n\nIn the storybook `main.js` file, adding `postcss-loader` to webpack config seemed to have done the trick.\n\nHere is how I have updated my configuration -\n\n```\nconst path = require('path');\nmodule.exports = {\n \"stories\": [\"../src/**/*.stories.mdx\", \"../src/**/*.stories.@(js|jsx|ts|tsx)\"],\n \"addons\": [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/addon-styling\", \n ],\n \"framework\": {\n name: \"@storybook/react-webpack5\",\n options: {}\n },\n \"webpackFinal\": async (config, {\n configType\n }) => {\n config.module.rules.push({\n test: /\\.scss$/,\n use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'], // note the 'postcss-loader' added\n include: path.resolve(__dirname, '../src/')\n });\n return config;\n }\n};\n```\n\n`postcss.config.js` (also required)\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n`style.scss` (my custom css file)\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n.editor-container ol {\n @apply list-decimal;\n}\n.editor-container ul {\n @apply list-disc;\n}\n```\n\nAnd I used it by importing the scss file to storybook `preview.js` file.\n\n========================================\n\nCode:\n```text\n// main.js\nconst path = require('path');\n\nmodule.exports = {\n stories: [\n '../stories/**/*.stories.mdx',\n '../stories/**/*.stories.@(js|jsx|ts|tsx)',\n ],\n addons: [\n '@storybook/addon-links',\n '@storybook/addon-essentials',\n '@storybook/addon-interactions',\n {\n name: '@storybook/addon-postcss',\n options: {\n postcssLoaderOptions: {\n postcssOptions: {\n plugins: [require.resolve('tailwindcss')],\n },\n implementation: require('postcss'),\n },\n },\n },\n ],\n framework: '@storybook/react',\n webpackFinal: async (config) => {\n config.module.rules.push({\n test: /\\.sass$/,\n use: ['style-loader', 'css-loader?modules&importLoaders', 'sass-loader'],\n include: path.resolve(__dirname, '../'),\n });\n\n return config;\n },\n};\n```\n\n```text\nconst path = require('path');\nconst TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');\n\nmodule.exports = {\n stories: [\n '../stories/**/*.stories.mdx',\n '../stories/**/*.stories.@(js|jsx|ts|tsx)',\n ],\n addons: [\n '@storybook/addon-links',\n '@storybook/addon-essentials',\n '@storybook/addon-interactions',\n 'storybook-addon-next-router',\n {\n name: '@storybook/addon-postcss',\n options: {\n postcssLoaderOptions: {\n postcssOptions: {\n plugins: [require.resolve('tailwindcss')],\n },\n implementation: require('postcss'),\n },\n },\n },\n ],\n framework: '@storybook/react',\n webpackFinal: async (config) => {\n config.resolve.plugins.push(new TsconfigPathsPlugin());\n\n config.module.rules.push({\n test: /\\.sass$/,\n use: ['style-loader', 'css-loader?modules&importLoaders', 'sass-loader'],\n include: path.resolve(__dirname, '../'),\n });\n\n return config;\n },\n};\n```\n\n```text\nimport '../styles/globals.css';\nimport { RouterContext } from 'next/dist/shared/lib/router-context';\n\nexport const parameters = {\n actions: { argTypesRegex: '^on[A-Z].*' },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/,\n },\n },\n nextRouter: {\n Provider: RouterContext.Provider,\n },\n};\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\nconst path = require('path');\nmodule.exports = {\n \"stories\": [\"../src/**/*.stories.mdx\", \"../src/**/*.stories.@(js|jsx|ts|tsx)\"],\n \"addons\": [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/addon-styling\", \n ],\n \"framework\": {\n name: \"@storybook/react-webpack5\",\n options: {}\n },\n \"webpackFinal\": async (config, {\n configType\n }) => {\n config.module.rules.push({\n test: /\\.scss$/,\n use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'], // note the 'postcss-loader' added\n include: path.resolve(__dirname, '../src/')\n });\n return config;\n }\n};\n```\n\n```js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n```scss\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n.editor-container ol {\n @apply list-decimal;\n}\n.editor-container ul {\n @apply list-disc;\n}\n```\n\n```text\nmain.js\n```\n\n```text\npostcss-loader\n```\n\n```text\npostcss.config.js\n```\n\n```text\nstyle.scss\n```\n\n```text\npreview.js\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":289,"estimatedTokens":1520}}364{"id":"stack-64029151","source":"stackoverflow","questionId":64029151,"title":"How to add tailwindcss to KotlinJS","tags":["kotlin","webpack","postcss","tailwind-css","kotlin-js"],"text":"Title: How to add tailwindcss to KotlinJS\nTags: kotlin, webpack, postcss, tailwind-css, kotlin-js\nSource: Stack Overflow\n\nQuestion:\nI am unable to add the tailwindcss library to my KotlinJS project. I tried multiple things.\n\nI have multiple dependencies defined in my *build.gradle.kts*\n\n```\nimplementation(npm(\"postcss\", \"latest\"))\nimplementation(npm(\"postcss-loader\", \"latest\"))\nimplementation(npm(\"tailwindcss\", \"1.8.10\"))\n```\n\nI tried creating a *tailwindcss.js* in my *webpack.config.d* with this content\n\n```\nconfig.module.rules.push({\n test: /\\.css$/i,\n use: [\n 'style-loader',\n 'css-loader',\n {\n loader: 'postcss-loader',\n options: {\n postcssOptions: {\n plugins: [\n [\n 'tailwindcss'\n ],\n ],\n },\n },\n }\n ]\n }\n);\n```\n\nBut that doesn't do anything. I also tried modifying this with multiple options, but I was never able to get tailwindcss to compile. I also tried disabling and enabling the KotlinJS CSS support in *build.gradle.kts*\n\nI can't find any info on how to add postcss to KotlinJS project.\n\nThank you for any help.\n\n========================================\n\nTop Answer:\nA basic integration can be achieved with the node-gradle plugin.\n\nIn your `build.gradle.kts`:\n\n```\nplugins {\n id(\"com.github.node-gradle.node\") version \"3.0.0-rc2\"\n}\n```\n\nAlso in `build.gradle.kts` define a task called \"tailwindcss\" that calls the tailwind CLI via npx. For example:\n\n```\nval tailwindCss = tasks.register(\"tailwindcss\") {\n\n // Output CSS location\n val generatedFile = \"build/resources/main/static/css/tailwind-generated.css\"\n\n // Location of the tailwind config file\n val tailwindConfig = \"css/tailwind.css\"\n\n command.set(\"tailwind\")\n args.set(listOf(\"build\", tailwindConfig, \"-o\", generatedFile))\n\n dependsOn(tasks.npmInstall)\n\n // The location of the source files which Tailwind scans when running ```purgecss```\n inputs.dir(\"src/main/kotlin/path/to/your/presentation/files\")\n\n inputs.file(tailwindConfig)\n outputs.file(generatedFile)\n}\n```\n\nFinally, in `build.gradle.kts` bind the task to your processResources step, so that it runs automatically. Note you may want to refine this later, because running tailwind every time the processResources step is invoked will slow down your dev cycle.\n\n```\ntasks.processResources {\n dependsOn(tailwindCss)\n}\n```\n\nNow we need a minimal `package.json` in the root of your project. For example:\n\n```\n{\n \"name\": \"MyProject\",\n \"devDependencies\": {\n \"tailwindcss\": \"^1.7.0\"\n }\n}\n```\n\nFinally, we configure our tailwind config in the location defined by our NpxTask, in the example ```css/tailwind.css\"\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nSo now after the processResource step is run, gradle will invoke the Tailwind npx task, consume your source and write the CSS to the location you specified.\n\n========================================\n\nCode:\n```text\nimplementation(npm(\"postcss\", \"latest\"))\nimplementation(npm(\"postcss-loader\", \"latest\"))\nimplementation(npm(\"tailwindcss\", \"1.8.10\"))\n```\n\n```text\nconfig.module.rules.push({\n test: /\\.css$/i,\n use: [\n 'style-loader',\n 'css-loader',\n {\n loader: 'postcss-loader',\n options: {\n postcssOptions: {\n plugins: [\n [\n 'tailwindcss'\n ],\n ],\n },\n },\n }\n ]\n }\n);\n```\n\n```text\npackage.json\n```\n\n```text\nyarn\n```\n\n```text\nplugins {\n id(\"com.github.node-gradle.node\") version \"3.0.0-rc2\"\n}\n```\n\n```text\nval tailwindCss = tasks.register<com.github.gradle.node.npm.task.NpxTask>(\"tailwindcss\") {\n\n // Output CSS location\n val generatedFile = \"build/resources/main/static/css/tailwind-generated.css\"\n\n // Location of the tailwind config file\n val tailwindConfig = \"css/tailwind.css\"\n\n command.set(\"tailwind\")\n args.set(listOf(\"build\", tailwindConfig, \"-o\", generatedFile))\n\n dependsOn(tasks.npmInstall)\n\n // The location of the source files which Tailwind scans when running ```purgecss```\n inputs.dir(\"src/main/kotlin/path/to/your/presentation/files\")\n\n inputs.file(tailwindConfig)\n outputs.file(generatedFile)\n}\n```\n\n```text\ntasks.processResources {\n dependsOn(tailwindCss)\n}\n```\n\n```text\n{\n \"name\": \"MyProject\",\n \"devDependencies\": {\n \"tailwindcss\": \"^1.7.0\"\n }\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nbuild.gradle.kts\n```\n\n```text\nbuild.gradle.kts\n```\n\n```text\nbuild.gradle.kts\n```\n\n```text\npackage.json\n```\n\n```text\n= Kotlin/JS + Tailwind CSS =\n\n This is a small sample repository to show the idiomatic way of \n configuring these two systems together.\n\n == Running it ==\n\n . Run `./gradlew run`.\n . Open `http://localhost:8080/` in your browser.\n . 🎉 Notice we're using Tailwind CSS classes successfully.\n\n == How To == \n\n Steps taken to make this work:\n\n === Dependencies ===\n\n Add the following dependencies to your JS target (`jsMain` dependencies) in your Gradle file:\n\n [source,kotlin]\n ----\n implementation(\"org.jetbrains:kotlin-extensions:1.0.1-pre.148-kotlin-1.4.21\")\n implementation(npm(\"postcss\", \"8.2.6\"))\n implementation(npm(\"postcss-loader\", \"4.2.0\")) // 5.0.0 seems not to work\n implementation(npm(\"autoprefixer\", \"10.2.4\"))\n implementation(npm(\"tailwindcss\", \"2.0.3\"))\n ----\n\n * `kotlin-extensions` is necessary to get the JavaScript link:https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-extensions/src/main/kotlin/kotlinext/js/CommonJS.kt#L20[`require`] function.\n ** Make sure the version number matches your version of the Kotlin multiplatform plugin at the top of your Gradle file.\n ** Kotlin Multiplatform 1.4.30 gave me `No descriptor found for library` errors. Try 1.4.21.\n ** Find the latest versions link:https://bintray.com/kotlin/kotlin-js-wrappers/kotlin-extensions[here].\n * `postcss` and `autoprefixer` are link:https://tailwindcss.com/docs/installation#install-tailwind-via- npm[dependencies] as mentioned in the Tailwind CSS docs.\n * `postcss-loader` is required because Kotlin/JS is built on top of Webpack.\n ** Note that while 5.0.0 is out, using it gave me build errors. The latest 4.x seems to work.\n * `tailwindcss` is obviously what we're here for.\n\n === Add Tailwind as a PostCSS plugin ===\n\n Just do link:https://tailwindcss.com/docs/installation#add-tailwind-as-a-post-css-plugin[this step].\n\n If unsure, create this file in your project root:\n\n [source,javascript]\n ----\n // postcss.config.js\n module.exports = {\n plugins: {\ntailwindcss: {},\nautoprefixer: {},\n }\n }\n ----\n\n === Create your configuration file (optional) ===\n\n link:https://tailwindcss.com/docs/installation#create-your-configuration-file[Official documentation].\n\n Creating the `tailwind.config.js` file is a little tricky because simply `npx` won't work, as we haven't installed any\n `node_modules`. Fortunately, Kotlin/JS has already done this for us.\n\n Run the following:\n\n [source,shell]\n ----\n $ ./gradlew kotlinNpmInstall\n $ ( cd build/js/ && npx tailwindcss init && mv tailwind.config.js ../../ )\n ----\n\n This generates `tailwind.config.js` in the `build/js/` directory and then moves it up two directories to the project\n```\n\n```text\nThis assumes your JavaScript module is `js`. If it's not, you'll need to change the `cd build/js/` part. If you're not\n```\n\n```text\nYou should now have all your dependencies set up and config files created.\n\n === Create and Reference a Regular CSS File ===\n\n _If you already have a CSS file that you're loading in your app, you can skip this step._\n\n Create `app.css` in your `jsMain/resources/` directory. Put something obvious in there so you know\n```\n\n```text\n[source,css]\n ----\n body {\nbackground-color: red;\n }\n ----\n\n This file will get copied into the same folder as your transpiled JavaScript files.\n\n In your JavaScript file (`client.kt` in this package), add:\n\n [source,javascript]\n ----\n kotlinext.js.require(\"./app.css\")\n ----\n```\n\n```text\nIf you run `./gradlew run`, you should be able to see a red page at `http://localhost:8080/`.\n\n We're almost there, but we have two more steps: tell Webpack to use PostCSS and to finally inject Tailwind CSS.\n\n === Using PostCSS with Webpack ===\n\n We want to \"monkeypatch\" the Webpack configuration that Kotlin/JS generates for us. This hook is\n```\n\n```text\nThe \"problem\", if you have `cssSupport.enabled = true` in your Gradle file (which you should!), is that this line\n```\n\n```text\nSo, we need to find the original rule and modify it. Create the following file relative to your project root:\n\n [source,javascript]\n ----\n // in webpack.config.d/postcss-loader.config.js\n\n (() => {\n const cssRule = config.module.rules.find(r => \"test.css\".match(r.test));\nif (!cssRule) {\n throw new Error(\"Could not resolve webpack rule matching .css files.\");\n }\n cssRule.use.push({\n loader: \"postcss-loader\",\n options: {}\n });\n })();\n ----\n\n We use an IIFE so that our new variable doesn't potentially interfere with other unseen variables.\n\n Now PostCSS is working!\n\n With PostCSS configured and the `tailwindcss` npm module in our dependencies, all that's left now\n```\n\n```text\n=== Importing Tailwind CSS ===\n\n We're basically smooth sailing from here. Follow the link:https://tailwindcss.com/docs/installation#include-tailwind-in-your-css[Include Tailwind in your CSS] directions.\n\n Just stick the following in your `app.css`:\n\n [source,css]\n ----\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n ----\n\n If you start the server again, it should **Just Work**! It's a bit hard to tell, but if you check the devtools,\n you should see the tw classes loading and massive js.js file being loaded (9.20mb!) which contains all of Tailwind CSS.\n\n == Areas for Improvement ==\n\n === Modifications to app.css ===\n\n Changes made to app.css don't get picked up unless you do a full `./gradlew clean` first, which is painful.\n\n Adding the following line to build.gradle.kts seems to fix this:\n\n [source,kotlin]\n ----\n tasks.withType(KotlinWebpack::class.java).forEach { t ->\nt.inputs.files(fileTree(\"src/jsMain/resources\"))\n }\n ----\n\n === Getting --continuous working ===\n\n Even with the above fix, --continuous doesn't seem to work. 🤷\n\n == Future Topics ==\n\n * link:https://tailwindcss.com/docs/installation#building-for-production[Building for Production]\n```\n\n```text\nbuild/js/node_modules\n```\n\n```text\nkotlinNpmInstall\n```\n\n```text\nnode_modules\n```\n\n```text\nfind . -maxdepth 3 -name node_modules\n```\n\n```text\nmain\n```\n\n```text\nrequire\n```\n\n```text\nwebpack.config.d/\n```\n\n```text\nbuild/js/packages/projectName/webpack.config.js\n```\n\n```text\n/\\.css$/\n```\n\n```text\n// build.gradle.kts\nplugins {\n id \"au.id.wale.tailwind\" version \"0.2.0\"\n}\n\ntailwind {\n version = \"3.4.1\"\n configPath = \"src/main/resources\"\n // replace with the relevant `tailwind.css` input paths\n input = \"src/main/resources/tailwind/tailwind.css\"\n output = \"src/main/resources/css/example.css\"\n}\n```\n\n```text\nnpm\n```\n\n========================================\n\nComments:\n- It seems like this doesn't work anymore: `Type 'com.github.gradle.node.npm.task.NpmInstallTask' property 'packageJsonFile' doesn't have a configured value.`\n- Hey Clovis, can you add plugins to tailwind with this approach? I tried adding hide scrollbar plugin but I get error. Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: Cannot find module 'tailwindcss/plugin'\n- I haven't used Tailwind plugins yet, but I've tested variants and they work completely fine, so the configuration file is correctly setup. Maybe you also need to add your plugin in your npm dependencies?\n- Yeah it works just fine, but something with the plugins doesn't seem to work for me. The index.js of the plugin requires 'tailwind/plugins' module which doesn't seem to exist. Just wanted to check it with you as I've yoinked your setup completely lol. I'll see if I can get it to work, posted it as a comment on the github issue in the repo you mentioned. As plugins are pretty important, but I think there are ways around them\n- If you ever figure it out, add the solution as a comment / edit my answer to add it :)","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":32,"totalLines":466,"estimatedTokens":3095}}365{"id":"stack-68130648","source":"stackoverflow","questionId":68130648,"title":"Apply padding to the truncated line of a multiline text","tags":["javascript","css","reactjs","tailwind-css"],"text":"Title: Apply padding to the truncated line of a multiline text\nTags: javascript, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am looking to add padding to the last line of a padding element only. I have the following html using Tailwind classes:\n\n```\n\n {data.description}\n\n setOpen(true)}>\n more\n \n\n```\n\nThe padding right `pr-14` is applied to the entire `p` tag. How can I get this to apply to only the last line? I have tried `block`, `inline` etc and none of them seem to make a difference. Is this possible in CSS?\n\nFor context, I am trying to add padding to the last line when I need to show a \"more\" button. The only alternative I can think of is to do something like the below image, however unsure how to have the text fade into the background (I can't apply a background to the `more` background as it is transparent).\n\nhttps://i.sstatic.net/gOAA0.png\n\n========================================\n\nTop Answer:\nA pseudo element can do it.\n\n\r\n\r\n\n```\np {\n font-size:20px;\n line-height:1.2em;\n margin:0;\n text-align:justify;\n}\n\n p:after {\n content:\"\";\n display:inline-block;\n height:2px;\n width:50px; /* the value of padding */\n background:red; /* to illustrate */\n}\n```\n\n\r\n\n```\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, efficitur quis condimentum ac, lacinia eu lacus. Cras faucibus vel nibh ut porta. efficitur quis condimentum ac, lacinia eu lacus. Cras faucibus vel nibh ut porta. efficitur quis condimentum ac, lacinia eu lacus. Cras faucibus vel nibh ut porta. \n \n\n```\n\n========================================\n\nCode:\n```text\n<div className=\"my-3 max-h-[4.5rem] relative\">\n <p ref={ref} className=\"inline-block line-clamp-3 pr-14\">{data.description}</p>\n <button className=\"text-blue-600 leading-none absolute bottom-[-4px] right-0 font-medium px-2 py-1\" onClick={() => setOpen(true)}>\n more\n </button>\n</div>\n```\n\n```text\npr-14\n```\n\n```text\np\n```\n\n```text\nblock\n```\n\n```text\ninline\n```\n\n```text\nmore\n```\n\n```text\ndisplay: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n -webkit-mask-image: linear-gradient(to top, black 0%, black 0%), linear-gradient(to left, black 70%, transparent 100%);\n -webkit-mask-position: 100% 100%, 100% 100%;\n -webkit-mask-size: 100% 100%, 120px 32px; /*120px is your padding*/\n -webkit-mask-repeat: no-repeat;\n -webkit-mask-composite: xor;\n```\n\n```text\ndisplay: -webkit-box;\n```\n\n```text\ndisplay\n```\n\n```css\np {\n font-size:20px;\n line-height:1.2em;\n margin:0;\n text-align:justify;\n}\n\n p:after {\n content:\"\";\n display:inline-block;\n height:2px;\n width:50px; /* the value of padding */\n background:red; /* to illustrate */\n}\n```\n\n```html\n<p>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, efficitur quis condimentum ac, lacinia eu lacus. Cras faucibus vel nibh ut porta. efficitur quis condimentum ac, lacinia eu lacus. Cras faucibus vel nibh ut porta. efficitur quis condimentum ac, lacinia eu lacus. Cras faucibus vel nibh ut porta. \n </p>\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n // ...\n plugins: [\n require('@tailwindcss/line-clamp'),\n ]\n}\n```\n\n```text\n<!-- max-h-20 = max-height:5rem; -->\n<div class=\"my-3 max-h-20 relative mx-10 border-2 border-gray-200\">\n <!-- you need to Line-Clamp plugin define in tailwind.config.css -->\n <p ref=\"{ref}\" class=\"flex line-clamp-3 p-1\">a b c d e f g h i j k l m n o p q r s t u v w x y z\n </p>\n <button class=\"text-blue-600 bg-white leading-none absolute -bottom-0.5 right-0 font-medium px-2 my-2\">more</button>\n</div>\n```\n\n```text\n<div class=\"my-chat-message\">\n <div class=\"my-text\">{{ message.text }}</div>\n <div class=\"my-display-time\">{{ message.displayTimeStamp }}</div>\n</div>\n```\n\n```text\n.my-text:after {\n content: \"\";\n display: inline-block;\n height: 2px;\n width: 30px; /* the value of padding */\n background: red; /* to illustrate */\n}\n```\n\n========================================\n\nComments:\n- you should split your description in multiple `` tags. With this you can target a specific line\n- How would you suggest doing that? The width of the paragraph tag is dynamic.\n- Its tricky to do that. You can split the words and then add n number of words to each paragraph. Maybe you can elaborate more on the problem you are trying to solve with padding. What is the need to add padding to the last line?\n- The question has been updated, including an image.\n- If your design requirements are not too strict you can change the position of the more button. More button\n- They aren't which is good, but I can't seem to find another way to do it. The only reasonable designs I can see is either to put the `more` button on top of the text or to the right of eclipsed text.\n- Try if this works {data.descriptionText} . Or instead of adding span with pr-14 add multiple nbsp; as needed.\n- Are there any suggestions for javascript that can target the last line rendered in the DOM?\n- There's one of simple plugins for that: cssscript.com/style-last-line-paragraph\n- I tried this however the element is ignored. I tried inline, block and inline-block also with difference widths.\n- I have tested this and it can not get it working with line-camp, do you have an example with this css?","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":182,"estimatedTokens":1311}}366{"id":"stack-65555659","source":"stackoverflow","questionId":65555659,"title":"Laravel 8, Tailwind CSS init","tags":["laravel","laravel-8","tailwind-css"],"text":"Title: Laravel 8, Tailwind CSS init\nTags: laravel, laravel-8, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have tried to install Tailwind CSS. I have run the following command.\n\n```\nnpm install -D tailwindcss\nnpx tailwindcss init\n```\n\nHowever, I have an error.\n\nUnexpected token {\n\nMaybe someone had the same mistake. I have an empty Laravel instance and I want to add tools for the UI.\n\n========================================\n\nTop Answer:\nHere is the issue\n\nActually the problem is with node/npm version. Try to upgrade the node version which is compitale with tailwindcss.\n\n========================================\n\nCode:\n```text\nnpm install -D tailwindcss\nnpx tailwindcss init\n```\n\n```text\nnpm install -D laravel-mix@latest tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\n```text\nsudo npm install -g n\n\nsudo n stable\n```\n\n```text\nnpx tailwindcss -i ./path/style.css -o ./path/output.css --watch\n```\n\n========================================\n\nComments:\n- Which version of nodejs are you using? Try upgrading to 14 if it's not the case and try again. The problem could be with postCSS. Getting the latest nodejs version will most probably solve your issue.","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":51,"estimatedTokens":294}}367{"id":"stack-66594380","source":"stackoverflow","questionId":66594380,"title":"Not able to produce action upon clicking the button","tags":["php","html","css","forms","tailwind-css"],"text":"Title: Not able to produce action upon clicking the button\nTags: php, html, css, forms, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using the below code from `Tailblocks` Link under `CTA` section , upon clicking the button I am not able to get to new page. In the below code `form` tags are added by me. please guide how can I resolve it?\n\n```\n\n \n \n \n \n\n### Slow-carb next level shoindcgoitch ethical authentic, poko scenester\n\n Poke slow-carb mixtape knausgaard, typewriter street art gentrify hammock starladder roathse. Craies vegan tousled etsy austin.\n\n \n \n \n\n### Sign Up\n\n \n Full Name\n \n \n \n Email\n \n \n Button\n Literally you probably haven't heard of them jean shorts.\n\n \n \n \n\n```\n\n========================================\n\nTop Answer:\nYou have a typo error in action attribute in your form tag.\n\n\r\n\r\n\n```\n\n```\n\n\r\n\r\n\r\n\nAlso you don't add the type attribute to your button tag.\n\n\r\n\r\n\n```\nButton\n```\n\n\r\n\r\n\r\n\nI hope this will fix your problem.\n\n========================================\n\nCode:\n```text\n<form ction=\"index.php\" method=\"post\">\n\n <section class=\"text-gray-600 body-font\">\n <div class=\"container px-5 py-24 mx-auto flex flex-wrap items-center\">\n <div class=\"lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0\">\n <h1 class=\"title-font font-medium text-3xl text-gray-900\">Slow-carb next level shoindcgoitch ethical authentic, poko scenester</h1>\n <p class=\"leading-relaxed mt-4\">Poke slow-carb mixtape knausgaard, typewriter street art gentrify hammock starladder roathse. Craies vegan tousled etsy austin.</p>\n </div>\n <div class=\"lg:w-2/6 md:w-1/2 bg-gray-100 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0\">\n <h2 class=\"text-gray-900 text-lg font-medium title-font mb-5\">Sign Up</h2>\n <div class=\"relative mb-4\">\n <label for=\"full-name\" class=\"leading-7 text-sm text-gray-600\">Full Name</label>\n <input type=\"text\" id=\"full-name\" name=\"full-name\" class=\"w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out\">\n </div>\n <div class=\"relative mb-4\">\n <label for=\"email\" class=\"leading-7 text-sm text-gray-600\">Email</label>\n <input type=\"email\" id=\"email\" name=\"email\" class=\"w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out\">\n </div>\n <button class=\"text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg\">Button</button>\n <p class=\"text-xs text-gray-500 mt-3\">Literally you probably haven't heard of them jean shorts.</p>\n </div>\n </div>\n </section>\n</form>\n```\n\n```text\nTailblocks\n```\n\n```text\nCTA\n```\n\n```text\nform\n```\n\n```text\n<form action=\"index.php\" method=\"post\">\n```\n\n```text\n<input type='submit' class=\"text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg\" value=\"Button\">\n```\n\n```text\n<script>\n var forms = document.getElementsByTagName('form');\n for(var i = 0; i < forms.length; i += 1) {\n forms[i].addEventListener('submit', function(e) {\n e.preventDefault();\n }, true);\n }\n </script>\n```\n\n```html\n<form action=\"index.php\" method=\"post\">\n```\n\n```html\n<button type=\"submit\" class=\"text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg\">Button</button>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":140,"estimatedTokens":910}}368{"id":"stack-71299473","source":"stackoverflow","questionId":71299473,"title":"Storybook errors when adding tailwindcss","tags":["webpack","tailwind-css","storybook","postcss","postcss-loader"],"text":"Title: Storybook errors when adding tailwindcss\nTags: webpack, tailwind-css, storybook, postcss, postcss-loader\nSource: Stack Overflow\n\nQuestion:\nI'm trying to add `tailwindcss` **v3** to existing storybook setup.\n\nI have tried and followed every guide out there with similar features. Please help.🙏\n\n**What it was working before trying to setup tailwindcss**\n\n- Storybook ran and compiled components and stories.\n\n- PostCSS 8+ with a few plugins.\n\n**What I did**\n\n### Installed `tailwindcss`\n\n### Added `tailwindcss:{}` to `postcss.config.js`\n\n### I imported the newly added `styles/globals.css` into `storybook/preview.js`\n\nLike this: `import './styles/globals.css';` and added the directives\n\n```\n/******** storybook/styles/globals.css ********/\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n### I set the following config in `main.js`\n\n```\n/******** storybook/main.js ********/\n\nmodule.exports = {\n stories: ['./stories/*.stories.mdx', './stories/**/*.stories.@(ts|tsx)'],\n addons: [\n '@storybook/addon-links',\n '@storybook/addon-essentials',\n '@storybook/addon-a11y',\n '@storybook/preset-scss',\n {\n name: '@storybook/addon-postcss',\n options: {\n postcssLoaderOptions: {\n implementation: require('postcss'),\n },\n },\n },\n ],\n staticDirs: ['./public'],\n core: {\n builder: 'webpack5',\n },\n};\n```\n\n### The error I get when running `yarn storybook`.\n\n```\n/******** iTerm2 output ********/\n\n99% done plugins webpack-hot-middleware\nwebpack built preview 02e06cdf44b2c261d88f in 13260ms\nModuleBuildError: Module build failed \n(from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):\nTypeError: Cannot read properties of undefined (reading 'config')\n at getTailwindConfig (/*MY_PROJECT*/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:81:62)\n```\n\n========================================\n\nCode:\n```text\n/******** storybook/styles/globals.css ********/\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n/******** storybook/main.js ********/\n\nmodule.exports = {\n stories: ['./stories/*.stories.mdx', './stories/**/*.stories.@(ts|tsx)'],\n addons: [\n '@storybook/addon-links',\n '@storybook/addon-essentials',\n '@storybook/addon-a11y',\n '@storybook/preset-scss',\n {\n name: '@storybook/addon-postcss',\n options: {\n postcssLoaderOptions: {\n implementation: require('postcss'),\n },\n },\n },\n ],\n staticDirs: ['./public'],\n core: {\n builder: 'webpack5',\n },\n};\n```\n\n```text\n/******** iTerm2 output ********/\n\n99% done plugins webpack-hot-middleware\nwebpack built preview 02e06cdf44b2c261d88f in 13260ms\nModuleBuildError: Module build failed \n(from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):\nTypeError: Cannot read properties of undefined (reading 'config')\n at getTailwindConfig (/*MY_PROJECT*/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:81:62)\n```\n\n```text\ntailwindcss\n```\n\n```text\ntailwindcss\n```\n\n```text\ntailwindcss:{}\n```\n\n```text\npostcss.config.js\n```\n\n```text\nstyles/globals.css\n```\n\n```text\nstorybook/preview.js\n```\n\n```text\nimport './styles/globals.css';\n```\n\n```text\nmain.js\n```\n\n```text\nyarn storybook\n```\n\n```js\n// .storybook/main.js\nconst path = require(\"path\");\n\nmodule.exports = {\n stories: [\"../src/**/*.stories.mdx\", \"../src/**/*.stories.@(js|jsx|ts|tsx)\"],\n addons: [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/addon-interactions\",\n // {\n // name: \"@storybook/addon-postcss\",\n // options: {\n // postcssLoaderOptions: {\n // implementation: require(\"postcss\"),\n // },\n // },\n // },\n ],\n framework: \"@storybook/react\",\n core: {\n builder: \"webpack5\",\n },\n webpackFinal: (config) => {\n config.module.rules.push({\n test: /\\.css$/,\n use: [\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [require(\"tailwindcss\"), require(\"autoprefixer\")],\n },\n },\n },\n ],\n include: path.resolve(__dirname, \"../\"),\n });\n return config;\n },\n};\n```\n\n```js\n// .storybook/preview.js\nimport \"../styles/globals.css\";\n\nexport const parameters = {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/,\n },\n },\n};\n```\n\n```js\n// postcss.config.js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n```text\nyarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5 postcss-loader webpack\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":16,"totalLines":229,"estimatedTokens":1153}}369{"id":"stack-76363799","source":"stackoverflow","questionId":76363799,"title":"Can I apply multiple classes to children at once in TailwindCSS","tags":["reactjs","tailwind-css"],"text":"Title: Can I apply multiple classes to children at once in TailwindCSS\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm not sure if there is an option to declare multiple classes under a shared variant. I tried using a comma, but it didn't work.\n\n```\nbutton]:text-white,px-6 flex gap-2\">\n Right\n Left\n Circle\n Square\n Stop\n\n```\n\nI was wondering if there is a way in Tailwind to apply multiple classes to all the buttons at once, in one line, in React?\n\nSo all the buttons can have the classes `text-white px-6`, and also apply the parent div its own classes `flex gap-2`.\n\nRather than typing `[&>button]:text-white [&>button]:px-6`.\n\n========================================\n\nCode:\n```text\n<div className=\"[&>button]:text-white,px-6 flex gap-2\">\n <button>Right</button>\n <button>Left</button>\n <button>Circle</button>\n <button>Square</button>\n <button>Stop</button>\n</div>\n```\n\n```text\ntext-white px-6\n```\n\n```text\nflex gap-2\n```\n\n```text\n[&>button]:text-white [&>button]:px-6\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n.my-container {\n @variant [& > button] {\n @apply block bg-blue-300 cursor-pointer transition;\n \n @variant hover {\n @apply bg-blue-500;\n }\n }\n}\n</style>\n\n<div class=\"my-container\">\n <button>First Button</button>\n <button>Second Button</button>\n <button>Third Button</button>\n</div>\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant sub-buttons (& > button);\n\n.my-container {\n @variant sub-buttons {\n @apply block bg-blue-300 cursor-pointer transition;\n \n @variant hover {\n @apply bg-blue-500;\n }\n }\n}\n</style>\n\n<div class=\"my-container\">\n <button>First Button</button>\n <button>Second Button</button>\n <button>Third Button</button>\n</div>\n```\n\n```text\n@variant\n```\n\n```text\n@custom-variants\n```\n\n========================================\n\nComments:\n- Does this answer your question? How to access all the direct children of a div in tailwindcss?\n- stackoverflow.com/questions/73524088/…\n- not on the way that tailwind is built. There are hacks built to enable grouping of variants but I do not recommend. The verbosity of tailwind is the tradeoff you get by not having to deal with the stylesheet directly. akashhamirwasia.com/blog/variant-groups-in-tailwindcss\n- Does this style-tag approach work in React? IOW, can this be done at the component level in React, and if so, does it work this same way, or differently?\n- This is just CSS reference in `@custom-variant`. It also works with React components if you can write the appropriate CSS reference for them. For example, if you assign a class or an HTML attribute to the component to identify it, that will help. If you open a question referencing my solution and describe exactly what your goal is, I'd be happy to help find the solution.","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":108,"estimatedTokens":732}}370{"id":"stack-73300650","source":"stackoverflow","questionId":73300650,"title":"how to parse the bootstrap or tailwind css names into the non-bootstrap or non-tailwind css names","tags":["bootstrap-4","tailwind-css"],"text":"Title: how to parse the bootstrap or tailwind css names into the non-bootstrap or non-tailwind css names\nTags: bootstrap-4, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI made a web application based on bootstrap and tailwind, however I don't my web application UI to be visibly viewed in the browser tools. so I wonder if it is possible to parse the tailwind css names into the random names before web application publishing publicly ?\n\n========================================\n\nCode:\n```text\nimport styles from './index.module.css';\n const Home = () => <div className={styles.foo}>Hello World</div>;\n export default Home;\n```\n\n```text\n.foo {\n font-size: 1.5rem;\n line-height: 2rem;\n }\n```\n\n```text\nconst path = require('path');\nconst loaderUtils = require('loader-utils');\n\nconst hashOnlyIdent = (context, _, exportName) =>\n loaderUtils\n .getHashDigest(\n Buffer.from(\n `filePath:${path\n .relative(context.rootContext, context.resourcePath)\n .replace(/\\\\+/g, '/')}#className:${exportName}`,\n ),\n 'md4',\n 'base64',\n 6,\n )\n .replace(/^(-?\\d|--)/, '_$1');\n\nmodule.exports = {\n webpack(config, { dev }) {\n const rules = config.module.rules\n .find((rule) => typeof rule.oneOf === 'object')\n .oneOf.filter((rule) => Array.isArray(rule.use));\n\n if (!dev)\n rules.forEach((rule) => {\n rule.use.forEach((moduleLoader) => {\n if (\n moduleLoader.loader?.includes('css-loader') &&\n !moduleLoader.loader?.includes('postcss-loader')\n )\n moduleLoader.options.modules.getLocalIdent = hashOnlyIdent;\n });\n });\n\n return config;\n },\n};\n```\n\n========================================\n\nComments:\n- what are you using as build tool? vite o webpack ...","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":67,"estimatedTokens":451}}371{"id":"stack-72632651","source":"stackoverflow","questionId":72632651,"title":"Tailwind CSS not applying styles","tags":["css","tailwind-css","tailwind-css-3"],"text":"Title: Tailwind CSS not applying styles\nTags: css, tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI am currently building a react-express web app and today I ran into many bugs, The first issue was with `Webpack-5`. I solved it by downgrading the version to `4.0.3` but when I started the react-app, the CSS was not working so I thought it might be an error with `Node JS` version so I installed the latest version but that caused another bug so I installed the `LTS 16.15.1` version but the CSS still did not work. So the next thing I did was reinstall `tailwind` but that still did not fix it. I don't receive any error messages in the console or in the terminal.\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n**postcss.config.js**\n\n```\nexport const plugins = {\n tailwindcss: {},\n autoprefixer: {},\n};\n```\n\n**package.json**\n\n```\n\"devDependencies\": {\n \"autoprefixer\": \"^10.4.7\",\n \"postcss\": \"^8.4.14\",\n \"sass\": \"^1.52.1\",\n \"tailwindcss\": \"^3.1.3\",\n \"typescript\": \"^4.7.3\"\n }\n```\n\nHere is the link to the project if that helps in any way.\n\n========================================\n\nTop Answer:\nI had the same issue, the solution for me was in the content array in the tailwind.config.json where I specified the path to the folder where I what the styles to get appliedhttps://i.sstatic.net/wLZSQ.png\n\n```\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\", \n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./page-section/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {\n colors: {\n primary: \"#366B45\"\n },\n\n fontFamily: {\n sans: [\"Inter\", \"sans-serif\"],\n },\n },\n },\n plugins: [],\n};\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nexport const plugins = {\n tailwindcss: {},\n autoprefixer: {},\n};\n```\n\n```text\n\"devDependencies\": {\n \"autoprefixer\": \"^10.4.7\",\n \"postcss\": \"^8.4.14\",\n \"sass\": \"^1.52.1\",\n \"tailwindcss\": \"^3.1.3\",\n \"typescript\": \"^4.7.3\"\n }\n```\n\n```text\nWebpack-5\n```\n\n```text\n4.0.3\n```\n\n```text\nNode JS\n```\n\n```text\nLTS 16.15.1\n```\n\n```text\ntailwind\n```\n\n```text\nnpm start\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nindex.css\n```\n\n```text\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\", \n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./page-section/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {\n colors: {\n primary: \"#366B45\"\n },\n\n fontFamily: {\n sans: [\"Inter\", \"sans-serif\"],\n },\n },\n },\n plugins: [],\n};\n```\n\n```text\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport tailwindcss from \"tailwindcss\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [react()],\n css: {\n postcss: {\n plugins: [tailwindcss()],\n },\n },\n});\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\"./index.html\", \"./src/**/*.{js,jsx,ts,tsx}\"],\n theme: { ... }\n}\n```\n\n========================================\n\nComments:\n- The question was originally written for Tailwind CSS v3. Please keep in mind that the new v4 release has more breaking changes, making other questions more relevant now. v4 does not support integration with SCSS or other preprocessors.\n- I had already done that, but it did not work\n- Try to restart the server\n- That’s the first thing I did but did not work\n- shouldn't just have content: [ \"./src/**/*.{js,tsx,jsx}\", ], be sufficient though? As it involves the entire project. I'm still having issues setting this up and can't quite get an answer anywhere\n- @RafaelSantos nextjs projects dont have a src folder in the root by default","metadata":{"transformedAt":"2026-08-18T18:33:42.913Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":192,"estimatedTokens":961}}372{"id":"stack-62056034","source":"stackoverflow","questionId":62056034,"title":"Tailwind CSS Navigation Hover Dropdown with Padding","tags":["html","css","tailwind-css"],"text":"Title: Tailwind CSS Navigation Hover Dropdown with Padding\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm attempting to show the sub `` list on the first navigation item when the item is hovered:\n\nhttps://i.sstatic.net/KNqcx.png\n\nEverything is working except for sometimes (it's hit and miss) when you are in between the padding of the first line `` item and the sub `` item, the secondary `` will disappear:\n\nhttps://i.sstatic.net/DhXPT.gif\n\nHow can I keep the secondary navigation list open when I'm navigating from the dropdown to the item list?\n\nJSFiddle\n\n```\n\n \n Dropdown\n \n \n \n- Item\n \n- Item 2\n \n- Item 3\n \n- Item 4\n \n- Item 5\n \n \n \n \n- Non-Dropdown\n \n- Non-Dropdown\n \n- Non-Dropdown\n\n```\n\n```\n.dropdown:hover .dropdown-menu {\n display: block;\n}\n```\n\n========================================\n\nTop Answer:\n**3** changes. Here's the jsfiddle\n\n- Add **relative** class to the `li` tag.\n\n- Add **top-0** with the `dropdown-menu absolute` class.\n\n- Change the padding of `ul`, inside the menu, to `p-8`. Just a minor css\n\n========================================\n\nCode:\n```text\n<ul class=\"w-full\">\n <li class=\"dropdown inline px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide\">\n <a>Dropdown</a>\n <div class=\"dropdown-menu absolute hidden h-auto flex pt-4\">\n <ul class=\"block w-full bg-white shadow px-12 py-8\">\n <li class=\"py-1\"><a class=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">Item</a></li>\n <li class=\"py-1\"><a class=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">Item 2</a></li>\n <li class=\"py-1\"><a class=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">Item 3</a></li>\n <li class=\"py-1\"><a class=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">Item 4</a></li>\n <li class=\"py-1\"><a class=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">Item 5</a></li>\n </ul>\n </div>\n </li>\n <li class=\"inline px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide\"><a>Non-Dropdown</a></li>\n <li class=\"inline px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide\"><a>Non-Dropdown</a></li>\n <li class=\"inline px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide lg:pr-8\"><a>Non-Dropdown</a></li>\n</ul>\n```\n\n```text\n.dropdown:hover .dropdown-menu {\n display: block;\n}\n```\n\n```text\n<ul>\n```\n\n```text\n<ul>\n```\n\n```text\n<ul>\n```\n\n```text\n<ul>\n```\n\n```html\n<li class=\"group relative dropdown px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide\">\n <a>Dropdown</a>\n```\n\n```html\n<div class=\"group-hover:block dropdown-menu absolute hidden h-auto\">\n```\n\n```html\n<ul class=\"top-0 w-48 bg-white shadow px-6 py-8\">\n <li class=\"py-1\"><a class=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">Item</a></li>\n <li class=\"py-1\"><a class=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">Item 2</a></li>\n <li class=\"py-1\"><a class=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">Item 3</a></li>\n <li class=\"py-1\"><a class=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">Item 4</a></li>\n <li class=\"py-1\"><a class=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">Item 5</a></li>\n</ul>\n```\n\n```js\nvariants: {\n display:['group-hover']\n}\n```\n\n```text\nli\n```\n\n```text\ndropdown-menu absolute\n```\n\n```text\nul\n```\n\n```text\np-8\n```\n\n```text\n<div className=\"group\">\n <button>Dropdown button</button>\n <div className=\"hidden group-hover:block -mt-4\">\n <div className=\"mt-6 bg-transparent\">\n <ul>\n <li></li>\n <li></li>\n <ul>\n </div>\n</div>\n```\n\n```text\n<ul className=\"w-full z-50\">\n <li className=\"dropdown inline px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide relative\">\n <a>Dropdown</a>\n <div className=\"dropdown-menu top-0 absolute hidden h-auto flex pt-4 \">\n <ul className=\"block w-full bg-white shadow p-8\">\n <li className=\"py-1\">\n <a className=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">\n Item\n </a>\n </li>\n <li className=\"py-1\">\n <a className=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">\n Item 2\n </a>\n </li>\n <li className=\"py-1\">\n <a className=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">\n Item 3\n </a>\n </li>\n <li className=\"py-1\">\n <a className=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">\n Item 4\n </a>\n </li>\n <li className=\"py-1\">\n <a className=\"block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer\">\n Item 5\n </a>\n </li>\n </ul>\n </div>\n </li>\n```\n\n========================================\n\nComments:\n- Your suggession works 100%. My question is, what if, I need a submenu for a dropdown menu item, as if I put again 'group' & 'group-hover:block' ithe submenu appears before the 'onmouseover' of relevant dropdown item...\n- @GajenDissanayake I am not sure what version of tailwind you have been using but if you check the documentation, you will find a section: \"Differentiating nested groups\" where it explains how you can name groups and differentiate between them. Below you have an example of the above code, in which I have added another sub menu: play.tailwindcss.com/I7fG01zSOE\n- Wow, Thanks for letting me know the \"Differentiation nested groups\" I assumed there should be a way because submenus are very common in navbars. Thanks again!\n- z-index is outside the scope of this question. See stackoverflow.com/a/67806417/5254224\n- @ahinkle I faced the same issue you mentioned as hit and miss, and realized it was happening to me because of Z index.","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":205,"estimatedTokens":1714}}373{"id":"stack-72129162","source":"stackoverflow","questionId":72129162,"title":"Styling issues in monorepo with Turborepo, SvelteKit and Tailwind","tags":["tailwind-css","svelte","monorepo","sveltekit","turborepo"],"text":"Title: Styling issues in monorepo with Turborepo, SvelteKit and Tailwind\nTags: tailwind-css, svelte, monorepo, sveltekit, turborepo\nSource: Stack Overflow\n\nQuestion:\nI’ve created a monorepo with Turborepo that contains 2 SvelteKit apps and 2 packages: a component library (which is also based on SvelteKit) and a configuration package.\n\n```\nroot\n|\n|- packages\n| |- component-library\n| `- config\n|\n`- apps\n |- app1\n `- app2\n```\n\nThe *config* package contains the Tailwind and PostCSS config files, which are used in the component library and both apps.\n\nMy issue is that components imported from the *component-library* are displayed correctly in *app1* but appear to have issues with Tailwind classes in *app2*. Some classes are present but some are not. I’m using Tailwind in JIT mode.\n\nVersions of used packages:\n\n```\n\"turbo\": \"^1.2.4\",\n\"svelte\": \"^3.34.0\",\n\"@sveltejs/kit\": \"1.0.0-next.316\",\n\"tailwindcss\": \"3.0.23\",\n```\n\nI’m not even sure if this is because SvelteKit, but if anyone has experience with a similar Turborepo-SvelteKit-Tailwind setup I would appreciate some help.\n\n========================================\n\nTop Answer:\nIt turns out that I don't have to install tailwindcss-related packages in the root of monorepo.\n\nBut I have to add files of shared package (like component-library in the original question) to `tailwind.config.js`.\n\nSo in the `/apps/app1/tailwind.config.js`, below content should be added.\n\n```\n/** @type {import('tailwindcss').Config} */\nexport default {\n ...\n content: ['./src/**/*.{html,js,svelte,ts}', '../../packages/component-library/**/*.{html,js,svelte,ts}'],\n ...\n};\n```\n\n========================================\n\nCode:\n```text\nroot\n|\n|- packages\n| |- component-library\n| `- config\n|\n`- apps\n |- app1\n `- app2\n```\n\n```text\n\"turbo\": \"^1.2.4\",\n\"svelte\": \"^3.34.0\",\n\"@sveltejs/kit\": \"1.0.0-next.316\",\n\"tailwindcss\": \"3.0.23\",\n```\n\n```text\n\"devDependencies\": {\n \"autoprefixer\": \"^10.3.4\",\n \"postcss\": \"^8.2.15\",\n \"tailwindcss\": \"^3.1.4\",\n \"turbo\": \"^1.3.1\"\n}\n```\n\n```text\nmodule.exports = require('config/tailwind.config.cjs')\n```\n\n```text\ncontent: [\n '../../packages/component-library/src/**/*.{html,js,svelte,ts,svx}',\n './src/**/*.{html,js,svelte,ts,svx}'\n]\n```\n\n```text\npackage.json\n```\n\n```text\ntailwind.config.cjs\n```\n\n```text\napp\n```\n\n```text\ntailwind.config.cjs\n```\n\n```text\npackages/config/tailwind.config.cjs\n```\n\n```text\ncomponent-library\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nexport default {\n ...\n content: ['./src/**/*.{html,js,svelte,ts}', '../../packages/component-library/**/*.{html,js,svelte,ts}'],\n ...\n};\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n/apps/app1/tailwind.config.js\n```\n\n========================================\n\nComments:\n- 0 This answer is not useful Show activity on this post. please could you include your `tailwind.config.js` or `tailwind.config.cjs` file content in your description.\n- Take a look at this answer: stackoverflow.com/a/78804843/6666348\n- Thanks for that @Adam. In my case, I only have one web app in the turbo repo so I only have one tailwind.config.js. Fortunately, you can just use relative paths for the content paths back up to the main `node_modules` folder.\n- [edited after 5 minutes so a new comment was needed...] Specifically, I needed the following to use `react-daisyui` ``` content: [ \"./app/**/*.{ts,tsx,jsx,js}\", \"../../node_modules/daisyui/dist/**/*.{ts,tsx,jsx,js}\", \"../../node_modules/react-daisyui/dist/**/*.{ts,tsx,jsx,js}\"‌​, ], ```\n- I'm not sure about how to connect DaisyUI with a monorepo but I don't think making Tailwind look for classes in files that are in `node-modules` is the best way. This in the `tailwind.config.js` should be enough to make it work I **think**: `content: ['./src/**/*.{js,ts,jsx,tsx}'], plugins: [require('daisyui')]`\n- This doesn’t make any sense. tailwind is a plugin to postcss, postcss is a plugin to sveltePreprocess, and sveltePreprocess is a plugin to vite. The apps encapsulate their own vite build environments within their workspaces. tailwind, autoprefixer and postcss should be defined as dependents within the application workspaces. How did you arrive at this conclusion and why does it work?\n- Also relative imports in the base config isn’t ideal because it requires that you that folder hierarchy. And it specifies that the dependent should also be depending on the UI package. It’s best to exclude context from the base config","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":145,"estimatedTokens":1118}}374{"id":"stack-78567007","source":"stackoverflow","questionId":78567007,"title":"How do I solve the error \"Failed to resolve import \"src/lib/utils\" from ... Does the file exist?\"","tags":["html","reactjs","user-interface","tailwind-css","vite"],"text":"Title: How do I solve the error \"Failed to resolve import \"src/lib/utils\" from ... Does the file exist?\"\nTags: html, reactjs, user-interface, tailwind-css, vite\nSource: Stack Overflow\n\nQuestion:\nI am a beginner in react and am trying to this tutorial (https://www.youtube.com/watch?v=_W3R2VwRyF4) on youtube. I am trying to test out the button component I am building, but I keep getting an error message:\n\n\"[plugin:vite:import-analysis] Failed to resolve import \"src/lib/utils\" from \"src/components/ui/button.tsx\". Does the file exist?\"\n\nFor reference, I am using vite + react + tailwind.\n\nI have attached a screen shot with the rest of the error message.\n\nThis is the code button.tsx:\n\n```\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"src/lib/utils\"\n```\n\nThis is the code in utils.ts:\n\n```\nimport { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n```\n\nI am importing the button component from @/components/ui/button to SignupForm.tsx with this command:\n\n```\nimport { Button } from \"@/components/ui/button\"\n```\n\nI deleted \"@\", but when I remove it from the path \"@/components/ui/button\", I get the error: \"Cannot find module 'components/ui/button' or its corresponding type declarations.\"\n\nI am assuming that it is a syntax OR a path error I am overlooking. Does anyone have any thoughts? Thank you.\n\n========================================\n\nTop Answer:\nWell what i did is to change the @ instances to src\n\nvite.config.ts\n\n```\nimport path from \"path\";\nimport react from \"@vitejs/plugin-react\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n plugins: [react()],\n resolve: {\n alias: {\n src: path.resolve(__dirname, \"./src\"),\n },\n },\n});\n```\n\ntsconfig.app.json\n\n```\n\"baseUrl\": \".\",\n\"paths\": {\n \"src/*\": [\"./src/*\"]\n},\n```\n\n========================================\n\nCode:\n```text\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"src/lib/utils\"\n```\n\n```text\nimport { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n```\n\n```text\nimport { Button } from \"@/components/ui/button\"\n```\n\n```json\n{\n \"compilerOptions\": {\n // ...\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\n \"./src/*\"\n ]\n }\n // ...\n }\n}\n```\n\n```js\nimport path from \"path\"\nimport react from \"@vitejs/plugin-react\"\nimport { defineConfig } from \"vite\"\n\nexport default defineConfig({\n plugins: [react()],\n resolve: {\n alias: {\n \"@\": path.resolve(__dirname, \"./src\"),\n },\n },\n})\n```\n\n```bash\nnpm i -D @types/node\n```\n\n```bash\nnpx shadcn-ui init\nnpx shadcn-ui add button\n```\n\n```text\n@/\n```\n\n```text\ntsconfig.json\n```\n\n```text\nvite.config.ts\n```\n\n```text\n@types/node\n```\n\n```text\npath\n```\n\n```text\n@/path/to/whatever\n```\n\n```text\n./src/path/to/whatever\n```\n\n```text\nimport path from \"path\";\nimport react from \"@vitejs/plugin-react\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n plugins: [react()],\n resolve: {\n alias: {\n src: path.resolve(__dirname, \"./src\"),\n },\n },\n});\n```\n\n```text\n\"baseUrl\": \".\",\n\"paths\": {\n \"src/*\": [\"./src/*\"]\n},\n```\n\n```text\nnpx shadcn@canary init\n```\n\n========================================\n\nComments:\n- Try `\"./src/lib/utils\"` (with the `./` at the start).\n- I tried doing this and still got the same error.\n- Can you a repo or Sandbox?\n- Here is the link to my github repo: github.com/tmhourani/snapgram\n- Move `utils.ts` file to `lib` and remove `@` directory or run the commands at the end of the answer again\n- I moved utils.ts file to lib and removed the @ directory, and now I am getting the error in localhost:5173: \"[plugin:vite:import-analysis] Failed to resolve import \"src/lib/utils\" from \"src/components/ui/button.tsx\". Does the file exist?\"\n- I went into my SignupForm.tsx file and changed the import statement from \"@/components/ui/button\" to \"src/components/ui/button\", and I am getting this error now: \"[plugin:vite:import-analysis] Failed to resolve import \"src/components/ui/button\" from \"src/_auth/forms/SignupForm.tsx\". Does the file exist?\"\n- See this stackoverflow.com/a/77249092/18079514\n- I did everything and resolved the issue, but my button component is not showing up on my UI.\n- Create a new question explaining what's going on\n- Here is the link to my new question: stackoverflow.com/questions/78572199/…\n- Exact this answer worked for me!","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":207,"estimatedTokens":1181}}375{"id":"stack-70403408","source":"stackoverflow","questionId":70403408,"title":"Tailwind css 3.0.5 classes is not working with react","tags":["reactjs","tailwind-css"],"text":"Title: Tailwind css 3.0.5 classes is not working with react\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nTailwind css 3.0.5 is not working with react. I have installed tailwind css as per the official installation guide of the tailwind css (https://tailwindcss.com/docs/guides/create-react-app).\nThe code which, I have written is below.\n\npackage.json\n\n```\n{\n \"name\": \"react-complete-guide\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^5.11.6\",\n \"@testing-library/react\": \"^11.2.2\",\n \"@testing-library/user-event\": \"^12.5.0\",\n \"react\": \"^17.0.1\",\n \"react-dom\": \"^17.0.1\",\n \"react-scripts\": \"4.0.1\",\n \"web-vitals\": \"^0.2.4\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.0\",\n \"postcss\": \"^8.4.5\",\n \"tailwindcss\": \"^3.0.7\"\n }\n}\n```\n\nsrc/index.css\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\npostcss.config.js\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\ntailwind.config.js\n\n```\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nsrc/app.js\n\n```\nimport \"./index.css\";\n\nfunction App() {\n return (\n \n Hello world!\n \n );\n}\n\nexport default App;\n```\n\n========================================\n\nTop Answer:\nJust update your react-script from v4 to lastest 5 version by: npm install react-scripts@latest.\nIf you will stay with version 4 you have to use craco\n\nThat was helpful for me\n\n========================================\n\nCode:\n```text\n{\n \"name\": \"react-complete-guide\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^5.11.6\",\n \"@testing-library/react\": \"^11.2.2\",\n \"@testing-library/user-event\": \"^12.5.0\",\n \"react\": \"^17.0.1\",\n \"react-dom\": \"^17.0.1\",\n \"react-scripts\": \"4.0.1\",\n \"web-vitals\": \"^0.2.4\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.0\",\n \"postcss\": \"^8.4.5\",\n \"tailwindcss\": \"^3.0.7\"\n }\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```text\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nimport \"./index.css\";\n\nfunction App() {\n return (\n <h1 className=\"text-3xl font-bold underline\">\n Hello world!\n </h1>\n );\n}\n\nexport default App;\n```\n\n```text\nnpm install -g create-react-app\n```\n\n```text\nnpm install react-scripts@latest\n```\n\n```text\nnpx create-react-app appname\n```\n\n========================================\n\nComments:\n- please add your code\n- @AselaPriyadarshana added the code. Please look it now.\n- Thanx! i changed my react-scripts version to \"5.0.0\" which is the latest version, and ran npm install\n- yup that works too actually","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":222,"estimatedTokens":934}}376{"id":"stack-71359059","source":"stackoverflow","questionId":71359059,"title":"Centering elements in a grid layout in Tailwind","tags":["tailwind-css"],"text":"Title: Centering elements in a grid layout in Tailwind\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm struggling to get a grid layout centered in Tailwind. Here's an example\n\n```\n\n \n 2 cols, should be centered\n \n\n```\n\nAnd here's what that looks like:\n\nhttps://i.sstatic.net/kKTl0.png\n\nOf course I could add `col-start-2` and then it would be centered, but the grid is coming from a dynamic layout and I don't know whether there are more elements coming on the same row or not. I've tried `justify-center`, `justify-self-center`, `mx-auto`, also played around with `no-float` but nothing works.\n\nDoes anyone have any ideas?\n\n========================================\n\nTop Answer:\n```\n\n \n \n \n \n \n \n 2 cols, centered\n \n \n\n \n \n\n```\n\n========================================\n\nCode:\n```html\n<div class=\"grid grid-cols-6 p-24 justify-center bg-slate-500\">\n <div class=\"w-full p-8 col-span-2 justify-center justify-self-center mx-auto bg-slate-900 text-white text-center text-lg\">\n 2 cols, should be centered\n </div>\n</div>\n```\n\n```text\ncol-start-2\n```\n\n```text\njustify-center\n```\n\n```text\njustify-self-center\n```\n\n```text\nmx-auto\n```\n\n```text\nno-float\n```\n\n```html\n<div class=\"grid grid-cols-[repeat(auto-fit,_16.666666%)] m-auto p-24 justify-center bg-slate-500\">\n <div class=\"w-full p-8 col-span-2 justify-center justify-self-center mx-auto bg-slate-900 text-white text-center text-lg\">\n 2 cols, should be centered\n </div>\n</div>\n```\n\n```text\nrepeat(auto-fit, 16.666666%)\n```\n\n```text\n<div class=\"grid grid-cols-6 p-24 bg-slate-500\">\n <!-- Empty columns for spacing -->\n <div class=\"col-span-2\"></div>\n \n <!-- Centered 2-column section -->\n <div class=\"col-span-2 flex justify-center\">\n <div class=\"w-full p-8 bg-slate-900 text-white text-center text-lg\">\n 2 cols, centered\n </div>\n </div>\n\n <!-- Empty columns for spacing -->\n <div class=\"col-span-2\"></div>\n</div>\n```\n\n```html\n<div class=\"grid grid-cols-6 p-24 bg-slate-500 place-items-center\">\n</div>\n```\n\n========================================\n\nComments:\n- Read this for a thorough understanding of grid: stackoverflow.com/a/45599428/9920079\n- Thank you @Hackinet, very useful. I don't think it actually covered what I was looking for, which specifically was centering one of the grid items. It was more about centering the content within the grid, rather than having a grid with for example 3 columns and centering when there are just 2 elements within it. But still very interesting, thank you!\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":114,"estimatedTokens":686}}377{"id":"stack-74468487","source":"stackoverflow","questionId":74468487,"title":"How do you add a CSS class to a paragraph in Hugo","tags":["css","tailwind-css","hugo"],"text":"Title: How do you add a CSS class to a paragraph in Hugo\nTags: css, tailwind-css, hugo\nSource: Stack Overflow\n\nQuestion:\nI am new to Hugo, and I've been trying for over 30 minutes to get a class on a paragraph, but it isn't having it.\n\nI am using `TailwindCSS` and I need to add some css classes to the paragraph tag.\n\n**CODE:**\n\nIn my `.md` file I have\n\n```\nThis is some paragraph text.\n{.font-normal .text-lg}\n```\n\nAccording to the docs (scroll down a little bit) the above should work, but I get:\n\n```\nThis is some paragraph text.\n{.font-normal .text-lg}\n\n```\n\n*What I actually want is:*\n\n```\nThis is some paragraph text.\n\n```\n\nWhat am I doing wrong? `hugo version` gives me `hugo v0.105.0+extended linux/amd64 BuildDate=unknown`\n\n========================================\n\nTop Answer:\nLooking at the documentation, you can see that the default value for *block* in `[markup.goldmark.parser.attribute]` is `false`. You need to set that value to `true`:\n\n*config.toml*\n\n```\n[markup]\n [markup.goldmark]\n [markup.goldmark.parser]\n [markup.goldmark.parser.attribute]\n block = true\n```\n\nFor example, this paragraph:\n\n```\nThis is some paragraph text.\n{.font-normal .text-lg}\n```\n\nis rendered with `block = false` like this:\n\n```\nThis is some paragraph text.\n{.font-normal .text-lg}\n\n```\n\n(like the example in the question)\n\nand with `block = true` like this:\n\n```\nThis is some paragraph text.\n\n```\n\n*Tested on `Hugo v0.108.0+extended linux/amd64 BuildDate=unknown`*.\n\nPS: There is no need to set `unsafe = false` in `[markup.goldmark.renderer]`, **in this case**.\n\n========================================\n\nCode:\n```text\nThis is some paragraph text.\n{.font-normal .text-lg}\n```\n\n```text\n<p>This is some paragraph text.\n{.font-normal .text-lg}</p>\n```\n\n```text\n<p class=\"font-normal text-lg\">This is some paragraph text.</p>\n```\n\n```text\nTailwindCSS\n```\n\n```text\n.md\n```\n\n```text\nhugo version\n```\n\n```text\nhugo v0.105.0+extended linux/amd64 BuildDate=unknown\n```\n\n```text\n<p\n {{ if .Get \"class\"}}class=\"{{ .Get \"class\" }}\"{{ end }}\n {{ if .Get \"id\" }}id=\"{{ .Get \"id\" }}\"{{ end }}\n {{ if .Get \"name\" }}name=\"{{ .Get \"name\" }}\"{{ end }}\n {{ if .Get \"style\" }}style=\"{{ .Get \"style\" }}\"{{ end }}\n>{{ .Inner }}</p>\n```\n\n```text\n{{< attr class=\".font-normal .text-lg\" >}}This is some paragraph text.{{< /attr >}}\n```\n\n```text\n<p class=\".font-normal .text-lg\">This is some paragraph text.</p>\n```\n\n```toml\n[markup]\n [markup.goldmark]\n [markup.goldmark.parser]\n [markup.goldmark.parser.attribute]\n block = true\n```\n\n```md\nThis is some paragraph text.\n{.font-normal .text-lg}\n```\n\n```html\n<p>This is some paragraph text.\n{.font-normal .text-lg}</p>\n```\n\n```html\n<p class=\"font-normal text-lg\">This is some paragraph text.</p>\n```\n\n```text\n[markup.goldmark.parser.attribute]\n```\n\n```text\nfalse\n```\n\n```text\ntrue\n```\n\n```text\nblock = false\n```\n\n```text\nblock = true\n```\n\n```text\nHugo v0.108.0+extended linux/amd64 BuildDate=unknown\n```\n\n```text\nunsafe = false\n```\n\n```text\n[markup.goldmark.renderer]\n```\n\n========================================\n\nComments:\n- And here's the root of the problem: Hugo uses Goldmark, as explained at gohugo.io/getting-started/configuration-markup/#goldmark. Then the Goldmark docs say \"Currently only headings support attributes.\" See github.com/yuin/goldmark/#attributes. Seems like the Hugo docs are incorrect to say they support attributes on block elements. I tried it, and it doesn't work.\n- Thank you so much for taking the time to reply, this is indeed a massive pain. Most sites I build aren't that big (in terms of pages) so I think I'll go with Gatsby.\n- There is no need to insert HTML directly and enable unsafe. The desired behavour can be enabled by setting `block = true` under `[markup.goldmark.parser.attribute]` in the `config.toml`. See answer by @padaleiana.","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":22,"totalLines":188,"estimatedTokens":956}}378{"id":"stack-56233184","source":"stackoverflow","questionId":56233184,"title":"float right button without going outside parent div tailwindcss","tags":["css","sass","tailwind-css"],"text":"Title: float right button without going outside parent div tailwindcss\nTags: css, sass, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to float a button to the right of a card. I want it to appear in the bottom righthand corner.\n\nWhen I use a float right. It appears outside the parent div, is there a way to position it correctly?\n\n```\n\n \n \n \n \n D\n \n \n Team Name\n \n \n \n \n \n View\n \n \n \n \n \n\n```\n\nhttps://i.sstatic.net/q0EPM.png\n\nI have a running sandbox here with the code\n\nhttps://codesandbox.io/s/tailwind-css-nl0ph\n\n========================================\n\nTop Answer:\nInstead of using the `float-right` class use `text-right`\n\n========================================\n\nCode:\n```text\n<div class=\"m-10\">\n <div>\n <div class=\"bg-white shadow-lg border-grey w-1/3 \">\n <div class=\"p-4 flex\">\n <div class=\"pt-3 text-center font-bold text-2xl w-16 h-16 bg-grey-lightest\">\n D\n </div>\n <div class=\"ml-4\">\n Team Name\n </div>\n </div>\n <div class=\"float-right\">\n <a :href=\"'/company/' + team.id\">\n <button class=\"ml-2 bg-blue hover:bg-blue-dark text-white text-sm font-bold rounded p-2\">\n View\n </button>\n </a>\n </div>\n </div>\n </div>\n</div>\n```\n\n```text\n.clearfix::after {\n content: \"\";\n clear: both;\n display: table;\n}\n```\n\n```text\nfloat-right\n```\n\n```text\ntext-right\n```\n\n```html\n<div class=\"m-10\">\n <div>\n <div class=\"bg-white shadow-lg border-gray-400 w-1/3\">\n <div class=\"p-4 flex\">\n <div class=\"pt-3 text-center font-bold text-2xl w-16 h-16 bg-gray-200\">\n D\n </div>\n <div class=\"ml-4\">Team Name</div>\n </div>\n <div class=\"h-fit min-h-full flex justify-end\">\n <a href=\"'/company/' + team.id\">\n <button class=\"float-right ml-2 bg-blue-400 hover:bg-blue-600 text-white text-sm font-bold rounded px-2 py-1\">\n View\n </button>\n </a>\n </div>\n </div>\n </div>\n </div>\n```\n\n```text\nfloat-right\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":112,"estimatedTokens":557}}379{"id":"stack-69864018","source":"stackoverflow","questionId":69864018,"title":"Smooth transition on menu show and collapsed","tags":["reactjs","sass","next.js","css-transitions","tailwind-css"],"text":"Title: Smooth transition on menu show and collapsed\nTags: reactjs, sass, next.js, css-transitions, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI would like to implement a transition with **tailwincss** , on 'active' state change, I mean when the menu is shown/collapsed i would like to implement a smooth and pleasing transition\n\nI tried adding it on the state change by adding `transition delay-150 duration-300 ease-in-out` but i couldn't make it work.\n\n```\nimport Link from \"next/link\";\nimport { useState } from \"react\";\nimport HamburgerMenu from \"react-hamburger-menu\";\nimport dynamic from \"next/dynamic\";\n\nconst NavLink = dynamic(() => import(\"./NavLink\"));\n\nexport const Navbar = () => {\n const [active, setActive] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n\n const handleClick = () => {\n setActive(!active);\n setIsOpen(!isOpen);\n };\n const handleClose = () => {\n setActive(false);\n setIsOpen(false);\n };\n\n return (\n \n \n \n \n \n Agoumi.\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default Navbar;\n```\n\n========================================\n\nCode:\n```text\nimport Link from \"next/link\";\nimport { useState } from \"react\";\nimport HamburgerMenu from \"react-hamburger-menu\";\nimport dynamic from \"next/dynamic\";\n\nconst NavLink = dynamic(() => import(\"./NavLink\"));\n\nexport const Navbar = () => {\n const [active, setActive] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n\n const handleClick = () => {\n setActive(!active);\n setIsOpen(!isOpen);\n };\n const handleClose = () => {\n setActive(false);\n setIsOpen(false);\n };\n\n return (\n <nav className=\"sticky top-0 z-10 flex flex-wrap items-center px-3 py-3 bg-white md:py-3 container bg-red-200\">\n <div className=\"flex flex-wrap items-center justify-between w-full\">\n <Link href=\"/\">\n <a className=\"inline-flex items-center\">\n <span className=\"text-xl font-bold tracking-wide text-black tahu\">\n Agoumi.\n </span>\n </a>\n </Link>\n <div className=\"inline-flex p-0 ml-auto text-xl rounded-full outline-none hover:shadow-sm hover:bg-gray-100 hover:text-black\">\n <HamburgerMenu\n isOpen={isOpen}\n menuClicked={handleClick}\n width={20}\n height={15}\n strokeWidth={2}\n rotate={0}\n color=\"black\"\n // borderRadius={15}\n animationDuration={1}\n className=\"m-3\"\n />\n </div>\n </div>\n <div\n className={`${\n active ? \"transition delay-150 duration-300 ease-in-out\" : \"hidden\"\n } w-full`}\n >\n <div className=\"flex flex-col items-start w-full align-center\">\n <NavLink close={handleClose} to=\"/\" linkName=\"Home\" isOpen={false} />\n <NavLink\n close={handleClose}\n to=\"about\"\n linkName=\"About Me\"\n isOpen={false}\n />\n <NavLink\n close={handleClose}\n to=\"value\"\n linkName=\"Values\"\n isOpen={false}\n />\n <NavLink\n close={handleClose}\n to=\"projects\"\n linkName=\"Projects\"\n isOpen={false}\n />\n <NavLink\n close={handleClose}\n to=\"contact\"\n linkName=\"Contact us\"\n isOpen={false}\n />\n </div>\n </div>\n </nav>\n );\n};\n\nexport default Navbar;\n```\n\n```text\ntransition delay-150 duration-300 ease-in-out\n```\n\n```text\n<div\n className={`${\n active ? 'h-32' : 'h-0'\n } transition-all delay-150 duration-300 overflow-hidden w-full`}\n >\n ...\n```\n\n```text\ndisplay\n```\n\n```text\nhidden\n```\n\n```text\nheight\n```\n\n```text\nauto\n```\n\n```text\nh-32\n```\n\n```text\ntransition-all\n```\n\n```text\ntransition\n```\n\n```text\nheight\n```\n\n```text\nease-in-out\n```\n\n```text\ntransition-all\n```\n\n========================================\n\nComments:\n- Thank you for the detailed explenation.","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":206,"estimatedTokens":999}}380{"id":"stack-68299981","source":"stackoverflow","questionId":68299981,"title":"is there a way to configure both tailwind and typescript in nextjs while initializing?","tags":["typescript","next.js","tailwind-css"],"text":"Title: is there a way to configure both tailwind and typescript in nextjs while initializing?\nTags: typescript, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nnpx create-next-app -e with-tailwindcss my-project\n\nthis only seems to congifure tailwind\n\n```\nnpx create-next-app -ts\n```\n\nthis only configure typescript\n\nnpx create-next-app -e with-tailwindcss my-project -ts\n\nthis dosent seem to work\n\n========================================\n\nCode:\n```text\nnpx create-next-app -ts\n```\n\n```text\ntailwind.config\n```\n\n```text\npostcss.config\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":33,"estimatedTokens":137}}381{"id":"stack-65812581","source":"stackoverflow","questionId":65812581,"title":"Tailwind custom colors default not working","tags":["nuxt.js","tailwind-css"],"text":"Title: Tailwind custom colors default not working\nTags: nuxt.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have clean nuxt.js project with Nuxt/Tailwind as styling.\n\nWith the configuration below i should be able to use these classes on a div or in postcss with @apply `text-testred` and `text-testred-dark`.\nHowever, only `text-testred-dark` works and not the default value with `text-testred`.\n\nAlso `text-testred-DEFAULT` works, so it's interpreting it wrong, since according to the docs it \"DEFAULT\" will be ignored and will be used as the default suffix of class.\n\n**nuxt.config.js**\n\n```\ntailwindcss: {\n configPath: '~/tailwind.config.js',\n cssPath: '~/assets/css/tailwind.css'\n}\n```\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\n theme: {\n fontFamily:{\n sans: [\"'GT Walsheim Pro'\"],\n serif: [\"'GT Walsheim Pro'\"],\n mono: [\"'GT Walsheim Pro'\"],\n display: [\"'GT Walsheim Pro'\"],\n body: [\"'GT Walsheim Pro'\"]\n },\n colors: {\n // Configure your color palette here\n transparent: 'transparent',\n current: 'currentColor',\n testred: {\n lightest: '#efdfa4',\n lighter: '#f1cb8a',\n light: '#f5b575',\n DEFAULT: '#f89f68',\n dark: '#fb8762',\n darker: '#f86e61',\n darkest: '#f15764'\n },\n }\n}\n```\n\n**tailwind.css**\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n body{\n @apply text-testred; //doesn't work\n @apply text-testred-DEFAULT; //works\n }\n}\n```\n\n**EDIT**\n\nIn version 4.0.2 and above of @nuxtjs/tailwindcss this works as expected.\n\n========================================\n\nCode:\n```text\ntailwindcss: {\n configPath: '~/tailwind.config.js',\n cssPath: '~/assets/css/tailwind.css'\n}\n```\n\n```text\nmodule.exports = {\n theme: {\n fontFamily:{\n sans: [\"'GT Walsheim Pro'\"],\n serif: [\"'GT Walsheim Pro'\"],\n mono: [\"'GT Walsheim Pro'\"],\n display: [\"'GT Walsheim Pro'\"],\n body: [\"'GT Walsheim Pro'\"]\n },\n colors: {\n // Configure your color palette here\n transparent: 'transparent',\n current: 'currentColor',\n testred: {\n lightest: '#efdfa4',\n lighter: '#f1cb8a',\n light: '#f5b575',\n DEFAULT: '#f89f68',\n dark: '#fb8762',\n darker: '#f86e61',\n darkest: '#f15764'\n },\n }\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n body{\n @apply text-testred; //doesn't work\n @apply text-testred-DEFAULT; //works\n }\n}\n```\n\n```text\ntext-testred\n```\n\n```text\ntext-testred-dark\n```\n\n```text\ntext-testred-dark\n```\n\n```text\ntext-testred\n```\n\n```text\ntext-testred-DEFAULT\n```\n\n```text\nyarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":142,"estimatedTokens":654}}382{"id":"stack-69816012","source":"stackoverflow","questionId":69816012,"title":"Multiple transform function on Tailwind CSS","tags":["tailwind-css"],"text":"Title: Multiple transform function on Tailwind CSS\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI would like to apply several tranform functions to **Tailwind CSS** for one element order from left to right like this :\n\n```\ntransform: rotate(45deg) translateX(50%);\n```\n\nBut if I apply class like this, rotation is applied last.\n\n```\nclass=\"transform rotate-45 translate-x-1/2\"\n```\n\nA link to illustrate my problem :\n\nPlay.tailwindcss.com/R6PBP2OHPy\n\n========================================\n\nCode:\n```text\ntransform: rotate(45deg) translateX(50%);\n```\n\n```text\nclass=\"transform rotate-45 translate-x-1/2\"\n```\n\n```text\n<div class=\"rotate-45\">\n <img class=\"translate-x-12\"/>\n</div>\n```\n\n========================================\n\nComments:\n- can you attach the tailwind config file?\n- I have the default config file. I edit my question with a playground to illustrate my problem. @ElsaKarami\n- Set the origin to origin-left, this will allow you to rotate on the left center of the original space of the item here is the edited illistration of what you posted play.tailwindcss.com/r8gEZAZyAx","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":44,"estimatedTokens":274}}383{"id":"stack-71210273","source":"stackoverflow","questionId":71210273,"title":"Flowbite CSS plugin is not working when including it in tailwind.config.js","tags":["css","tailwind-css"],"text":"Title: Flowbite CSS plugin is not working when including it in tailwind.config.js\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using Flowbite (both JS and CSS) in my application. JS was inserted and works (using Webpack and `import 'flowbite'` in the entry point JS).\n\nFor the CSS, I'm using this in the `tailwind.config.js` file as the documentation tells you to do.\n\n```\nmodule.exports = {\n content: ['./src/**/*.{html,js}'],\n theme: {\n extend: {}\n },\n plugins: [\n require('flowbite/plugin')\n ]\n}\n```\n\nHowever when compiling everything (`npx tailwind build`) the CSS doesn't seem to be included in the final CSS file.\n\nI can tell because the FlowBite modal should have a dark background (making everything except the modal darker), but that background does not appear when creating the compiled CSS.\n\nWhen I do include the flowbite.css manually though, it does render correctly. So the current working solution I have is (in my HTML):\n\n```\n\n \n```\n\nBut I'd like to have it compiled automatically from the Tailwind build command.\n\n========================================\n\nTop Answer:\nIn doc: ``\nSo we need to change to correct path to our flowbite dist in node_modules. Example: ``\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n content: ['./src/**/*.{html,js}'],\n theme: {\n extend: {}\n },\n plugins: [\n require('flowbite/plugin')\n ]\n}\n```\n\n```text\n<!-- TODO: Adding the plugin in tailwind.config.js does not work -->\n <link rel=\"stylesheet\" href=\"https://unpkg.com/flowbite@latest/dist/flowbite.min.css\" />\n```\n\n```text\nimport 'flowbite'\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nnpx tailwind build\n```\n\n```text\nmodule.exports = {\n content: ['./src/**/*.html', './node_modules/flowbite/**/*.js'],\n plugins: [\n require('flowbite/plugin')\n ]\n}\n```\n\n```text\n'./node_modules/flowbite/**/*.js'\n```\n\n```text\ncontent\n```\n\n```text\n.h-modal{\n background-color: rgba(0,0,0,0.3);\n}\n```\n\n```text\n<script src=\"../path/to/flowbite/dist/flowbite.min.js\"></script>\n```\n\n```text\n<script src=\"./node_modules/flowbite/dist/flowbite.min.js\"></script>\n```\n\n```text\nrequire('flowbite/plugin')\n```\n\n========================================\n\nComments:\n- Can you how you included the JS file? Interactive components are not working in my application.\n- This does not work for me. The provided solution from the main author does work, though. I am running rails, and the CSS files / classes are not loaded properly. don't know how to solve this, besides loading the CSS from the CDN (which is, obviously, not ideal!)","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":112,"estimatedTokens":641}}384{"id":"stack-70034269","source":"stackoverflow","questionId":70034269,"title":"How to use Tailwind CSS with Quasar framework?","tags":["tailwind-css","quasar-framework","quasar"],"text":"Title: How to use Tailwind CSS with Quasar framework?\nTags: tailwind-css, quasar-framework, quasar\nSource: Stack Overflow\n\nQuestion:\nI have been trying to use Tailwind to custom the Quasar components, but the Quasar CSS has been overwriting most of the Tailwind CSS.\n\nI added a prefix to my `tailwind.config.js` and my Tailwind classes are prefixed with tw- like in the example below.\n\n```\nmodule.exports = {\n prefix: 'tw-',\n}\n```\n\n========================================\n\nTop Answer:\nfor me i had to use .css instead of .scss which quasar use as global css\nso steps below\n\ninstall\n\n```\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\ntailwind.config.js\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\npostcss.config.js\n\n```\nmodule.exports = {\n plugins: [\n require('autoprefixer')({\n overrideBrowserslist: [\n 'last 4 Chrome versions',\n 'last 4 Firefox versions',\n 'last 4 Edge versions',\n 'last 4 Safari versions',\n 'last 4 Android versions',\n 'last 4 ChromeAndroid versions',\n 'last 4 FirefoxAndroid versions',\n 'last 4 iOS versions',\n ],\n }),\n require('tailwindcss'),\n ],\n};\n```\n\nquasar.config.js\n\n```\ncss: ['app.scss', 'tailwind.css'],\n```\n\ntailwind.css\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n prefix: 'tw-',\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nprefixing tailwind classes is the recommended way\n```\n\n```text\nUnocss\n```\n\n```text\nUnoCSS\n```\n\n```text\nQuasar v3\n```\n\n```bash\nyarn install -D @unocss/webpack\nyarn install -D @unocss/preset-uno\n```\n\n```scss\nimport 'uno.css'\n```\n\n```js\nconst UnoCSS = require('@unocss/webpack').default\nconst presetUno = require('@unocss/preset-uno').default\n\nmodule.exports = configure(function (ctx) {\n // ...\n boot: [\n 'UnoCss' // name of your boot file\n ]\n // ...\n build: {\n // ...\n extendWebpack (cfg) {\n cfg.plugins.push(UnoCSS({\n presets: [\n presetUno()\n ]\n }))\n },\n // ...\n }\n //...\n}\n```\n\n```text\nquasar dev\n```\n\n```bash\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```js\nmodule.exports = {\n plugins: [\n require('autoprefixer')({\n overrideBrowserslist: [\n 'last 4 Chrome versions',\n 'last 4 Firefox versions',\n 'last 4 Edge versions',\n 'last 4 Safari versions',\n 'last 4 Android versions',\n 'last 4 ChromeAndroid versions',\n 'last 4 FirefoxAndroid versions',\n 'last 4 iOS versions',\n ],\n }),\n require('tailwindcss'),\n ],\n};\n```\n\n```js\ncss: ['app.scss', 'tailwind.css'],\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n========================================\n\nComments:\n- I think you will be better off with the Quasar's inbuilt CSS utilities which offer most of the features of Tailwind CSS.\n- @Chin.Udara That's not true. Quasar's inbuilt CSS utilities don't have a way to set the width and height of an element, for instance.\n- @letroot - Who would set a fixed height and not a relative one in modern app design? And why suffer all the bloat Tailwind generates when a fixed height is clearly a case for writing you own custom class? Stop serving the Tailwind Kool-Aid. Quasar provides 90% of what Tailwind does.","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":196,"estimatedTokens":910}}385{"id":"stack-76508667","source":"stackoverflow","questionId":76508667,"title":"DaisyUI modal does not exist on type Window of type globalThis","tags":["typescript","tailwind-css","daisyui"],"text":"Title: DaisyUI modal does not exist on type Window of type globalThis\nTags: typescript, tailwind-css, daisyui\nSource: Stack Overflow\n\nQuestion:\nI'm trying to import a dialog component from daisy ui but I'm getting the following error message:\n\n```\nUnsafe member access .showModal on an `any` value.eslint@typescript-eslint/no-unsafe-member-access\nUnsafe call of an `any` typed value.eslint@typescript-eslint/no-unsafe-call\nUnsafe return of an `any` typed value.eslint@typescript-eslint/no-unsafe-return\nProperty 'my_modal_2' does not exist on type 'Window & typeof globalThis'.ts(2339)\n```\n\nI didn't tamper with the default code:\n\n```\n window.my_modal_2.showModal()}\n >\n open modal\n \n \n \n \n\n### Hello!\n\n Press ESC key or click outside to close\n\n \n \n close\n \n \n```\n\nAnyone know what's going on?\n\n========================================\n\nTop Answer:\n### TL;DR **useRef**\n\n```\nconst myModal = useRef(null)\n\nreturn (\n <>\n \n ...\n \n myModal.current?.showModal()}>...\n \n)\n```\n\n### Long answer\n\nUsually any time you want to access something related to the DOM or the window object, your first thought when using React should be Refs.\n\n### Here, React docs give you a nice list of when to use Refs:\n\nhttps://react.dev/learn/referencing-values-with-refs#when-to-use-refs\n\nQuoting the docs:\n\nTypically, you will use a ref when your component needs to “step outside” React and communicate with external APIs—often a browser API that won’t impact the appearance of the component.\n\n========================================\n\nCode:\n```text\nUnsafe member access .showModal on an `any` value.eslint@typescript-eslint/no-unsafe-member-access\nUnsafe call of an `any` typed value.eslint@typescript-eslint/no-unsafe-call\nUnsafe return of an `any` typed value.eslint@typescript-eslint/no-unsafe-return\nProperty 'my_modal_2' does not exist on type 'Window & typeof globalThis'.ts(2339)\n```\n\n```text\n<button\n className=\"btn\"\n onClick={() => window.my_modal_2.showModal()}\n >\n open modal\n </button>\n <dialog id=\"my_modal_2\" className=\"modal\">\n <form method=\"dialog\" className=\"modal-box\">\n <h3 className=\"text-lg font-bold\">Hello!</h3>\n <p className=\"py-4\">Press ESC key or click outside to close</p>\n </form>\n <form method=\"dialog\" className=\"modal-backdrop\">\n <button>close</button>\n </form>\n </dialog>\n```\n\n```text\n<button\n className=\"btn\"\n onClick={() => {\n if (document) {\n (document.getElementById('my_modal_2') as HTMLFormElement).showModal();\n }\n }}\n>\n```\n\n```text\nconst myModal = useRef<HTMLDialogElement>(null)\n\nreturn (\n <>\n <dialog className='modal' ref={myModal}>\n ...\n </dialog>\n <button onClick={() => myModal.current?.showModal()}>...<button>\n </>\n)\n```\n\n```text\ndeclare global {\n interface Window {\n my_modal_2: HTMLFormElement;\n }\n}\n```\n\n```text\n\"use client\";\n\ndeclare global {\n interface Window {\n my_modal_2: HTMLFormElement;\n }\n}\n\ntype Props = {};\n\nconst ModalComponent = (props: Props) => {\n return (\n <>\n <button className=\"btn\" onClick={()=>window.my_modal_2.showModal()}>open modal</button>\n\n <dialog id=\"my_modal_2\" className=\"modal\">\n <form method=\"dialog\" className=\"modal-box\">\n <h3 className=\"font-bold text-lg\">Hello!</h3>\n <p className=\"py-4\">Press ESC key or click outside to close</p>\n </form>\n <form method=\"dialog\" className=\"modal-backdrop\">\n <button>close</button>\n </form>\n </dialog>\n </>\n );\n};\n```\n\n```text\nNext.js v13.4.19\n```\n\n```text\nmy_modal_2\n```\n\n```text\nonClick={() => (document.getElementById('my_modal_notes') as HTMLDialogElement).showModal()}\n```\n\n========================================\n\nComments:\n- Thanks, that helped!\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":175,"estimatedTokens":1024}}386{"id":"stack-62008673","source":"stackoverflow","questionId":62008673,"title":"How to change width on hover using tailwindcss","tags":["css","hover","width","tailwind-css"],"text":"Title: How to change width on hover using tailwindcss\nTags: css, hover, width, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to make a div wider on hovering using Tailwind css.\nIs this possible? and how?\n\nI've tried the following but it didn't work:\n\n```\nclass=\"w-1/3 hover:w-3/5\"\n```\n\n========================================\n\nCode:\n```text\nclass=\"w-1/3 hover:w-3/5\"\n```\n\n```text\nvariants: {\n width: [\"responsive\", \"hover\", \"focus\"]\n}\n```\n\n```text\ntailwind.config.js\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.914Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":30,"estimatedTokens":122}}387{"id":"stack-68255008","source":"stackoverflow","questionId":68255008,"title":"Tailwind CSS text over image problems","tags":["html","css","tailwind-css"],"text":"Title: Tailwind CSS text over image problems\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to code as below\nhttps://play.tailwindcss.com/5x8mBABcsW\n\nHow I can place the text over the circle image? I need the text centered and rounded on the bottom of the image.\n\nI also want to be able to increase size of the image and everything should stay in proportion.\n\n========================================\n\nTop Answer:\n```\nimport React from 'react';\nimport hero from '../assets/img/hero-bg.jpg';\nconst Hero = () => {\n return (\n \n \n \n \n I am Morgan Freeman\n\n \n \n );\n};\n\nexport default Hero;\n```\n\n\r\n\r\n\r\n\nhttps://i.sstatic.net/J9s4M.png\n\n========================================\n\nCode:\n```text\n<div class=\"relative w-40 h-40 rounded-full overflow-hidden\">\n <img src=\"https://www.w3schools.com/howto/img_avatar2.png\" alt=\"Avatar\" class=\"object-cover w-full h-full\" />\n <div class=\"absolute w-full py-2.5 bottom-0 inset-x-0 bg-blue-400 text-white text-xs text-center leading-4\">this is a text</div>\n</div>\n```\n\n```text\nw-40 h-40\n```\n\n```html\n<div class=\"relative w-40 h-40 overflow-hidden rounded-full\">\n <img src=\"https://www.w3schools.com/howto/img_avatar2.png\" alt=\"Avatar\" class=\"rounded-full w-full h-full\" />\n <div \n class=\"absolute w-full py-3 bottom-0 inset-x-0 bg-blue-400 text-white text-xs text-center leading-4 hover:translate-y-1 delay-500\">this is a text</div>\n </div>\n\nOR-\n\n<div class=\"relative w-40 h-40\">\n <img src=\"https://www.w3schools.com/howto/img_avatar2.png\" alt=\"Avatar\" class=\"rounded-full w-full h-full\" />\n <div class=\"absolute w-full h-full top-0 left-0 rounded-full bg-blue-400 text-white text-xs flex justify-center items-center opacity-0 hover:opacity-90\">this is a text</div>\n </div>\n```\n\n```js\nimport React from 'react';\nimport hero from '../assets/img/hero-bg.jpg';\nconst Hero = () => {\n return (\n <div className='w-full h-screen'>\n <img\n className='top-0 left-0 w-full h-screen object-cover'\n src={hero}\n alt='/'\n />\n <div className='bg-black/30 absolute top-0 left-0 w-full h-screen' />\n <div className='absolute text-2xl md:text-7xl text-white top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>\n <p className='tex-red-700'>I am Morgan Freeman</p>\n </div>\n </div>\n );\n};\n\nexport default Hero;\n```\n\n========================================\n\nComments:\n- Which code ? Which text ? Can you explain more ?\n- Sorry for my mistake. Please pardon me. Now my code is perfectly seen.","metadata":{"transformedAt":"2026-08-18T18:33:42.915Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":96,"estimatedTokens":631}}388{"id":"stack-72260485","source":"stackoverflow","questionId":72260485,"title":"How to dynamically populate tailwindcss grid-cols-x property?","tags":["reactjs","next.js","tailwind-css","nextjs-image"],"text":"Title: How to dynamically populate tailwindcss grid-cols-x property?\nTags: reactjs, next.js, tailwind-css, nextjs-image\nSource: Stack Overflow\n\nQuestion:\nI am currently working on a page using NextJs and TailwindCss. The user has the ability of loading an image locally and setting the number of pieces horiz/vert (rows/cols) that they wish the image to be split in. To properly display this, I need to set the grid to the proper number of columns in the parent element.\n\nI have an API I call locally that uses sharp to perform the split and calculate the width and height and I sort the images in my array so that they are in order since it is async. I then also generate a dynamic class string that just populates the proper number of columns for later assignment to my parent grid elements class.\n\n**CLASS STRING POPULATION**\n\n```\nconst gridClass = `grid grid-cols-${numCols} gap-2 pt-2`;\n\n//*** At this point, the value of gridClass, if columns were set to 3, using template literals is :\n\n'grid grid-cols-3 gap-2 pt-2'\n\n//The proper string is now populated and passed back in the API response via classCss key\n\nres.status(200).json({ msg: 'Success splitting', tileData: tiles, classCss: gridClass})\n```\n\n**PAGE SNIPPET:**\n\n```\n\n //(\n \n \n \n ))\n }\n \n\n```\n\nThis sometimes works but other times it doesn't. Usually if I set the columns to 3, it seems to work properly, but if I set it to 5 lets say, regardless of the input image size, it just puts them all in a single column with large images. Oddly however, the parent grid class on the page is correct, it just seems that it isn't adhered to. I will provide some snapshots below to show what I'm talking about. I've been trying to figure this out for a couple days, however I haven't had luck and since I'm new to NextJs I thought I would here and see if I'm just doing something stupid. Thanks!\n\nThe below results also don't seem to care if the viewing window is stretched wide or reduced in size. I just took the snapshots below so that you could see what was happening in a smaller viewing window.\n\nThis is the expected result where the image columns should match the columns entered by the user:\n\nhttps://i.sstatic.net/HpgkC.png\n\nhttps://i.sstatic.net/dfbVH.png\n\nNotice how the css class shows up under styles as well:\n\nhttps://i.sstatic.net/4RJQq.png\n\nThis is the improper result, where the user selected 5 columns, the image was split into the correct number of columns, but the display of this in the front end grid does not the css.\n\nhttps://i.sstatic.net/2YPDw.png\n\nAs you can see grid-cols-5 is correct from a class standpoint, but the viewed result doesn't adhere to this.\n\nhttps://i.sstatic.net/XMS1b.png\n\nGrid-cols-5 is in html class but missing under styles applied:\n\nhttps://i.sstatic.net/L9FWI.png\n\n========================================\n\nTop Answer:\nOne of the problem I noticed is in `grid-cols-${numCols}` in the line\n\n```\nconst gridClass = `grid grid-cols-${numCols} gap-2 pt-2`;\n```\n\nTailwindCSS doesn't allow you to generate classes dynamically. So when you use the following to generate the class… `grid-cols-${numCols}` as a string.\n\n…TailwindCSS will not pick that up as a valid TailwindCSS class and therefore will not produce the necessary CSS.\n\nYou can use the function from where you are getting `numCols` and instead of returning the value of `numCols`, simply return `grid-cols-${numCols}`.\n\nSuppose let say your function be `getNumofCols()`, then modify it like this\n\n```\nfunction getNumofCols() {\n ...\n ...\n ...\n ...\n ...\n \n return \"grid-cols-\" + numCols ;\n}\n```\n\nSo that it returns the complete string .\n\nAnd use it like again\n\n```\nconst gridClass = `grid ${getNumofCols()} gap-2 pt-2`;\n```\n\nIf your function uses any parameter then you can create a new function and call this function and just add `grid-cols-` to the return value.\n\nBy doing it this way, the entire string for every class is in your source code, so Tailwind will know to generate the applicable CSS.\n\n========================================\n\nCode:\n```text\nconst gridClass = `grid grid-cols-${numCols} gap-2 pt-2`;\n\n//*** At this point, the value of gridClass, if columns were set to 3, using template literals is :\n\n'grid grid-cols-3 gap-2 pt-2'\n\n//The proper string is now populated and passed back in the API response via classCss key\n\nres.status(200).json({ msg: 'Success splitting', tileData: tiles, classCss: gridClass})\n```\n\n```text\n<div id=\"final\">\n <div className={tileCss} > //<--This is where I pull in the generated class string\n {\n imageData.map((nft, i)=>(\n <div key={i} className='border shadow rounded-x1 overflow-hidden'>\n <Image src={nft.imgSrc} alt=\"image\" layout=\"responsive\" width={nft.tileDimX} height={nft.tileDimY}/>\n </div>\n ))\n }\n </div>\n</div>\n```\n\n```text\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n],\nsafelist: [\n {\n pattern: /grid-cols-./,\n }\n],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nconst gridClass = `grid grid-cols-${numCols} gap-2 pt-2`;\n```\n\n```text\nfunction getNumofCols() {\n ...\n ...\n ...\n ...\n ...\n \n return \"grid-cols-\" + numCols ;\n}\n```\n\n```text\nconst gridClass = `grid ${getNumofCols()} gap-2 pt-2`;\n```\n\n```text\ngrid-cols-${numCols}\n```\n\n```text\ngrid-cols-${numCols}\n```\n\n```text\nnumCols\n```\n\n```text\nnumCols\n```\n\n```text\ngrid-cols-${numCols}\n```\n\n```text\ngetNumofCols()\n```\n\n```text\ngrid-cols-\n```\n\n========================================\n\nComments:\n- Thanks Mohit for the reply! I am a little confused and I just want to be sure I understand the issue. In my API response I have this: const gridClass = `grid grid-cols-${numCols} gap-2 pt-2`; which then assigns \"grid grid-cols-3 gap-2 pt-2\" to gridClass if the columns were set to 3. So when my response is sent grid class is populated correct. res.status(200).json({ msg: 'Success splitting', tileData: tiles, classCss: gridClass}) If you look at the HTML screenshots of the class under the \"final\" id you will see the proper entry there. What point does tailwind process in the pipe.\n- I have modified the question slightly under the CLASS STRING POPULATION entry above to add a bit more clarification and information as I never stated that gridClass is populated already using template literals with the proper values when being sent back in the response.\n- You have to simply return the number of columns as string, so that tailwind can recognise it.\n- I am returning it as a string in my API. My API return value is 'grid grid-cols-3 gap-2 pt-2' for the classCss. Then using react state I assign that string to tileCss and that is what I reference in the page. Do I need to handle the page population differently?","metadata":{"transformedAt":"2026-08-18T18:33:42.915Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":205,"estimatedTokens":1670}}389{"id":"stack-68658249","source":"stackoverflow","questionId":68658249,"title":"How to do React-horizontal scroll using mouse wheel","tags":["reactjs","tailwind-css"],"text":"Title: How to do React-horizontal scroll using mouse wheel\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have used tailwind-CSS on react js I want to scroll horizontally using mouse wheel when user hover over the card section so for pc users can scroll horizontally by using mouse wheel instead of both shift and mouse wheel.\n\nLive Anywhere\n\n```\n\n {cardsDate?.map(({ img, title }) => (\n \n ))}\n \n \n```\n\n========================================\n\nTop Answer:\nThe version of hd3adcode is perfect. Here the typescript version :\n\n```\nexport function useHorizontalScroll() {\n const elRef = useRef(null);\n useEffect(() => {\n const el = elRef.current;\n if (el) {\n const onWheel = (e: WheelEvent) => {\n if (e.deltaY == 0) return;\n e.preventDefault();\n el.scrollTo({\n left: el.scrollLeft + e.deltaY,\n behavior: 'smooth',\n });\n };\n el.addEventListener('wheel', onWheel);\n return () => el.removeEventListener('wheel', onWheel);\n }\n }, []);\n return elRef;\n}\n```\n\n========================================\n\nCode:\n```text\n<div className=\"flex space-x-3 overflow-y-scroll scrollbar-hide p-3 -ml-3\">\n {cardsDate?.map(({ img, title }) => (\n <MediumCard key={img} img={img} title={title} /> \n ))}\n </div>\n </section>\n```\n\n```js\nexport function useHorizontalScroll() {\n const elRef = useRef();\n useEffect(() => {\n const el = elRef.current;\n if (el) {\n const onWheel = e => {\n if (e.deltaY == 0) return;\n e.preventDefault();\n el.scrollTo({\n left: el.scrollLeft + e.deltaY,\n behavior: \"smooth\"\n });\n };\n el.addEventListener(\"wheel\", onWheel);\n return () => el.removeEventListener(\"wheel\", onWheel);\n }\n }, []);\n return elRef;\n}\n```\n\n```js\n<div className=\"App\" ref={scrollRef} style={{ overflow: \"auto\" }}>\n <div style={{ whiteSpace: \"nowrap\" }}>\n <Picture />\n </div>\n </div>\n```\n\n```text\nconst element = document.querySelector(\"#container\");\n\nelement.addEventListener('wheel', (event) => {\n event.preventDefault();\n\n element.scrollBy({\n left: event.deltaY < 0 ? -30 : 30,\n \n });\n});\n```\n\n```js\n<div\n style={{ scrollbarColor=\"transparent\", overflowX=\"auto\" }}\n onWheel={(e) => {\n // here im handling the horizontal scroll inline, without the use of hooks\n const strength = Math.abs(e.deltaY);\n if (e.deltaY === 0) return;\n\n const el = e.currentTarget;\n if (\n !(el.scrollLeft === 0 && e.deltaY < 0) &&\n !(\n el.scrollWidth -\n el.clientWidth -\n Math.round(el.scrollLeft) ===\n 0 && e.deltaY > 0\n )\n ) {\n e.preventDefault();\n }\n el.scrollTo({\n left: el.scrollLeft + e.deltaY,\n // large scrolls with smooth animation behavior will lag, so switch to auto\n behavior: strength > 70 ? \"auto\" : \"smooth\",\n });\n }}\n>\n// ...\n</div>\n```\n\n```text\nexport function useHorizontalScroll<T extends HTMLElement>() {\n const elRef = useRef<T>(null);\n useEffect(() => {\n const el = elRef.current;\n if (el) {\n const onWheel = (e: WheelEvent) => {\n if (e.deltaY == 0) return;\n e.preventDefault();\n el.scrollTo({\n left: el.scrollLeft + e.deltaY,\n behavior: 'smooth',\n });\n };\n el.addEventListener('wheel', onWheel);\n return () => el.removeEventListener('wheel', onWheel);\n }\n }, []);\n return elRef;\n}\n```\n\n========================================\n\nComments:\n- For some reason your solution seems to perform better, the one proposed by hd3adcode is kinda glitchy, seems to run slower, any idea why?\n- @yoyo i think it's because the former uses \"deltaY\" as the offset for how much to scroll which can be smaller relative to the offset used in the latter which is 30/-30. instead i think you can set it to a much higher value like say 100 but you just have to test for the direction of the scroll. so if deltaY is negative, you want to use a negative offset for example -100 and vice versa if positive.","metadata":{"transformedAt":"2026-08-18T18:33:42.915Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":158,"estimatedTokens":998}}390{"id":"stack-72915260","source":"stackoverflow","questionId":72915260,"title":"BABEL Cannot find module 'node:path' error react-native","tags":["javascript","android","react-native","babeljs","tailwind-css"],"text":"Title: BABEL Cannot find module 'node:path' error react-native\nTags: javascript, android, react-native, babeljs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to setup tailwindcss-react-native package into my react native project. After successful installation when I add classnames to a component it gives me an error. I've tried uninstalling and then re-installing it, removing the npm cache and node_modules folder but I can't figure out what is wrong. I'm attaching the error log and also codes of my project. Please point out what I'm missing here. Thank you\n\nhttps://i.sstatic.net/WPcMr.png\n\nMy babel.config.js file:\n\n```\nmodule.exports = function(api) {\n api.cache(true);\n return {\n presets: ['babel-preset-expo'],\n plugins: [\"tailwindcss-react-native/babel\"],\n };\n};\n```\n\nMy tailwind.config.js file:\n\n```\nmodule.exports = {\n content: [\n \"./screens/**/*.{js,ts,jsx,tsx}\",\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nMy App.js file:\n\n```\nimport { TailwindProvider } from 'tailwindcss-react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport HomeScreen from './screens/HomeScreen';\n\nconst Stack = createNativeStackNavigator();\n\nexport default function App() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n```\n\nMy HomeScreen.js screen:\n\n```\nimport { View, Text } from 'react-native'\nimport React from 'react'\n\nexport default function HomeScreen() {\n return (\n \n HomeScreen\n \n )\n}\n```\n\nMy dependencies & dev dependencies:\n\n```\n\"dependencies\": {\n \"@react-navigation/native\": \"^6.0.11\",\n \"@react-navigation/native-stack\": \"^6.7.0\",\n \"expo\": \"~45.0.0\",\n \"expo-status-bar\": \"~1.3.0\",\n \"react\": \"17.0.2\",\n \"react-dom\": \"17.0.2\",\n \"react-native\": \"0.68.2\",\n \"react-native-safe-area-context\": \"4.2.4\",\n \"react-native-screens\": \"~3.11.1\",\n \"react-native-web\": \"0.17.7\",\n \"tailwindcss-react-native\": \"^1.7.10\"\n },\n \"devDependencies\": {\n \"@babel/cli\": \"^7.18.6\",\n \"@babel/core\": \"^7.18.6\",\n \"@babel/node\": \"^7.18.6\",\n \"tailwindcss\": \"^3.1.4\"\n },\n```\n\n========================================\n\nTop Answer:\nFor everyone who is getting this error, the solution is to update `Node` at least on `14.18.0`.\n\nThe `tailwindcss-react-native` package is trying to access the `node:path` variable that is available from version 14.18.0`\n\n========================================\n\nCode:\n```text\nmodule.exports = function(api) {\n api.cache(true);\n return {\n presets: ['babel-preset-expo'],\n plugins: [\"tailwindcss-react-native/babel\"],\n };\n};\n```\n\n```text\nmodule.exports = {\n content: [\n \"./screens/**/*.{js,ts,jsx,tsx}\",\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nimport { TailwindProvider } from 'tailwindcss-react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport HomeScreen from './screens/HomeScreen';\n\nconst Stack = createNativeStackNavigator();\n\nexport default function App() {\n return (\n <NavigationContainer>\n <TailwindProvider>\n <Stack.Navigator>\n <Stack.Screen name=\"Home\" component={HomeScreen} />\n </Stack.Navigator>\n </TailwindProvider>\n </NavigationContainer>\n \n );\n}\n```\n\n```text\nimport { View, Text } from 'react-native'\nimport React from 'react'\n\nexport default function HomeScreen() {\n return (\n <View>\n <Text className=\"text-red-500\">HomeScreen</Text>\n </View>\n )\n}\n```\n\n```text\n\"dependencies\": {\n \"@react-navigation/native\": \"^6.0.11\",\n \"@react-navigation/native-stack\": \"^6.7.0\",\n \"expo\": \"~45.0.0\",\n \"expo-status-bar\": \"~1.3.0\",\n \"react\": \"17.0.2\",\n \"react-dom\": \"17.0.2\",\n \"react-native\": \"0.68.2\",\n \"react-native-safe-area-context\": \"4.2.4\",\n \"react-native-screens\": \"~3.11.1\",\n \"react-native-web\": \"0.17.7\",\n \"tailwindcss-react-native\": \"^1.7.10\"\n },\n \"devDependencies\": {\n \"@babel/cli\": \"^7.18.6\",\n \"@babel/core\": \"^7.18.6\",\n \"@babel/node\": \"^7.18.6\",\n \"tailwindcss\": \"^3.1.4\"\n },\n```\n\n```text\nNode\n```\n\n```text\n14.18.0\n```\n\n```text\ntailwindcss-react-native\n```\n\n```text\nnode:path\n```\n\n```text\nnpm install nativewind\nnpm install --save-dev tailwindcss\n```\n\n```text\nnpm install @types/node\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.915Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":215,"estimatedTokens":1103}}391{"id":"stack-70552422","source":"stackoverflow","questionId":70552422,"title":"How to stop TailwindCSS animation after a set time","tags":["html","css","css-animations","tailwind-css"],"text":"Title: How to stop TailwindCSS animation after a set time\nTags: html, css, css-animations, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI was wondering if there is a way to stop an animation in TailwindCSS after a set time, for example, stop the bouncing after 10 seconds. I've tried everything, but I can't find a way.\n\nI've tried using `duration-75`, but the animation won't stop.\n\n```\n\n \n How can the bounce animation be stopped after X repetitions under Xs?\n \n\n```\n\n========================================\n\nTop Answer:\nI was trying to build a short bounce animation, which bounces a small error message on screen when a user fails to log in. This message only needs to bounce a few seconds to get the user's attention, without annoying the user. As you can see from the link in @Matt's answer, tailwind uses the following css code for the bounce class:\n\n```\nanimation: bounce 1s infinite;\n```\n\nWhere `bounce` refers to the `@keyframes` configuration, `1s` refers to the duration of a single iteration and `infinite` refers to the total number of iterations, going on forever in this case. This means we somehow have to adjust that last part.\n\nThe neat thing about tailwind is that you can extend the configuration in `tailwind.config.js` and make your own classes. Here, I am borrowing the keyframes from the existing bounce class to make my own shorter version out of it:\n\n```\n// tailwind.config.js\n \n module.exports = {\n theme: {\n extend: {\n animation: {\n // Bounces 5 times 1s equals 5 seconds\n 'bounce-short': 'bounce 1s ease-in-out 5'\n }\n }\n }\n }\n```\n\nEasy as that, without polluting other files with custom css code. If needed you can even extend the configuration with custom keyframes, meaning that you have total control of the intermediate steps of the animation. The official documentation demonstrates how to achieve this.\n\n========================================\n\nCode:\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"text-center p-10\">\n <button class=\"px-8 py-2 mx-auto bg-green-300 animate-bounce duration-75\">\n How can the bounce animation be stopped after X repetitions under Xs?\n </button>\n</div>\n```\n\n```text\nduration-75\n```\n\n```text\n.temporary-bounce {\n -webkit-animation-iteration-count: 10;\n animation-iteration-count: 10;\n}\n```\n\n```text\nanimation: bounce 1s infinite;\n```\n\n```text\n// tailwind.config.js\n \n module.exports = {\n theme: {\n extend: {\n animation: {\n // Bounces 5 times 1s equals 5 seconds\n 'bounce-short': 'bounce 1s ease-in-out 5'\n }\n }\n }\n }\n```\n\n```text\nbounce\n```\n\n```text\n@keyframes\n```\n\n```text\n1s\n```\n\n```text\ninfinite\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n[animation-iteration-count:10]\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n /* Defines a bounce-short animation that repeats 5 times in 1 second\n original bounce animation with an ease-in-out timing function. */\n --animate-bounce-short: bounce 1s ease-in-out 5;\n}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme {\n /* Defines a bounce-short animation that repeats 5 times in 1 second\n original bounce animation with an ease-in-out timing function. */\n --animate-bounce-short: bounce 1s ease-in-out 5;\n}\n</style>\n\n<div class=\"text-center p-10\">\n <button class=\"px-8 py-2 mx-auto bg-green-300 animate-bounce-short\">\n Bounce animation repeated 5 times in 1s.\n </button>\n</div>\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n theme: {\n extend: {\n animation: {\n /* Defines a bounce-short animation that repeats 5 times in 1 second\n original bounce animation with an ease-in-out timing function. */\n 'bounce-short': 'bounce 1s ease-in-out 5'\n }\n }\n }\n}\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\ntailwind.config = {\n theme: {\n extend: {\n animation: {\n /* Defines a bounce-short animation that repeats 5 times in 1 second\n original bounce animation with an ease-in-out timing function. */\n 'bounce-short': 'bounce 1s ease-in-out 5'\n }\n }\n }\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"text-center p-10\">\n <button class=\"px-8 py-2 mx-auto bg-green-300 animate-bounce-short\">\n Bounce animation repeated 5 times in 1s.\n </button>\n</div>\n```\n\n```text\n--animate-*\n```\n\n```text\n@keyframes\n```\n\n```text\n@keyframes\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nanimation\n```\n\n```css\n@utility animate-repeat-* {\n --animate-bounce-count: --value(integer);\n}\n\n@utility animate-repeat-infinite {\n --animate-bounce-count: infinite;\n}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme inline {\n --animate-bounce: bounce 1s var(--animate-repeat-count, infinite);\n}\n\n@utility animate-repeat-* {\n --animate-repeat-count: --value(integer);\n}\n\n@utility animate-repeat-infinite {\n --animate-repeat-count: infinite;\n}\n</style>\n\n<div class=\"flex items-center gap-1 p-10\">\n <button class=\"animate-bounce animate-repeat-2 px-4 py-2 mx-auto bg-green-300\">\n Bounce animation repeated <b>2</b> times in 1s.\n </button>\n <button class=\"animate-bounce animate-repeat-5 px-4 py-2 mx-auto bg-green-300\">\n Bounce animation repeated <b>5</b> times in 1s.\n </button>\n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme inline {\n --animate-spin: spin 1s var(--animate-repeat-count, infinite);\n \n @keyframes spin {\n from {\n transform: rotate(0turn);\n }\n to {\n transform: rotate(1turn);\n }\n }\n}\n\n@utility animate-repeat-* {\n --animate-repeat-count: --value(integer);\n}\n\n@utility animate-repeat-infinite {\n --animate-repeat-count: infinite;\n}\n</style>\n\n<div class=\"flex items-center gap-1 p-10\">\n <button class=\"animate-spin animate-repeat-2 px-4 py-2 mx-auto bg-green-300\">\n Spin animation repeated <b>2</b> times in 1s.\n </button>\n <button class=\"animate-spin animate-repeat-5 px-4 py-2 mx-auto bg-green-300\">\n Spin animation repeated <b>5</b> times in 1s.\n </button>\n</div>\n```\n\n```css\n@utility animate-duration-* {\n --animate-duration: calc(--value(integer) * 1s);\n}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme inline {\n /* default: 1s timing with infinite repeating */\n --animate-spin: spin var(--animate-duration, 1s) var(--animate-repeat-count, infinite);\n \n @keyframes spin {\n from {\n transform: rotate(0turn);\n }\n to {\n transform: rotate(1turn);\n }\n }\n}\n\n/* Utility for Animation Timing */\n@utility animate-duration-* {\n --animate-duration: calc(--value(integer) * 1s);\n}\n\n/* Utility for Repeat Count */\n@utility animate-repeat-* {\n --animate-repeat-count: --value(integer);\n}\n@utility animate-repeat-infinite {\n --animate-repeat-count: infinite;\n}\n</style>\n\n<div class=\"flex items-center gap-1 p-10\">\n <button class=\"animate-spin animate-repeat-2 animate-duration-30 px-4 py-2 mx-auto bg-green-300\">\n Spin animation repeated <b>2</b> times in 30s.\n </button>\n <button class=\"animate-spin animate-repeat-5 animate-duration-10 px-4 py-2 mx-auto bg-green-300\">\n Spin animation repeated <b>5</b> times in 10s.\n </button>\n</div>\n```\n\n```text\nanimate-repeat-*\n```\n\n```text\nanimate-duration-*\n```\n\n```text\nanimate-repeat-*\n```\n\n```text\nanimation-repeat-{number}\n```\n\n```text\n@utility\n```\n\n```text\nanimate-duration-*\n```\n\n```css\n/* Utility for Animation Timing */\n@utility animate-duration-* {\n animation-duration: calc(--value(integer) * 1s);\n}\n\n/* Utility for Repeat Count */\n@utility animate-repeat-* {\n animation-iteration-count: calc(--value(integer) * 1s)\n}\n@utility animate-repeat-infinite {\n animation-iteration-count: infinite;\n}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@theme inline {\n /* default: 1s timing with infinite repeating */\n --animate-spin: spin 1s infinite;\n \n @keyframes spin {\n from {\n transform: rotate(0turn);\n }\n to {\n transform: rotate(1turn);\n }\n }\n}\n\n/* Utility for Animation Timing */\n@utility animate-duration-* {\n animation-duration: calc(--value(integer) * 1s);\n}\n\n/* Utility for Repeat Count */\n@utility animate-repeat-* {\n animation-iteration-count: calc(--value(integer) * 1s)\n}\n@utility animate-repeat-infinite {\n animation-iteration-count: infinite;\n}\n</style>\n\n<div class=\"flex items-center gap-1 p-10\">\n <button class=\"animate-spin animate-repeat-2 animate-duration-30 px-4 py-2 mx-auto bg-green-300\">\n Spin animation repeated <b>2</b> times in 30s.\n </button>\n <button class=\"animate-spin animate-repeat-5 animate-duration-10 px-4 py-2 mx-auto bg-green-300\">\n Spin animation repeated <b>5</b> times in 10s.\n </button>\n</div>\n```\n\n```text\nanimation-iteration-count\n```\n\n```text\nanimation-duration\n```\n\n```text\nanimate-repeat-*\n```\n\n```text\nanimate-duration-*\n```\n\n```text\nanimation-iteration-count\n```\n\n```text\nanimation-duration\n```\n\n========================================\n\nComments:\n- You need to declare a custom animation, as the duration and repetition count can be specified when declaring each animation. In v3, this can be done using the `animation` property, as mentioned by others, but from v4 onwards, you can easily declare it with a single line using the CSS-first configuration (by `@theme` directive with `--animate-*` namespace); see more in reproduction here.\n- Might make more sense to name class \"temporary-animate\" or \"temporary-count\" as it can be applied to other \"animate-\" events\n- Related: Customizing animation repeat count and animation duration with utilities #17659\n- Related: Customizing animation repeat count and animation duration with utilities #17659","metadata":{"transformedAt":"2026-08-18T18:33:42.915Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":40,"totalLines":430,"estimatedTokens":2475}}392{"id":"stack-79241624","source":"stackoverflow","questionId":79241624,"title":"Integrating TailwindCSS v4 alpha with Vite and PostCSS config","tags":["tailwind-css","vite","postcss","tailwind-css-4"],"text":"Title: Integrating TailwindCSS v4 alpha with Vite and PostCSS config\nTags: tailwind-css, vite, postcss, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nSo I've managed to get TailwindCSS v4 alpha working for starters. It uses the `postcss.config.js` file:\n\n```\nexport default {\n plugins: {\n '@tailwindcss/postcss': {},\n }\n};\n```\n\nHowever I read that I should be able to do something like this in my `vite.config.js` (and delete the `postcss.config.js` file):\n\n```\n@@ -1,5 +1,6 @@\n import { defineConfig } from \"vite\";\n import { sveltekit } from \"@sveltejs/kit/vite\";\n+import tailwind from \"tailwindcss\";\n \n // @ts-expect-error process is a nodejs global\n const host = process.env.TAURI_DEV_HOST;\n@@ -29,4 +30,9 @@ export default defineConfig(async () => ({\n ignored: [\"**/src-tauri/**\"],\n },\n },\n+ css: {\n+ postcss: {\n+ plugins: [tailwind],\n+ },\n+ },\n }));\n```\n\nUnfortunately the following error rears it's ugly head:\n\n[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.\n\nMore unfortunately, my `package.json` already includes `@tailwindcss/postcss` as a dev dependency:\n\n```\n{\n \"devDependencies\": {\n \"@sveltejs/adapter-static\": \"^3.0.5\",\n \"@sveltejs/kit\": \"^2.7.0\",\n \"@sveltejs/vite-plugin-svelte\": \"^4.0.0\",\n \"@tailwindcss/postcss\": \"4.0.0-beta.4\",\n \"@tauri-apps/cli\": \"^2\",\n \"svelte\": \"^5.0.0\",\n \"svelte-check\": \"^4.0.0\",\n \"tailwindcss\": \"4.0.0-beta.4\",\n \"tslib\": \"^2.8.0\",\n \"typescript\": \"^5.5.0\",\n \"vite\": \"^5.4.10\"\n }\n}\n```\n\nWhy does this error still appear?\n\n========================================\n\nTop Answer:\nI faced the same issue despite following the migration guide from v3. Reading this answer, I created a `.postcssrc.json` file instead of `postcss.config.[js|mjs]` **and it solved it !**\n\n```\n// .postcssrc.json\n{\n \"plugins\": {\n \"@tailwindcss/postcss\": {}\n }\n}\n```\n\n========================================\n\nCode:\n```js\nexport default {\n plugins: {\n '@tailwindcss/postcss': {},\n }\n};\n```\n\n```js\n@@ -1,5 +1,6 @@\n import { defineConfig } from \"vite\";\n import { sveltekit } from \"@sveltejs/kit/vite\";\n+import tailwind from \"tailwindcss\";\n \n // @ts-expect-error process is a nodejs global\n const host = process.env.TAURI_DEV_HOST;\n@@ -29,4 +30,9 @@ export default defineConfig(async () => ({\n ignored: [\"**/src-tauri/**\"],\n },\n },\n+ css: {\n+ postcss: {\n+ plugins: [tailwind],\n+ },\n+ },\n }));\n```\n\n```json\n{\n \"devDependencies\": {\n \"@sveltejs/adapter-static\": \"^3.0.5\",\n \"@sveltejs/kit\": \"^2.7.0\",\n \"@sveltejs/vite-plugin-svelte\": \"^4.0.0\",\n \"@tailwindcss/postcss\": \"4.0.0-beta.4\",\n \"@tauri-apps/cli\": \"^2\",\n \"svelte\": \"^5.0.0\",\n \"svelte-check\": \"^4.0.0\",\n \"tailwindcss\": \"4.0.0-beta.4\",\n \"tslib\": \"^2.8.0\",\n \"typescript\": \"^5.5.0\",\n \"vite\": \"^5.4.10\"\n }\n}\n```\n\n```text\npostcss.config.js\n```\n\n```text\nvite.config.js\n```\n\n```text\npostcss.config.js\n```\n\n```text\ntailwindcss\n```\n\n```text\n@tailwindcss/postcss\n```\n\n```text\npackage.json\n```\n\n```text\n@tailwindcss/postcss\n```\n\n```bash\n$ npm install tailwindcss@next @tailwindcss/vite@next\n```\n\n```ts\nimport { defineConfig } from 'vite';\nimport tailwindcss from '@tailwindcss/vite';\n\nexport default defineConfig({\n plugins: [\n tailwindcss()\n ],\n});\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```text\nvite.config.ts\n```\n\n```text\n@tailwindcss/postcss\n```\n\n```text\n@tailwindcss/vite@next\n```\n\n```text\nimport\n```\n\n```text\n@tailwindcss/vite\n```\n\n```text\nplugins\n```\n\n```text\n@import \"tailwindcss\"\n```\n\n```text\nnpm uninstall autoprefixer postcss tailwindcss\nnpm install tailwindcss@^3.4.17 postcss@^8.5.0 autoprefixer@^10.4.20\n```\n\n```text\n// .postcssrc.json\n{\n \"plugins\": {\n \"@tailwindcss/postcss\": {}\n }\n}\n```\n\n```text\n.postcssrc.json\n```\n\n```text\npostcss.config.[js|mjs]\n```\n\n========================================\n\nComments:\n- Related from January 2025 (when released stable v4): How to upgrade TailwindCSS? and Cannot build frontend using Vite, TailwindCSS with PostCSS and Open-sourcing our progress on Tailwind CSS v4.0 - Whats changed\n- Actually, removing autoprefixer and PostCSS is pointless since you end up reinstalling them anyway, just in a version-specific manner. The key point is that `npm install tailwindcss` installs v4, but you installed v3 using `npm install tailwindcss@3`.\n- However, the question already starts in the title by stating that they are looking for a solution for v4-alpha. But since then, the stable v4 version has also been released, see: Problem installing TailwindCSS with Vite; How to upgrade TailwindCSS?; Cannot build frontend using Vite\n- Don’t add code only answers. Explain what your code does, why it works, and how it helps to so,ve the problem\n- This one works for me. I am using astro with tailwind.","metadata":{"transformedAt":"2026-08-18T18:33:42.915Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":24,"totalLines":231,"estimatedTokens":1230}}393{"id":"stack-70575038","source":"stackoverflow","questionId":70575038,"title":"Custom font is not working in TailwindCSS & ReactJS project","tags":["reactjs","typescript","fonts","next.js","tailwind-css"],"text":"Title: Custom font is not working in TailwindCSS & ReactJS project\nTags: reactjs, typescript, fonts, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using custom font in my React/TypeScript/TailWind/NextJS projects.\nI stored font in my `/fonts` folder as `Glimer-Regular.ttf`.\n\nThen in my `global.css` I declared as below.\n\n```\n@layer base {\n\n @font-face {\n font-family: '\"Glimer\"';\n src: url(../../fonts/Glimer-Regular.ttf) format('ttf');\n }\n}\n```\n\nIn my `tailwind.config.js` file, I added font family as below.\n\n```\nmodule.exports = {\n mode: 'jit',\n important: true,\n\n purge: ['./src/pages/**/*.{js,ts,jsx,tsx}'],\n darkMode: false,\n content: [],\n theme: {\n extend: {\n fontFamily: {\n glimer: ['\"Glimer\"']\n },\n```\n\nThis should work but the font is still default and showing `serif-400`. I still can see `Glimer` in family section but the font seems like not changed.\nIs there anything I am missing?\nhttps://i.sstatic.net/OccHR.png\n\n========================================\n\nCode:\n```text\n@layer base {\n\n @font-face {\n font-family: '\"Glimer\"';\n src: url(../../fonts/Glimer-Regular.ttf) format('ttf');\n }\n}\n```\n\n```text\nmodule.exports = {\n mode: 'jit',\n important: true,\n\n purge: ['./src/pages/**/*.{js,ts,jsx,tsx}'],\n darkMode: false,\n content: [],\n theme: {\n extend: {\n fontFamily: {\n glimer: ['\"Glimer\"']\n },\n```\n\n```text\n/fonts\n```\n\n```text\nGlimer-Regular.ttf\n```\n\n```text\nglobal.css\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nserif-400\n```\n\n```text\nGlimer\n```\n\n```text\nfunction ExamplePage() {\n return (\n <div className=\"flex flex-col items-center justify-center h-screen gap-3\">\n <h3 className=\"text-3xl font-custom1 text-blue-600\">\n Sic Parvis Magna..\n </h3>\n <h3 className=\"text-3xl font-custom1 text-red-600\">\n Per aspera ad astra..\n </h3>\n <h3 className=\"text-2xl font-custom2\">\n In vino veritas, in aqua sanitas..\n </h3>\n </div>\n );\n}\n\nexport default ExamplePage;\n```\n\n```text\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n fontFamily: {\n custom1: [\"Custom-1\", \"sans-serif\"],\n custom2: [\"Custom-2\", \"sans-serif\"],\n },\n\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@font-face {\n font-family: \"Custom-1\";\n src: url(\"/font/NewTegomin-Regular.ttf\");\n}\n\n@font-face {\n font-family: \"Custom-2\";\n src: url(\"/font/Nosifer-Regular.ttf\");\n}\n```\n\n```text\nfonts\n```\n\n```text\nfont\n```\n\n========================================\n\nComments:\n- You have double quotes around font family name. Any possibility this is the problem? `font-family: '\"Glimer\"';`\n- So basically there are two methods; 1) Global 2) Use as needed? I wish the folks at `TailwindCSS` would make this clearer in their documentation. Thanks @MarioG8.\n- And if you want to apply the font family to whole body you can use on your index.css or global.css like this : body{ @apply font-FONT_NAME; }","metadata":{"transformedAt":"2026-08-18T18:33:42.915Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":161,"estimatedTokens":770}}394{"id":"stack-70940428","source":"stackoverflow","questionId":70940428,"title":"Tailwindcss Intellisense not working in VS Code","tags":["visual-studio-code","tailwind-css","vscode-tasks","tailwind-css-3"],"text":"Title: Tailwindcss Intellisense not working in VS Code\nTags: visual-studio-code, tailwind-css, vscode-tasks, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI have checked out many answers from Stack Overflow but I wasn't able to fix the issue that IntelliSense not working for Tailwind CSS. But VS Code's IntelliSense working for other things like python and JavaScript. Please anybody help me why this isn't working. I am using Tailwind CSS CLI. even CSS file IntelliSense also not working.\n\nmy config file is. `tailwind.config.js`\n\n```\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nI also added this setting into `.vscode/settings.json`\n\n```\n{\n\"css.validate\": false,\n\"liveServer.settings.port\": 5501,\n\"tailwindCSS.emmetCompletions\": true,\n\"tailwindCSS.includeLanguages\": {\n \"plaintext\": \"html\",\n \"javascript\":\"javascript\" \n},\n\"editor.quickSuggestions\": {\n \"other\": true,\n \"comments\": true,\n \"strings\": true\n},\n\"tailwindCSS.classAttributes\": [\n \"class\",\n \"className\",\n \"ngClass\"\n]}\n```\n\nonce a thing. CSS compiled successfully but IntelliSense not working. and this is my project folder structure.\n\nhttps://i.sstatic.net/C3K6B.png\n\n========================================\n\nTop Answer:\nI found that intellisense for the extension will not work with single quotes. I had my ESLint config set to `\"jsx-quotes\": [\"warn\", \"prefer-single\"]`. If I use double quotes in my `classNames`, the intellisense works fine.\n\nThe solution for me was to update my `settings.json` to include `\"editor.quickSuggestions\": { \"strings\": true }`\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n{\n\"css.validate\": false,\n\"liveServer.settings.port\": 5501,\n\"tailwindCSS.emmetCompletions\": true,\n\"tailwindCSS.includeLanguages\": {\n \"plaintext\": \"html\",\n \"javascript\":\"javascript\" \n},\n\"editor.quickSuggestions\": {\n \"other\": true,\n \"comments\": true,\n \"strings\": true\n},\n\"tailwindCSS.classAttributes\": [\n \"class\",\n \"className\",\n \"ngClass\"\n]}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n.vscode/settings.json\n```\n\n```json\n\"editor.quickSuggestions\": {\n \"strings\": true\n},\n\"css.validate\": false,\n\"editor.inlineSuggest.enabled\": true\n```\n\n```text\n\"jsx-quotes\": [\"warn\", \"prefer-single\"]\n```\n\n```text\nclassNames\n```\n\n```text\nsettings.json\n```\n\n```text\n\"editor.quickSuggestions\": { \"strings\": true }\n```\n\n```text\nD:\\[1] git\n```\n\n```text\nD:\\git\n```\n\n```text\n[1]\n```\n\n```text\nTailwind CSS IntelliSense\n```\n\n```text\n// just to get tailwindcss IntelliSense in all files\nmodule.exports = {};\n```\n\n========================================\n\nComments:\n- Try restarting VS Code, and if it doesn't work then remove and re-install the Tailwind CSS VS Code extension. At least that worked for me.\n- yeah... sure.. but I checked those things before posting this question... thank you soo much\n- yeah... I have installed this extension...\n- also not working IntelliSense for any library like react...\n- Does IntelliSense work for anything at all?\n- yes.. intellisense work for other things such as for python, for javascript, for CSS property name. but not working for Tailwindcss..\n- Does this answer your question? My TailWind CSS Intellisense plugin just isn't working on my VSCode\n- nope this isn't the answer i already set this one long time ago\n- Where is settings?\n- So I can learn from this. What about this output helped you come to that conclusion?\n- @SeanMC Before checking the output, I was not sure if something went wrong with the extension, the VSCode, or something else, it just didn't work. Once I checked the output, I saw the part \"Failed to load workspace moduels\", and then knew that there was something wrong with the extension. I then updated to the latest version of both VSCode and the extension, and that cleared the issue.\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.915Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":155,"estimatedTokens":1037}}395{"id":"stack-79416157","source":"stackoverflow","questionId":79416157,"title":"How to enable Tailwind CSS v4.0 for the packages/ui components in Turborepo?","tags":["next.js","tailwind-css","monorepo","turborepo"],"text":"Title: How to enable Tailwind CSS v4.0 for the packages/ui components in Turborepo?\nTags: next.js, tailwind-css, monorepo, turborepo\nSource: Stack Overflow\n\nQuestion:\nI am using Turborepo for the monorepo setup. I'm using the npm workspaces option to be specific. I want to use Tailwind CSS v4.0 for this project. I followed the steps as they said in the Tailwind CSS Next.js documentation, and it works. But the UI components that I export from the packages/ui directory are not able to use the Tailwind classes for some reason.\n\nThis is the repo url: https://github.com/HarshalGunjalOp/payment-wallet\n\nI created a component called appbar.tsx in the packages/ui directory:\n\n```\n// ./packages/ui/appbar.tsx\nimport { Button } from \"./button\";\n\ninterface AppbarProps {\n user?: {\n name?: string | null;\n },\n // TODO: can u figure out what the type should be here?\n onSignin: any,\n onSignout: any\n}\n\nexport const Appbar = ({\n user,\n onSignin,\n onSignout\n}: AppbarProps) => {\n return \n \n PayTM\n \n \n {user ? \"Logout\" : \"Login\"}\n \n \n}\n```\n\nAnd I'm importing it in my apps/user-app/app/page.tsx:\n\n```\n\"use client\"\nimport { signIn, signOut, useSession } from \"next-auth/react\";\nimport { Appbar } from \"@repo/ui/appbar\";\n\nexport default function Page() {\n const session = useSession();\n return (\n \n \n \n );\n}\n```\n\nThis is the output image:\n\nhttps://i.sstatic.net/Fy478r8V.png\n\nAs you can see in the image, the Tailwind CSS styles have not been applied. Tailwind CSS is working in the user-app, but when I import something from the packages/ui folder, the component I imported doesn't seem to be styled using Tailwind.\n\n========================================\n\nTop Answer:\nAdding on to Wongjn's answer, if you want the CLI to also work, your `components.json` will also need to be updated.\n\nI have a turborepo template where there is a shared `tailwind-config` package, a react `web` app and a `ui` component. The changes I needed to make were:\n\n```\napps\n ├─ web\n | ├─ src\n | | └─ style.css # change\npackages\n ├─ ui\n | └─ components.json # change\ntools\n ├─ tailwind\n | ├─ style.css\n | └─ package.json # change\n```\n\n### web/app/src/style.css\n\n```\n@import 'tailwindcss';\n\n/* Added this line */\n@import '@repo/tailwind-config/style.css';\n```\n\n### packages/ui/components.json\n\nThis is only needed to use the CLI - if you are only copying/pasting code, there's no need to make any modification here.\n\n```\n{\n \"tailwind\": {\n // Remove old reference to tailwind.config.ts\n \"config\": \"\",\n \"css\": \"../../tools/tailwind/style.css\"\n },\n}\n```\n\nAt the time of writing, you also need to use the canary version of Shadcn's CLI, e.g.\n\n```\nnpx shadcn@latest add button\n```\n\n### tools/tailwind/package.json\n\nExporting the tools/tailwind/style.css shared config:\n\n```\n\"exports\": {\n \"./style.css\": \"./style.css\"\n },\n```\n\nThe full code is available at my repository below:\n\n- https://github.com/nktnet1/rt-stack\n\nHope this was helpful!\n\n========================================\n\nCode:\n```js\n// ./packages/ui/appbar.tsx\nimport { Button } from \"./button\";\n\ninterface AppbarProps {\n user?: {\n name?: string | null;\n },\n // TODO: can u figure out what the type should be here?\n onSignin: any,\n onSignout: any\n}\n\nexport const Appbar = ({\n user,\n onSignin,\n onSignout\n}: AppbarProps) => {\n return <div className=\"flex justify-between border-b px-4\">\n <div className=\"text-lg flex flex-col justify-center\">\n PayTM\n </div>\n <div className=\"flex flex-col justify-center pt-2\">\n <Button onClick={user ? onSignout : onSignin}>{user ? \"Logout\" : \"Login\"}</Button>\n </div>\n </div>\n}\n```\n\n```js\n\"use client\"\nimport { signIn, signOut, useSession } from \"next-auth/react\";\nimport { Appbar } from \"@repo/ui/appbar\";\n\nexport default function Page() {\n const session = useSession();\n return (\n <div>\n <Appbar onSignin={signIn} onSignout={signOut} user={session.data?.user} />\n </div>\n );\n}\n```\n\n```css\n@source \"../../../node_modules/@repo/ui\";\n```\n\n```css\n/* packages/ui/styles.css */\n@source \"./\";\n```\n\n```json\n/* packages/ui/package.json */\n\"exports\": {\n …\n \"./styles.css\": \"./styles.css\"\n}\n```\n\n```css\n/* apps/user-app/app/globals.css */\n@import \"tailwindcss\";\n@import \"@repo/ui/styles.css\";\n```\n\n```text\n@source\n```\n\n```text\napps/user-app/app/globals.css\n```\n\n```text\n@import\n```\n\n```text\n@source\n```\n\n```text\napps\n ├─ web\n | ├─ src\n | | └─ style.css # change\npackages\n ├─ ui\n | └─ components.json # change\ntools\n ├─ tailwind\n | ├─ style.css\n | └─ package.json # change\n```\n\n```css\n@import 'tailwindcss';\n\n/* Added this line */\n@import '@repo/tailwind-config/style.css';\n```\n\n```json\n{\n \"tailwind\": {\n // Remove old reference to tailwind.config.ts\n \"config\": \"\",\n \"css\": \"../../tools/tailwind/style.css\"\n },\n}\n```\n\n```bash\nnpx shadcn@latest add button\n```\n\n```json\n\"exports\": {\n \"./style.css\": \"./style.css\"\n },\n```\n\n```text\ncomponents.json\n```\n\n```text\ntailwind-config\n```\n\n```text\nweb\n```\n\n```text\nui\n```\n\n========================================\n\nComments:\n- plus, set your configFile in your vscode settings.json like {. \"tailwindCSS.experimental.configFile\": \"packages/shared-frontend/theme/global.css\"} , cos v4 intellisense scan the entry css and enable the input prompt\n- github.com/linkb15/turborepo-shadcn-ui-tailwind-4 Created a shadcn + tailwindv4 + turborepo template, this using this technique as well.\n- it works, but what about hot reload? styles are applied only after page reload\n- Might any god bless you and your soul\n- Worth checking the git issue: github.com/tailwindlabs/tailwindcss/issues/13136\n- That one liner @source \"./\"; is so gold omg TYSM\n- They really saved me!! The dev community is awesome, not the IAS community.","metadata":{"transformedAt":"2026-08-18T18:33:42.915Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":282,"estimatedTokens":1440}}396{"id":"stack-71506663","source":"stackoverflow","questionId":71506663,"title":"How to animate text gradient color change in Tailwind?","tags":["css","tailwind-css"],"text":"Title: How to animate text gradient color change in Tailwind?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a div with text inside that has a gradient color scheme.\n\n```\n\n SampleText\n\n```\n\nI want to animate it so that the gradient keeps smoothly changing between `from-indigo-500 to-purple-500` and `from-purple-500 to-indigo-500` infinitely with a set duration.\n\n========================================\n\nTop Answer:\nIf you are looking for an alternative to the config approach, I use CSS to extend the \"tailwindcss/components\" import in your global styles.\n\nIn your global.css add the following.\nCheckout the following link for more info on working with preprocessors - https://tailwindcss.com/docs/using-with-preprocessors\n\n```\n@import \"tailwindcss/components\";\n@import \"./custom-components.css\"; Inside custom-components.css add the following.\n\n```\n.background-animate {\n background-size: 200%;\n -webkit-animation: AnimateBackgroud 10s ease infinite;\n -moz-animation: AnimateBackgroud 10s ease infinite;\n animation: AnimateBackgroud 10s ease infinite;\n}\n\n@keyframes AnimateBackgroud {\n 0% {\n background-position: 0;\n }\n\n 50% {\n background-position: 100%;\n }\n\n 100% {\n background-position: 0;\n }\n}\n```\n\nHow to use;\n\n```\n\n A very important title!\n\n```\n\n\r\n\r\n\n```\n.background-animate {\n background-size: 200%;\n -webkit-animation: AnimateBackgroud 10s ease infinite;\n -moz-animation: AnimateBackgroud 10s ease infinite;\n animation: AnimateBackgroud 10s ease infinite;\n}\n\n@keyframes AnimateBackgroud {\n 0% {\n background-position: 0;\n }\n 50% {\n background-position: 100%;\n }\n 100% {\n background-position: 0;\n }\n}\n```\n\n\r\n\n```\n\n \n \n \n\n \n \n \n A very important title!\n \n \n\n```\n\n========================================\n\nCode:\n```text\n<div\n className=\"bg-gradient-to-r bg-clip-text text-transparent from-indigo-500 to-purple-500\"\n >\n SampleText\n</div>\n```\n\n```text\nfrom-indigo-500 to-purple-500\n```\n\n```text\nfrom-purple-500 to-indigo-500\n```\n\n```text\nextend: {\n 'animation': {\n 'text':'text 5s ease infinite',\n },\n 'keyframes': {\n 'text': {\n '0%, 100%': {\n 'background-size':'200% 200%',\n 'background-position': 'left center'\n },\n '50%': {\n 'background-size':'200% 200%',\n 'background-position': 'right center'\n }\n },\n }\n },\n```\n\n```text\n<div class=\"text-9xl font-semibold \n bg-gradient-to-r bg-clip-text text-transparent \n from-indigo-500 via-purple-500 to-indigo-500\n animate-text\n \">\n SampleText\n</div>\n```\n\n```text\n@import \"tailwindcss/components\";\n@import \"./custom-components.css\"; <--\n```\n\n```text\n.background-animate {\n background-size: 200%;\n -webkit-animation: AnimateBackgroud 10s ease infinite;\n -moz-animation: AnimateBackgroud 10s ease infinite;\n animation: AnimateBackgroud 10s ease infinite;\n}\n\n@keyframes AnimateBackgroud {\n 0% {\n background-position: 0;\n }\n\n 50% {\n background-position: 100%;\n }\n\n 100% {\n background-position: 0;\n }\n}\n```\n\n```text\n<h1 className=\"background-animate bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text flex justify-center items-center content-center w-full text-transparent text-5xl select-none\">\n A very important title!\n</h1>\n```\n\n```css\n.background-animate {\n background-size: 200%;\n -webkit-animation: AnimateBackgroud 10s ease infinite;\n -moz-animation: AnimateBackgroud 10s ease infinite;\n animation: AnimateBackgroud 10s ease infinite;\n}\n\n@keyframes AnimateBackgroud {\n 0% {\n background-position: 0;\n }\n 50% {\n background-position: 100%;\n }\n 100% {\n background-position: 0;\n }\n}\n```\n\n```html\n<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n\n<body>\n <div class=\"min-h-full flex items-center justify-center p-12\">\n <div class=\"max-w-md w-full\">\n <h1 class=\"background-animate bg-gradient-to-r from-indigo-500 via-green-500 to-pink-500 bg-clip-text flex justify-center items-center content-center w-full text-transparent text-5xl select-none py-10\">\n A very important title!\n </h1>\n </div>\n</body>\n\n</html>\n```\n\n========================================\n\nComments:\n- This does animate a color change, however there no longer is a gradient on the text.\n- oh sorry, I didn't totally get it, my bad. I will update my answer have a look now.\n- change `via-purple-500` to `via-green-500` so you could see the animation clearly\n- @mismaah I'm glad I could help.","metadata":{"transformedAt":"2026-08-18T18:33:42.915Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":232,"estimatedTokens":1178}}397{"id":"stack-69662576","source":"stackoverflow","questionId":69662576,"title":"'tailwindcss' is not recognized as an internal or external command","tags":["reactjs","tailwind-css","postcss","autoprefixer"],"text":"Title: 'tailwindcss' is not recognized as an internal or external command\nTags: reactjs, tailwind-css, postcss, autoprefixer\nSource: Stack Overflow\n\nQuestion:\nI have already pre installed tailwind css for my react library and added a script called build-css but run it, **npm run build-css** it gives me following error :\n**'tailwindcss' is not recognized as an internal or external command**\n\n**package.json** file\n\n```\n{\n \"name\": \"react-firebase-authentication\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^5.11.9\",\n \"@testing-library/react\": \"^11.2.3\",\n \"@testing-library/user-event\": \"^12.6.0\",\n \"autoprefixer\": \"^9.8.8\",\n \"postcss\": \"^7.0.39\",\n \"react\": \"^17.0.1\",\n \"react-dom\": \"^17.0.1\",\n \"react-icons\": \"^4.3.1\",\n \"react-router-dom\": \"^5.2.0\",\n \"react-scripts\": \"4.0.1\",\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.2.17\",\n \"web-vitals\": \"^0.2.4\"\n },\n \"scripts\": {\n \"build-css\": \"tailwindcss build src/styles.css -o public/styles.css\",\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n```\n\n**CMD** Error\nhttps://i.sstatic.net/397Mi.png\n\n========================================\n\nTop Answer:\nTry this command first\n\n```\nnpm install -D tailwindcss@3\n```\n\nand then\n\n```\nnpx tailwindcss init -p\n```\n\n========================================\n\nCode:\n```text\n{\n \"name\": \"react-firebase-authentication\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^5.11.9\",\n \"@testing-library/react\": \"^11.2.3\",\n \"@testing-library/user-event\": \"^12.6.0\",\n \"autoprefixer\": \"^9.8.8\",\n \"postcss\": \"^7.0.39\",\n \"react\": \"^17.0.1\",\n \"react-dom\": \"^17.0.1\",\n \"react-icons\": \"^4.3.1\",\n \"react-router-dom\": \"^5.2.0\",\n \"react-scripts\": \"4.0.1\",\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.2.17\",\n \"web-vitals\": \"^0.2.4\"\n },\n \"scripts\": {\n \"build-css\": \"tailwindcss build src/styles.css -o public/styles.css\",\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n```\n\n```text\nnpm install -D postcss postcss-cli\n```\n\n```text\npostcss-cli\n```\n\n```text\nnpx tailwindcss\n```\n\n```text\n@tailwindcss/cli\n```\n\n```text\nnpx @tailwindcss/cli\n```\n\n```text\nnpm install -D tailwindcss@3\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n```text\nnpm install -D tailwindcss@3\n```\n\n```text\nnpx tailwindcss init\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\"./src/**/*.{js,jsx,ts,tsx}\"], // Add this line\n theme: { extend: {} },\n plugins: [],\n};\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nnpm start\n```\n\n========================================\n\nComments:\n- This question is similar to: Problem installing TailwindCSS with Vite, after \"npx tailwindcss init -p\" command. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.\n- Although I know this is an older question, newcomers will now install TailwindCSS v4 with npm install tailwindcss, and this will increasingly become the main cause of the issue. I think it's worth noting this somewhere. Since January 2025, npm install tailwindcss installs the new v4, where the CLI and PostCSS packages have been separated, and a new Vite plugin has been introduced. One solution is to use v3 with `npm install tailwindcss@3`.\n- Another option is to review the v4 migration guide, which comes with many breaking changes: Problem installing TailwindCSS with Vite, after \"npx tailwindcss init -p\" command and How to upgrade TailwindCSS to v4 or find a answer by tailwind-css-4 tag\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- Although the answer tries to help, it doesn't explain anything. The issue has been caused by the release of TailwindCSS v4 since January 2025, where the CLI command was removed and moved to a separate package (see here: Separated packages for CLI); the init process was also removed (see here: Problem with npx tailwindcss).\n- I believe installing v3 is only a temporary solution, and it would be better to check the v4 migration guide here: How to upgrade TailwindCSS to v4?","metadata":{"transformedAt":"2026-08-18T18:33:42.916Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":189,"estimatedTokens":1272}}398{"id":"stack-64233478","source":"stackoverflow","questionId":64233478,"title":"Tailwind center an absolute element","tags":["css-position","centering","absolute","tailwind-css"],"text":"Title: Tailwind center an absolute element\nTags: css-position, centering, absolute, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to create a little login pop-up card at the middle of the page when the client presses the login button. I managed to create the card itself, a gave it `.absolute z-10` to be at the top of the other contents. I also wrapped it inside a container div with `.relative` to be able to position the card. My problem is I can't position it to the middle. If I add for example `.right-0` it works, but I want to position it in the middle and I couldn't find anything in the documentation about that... Also, how can I add more height to my card that 64?\n\nMy code:\n\n**index.html**\n\n```\n\n \n \n \n Jófogás\n \n \n \n \n \n \n \n \n \n \n \n Belépés\n \n \n \n \n \n \n \n \n \n \n \n \n Hirdess vagy vásárolj a Jófogáson!\n \n \n \n **\n \n \n \n \n Hirdetésfeladás\n \n \n \n\n```\n\n========================================\n\nTop Answer:\nTry this:\n\n```\n\n ...\n\n```\n\n========================================\n\nCode:\n```text\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Jófogás</title>\n <link\n href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\"\n rel=\"stylesheet\"\n />\n <link\n rel=\"stylesheet\"\n href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\"\n />\n </head>\n <body>\n <!-- header section -->\n <header class=\"bg-white flex\">\n <div class=\"w-3/6\">\n <img\n class=\"h-12 m-4\"\n src=\"./logo_img/jofogas_logo_original.jpg\"\n alt=\"jofogas_logo_original\"\n />\n </div>\n <div class=\"mx-6 my-6 w-3/6 text-right\">\n <button class=\"bg-orange-500 rounded py-2 px-4 text-white\">\n Belépés\n </button>\n </div>\n </header>\n <!-- login card -->\n <div class=\"relative\">\n <div class=\"absolute z-10 items-center right-0\">\n <div\n id=\"login-card\"\n class=\"w-56 h-64 text-center bg-orange-500 rounded-lg\"\n ></div>\n </div>\n </div>\n <!-- search bar -->\n <div class=\"bg-gray-200 rounded-lg mx-10 md:pt-10\" id=\"search-container\">\n <div class=\"text-center text-4xl hidden md:block\" id=\"main-text\">\n Hirdess vagy vásárolj a Jófogáson!\n </div>\n <div class=\"py-10 text-center\">\n <input\n class=\"w-5/6 md:w-3/6 md:h-12\"\n id=\"search-bar\"\n type=\"text\"\n placeholder=\"Mit keresel?\"\n />\n <i class=\"fa fa-search icon\"></i>\n </div>\n </div>\n <div class=\"text-center\">\n <button\n class=\"bg-green-500 rounded py-4 px-8 md:py-8 md:px-16 text-white text-xl md:text-2xl my-10\"\n >\n Hirdetésfeladás\n </button>\n </div>\n </body>\n</html>\n```\n\n```text\n.absolute z-10\n```\n\n```text\n.relative\n```\n\n```text\n.right-0\n```\n\n```html\n<!-- login card -->\n <div class=\"fixed h-full w-full flex items-center justify-center bg-opacity-50 bg-gray-700\">\n <div class=\"z-10\">\n <div id=\"login-card\"\n class=\"w-56 h-64 text-center bg-orange-500 rounded-lg\"\n ></div>\n </div>\n </div>\n```\n\n```html\n<div class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2\">\n ...\n</div>\n```\n\n========================================\n\nComments:\n- Although this is a way to center an object, the question asks how to center and \"absolute\" element. You example uses flexor rules. Amir's answer should be the correct answer.\n- This is not the ideal way to center an element. You are basically adding an overlay over the whole window just to center an element. This is bad especially if you have elements that you still want to interact with, which you won't be able to because you have an element \"shadowing\" the whole window underneath.\n- This is exactly how I tried to get it working but with Tailwind 3.0 it doesn't seem to transform back with the negative transform tags. I also get an off-center box. 🤷🏽♂️\n- This should be the correct answer. Also, we don't need the `transform` it is redundant.","metadata":{"transformedAt":"2026-08-18T18:33:42.916Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":173,"estimatedTokens":1021}}399{"id":"stack-71712812","source":"stackoverflow","questionId":71712812,"title":"Tailwind css colors not working with next js components. How do u apply bg color?","tags":["javascript","next.js","tailwind-css"],"text":"Title: Tailwind css colors not working with next js components. How do u apply bg color?\nTags: javascript, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nhttps://i.sstatic.net/8RGS3.png\nhttps://i.sstatic.net/FRTOn.png\n\nHello I am trying to use tailwind backgorund colors inside a next js project. Background color is not being applied to components with nextJS.\n\nHere is `tailwind.config.css`.\n\n```\nmodule.exports = {\n content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {\n colors: {\n 'background-dark': '#121212',\n menubar: '#181818',\n 'secondary-text': '#B3B3B3',\n 'primary-text': '#FFFFFF',\n 'gray-dark': '#273444',\n gray: '#8492a6',\n 'gray-light': '#d3dce6',\n },\n },\n },\n plugins: [],\n};\n```\n\nI got this code sinppet from tailwind with custom color pallete.\n\nMainLayout props to add default custom bg color to all the pages.\n\n```\ntype MainLayoutProps = {\n children: React.ReactNode;\n};\n\nexport const MainLayout = ({ children }: MainLayoutProps) => {\n return {children};\n};\n```\n\nI have added this to the `_app.tsx` like so.\n\n```\nfunction MyApp({ Component, pageProps }: AppProps) {\n return (\n \n \n \n \n );\n}\n\nexport default MyApp;\n```\n\nThe custom colors for the heading and Layout works. But the form is not taking colors.\n\n`\"tailwindcss\": \"^3.0.23\",`\n\n```\ntype FormData = {\n email: string;\n password: string;\n};\n\nexport const LoginForm = () => {\n const { register, handleSubmit } = useForm();\n\n const onSubmit = (data: FormData) => console.log(data);\n return (\n \n \n \n \n \n Submit\n \n \n \n );\n};\n```\n\nThe form is not taking the color `bg-red-300`.\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {\n colors: {\n 'background-dark': '#121212',\n menubar: '#181818',\n 'secondary-text': '#B3B3B3',\n 'primary-text': '#FFFFFF',\n 'gray-dark': '#273444',\n gray: '#8492a6',\n 'gray-light': '#d3dce6',\n },\n },\n },\n plugins: [],\n};\n```\n\n```text\ntype MainLayoutProps = {\n children: React.ReactNode;\n};\n\nexport const MainLayout = ({ children }: MainLayoutProps) => {\n return <div className=\"bg-background-dark\">{children}</div>;\n};\n```\n\n```text\nfunction MyApp({ Component, pageProps }: AppProps) {\n return (\n <MainLayout>\n <Header />\n <Component {...pageProps} />\n </MainLayout>\n );\n}\n\nexport default MyApp;\n```\n\n```text\ntype FormData = {\n email: string;\n password: string;\n};\n\nexport const LoginForm = () => {\n const { register, handleSubmit } = useForm<FormData>();\n\n const onSubmit = (data: FormData) => console.log(data);\n return (\n <div className=\"flex h-screen justify-center items-center\">\n <form className=\"bg-red-300 h-32 m-auto\" onSubmit={handleSubmit(onSubmit)}>\n <InputField type=\"text\" label=\"Email\" registration={register('email')} />\n <InputField type=\"password\" label=\"Password\" registration={register('password')} />\n <button className=\"bg-black\" type=\"submit\">\n Submit\n </button>\n </form>\n </div>\n );\n};\n```\n\n```text\ntailwind.config.css\n```\n\n```text\n_app.tsx\n```\n\n```text\n\"tailwindcss\": \"^3.0.23\",\n```\n\n```text\nbg-red-300\n```\n\n```text\ncomponents\n.\n├── Form\n│ ├── FieldWrapper.tsx\n│ ├── Input.tsx\n│ ├── __test__\n│ │ └── Input.test.tsx\n│ └── index.tsx\n└── Layout\n ├── Header.tsx\n ├── MainLayout.tsx\n ├── __test__\n │ └── Header.test.tsx\n └── index.tsx\nfeatures\n.\n├── auth\n│ └── components\n│ ├── LoginForm.tsx\n│ └── __test__\n└── index.tsx\npages\n.\n├── _app.tsx\n├── api\n│ └── hello.ts\n├── index.tsx\n└── login.tsx\n```\n\n```js\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}',\n // Add the following lines here with the custom folder name✅\n './features/**/*.{js,ts,jsx,tsx}',\n ],\n theme: {\n extend: {\n colors: {\n 'background-dark': '#121212',\n menubar: '#181818',\n card: '#212121',\n 'secondary-text': '#B3B3B3',\n 'primary-text': '#FFFFFF',\n 'gray-dark': '#273444',\n gray: '#8492a6',\n 'gray-light': '#d3dce6',\n accent: '#FE214B',\n },\n },\n },\n plugins: [],\n};\n```\n\n```text\nfeatures\n```\n\n```text\ntailwind.config.css\n```\n\n```text\nfeatures\n```\n\n```text\ntailwind.config.css\n```\n\n```text\ncontent\n```\n\n========================================\n\nComments:\n- It's actually taking the color, try to give the div a `h-32` for example and you will see it clearly\n- Updated the post and the code it still does not work.\n- The same markup and Tailwind CSS setup seems to work in this playground: play.tailwindcss.com/SGh95UzmhB.\n- When you inspect the div and look at the styles pane, what do you see? Does it look like the CSS class is being applied? Is the class generated?\n- No, css was not getting applied. Its fixed now, @juliomalves i tried that playground works for me as well. That helped to figure out the problem.\n- Thanks for this. I had started working in the /app directory for NextJS 13 and this was my problem, that directory wasn't added to the tailwind config.","metadata":{"transformedAt":"2026-08-18T18:33:42.916Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":15,"totalLines":264,"estimatedTokens":1294}}400{"id":"stack-66531177","source":"stackoverflow","questionId":66531177,"title":"Is there a way to remove the arrows from an input type but keeping it scoped to only a specific component?","tags":["javascript","typescript","vue.js","vuetify.js","tailwind-css"],"text":"Title: Is there a way to remove the arrows from an input type but keeping it scoped to only a specific component?\nTags: javascript, typescript, vue.js, vuetify.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to remove the arrows from my input field but I want to keep it scoped to only the text fields of this component.\n\n```\n \n\n```\n\n```\n\n.inputPrice input[type='number'] {\n -moz-appearance:textfield;\n}\n.inputPrice input::-webkit-outer-spin-button,\n.inputPrice input::-webkit-inner-spin-button {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none; \n}\n\n```\n\nmy text field\n\nI've tried to use this solution from a somewhat similar problem: https://github.com/vuejs/vue-loader/issues/559#issuecomment-271491472\n\nAs well as this one: https://github.com/vuetifyjs/vuetify/issues/6157#issue-399264114\n\nBut they don't really seem to function.\n\n========================================\n\nTop Answer:\nVuetify v-text-field has this option called \"hide-spin-buttons\" that allows you to hide the up and down arrows when the input field is a number.\n\nClick here to view the description of the Vuetify Option\n\n```\n\n```\n\n========================================\n\nCode:\n```text\n<v-text-field\n class=\"inputPrice\"\n type=\"number\"\n v-model=\"$data._value\"\n @change=\"sendValue\"\n > \n</v-text-field>\n```\n\n```text\n<style scoped>\n\n.inputPrice input[type='number'] {\n -moz-appearance:textfield;\n}\n.inputPrice input::-webkit-outer-spin-button,\n.inputPrice input::-webkit-inner-spin-button {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none; \n}\n\n</style>\n```\n\n```html\n<style scoped>\n.inputPrice >>> input[type=\"number\"] {\n -moz-appearance: textfield;\n}\n.inputPrice >>> input::-webkit-outer-spin-button,\n.inputPrice >>> input::-webkit-inner-spin-button {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n</style>\n```\n\n```text\nscoped\n```\n\n```text\nscoped\n```\n\n```text\n<input>\n```\n\n```text\nv-text-field\n```\n\n```text\nscoped\n```\n\n```text\n<v-text-field \n hide-details \n outlined \n dense \n v-model=\"propVModel\"\n type=\"number\"\n hide-spin-buttons\n :prepend-inner-icon=\"showDollarSign ? 'mdi-currency-usd' : '' \"\n :append-icon=\"showPercentSign && 'mdi-percent'\"\n >\n</v-text-field>\n```\n\n```text\nhide-spin-buttons\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.916Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":125,"estimatedTokens":574}}401{"id":"stack-78296875","source":"stackoverflow","questionId":78296875,"title":"typescript error using @material-tailwind/react with nextjs14","tags":["reactjs","typescript","next.js","material-ui","tailwind-css"],"text":"Title: typescript error using @material-tailwind/react with nextjs14\nTags: reactjs, typescript, next.js, material-ui, tailwind-css\nSource: Stack Overflow\n\nQuestion:\ntrying to use \"@material-tailwind/react\": \"^2.1.9\" in \"next\": \"14.1.4\"\n\n```\n\"use client\";\nimport { Button } from \"@material-tailwind/react\";\n\nexport default function Home() {\n return Test MUI;\n}\n```\n\nbut the button is showing a red **squiggly line** with error\n\n```\nType '{ children: string; }' is missing the following properties from type 'Pick': placeholder, onPointerEnterCapture,\n```\n\n========================================\n\nTop Answer:\nTry to install a dependance of @material-tailwind :\n\n```\nnpm i @types/react@18.2.19\n```\n\n========================================\n\nCode:\n```text\n\"use client\";\nimport { Button } from \"@material-tailwind/react\";\n\nexport default function Home() {\n return <Button>Test MUI</Button>;\n}\n```\n\n```text\nType '{ children: string; }' is missing the following properties from type 'Pick<ButtonProps, \"children\" | \"color\" | \"disabled\" | \"translate\" | \"form\" | \"slot\" | \"style\" | \"title\" | \"onChange\" | \"onClick\" | \"className\" | \"value\" | \"key\" | \"autoFocus\" | ... 259 more ... | \"loading\">': placeholder, onPointerEnterCapture,\n```\n\n```text\n\"devDependencies\": {\n ...\n \"@vitejs/plugin-react\": \"^4.3.2\",\n ...\n}\n```\n\n```text\nimport react from '@vitejs/plugin-react'\n```\n\n```text\nnpm i @types/react@18.2.19\n```\n\n```text\nnpm i @types/react@18.2.19\n```\n\n========================================\n\nComments:\n- Indeed it works with \"@material-tailwind/react\": \"^2.1.10\", and \"@types/react\": \"18.2.42\", Thanks a lot!!!","metadata":{"transformedAt":"2026-08-18T18:33:42.916Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":71,"estimatedTokens":404}}402{"id":"stack-69993644","source":"stackoverflow","questionId":69993644,"title":"How to style the tag when open using Tailwind","tags":["tailwind-css"],"text":"Title: How to style the tag when open using Tailwind\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn css I use this to style another element when the tag is open.\nHow is it possible to do the same using Tailwind ?\n\n```\n.filesParent[open] .class {\n// styles..\n }\n```\n\n========================================\n\nTop Answer:\nIn Tailwind v3.3.2, it is possible to use an advanced selector to toggle a deep child from one state to another based on `open`.\n\nTailwind has a variant for open/closed. Then together with arbitrary variants, we can apply styles only when `open` is activated.\n\nCombining the two features like so `[&_svg]:open:-rotate-180` gives us:\n\n- select a child svg\n\n- when the details is open\n\n- rotate -180 degrees (this could be any class/style you need)\n\nHere's a tailwind playground example and reproduced below.\n\n```\n\n \n \n \n \n \n \n \n \n \n \n Open this box\n \n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget varius quam. Nunc et fringilla erat. Suspendisse sagittis tellus et metus mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque rhoncus sapien nec mauris lacinia, at mollis tortor hendrerit. Donec a libero erat. Cras sed purus sit amet justo vehicula interdum. Praesent orci erat, volutpat at suscipit sit amet, ultricies vitae dui. Nulla vel libero eros. Donec viverra tellus eu ex finibus ultrices id sit amet quam. Vivamus nibh massa, iaculis vitae odio at, porta eleifend elit. Sed molestie placerat lobortis. Pellentesque non fringilla tellus, eget ultricies arcu. Integer vitae vehicula ante. Donec eleifend neque eget vehicula tristique.\n\n \n\n```\n\n========================================\n\nCode:\n```text\n.filesParent[open] .class {\n// styles..\n }\n```\n\n```css\n/* ./src/tailwind.css */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n .filesParent[open] .class {\n // styles..\n }\n}\n```\n\n```text\n.FilesParent[open] .class {\n @apply text-red-violet-500\n}\n```\n\n```text\n@apply\n```\n\n```text\n.filesParent\n```\n\n```text\ndetails\n```\n\n```text\ngroup\n```\n\n```text\n.class\n```\n\n```text\ngroup-open:<tailwind class>\n```\n\n```html\n<div class=\"container mx-auto\">\n <!-- notice here, the key rule is `[&_svg]:open:-rotate-180` -->\n <details class=\"border-2 border-dashed border-stone-500 p-4 [&_svg]:open:-rotate-180\">\n <!-- notice here, we have disabled the summary's default triangle/arrow -->\n <summary class=\"flex cursor-pointer list-none items-center gap-4\">\n <div>\n <!-- notice here, we added our own triangle/arrow svg -->\n <svg class=\"rotate-0 transform text-blue-700 transition-all duration-300\" fill=\"none\" height=\"20\" width=\"20\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </div>\n <div>Open this box</div>\n </summary>\n\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget varius quam. Nunc et fringilla erat. Suspendisse sagittis tellus et metus mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque rhoncus sapien nec mauris lacinia, at mollis tortor hendrerit. Donec a libero erat. Cras sed purus sit amet justo vehicula interdum. Praesent orci erat, volutpat at suscipit sit amet, ultricies vitae dui. Nulla vel libero eros. Donec viverra tellus eu ex finibus ultrices id sit amet quam. Vivamus nibh massa, iaculis vitae odio at, porta eleifend elit. Sed molestie placerat lobortis. Pellentesque non fringilla tellus, eget ultricies arcu. Integer vitae vehicula ante. Donec eleifend neque eget vehicula tristique.</p>\n </details>\n</div>\n```\n\n```text\nopen\n```\n\n```text\nopen\n```\n\n```text\n[&_svg]:open:-rotate-180\n```\n\n========================================\n\nComments:\n- For those who prefer visual examples, this would be like this: ` summary contentthe expanded content`\n- This is the only right answer.\n- I had to change `[&_svg]:open:-rotate-180` to `open:[&_svg]:-rotate-180` for this to work with Tailwind 4","metadata":{"transformedAt":"2026-08-18T18:33:42.916Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":142,"estimatedTokens":1017}}403{"id":"stack-72691159","source":"stackoverflow","questionId":72691159,"title":"Tailwind styles are not being applied after bundling with Rollup","tags":["reactjs","tailwind-css","rollupjs","postcss","rollup-plugin-postcss"],"text":"Title: Tailwind styles are not being applied after bundling with Rollup\nTags: reactjs, tailwind-css, rollupjs, postcss, rollup-plugin-postcss\nSource: Stack Overflow\n\nQuestion:\nApologies if this is an obvious question, this is my first time trying to build a component library.\n\nI'm building a React component library with Tailwind CSS 3. When I run the components with Storybook, they display as intended. However, when I bundle with Rollup, the class names are applied, but the CSS is not included in the build.\n\nThis is my `tailwind.config.js` file:\n\n```\nmodule.exports = {\n content: ['./src/**/*.{js,jsx,ts,tsx}'],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\nMy `rollup.config.js` file:\n\n```\nimport babel from 'rollup-plugin-babel';\nimport external from 'rollup-plugin-peer-deps-external';\nimport resolve from '@rollup/plugin-node-resolve';\nimport postcss from 'rollup-plugin-postcss';\nimport { terser } from 'rollup-plugin-terser';\n\nconst packageJson = require('./package.json');\n\nexport default [\n {\n input: 'src/index.js',\n output: [\n {\n file: packageJson.module,\n format: 'esm',\n sourcemap: true,\n },\n ],\n plugins: [\n postcss({\n config: {\n path: './postcss.config.js',\n },\n extensions: ['.css'],\n minimize: true,\n inject: {\n insertAt: 'top',\n },\n }),\n babel({\n exclude: 'node_modules/**',\n presets: ['@babel/preset-react'],\n }),\n external(),\n resolve(),\n terser(),\n ],\n },\n];\n```\n\nMy `postcss.config.js` file:\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\nAnd my `package.json` file:\n\n```\n{\n \"name\": \"@jro31/react-component-library\",\n \"version\": \"0.0.5\",\n \"description\": \"A library of React components\",\n \"scripts\": {\n \"rollup\": \"rollup -c\",\n \"storybook\": \"start-storybook -p 6006\",\n \"build-storybook\": \"build-storybook\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jro31/react-component-library.git\"\n },\n \"keywords\": [\n \"react\",\n \"components\",\n \"component-library\",\n \"react-component-library\"\n ],\n \"author\": \"Jethro Williams\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jro31/react-component-library/issues\"\n },\n \"homepage\": \"https://github.com/jro31/react-component-library#readme\",\n \"devDependencies\": {\n \"@babel/core\": \"^7.18.5\",\n \"@babel/preset-react\": \"^7.17.12\",\n \"@headlessui/react\": \"^1.6.5\",\n \"@heroicons/react\": \"^1.0.6\",\n \"@rollup/plugin-node-resolve\": \"^13.3.0\",\n \"@storybook/addon-actions\": \"^6.5.9\",\n \"@storybook/addon-essentials\": \"^6.5.9\",\n \"@storybook/addon-interactions\": \"^6.5.9\",\n \"@storybook/addon-links\": \"^6.5.9\",\n \"@storybook/addon-postcss\": \"^2.0.0\",\n \"@storybook/builder-webpack4\": \"^6.5.9\",\n \"@storybook/manager-webpack4\": \"^6.5.9\",\n \"@storybook/react\": \"^6.5.9\",\n \"@storybook/testing-library\": \"^0.0.13\",\n \"autoprefixer\": \"^10.4.7\",\n \"babel-loader\": \"^8.2.5\",\n \"postcss\": \"^8.4.14\",\n \"react\": \"17.0.2\",\n \"react-dom\": \"17.0.2\",\n \"rollup\": \"^2.75.7\",\n \"rollup-plugin-babel\": \"^4.4.0\",\n \"rollup-plugin-peer-deps-external\": \"^2.2.4\",\n \"rollup-plugin-postcss\": \"^4.0.2\",\n \"rollup-plugin-terser\": \"^7.0.2\",\n \"tailwindcss\": \"^3.1.3\"\n },\n \"peerDependencies\": {\n \"@headlessui/react\": \"^1.6.5\",\n \"@heroicons/react\": \"^1.0.6\",\n \"react\": \"17.0.2\",\n \"react-dom\": \"17.0.2\"\n },\n \"module\": \"dist/esm/index.js\",\n \"files\": [\n \"dist\"\n ],\n \"publishConfig\": {\n \"registry\": \"https://npm.pkg.github.com/jro31\"\n }\n}\n```\n\nMy `src/index.css` file is simply:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nI only have one dummy component for now. Based on this, when I run `npm run storybook`, my component displays as intended with the Tailwind styling applied.\n\nHowever, on running `npm run rollup`, the `dist/esm/index.js` file is generated as follows:\n\n```\nimport t from\"react\";const e=e=>t.createElement(\"button\",{className:\"text-9xl md:text-6xl bg-blue-400\"},e.label);export{e as Button};\n//# sourceMappingURL=index.js.map\n```\n\nIt includes the Tailwind classnames, but not styling. So importing this component into an external project, the class names are applied, but the Tailwind styling is not.\n\nAnyone have any idea where I'm going wrong? I've spent a few hours trying to fix this, so would be incredible grateful for any help.\n\n========================================\n\nTop Answer:\nGiven your rollup.config.js:\n\n```\nplugins: [\n postcss({\n config: {\n path: './postcss.config.js',\n },\n extensions: ['.css'],\n minimize: true,\n inject: {\n insertAt: 'top',\n },\n }),\n```\n\nYou should be able to change it to this:\n\n```\nimport tailwindcss from 'tailwindcss';\n\nconst tailwindConfig = require('./tailwind.config.js');\n\n...\n\n plugins: [\n postcss({\n config: {\n path: './postcss.config.js',\n },\n extensions: ['.css'],\n minimize: true,\n inject: {\n insertAt: 'top',\n },\n plugins: [tailwindcss(tailwindConfig)],\n }),\n```\n\nThat should allow you to have package.json scripts as follows:\n\n```\n\"scripts\": {\n \"dev\": \"rollup -c --watch\",\n \"build\": \"rollup -c\"\n},\n```\n\nBeyond that the accepted answer is what you need. I typically import the css file into the entry point of the application or npm library (root `index.js` file that is bundled with rollup), shown here in your rollup.config.js file:\n\n```\nexport default [\n {\n input: 'src/index.js',\n```\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n content: ['./src/**/*.{js,jsx,ts,tsx}'],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```js\nimport babel from 'rollup-plugin-babel';\nimport external from 'rollup-plugin-peer-deps-external';\nimport resolve from '@rollup/plugin-node-resolve';\nimport postcss from 'rollup-plugin-postcss';\nimport { terser } from 'rollup-plugin-terser';\n\nconst packageJson = require('./package.json');\n\nexport default [\n {\n input: 'src/index.js',\n output: [\n {\n file: packageJson.module,\n format: 'esm',\n sourcemap: true,\n },\n ],\n plugins: [\n postcss({\n config: {\n path: './postcss.config.js',\n },\n extensions: ['.css'],\n minimize: true,\n inject: {\n insertAt: 'top',\n },\n }),\n babel({\n exclude: 'node_modules/**',\n presets: ['@babel/preset-react'],\n }),\n external(),\n resolve(),\n terser(),\n ],\n },\n];\n```\n\n```js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```json\n{\n \"name\": \"@jro31/react-component-library\",\n \"version\": \"0.0.5\",\n \"description\": \"A library of React components\",\n \"scripts\": {\n \"rollup\": \"rollup -c\",\n \"storybook\": \"start-storybook -p 6006\",\n \"build-storybook\": \"build-storybook\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jro31/react-component-library.git\"\n },\n \"keywords\": [\n \"react\",\n \"components\",\n \"component-library\",\n \"react-component-library\"\n ],\n \"author\": \"Jethro Williams\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jro31/react-component-library/issues\"\n },\n \"homepage\": \"https://github.com/jro31/react-component-library#readme\",\n \"devDependencies\": {\n \"@babel/core\": \"^7.18.5\",\n \"@babel/preset-react\": \"^7.17.12\",\n \"@headlessui/react\": \"^1.6.5\",\n \"@heroicons/react\": \"^1.0.6\",\n \"@rollup/plugin-node-resolve\": \"^13.3.0\",\n \"@storybook/addon-actions\": \"^6.5.9\",\n \"@storybook/addon-essentials\": \"^6.5.9\",\n \"@storybook/addon-interactions\": \"^6.5.9\",\n \"@storybook/addon-links\": \"^6.5.9\",\n \"@storybook/addon-postcss\": \"^2.0.0\",\n \"@storybook/builder-webpack4\": \"^6.5.9\",\n \"@storybook/manager-webpack4\": \"^6.5.9\",\n \"@storybook/react\": \"^6.5.9\",\n \"@storybook/testing-library\": \"^0.0.13\",\n \"autoprefixer\": \"^10.4.7\",\n \"babel-loader\": \"^8.2.5\",\n \"postcss\": \"^8.4.14\",\n \"react\": \"17.0.2\",\n \"react-dom\": \"17.0.2\",\n \"rollup\": \"^2.75.7\",\n \"rollup-plugin-babel\": \"^4.4.0\",\n \"rollup-plugin-peer-deps-external\": \"^2.2.4\",\n \"rollup-plugin-postcss\": \"^4.0.2\",\n \"rollup-plugin-terser\": \"^7.0.2\",\n \"tailwindcss\": \"^3.1.3\"\n },\n \"peerDependencies\": {\n \"@headlessui/react\": \"^1.6.5\",\n \"@heroicons/react\": \"^1.0.6\",\n \"react\": \"17.0.2\",\n \"react-dom\": \"17.0.2\"\n },\n \"module\": \"dist/esm/index.js\",\n \"files\": [\n \"dist\"\n ],\n \"publishConfig\": {\n \"registry\": \"https://npm.pkg.github.com/jro31\"\n }\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\nimport t from\"react\";const e=e=>t.createElement(\"button\",{className:\"text-9xl md:text-6xl bg-blue-400\"},e.label);export{e as Button};\n//# sourceMappingURL=index.js.map\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nrollup.config.js\n```\n\n```text\npostcss.config.js\n```\n\n```text\npackage.json\n```\n\n```text\nsrc/index.css\n```\n\n```text\nnpm run storybook\n```\n\n```text\nnpm run rollup\n```\n\n```text\ndist/esm/index.js\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\nimport '../index.css';\n\nexport { default as Button } from './Button';\n```\n\n```text\nsrc/index.css\n```\n\n```text\nsrc/index.css\n```\n\n```text\nsrc/components/index.js\n```\n\n```text\nplugins: [\n postcss({\n config: {\n path: './postcss.config.js',\n },\n extensions: ['.css'],\n minimize: true,\n inject: {\n insertAt: 'top',\n },\n }),\n```\n\n```text\nimport tailwindcss from 'tailwindcss';\n\nconst tailwindConfig = require('./tailwind.config.js');\n\n...\n\n plugins: [\n postcss({\n config: {\n path: './postcss.config.js',\n },\n extensions: ['.css'],\n minimize: true,\n inject: {\n insertAt: 'top',\n },\n plugins: [tailwindcss(tailwindConfig)],\n }),\n```\n\n```text\n\"scripts\": {\n \"dev\": \"rollup -c --watch\",\n \"build\": \"rollup -c\"\n},\n```\n\n```text\nexport default [\n {\n input: 'src/index.js',\n```\n\n```text\nindex.js\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.916Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":24,"totalLines":478,"estimatedTokens":2428}}404{"id":"stack-79389181","source":"stackoverflow","questionId":79389181,"title":"How the container padding will use in Tailwind CSS v4","tags":["css","containers","tailwind-css","vite","tailwind-css-4"],"text":"Title: How the container padding will use in Tailwind CSS v4\nTags: css, containers, tailwind-css, vite, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nIn Tailwind CSS v3 there was a file `tailwind.config.js` where we could declare different padding for different screens like this:\n\n```\ntheme:{\n container: {\n center: true,\n padding: {\n DEFAULT: `10px`,\n sm : `20px`,\n lg : `80px`,\n xl : `120px`\n }\n }\n}\n```\n\nNow there is no `tailwind.config.js`.\n\nWe have to use global CSS.\n\nHow to put those padding in container as there is no way/scope it.\n\nEven though they have `@container` but now way to put these padding variables which could take their padding size auto.\n\nI tried using\n\n```\n@container {}\n\n@utility container{}\n\n@layers {\n @media container (){}\n}\n```\n\n========================================\n\nTop Answer:\n**Tailwind v4 has .container class** and its generated values are:\n\n```\n.container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n```\n\nSo you can add your style to it in html file itself. **You don't have to do any other stuff.**\n\n**CENTER:**\n\n```\n Hi \n```\n\n**RESPONSIVE PADDING:**\n\n```\n Hi \n```\n\n========================================\n\nCode:\n```js\ntheme:{\n container: {\n center: true,\n padding: {\n DEFAULT: `10px`,\n sm : `20px`,\n lg : `80px`,\n xl : `120px`\n }\n }\n}\n```\n\n```css\n@container {}\n\n@utility container{}\n\n@layers {\n @media container (){}\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@container\n```\n\n```css\n@utility container {\n …\n}\n```\n\n```css\n@utility container {\n padding-inline: 10px;\n margin-inline: auto;\n}\n```\n\n```css\n@utility container {\n padding-inline: 10px;\n margin-inline: auto;\n \n @variant sm {\n padding-inline: 20px;\n }\n \n @variant lg {\n padding-inline: 80px;\n }\n \n @variant xl {\n padding-inline: 120px;\n }\n}\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4.0.0\"></script>\n\n<style type=\"text/tailwindcss\">\n@utility container {\n padding-inline: 10px;\n margin-inline: auto;\n \n @variant sm {\n padding-inline: 20px;\n }\n \n @variant lg {\n padding-inline: 80px;\n }\n \n @variant xl {\n padding-inline: 120px;\n }\n}\n</style>\n\n<div class=\"container bg-red-400\">\n <div class=\"bg-green-400 h-10\"></div>\n</div>\n```\n\n```text\n@utility\n```\n\n```text\nDEFAULT\n```\n\n```text\n@variant\n```\n\n```css\n.container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n```\n\n```html\n<div class=\"container mx-auto\"> Hi </div>\n```\n\n```html\n<div class=\"container mx-auto sm:px-2 md:px-3 lg:px-4\"> Hi </div>\n```\n\n========================================\n\nComments:\n- Thanks a lot... It Worked ... Also if I use apply mx-auto px-[10px] sm:px-[20px] lg:px-[120px] in just @utility container{} instead of using varient ... Will it be bad practice? Or good practice?\n- Adam Wathan (creator of Tailwind) does seem to advocate avoiding `@apply`: twitter.com/adamwathan/status/1226511611592085504, twitter.com/adamwathan/status/1559250403547652097\n- Yes, I would clearly use `@apply` only for existing classes or where it significantly simplifies the code. However, using it just to generate a specific padding like `px-[10px]`, `px-[11px]`, etc., has never been a good practice, as each of these will generate a new class. If you’re only using it once, it’s inherently a \"waste\" of space.\n- So only for styling @apply is good?!!! Except for container and some main stuffs!!! Cause, using apply on external CSS folder keeps the component structure clear.. Using in-line makes mess in the structure.\n- Using inline is the most preferrable. As per the above, try to avoid `@apply` and use regular CSS instead. Use `var()` or `--spacing()` to reference theme tokens if needed. Use `@variant` to reference variants.\n- well .. if it is better than I have to adapt using those... was using @apply always.. have to learn using theme and all those tokens 😅\n- How are these variants called then? `container-sm`, `container-[sm]`, or even something else? Maybe add a second container with a variant to clarify...\n- I think you may be incorrectly interpreting the `@variant` tags. Tailwind converts them to their equivalent variant values within the CSS rule, so in this case, `@media` queries. See the documentation on `@variant`.\n- Oh, I see. I thought this was to create tailwind rules that are customizable, like `@layer utilities` but with arbitrary values. Been looking for hours how to do that, but can't seem to find anything useful...\n- You'd use the `@utility` directive.\n- From my understanding the @variant here works similar to how extends worked in V3..someone to correct me if I'm wrong.\n- That's wrong. `@variant` is syntax sugar for adding a variant's selector modifier into the CSS. As an example, `@variant sm {}` and `@media (width >= 40rem) {}` are equivalent.","metadata":{"transformedAt":"2026-08-18T18:33:42.916Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":235,"estimatedTokens":1329}}405{"id":"stack-71196598","source":"stackoverflow","questionId":71196598,"title":"Target mobile only breakpoint","tags":["tailwind-css"],"text":"Title: Target mobile only breakpoint\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using Tailwind v3.\n\nI have a custom background color being applied in an inline style with javascript:\n\n```\n\n```\n\nHowever in mobile breakpoint, I want it to ignore this background color, I want no background. So what I did was add `!bg-transparent`, using the \"!\" modifier I make it override the inline style:\n\n```\n\n```\n\nHowever I don't want the inline style overriden at all other breakpoints `sm` and above.\n\nIs it possible to target `!bg-transparent` to mobile only breakpoint?\n\n========================================\n\nTop Answer:\n**Update**: dynamic and `max-` breakpoints were introduced in Tailwind v3.2 since October, 2022\n\n**See accepted Prabin Poudel answer**\n\nOld answer (for versions below 3.2):\n\nYou may add custom variant which will apply styles on mobile screens only like `@media max-width: 640px`. Generally speaking with custom variants you can add any extra medias or state you need\n\n```\nconst plugin = require('tailwindcss/plugin')\n\nmodule.exports = {\n plugins: [\n plugin(function ({ addVariant }) {\n addVariant('mobile-only', \"@media screen and (max-width: theme('screens.sm'))\"); // instead of hard-coded 640px use sm breakpoint value from config. Or anything\n }),\n ],\n}\n```\n\n```\n\n```\n\nIt is still required to use `!important` flag because of inline style\n\nColored DEMO - resize demo screen at right\n\n**Update:** Noitidart suggested another way of doing this with CSS variables - which is much cleaner and no need in `!important`\n\n```\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n shading: 'var(--shading)'\n }\n }\n },\n}\n```\n\n```\n\n```\n\nDEMO\n\n========================================\n\nCode:\n```text\n<div style=\"background-color: RANDOM_GENERATED_COLOR\" />\n```\n\n```text\n<div style=\"background-color: RANDOM_GENERATED_COLOR\" class=\"!bg-transparent\" />\n```\n\n```text\n!bg-transparent\n```\n\n```text\nsm\n```\n\n```text\n!bg-transparent\n```\n\n```text\nmax-sm:class-name\n```\n\n```text\nmax-sm:background-slate-500\n```\n\n```js\nconst plugin = require('tailwindcss/plugin')\n\nmodule.exports = {\n plugins: [\n plugin(function ({ addVariant }) {\n addVariant('mobile-only', \"@media screen and (max-width: theme('screens.sm'))\"); // instead of hard-coded 640px use sm breakpoint value from config. Or anything\n }),\n ],\n}\n```\n\n```html\n<div style=\"background-color: RANDOM_GENERATED_COLOR\" class=\"mobile-only:!bg-transparent\" />\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n shading: 'var(--shading)'\n }\n }\n },\n}\n```\n\n```html\n<div style=\"--shading: RANDOM_GENERATED_COLOR;\" class=\"bg-shading sm:bg-transparent\">\n</div>\n```\n\n```text\nmax-\n```\n\n```text\n@media max-width: 640px\n```\n\n```text\n!important\n```\n\n```text\n!important\n```\n\n```html\n<div style=\"background-color: RANDOM_GENERATED_COLOR\">\n```\n\n```html\n<div class=\"bg-[RANDOM_GENERATED_COLOR]\">\n```\n\n```html\n<div class=\"md:bg-[RANDOM_GENERATED_COLOR]\">\n```\n\n```text\nmd:\n```\n\n```text\nlg:\n```\n\n```text\n!important\n```\n\n========================================\n\nComments:\n- Thanks! This works! I also was doing this other trick with css vars to avoid having to use important, what do you think of it? play.tailwindcss.com/RFYJx0XeHW?size=436x720\n- Oh wow that's super cool, this was an awesome learning experience!\n- This is super cool thank you! I think you have to do `sm:max-sm:class-name` for breakpoints above mobile though, that way min and max will be that class. But you're right, to target only mobile, which was my question, can use just `max-sm:class-name`","metadata":{"transformedAt":"2026-08-18T18:33:42.916Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":184,"estimatedTokens":890}}406{"id":"stack-71129698","source":"stackoverflow","questionId":71129698,"title":"How to use smooth-scroll from tailwindcss in React?","tags":["reactjs","scroll","tailwind-css","smooth-scrolling"],"text":"Title: How to use smooth-scroll from tailwindcss in React?\nTags: reactjs, scroll, tailwind-css, smooth-scrolling\nSource: Stack Overflow\n\nQuestion:\nI have created a one-page website using `tailwindcss` and `React`. In the prototype I use the `tailwindcss` class \"scroll-smooth\" and it works. In `React` the class \"scroll-smooth\" does not work, but what is the reason?\n\nhttps://tailwindcss.com/docs/scroll-behavior#basic-usage\n\nWhen I click \"Why\" on Navigation i jump to the section \"why\" but not smoothly:\n\n```\nfunction App() {\n return (\n \n \n \n\n \n\n \n\n \n ...\n \n \n \n \n \n );\n}\n```\n\n**Solution:**\n\nI think `TailwindCss` Class \"scroll-smooth\" it doesn't work on react. So I use the `NPM` package \"react-scroll\" with which it works great and I probably have less compatibility worries.\n\nhttps://www.npmjs.com/package/react-scroll\n\n========================================\n\nTop Answer:\nAdd `scroll-behavior: smooth` to the code works for me.\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n html {\n scroll-behavior: smooth;\n }\n}\n```\n\n========================================\n\nCode:\n```text\nfunction App() {\n return (\n <div className=\"App\">\n <div className=\"relative\">\n <div className=\"flex flex-col scroll-smooth\">\n\n <HomeNav />\n\n <HomeHero />\n\n <section id=\"why\" className=\"flex flex-col items-center px-6 pt-20\">\n ...\n </section>\n <HomeFooter />\n </div>\n </div>\n </div>\n );\n}\n```\n\n```text\ntailwindcss\n```\n\n```text\nReact\n```\n\n```text\ntailwindcss\n```\n\n```text\nReact\n```\n\n```text\nTailwindCss\n```\n\n```text\nNPM\n```\n\n```text\nimport \"./App.css\";\nimport AntyHero from \"./components/AntyHero\";\nimport Footer from \"./components/Footer\";\nimport Hero from \"./components/Hero\";\nimport Navbar from \"./components/Navbar\";\n\nfunction App() {\n return (\n <>\n <section id=\"header\">\n <Navbar />\n </section>\n <div className=\"flex flex-col h-screen items-center justify-center additional gap-3\">\n <h1 className=\"text-5xl\">TailwindCSS & React.js</h1>\n <h2 className=\"text-3xl pb-5\">smooth scrolling behavior</h2>\n <div className=\"flex gap-5 items-center justify-center text-2xl underline bg-white rounded-md p-2\">\n <a href=\"#one\" className=\"text-orange-600\">\n Section One\n </a>\n <a href=\"#two\" className=\"text-red-600\">\n Section Two\n </a>\n <a href=\"#three\" className=\"text-green-700\">\n Section Three\n </a>\n </div>\n </div>\n <div className=\"text-center text-3xl\">\n <section id=\"one\" className=\"h-screen bg-orange-600\">\n Section One\n </section>\n <AntyHero />\n <section id=\"two\" className=\"h-screen bg-red-600\">\n Section Two\n </section>\n <Hero />\n <section id=\"three\" className=\"h-screen bg-green-700\">\n Section Three\n </section>\n </div>\n <Footer />\n </>\n );\n}\n\nexport default App;\n```\n\n```text\n@tailwind base;\nhtml {\n scroll-behavior: smooth;\n}\n\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nscroll-behavior: smooth\n```\n\n```text\nreact\n```\n\n```text\ntailwindcss\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n html {\n scroll-behavior: smooth;\n }\n}\n```\n\n```text\nscroll-behavior: smooth\n```\n\n```text\nreturn (\n <html lang=\"en\" className=\"h-full scroll-smooth\">\n ...body\n </html>\n );\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n html {\n scroll-behavior: smooth;\n }\n}\n```\n\n```html\n<html lang=\"fr\" className=\"scroll-smooth\">\n</html>\n```\n\n```text\nscroll-behavior: smooth\n```\n\n========================================\n\nComments:\n- Which browser are you using? The CSS `scroll-behavior` (used by `scroll-smooth`) is not supported by all browsers. See: caniuse.com/?search=scroll-behavior\n- I use the latest Firefox and Chrome browser :) And in my clean Tailwind Prototype it works, but not in my React app. Maybe it's a React specific problem. I am new to React ;)\n- Yes you are right when i add it to base layer than works ;) But for now, I will use my solution via the react-scroll package. Thanks!\n- @GregorWedlich You're welcome ! React-scroll is marvelous ;-) Best regards and Thank You...\n- Thank you big time! You just saved me from having to install a bunch of packages ;0","metadata":{"transformedAt":"2026-08-18T18:33:42.916Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":18,"totalLines":229,"estimatedTokens":1105}}407{"id":"stack-70892781","source":"stackoverflow","questionId":70892781,"title":"How do h1 text became smaller when I used tailwind CSS?","tags":["reactjs","tailwind-css"],"text":"Title: How do h1 text became smaller when I used tailwind CSS?\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am currently working on a website for learning react and node.js. When I want CSS I heard about tailwind CSS which is a very good collection of CSS. I decided to use tailwind in my react project. I followed the steps as tailwind's website says for create-react-app.\n\nAfter that when I tried a Hello World project using h1 tags the size of the text is too small.https://i.sstatic.net/rnxZ9.png\n\nHow did this happen? Is this because of tailwind or is this because of my fault?\nWhat are the ways to resolve this?? This is my first time to tailwind.\n\nMy code :\nJS:\n\n```\nfunction App() {\n return (\n \n \n\n### Hello World\n\n \n );\n }\n\nexport default App;\n```\n\nIndex.css:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\ntailwind.config.js:\n\n```\nmodule.exports = {\ncontent: [\n\"./src/**/*.{js,jsx,ts,tsx}\",\n],\ntheme: {\nextend: {},\n},\nplugins: [],\n}\n```\n\n========================================\n\nCode:\n```text\nfunction App() {\n return (\n <div className=\"App\">\n <h1 className=\"text-center text-green-900 font-bold \" >Hello World</h1>\n </div>\n );\n }\n\nexport default App;\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nmodule.exports = {\ncontent: [\n\"./src/**/*.{js,jsx,ts,tsx}\",\n],\ntheme: {\nextend: {},\n},\nplugins: [],\n}\n```\n\n```text\nfont-size\n```\n\n```text\ninherit\n```\n\n```text\nh1\n```\n\n```text\nh6\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.916Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":100,"estimatedTokens":370}}408{"id":"stack-67806445","source":"stackoverflow","questionId":67806445,"title":"Dropdown Menu - Next.js & Tailwind CSS","tags":["reactjs","frontend","next.js","tailwind-css","web-deployment-project"],"text":"Title: Dropdown Menu - Next.js & Tailwind CSS\nTags: reactjs, frontend, next.js, tailwind-css, web-deployment-project\nSource: Stack Overflow\n\nQuestion:\nI am working on a project and I need a sample code of dropdown menu using tailwind CSS and Next.js. If anyone could help me I would greatly appreciate it.\n\n========================================\n\nTop Answer:\n```\n'use client'\nimport React, { useState } from 'react'\n\nconst Dropdown = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n const toggleDropdown = () => {\n setIsOpen(!isOpen);\n };\n\n const closeDropdown = () => {\n setIsOpen(false);\n };\n\n return (\n \n \n \n Dropdown \n \n \n \n\n {isOpen && (\n \n \n \n \n Option 1\n \n \n \n \n Option 2\n \n \n \n \n Option 3\n \n \n \n \n )}\n \n \n )\n}\n\nexport default Dropdown;\n```\n\n========================================\n\nCode:\n```html\nconst [dropdownOpen, setdropdownOpen] = useState(false);\n \n ////// jsx ///////\n \n \n <div\n onClick={() => setdropdownOpen(!dropdownOpen)}\n class=\"overflow-hidden rounded-full w-8 h-8 flex justify-center items-center\n hover:cursor-pointer\n \">\n\n Toggle\n </div>\n \n \n <div\n class={`${dropdownOpen ? `top-full opacity-100 visible` : 'top-[110%] invisible opacity-0'} absolute left-0 z-40 mt-2 w-full rounded border-[.5px] border-light bg-white py-5 shadow-card transition-all`}>\n <a\n href=\"javascript:void(0)\"\n class=\"block py-2 px-5 text-base font-semibold text-body-color hover:bg-primary hover:bg-opacity-5 hover:text-primary\"\n >\n Dashboard\n </a>\n <a\n href=\"javascript:void(0)\"\n class=\"block py-2 px-5 text-base font-semibold text-body-color hover:bg-primary hover:bg-opacity-5 hover:text-primary\"\n >\n Settings\n </a>\n <a\n href=\"javascript:void(0)\"\n class=\"block py-2 px-5 text-base font-semibold text-body-color hover:bg-primary hover:bg-opacity-5 hover:text-primary\"\n >\n Earnings\n </a>\n <a\n href=\"javascript:void(0)\"\n class=\"block py-2 px-5 text-base font-semibold text-body-color hover:bg-primary hover:bg-opacity-5 hover:text-primary\"\n >\n Logout\n </a>\n </div>\n```\n\n```text\n'use client'\nimport React, { useState } from 'react'\n\nconst Dropdown = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n const toggleDropdown = () => {\n setIsOpen(!isOpen);\n };\n\n const closeDropdown = () => {\n setIsOpen(false);\n };\n\n return (\n <div className='w-full py-6 pb-8'>\n <div className=\"relative inline-block\">\n <button\n type=\"button\"\n className=\"px-4 py-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm inline-flex items-center\"\n onClick={toggleDropdown}\n >\n Dropdown <svg class=\"w-2.5 h-2.5 ml-2.5\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 10 6\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 4 4 4-4\" />\n </svg>\n </button>\n\n {isOpen && (\n <div className=\"origin-top-right absolute right-0 mt-2 w-44 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5\">\n <ul role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"options-menu\">\n <li>\n <a\n href=\"#\"\n className=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\"\n onClick={closeDropdown}\n >\n Option 1\n </a>\n </li>\n <li>\n <a\n href=\"#\"\n className=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\"\n onClick={closeDropdown}\n >\n Option 2\n </a>\n </li>\n <li>\n <a\n href=\"#\"\n className=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\"\n onClick={closeDropdown}\n >\n Option 3\n </a>\n </li>\n </ul>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nexport default Dropdown;\n```\n\n========================================\n\nComments:\n- Look in to `https://headlessui.dev/` Tailwinds official react components, you will find dropdown menu example/code.\n- thanks for your reply.\n- hi, could you help me? i've install headlessui, but many things dont work properly. do i have to install tailwindcss?\n- Yes, I would reccomend installing tailwindcss. Also, remember that headless UI is unstyled","metadata":{"transformedAt":"2026-08-18T18:33:42.917Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":2,"totalLines":187,"estimatedTokens":1536}}409{"id":"stack-76715043","source":"stackoverflow","questionId":76715043,"title":"Tailwind-DaisyUI accordion and switch are not working","tags":["tailwind-css","astrojs","daisyui"],"text":"Title: Tailwind-DaisyUI accordion and switch are not working\nTags: tailwind-css, astrojs, daisyui\nSource: Stack Overflow\n\nQuestion:\nI have set up Astro project that has Tailwind and Daisy UI installed, but I am unable to get Daisy controls to work. I copy/pasted the code from the accordion page, but when the page is rendered, the controls do not work. It's like the controls are static text. Range and rating seem to work, but then Switch acts just like a checkbox.\n\nhttps://i.sstatic.net/SaxFV.png\n\nHere is my tailwind.config.cjs\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: 'class',\n content: ['./src/**/*.{astro,html,svelte,js,ts,jsx,tsx}'],\n daisyui: {\n themes: ['light', 'dark']\n },\n theme: {\n extend: {\n fontSize: {\n '45xl': '2.7rem',\n '10xl': '10rem',\n '11xl': '12rem',\n '12xl': '14rem',\n '13xl': '16rem',\n '14xl': '18rem'\n }\n }\n },\n plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms'), require('daisyui')]\n}\n```\n\nIt looks like DaisyUI loads and the styling works. There are no errors in the DevTools console. What else can I check?\n\nhttps://i.sstatic.net/37kYM.png\n\n========================================\n\nTop Answer:\nIf you want to keep the `@tailwindcss/forms` plugin enabled, a quick solution to fix this is to add the `w-auto` and `h-auto` classes to the checkbox used by the collapse/accordion. A working example is:\n\n```\n\n \n \n Click me to show/hide content\n \n \n hello\n\n \n\n```\n\nSource\n\n========================================\n\nCode:\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: 'class',\n content: ['./src/**/*.{astro,html,svelte,js,ts,jsx,tsx}'],\n daisyui: {\n themes: ['light', 'dark']\n },\n theme: {\n extend: {\n fontSize: {\n '45xl': '2.7rem',\n '10xl': '10rem',\n '11xl': '12rem',\n '12xl': '14rem',\n '13xl': '16rem',\n '14xl': '18rem'\n }\n }\n },\n plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms'), require('daisyui')]\n}\n```\n\n```text\nrequire('@tailwindcss/forms')({ strategy: 'class' })\n```\n\n```text\n@tailwindcss/forms\n```\n\n```text\n@tailwindcss/forms\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nrequire('@tailwindcss/forms')\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n<div class=\"collapse bg-base-200\">\n <input type=\"checkbox w-auto h-auto\" /> \n <div class=\"collapse-title text-xl font-medium\">\n Click me to show/hide content\n </div>\n <div class=\"collapse-content\"> \n <p>hello</p>\n </div>\n</div>\n```\n\n```text\n@tailwindcss/forms\n```\n\n```text\nw-auto\n```\n\n```text\nh-auto\n```\n\n```text\n<input type=\"radio\" name=\"my-accordion-4\" checked=\"checked\" />\n```\n\n```text\n<input type=\"radio\" name=\"my-accordion-4\" defaultChecked />\n```\n\n```text\nJSX\n```\n\n```text\nrequire('@tailwindcss/forms')\n```\n\n========================================\n\nComments:\n- Thank you! I removed `@tailwindcss/forms` and the accordion worked. I would never have discovered this. Thanks for pointing it out.\n- In my case, it was conflicting with flowbite and its plugin in tailwind.config.ts file. I removed flowbite related lines and it worked.\n- needs to be\n- @Thomas Yeah, the example I used was for the collapse component, which is what powers the accordion and other ones.","metadata":{"transformedAt":"2026-08-18T18:33:42.917Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":157,"estimatedTokens":836}}410{"id":"stack-68835659","source":"stackoverflow","questionId":68835659,"title":"Is there any way to change image in tailwindcss when dark mode toggled?","tags":["javascript","reactjs","react-hooks","tailwind-css","darkmode"],"text":"Title: Is there any way to change image in tailwindcss when dark mode toggled?\nTags: javascript, reactjs, react-hooks, tailwind-css, darkmode\nSource: Stack Overflow\n\nQuestion:\nI was looking around, but couldn't find any related Q&A out there. I'm building a project in ReactJS with tailwindCSS, and implementing dark mode to the site. Everything works fine, but now I have some issues with a background image.\nI have set the two image in the `tailwind.config.js`\n\n```\ndarkMode: 'class',\n theme: {\n extend: {\n backgroundImage: (theme) => ({\n 'code': \"url('/src/components/About/coding-bg-dark.png')\",\n 'light-code': \"url('/src/components/About/lightcode.png')\",\n })\n },\n },\n```\n\nand have the classNames on the decent section\n\n```\n\n```\n\nbut when I toggle dark mode, the image doesn't change, the dark image stays on the light mode. Any idea how could I go around?\n\n========================================\n\nTop Answer:\nI use following\n\n```\n\n```\n\n========================================\n\nCode:\n```text\ndarkMode: 'class',\n theme: {\n extend: {\n backgroundImage: (theme) => ({\n 'code': \"url('/src/components/About/coding-bg-dark.png')\",\n 'light-code': \"url('/src/components/About/lightcode.png')\",\n })\n },\n },\n```\n\n```text\n<section id='introduction' className=\"bg-code dark:bg-light-code bg-cover bg-fixed flex flex-wrap content-center w-full md:h-screen\">\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmodule.exports = {\n darkMode: 'media',\n theme: {\n extend: {\n backgroundImage: (theme) => ({\n 'image-one':\n \"url('https://images.unsplash.com/photo-1629651480694-edb8451b31aa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80')\",\n 'image-two':\n \"url('https://images.unsplash.com/photo-1629651726230-6430554a8890?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2734&q=80')\",\n }),\n },\n },\n variants: {\n extend: {\n backgroundImage: ['dark'],\n },\n },\n plugins: [],\n}\n```\n\n```text\ndarkMode: 'media'\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n<img\n v-show=\"$colorMode.value === 'dark'\"\n src=\"~/assets/images/index/bg-1.jpg\"\n class=\"absolute w-full\"\n style=\"height: 50vh\"\n />\n <span\n v-show=\"$colorMode.value === 'dark'\"\n class=\"\n absolute\n w-full\n h-full\n bg-gradient-to-t\n from-gray-800\n to-transparent\n \"\n />\n <img\n v-show=\"$colorMode.value === 'light'\"\n src=\"~/assets/images/index/bg-2.jpg\"\n class=\"absolute w-full\"\n style=\"height: 50vh\"\n />\n <span\n v-show=\"$colorMode.value === 'light'\"\n class=\"\n absolute\n w-full\n h-full\n bg-gradient-to-tl\n from-gray-900\n to-transparent\n \"\n />\n```\n\n```html\n<div className=\"bg-Pic dark:bg-Pic-dark w-36 h-36\"></div>\n```\n\n```css\n.dark .dark\\:bg-Pic-dark {\n background-image: url(\"../images/pic-dark.png\");\n background-size: 100% 100%;\n}\n\n.bg-Pic {\n background-image: url(\"../images/pic-light.png\");\n background-size: 100% 100%;\n}\n```\n\n```text\ndiv\n```\n\n```text\nbackground-image\n```\n\n```text\nbackground-size\n```\n\n```text\n100%\n```\n\n```text\ndark\n```\n\n```text\nbackground-image\n```\n\n```text\n<img\n className=\"w-32 hidden dark:block\"\n src=\"/img/logo.png\"\n alt=\"\"\n/>\n<img\n className=\"w-32 block dark:hidden\"\n src=\"/img/logo-light.png\"\n alt=\"\"\n/>\n```\n\n========================================\n\nComments:\n- Thank you @Santeri-Sarle ! Yes, the problem was that I missed the extension of the variants from the `tailwind.config.js`, so luckily was just a one-liner. I am using class in the darkMode module, so the user can toggle between the light and dark mode and doesn't depend on system preferences, but it works with class as well. Have a good one, and thank you again.\n- Ah, yep, I missed that you already had `darkMode: 'class'`, but good that you got it to work regardless!\n- If you do it like that, you can't control the image via bundlers like webpack.\n- That's right, and would work as well. However Tailwind would lose its primary purpose of not using CSS\n- It's kind of like a brute-force approach. Maybe would be best to use it if no other solutions work.\n- Yes, I would agree with that!","metadata":{"transformedAt":"2026-08-18T18:33:42.917Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":193,"estimatedTokens":1099}}411{"id":"stack-76353036","source":"stackoverflow","questionId":76353036,"title":"Trouble with Dynamic Color in Tailwind Component","tags":["reactjs","tailwind-css"],"text":"Title: Trouble with Dynamic Color in Tailwind Component\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm having trouble understanding why the blue color is not working in my component. Could you please help me troubleshoot this issue on Stack Overflow? I have a Tag component that should apply different background and text colors based on the color prop provided. However, when I set the color prop to \"blue\", the expected blue color is not being applied to the component. I have tried various solutions, including dynamically constructing the class names and using the correct syntax for Tailwind CSS classes. However, I have been unsuccessful in resolving the issue. Any guidance or suggestions would be greatly appreciated. Thank you in advance for your assistance!\n\n```\nimport React from \"react\";\n\nexport default function Tag({ index, tag, color = \"red\" }) {\n return (\n \n \n {tag.text}\n \n \n );\n}\n```\n\n========================================\n\nTop Answer:\nWhat Wongjn wrote back in v3 is still completely relevant. With the introduction of the new CSS-first configuration in v4, the way safelisting is handled has changed, so I'll leave this here for you to stay informed about the updates:\n\n### Safelist\n\n- How is it possible to specify a safelist in TailwindCSS v4? Is it possible to list patterns and variants instead of full class names?\n\nSpecifically, the patterns in his answer can be written like this in v4:\n\n```\n@import \"tailwindcss\";\n\n@source inline \"text-{red,green,blue}-700\";\n@source inline \"bg-{red,green,blue}-300\";\n```\n\nAnd by combining bg, text and hover: variant from 50 to 950, the example would look like this:\n\n```\n@import \"tailwindcss\";\n\n@source inline \"{hover:,}{text,bg}-{red,green,blue}-{50,{100..900..100},950}\";\n```\n\n### Static theme variables\n\nIn addition to all this, a so-called static theme declaration option has been introduced. It doesn't generate the utilities themselves but places the corresponding variables into the generated CSS, making it easier to use those variables more dynamically even without utilities:\n\n- Generating all CSS variables with `@theme static { ... }`\n\n- Custom colors are not working as expected, despite the CSS-first declaration\n\n```\n@import \"tailwindcss\";\n\n@theme static {\n --color-primary: var(--color-red-500);\n --color-secondary: var(--color-blue-500);\n}\n```\n\nNow, if you haven't used the primary color in any form - for example, neither `bg-primary` nor `text-primary` nor in any other way - then originally `var(--color-primary)` would not be included in the generated CSS by `@theme { ... }`. However, due to the `@theme static { ... }` static import, it still gets included.\n\n```\nimport React from \"react\";\n\ntype ExampleProps = {\n type: \"primary\" | \"secondary\";\n};\n\nexport default function Example({ type }: ExampleProps) {\n return (\n \n This text uses {type} color\n \n\n );\n}\n```\n\n```\n\n```\n\n**Important**: `text-${type}` class name is still **invalid**! Keep in mind that the examples use CSS variables, which work independently of TailwindCSS.\n\n========================================\n\nCode:\n```js\nimport React from \"react\";\n\nexport default function Tag({ index, tag, color = \"red\" }) {\n return (\n <li\n key={index}\n className={`inline-flex items-center rounded-full px-3 py-2 text-xs font-bold uppercase bg-${color}-200 text-${color}-700`}\n >\n <a href={`/?=${tag.text.replace(/\\s/g, \"_\").toLowerCase()}`}>\n {tag.text}\n </a>\n </li>\n );\n}\n```\n\n```js\n<div class=\"text-{{ error ? 'red' : 'green' }}-600\"></div>\n```\n\n```js\n<div class=\"{{ error ? 'text-red-600' : 'text-green-600' }}\"></div>\n```\n\n```text\nexport default function Tag({ index, tag, color = \"bg-red-200 text-red-700\" }) {\n return (\n <li\n key={index}\n className={`… ${color}`}\n >\n```\n\n```text\nexport default function Tag({ index, tag, color = \"red\" }) {\n const DICTIONARY = {\n red: 'bg-red-200 text-red-700',\n // …\n };\n // …\n return (\n <li\n key={index}\n className={`… ${DICTIONARY[color]}`}\n >\n```\n\n```text\nexport default function Tag({ index, tag, color = \"red\" }) {\n const styles = {\n // Convert from `color` variable\n };\n // …\n return (\n <li\n key={index}\n className=\"…\"\n style={style}\n >\n```\n\n```js\nmodule.exports = {\n safelist: [\n { pattern: /^text-(red|green|blue)-700$/ },\n { pattern: /^bg-(red|green|blue)-200$/ },\n // …\n ],\n // …\n];\n```\n\n```text\ntext-red-600\n```\n\n```text\ntext-green-600\n```\n\n```text\nclassName\n```\n\n```text\ncolor\n```\n\n```text\nstyle\n```\n\n```text\ntheme\n```\n\n```text\nsafelist\n```\n\n```css\n@import \"tailwindcss\";\n\n@source inline \"text-{red,green,blue}-700\";\n@source inline \"bg-{red,green,blue}-300\";\n```\n\n```css\n@import \"tailwindcss\";\n\n@source inline \"{hover:,}{text,bg}-{red,green,blue}-{50,{100..900..100},950}\";\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme static {\n --color-primary: var(--color-red-500);\n --color-secondary: var(--color-blue-500);\n}\n```\n\n```js\nimport React from \"react\";\n\ntype ExampleProps = {\n type: \"primary\" | \"secondary\";\n};\n\nexport default function Example({ type }: ExampleProps) {\n return (\n <p style={{ color: `var(--color-${type})` }}>\n This text uses {type} color\n </p>\n );\n}\n```\n\n```html\n<Example type=\"primary\" />\n<Example type=\"secondary\" />\n```\n\n```text\n@theme static { ... }\n```\n\n```text\nbg-primary\n```\n\n```text\ntext-primary\n```\n\n```text\nvar(--color-primary)\n```\n\n```text\n@theme { ... }\n```\n\n```text\n@theme static { ... }\n```\n\n```text\ntext-${type}\n```\n\n========================================\n\nComments:\n- Does this answer your question? Dynamically build classnames in TailwindCss","metadata":{"transformedAt":"2026-08-18T18:33:42.917Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":26,"totalLines":268,"estimatedTokens":1406}}412{"id":"stack-71485050","source":"stackoverflow","questionId":71485050,"title":"how to make a table scrollable with html + Tailwind CSS","tags":["html","css","laravel","tailwind-css"],"text":"Title: how to make a table scrollable with html + Tailwind CSS\nTags: html, css, laravel, tailwind-css\nSource: Stack Overflow\n\nQuestion:\ni have this table like in the image below, it is overflow from the right side, how can I add scrolling, I am using Tailwind CSS like in this code:\n\n```\n\n \n \n No.\n First Name\n Second Name\n Third Name\n Department\n Stage\n Email\n Roles\n status\n University Email\n University Password\n Students Files\n Actions\n \n \n \n\n @if(isset($users)) @include('dashboard.users.partials.users_details') @endif\n @if(isset($searches)) @include('dashboard.users.partials.search') @endif\n @if(isset($statusSearch)) @include('dashboard.users.partials.status_search') @endif\n\n \n \n```\n\nhttps://i.sstatic.net/Qggv2.png\n\n========================================\n\nTop Answer:\n```\n you can try this\n```\n\ntailewindcss link\n\n========================================\n\nCode:\n```text\n<table class=\"table-auto overflow-scroll\">\n <thead>\n <tr class=\"bg-gray-100\">\n <th class=\"w-20 px-4 py-2\">No.</th>\n <th class=\"px-4 py-2\">First Name</th>\n <th class=\"px-4 py-2\">Second Name</th>\n <th class=\"px-4 py-2\">Third Name</th>\n <th class=\"px-4 py-2\">Department</th>\n <th class=\"px-4 py-2\">Stage</th>\n <th class=\"px-4 py-2\">Email</th>\n <th class=\"px-4 py-2\">Roles</th>\n <th class=\"px-4 py-2\">status</th>\n <th class=\"px-4 py-2\">University Email</th>\n <th class=\"px-4 py-2\">University Password</th>\n <th class=\"px-4 py-2\">Students Files</th>\n <th class=\"px-4 py-2\">Actions</th>\n </tr>\n </thead>\n <tbody>\n\n @if(isset($users)) @include('dashboard.users.partials.users_details') @endif\n @if(isset($searches)) @include('dashboard.users.partials.search') @endif\n @if(isset($statusSearch)) @include('dashboard.users.partials.status_search') @endif\n\n </tbody>\n </table>\n```\n\n```text\n<div class='overflow-x'>\n <table class='table-auto overflow-scroll w-full'>\n <thead>\n <tr class='bg-gray-100'>\n <th class='w-20 px-4 py-2'>No.</th>\n <th class='px-4 py-2'>First Name</th>\n <th class='px-4 py-2'>Second Name</th>\n <th class='px-4 py-2'>Third Name</th>\n <th class='px-4 py-2'>Department</th>\n <th class='px-4 py-2'>Stage</th>\n <th class='px-4 py-2'>Email</th>\n <th class='px-4 py-2'>Roles</th>\n <th class='px-4 py-2'>status</th>\n <th class='px-4 py-2'>University Email</th>\n <th class='px-4 py-2'>University Password</th>\n <th class='px-4 py-2'>Students Files</th>\n <th class='px-4 py-2'>Actions</th>\n </tr>\n </thead>\n <tbody>\n @if(isset($users))\n @include('dashboard.users.partials.users_details') @endif\n @if(isset($searches))\n @include('dashboard.users.partials.search') @endif\n @if(isset($statusSearch))\n @include('dashboard.users.partials.status_search') @endif\n </tbody>\n </table>\n </div>\n```\n\n```text\n<style>\n #table {\n width: 50%;\n height: 100%;\n overflow: scroll;\n}\n</style>\n <div id=\"table\">\n <table>\n <thead>\n <tr class=\"bg-gray-100\">\n <th class=\"w-20 px-4 py-2\">No.</th>\n <th class=\"px-4 py-2\">First Name</th>\n <th class=\"px-4 py-2\">Second Name</th>\n <th class=\"px-4 py-2\">Third Name</th>\n <th class=\"px-4 py-2\">Department</th>\n <th class=\"px-4 py-2\">Stage</th>\n <th class=\"px-4 py-2\">Email</th>\n <th class=\"px-4 py-2\">Roles</th>\n <th class=\"px-4 py-2\">status</th>\n <th class=\"px-4 py-2\">University Email</th>\n <th class=\"px-4 py-2\">University Password</th>\n <th class=\"px-4 py-2\">Students Files</th>\n <th class=\"px-4 py-2\">Actions</th>\n </tr>\n </thead>\n <tbody>\n\n @if(isset($users)) @include('dashboard.users.partials.users_details') @endif\n @if(isset($searches)) @include('dashboard.users.partials.search') @endif\n @if(isset($statusSearch)) @include('dashboard.users.partials.status_search') @endif\n\n </tbody>\n </table>\n</div>\n```\n\n```text\n<div class=\"overflow-auto ...\"></div> you can try this\n```\n\n```text\n<table class=\"table-auto overflow-x-scroll w-full\">\n <thead>\n <tr class=\"bg-gray-100\">\n <th class=\"w-20 px-4 py-2\">No.</th>\n <th class=\"px-4 py-2\">First Name</th>\n <th class=\"px-4 py-2\">Second Name</th>\n <th class=\"px-4 py-2\">Third Name</th>\n <th class=\"px-4 py-2\">Department</th>\n <th class=\"px-4 py-2\">Stage</th>\n <th class=\"px-4 py-2\">Email</th>\n <th class=\"px-4 py-2\">Roles</th>\n <th class=\"px-4 py-2\">status</th>\n <th class=\"px-4 py-2\">University Email</th>\n <th class=\"px-4 py-2\">University Password</th>\n <th class=\"px-4 py-2\">Students Files</th>\n <th class=\"px-4 py-2\">Actions</th>\n </tr>\n </thead>\n <tbody>\n\n @if(isset($users)) @include('dashboard.users.partials.users_details') @endif\n @if(isset($searches)) @include('dashboard.users.partials.search') @endif\n @if(isset($statusSearch)) @include('dashboard.users.partials.status_search') @endif\n\n </tbody>\n </table>\n```\n\n========================================\n\nComments:\n- Doing this means your browser no longer recognises the table as a table because you have changed `display: table` to `display: block`. This has lots of unintended consequences.","metadata":{"transformedAt":"2026-08-18T18:33:42.917Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":186,"estimatedTokens":1684}}413{"id":"stack-72667795","source":"stackoverflow","questionId":72667795,"title":"Can I create a custom class with arbitrary values Tailwindcss","tags":["tailwind-css","tailwind-ui"],"text":"Title: Can I create a custom class with arbitrary values Tailwindcss\nTags: tailwind-css, tailwind-ui\nSource: Stack Overflow\n\nQuestion:\nI want to create a class in Tailwindcss with arbitrary values\nfor example\n\nHTML\n\n```\n\n```\n\nCSS\n\n```\n@layer componenets {\n .my-custom-class {\n @apply bg-[--here-arbitrary-value]; /** the value is #fff */\n }\n}\n```\n\n========================================\n\nCode:\n```html\n<button class=\"my-custom-class[#fff]\" />\n```\n\n```css\n@layer componenets {\n .my-custom-class {\n @apply bg-[--here-arbitrary-value]; /** the value is #fff */\n }\n}\n```\n\n```js\nconst plugin = require('tailwindcss/plugin')\nconst flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette')\n\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n from: {\n config: {\n 500: 'yellow', // for example purposes\n },\n },\n },\n },\n },\n plugins: [\n plugin(function ({ matchUtilities, theme }) {\n matchUtilities(\n {\n // Class name\n 'my-custom-class': (value) => {\n return {\n backgroundColor: value, // Desired CSS properties here\n color: theme('colors.white') // Just for example non-dynamic value\n }\n },\n },\n // Default values.\n // `flattenColorPalette` required to support native Tailwind color classes like `red-500`, `amber-300`, etc. \n // In most cases you may just pass `theme('config-key')`, where `config-key` could be any (`spacing`, `fontFamily`, `foo`, `bar`)\n { values: flattenColorPalette(theme('colors')) } \n )\n }),\n ],\n}\n```\n\n```html\n<div class=\"my-custom-class-[#000] my-4 p-6\">JIT as HEX</div>\n\n<div class=\"my-custom-class-[red] my-4 p-6\">JIT as string</div>\n\n<div class=\"my-custom-class-[rgb(0,0,0)] my-4 p-6\">JIT as RGB</div>\n\n<div class=\"my-custom-class-blue-500 my-4 p-6\">Using Tailwind Colors</div>\n\n<div class=\"my-custom-class-from-config-500 my-4 p-6 text-black\">Using extended colors from config. NOTE: `text-black` doesn't applied!</div>\n```\n\n```html\n<div class=\"bg-red-500 my-custom-class-[yellow]\">\n This has yellow background\n</div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.917Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":94,"estimatedTokens":541}}414{"id":"stack-77027792","source":"stackoverflow","questionId":77027792,"title":"Storybook Question: Local fonts not loading - Next 13 + Tailwind + Storybook 7","tags":["next.js","fonts","tailwind-css","storybook"],"text":"Title: Storybook Question: Local fonts not loading - Next 13 + Tailwind + Storybook 7\nTags: next.js, fonts, tailwind-css, storybook\nSource: Stack Overflow\n\nQuestion:\n### Initial Question:\n\nMy setup all works as it should, but I have one problem: my custom fonts don't load in Storybook.\n\n**(My main question is about the missing CSS variable, go to the bottom to see it. I'm just posting all the code for reference.)**\n\nPart of the directory structure:\n\nHere is where I am fixing the local font with Next, in \"app/(site)/layout.tsx\":\n\n**layout.tsx**\n\n```\nimport \"../styles/globals.css\"\nimport type { Metadata } from \"next\"\nimport localFont from \"@next/font/local\"\nimport Header from \"@/app/components/Header\"\nimport Footer from \"@/app/components/Footer\"\nimport { getCachedClient } from \"@/sanity/lib/getClient\"\nimport SiteConfigQuery from \"@/sanity/queries/site-config/siteConfigQuery\"\nimport { MobileDrawer } from \"../components/MobileDrawer\"\n\nconst tTFirs = localFont({\n src: [\n {\n path: \"../../public/fonts/TypeType - TT Firs Regular.otf\",\n weight: \"300\"\n },\n {\n path: \"../../public/fonts/TypeType - TT Firs Medium.otf\",\n weight: \"400\"\n },\n {\n path: \"../../public/fonts/TypeType - TT Firs Medium Italic.otf\",\n weight: \"400\",\n style: \"italic\"\n },\n {\n path: \"../../public/fonts/TypeType - TT Firs Italic.otf\",\n weight: \"400\",\n style: \"italic\"\n },\n {\n path: \"../../public/fonts/TypeType - TT Firs Bold.otf\",\n weight: \"700\"\n },\n {\n path: \"../../public/fonts/TypeType - TT Firs Bold Italic.otf\",\n weight: \"700\",\n style: \"italic\"\n }\n ],\n variable: \"--font-tt-firs\"\n})\n\nexport const metadata: Metadata = {\n title: \"Next sanity starter\",\n description: \"Generated by create next app\"\n}\n\nexport default async function RootLayout({ children }: { children: React.ReactNode }) {\n const config = await getCachedClient(undefined)(SiteConfigQuery.GET_BY_ID)\n\n return (\n \n \n {\n \n \n \n \n {children}\n \n \n \n }\n \n \n )\n}\n```\n\n**.storybook/main.ts**\n\n```\nimport type { StorybookConfig } from \"@storybook/nextjs\"\n\nconst config: StorybookConfig = {\n stories: [\"../app/**/*.mdx\", \"../app/**/*.stories.@(js|jsx|mjs|ts|tsx)\"],\n addons: [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/addon-onboarding\",\n \"@storybook/addon-interactions\",\n {\n name: \"@storybook/addon-styling\",\n options: {\n // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md\n // For more details on this addon's options.\n postCss: {\n implementation: require.resolve(\"postcss\")\n }\n }\n }\n ],\n framework: {\n name: \"@storybook/nextjs\",\n options: {}\n },\n docs: {\n autodocs: \"tag\"\n },\n staticDirs: [\n {\n from: \"../public/fonts\",\n to: \"public/fonts\"\n },\n \"../public\"\n ]\n}\nexport default config\n```\n\n**.storybook/preview.ts**\n\n```\nimport type { Preview } from \"@storybook/react\"\nimport \"../app/styles/globals.css\"\n\nconst preview: Preview = {\n parameters: {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/\n }\n }\n }\n}\n\nexport default preview\n```\n\n**tailwind.config.js**\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: [\"class\"],\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/**/*.{js,ts,jsx,tsx,mdx}\"\n ],\n theme: {\n container: {\n center: true,\n padding: \"0rem\",\n screens: {\n \"3xl\": \"2200px\"\n }\n },\n extend: {\n fontFamily: {\n sans: [\"var(--font-tt-firs)\"]\n },\n screens: {\n xs: \"460px\",\n \"3xl\": \"2200px\"\n },\n ...\n }\n },\n plugins: [require(\"tailwindcss-animate\")]\n}\n```\n\n**app/styles/globals.css**\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@import url(./projectsGrid.css);\n@import url(./morphingBackground.css);\n@import url(./mobileDrawer.css);\n@import url(./afters.css);\n\n:root {\n --morphing-bg-height: 65.625rem;\n}\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n\n --primary: 0 0% 9%;\n --primary-foreground: 0 0% 98%;\n\n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n\n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n\n --accent: 0 0% 96.1%;\n --accent-foreground: 0 0% 9%;\n\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n\n --border: 0 0% 89.8%;\n --input: 0 0% 89.8%;\n --ring: 0 0% 3.9%;\n\n --radius: 0.5rem;\n\n --size-xs: 460px;\n --size-sm: 640px;\n --size-md: 768px;\n --size-lg: 1024px;\n --size-xl: 1280px;\n --size-2xl: 1536px;\n --size-3xl: 2200px;\n\n --nav-item-width: 7.625rem;\n }\n\n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n\n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n\n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n\n --primary: 0 0% 98%;\n --primary-foreground: 0 0% 9%;\n\n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n\n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n\n --accent: 0 0% 14.9%;\n --accent-foreground: 0 0% 98%;\n\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n\n --border: 0 0% 14.9%;\n --input: 0 0% 14.9%;\n --ring: 0 0% 83.1%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n\n @layer base {\n h1 {\n @apply ls-h1;\n }\n\n h2 {\n @apply ls-h2;\n }\n\n h3 {\n @apply ls-h3;\n }\n\n h4 {\n @apply ls-h4;\n }\n }\n}\n\n@layer components {\n .ls-h1 {\n color: white;\n text-align: center;\n font-size: 4rem;\n font-style: normal;\n font-weight: bold;\n line-height: 105%;\n letter-spacing: -0.12rem;\n }\n\n .ls-h2 {\n color: white;\n font-family: helvetica;\n text-align: center;\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 125%;\n letter-spacing: -0.01375rem;\n }\n\n .ls-h3 {\n @apply text-base;\n }\n\n .ls-h4 {\n @apply text-base;\n }\n}\n\n@layer utilities {\n .flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody.lock-scroll {\n overflow: hidden;\n}\n\nbody.lock-scroll #home {\n pointer-events: none;\n}\n```\n\nSo, we can see in the layout.tsx file, I am doing this: ``\n\nThis means I am attaching the variable to the body.\n\nSo then when I am inspecting the font in the dev tools, I can see the variable is not there at all. (It is there as it should in my normal dev environment, so no problems there.)\n\nI've tried a bunch of different combination with the staticDirs setting as well, as discussed here: storybook/nextjs font local link\n\n### Update, 1 Day Later\n\nSo I had a bit of progress:\n\n```\nimport * as React from \"react\"\nimport type { Preview } from \"@storybook/react\"\nimport \"../app/styles/globals.css\"\nimport { tTFirs } from \"../app/lib/fonts\"\n\nconst preview: Preview = {\n parameters: {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/\n }\n }\n },\n decorators: [\n Story => (\n \n \n \n )\n ]\n}\n\nexport default preview\n```\n\nI added this decorator in preview.tsx (formerly preview.ts), and now the CSS variable is at least recognized. Also the fonts are in the stylesheet, as we can see in this picture:\n\nhttps://i.sstatic.net/gRfuc.png\nhttps://i.sstatic.net/bcZ77.png\n\nBut the images are still not loading. (In my normal environment, no problem. The fonts are loading from \"__next/static/media). For simplicity I put all my fonts into my public folder, like this:\n\nhttps://i.sstatic.net/Vs3F1.png\n\nI an image in there as well, just to check that my `staticDirs: [\"../public\"]` was indeed working. And that image is loading up fine.\n\nWe can see here that the image is given to me by Storybook:\n\nhttps://i.sstatic.net/4dpj2.png\n\nBut no fonts, as far as I can see. The text just has the fallback font.\n\n========================================\n\nCode:\n```text\nimport \"../styles/globals.css\"\nimport type { Metadata } from \"next\"\nimport localFont from \"@next/font/local\"\nimport Header from \"@/app/components/Header\"\nimport Footer from \"@/app/components/Footer\"\nimport { getCachedClient } from \"@/sanity/lib/getClient\"\nimport SiteConfigQuery from \"@/sanity/queries/site-config/siteConfigQuery\"\nimport { MobileDrawer } from \"../components/MobileDrawer\"\n\nconst tTFirs = localFont({\n src: [\n {\n path: \"../../public/fonts/TypeType - TT Firs Regular.otf\",\n weight: \"300\"\n },\n {\n path: \"../../public/fonts/TypeType - TT Firs Medium.otf\",\n weight: \"400\"\n },\n {\n path: \"../../public/fonts/TypeType - TT Firs Medium Italic.otf\",\n weight: \"400\",\n style: \"italic\"\n },\n {\n path: \"../../public/fonts/TypeType - TT Firs Italic.otf\",\n weight: \"400\",\n style: \"italic\"\n },\n {\n path: \"../../public/fonts/TypeType - TT Firs Bold.otf\",\n weight: \"700\"\n },\n {\n path: \"../../public/fonts/TypeType - TT Firs Bold Italic.otf\",\n weight: \"700\",\n style: \"italic\"\n }\n ],\n variable: \"--font-tt-firs\"\n})\n\nexport const metadata: Metadata = {\n title: \"Next sanity starter\",\n description: \"Generated by create next app\"\n}\n\nexport default async function RootLayout({ children }: { children: React.ReactNode }) {\n const config = await getCachedClient(undefined)(SiteConfigQuery.GET_BY_ID)\n\n return (\n <html lang=\"en\">\n <body className={`font-sans ${tTFirs.variable}`}>\n {\n <main className=\"bg-black\">\n <div className=\"container mx-auto\">\n <Header config={config[0]} />\n <MobileDrawer config={config[0]} />\n {children}\n <Footer config={config[0]} />\n </div>\n </main>\n }\n </body>\n </html>\n )\n}\n```\n\n```text\nimport type { StorybookConfig } from \"@storybook/nextjs\"\n\nconst config: StorybookConfig = {\n stories: [\"../app/**/*.mdx\", \"../app/**/*.stories.@(js|jsx|mjs|ts|tsx)\"],\n addons: [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/addon-onboarding\",\n \"@storybook/addon-interactions\",\n {\n name: \"@storybook/addon-styling\",\n options: {\n // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md\n // For more details on this addon's options.\n postCss: {\n implementation: require.resolve(\"postcss\")\n }\n }\n }\n ],\n framework: {\n name: \"@storybook/nextjs\",\n options: {}\n },\n docs: {\n autodocs: \"tag\"\n },\n staticDirs: [\n {\n from: \"../public/fonts\",\n to: \"public/fonts\"\n },\n \"../public\"\n ]\n}\nexport default config\n```\n\n```text\nimport type { Preview } from \"@storybook/react\"\nimport \"../app/styles/globals.css\"\n\nconst preview: Preview = {\n parameters: {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/\n }\n }\n }\n}\n\nexport default preview\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: [\"class\"],\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/**/*.{js,ts,jsx,tsx,mdx}\"\n ],\n theme: {\n container: {\n center: true,\n padding: \"0rem\",\n screens: {\n \"3xl\": \"2200px\"\n }\n },\n extend: {\n fontFamily: {\n sans: [\"var(--font-tt-firs)\"]\n },\n screens: {\n xs: \"460px\",\n \"3xl\": \"2200px\"\n },\n ...\n }\n },\n plugins: [require(\"tailwindcss-animate\")]\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@import url(./projectsGrid.css);\n@import url(./morphingBackground.css);\n@import url(./mobileDrawer.css);\n@import url(./afters.css);\n\n:root {\n --morphing-bg-height: 65.625rem;\n}\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n\n --primary: 0 0% 9%;\n --primary-foreground: 0 0% 98%;\n\n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n\n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n\n --accent: 0 0% 96.1%;\n --accent-foreground: 0 0% 9%;\n\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n\n --border: 0 0% 89.8%;\n --input: 0 0% 89.8%;\n --ring: 0 0% 3.9%;\n\n --radius: 0.5rem;\n\n --size-xs: 460px;\n --size-sm: 640px;\n --size-md: 768px;\n --size-lg: 1024px;\n --size-xl: 1280px;\n --size-2xl: 1536px;\n --size-3xl: 2200px;\n\n --nav-item-width: 7.625rem;\n }\n\n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n\n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n\n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n\n --primary: 0 0% 98%;\n --primary-foreground: 0 0% 9%;\n\n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n\n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n\n --accent: 0 0% 14.9%;\n --accent-foreground: 0 0% 98%;\n\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n\n --border: 0 0% 14.9%;\n --input: 0 0% 14.9%;\n --ring: 0 0% 83.1%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n\n body {\n @apply bg-background text-foreground;\n }\n\n @layer base {\n h1 {\n @apply ls-h1;\n }\n\n h2 {\n @apply ls-h2;\n }\n\n h3 {\n @apply ls-h3;\n }\n\n h4 {\n @apply ls-h4;\n }\n }\n}\n\n@layer components {\n .ls-h1 {\n color: white;\n text-align: center;\n font-size: 4rem;\n font-style: normal;\n font-weight: bold;\n line-height: 105%;\n letter-spacing: -0.12rem;\n }\n\n .ls-h2 {\n color: white;\n font-family: helvetica;\n text-align: center;\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 125%;\n letter-spacing: -0.01375rem;\n }\n\n .ls-h3 {\n @apply text-base;\n }\n\n .ls-h4 {\n @apply text-base;\n }\n}\n\n@layer utilities {\n .flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody.lock-scroll {\n overflow: hidden;\n}\n\nbody.lock-scroll #home {\n pointer-events: none;\n}\n```\n\n```text\nimport * as React from \"react\"\nimport type { Preview } from \"@storybook/react\"\nimport \"../app/styles/globals.css\"\nimport { tTFirs } from \"../app/lib/fonts\"\n\nconst preview: Preview = {\n parameters: {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/\n }\n }\n },\n decorators: [\n Story => (\n <div className={`${`font-sans ${tTFirs.variable}`}`}>\n <Story />\n </div>\n )\n ]\n}\n\nexport default preview\n```\n\n```text\n<body className={`font-sans ${tTFirs.variable}`}>\n```\n\n```text\nstaticDirs: [\"../public\"]\n```\n\n```text\nimport type { StorybookConfig } from \"@storybook/nextjs\"\n\nconst config: StorybookConfig = {\n stories: [\"../app/**/*.mdx\", \"../app/**/*.stories.@(js|jsx|mjs|ts|tsx)\"],\n addons: [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/addon-onboarding\",\n \"@storybook/addon-interactions\",\n {\n name: \"@storybook/addon-styling\",\n options: {\n // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md\n // For more details on this addon's options.\n postCss: {\n implementation: require.resolve(\"postcss\")\n }\n }\n }\n ],\n framework: {\n name: \"@storybook/nextjs\",\n options: {}\n },\n docs: {\n autodocs: \"tag\"\n },\n staticDirs: [\"../public\", { from: \"../public/fonts\", to: \"/fonts\" }]\n}\nexport default config\n```\n\n```text\nimport \"../styles/globals.css\"\nimport type { Metadata } from \"next\"\nimport Header from \"@/app/components/Header\"\nimport Footer from \"@/app/components/Footer\"\nimport { getCachedClient } from \"@/sanity/lib/getClient\"\nimport SiteConfigQuery from \"@/sanity/queries/site-config/siteConfigQuery\"\nimport { MobileDrawer } from \"../components/MobileDrawer\"\nimport { tTFirs } from \"../lib/fonts\"\n\nexport const metadata: Metadata = {\n title: \"Next sanity starter\",\n description: \"Generated by create next app\"\n}\n\nexport default async function RootLayout({ children }: { children: React.ReactNode }) {\n const config = await getCachedClient(undefined)(SiteConfigQuery.GET_BY_ID)\n\n return (\n <html lang=\"en\">\n <body className={`font-sans ${tTFirs.variable}`}>\n {\n <main className=\"bg-black\">\n <div className=\"container mx-auto\">\n <Header config={config[0]} />\n <MobileDrawer config={config[0]} />\n {children}\n <Footer config={config[0]} />\n </div>\n </main>\n }\n </body>\n </html>\n )\n}\n```\n\n```text\nimport localFont from \"next/font/local\"\n\nexport const tTFirs = localFont({\n src: [\n {\n path: \"../../public/fonts/TT-Firs-Regular.otf\",\n weight: \"300\"\n },\n {\n path: \"../../public/fonts/TT-Firs-Medium.otf\",\n weight: \"400\"\n },\n {\n path: \"../../public/fonts/TT-Firs-Medium-Italic.otf\",\n weight: \"400\",\n style: \"italic\"\n },\n {\n path: \"../../public/fonts/TT-Firs-Italic.otf\",\n weight: \"400\",\n style: \"italic\"\n },\n {\n path: \"../../public/fonts/TT-Firs-Bold.otf\",\n weight: \"700\"\n },\n {\n path: \"../../public/fonts/TT-Firs-Bold-Italic.otf\",\n weight: \"700\",\n style: \"italic\"\n }\n ],\n variable: \"--font-tt-firs\"\n})\n```\n\n```text\nimport * as React from \"react\"\nimport type { Preview } from \"@storybook/react\"\nimport localFont from \"next/font/local\"\nimport \"../app/styles/globals.css\"\n\nexport const tTFirs = localFont({\n src: [\n {\n path: \"../fonts/TT-Firs-Regular.otf\",\n weight: \"300\"\n },\n {\n path: \"../fonts/TT-Firs-Medium.otf\",\n weight: \"400\"\n },\n {\n path: \"../fonts/TT-Firs-Medium-Italic.otf.otf\",\n weight: \"400\",\n style: \"italic\"\n },\n {\n path: \"../fonts/TT-Firs-Italic.otf\",\n weight: \"400\",\n style: \"italic\"\n },\n {\n path: \"../fonts/TT-Firs-Bold.otf\",\n weight: \"700\"\n },\n {\n path: \"../fonts/TT-Firs-Bold-Italic.otf\",\n weight: \"700\",\n style: \"italic\"\n }\n ],\n variable: \"--font-tt-firs\"\n})\n\nconst preview: Preview = {\n parameters: {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/\n }\n }\n },\n decorators: [\n Story => (\n <div className={`${`font-sans ${tTFirs.variable}`}`}>\n <Story />\n </div>\n )\n ]\n}\n\nexport default preview\n```\n\n```text\n{\n path: \"../fonts/TT-Firs-Medium-Italic.otf\",\n weight: \"400\",\n style: \"italic\"\n}\n```\n\n```text\n[\"../public\"]\n```\n\n========================================\n\nComments:\n- great job bro. you saved my day\n- I also had to mention `next.config.js` path in `.stotybook/main.ts`. `framework: { name: \"@storybook/nextjs\", nextConfigPath: path.resolve(__dirname, \"../next.config.js\"), }`\n- It's good. Thanks, But use the font definition twice (one in font.ts, on in ./storybook/preview.tsx) is not a good idea. So if there is another solution, it will be cool","metadata":{"transformedAt":"2026-08-18T18:33:42.917Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":965,"estimatedTokens":5180}}415{"id":"stack-71711854","source":"stackoverflow","questionId":71711854,"title":"Is there a better way to put classes into html and body tags in next.js?","tags":["reactjs","next.js","tailwind-css"],"text":"Title: Is there a better way to put classes into html and body tags in next.js?\nTags: reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm working with Next.js and Tailwind, and to get some elements displaying correctly I need to put some style classes into `` and ``.\n\nI did this to my `MyApp`\n\n```\nfunction MyApp({ Component, pageProps}: AppProps) {\n useEffect(() => {\n document.querySelector(\"html\").classList.add(\"h-full\");\n document.querySelector(\"body\").classList.add(\"h-full\");\n document.querySelector(\"#__next\").classList.add(\"h-full\");\n });\n\n return (\n \n )\n}\n```\n\nThat's working... but I would like to know if there any other way of doing, or more elegant solution.\n\n========================================\n\nTop Answer:\nI am using Next.js functional component and this worked for me:\n\n```\nuseEffect(\n () => {\n if (modalOpen) {\n document\n .querySelector(\"html\")\n ?.classList\n .add(\"!overflow-y-hidden\");\n } else {\n document\n .querySelector(\"html\")\n ?.classList\n .remove(\"!overflow-y-hidden\");\n }\n },\n [modalOpen]\n);\n```\n\n========================================\n\nCode:\n```js\nfunction MyApp({ Component, pageProps}: AppProps) {\n useEffect(() => {\n document.querySelector(\"html\").classList.add(\"h-full\");\n document.querySelector(\"body\").classList.add(\"h-full\");\n document.querySelector(\"#__next\").classList.add(\"h-full\");\n });\n\n return (\n <Component {...pageProps} />\n )\n}\n```\n\n```text\n<html>\n```\n\n```text\n<body>\n```\n\n```text\nMyApp\n```\n\n```text\nimport { Html, Head, Main, NextScript } from 'next/document'\n\nexport default function Document() {\n return (\n <Html lang=\"en-us\" className=\"h-full\">\n <Head />\n <body className=\"h-full\">\n <Main />\n <NextScript />\n </body>\n </Html>\n )\n}\n```\n\n```text\n_document.tsx\n```\n\n```js\nuseEffect(\n () => {\n if (modalOpen) {\n document\n .querySelector(\"html\")\n ?.classList\n .add(\"!overflow-y-hidden\");\n } else {\n document\n .querySelector(\"html\")\n ?.classList\n .remove(\"!overflow-y-hidden\");\n }\n },\n [modalOpen]\n);\n```\n\n========================================\n\nComments:\n- Thanks for your response, but it is not in the context since the problem was to apply `h-full` for all the page, not only to a modal as your code shows.","metadata":{"transformedAt":"2026-08-18T18:33:42.917Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":121,"estimatedTokens":606}}416{"id":"stack-79308431","source":"stackoverflow","questionId":79308431,"title":"Tailwind 'dark:' not working with Next 15, next-themes, and Tailwind 4","tags":["reactjs","next.js","tailwind-css","themes","darkmode"],"text":"Title: Tailwind 'dark:' not working with Next 15, next-themes, and Tailwind 4\nTags: reactjs, next.js, tailwind-css, themes, darkmode\nSource: Stack Overflow\n\nQuestion:\nI've got the light mode switch working, but now Tailwind's 'dark:' class modifier does not work.\n\nFollowing these instructions: Implementing Dark Mode and Theme Switching using Tailwind v4 and Next.js\n\nReproduce (enter through npx create):\n\n```\nnpx create-next-app@latest\nnpm install tailwindcss@next @tailwindcss/postcss@next\nnpm install next-themes\n```\n\nGlobal CSS (replace @tailwind lines for tailwind 4):\n\n./src/app/global.css\n\n```\n@import \"tailwindcss\";\n@variant dark (&:where([data-theme=\"dark\"]));\n```\n\n./postcss.config.mjs\n\n```\nexport default {\n plugins: {\n '@tailwindcss/postcss': {},\n },\n};\n```\n\n./src/components/theme/ThemeSelect.jsx\n\n```\n'use client'\n\nimport { useTheme } from 'next-themes'\n\nexport default function ThemeSelect() {\n const { theme, setTheme } = useTheme();\n\n return (\n setTheme(e.target.value)}\n >\n System\n Light\n Dark\n \n );\n}\n```\n\nLayout.tsx\n\n```\nimport type { Metadata } from \"next\";\nimport { Geist, Geist_Mono } from \"next/font/google\";\nimport \"./globals.css\";\nimport { ThemeProvider } from \"next-themes\";\n\nconst geistSans = Geist({\n variable: \"--font-geist-sans\",\n subsets: [\"latin\"],\n});\n\nconst geistMono = Geist_Mono({\n variable: \"--font-geist-mono\",\n subsets: [\"latin\"],\n});\n\nexport const metadata: Metadata = {\n title: \"Create Next App\",\n description: \"Generated by create next app\",\n};\n\nexport default function RootLayout({\n children,\n}: Readonly) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n```\n\n./src/app/page.jsx\n\n```\nimport Image from \"next/image\";\nimport ThemeSelect from \"../components/theme/ThemeSelect\"\n\nexport default function Home() {\n return (\n \n \n \n\n \n\n \n \n Get started by editing{\" \"}\n `src/app/page.tsx`\n .\n \n \n- Save and see your changes instantly.\n \n \n \n );\n}\n```\n\n`dark:invert` and `text-black dark:text-green-400` have no effect\n\n========================================\n\nCode:\n```text\nnpx create-next-app@latest\nnpm install tailwindcss@next @tailwindcss/postcss@next\nnpm install next-themes\n```\n\n```text\n@import \"tailwindcss\";\n@variant dark (&:where([data-theme=\"dark\"]));\n```\n\n```text\nexport default {\n plugins: {\n '@tailwindcss/postcss': {},\n },\n};\n```\n\n```text\n'use client'\n\nimport { useTheme } from 'next-themes'\n\nexport default function ThemeSelect() {\n const { theme, setTheme } = useTheme();\n\n return (\n <select title='theme switcher'\n value={theme}\n onChange={(e) => setTheme(e.target.value)}\n >\n <option value=\"system\">System</option>\n <option value=\"light\">Light</option>\n <option value=\"dark\">Dark</option>\n </select>\n );\n}\n```\n\n```text\nimport type { Metadata } from \"next\";\nimport { Geist, Geist_Mono } from \"next/font/google\";\nimport \"./globals.css\";\nimport { ThemeProvider } from \"next-themes\";\n\nconst geistSans = Geist({\n variable: \"--font-geist-sans\",\n subsets: [\"latin\"],\n});\n\nconst geistMono = Geist_Mono({\n variable: \"--font-geist-mono\",\n subsets: [\"latin\"],\n});\n\nexport const metadata: Metadata = {\n title: \"Create Next App\",\n description: \"Generated by create next app\",\n};\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode;\n}>) {\n return (\n <html lang=\"en\">\n <body\n className={`${geistSans.variable} ${geistMono.variable} antialiased`}\n >\n <ThemeProvider attribute=\"data-theme\" enableSystem>\n {children}\n </ThemeProvider>\n </body>\n </html>\n );\n}\n```\n\n```text\nimport Image from \"next/image\";\nimport ThemeSelect from \"../components/theme/ThemeSelect\"\n\nexport default function Home() {\n return (\n <div className=\"grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]\">\n <main className=\"flex flex-col gap-8 row-start-2 items-center sm:items-start\">\n <Image\n className=\"dark:invert\"\n src=\"/next.svg\"\n alt=\"Next.js logo\"\n width={180}\n height={38}\n priority\n />\n\n <ThemeSelect />\n\n <ol className=\"list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]\">\n <li className=\"mb-2\">\n Get started by editing{\" \"}\n <code className=\"bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold\">\n src/app/page.tsx\n </code>\n .\n </li>\n <li className='text-black dark:text-green-400'>Save and see your changes instantly.</li>\n </ol>\n </main>\n </div>\n );\n}\n```\n\n```text\ndark:invert\n```\n\n```text\ntext-black dark:text-green-400\n```\n\n```css\n@variant dark (&:where([data-theme=\"dark\"]));\n```\n\n```html\n<div class=\"text-black dark:text-green-400\" data-theme=\"dark\">\n Green\n <span class=\"text-black dark:text-green-400\">Black</span>\n</div>\n```\n\n```css\n@variant dark (&:where([data-theme=\"dark\"], [data-theme=\"dark\"] *));\n```\n\n```html\n<div class=\"text-black dark:text-green-400\" data-theme=\"dark\">\n Green\n <span class=\"text-black dark:text-green-400\">Green</span>\n</div>\n```\n\n```text\ndata-theme=\"dark\"\n```\n\n```text\ndark:\n```\n\n```text\ndark:\n```\n\n```text\ndata-theme=\"dark\"\n```\n\n```text\n@variant\n```\n\n```text\n[data-theme=\"dark\"] *\n```\n\n```text\n:where()\n```\n\n```text\ndata-theme=\"dark\"\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.917Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":20,"totalLines":305,"estimatedTokens":1346}}417{"id":"stack-63882633","source":"stackoverflow","questionId":63882633,"title":"Vertically align text with tailwindcss","tags":["html","css","tailwind-css"],"text":"Title: Vertically align text with tailwindcss\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWe have a span text inside a div element with taillwindcss, what's is the best way to align the text vertically with the div ?\n\n```\n\n Home\n\n```\n\n========================================\n\nCode:\n```html\n<div class=\"h-64 w-64 flex flex-col align-items justify-center\">\n <span>Home</span>\n</div>\n```\n\n```html\n<link href=\"https://www.unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css\" rel=\"stylesheet\">\n<div class=\"h-64 w-64 flex flex-col justify-center items-center\">\n <span>Home</span>\n</div>\n```\n\n========================================\n\nComments:\n- You cannot change the span HTML? This is the documentation: tailwindcss.com/docs/vertical-align\n- You just need to change class for vertical alignment. Please remove `align-items` and use `items-center` instead. For quick reference for classes, you can always use tailwind cheat-sheet. tailwindcomponents.com/cheatsheet","metadata":{"transformedAt":"2026-08-18T18:33:42.917Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":34,"estimatedTokens":246}}418{"id":"stack-67758422","source":"stackoverflow","questionId":67758422,"title":"\"Semicolon or block is expected\" error when using tailwind responsive classes in svelte-kit style tags","tags":["svelte","tailwind-css","sveltekit"],"text":"Title: \"Semicolon or block is expected\" error when using tailwind responsive classes in svelte-kit style tags\nTags: svelte, tailwind-css, sveltekit\nSource: Stack Overflow\n\nQuestion:\nWhen using tailwind responsive classes (ex: `md:my-auto`, `focus:ring-0`, `focus:outline-none`) in svelte kit component style tags, I get the following error:\n\n```\n500\n\nSemicolon or block is expected\n\nParseError: Semicolon or block is expected\n at error (/var/www/html/node_modules/svelte/compiler.js:16752:20)\n at Parser$1.error (/var/www/html/node_modules/svelte/compiler.js:16828:10)\n at Object.read_style [as read] (/var/www/html/node_modules/svelte/compiler.js:13141:21)\n at tag (/var/www/html/node_modules/svelte/compiler.js:15887:34)\n at new Parser$1 (/var/www/html/node_modules/svelte/compiler.js:16787:22)\n at parse$3 (/var/www/html/node_modules/svelte/compiler.js:16919:21)\n at compile (/var/www/html/node_modules/svelte/compiler.js:30012:18)\n at compileSvelte (/var/www/html/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:244:48)\n at async TransformContext.transform (/var/www/html/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:837:27)\n at async Object.transform (/var/www/html/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:44285:30)\n```\n\nHere is the code for my component:\n\n```\n\n export let switched = false;\n\n{switched = !switched}}>\n **\n **\n\n .switch-button {\n @apply border-none appearance-none md:my-auto my-2 font-bold text-center rounded-full h-12 w-12 bg-red-500 text-white;\n }\n .switch-button:focus{\n @apply outline-none;\n }\n .switch-button:active{\n @apply bg-red-300;\n }\n\n```\n\nI'm unsure what's causing this issue in particular. I have a feeling it might just be a svelte-kit bug. I know there are work arounds like using vanilla css for responsiveness instead of tailwind classes, or using an external css files, but I would rather not use those options as I very much like the tailwind classes.\n\nPlease let me know if you know what's happening here, or if you need more information regarding my projects environment, please let me know. Thanks in advance!\n\nLink to my projects source code: https://github.com/DriedSponge/GorillianCurrencyConversion\n\nVersion information:\n\n- svelte-kit: `1.0.0-next.109`\n\n- tailwindcss: `2.1.2`\n\n- vite: `2.3.4`\n\n(I do have jit enabled on tailwind)\n\n========================================\n\nTop Answer:\nFaced the same error. Had everything set up exactly like @person_v1.32 described, the build was working fine, but `VSCode` gave me the error.\nTurned out for me it was caused by using a `monorepo` where svelte was used in a module/package only.\n\nFix ? Specifying the `postcss/tailwind configs` with `absolute path`.\n\n- `svelte.config.js`:\n\n```\nimport sveltePreprocess from 'svelte-preprocess';\nimport { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\nimport path from 'path';\nimport { fileURLToPath } from 'url';\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url));\nconst postcssConfig = path.join(__dirname, 'postcss.config.cjs');\n\nexport default {\n preprocess: [\n vitePreprocess(),\n sveltePreprocess({\n postcss: {\n configFilePath: postcssConfig\n }\n })\n ]\n};\n```\n\n- `postcss.config.cjs`\n\n```\nconst tailwindcss = require('tailwindcss');\nconst autoprefixer = require('autoprefixer');\n\nconst path = require('path');\nconst tailwindConfig = path.join(__dirname, 'tailwind.config.cjs');\n\nconst config = {\n plugins: [\n //Some plugins, like tailwindcss/nesting, need to run before Tailwind,\n tailwindcss({ config: tailwindConfig }),\n //But others, like autoprefixer, need to run after,\n autoprefixer\n ]\n};\n\nmodule.exports = config;\n```\n\n========================================\n\nCode:\n```text\n500\n\nSemicolon or block is expected\n\nParseError: Semicolon or block is expected\n at error (/var/www/html/node_modules/svelte/compiler.js:16752:20)\n at Parser$1.error (/var/www/html/node_modules/svelte/compiler.js:16828:10)\n at Object.read_style [as read] (/var/www/html/node_modules/svelte/compiler.js:13141:21)\n at tag (/var/www/html/node_modules/svelte/compiler.js:15887:34)\n at new Parser$1 (/var/www/html/node_modules/svelte/compiler.js:16787:22)\n at parse$3 (/var/www/html/node_modules/svelte/compiler.js:16919:21)\n at compile (/var/www/html/node_modules/svelte/compiler.js:30012:18)\n at compileSvelte (/var/www/html/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:244:48)\n at async TransformContext.transform (/var/www/html/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:837:27)\n at async Object.transform (/var/www/html/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:44285:30)\n```\n\n```html\n<script>\n export let switched = false;\n</script>\n<button class=\"switch-button transition-transform transform ease-in-out duration-300\" class:-rotate-180={switched}\n on:click={()=>{switched = !switched}}>\n <span class=\"text-2xl md:hidden\"><i class=\"fas fa-arrow-down\"></i></span>\n <span class=\"text-xl hidden md:inline\"><i class=\"fas fa-arrow-right\"></i></span>\n</button>\n<style lang=\"postcss\" type=\"text/postcss\">\n .switch-button {\n @apply border-none appearance-none md:my-auto my-2 font-bold text-center rounded-full h-12 w-12 bg-red-500 text-white;\n }\n .switch-button:focus{\n @apply outline-none;\n }\n .switch-button:active{\n @apply bg-red-300;\n }\n</style>\n```\n\n```text\nmd:my-auto\n```\n\n```text\nfocus:ring-0\n```\n\n```text\nfocus:outline-none\n```\n\n```text\n1.0.0-next.109\n```\n\n```text\n2.1.2\n```\n\n```text\n2.3.4\n```\n\n```text\nnpm install --save-dev postcss-load-config\n```\n\n```js\nimport adapter from '@sveltejs/adapter-static'\n// import the preprocessor\nimport preprocess from 'svelte-preprocess'\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n // added these lines:\n preprocess: [\n preprocess({\n postcss: true,\n }),\n ],\n\n kit: {\n // hydrate the <div id=\"svelte\"> element in src/app.html\n target: '#svelte',\n adapter: adapter({\n // default options are shown\n pages: 'build',\n assets: 'build',\n fallback: null,\n }),\n },\n}\n\nexport default config\n```\n\n```html\n<script>\n import '../app.postcss'\n</script>\n<main>\n<-- rest of your layout -->\n</main>\n<style lang=\"postcss\">\n @import url('...');\n :global(body) {\n background-color: #0E1013;\n font-family: Roboto, sans-serif;\n }\n</style>\n```\n\n```text\nsvelte-preprocess\n```\n\n```text\npackage.json\n```\n\n```text\npostcss-load-config\n```\n\n```text\nsvelte-preprocess\n```\n\n```text\npostcss.config.js\n```\n\n```text\npostcss-load-config\n```\n\n```text\nsvelte.config.js\n```\n\n```text\nsvelte-preprocess\n```\n\n```text\nsvelte.config.js\n```\n\n```text\n@tailwind\n```\n\n```text\n__layout.svelte\n```\n\n```text\napp.postcss\n```\n\n```text\napp.html\n```\n\n```text\n/src/src\n```\n\n```text\n__layout.svelte\n```\n\n```text\nsvelte-add\n```\n\n```text\n\"files.associations\": {\"*.svelte\": \"html\" }\n```\n\n```js\nimport sveltePreprocess from 'svelte-preprocess';\nimport { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\nimport path from 'path';\nimport { fileURLToPath } from 'url';\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url));\nconst postcssConfig = path.join(__dirname, 'postcss.config.cjs');\n\nexport default {\n preprocess: [\n vitePreprocess(),\n sveltePreprocess({\n postcss: {\n configFilePath: postcssConfig\n }\n })\n ]\n};\n```\n\n```js\nconst tailwindcss = require('tailwindcss');\nconst autoprefixer = require('autoprefixer');\n\nconst path = require('path');\nconst tailwindConfig = path.join(__dirname, 'tailwind.config.cjs');\n\nconst config = {\n plugins: [\n //Some plugins, like tailwindcss/nesting, need to run before Tailwind,\n tailwindcss({ config: tailwindConfig }),\n //But others, like autoprefixer, need to run after,\n autoprefixer\n ]\n};\n\nmodule.exports = config;\n```\n\n```text\nVSCode\n```\n\n```text\nmonorepo\n```\n\n```text\npostcss/tailwind configs\n```\n\n```text\nabsolute path\n```\n\n```text\nsvelte.config.js\n```\n\n```text\npostcss.config.cjs\n```\n\n========================================\n\nComments:\n- I have the same issue but only when running tests with jest. Have you managed to make it work with the tests ? here is my issue: stackoverflow.com/questions/68827337/…\n- This is not recommended anymore. See marketplace.visualstudio.com/… : If you added \"files.associations\": {\"*.svelte\": \"html\" } to your VSCode settings, remove it.","metadata":{"transformedAt":"2026-08-18T18:33:42.917Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":36,"totalLines":370,"estimatedTokens":2088}}419{"id":"stack-76241788","source":"stackoverflow","questionId":76241788,"title":"How to remove the HTML select tag's default arrow?","tags":["html","css","vue.js","drop-down-menu","tailwind-css"],"text":"Title: How to remove the HTML select tag's default arrow?\nTags: html, css, vue.js, drop-down-menu, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using vuejs and tailwindcss.\nHow do I remove the default arrow from HTML select's element?\nI've already tried removing appearance with css:\n\n```\nselect {\n -moz-appearance: none;\n -webkit-appearance: none;\n -ms-appearance: none;\n -o-appearance: none;\n appearance: none;\n}\n```\n\nas well as with tailwind's `appearance-none`\n\n```\n\n```\n\nMy current template code:\n\n```\n\n \n \n 50m \n 60m \n 100m \n 300m \n \n \n\n```\n\nIt looks like this:\n\nhttps://i.sstatic.net/tH7zk.png\n\nI just can't seem to get it removed for some reason :(\n\n========================================\n\nTop Answer:\n`bg-none` or `appearance-none`\n\nSource:\nhttps://github.com/tailwindlabs/tailwindcss/discussions/11602\n\n========================================\n\nCode:\n```text\nselect {\n -moz-appearance: none;\n -webkit-appearance: none;\n -ms-appearance: none;\n -o-appearance: none;\n appearance: none;\n}\n```\n\n```text\n<select :onchange=\"selectChanged()\"\n class=\"bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none\" ref=\" eventSelect\">\n```\n\n```text\n<template>\n <div>\n <select :onchange=\"selectChanged()\"\n class=\"bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none\" ref=\" eventSelect\">\n <option class=\"bg-slate-800\">50m </option>\n <option class=\"bg-slate-800\"> 60m </option>\n <option class=\"bg-slate-800\"> 100m </option>\n <option class=\"bg-slate-800\"> 300m </option>\n </select>\n </div>\n</template>\n```\n\n```text\nappearance-none\n```\n\n```text\n<style>\n\nselect {\nbackground: none;\npadding: 0;\n}\n\n</style>\n```\n\n```text\n<select>\n```\n\n```text\nbg-none\n```\n\n```text\nappearance-none\n```\n\n```text\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n```\n\n```text\ninput[type=number] {\n -moz-appearance: textfield;\n}\n```\n\n```text\n.css\n```\n\n```text\ntype=\"number\"\n```\n\n```text\n.css\n```\n\n========================================\n\nComments:\n- Does this answer your question? How to remove the default arrow icon from a dropdown list (select element)?\n- Unfortunately not\n- I tried changing the background color and saw it changing, without the arrow being removed so I thought the arrow and background don't have connection. But apparently changing background color does not affect background image. Removing only `background-image` will also work.","metadata":{"transformedAt":"2026-08-18T18:33:42.917Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":145,"estimatedTokens":635}}420{"id":"stack-79691837","source":"stackoverflow","questionId":79691837,"title":"How to override theme variables in TailwindCSS v4 - @theme vs @layer theme vs :root","tags":["css","tailwind-css","tailwind-css-4"],"text":"Title: How to override theme variables in TailwindCSS v4 - @theme vs @layer theme vs :root\nTags: css, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI'm trying to understand how to properly override CSS variables in TailwindCSS v4. Here's a simple example of declaring a theme variable with `@theme`:\n\n```\n@theme {\n --color-clifford: #bf79ea;\n}\n```\n\nThis works fine for the default theme. However, when I want to override this variable for a `dark:` variant, I encountered an answer which suggested following solution:\n\n```\n@layer theme {\n :root, :host {\n @variant dark {\n --color-clifford: #7718b0;\n }\n }\n}\n```\n\nCan someone explain the reasoning behind this solution?\n\n========================================\n\nTop Answer:\n`@theme` is used to define your custom design tokens. Each CSS variable has a very specific namespace (e.g.: `--color`) and it will enhance Tailwind itself. It will essentially make Tailwind aware of your design system. So `--color-foo` will ensure that you can use `text-foo` and `bg-foo`, etc. See: https://tailwindcss.com/docs/theme\n\nThe moment you see `@layer …` then you are back in \"normal\" CSS. So if you define styles or CSS variables inside `@layer …` then Tailwind doesn't know about the actual used values. We wanted to make that distinction to reduce magic. (Sidenote: In Tailwind CSS v3 we did look at `@layer utilities` for custom utilities, but that's because we used `@layer` before that existed in CSS!)\n\nEventually `@theme` will be turned into `@layer theme { :root, :host { /* your CSS variables here */ } }` because it would be silly if you had to define your CSS variables in `@theme` to make Tailwind aware, and to define them somewhere else so it's actually in your CSS. So we generate that for you already.\n\nThen we also generate `@layer base {}` for Preflight (reset styles), and `@layer utilities` for the actual utilities you used.\n\nOpen this link: https://play.tailwindcss.com/kCxeGOlacK\nThen click the Generated CSS tab at the bottom, then view the All tab. You can explore what Tailwind actually generates based on what you use. You can also see the different layers that are used.\n\nSource: Robin (Tailwind Labs)\n\n========================================\n\nCode:\n```css\n@theme {\n --color-clifford: #bf79ea;\n}\n```\n\n```css\n@layer theme {\n :root, :host {\n @variant dark {\n --color-clifford: #7718b0;\n }\n }\n}\n```\n\n```text\n@theme\n```\n\n```text\ndark:\n```\n\n```css\n/* Declare utilities inside @layer utilities & default variables inside @layer theme */\n@theme {\n --color-clifford: #bf79ea;\n}\n\n/* In the case of the dark variant, override the color code of the already created variable */\n@layer theme {\n :root, :host {\n @variant dark {\n --color-clifford: #7718b0;\n }\n }\n}\n```\n\n```css\n@custom-variant dark (&:where(.dark, .dark *));\n\n/* Warning: This is just a test example and is incorrect; do not follow it */\n@layer theme {\n @variant dark {\n --color-clifford: #7718b0;\n }\n}\n```\n\n```css\n@layer theme {\n &:where(.dark, .dark *) {\n --color-clifford: #7718b0;\n }\n}\n```\n\n```css\n@custom-variant dark (&:where(.dark, .dark *));\n\n@layer theme {\n :root, :host {\n @variant dark {\n --color-clifford: #7718b0;\n }\n }\n}\n```\n\n```css\n@layer theme {\n :root, :host {\n &:where(.dark, .dark *) {\n --color-clifford: #7718b0;\n }\n }\n}\n```\n\n```text\n@theme\n```\n\n```text\n@theme\n```\n\n```text\n@theme\n```\n\n```text\n--color-*\n```\n\n```text\n--breakpoint-*\n```\n\n```text\n@theme\n```\n\n```text\n@theme\n```\n\n```text\n--value\n```\n\n```text\n@utility\n```\n\n```text\n-webkit-text-stroke\n```\n\n```text\nstroke-*\n```\n\n```text\n--value\n```\n\n```text\n@layer theme\n```\n\n```text\n@layer\n```\n\n```text\ntheme, base, components, utilities\n```\n\n```text\n@layer\n```\n\n```text\n@theme\n```\n\n```text\n@theme\n```\n\n```text\ntheme\n```\n\n```text\n@theme\n```\n\n```text\n@theme\n```\n\n```text\n:root\n```\n\n```text\n:host\n```\n\n```text\n:root\n```\n\n```text\n@theme\n```\n\n```text\n:root\n```\n\n```text\n@layer theme\n```\n\n```text\n:root\n```\n\n```text\n<html>\n```\n\n```text\n:root\n```\n\n```text\n:root\n```\n\n```text\n:host\n```\n\n```text\n:host\n```\n\n```text\n:root\n```\n\n```text\n:host\n```\n\n```text\n:where(:root, :host) { --my-var: value }\n```\n\n```text\n@theme\n```\n\n```text\n:root\n```\n\n```text\n:root\n```\n\n```text\n@theme\n```\n\n```text\n:root\n```\n\n```text\n@layer theme\n```\n\n```text\n@theme\n```\n\n```text\n:root\n```\n\n```text\n@utility\n```\n\n```text\n@layer utilities\n```\n\n```text\n:root\n```\n\n```text\n:host\n```\n\n```text\n@layer theme\n```\n\n```text\n@variant dark\n```\n\n```text\n&:where(...)\n```\n\n```text\n:root\n```\n\n```text\n:host\n```\n\n```text\n&\n```\n\n```text\n@variant\n```\n\n```text\n&:where\n```\n\n```text\n@theme\n```\n\n```text\n--color\n```\n\n```text\n--color-foo\n```\n\n```text\ntext-foo\n```\n\n```text\nbg-foo\n```\n\n```text\n@layer …\n```\n\n```text\n@layer …\n```\n\n```text\n@layer utilities\n```\n\n```text\n@layer\n```\n\n```text\n@theme\n```\n\n```text\n@layer theme { :root, :host { /* your CSS variables here */ } }\n```\n\n```text\n@theme\n```\n\n```text\n@layer base {}\n```\n\n```text\n@layer utilities\n```\n\n========================================\n\nComments:\n- This question is OK for me, I didn't vote to close it if that's what you mean. On the other hand I do think your other question could be improved, for example elaborate what you mean with: \"However, these approaches don't ensure that the color is only usable within the specific component.\" - show example maybe how I have it here, where I show how using `--color-btn-background` results in confusingly named utility classes (e.g. having text and background together). Title could probably be improved/shortened there too.\n- **Note**: *In v4, an unlimited number of themes and modes can be set using `@custom-variant`. The full documentation can be found here: **How to use custom color themes (e.g. dark or more) in TailwindCSS v4***\n- I think here wongjn also mentioned that without * or root: the & would have no parent selector. Maybe want to mention that reason too for root: or host: usage?\n- When should I use `*` and when should I use `:root, :host` as the parent selector?\n- Related: Should I use `@theme` or `@theme inline`?","metadata":{"transformedAt":"2026-08-18T18:33:42.918Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":79,"totalLines":415,"estimatedTokens":1512}}421{"id":"stack-65482176","source":"stackoverflow","questionId":65482176,"title":"Tailwind group-hover not working (even with default variants)","tags":["nuxt.js","tailwind-css"],"text":"Title: Tailwind group-hover not working (even with default variants)\nTags: nuxt.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nA basic use of Tailwind's `group-hover` is not working for me. I'm simply trying to change text color, which isn't supposed to require any special configuration.\n\nAm I forgetting something?\n\nFor reference my project is a Vue (Nuxt.js) app, and all other Tailwind features are working for me. I've used TW group-hover on other projects without issue.\n\n**FAILS:**\nTried the following on a basic welcome page in my app.\n\n```\n\n Hover me\n Hover me\n\n```\n\n**THIS WORKS:** The same code works fine in Codepen https://codepen.io/MarsAndBack/pen/MWjroVZ\n\n**ALSO, WORKS:** The same `group-hover` method *works* in my other projects.\n\n**`tailwind.config.js`:**\n\n```\nmodule.exports = {\n variants: {},\n plugins: [\n require('@tailwindcss/custom-forms')\n ],\n purge: {\n enabled: process.env.NODE_ENV === 'production',\n content: [\n 'components/**/*.vue',\n 'layouts/**/*.vue',\n 'pages/**/*.vue',\n 'plugins/**/*.js',\n 'nuxt.config.js'\n ]\n },\n theme: {\n extend: {\n colors: {\n brandGreen: {\n light: '#5bb751',\n default: '#5bb751',\n dark: '#3b7935',\n darker: '#33602e'\n }\n\n }\n },\n screens: {\n 'xs': '480px'\n }\n }\n}\n```\n\n========================================\n\nCode:\n```text\n<div class=\"group\">\n <div class=\"group-hover:text-gray-300\">Hover me</div>\n <div class=\"group-hover:text-red-300\">Hover me</div>\n</div>\n```\n\n```text\nmodule.exports = {\n variants: {},\n plugins: [\n require('@tailwindcss/custom-forms')\n ],\n purge: {\n enabled: process.env.NODE_ENV === 'production',\n content: [\n 'components/**/*.vue',\n 'layouts/**/*.vue',\n 'pages/**/*.vue',\n 'plugins/**/*.js',\n 'nuxt.config.js'\n ]\n },\n theme: {\n extend: {\n colors: {\n brandGreen: {\n light: '#5bb751',\n default: '#5bb751',\n dark: '#3b7935',\n darker: '#33602e'\n }\n\n }\n },\n screens: {\n 'xs': '480px'\n }\n }\n}\n```\n\n```text\ngroup-hover\n```\n\n```text\ngroup-hover\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmodule.exports = {\n\n // ...\n\n variants: {\n textColor: ['group-hover'],\n }\n\n // ...\n}\n```\n\n```text\ngroup-hover\n```\n\n```text\ngroup-hover\n```\n\n```text\ntextColor\n```\n\n========================================\n\nComments:\n- Looking back on this now, I wonder if the empty `variants: {}` was the original culprit? Maybe removing that line would make basic group-hover implementation work as expected.\n- I have the exact same problem. I tried that but it didn't work. It use to work perfectly, then seldomly (would work on some element but not all) and now, it's not working at all...\n- Well, all I can advise is that while you trial-and-error, keep in mind when you are relying on A) hot reload vs B) re-starting the app vs C) re-building the app. Usually when I experience intermittent bugs in CSS, it's because I'm doing something different in this regard.","metadata":{"transformedAt":"2026-08-18T18:33:42.918Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":150,"estimatedTokens":738}}422{"id":"stack-74092341","source":"stackoverflow","questionId":74092341,"title":"How to create a component library on top of Tailwind with Turborepo?","tags":["javascript","node.js","tailwind-css","turborepo"],"text":"Title: How to create a component library on top of Tailwind with Turborepo?\nTags: javascript, node.js, tailwind-css, turborepo\nSource: Stack Overflow\n\nQuestion:\nI am trying to start a probject using Turborepo where many apps will use the same components. By default, Turorepo sets a `packages/ui` project for that, but I'd like to use Tailwind.css for this component library.\n\nWhat should be a good setup for that library? Would Tailwind.css be required for all apps projects, or could the library self handle generating the CSS, which would be imported by all apps?\n\nIn short, are there template Turborepo projects with that configuration :\n\n```\n./apps\n ./app1 importing ui/styles.css (no Tailwind dep)\n ./app2 importing ui/styles.css (no Tailwind dep)\n./packages\n ./ui self-generating styles.css (Tailwind dep)\n```\n\n========================================\n\nCode:\n```text\n./apps\n ./app1 importing ui/styles.css (no Tailwind dep)\n ./app2 importing ui/styles.css (no Tailwind dep)\n./packages\n ./ui self-generating styles.css (Tailwind dep)\n```\n\n```text\npackages/ui\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.918Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":33,"estimatedTokens":275}}423{"id":"stack-75202373","source":"stackoverflow","questionId":75202373,"title":"Button in Material UI is transparent when loading","tags":["reactjs","next.js","material-ui","tailwind-css"],"text":"Title: Button in Material UI is transparent when loading\nTags: reactjs, next.js, material-ui, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nEvery time I start a new project with Material UI, I have the same problem with buttons ignoring their primary color. For a second when loading, the background color is clearly visible, but after that the button is transparent.\n\nI have installed all the necessary packages:\n\n```\nnpm install @mui/material @emotion/react @emotion/styled\n```\n\nAnd just placed a button like this:\n\n```\nimport {Button} from \"@mui/material\";\nContained\n```\n\nhttps://i.sstatic.net/xU5KB.png\n\n**EDIT:**\nI found that if I delete the following line from globals.css, the Material UI works as it should. But I need this because we will also use tailwind for styling\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n========================================\n\nCode:\n```text\nnpm install @mui/material @emotion/react @emotion/styled\n```\n\n```text\nimport {Button} from \"@mui/material\";\n<Button variant=\"contained\" color=\"primary\">Contained</Button>\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n corePlugins: {\n preflight: false,\n }\n}\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.919Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":57,"estimatedTokens":313}}424{"id":"stack-66561589","source":"stackoverflow","questionId":66561589,"title":"Ring Color on Hover using TailwindCSS","tags":["css","tailwind-css"],"text":"Title: Ring Color on Hover using TailwindCSS\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using TailwindCSS for a project, and I'm stuck on a weird interraction.\n\nThe result I'm looking for is to have a ring outside a button when I hover it, but using the ring classes from Tailwind, I can't get the ring on hover, yet it work using focus.\n\nBefore filling a bug report, I thought maybe one you guys might see a mistake on my part before ?\n\nI made the smallest possible codepen to reproduce my issue : https://codepen.io/Pymous/pen/bGBQKPO\nThe CodePen contains this simple code :\n\n```\n\n Connexion\n\n```\n\nThanks !\n\n========================================\n\nCode:\n```text\n<button class=\"mt-4 ml-4 px-8 py-2 text-white bg-yellow-500 ring-offset-2 ring-transparent ring-2 focus:ring-red-500 hover:ring-red-500\">\n Connexion\n</button>\n```\n\n```text\n// tailwind.config.js\n module.exports = {\n variants: {\n extend: {\n // ...\n \n ringWidth: ['hover', 'active'],\n }\n }\n }\n```\n\n========================================\n\nComments:\n- Thanks ! I missed that in the docs, pretty straightforward ! I just need to get my custom tailwind to compile now then :D","metadata":{"transformedAt":"2026-08-18T18:33:42.919Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":48,"estimatedTokens":304}}425{"id":"stack-74520832","source":"stackoverflow","questionId":74520832,"title":"Tailwind one off arbitrary colors not working when written as variable","tags":["reactjs","tailwind-css"],"text":"Title: Tailwind one off arbitrary colors not working when written as variable\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nTailwind states that the following is possible when it comes to arbitrary colors we don't want to pollute the tailwind config with:\n\n```\nbg-[#e73d3dFF]\n```\n\nNow in the code, when writting said color like this, **it works**:\n\n```\nbg-[#e73d3dFF]\n```\n\nHere is the part that is baffling me, when written using any form of compilation (I'll show all examples), it **does not work**. The string is printed out onto the HTML correctly, but the color isn't rendered.\n\n**Example 1**\n\n```\n`bg-[${navItem.bg.hex}]`\n```\n\n**Example 2**\n\n```\nconst classStyle = `bg-[${navItem.bg.hex}]`;\nclassNames({[classStyle]: true});\n```\n\n**Example 3:**\n\n```\n'bg-[' + {navItem.bg.hex} + ']';\n```\n\n**All** the examples above result in the HTML being printed correctly, so we do see:\n\n```\n\n```\n\nBut, here's the kicker, the color isn't shown, the rules aren't applied, it's like the color rule wasn't created by Tailwind.\n\nAny ideas?\n\n========================================\n\nCode:\n```text\nbg-[#e73d3dFF]\n```\n\n```text\nbg-[#e73d3dFF]\n```\n\n```text\n`bg-[${navItem.bg.hex}]`\n```\n\n```text\nconst classStyle = `bg-[${navItem.bg.hex}]`;\nclassNames({[classStyle]: true});\n```\n\n```text\n'bg-[' + {navItem.bg.hex} + ']';\n```\n\n```text\n<li class=\"bg-[#e73d3dFF]\">\n```\n\n========================================\n\nComments:\n- It's because tailwind tree-shakes the unused class definitions at build time, and there is no way for tailwind to know what your dynamic classes will be at runtime. Here is a solution: stackoverflow.com/a/74270188/10784244\n- so what can we do ?\n- @AmirRezvani they list a few options in the linked documentation, but you basically always have to use the complete class names. So you either have to create some kind of mapping to get the class you want to apply or you have to use inline styles, if you need to have full flexibility. Using the example of the question: `style={backgroundColor: navItem.bg.hex}`\n- thats exactly what i did. thank you.","metadata":{"transformedAt":"2026-08-18T18:33:42.919Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":83,"estimatedTokens":517}}426{"id":"stack-74292749","source":"stackoverflow","questionId":74292749,"title":"TailwindCSS Duplicate CSS classes when using library in app","tags":["reactjs","tailwind-css","postcss"],"text":"Title: TailwindCSS Duplicate CSS classes when using library in app\nTags: reactjs, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI have a component library using storybook & TailwindCSS and a host app that's also using TaildwindCSS itself that imports the component library. When the classes are generated, I'm seeing that they're duplicated:\n\nhttps://i.sstatic.net/GHylw.png\n\nBoth projects import TailwindCSS standardly in their `index.css` files which is then imported into `index.tsx` using `import \"./index.css\";`:\n\nhttps://i.sstatic.net/LWDMd.png\n\nThe host app does generate all the classes from the component library when imported but due to there being duplicate classes, some are being overridden due to the order (pay attention to the source and line numbers in the above image)\n\nThe component looks correct on storybook:\n\nhttps://i.sstatic.net/ozTPK.png\n\nHost app:\n\nhttps://i.sstatic.net/aDZmZ.png\n\nLooking for advice on how to correctly import the component library within the host app?\n\n**UPDATE:**\n\nI've figured that the component library generates it's own TailwindCSS classes as expected and that's where the \"duplicate\" classes (`inline`) come from and it's being included in a single output in `index.js` in the `dist` folder. Still need a way to avoid these duplicates when imported in the host app. May need to look at changing the component library to build a separate `.css` file with the styles and tell the host app to generate the component library's styles to prevent these duplicates.\n\n========================================\n\nCode:\n```text\nindex.css\n```\n\n```text\nindex.tsx\n```\n\n```text\nimport \"./index.css\";\n```\n\n```text\ninline\n```\n\n```text\nindex.js\n```\n\n```text\ndist\n```\n\n```text\n.css\n```\n\n```text\n.css\n```\n\n```text\nindex.js\n```\n\n```text\ncontent\n```\n\n```text\nsrc\n```\n\n========================================\n\nComments:\n- Please show: How are you importing your component library, tailwind in your component library and tailwind in the host app (`import \"index.css\";` or `` etc.)? It looks like the component library shouldn't load tailwind on its own but require the host app to include it (if it does not already) - if then some of your classes don't show up in the app, you probably need to configure the tailwind config to not prune classes in your library.\n- @Taxel - I've just installed the library normally with `npm` and imported the component in my host app with `import { NumberInput } from \"@mycomponentlib\"`\n- For the love of potatoes my man...mark this as an answer!! Thank you!! Saved me so much time!","metadata":{"transformedAt":"2026-08-18T18:33:42.919Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":82,"estimatedTokens":639}}427{"id":"stack-66248979","source":"stackoverflow","questionId":66248979,"title":"Why isn't the \"disabled:\" tailwind prefix working in my react app?","tags":["reactjs","tailwind-css"],"text":"Title: Why isn't the \"disabled:\" tailwind prefix working in my react app?\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to disable a submit button on some condition but it doesn't work. When I inspect the element in the browser, this is what is rendered regardless of whether the condition returns true or false.\n\n*Element as rendered in browser*\n\n```\nSubmit\n```\n\n*Code*\n\n```\nstate = {\n formIsVaild: false\n }\n\nrender() {\n Open Discussion\n}\n```\n\n*I even removed the condition and tried this...*\n\n```\nstate = {\n formIsVaild: false\n }\n\nrender() {\n Open Discussion\n}\n```\n\nNo matter what value I pass to the disable attribute, `disabled=\"\"` get's rendered in the HTML. I even tried to use an input with type submit instead of a button and I'm getting the same result. I am not sure what is going on here... any help?\n\n**Minimal example**\n\n```\nimport React, { Component } from 'react';\n\nclass FormData extends Component {\n state = {\n formIsVaild: false\n }\n\n render() {\n return (\n \n \n \n Submit\n \n \n \n )\n }\n}\n\nexport default FormData\n```\n\n========================================\n\nTop Answer:\nHere is a simple script I've done with React.useState()\n\n```\nimport React from 'react'\n\nexport default function App() {\n const [state, setState] = React.useState(false);\n\n return (\n \n {setState(!state)}}>\n State is: {state? 'true':'false'}\n \n \n );\n}\n```\n\nYou did not provide enough info on how You change `disable` state. I assume You miss exactly this part.\n\nHere is with class states:\nShort description: First button changes `this.state.formIsValid`,\nsecond button is being disabled.\n\n```\nimport React, { Component } from 'react';\n\nexport default class FormData extends Component {\n state = {\n formIsVaild: false\n }\n\n render() {\n return (\n \n \n {this.setState({formIsVaild:!this.state.formIsVaild})}}>Change state\n \n Submit\n \n \n \n )\n }\n}\n```\n\n========================================\n\nCode:\n```html\n<button type=\"submit\" disabled=\"\" class=\"bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md\">Submit</button>\n```\n\n```js\nstate = {\n formIsVaild: false\n }\n\nrender() {\n <button type=\"submit\" disabled={!this.state.formIsVaild} className=\"bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md\">Open Discussion</button>\n}\n```\n\n```js\nstate = {\n formIsVaild: false\n }\n\nrender() {\n <button type=\"submit\" disabled className=\"bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md\">Open Discussion</button>\n}\n```\n\n```js\nimport React, { Component } from 'react';\n\nclass FormData extends Component {\n state = {\n formIsVaild: false\n }\n\n render() {\n return (\n <div className=\"grid grid-cols-3 gap-4\">\n <div className=\"col-span-2\">\n <form>\n <button type=\"submit\" disabled={!this.state.formIsVaild} className=\"bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md\">Submit</button>\n </form>\n </div>\n </div>\n )\n }\n}\n\nexport default FormData\n```\n\n```text\ndisabled=\"\"\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n // ...\n variants: {\n extend: {\n opacity: ['disabled'],\n }\n },\n}\n```\n\n```text\ndisabled:\n```\n\n```text\ndisabled\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nbackgroundColor: ['disabled']\n```\n\n```js\nimport React from 'react'\n\n\nexport default function App() {\n const [state, setState] = React.useState(false);\n\n return (\n <div className=\"App\">\n <button onClick={()=>{setState(!state)}}>\n State is: {state? 'true':'false'}\n </button>\n </div>\n );\n}\n```\n\n```js\nimport React, { Component } from 'react';\n\nexport default class FormData extends Component {\n state = {\n formIsVaild: false\n }\n\n render() {\n return (\n <div className=\"grid grid-cols-3 gap-4\">\n <div className=\"col-span-2\">\n <button onClick={()=>{this.setState({formIsVaild:!this.state.formIsVaild})}}>Change state</button>\n <form>\n <button type=\"submit\" disabled={this.state.formIsVaild} className=\"bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md\">Submit</button>\n </form>\n </div>\n </div>\n )\n }\n}\n```\n\n```text\ndisable\n```\n\n```text\nthis.state.formIsValid\n```\n\n========================================\n\nComments:\n- I have updated the question to include a simple example\n- From your example, `formIsValid` will always be false, which will always set disabled to true.\n- exactly. but the button is not getting disabled.\n- Another answer about this: TailwindCSS: disabled variant not working","metadata":{"transformedAt":"2026-08-18T18:33:42.919Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":253,"estimatedTokens":1188}}428{"id":"stack-63469477","source":"stackoverflow","questionId":63469477,"title":"Creating an Electron app with Vuejs, Webpack and tailwindcss","tags":["javascript","vue.js","webpack","electron","tailwind-css"],"text":"Title: Creating an Electron app with Vuejs, Webpack and tailwindcss\nTags: javascript, vue.js, webpack, electron, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI try to get an Electron app running with webpack, Vuejs and tailwindcss, starting with the electron-webpack template package and adding Vuejs and tailwindcss afterwards, but tailwindcss doesn't work.\n\nThere is this equivalent thread on SO, but the solution mentioned there uses electron-vue, which has over 200 open issues and doesn't seems to be maintained anymore.\n\nDoes anybody has an idea what went wrong here? I proceeded as follows:\n\nInitialize Electron webback boilerplate (according to here):\n\n```\ngit clone https://github.com/electron-userland/electron-webpack-quick-start.git project\ncd project\nrm -rf .git\n```\n\nInstall Vuejs:\n\n```\nyarn add --dev vue css-loader vue-loader vue-template-compiler\n```\n\nSetting up webpack for Vuejs:\n\n```\nconst { VueLoaderPlugin } = require(\"vue-loader\");\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.vue$/,\n use: 'vue-loader'\n }\n ],\n plugins: [\n new VueLoaderPlugin()\n ]\n }\n}\n```\n\nTest Vuejs by modifying `src/renderer/index.js` to:\n\n```\n'use strict';\nimport Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render(h) {\n return h(App)\n }\n})\n```\n\nand adding `src/renderer/App.vue`:\n\n```\n\n Welcome\n\n```\n\n→ Works so far.\n\nInstall tailwindcss:\n\n```\nyarn add —-dev tailwindcss postcss-loader autoprefixer\n```\n\nAdd tailwindcss to project:\n\n`src/renderer/index.js`:\n\n```\n...\nimport './assets/styles.css';\n...\n```\n\n`src/assets/styles.css`:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nInclude postcss-loader to webpack:\n\nAdd `postcss.config.js`:\n\n```\nconst autoprefixer = require('autoprefixer');\nconst tailwindcss = require('tailwindcss');\n\nmodule.exports = {\n plugins: [\n tailwindcss,\n autoprefixer,\n ],\n};\n```\n\nModify `webpack.config.js`:\n\n```\n...\nmodule.exports = {\n module: {\n rules: [\n ...,\n {\n test: /\\.css$/,\n use: [\n 'vue-style-loader',\n { loader: 'css-loader', options: { importLoaders: 1 } },\n 'postcss-loader'\n ]\n }\n ...\n```\n\nTest tailwindcss by modifying `App.vue`:\n\n```\n\n Welcome\n\n```\n\n→ Failed: Background of \"Welcome\" text should be blue, but isn't, text is still serif.\n\n========================================\n\nCode:\n```text\ngit clone https://github.com/electron-userland/electron-webpack-quick-start.git project\ncd project\nrm -rf .git\n```\n\n```text\nyarn add --dev vue css-loader vue-loader vue-template-compiler\n```\n\n```text\nconst { VueLoaderPlugin } = require(\"vue-loader\");\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.vue$/,\n use: 'vue-loader'\n }\n ],\n plugins: [\n new VueLoaderPlugin()\n ]\n }\n}\n```\n\n```text\n'use strict';\nimport Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render(h) {\n return h(App)\n }\n})\n```\n\n```text\n<template>\n <div>Welcome</div>\n</template>\n```\n\n```text\nyarn add —-dev tailwindcss postcss-loader autoprefixer\n```\n\n```text\n...\nimport './assets/styles.css';\n...\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nconst autoprefixer = require('autoprefixer');\nconst tailwindcss = require('tailwindcss');\n\nmodule.exports = {\n plugins: [\n tailwindcss,\n autoprefixer,\n ],\n};\n```\n\n```text\n...\nmodule.exports = {\n module: {\n rules: [\n ...,\n {\n test: /\\.css$/,\n use: [\n 'vue-style-loader',\n { loader: 'css-loader', options: { importLoaders: 1 } },\n 'postcss-loader'\n ]\n }\n ...\n```\n\n```text\n<template>\n <div class=\"bg-blue-100\">Welcome</div>\n</template>\n```\n\n```text\nsrc/renderer/index.js\n```\n\n```text\nsrc/renderer/App.vue\n```\n\n```text\nsrc/renderer/index.js\n```\n\n```text\nsrc/assets/styles.css\n```\n\n```text\npostcss.config.js\n```\n\n```text\nwebpack.config.js\n```\n\n```text\nApp.vue\n```\n\n```text\ncd myproject\nyarn install\n```\n\n```html\n/* in App.vue */\n\n<template>\n <div id=\"app\" class=\"flex p-5\">Test</div>\n</template>\n\n<script>\nexport default {\n name: 'app',\n}\n</script>\n\n<style>\nbody, html {\n @apply bg-white;\n}\n</style>\n```\n\n```text\nvue.config.js\n```\n\n```text\nyarn global add @vue/cli\n```\n\n```text\nvue create myproject\n```\n\n```text\nvue add electron-builder\n```\n\n```text\nyarn electron:serve\n```\n\n```text\nvue add tailwind\n```\n\n```text\nfull\n```\n\n```text\nyarn electron:serve\n```\n\n========================================\n\nComments:\n- Wow, worked instantly. Using the vue-cli seems to be very straightforward, that's awesome.","metadata":{"transformedAt":"2026-08-18T18:33:42.919Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":28,"totalLines":329,"estimatedTokens":1157}}429{"id":"stack-61407335","source":"stackoverflow","questionId":61407335,"title":"Tailwind's directive @apply not working on Nuxt","tags":["css","nuxt.js","tailwind-css"],"text":"Title: Tailwind's directive @apply not working on Nuxt\nTags: css, nuxt.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to use Tailwind in my brand new project, every utilitie works fine but the @apply one can't even compile.\n\nHere is the error message:\n\n```\nSyntax Error: SyntaxError friendly-errors 08:12:30\n\n(5:5) `@apply` cannot be used with `.lg\\:mt-0` because `.lg\\:mt-0` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.lg\\:mt-0` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.\n\n 3 | @import 'tailwindcss/components';\n 4 | .navbar-item-link {\n> 5 | @apply text-xs mt-1 lg:mt-0 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100 hover:border-blue-best-100;\n | ^\n 6 | }\n 7 | /* purgecss end ignore */\n```\n\nMy tailwind.css file:\n\n```\n/* purgecss start ignore */\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n.navbar-item-link {\n @apply text-xs mt-1 lg:mt-0 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100 hover:border-blue-best-100;\n}\n/* purgecss end ignore */\n\n@import 'tailwindcss/utilities';\n```\n\nI already have installed postcss cli and using the postcss.config.js like so:\n\n```\nmodule.exports = {\n plugins: [\n require(\"postcss-import\"),\n require(\"tailwindcss\"),\n require(\"autoprefixer\")\n ]\n};\n```\n\nBut none of this works.\n\n========================================\n\nCode:\n```text\nSyntax Error: SyntaxError friendly-errors 08:12:30\n\n(5:5) `@apply` cannot be used with `.lg\\:mt-0` because `.lg\\:mt-0` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.lg\\:mt-0` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.\n\n 3 | @import 'tailwindcss/components';\n 4 | .navbar-item-link {\n> 5 | @apply text-xs mt-1 lg:mt-0 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100 hover:border-blue-best-100;\n | ^\n 6 | }\n 7 | /* purgecss end ignore */\n```\n\n```text\n/* purgecss start ignore */\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n.navbar-item-link {\n @apply text-xs mt-1 lg:mt-0 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100 hover:border-blue-best-100;\n}\n/* purgecss end ignore */\n\n@import 'tailwindcss/utilities';\n```\n\n```text\nmodule.exports = {\n plugins: [\n require(\"postcss-import\"),\n require(\"tailwindcss\"),\n require(\"autoprefixer\")\n ]\n};\n```\n\n```text\n.navbar-item-link {\n @apply text-xs mt-1 lg:mt-0 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100 hover:border-blue-best-100;\n}\n```\n\n```text\n// Normal State\n.navbar-item-link {\n @apply text-xs mt-1 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100;\n}\n\n// Hover State\nnavbar-item-link:hover{\n @apply border-blue-best-100;\n}\n\n// Large Screen\n@screen lg {\n .navbar-item-link{\n @apply mt-0;\n }\n}\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.919Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":112,"estimatedTokens":868}}430{"id":"stack-76388849","source":"stackoverflow","questionId":76388849,"title":"Why does Tailwind declare CSS variables multiple times?","tags":["reactjs","tailwind-css"],"text":"Title: Why does Tailwind declare CSS variables multiple times?\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am working on a react project with the tailwind. I checked the inspection of Chrome and saw the same tailwinds variables multiple times. I thought maybe something is not working properly in our project and checked Shopify and it was the same, I wonder why it is working in this way?\nScreenshots are taken from first page of Shopifyhttps://i.sstatic.net/Q9Fl1.jpg\n\nhttps://i.sstatic.net/fIIfz.jpg\nhttps://i.sstatic.net/kVUep.jpg\n\n========================================\n\nTop Answer:\nAdd this to your `tailwind.config.js`:\n\n```\nmodule.exports = {\n //..\n experimental: {\n optimizeUniversalDefaults: true\n },\n //...\n}\n```\n\nAnd it won't generate the variable bloat\n\nThis is an experimental feature, but it does help with output file size and browser rendering performance.\n\nP.S. I saw this advice on Tailwind's github, coming from Adam himself. Can't remember where exactly. But I use it in all our projects and works fine.\n\n========================================\n\nCode:\n```text\n::backdrop\n```\n\n```text\n*, ::before, ::after\n```\n\n```text\n*, ::before, ::after\n```\n\n```text\n::backdrop\n```\n\n```text\n::backdrop\n```\n\n```text\nbackdrop:backdrop-blur\n```\n\n```text\n::backdrop\n```\n\n```text\nv3.1.0\n```\n\n```text\n::backdrop\n```\n\n```text\n::backdrop\n```\n\n```text\n*, ::before, ::after\n```\n\n```text\n*, ::before, ::after, ::backdrop\n```\n\n```text\n*, ::before, ::after, ::backdrop\n```\n\n```text\n::backdrop\n```\n\n```text\nv3.1.1\n```\n\n```text\nmodule.exports = {\n //..\n experimental: {\n optimizeUniversalDefaults: true\n },\n //...\n}\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- Wonderful! I hope this gets accepted into the core. The bloat was so bad I was considering removing Tailwind. This seemed to clear things up nicely.","metadata":{"transformedAt":"2026-08-18T18:33:42.919Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":113,"estimatedTokens":472}}431{"id":"stack-71266063","source":"stackoverflow","questionId":71266063,"title":"NextJS: Loading Font from Database","tags":["javascript","reactjs","next.js","tailwind-css"],"text":"Title: NextJS: Loading Font from Database\nTags: javascript, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using NextJS along with Tailwind CSS.\n\nIn my app, users can select a theme that includes different color schemes along with a pre-selected list of fonts. They can choose a font that they will like for the app.\n\nThese are only Google Fonts.\n\nI'm not sure what's the best way to load a font based on the font name received from the database. I can load the data from the `database` in `serverSideProps`, but then how can I load the font before render so that there is no screen flicker. Can you please help?\n\n**UPDATE**\n\nAs of now, I've done the following:\n\nIn `tailwind.config.js`, I've extended the theme with different fonts that are available.\n\ntheme: {\nfontFamily: {\ninter: ['Inter', 'sans-serif'],\ncal: [\"Cal Sans\", \"Inter\", \"sans-serif\"],\narima:['Arima Madurai','cursive'],\nopensans:['Open Sans', 'sans-serif'],\n}\n}\n\nI've created a stylesheet for each font, which is stored in public folder at this location:\n\n/fonts/opensans/stylesheet.css\n\n/fonts/cal/stylesheet.css\n\n/fonts/inter/stylesheet.css\n\n/fonts/arima/stylesheet.css\n\nThese stylesheets contain the font. An example below:\n\n```\n@font-face {\n font-family: \"Cal Sans\";\n src: url(\"CalSans-SemiBold.woff2\") format(\"woff2\"),\n url(\"CalSans-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n```\n\n- On the page (say `pages/index.js`), I load the user's preferences using `serverSideProps` and pass it to a `Layout` component. This layout component has the `head` which is created through `next/head`. Let's call the font prop received from server as `themeFont`.\n\nLet's say the user's preference is `Cal Sans`, and the user's preference is stored in the database as value `cal`. So, `themeFont` value will be `cal`.\n\nIn the head, I load the related stylesheet as follows:\n\n```\n\n \n\n```\n\n- This will load the `/fonts/cal/stylesheet.css` and the required font. No other font is loaded. Then I can use it in my components with `font-cal` because it has been defined in `tailwind.config.css`\n\nIt works fine. I still see a flicker, maybe because of the `font-display:swap`, or maybe it is because of some other reason. But I still feel this is not the optimal solution and this could be done in a better way.\n\nLooking for help in this.\n\n========================================\n\nTop Answer:\nTwo ideas:\n\n- Fontsources maintains a complete repository of Google Fonts as NPM packages. You should be able to dynamically import the font you need as long as its corresponding NPM package is installed.\n\nhttps://fontsource.org/docs/getting-started\n\nThen you should be able to dynamically import the corresponding font as soon as you know what the font is. I don't know if the font would flicker here.\n\n```\nawait import `@fontsource/${fontName}`;\n```\n\nThis assumes you know `fontName` will be a valid Google Font name, or you'd need a `try`/`catch` for it.\n\n- Another approach is to fetch the font information on the server (if you're using Next.js you could do this with `getServerSideProps`, then use a custom `` element to point to the corresponding CSS file on `fonts.googleapis.com` and load that as part of the `` before other content renders (or at least as it's in the process of doing so.)\n\n========================================\n\nCode:\n```text\n@font-face {\n font-family: \"Cal Sans\";\n src: url(\"CalSans-SemiBold.woff2\") format(\"woff2\"),\n url(\"CalSans-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n```\n\n```text\n<Head>\n <link rel=\"stylesheet\" href={`/fonts/${themeFont}/stylesheet.css`}></link>\n</Head>\n```\n\n```text\ndatabase\n```\n\n```text\nserverSideProps\n```\n\n```text\ntailwind.config.js\n```\n\n```text\npages/index.js\n```\n\n```text\nserverSideProps\n```\n\n```text\nLayout\n```\n\n```text\nhead\n```\n\n```text\nnext/head\n```\n\n```text\nthemeFont\n```\n\n```text\nCal Sans\n```\n\n```text\ncal\n```\n\n```text\nthemeFont\n```\n\n```text\ncal\n```\n\n```text\n/fonts/cal/stylesheet.css\n```\n\n```text\nfont-cal\n```\n\n```text\ntailwind.config.css\n```\n\n```text\nfont-display:swap\n```\n\n```html\n<link rel=\"preload\" href=\"/fonts/theme-font.woff2\" as=\"font\" type=\"font/woff2\" ></link>\n```\n\n```css\n@font-face {\n font-family: \"Cal Sans\";\n font-display: fallback;\n src: url(\"CalSans-SemiBold.woff2\") format(\"woff2\"),\n}\n```\n\n```css\n@font-face {\n font-family: \"Cal Sans\";\n font-display: fallback;\n src: url(PASTE-BASE64-HERE) format('woff2')\n}\n```\n\n```text\ngetServerSideProps\n```\n\n```text\n<link>\n```\n\n```text\nrel=\"preload\"\n```\n\n```text\nfallback\n```\n\n```text\nfont-display\n```\n\n```text\nfont-display\n```\n\n```js\nawait import `@fontsource/${fontName}`;\n```\n\n```text\nfontName\n```\n\n```text\ntry\n```\n\n```text\ncatch\n```\n\n```text\ngetServerSideProps\n```\n\n```text\n<Head>\n```\n\n```text\nfonts.googleapis.com\n```\n\n```text\n<Head>\n```\n\n========================================\n\nComments:\n- Thanks, I'll try these solutions.\n- I tried these options but they cause flicker. I would need some more root-level solution. thanks for your help.\n- The second approach (with getServerSideProps) I think should do the job as long as you are fetching the information from the server and loading them in the head of `_app.page.js` . I don't think you can get a `more root-level solution` than getServerSideProps","metadata":{"transformedAt":"2026-08-18T18:33:42.919Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":36,"totalLines":258,"estimatedTokens":1328}}432{"id":"stack-75895204","source":"stackoverflow","questionId":75895204,"title":"How to centre the items in the last row of a grid using Tailwind CSS?","tags":["javascript","html","css","reactjs","tailwind-css"],"text":"Title: How to centre the items in the last row of a grid using Tailwind CSS?\nTags: javascript, html, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHaving trouble trying to align my final items in a grid layout using Tailwind (with React). Basically I want 3 items across and where there are not 3 items remaining, i.e 2 or 1, I want them centered .\n\nI have tried some kind of col span but didn't work as intended.\n\nTo better illustrate what I am trying to do I have attached some diagrams\n\nCurrent Layout:\n\nhttps://i.sstatic.net/ZrigT.png\n\nDesired layout where 2 items left over :\n\nhttps://i.sstatic.net/wZB5O.png\n\nDesired layout where 1 item left over :\n\nhttps://i.sstatic.net/mXUNA.png\n\n```\n\n //cards .map(item) \n\n```\n\n========================================\n\nCode:\n```html\n<div className=\"xl:grid grid-cols-3 gap-4\">\n //cards .map(item) \n</div>\n```\n\n```text\n<div class=\"flex flex-wrap justify-center gap-2\">\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n</div>\n```\n\n```text\n<div class=\"flex flex-wrap justify-center gap-2\">\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n <div class=\"h-40 w-60 bg-cyan-200\"></div>\n</div>\n```\n\n```text\nflex\n```\n\n```text\nflex-wrap\n```\n\n```text\njustify-center\n```\n\n========================================\n\nComments:\n- My thoughts as well! If you with some calc and \"arbitrary values\" like `w-[calc(33.333%_-_4px)] aspect-square` after an exact `gap-[4px]` you can even get the setup with square items. - A grid for the OP's situation will be very hard, because the hardest edge case is not really a *grid* anymore.\n- @Jeroen, I agree with you , I wanted to keep it simple so didn't include `w-[calc(33.333%_-_4px)]`, that is a great and perfect approach for his problem.\n- redacted my comments as had an issue where i have 3 different images for the cards (repeated per name) but each image is actually a different size , having set an exact w to the image(rather than w-full) and then adding w-60 ,fixes my issue. Calc also worked however ran into issues with sizing of the cards where content is not the same","metadata":{"transformedAt":"2026-08-18T18:33:42.919Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":81,"estimatedTokens":646}}433{"id":"stack-78464326","source":"stackoverflow","questionId":78464326,"title":"Material Tailwind - TypeError: Cannot read properties of null (reading 'useContext')","tags":["reactjs","typescript","tailwind-css","react-context","tailwind-ui"],"text":"Title: Material Tailwind - TypeError: Cannot read properties of null (reading 'useContext')\nTags: reactjs, typescript, tailwind-css, react-context, tailwind-ui\nSource: Stack Overflow\n\nQuestion:\nI am making a client project using **React** with **Typescript** and using **Material Tailwind UI - MT**. But when using MT's components, I get a *useContext* error, it seems to be reported in MT's *theme.js*. I have tried everything but still can't fix it, does anyone know this error?\n\n### **Error Message**\n\n### **Error Message 1**\n\n```\nWarning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.\n```\n\n### **Error Message 2**\n\n```\nUncaught TypeError: Cannot read properties of null (reading 'useContext')\n at useContext (react.development.js:1618:1)\n at useTheme (theme.js:1:1)\n at App (App.tsx:7:1)\n at renderWithHooks (react-dom.development.js:15486:1)\n at mountIndeterminateComponent (react-dom.development.js:20103:1)\n at beginWork (react-dom.development.js:21626:1)\n at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)\n at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)\n at invokeGuardedCallback (react-dom.development.js:4277:1)\n at beginWork$1 (react-dom.development.js:27490:1)\n```\n\n### **index.tsx**\n\n```\nimport React, {Suspense} from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport reportWebVitals from './reportWebVitals';\nimport {Provider} from \"react-redux\";\nimport {store} from \"./grvd/storage\";\nimport {RouterProvider} from \"react-router-dom\";\nimport {router} from \"./grvd/routers\";\nimport {ThemeProvider} from \"@material-tailwind/react\";\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n Loading...}>\n \n \n \n \n \n);\n```\n\n### **package.json**\n\n```\n{\n \"name\": \"client-ver-2\",\n \"version\": \"2.0.0\",\n \"private\": true,\n \"dependencies\": {\n \"@emotion/styled\": \"^11.11.5\",\n \"@material-tailwind/react\": \"^2.1.9\",\n \"@mui/material\": \"^5.15.16\",\n \"@reduxjs/toolkit\": \"^2.2.3\",\n \"@testing-library/jest-dom\": \"^5.17.0\",\n \"@testing-library/react\": \"^13.4.0\",\n \"@testing-library/user-event\": \"^13.5.0\",\n \"@types/jest\": \"^27.5.2\",\n \"@types/node\": \"^16.18.96\",\n \"@types/react\": \"^18.2.42\",\n \"@types/react-dom\": \"^18.3.0\",\n \"react\": \"^18.3.1\",\n \"react-dom\": \"^18.3.1\",\n \"react-hook-form\": \"^7.51.4\",\n \"react-icons\": \"^5.2.1\",\n \"react-redux\": \"^9.1.2\",\n \"react-router-dom\": \"^6.22.1\",\n \"react-scripts\": \"5.0.1\",\n \"tailwind-merge\": \"^2.3.0\",\n \"tailwind-variants\": \"^0.2.1\",\n \"typescript\": \"^4.9.5\",\n \"web-vitals\": \"^2.1.4\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"@babel/plugin-proposal-private-property-in-object\": \"^7.21.11\",\n \"autoprefixer\": \"^10.4.19\",\n \"postcss\": \"^8.4.38\",\n \"tailwindcss\": \"^3.4.3\"\n }\n}\n```\n\n### **tailwind.config.ts**\n\n```\nimport graviadTheme from \"./graviad-theme.js\";\nimport withMT from \"@material-tailwind/react/utils/withMT\";\n\nmodule.exports = withMT({\n content: [\"./src/**/*.{html,js, ts,tsx}\"],\n theme: {\n extend: {\n colors: graviadTheme.colors,\n fontFamily: graviadTheme.fontFamily,\n fontSize: graviadTheme.fontSize,\n boxShadow: graviadTheme.boxShadow,\n borderRadius: graviadTheme.borderRadius,\n },\n },\n plugins: [\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ],\n});\n```\n\n### **App.tsx**\n\n```\nimport React from 'react';\nimport './App.css';\nimport {Outlet} from \"react-router-dom\";\nimport {Typography} from \"@material-tailwind/react\";\n\nfunction App() {\n return (\n \n Graviad\n \n \n );\n}\n\nexport default App;\n```\n\nI tried very hard to try everything like updating to the last version, downgrading the version but it didn't work. Hope to get help from everyone <3\n\n========================================\n\nTop Answer:\n### This works\n\nThis issue because mismatch of react-dom versions.\n`@material-tailwind/react` dependencies such as `@floating-ui/react` uses react and dom version `18.3.1` .\nbut `@material-tailwind/react` use react and dom version `18.2.0` .\nyou can update this versions to `18.3.1` in `package-lock.json` .\nand reinstall all packages with `npm install` .\n\n```\n├─┬ @material-tailwind/react@2.1.9\n│ ├─┬ @floating-ui/react@0.19.0\n│ │ ├─┬ @floating-ui/react-dom@1.3.0\n│ │ │ └── react@18.3.1 deduped\n│ │ └── react@18.3.1 deduped\n│ ├─┬ framer-motion@6.5.1\n│ │ └── react@18.3.1 deduped\n│ ├─┬ react-dom@18.2.0\n│ │ └── react@18.2.0 deduped\n│ └── react@18.2.0\n├─┬ react-dom@18.3.1\n│ └── react@18.3.1 deduped\n└── react@18.3.1\n```\n\n========================================\n\nCode:\n```error\nWarning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.\n```\n\n```error\nUncaught TypeError: Cannot read properties of null (reading 'useContext')\n at useContext (react.development.js:1618:1)\n at useTheme (theme.js:1:1)\n at App (App.tsx:7:1)\n at renderWithHooks (react-dom.development.js:15486:1)\n at mountIndeterminateComponent (react-dom.development.js:20103:1)\n at beginWork (react-dom.development.js:21626:1)\n at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)\n at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)\n at invokeGuardedCallback (react-dom.development.js:4277:1)\n at beginWork$1 (react-dom.development.js:27490:1)\n```\n\n```tsx\nimport React, {Suspense} from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport reportWebVitals from './reportWebVitals';\nimport {Provider} from \"react-redux\";\nimport {store} from \"./grvd/storage\";\nimport {RouterProvider} from \"react-router-dom\";\nimport {router} from \"./grvd/routers\";\nimport {ThemeProvider} from \"@material-tailwind/react\";\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n <React.StrictMode>\n <ThemeProvider>\n <Provider store={store}>\n <Suspense fallback={<div>Loading...</div>}>\n <RouterProvider router={router}/>\n </Suspense>\n </Provider>\n </ThemeProvider>\n </React.StrictMode>\n);\n```\n\n```json\n{\n \"name\": \"client-ver-2\",\n \"version\": \"2.0.0\",\n \"private\": true,\n \"dependencies\": {\n \"@emotion/styled\": \"^11.11.5\",\n \"@material-tailwind/react\": \"^2.1.9\",\n \"@mui/material\": \"^5.15.16\",\n \"@reduxjs/toolkit\": \"^2.2.3\",\n \"@testing-library/jest-dom\": \"^5.17.0\",\n \"@testing-library/react\": \"^13.4.0\",\n \"@testing-library/user-event\": \"^13.5.0\",\n \"@types/jest\": \"^27.5.2\",\n \"@types/node\": \"^16.18.96\",\n \"@types/react\": \"^18.2.42\",\n \"@types/react-dom\": \"^18.3.0\",\n \"react\": \"^18.3.1\",\n \"react-dom\": \"^18.3.1\",\n \"react-hook-form\": \"^7.51.4\",\n \"react-icons\": \"^5.2.1\",\n \"react-redux\": \"^9.1.2\",\n \"react-router-dom\": \"^6.22.1\",\n \"react-scripts\": \"5.0.1\",\n \"tailwind-merge\": \"^2.3.0\",\n \"tailwind-variants\": \"^0.2.1\",\n \"typescript\": \"^4.9.5\",\n \"web-vitals\": \"^2.1.4\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"@babel/plugin-proposal-private-property-in-object\": \"^7.21.11\",\n \"autoprefixer\": \"^10.4.19\",\n \"postcss\": \"^8.4.38\",\n \"tailwindcss\": \"^3.4.3\"\n }\n}\n```\n\n```ts\nimport graviadTheme from \"./graviad-theme.js\";\nimport withMT from \"@material-tailwind/react/utils/withMT\";\n\nmodule.exports = withMT({\n content: [\"./src/**/*.{html,js, ts,tsx}\"],\n theme: {\n extend: {\n colors: graviadTheme.colors,\n fontFamily: graviadTheme.fontFamily,\n fontSize: graviadTheme.fontSize,\n boxShadow: graviadTheme.boxShadow,\n borderRadius: graviadTheme.borderRadius,\n },\n },\n plugins: [\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ],\n});\n```\n\n```tsx\nimport React from 'react';\nimport './App.css';\nimport {Outlet} from \"react-router-dom\";\nimport {Typography} from \"@material-tailwind/react\";\n\nfunction App() {\n return (\n <div className=\"App\">\n <Typography variant={'h1'}>Graviad</Typography>\n <Outlet/>\n </div>\n );\n}\n\nexport default App;\n```\n\n```text\n\"node_modules/@material-tailwind/react\": {\n \"version\": \"2.1.9\",\n \"resolved\": \"https://registry.npmjs.org/@material-tailwind/react/-/react-2.1.9.tgz\",\n \"dependencies\": {\n ..\n \"react\": \"18.3.1\",\n \"react-dom\": \"18.3.1\",\n },\n \"peerDependencies\": {\n \"react\": \"^16 || ^17 || ^18\",\n \"react-dom\": \"^16 || ^17 || ^18\"\n }\n```\n\n```text\npackage-lock.json\n```\n\n```text\npackage.json\n```\n\n```text\n├─┬ @material-tailwind/react@2.1.9\n│ ├─┬ @floating-ui/react@0.19.0\n│ │ ├─┬ @floating-ui/react-dom@1.3.0\n│ │ │ └── react@18.3.1 deduped\n│ │ └── react@18.3.1 deduped\n│ ├─┬ framer-motion@6.5.1\n│ │ └── react@18.3.1 deduped\n│ ├─┬ react-dom@18.2.0\n│ │ └── react@18.2.0 deduped\n│ └── react@18.2.0\n├─┬ react-dom@18.3.1\n│ └── react@18.3.1 deduped\n└── react@18.3.1\n```\n\n```text\n@material-tailwind/react\n```\n\n```text\n@floating-ui/react\n```\n\n```text\n18.3.1\n```\n\n```text\n@material-tailwind/react\n```\n\n```text\n18.2.0\n```\n\n```text\n18.3.1\n```\n\n```text\npackage-lock.json\n```\n\n```text\nnpm install\n```\n\n```text\n\"overrides\": {\n \"react\": \"^18.3.1\",\n \"react-dom\": \"^18.3.1\"\n}\n```\n\n```text\nreact\n```\n\n```text\nreact-dom\n```\n\n```text\npackage-lock.json\n```\n\n```text\npackage.json\n```\n\n```text\nreact\n```\n\n```text\nreact-dom\n```\n\n========================================\n\nComments:\n- I have the same issue and both my `react` and `react-dom` are in version `18.3.1` but the error still is. What should I do?","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":25,"totalLines":461,"estimatedTokens":2720}}434{"id":"stack-66498857","source":"stackoverflow","questionId":66498857,"title":"Tailwind CSS - Switch color theme between \"light\", \"dark\" or \"system settings\"","tags":["javascript","php","laravel-8","tailwind-css"],"text":"Title: Tailwind CSS - Switch color theme between \"light\", \"dark\" or \"system settings\"\nTags: javascript, php, laravel-8, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nTailwind CSS provides two different ways to enable dark mode on your website.\n\nThe first way is through media, which means if your OS supports dark mode and it's activated. Your website will be automatically displayed in dark mode.\n\nMy `tailwind.config.js`:\n\n```\nmodule.exports = {\n darkMode: 'media',\n};\n```\n\nThe second way is through \"class\", meaning if your `` tag has the `class=\"dark\"` assigned. Your website will be displayed in dark mode.\n\nMy `tailwind.config.js`:\n\n```\nmodule.exports = {\n darkMode: 'class',\n};\n```\n\nIs there a simple way of using both of these options at once?\n\nThe effect I want to achieve is that the user can set their preference between \"light\", \"dark\" and \"system settings\".\n\nSimilar to the function that is used here on Stack Overflow:\n\nIf this option is not currently possible with Tailwind CSS, what would be the cleanest and simplest workaround?\n\n**Information about my project:**\n\n- Tailwind CSS\n\n- Laravel 8\n\n- Fortify\n\n- Jetstream\n\n- Livewire\n\n========================================\n\nCode:\n```json\nmodule.exports = {\n darkMode: 'media',\n};\n```\n\n```json\nmodule.exports = {\n darkMode: 'class',\n};\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n<html>\n```\n\n```text\nclass=\"dark\"\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nconst setTheme = (isDark) => {\n document.documentElement.classList.remove('dark');\n if (isDark) {\n document.documentElement.classList.add('dark');\n }\n};\n\nif (settingIsAuto) {\n setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);\n}\n\nwindow.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {\n const newIsDark = e.matches;\n if (settingIsAuto) {\n setTheme(newIsDark);\n }\n});\n\n// watch for settings changes\n```\n\n========================================\n\nComments:\n- Thanks man! Had to modify it just slightly because TailwindCSS now wants the 'dark' class inside the tag and not in the tag... Maybe that changed some time?\n- I just changed the \"document.body.classList.remove('dark');\" and \"document.body.classList.add('dark');\" to \"document.documentElement.classList.remove('dark');\" and \"document.documentElement.classList.add('dark');\"\n- Yes, you are right, that was a mistake. Thanks for fixing it!","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":106,"estimatedTokens":595}}435{"id":"stack-68898511","source":"stackoverflow","questionId":68898511,"title":"tailwindcss typography \"SassC::SyntaxError: Error: unterminated attribute selector for type\"","tags":["ruby-on-rails","tailwind-css","sprockets"],"text":"Title: tailwindcss typography \"SassC::SyntaxError: Error: unterminated attribute selector for type\"\nTags: ruby-on-rails, tailwind-css, sprockets\nSource: Stack Overflow\n\nQuestion:\nI upgraded the `tailwindcss-rails` gem and got this error when compiling assets for production:\n\n```\nbundle exec rails assets:precompile\nrails aborted!\nSassC::SyntaxError: Error: unterminated attribute selector for type\n on line 1009:16 of stdin\n>> .prose ol[type=\"A\" s] {\n\n ---------------^\n/home/circleci/project/vendor/bundle/ruby/3.0.0/bundler/gems/sassc-ruby-4fce2b635ca5/lib/sassc/engine.rb:50:in `render'\n/home/circleci/project/vendor/bundle/ruby/3.0.0/gems/sassc-rails-2.1.2/lib/sassc/rails/compressor.rb:29:in `call'\n/home/circleci/project/vendor/bundle/ruby/3.0.0/gems/sprockets-4.0.2/lib/sprockets/sass_compressor.rb:30:in `call'\n```\n\n========================================\n\nTop Answer:\nThe issue is that this new syntax for CSS rules is not supported by libsass / sassc.\n\nSo I ended up forking tailwindcss-rails and remove the extras.\n\nIt's on GitHub: https://github.com/dorianmariefr/tailwindcss-rails/tree/minimal\n\nAnd you can use it like this in your `Gemfile`:\n\n```\ngem \"tailwindcss-rails\",\n github: \"dorianmariefr/tailwindcss-rails\",\n branch: \"minimal\"\n```\n\n========================================\n\nCode:\n```text\nbundle exec rails assets:precompile\nrails aborted!\nSassC::SyntaxError: Error: unterminated attribute selector for type\n on line 1009:16 of stdin\n>> .prose ol[type=\"A\" s] {\n\n ---------------^\n/home/circleci/project/vendor/bundle/ruby/3.0.0/bundler/gems/sassc-ruby-4fce2b635ca5/lib/sassc/engine.rb:50:in `render'\n/home/circleci/project/vendor/bundle/ruby/3.0.0/gems/sassc-rails-2.1.2/lib/sassc/rails/compressor.rb:29:in `call'\n/home/circleci/project/vendor/bundle/ruby/3.0.0/gems/sprockets-4.0.2/lib/sprockets/sass_compressor.rb:30:in `call'\n```\n\n```text\ntailwindcss-rails\n```\n\n```text\nconfig.assets.css_compressor = nil\n```\n\n```text\nSassC::SyntaxError\n```\n\n```text\nproduction.rb\n```\n\n```rb\ngem \"tailwindcss-rails\",\n github: \"dorianmariefr/tailwindcss-rails\",\n branch: \"minimal\"\n```\n\n```text\nGemfile\n```\n\n========================================\n\nComments:\n- I had a similar issue where I couldn't use `@tailwind/typography`, what I ended up doing was changing the file type of the file i was importing tailwind into from `.scss` to `.css`. Although that might not be suitable for your usecase.\n- Did you consider switching to dart-sass instead? `libsass` is no longer under development and will become less and less compatible as front end packages start using stuff like the new `@use` module system.\n- @max I would love to switch to dart-sass, just not sure how to do it\n- I missed that you were still using sprockets which might make the transition more challenging.\n- looks like in might be fixed in Rails 7 github.com/rails/rails/pull/43110","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":87,"estimatedTokens":719}}436{"id":"stack-72440619","source":"stackoverflow","questionId":72440619,"title":"Import styles directly from tailwindCSS config file","tags":["reactjs","tailwind-css"],"text":"Title: Import styles directly from tailwindCSS config file\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a react application built with create-react-app v5 and I am using tailwindCSS v3.\n\nMy project's root directory is \"./src\" and tailwindCSS configuration file is at \"./\" (one directory before src).\n\n```\n./tailwind.config.js\n```\n\nI'm trying to import the file using this:\n\ntheme.tsx file\n\n```\n//@ts-ignore\nimport resolveConfig from \"tailwindcss/resolveConfig\";\nimport tailwindConfig from \"../tailwind.config.js\";\n\nconst config = resolveConfig(tailwindConfig);\nconst theme: any = config.theme;\nexport default theme;\n```\n\nSince tailwindCSS v3, I can't move the tailwind config file from the root directory.\nThe command above works but only if the file is inside \"./src\" and I can't place it there, so I get the following error:\n\nModule not found: Error: You attempted to import ../tailwind.config.js\nwhich falls outside of the project src/ directory. Relative imports\noutside of src/ are not supported. You can either move it inside src/,\nor add a symlink to it from project's node_modules/.\n\nHow can I import tailwindCSS styles directly from the config file? what I want to be able to do is to style elements without the classNames, I want to get the values directly from the config file in order to do something like this:\n\n```\n\n Blue Text\n\n```\n\nIs there a solution for this?\n\nThanks in advance\n\n========================================\n\nCode:\n```text\n./tailwind.config.js\n```\n\n```text\n//@ts-ignore\nimport resolveConfig from \"tailwindcss/resolveConfig\";\nimport tailwindConfig from \"../tailwind.config.js\";\n\nconst config = resolveConfig(tailwindConfig);\nconst theme: any = config.theme;\nexport default theme;\n```\n\n```text\n<div>\n <p style={{color: theme.colors.blue}}>Blue Text</p>\n</div>\n```\n\n```text\nconst tailwindConfig = require(\"./src/tailwind.config\");\n\nmodule.exports = tailwindConfig;\n```\n\n```text\nmodule.exports = { \n content: ['./src/**/*.{html,js}'],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nimport resolveConfig from \"tailwindcss/resolveConfig\";\nconst tailwindConfig = require(\"./tailwind.config\");\n\nconst config = resolveConfig(tailwindConfig);\nconst theme = config.theme;\nexport default theme;\n```\n\n```text\nimport theme from \"tailwind-theme\";\n\n<div>\n <p style={{color: theme.colors.blue}}>Blue Text</p> \n</div>\n```\n\n========================================\n\nComments:\n- Have you tried to specify the custom configuration location as shown here? tailwindcss.com/docs/configuration#using-a-different-file-na‌​me\n- Thanks for the comment. Yes I did - in create-react-app v5 it doesn't work yet\n- I have issue with TS: Trying to print colors with \"console.log(theme?.colors?.blue)\" it did logged but I got error: Property 'blue' does not exist on type 'ResolvableTo>'. Property 'blue' does not exist on type '(utils: PluginUtils) => RecursiveKeyValuePair'.ts(2339)","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":109,"estimatedTokens":734}}437{"id":"stack-73833316","source":"stackoverflow","questionId":73833316,"title":"Add transition to accordion with react + tailwind","tags":["reactjs","tailwind-css","transition","accordion"],"text":"Title: Add transition to accordion with react + tailwind\nTags: reactjs, tailwind-css, transition, accordion\nSource: Stack Overflow\n\nQuestion:\nI tried to copy this code and convert native javascript to React, everything but the transition works (the content suddenly grows but it has no animation)\n\n```\nimport { useState } from \"react\"\n\nimport { FaMinus, FaPlus } from \"react-icons/fa\"\n\nfunction Accordion({ title, content }: { title: string; content: string }) {\n const [expanded, setExpanded] = useState(false)\n const toggleExpanded = () => setExpanded((current) => !current)\n\n return (\n \n \n {expanded ? : }\n \n\n### {title}\n\n \n \n {content}\n\n \n \n )\n}\n\nfunction AccordionWrapper() {\n return (\n \n \n \n \n\n### Several Windows stacked on each other\n\n The accordion is a graphical control element comprising a vertically stacked list of items such as labels or thumbnails\n\n \n \n \n \n \n )\n}\n```\n\n========================================\n\nTop Answer:\nWhen you use **transition** class only that properties transition when they change:\n*color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter*\n\nYou should use **transition-all** class instead of transition.\n\ntailwind docs\n\n========================================\n\nCode:\n```tsx\nimport { useState } from \"react\"\n\nimport { FaMinus, FaPlus } from \"react-icons/fa\"\n\nfunction Accordion({ title, content }: { title: string; content: string }) {\n const [expanded, setExpanded] = useState(false)\n const toggleExpanded = () => setExpanded((current) => !current)\n\n return (\n <div className={`transition hover:bg-indigo-50 ${expanded ? \"bg-indigo-50\" : \"bg-white\"}`} onClick={toggleExpanded}>\n <div className=\"accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16 select-none\">\n {expanded ? <FaMinus className=\"text-indigo-500\" /> : <FaPlus className=\"text-indigo-500\" />}\n <h3>{title}</h3>\n </div>\n <div className={`px-5 pt-0 overflow-hidden transition ${expanded ? \"max-h-fit\" : \"max-h-0\"}`}>\n <p className=\"leading-6 font-light pl-9 pb-4 text-justify\">{content}</p>\n </div>\n </div>\n )\n}\n\nfunction AccordionWrapper() {\n return (\n <div className=\"h-screen bg-gradient-to-br from-pink-50 to-indigo-100 grid place-items-center\">\n <div className=\"w-6/12 mx-auto rounded border\">\n <div className=\"bg-white p-10 shadow-sm\">\n <h3 className=\"text-lg font-medium text-gray-800\">Several Windows stacked on each other</h3>\n <p className=\"text-sm font-light text-gray-600 my-3\">The accordion is a graphical control element comprising a vertically stacked list of items such as labels or thumbnails</p>\n <div className=\"h-1 w-full mx-auto border-b my-5\"></div>\n <Accordion title=\"What is term?\" content=\"Our asked sex point her she seems. New plenty she horses parish design you. Stuff sight equal of my woody. Him children bringing goodness suitable she entirely put far daughter.\" />\n </div>\n </div>\n </div>\n )\n}\n```\n\n```js\nconst { useState } = React\n\nconst minusIcon = '-'\nconst plusIcon = '+'\n\nfunction Accordion({ title, content }) {\n const [expanded, setExpanded] = useState(false)\n const toggleExpanded = () => setExpanded((current) => !current)\n\n return (\n <div className=\"my-2 sm:my-4 md:my-6 shadow-sm cursor-pointer bg-white\" onClick={toggleExpanded}>\n <div className=\"px-6 text-left items-center h-20 select-none flex justify-between flex-row\">\n <h5 className=\"flex-1\">\n {title}\n </h5>\n <div className=\"flex-none pl-2\">{expanded ? minusIcon : plusIcon}</div>\n </div>\n <div className={`px-6 pt-0 overflow-hidden transition-[max-height] duration-500 ease-in ${expanded ? \"max-h-40\" : \"max-h-0\"}`}>\n <p className=\"pb-4 text-left\">\n {content}\n </p>\n </div>\n </div>\n )\n}\n\nconst lorem = \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"\n\nReactDOM.createRoot(\n document.getElementById(\"root\")\n).render(\n <div className='py-16 md:py-20 lg:py-24 px-4 bg-black'>\n <section className=\"max-w-6xl mx-auto text-center\">\n <Accordion title=\"Accordion #1\" content={lorem} />\n <Accordion title=\"Accordion #2\" content={lorem} />\n <Accordion title=\"Accordion #3\" content={lorem} />\n </section>\n </div>\n);\n```\n\n```html\n<div id=\"root\"></div>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<script src=\"https://unpkg.com/react@18/umd/react.development.js\" crossorigin></script>\n<script src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\" crossorigin></script>\n```\n\n```text\ntransition\n```\n\n```text\noverflow-hidden transition-[max-height] duration-500 ease-in\n```\n\n```text\nmax-height\n```\n\n```text\nmax-h-fit\n```\n\n```text\nmax-h-40\n```\n\n========================================\n\nComments:\n- I tried with that but I still got no animation, should I use another kind of transition class along with it?\n- For some reason, this worked, but when you put h-auto or h-40, don't, only with max-h-*.","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":178,"estimatedTokens":1363}}438{"id":"stack-72518587","source":"stackoverflow","questionId":72518587,"title":"Svelte conditional class with a Tailwind class including a slash in its name","tags":["tailwind-css","svelte"],"text":"Title: Svelte conditional class with a Tailwind class including a slash in its name\nTags: tailwind-css, svelte\nSource: Stack Overflow\n\nQuestion:\nI use Tailwind in a Svelte project.\n\nSome Tailwind classes have a slash in their name,\nnot compatible with Svelte conditional classes.\n\nExample:\n\n```\n\n```\n\nthere is an error on the `3` : `Expected >svelte(unexpected-token)`\n\n**How is it possible to use Tailwind classes with a slash in their name in a Svelte conditional class?**\n\n========================================\n\nTop Answer:\nIf you are using tailwind, you can also use the @apply directive and a custom class :\n\n```\n\n```\n\n```\n.custom-class {\n @apply w-1/3;\n}\n```\n\n========================================\n\nCode:\n```html\n<div class:w-1/3={condition}>\n```\n\n```text\n3\n```\n\n```text\nExpected >svelte(unexpected-token)\n```\n\n```html\n<div class={{ 'w-1/3': condition }}>\n```\n\n```html\n<div class={condition ? 'w-1/3' : ''}>\n```\n\n```text\nclsx\n```\n\n```text\nclass\n```\n\n```html\n<div class:custom-class>\n```\n\n```css\n.custom-class {\n @apply w-1/3;\n}\n```\n\n========================================\n\nComments:\n- **`/` is a valid character in class names.** The CSS specification defines that non-ASCII characters are valid: drafts.csswg.org/css-syntax/#ident-token-diagram It’s svelte, that doesn’t support valid class names.\n- @MaxHoffmann: It's not valid, because *it is* ASCII but not a letter, underscore or dash.\n- Not if it’s escaped and therefore a Unicode code point as defined in the specification: drafts.csswg.org/css-syntax/#escaping It’s in the spec, all browsers support it and that’s also the reason why Tailwind is able to use slashes in class names. It’s Svelte’s compiler that cannot handle it in the directive. Your example is the best proof that it works as soon as one doesn’t use Svelte’s proprietary syntax.\n- Also adding Matthias Bynens fantastic page here that demonstrates lots of valid class names, including using emojis: mathiasbynens.be/demo/crazy-class\n- This way it's not wrong, but it's not the best solution. The good solution is here: stackoverflow.com/a/77912688/1944500 Svelte will process the CSS class.\n- However, in the case of CSS modules, be careful not to end up bloating things and generating too much CSS. Excessive use of `@apply` is not recommended, especially not in CSS modules. Why stop using `@apply`","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":85,"estimatedTokens":586}}439{"id":"stack-73011370","source":"stackoverflow","questionId":73011370,"title":"How to hide elements for multiple different media screens in TailwindCSS","tags":["tailwind-css"],"text":"Title: How to hide elements for multiple different media screens in TailwindCSS\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn tailwind we can write `xl:hidden` to hide element from xl screen size. But what happens if I want to have more than two different screen sizes. For example I want to be have page fit laptop, tablet and phone screens. How should I make sure there is min-width and max-width for screen sizes between the largest and smallest screen size. So I don't show content meant for tablet screens when the user is using a phone.\n\n```\na\nb\nc\n```\n\n========================================\n\nCode:\n```text\n<div class=\"xl:hidden\">a</div>\n<div class=\"lg:hidden\">b</div>\n<div class=\"sm:hidden\">c</div>\n```\n\n```text\nxl:hidden\n```\n\n```text\n<div class=\"hidden xl:block\">a</div>\n<div class=\"hidden xl:hidden sm:block\">b</div>\n<div class=\"sm:hidden\">c</div>\n```\n\n```text\ndisplay:block\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":35,"estimatedTokens":225}}440{"id":"stack-70373367","source":"stackoverflow","questionId":70373367,"title":"How to make the body transparent with daisyUI (Tailwind CSS)?","tags":["html","css","electron","tailwind-css","daisyui"],"text":"Title: How to make the body transparent with daisyUI (Tailwind CSS)?\nTags: html, css, electron, tailwind-css, daisyui\nSource: Stack Overflow\n\nQuestion:\nI recently started developing an Electron application, and I am using daisyUI's Tailwind CSS components for the appearance of the user interface. I want to make the main window of the application rounded; however, daisyUI is making this task pretty challenging.\n\nAs you can see in the screenshot below, by default, daisyUI adds a background color to the body. I added the `.bg-transparent` class to the `body` tag, in order to make the background transparent, but daisyUI does not let the change apply (note the corners):\n\nhttps://i.sstatic.net/wqdOpm.png\n\nOn the contrary, if I don't add daisyUI's CSS file to the head tag, the body becomes transparent:\n\nhttps://i.sstatic.net/5NCxzm.png\n\nHere's my HTML code:\n\n```\n\n \n \n \n \n \n Widget\n \n \n \n \n\n### HEY\n\n \n \n \n\n```\n\nHow can I make the body transparent with daisyUI?\n\n========================================\n\nCode:\n```text\n<!DOCTYPE html>\n<html class=\"h-full\">\n <head>\n <meta charset=\"UTF-8\">\n <link href=\"https://cdn.jsdelivr.net/npm/daisyui@1.16.5/dist/full.css\" rel=\"stylesheet\" type=\"text/css\" />\n <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css\" rel=\"stylesheet\" type=\"text/css\" />\n <link href=\"./renderer/stylesheet/main.css\" rel=\"stylesheet\">\n <title>Widget</title>\n </head>\n <body class=\"select-none h-full bg-transparent\">\n <div class=\"h-full rounded-xl bg-green-500\">\n <h1 class=\"text-3xl font-bold underline\">HEY</h1>\n </div>\n <script src=\"./renderer/javascript/renderer.js\"></script>\n </body>\n</html>\n```\n\n```text\n.bg-transparent\n```\n\n```text\nbody\n```\n\n```text\nmodule.exports = {\n ...\n daisyui: {\n base: false\n }\n}\n```\n\n```text\nbase\n```\n\n```text\ntrue\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nbase\n```\n\n```text\nfalse\n```\n\n```text\nnpm\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":102,"estimatedTokens":493}}441{"id":"stack-70639657","source":"stackoverflow","questionId":70639657,"title":"tailwind css not working properly in nextjs","tags":["next.js","tailwind-css"],"text":"Title: tailwind css not working properly in nextjs\nTags: next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am working with tailwind in Next.js and I create the environment using this command: npx create-next-app --example with-tailwindcss with-tailwindcss-app\n\nEverything works fine except one thing\n\nI am using breakpoints on `` tag\nif I use all breakpoints except default(xs) then my design works fine but if is use default breakpoint with other breakpoints then the default/xs applies to every other breakpoint.\n\n```\n Hy, I am \n```\n\n**In my code `text-red-500` applies to every breakpoint**\n\nI know my syntax is correct, but somehow there is a problem in loading my CSS files and I don't have any idea which files should I have to target.\n\neverybody's opinion is acceptable\n\nI have also attached some of the files in my project.\n\nhttps://i.sstatic.net/n4y1j.pnghttps://i.sstatic.net/epjHz.pnghttps://i.sstatic.net/0opBU.pnghttps://i.sstatic.net/GGHd0.png\n\n========================================\n\nTop Answer:\non `globals.css` file\n\nbefore\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\ntry this\n\n```\n@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n```\n\n========================================\n\nCode:\n```text\n<span className=\" text-xl text-red-500 sm:text-blue-500 md:text-indigo-500 lg:text-violet-500 font-semibold \"> Hy, I am </span>\n```\n\n```text\n<span/>\n```\n\n```text\ntext-red-500\n```\n\n```text\nmodule.exports = {\n content: [\"./pages/**/*.{js,ts,jsx,tsx}\",],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nmodule.exports = {\n content: [\"./src/pages/**/*.{js,ts,jsx,tsx}\",],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n@layer components {\n\n}\n```\n\n```text\nnpm install tailwindcss@latest\n```\n\n```text\nglobals.css\n```\n\n```text\n// before >>> wrong approach\n\nimport \"../styles/globals.css\";\nimport Head from \"next/head\";\nimport \"@material-tailwind/react/tailwind.css\";\n\n\n// after >>> valid approach\n\nimport Head from \"next/head\";\nimport \"@material-tailwind/react/tailwind.css\";\nimport \"../styles/globals.css\";\n```\n\n```text\n_app.js\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n```\n\n```text\nglobals.css\n```\n\n```text\nbg-${class}-{shade}\n```\n\n```text\nclass=red\n```\n\n```text\nshade=900\n```\n\n```text\nbg-red-900\n```\n\n========================================\n\nComments:\n- Maybe try to initialize your project as recommended by tailwindcss ? tailwindcss.com/docs/guides/nextjs\n- Please do not post images of code, anything text-based should be posted as text directly in the question itself and formatted properly as a minimal reproducible example. You can get more formatting help here. You can also read about why you shouldn't post images/links of code.\n- no sorry @layer components{} is good just missed the bracket while taking the screen shot","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":153,"estimatedTokens":747}}442{"id":"stack-70387965","source":"stackoverflow","questionId":70387965,"title":"TailwindCSS 3.0 Upgrade overriding button styles","tags":["css","webpack","tailwind-css","dart-sass"],"text":"Title: TailwindCSS 3.0 Upgrade overriding button styles\nTags: css, webpack, tailwind-css, dart-sass\nSource: Stack Overflow\n\nQuestion:\n### Problem:\n\nButton class being overridden by default tailwind base classes. Not sure why my classes on the element aren't being applied.\n\n### Question:\n\nHow can I get my styles to apply properly?\n\n### Screenshot:\n\nhttps://i.sstatic.net/t4Kcj.png\n\nAs you can see background color on .documentCategory__row is being overridden by button, [type=button] on index.scss which is being defined within @tailwind/base.\n\n```\n/* index.scss */\n:root {\n --color-primary: #00a3e0;\n --color-secondary: #470a68;\n --color-success: #87d500;\n --color-accent: #e87722;\n\n /* Dark themes below */\n --color-dark-primary: rgba(31, 41, 55, 1);\n --dark-text: rgba(187, 193, 198, 1);\n}\n\n@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n```\n\nI'm not sure if this has to do with me switching to dart-scss so here is my webpack configuration in case I am missing something\n\n```\nimport path from 'path'\nimport { Configuration as WebpackConfiguration, HotModuleReplacementPlugin } from 'webpack'\nimport { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';\nimport HtmlWebpackPlugin from 'html-webpack-plugin'\nimport ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'\nimport ESLintPlugin from 'eslint-webpack-plugin'\nimport tailwindcss from 'tailwindcss'\nimport autoprefixer from 'autoprefixer'\n\nconst CopyPlugin = require('copy-webpack-plugin');\n\ninterface Configuration extends WebpackConfiguration {\n devServer?: WebpackDevServerConfiguration;\n}\n\nconst config: Configuration = {\n mode: 'development',\n devServer: {\n static: path.join(__dirname, 'build'),\n historyApiFallback: true,\n port: 4000,\n open: true,\n hot: true,\n },\n output: {\n publicPath: '/',\n },\n entry: './src/index.tsx',\n module: {\n rules: [\n {\n test: /\\.(ts|js)x?$/i,\n exclude: /node_modules/,\n use: {\n loader: 'babel-loader',\n options: {\n presets: [\n '@babel/preset-env',\n '@babel/preset-react',\n '@babel/preset-typescript',\n ],\n },\n },\n },\n {\n test: /\\.(sa|sc|c)ss$/i,\n use: [\n 'style-loader',\n 'css-loader',\n 'sass-loader',\n {\n loader: 'postcss-loader', // postcss loader needed for tailwindcss\n options: {\n postcssOptions: {\n ident: 'postcss',\n plugins: [tailwindcss, autoprefixer],\n },\n },\n },\n ],\n },\n {\n test: /\\.(woff|woff2|eot|ttf|otf)$/,\n loader: 'file-loader',\n options: {\n outputPath: '../fonts',\n },\n },\n ],\n },\n resolve: {\n extensions: ['.tsx', '.ts', '.js'],\n },\n plugins: [\n new HtmlWebpackPlugin({\n template: 'public/index.html',\n }),\n new HotModuleReplacementPlugin(),\n new CopyPlugin({\n patterns: [\n // relative path is from src\n { from: 'public/images', to: 'images' },\n ],\n }),\n // Add type checking on dev run\n new ForkTsCheckerWebpackPlugin({\n async: false,\n }),\n\n // Add lint checking on dev run\n new ESLintPlugin({\n extensions: ['js', 'jsx', 'ts', 'tsx'],\n }),\n ],\n devtool: 'inline-source-map',\n};\n\nexport default config\n```\n\nIf there are other files I am missing that are needed let me know!\n\n========================================\n\nTop Answer:\nEven i faced the same issue but I am using `Vue3` + `element-ui-plus`, after spending more than 6 hours my solution is to set `:native-type='null'`:\n\n`Click Me`\n\nbut this is kinda \"hack\", this either need to be fixed by `Tailwind` or by `element-ui` team. Anyhow, for now enjoy ;)\n\nAnd the discussion is on here\n\n========================================\n\nCode:\n```css\n/* index.scss */\n:root {\n --color-primary: #00a3e0;\n --color-secondary: #470a68;\n --color-success: #87d500;\n --color-accent: #e87722;\n\n /* Dark themes below */\n --color-dark-primary: rgba(31, 41, 55, 1);\n --dark-text: rgba(187, 193, 198, 1);\n}\n\n@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n```\n\n```text\nimport path from 'path'\nimport { Configuration as WebpackConfiguration, HotModuleReplacementPlugin } from 'webpack'\nimport { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';\nimport HtmlWebpackPlugin from 'html-webpack-plugin'\nimport ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'\nimport ESLintPlugin from 'eslint-webpack-plugin'\nimport tailwindcss from 'tailwindcss'\nimport autoprefixer from 'autoprefixer'\n\nconst CopyPlugin = require('copy-webpack-plugin');\n\ninterface Configuration extends WebpackConfiguration {\n devServer?: WebpackDevServerConfiguration;\n}\n\nconst config: Configuration = {\n mode: 'development',\n devServer: {\n static: path.join(__dirname, 'build'),\n historyApiFallback: true,\n port: 4000,\n open: true,\n hot: true,\n },\n output: {\n publicPath: '/',\n },\n entry: './src/index.tsx',\n module: {\n rules: [\n {\n test: /\\.(ts|js)x?$/i,\n exclude: /node_modules/,\n use: {\n loader: 'babel-loader',\n options: {\n presets: [\n '@babel/preset-env',\n '@babel/preset-react',\n '@babel/preset-typescript',\n ],\n },\n },\n },\n {\n test: /\\.(sa|sc|c)ss$/i,\n use: [\n 'style-loader',\n 'css-loader',\n 'sass-loader',\n {\n loader: 'postcss-loader', // postcss loader needed for tailwindcss\n options: {\n postcssOptions: {\n ident: 'postcss',\n plugins: [tailwindcss, autoprefixer],\n },\n },\n },\n ],\n },\n {\n test: /\\.(woff|woff2|eot|ttf|otf)$/,\n loader: 'file-loader',\n options: {\n outputPath: '../fonts',\n },\n },\n ],\n },\n resolve: {\n extensions: ['.tsx', '.ts', '.js'],\n },\n plugins: [\n new HtmlWebpackPlugin({\n template: 'public/index.html',\n }),\n new HotModuleReplacementPlugin(),\n new CopyPlugin({\n patterns: [\n // relative path is from src\n { from: 'public/images', to: 'images' },\n ],\n }),\n // Add type checking on dev run\n new ForkTsCheckerWebpackPlugin({\n async: false,\n }),\n\n // Add lint checking on dev run\n new ESLintPlugin({\n extensions: ['js', 'jsx', 'ts', 'tsx'],\n }),\n ],\n devtool: 'inline-source-map',\n};\n\nexport default config\n```\n\n```text\n/* index.tsx */\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport './index.css'; // this file holds all tailwind styles\nimport { App } from 'src/App';\n// ...\n```\n\n```text\nindex.tsx\n```\n\n```text\nindex.tsx\n```\n\n```text\nindex.css\n```\n\n```text\nimport App from 'src/App\n```\n\n```text\nindex.tsx\n```\n\n```text\nimport 'index.scss'\n```\n\n```text\nVue3\n```\n\n```text\nelement-ui-plus\n```\n\n```text\n:native-type='null'\n```\n\n```text\n<el-button type='primary' round @click='handleClick' :native-type='null'>Click Me</el-button>\n```\n\n```text\nTailwind\n```\n\n```text\nelement-ui\n```\n\n```text\nVite\n```\n\n```text\nvite\n```\n\n```text\ntailwindcss\n```\n\n```text\nmaterial-tailwind\n```\n\n```text\nWithMT\n```\n\n```text\nThemeProvider\n```\n\n========================================\n\nComments:\n- Currently I just added !important to my class and that gets me a work around for now...\n- I am running into the same issue, but I'm not using dart-scss.\n- Similar issue reported in Tailwind's GitHub repo: github.com/tailwindlabs/tailwindcss/discussions/7049","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":363,"estimatedTokens":1830}}443{"id":"stack-63266702","source":"stackoverflow","questionId":63266702,"title":"Tailwindcss group-hover not working on border color","tags":["css","hover","tailwind-css"],"text":"Title: Tailwindcss group-hover not working on border color\nTags: css, hover, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWhen I hover over a navigation item, I want a span border color to be changed. The group-hover does nothing...\n\nIs this just not implemented in Tailwindcss yet?\n\n```\n\n \n \n \n \n```\n\nI obviously can do this by writing css like this, but tailwind should be able to do this, right?\n\n```\na:hover span {\n border-color: black;\n}\n```\n\n========================================\n\nCode:\n```html\n<a class=\"group px-4 py-2 hover:bg-white\n hover:text-primary transition-colors duration-300\n rounded-sm\"\n :href=\"route\">\n <span class=\"pb-1 border-b border-white group-hover:border-black\">\n <slot/>\n </span>\n </a>\n```\n\n```css\na:hover span {\n border-color: black;\n}\n```\n\n```text\nmodule.exports = {\n variants: {\ntextColor: ['responsive', 'hover', 'focus', 'group-hover'],\n },\n}\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":52,"estimatedTokens":232}}444{"id":"stack-69135570","source":"stackoverflow","questionId":69135570,"title":"Error: Loading PostCSS Plugin failed: Invalid or unexpected token (Vue.js, tailwind css)","tags":["javascript","vue.js","tailwind-css","postcss"],"text":"Title: Error: Loading PostCSS Plugin failed: Invalid or unexpected token (Vue.js, tailwind css)\nTags: javascript, vue.js, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nCloned my repo from github as working from a new machine, installed all the dependencies for my project but throwing up this error and not sure what is going on or how to fix it. Have tried uninstalling all node modules and reinstalling. Reinstalled postCSS to version 8 as is recommended. Any ideas?\n\n**Error**\n\n```\nERROR Failed to compile with 1 error 17:43:02\n\n error in ./src/index.css\n\nSyntax Error: Error: Loading PostCSS Plugin failed: Invalid or unexpected token\n\n(@/home/project/postcss.config.js)\n at Array.map ()\n\n @ ./src/index.css 4:14-157 15:3-20:5 16:22-165\n @ ./src/main.js\n @ multi (webpack)-dev-server/client?http://192.168.0.23:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js\n```\n\n**postcss.config.js**\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n**index.css**\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n========================================\n\nTop Answer:\nI encountered this while running Node 10 and was also able to fix it by upgrading Node. For anyone else who encounters this I strongly recommend using the NVM (Node Version Manager) package, that way if other projects you have depend on older versions of Node you can quickly switch between them.\n\nhttps://tecadmin.net/how-to-install-nvm-on-ubuntu-20-04/\n\n========================================\n\nCode:\n```text\nERROR Failed to compile with 1 error 17:43:02\n\n error in ./src/index.css\n\nSyntax Error: Error: Loading PostCSS Plugin failed: Invalid or unexpected token\n\n(@/home/project/postcss.config.js)\n at Array.map (<anonymous>)\n\n\n @ ./src/index.css 4:14-157 15:3-20:5 16:22-165\n @ ./src/main.js\n @ multi (webpack)-dev-server/client?http://192.168.0.23:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":3,"totalLines":83,"estimatedTokens":547}}445{"id":"stack-76220026","source":"stackoverflow","questionId":76220026,"title":"How to change position of chevron on with Tailwind?","tags":["html","css","select","tailwind-css"],"text":"Title: How to change position of chevron on with Tailwind?\nTags: html, css, select, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a classic `select` input which receive an array of strings.\n\nProblem, the chevron is on absolute right of the select, against the border.\n\nhttps://i.sstatic.net/alkoe.png\n\nI want to move its poition to the left a little.\n\nHow to achieve that with tailwind ?\n\nHere is a Tailwind playground\n\nHere is the code :\n\n```\n\n \n None\n {list?.map((item) => (\n {item}\n ))}\n \n\n```\n\n========================================\n\nTop Answer:\nThe \"select\" elements are complicated to style. For more freedom I would opt for a home made dropdown.\n\nOtherwise there are always some css tricks:\n\nhttps://play.tailwindcss.com/rOgId32XZx\n\nHTML :\n\n```\n\n Option 1\n Option 2\n Option 3\n\n```\n\nCSS:\n\n```\n.form-select {\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAABGdBTUEAALGPC/xhBQAAAQtJREFUOBG1lEEOgjAQRalbGj2OG9caOACn4ALGtfEuHACiazceR1PWOH/CNA3aMiTaBDpt/7zPdBKy7M/DCL9pGkvxxVp7KsvyJftL5rZt1865M+Ucq6pyyF3hNcI7Cuu+728QYn/JQA5yKaempxuZmQngOwEaYx55nu+1lQh8GIatMGi+01NwBcEmhxBqK4nAPZJ78K0KKFAJmR3oPp8+Iwgob0Oa6+TLoeCvRx+mTUYf/FVBGTPRwDkfLxnaSrRwcH0FWhNOmrkWYbE2XEicqgSa1J0LQ+aPCuQgZiLnwewbGuz5MGoAhcIkCQcjaTBjMgtXGURMVHC1wcQEy0J+Zlj8bKAnY1/UzDe2dbAVqfXn6wAAAABJRU5ErkJggg==');\n background-size: 0.7rem;\n background-position: right 0.7rem center;\n }\n```\n\n========================================\n\nCode:\n```text\n<div class=\"m-8\">\n <select class=\"h-10 w-full rounded border border-solid border-neutral-300 px-4 text-sm\">\n <option value=\"none\">None</option>\n {list?.map((item) => (\n <option key=\"{item}\" value=\"{item}\">{item}</option>\n ))}\n </select>\n</div>\n```\n\n```text\nselect\n```\n\n```text\n<div class=\"m-8\">\n <select class=\"h-10 w-full rounded border-r-8 border-transparent px-4 text-sm outline outline-neutral-700\">\n <option value=\"none\">Non précisé</option>\n {list?.map((item) => (\n <option key=\"{item}\" value=\"{item}\">{item}</option>\n ))}\n </select>\n</div>\n```\n\n```text\nborder\n```\n\n```text\n<select class=\"form-select appearance-none pr-8 pl-2 bg-no-repeat\">\n <option>Option 1</option>\n <option>Option 2</option>\n <option>Option 3</option>\n</select>\n```\n\n```text\n.form-select {\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAABGdBTUEAALGPC/xhBQAAAQtJREFUOBG1lEEOgjAQRalbGj2OG9caOACn4ALGtfEuHACiazceR1PWOH/CNA3aMiTaBDpt/7zPdBKy7M/DCL9pGkvxxVp7KsvyJftL5rZt1865M+Ucq6pyyF3hNcI7Cuu+728QYn/JQA5yKaempxuZmQngOwEaYx55nu+1lQh8GIatMGi+01NwBcEmhxBqK4nAPZJ78K0KKFAJmR3oPp8+Iwgob0Oa6+TLoeCvRx+mTUYf/FVBGTPRwDkfLxnaSrRwcH0FWhNOmrkWYbE2XEicqgSa1J0LQ+aPCuQgZiLnwewbGuz5MGoAhcIkCQcjaTBjMgtXGURMVHC1wcQEy0J+Zlj8bKAnY1/UzDe2dbAVqfXn6wAAAABJRU5ErkJggg==');\n background-size: 0.7rem;\n background-position: right 0.7rem center;\n }\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":107,"estimatedTokens":713}}446{"id":"stack-72459744","source":"stackoverflow","questionId":72459744,"title":"How to show Modal after clicking a button in another component in React?","tags":["javascript","reactjs","modal-dialog","components","tailwind-css"],"text":"Title: How to show Modal after clicking a button in another component in React?\nTags: javascript, reactjs, modal-dialog, components, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have this two components:\n\n```\nimport React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport Button from \"../../../components/Button\";\nimport NewAreaModal from \"./NewAreaModal\";\n\nfunction GestioneAree() {\n\n const [aree, setAree] = useState([]);\n const [show, setShow] = useState(false);\n\n useEffect(() => {\n axios.get(\"http://localhost:8080/aree/all\").then((res) => {\n setAree(res.data);\n console.log(res.data);\n });\n }, []);\n\n const showModal = () => {\n setShow(true);\n }\n\n return (\n \n \n \n \n \n\n### Aree nel Sistema\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Toponimo\n \n \n Territorio\n \n \n Edit\n \n \n \n \n {aree.map((area) => (\n \n {area.toponimo}\n {area.territorio.nome}\n \n \n Modifica\n \n \n \n ))}\n \n \n \n \n \n \n \n \n );\n}\n\nexport default GestioneAree;\n```\n\nand\n\n```\nimport React, { useState, useRef, Fragment } from \"react\";\nimport { Dialog, Transition } from \"@headlessui/react\";\nimport Button from \"../../../components/Button\";\n\nfunction NewAreaModal() {\n const [open, setOpen] = useState(true);\n\n const cancelButtonRef = useRef(null);\n\n return (\n \n \n \n \n \n \n \n \n \n \n {\n // Form here\n }\n \n \n setOpen(false)}/>\n setOpen(false)} ref={cancelButtonRef}/>\n \n \n \n \n \n \n \n );\n}\n\nexport default NewAreaModal;\n```\n\nWhat I want to do is opening the component `NewAreaModal.js` when I'm clicking the **Crea Nuova Area** button... what is wrong with my code?\n\nI have tried many ways but it dosen't work. For example, I tried to pass a prop to NewAreaModal called `show` and then I putted this variable inside `useState` in `const [open, setOpen] = useState(show)` but the `` component says that is missing the show prop even if I passed a boolean variable...\n\nThis code is missing some functions for the comunication with the backend because I just started!\n\nI'm practicing React since 2 months so I don't have a lot of experience...\n\nThank you guys for the patience!\n\n========================================\n\nTop Answer:\nI have tried many ways but it dosen't work. For example, I tried to pass a prop to NewAreaModal called `show` and then I putted this variable inside `useState` in `const [open, setOpen] = useState(show)` but the `` component says that is missing the show prop even if I passed a boolean variable...\n\nPassing in the `show` prop is the right idea, but you are missing a few things, and overcomplicating in some other areas.\n\nThe code in the `GestioneAree` component looks correct to me - you have a `show` state variable that you pass in to `NewAreaModal`, and set this to `true` when the button is clicked to open the modal. This is all correct. All you need to do is to have `NewAreaModal` use that to determine whether to show the component's contents or not.\n\nTo do that you need to first have `NewAreaModal` accept `show` as a prop:\n\n```\nfunction NewAreaModal({ show }) {\n // component code\n}\n```\n\nThis `show` prop will then be the only thing that controls whether the modal is open or not. So you don't need, or want, any state here. So remove this line:\n\n```\nconst [open, setOpen] = useState(true);\n```\n\nand instead use the `show` prop where you were using `open` before - in particular pass it to the `Transition.Root`, which is component you don't show but I assume this is what will actually show or hide the contents:\n\n```\n\n```\n\nThat's essentially it, but there's another important way you will have to change your code. Your modal component appears to have a button inside it to close the modal. That would work when you had the `open` (or `show`) property in state, as you could have the button set that state to `false`. That doesn't work directly when `show` is a prop instead.\n\nBut there's an easy fix - to simply have your modal component accept a function that closes the modal.\n\nYou already have an `openModal` function defined in your parent component:\n\n```\nconst showModal = () => {\n setShow(true);\n}\n```\n\nand you can do something similar to make a \"closeModal\" function:\n\n```\nconst closeModal = () => {\n setShow(false);\n}\n```\n\nThen you can pass this function in as a prop to `NewAreaModal`:\n\n```\n\n```\n\nFinally, `NewAreaModal` needs to accept this prop:\n\n```\nfunction NewAreaModal({ show, closeModal }) {\n // component code\n}\n```\n\nand call it when the close button is clicked, by replacing `onClick={() => setOpen(false)}` by `onClick={closeModal}` for each button where you have this.\n\n(Note that if you are using `NewAreaModal` elsewhere you will need to ensure this `closeModal` prop is passed in each time it is used.)\n\n========================================\n\nCode:\n```text\nimport React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport Button from \"../../../components/Button\";\nimport NewAreaModal from \"./NewAreaModal\";\n\nfunction GestioneAree() {\n\n const [aree, setAree] = useState([]);\n const [show, setShow] = useState(false);\n\n useEffect(() => {\n axios.get(\"http://localhost:8080/aree/all\").then((res) => {\n setAree(res.data);\n console.log(res.data);\n });\n }, []);\n\n const showModal = () => {\n setShow(true);\n }\n\n return (\n <div className=\"bg-white rounded-lg\">\n <div className=\"px-4 py-5 sm:px-6 rounded\">\n <div className=\"-ml-4 -mt-2 flex items-center justify-between flex-wrap sm:flex-nowrap\">\n <div className=\"ml-4 mt-2\">\n <h3 className=\"text-lg leading-6 font-medium text-gray-900\">Aree nel Sistema</h3>\n </div>\n <div className=\"ml-4 mt-2 flex-shrink-0\">\n <Button type=\"button\" decoration=\"primary\" text=\"Crea Nuova Area\" onClick={showModal}/>\n </div>\n </div>\n </div>\n <div className=\"flex flex-col\">\n <div className=\"-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n <div className=\"py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8\">\n <div className=\"shadow overflow-hidden border-t border-gray-200 sm:rounded-lg\">\n <table className=\"min-w-full divide-y divide-gray-200\">\n <thead className=\"bg-gray-50\">\n <tr>\n <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">\n Toponimo\n </th>\n <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">\n Territorio\n </th>\n <th scope=\"col\" className=\"relative px-6 py-3\">\n <span className=\"sr-only\">Edit</span>\n </th>\n </tr>\n </thead>\n <tbody>\n {aree.map((area) => (\n <tr key={area.idArea} className=\"bg-white border-b\">\n <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">{area.toponimo}</td>\n <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">{area.territorio.nome}</td>\n <td className=\"px-6 py-4 whitespace-nowrap text-right text-sm font-medium\">\n <button type=\"button\" className=\"text-green-600 hover:text-green-900\" >\n Modifica\n </button>\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n <NewAreaModal show={show} />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}\n\nexport default GestioneAree;\n```\n\n```text\nimport React, { useState, useRef, Fragment } from \"react\";\nimport { Dialog, Transition } from \"@headlessui/react\";\nimport Button from \"../../../components/Button\";\n\nfunction NewAreaModal() {\n const [open, setOpen] = useState(true);\n\n const cancelButtonRef = useRef(null);\n\n return (\n <Transition.Root show={open}>\n <Dialog as=\"div\" className=\"relative z-10\" initialFocus={cancelButtonRef} onClose={setOpen}>\n <Transition.Child as={Fragment} enter=\"ease-out duration-300\" enterFrom=\"opacity-0\" enterTo=\"opacity-100\" leave=\"ease-in duration-200\" leaveFrom=\"opacity-100\" leaveTo=\"opacity-0\">\n <div className=\"fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity\" />\n </Transition.Child>\n <div className=\"fixed z-10 inset-0 overflow-y-auto\">\n <div className=\"flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0\">\n <Transition.Child as={Fragment} enter=\"ease-out duration-300\" enterFrom=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\" enterTo=\"opacity-100 translate-y-0 sm:scale-100\" leave=\"ease-in duration-200\" leaveFrom=\"opacity-100 translate-y-0 sm:scale-100\" leaveTo=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\">\n <Dialog.Panel className=\"relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full\">\n <div className=\"bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4\">\n {\n // Form here\n }\n </div>\n <div className=\"bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse\">\n <Button type=\"button\" text=\"Crea Area\" decoration=\"primary\" otherCSS={\"w-full justify-center sm:ml-3 sm:w-auto sm:text-sm\"} onClick={() => setOpen(false)}/>\n <Button type=\"button\" text=\"Annulla\" decoration=\"secondary\" otherCSS={\"w-full justify-center sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm\"} onClick={() => setOpen(false)} ref={cancelButtonRef}/>\n </div>\n </Dialog.Panel>\n </Transition.Child>\n </div>\n </div>\n </Dialog>\n </Transition.Root>\n );\n}\n\nexport default NewAreaModal;\n```\n\n```text\nNewAreaModal.js\n```\n\n```text\nshow\n```\n\n```text\nuseState\n```\n\n```text\nconst [open, setOpen] = useState(show)\n```\n\n```text\n<Transition>\n```\n\n```text\nimport NewAreaModal from \"./NewAreaModal\";\n\nfunction GestioneAree() {\n\n const [aree, setAree] = useState([]);\n const [show, setShow] = useState(false);\n\n useEffect(() => {\n axios.get(\"http://localhost:8080/aree/all\").then((res) => {\n setAree(res.data);\n console.log(res.data);\n });\n }, []);\n\n const showModal = () => {\n setShow(true);\n }\n\n return (\n <div className=\"bg-white rounded-lg\">\n <div className=\"px-4 py-5 sm:px-6 rounded\">\n <div className=\"-ml-4 -mt-2 flex items-center justify-between flex-wrap sm:flex-nowrap\">\n <div className=\"ml-4 mt-2\">\n <h3 className=\"text-lg leading-6 font-medium text-gray-900\">Aree nel Sistema</h3>\n </div>\n <div className=\"ml-4 mt-2 flex-shrink-0\">\n <Button type=\"button\" decoration=\"primary\" text=\"Crea Nuova Area\" onClick={showModal}/>\n </div>\n </div>\n </div>\n <div className=\"flex flex-col\">\n <div className=\"-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n <div className=\"py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8\">\n <div className=\"shadow overflow-hidden border-t border-gray-200 sm:rounded-lg\">\n <table className=\"min-w-full divide-y divide-gray-200\">\n <thead className=\"bg-gray-50\">\n <tr>\n <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">\n Toponimo\n </th>\n <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">\n Territorio\n </th>\n <th scope=\"col\" className=\"relative px-6 py-3\">\n <span className=\"sr-only\">Edit</span>\n </th>\n </tr>\n </thead>\n <tbody>\n {aree.map((area) => (\n <tr key={area.idArea} className=\"bg-white border-b\">\n <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">{area.toponimo}</td>\n <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">{area.territorio.nome}</td>\n <td className=\"px-6 py-4 whitespace-nowrap text-right text-sm font-medium\">\n <button type=\"button\" className=\"text-green-600 hover:text-green-900\" >\n Modifica\n </button>\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n <NewAreaModal show={show} setShow={(bool) => setShow(bool) />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}\n\nexport default GestioneAree;\n```\n\n```text\nimport React, { useState, useRef, Fragment } from \"react\";\n import { Dialog, Transition } from \"@headlessui/react\";\n import Button from \"../../../components/Button\";\n \n function NewAreaModal({show, setShow}) {\n \n const cancelButtonRef = useRef(null);\n \n \n return (\n <Transition.Root show={show}>\n <Dialog as=\"div\" className=\"relative z-10\" initialFocus={cancelButtonRef} onClose={setOpen}>\n <Transition.Child as={Fragment} enter=\"ease-out duration-300\" enterFrom=\"opacity-0\" enterTo=\"opacity-100\" leave=\"ease-in duration-200\" leaveFrom=\"opacity-100\" leaveTo=\"opacity-0\">\n <div className=\"fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity\" />\n </Transition.Child>\n <div className=\"fixed z-10 inset-0 overflow-y-auto\">\n <div className=\"flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0\">\n <Transition.Child as={Fragment} enter=\"ease-out duration-300\" enterFrom=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\" enterTo=\"opacity-100 translate-y-0 sm:scale-100\" leave=\"ease-in duration-200\" leaveFrom=\"opacity-100 translate-y-0 sm:scale-100\" leaveTo=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\">\n <Dialog.Panel className=\"relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full\">\n <div className=\"bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4\">\n {\n // Form here\n }\n </div>\n <div className=\"bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse\">\n <Button type=\"button\" text=\"Crea Area\" decoration=\"primary\" otherCSS={\"w-full justify-center sm:ml-3 sm:w-auto sm:text-sm\"} onClick={() => setShow(false)}/>\n <Button type=\"button\" text=\"Annulla\" decoration=\"secondary\" otherCSS={\"w-full justify-center sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm\"} onClick={() => setShow(false)} ref={cancelButtonRef}/>\n </div>\n </Dialog.Panel>\n </Transition.Child>\n </div>\n </div>\n </Dialog>\n </Transition.Root>\n );\n }\n \n export default NewAreaModal;\n```\n\n```text\nfunction NewAreaModal({ show }) {\n // component code\n}\n```\n\n```text\nconst [open, setOpen] = useState(true);\n```\n\n```text\n<Transition.Root show={show}>\n```\n\n```text\nconst showModal = () => {\n setShow(true);\n}\n```\n\n```text\nconst closeModal = () => {\n setShow(false);\n}\n```\n\n```text\n<NewAreaModal show={show} closeModal={closeModal}/>\n```\n\n```text\nfunction NewAreaModal({ show, closeModal }) {\n // component code\n}\n```\n\n```text\nshow\n```\n\n```text\nuseState\n```\n\n```text\nconst [open, setOpen] = useState(show)\n```\n\n```text\n<Transition>\n```\n\n```text\nshow\n```\n\n```text\nGestioneAree\n```\n\n```text\nshow\n```\n\n```text\nNewAreaModal\n```\n\n```text\ntrue\n```\n\n```text\nNewAreaModal\n```\n\n```text\nNewAreaModal\n```\n\n```text\nshow\n```\n\n```text\nshow\n```\n\n```text\nshow\n```\n\n```text\nopen\n```\n\n```text\nTransition.Root\n```\n\n```text\nopen\n```\n\n```text\nshow\n```\n\n```text\nfalse\n```\n\n```text\nshow\n```\n\n```text\nopenModal\n```\n\n```text\nNewAreaModal\n```\n\n```text\nNewAreaModal\n```\n\n```text\nonClick={() => setOpen(false)}\n```\n\n```text\nonClick={closeModal}\n```\n\n```text\nNewAreaModal\n```\n\n```text\ncloseModal\n```\n\n========================================\n\nComments:\n- The use of Transition.Root is beacuase I'm using Tailwind UI so some components are already builded, the only thing I do is writing some functions and customizing it. Regarding your suggestion, now is working but when I close it and then try to open it again it dosen't appear. In my opinion this happens because the open variable in NewAreaModal remains false and the father components thinks it is true\n- It works! The only thing that I changed because when I reload the page the modal appears for a while is in NewAreaModal the variable open. I've set it to useState(false) instead of true! Thank you so much for the patience!","metadata":{"transformedAt":"2026-08-18T18:33:42.920Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":43,"totalLines":615,"estimatedTokens":4799}}447{"id":"stack-77243831","source":"stackoverflow","questionId":77243831,"title":"Tailwind classes from my library on NPM not being picked up","tags":["npm","tailwind-css"],"text":"Title: Tailwind classes from my library on NPM not being picked up\nTags: npm, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've made a simple component library for React and Tailwind which I'm publishing to NPM.\n\nI need the library to use Tailwind styles from the project that's importing it. EG if colors are overridden in the project, then I need the component to use these colors and not Tailwind's defaults.\n\nWhen I import a component it renders on the page correctly, but the classes aren't picked up by the Tailwind compiler, so the component is unstyled.\n\nI can get it working by adding the path to the library in my tailwind config:\n\n```\ncontent: [\n \"./src/pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n \"node_modules/my-library/*.{js,ts,jsx,tsx,mdx}\", // Added this\n ],\n```\n\nHowever, I don't love the developer experience of having to do this. Is there a better solution?\n\n========================================\n\nTop Answer:\nWhen importing the library you also need to import the CSS file which is generated by tailwindcss when project is built, which you can see in your build or dist folder.\n\n`import { MyLibrary } from 'my-library`\n\n`import 'my-library/dist/style.css'`\n\nTo make CSS file importable, in `package.json` add export for CSS file.\n\n```\n\"exports\": { \n \".\": {\n \"import\": \"./dist/my-library.es.js\"\n },\n \"./dist/style.css\": { You can see example from this npm library github repo\n\n========================================\n\nCode:\n```js\ncontent: [\n \"./src/pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n \"node_modules/my-library/*.{js,ts,jsx,tsx,mdx}\", // Added this\n ],\n```\n\n```js\n// tailwind.config.js\nfunction getPathToModule(moduleName) {\n return `node_modules/${moduleName}/*.{js,ts,jsx,tsx,mdx}`\n}\n```\n\n```js\n// App.tsx\n...\nimport 'my-library/styles.css'\n...\n```\n\n```text\n.css\n```\n\n```text\n.btn {\n @apply bg-purple-500 text-white;\n}\n```\n\n```text\n@layer components {\n .bg-blue-500 {\n background-color: red; // Use your project's custom color instead of Tailwind's default blue.\n }\n}\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```text\nbg-blue-500\n```\n\n```text\n\"exports\": { \n \".\": {\n \"import\": \"./dist/my-library.es.js\"\n },\n \"./dist/style.css\": { <--- add this\n \"import\": \"./dist/style.css\"\n }\n},\n```\n\n```text\nimport { MyLibrary } from 'my-library\n```\n\n```text\nimport 'my-library/dist/style.css'\n```\n\n```text\npackage.json\n```\n\n========================================\n\nComments:\n- Using @apply seems to have no difference vs using the class names normally.\n- I don't want the styles to be isolated, in fact I want want the opposite. As I said in my question, if the projects that imports the library overrides a colour, then I need the library to use that overriden color value.\n- Oh, I see. Let me recite to make sure I understand the question correctly. You are using tailwind classes in your library and if they are overridden in the project - For example, if the `p-6` style is changed to something else, then that new style should be used. Is that right?\n- Yes thats correct.\n- Does your library bundler generate a bundled CSS?\n- Not currently no.\n- @ArpanSaha even when your answer is marked as correct, I can't fine where and how you need to use the function `getPathToModule` provided. Can you explain the context and a bit more how it works?\n- @ArpanSaha as @xzegga said, can you please explain where to put `getPathToModule()` ?\n- @xzegga @w3debugger You can put it in `tailwind.config.js`. It is just a helper function that you can define to avoid writing the entire node_modules path again and again.\n- the main problem is why we need to import `style.css` file from our package. why tailwindcss is not working without `style.css`\n- Are you sure this is the right approach? As I said in my original question, if the project that imports the library overrides a color value then I need the library to use the overridden color value. Wouldn't importing the CSS file in this way not do this?\n- @KannuMandora i faced the same issue with my library, only found this solution to work.","metadata":{"transformedAt":"2026-08-18T18:33:42.921Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":136,"estimatedTokens":1050}}448{"id":"stack-74906909","source":"stackoverflow","questionId":74906909,"title":"Tailwind CSS hidden and visible","tags":["css","frontend","tailwind-css","styling","hidden"],"text":"Title: Tailwind CSS hidden and visible\nTags: css, frontend, tailwind-css, styling, hidden\nSource: Stack Overflow\n\nQuestion:\nBackend dev here learning front. I am trying to hide an element on small and medium screens and visible on the rest of the screens.\n\nBut the thing is when I do `sm:hidden` it hides the element for small screens and above. And when I try to do `sm:hidden md:visible` the element is not visible on medium screens and above. How should I go about this?\n\n========================================\n\nCode:\n```text\nsm:hidden\n```\n\n```text\nsm:hidden md:visible\n```\n\n```text\n<div class=\"hidden lg:block\">\n <!-- ... -->\n</div>\n```\n\n```text\n<!doctype html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n\n<body>\n <div class=\"hidden lg:block\">\n <h1 class=\"text-3xl font-bold underline\">\n Hello world!\n </h1>\n </div>\n\n</body>\n\n</html>\n```\n\n```text\nhidden\n```\n\n```text\nvisible\n```\n\n```text\nlg\n```\n\n========================================\n\nComments:\n- It worked. thank you dude. I cant upvote tho because I just made the account\n- @carl But you can accept answer as it solved your problem :-P ! You're Welcome! ;-)\n- Since Tailwind v3.2 it can be shorten as `max-lg:hidden` in that case","metadata":{"transformedAt":"2026-08-18T18:33:42.921Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":66,"estimatedTokens":334}}449{"id":"stack-62170756","source":"stackoverflow","questionId":62170756,"title":"Tailwind class doesn't take effect","tags":["css","reactjs","webpack","tailwind-css"],"text":"Title: Tailwind class doesn't take effect\nTags: css, reactjs, webpack, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI created a react setup for a little project and decided to add tailwind. It was successful but when I add the class to the components, I don't see any change.\n\nThis is the link to the repository\n\n========================================\n\nTop Answer:\nIf you know that you've configured Tailwind and added the right settings and presets, maybe you need to add this:\n\n```\nmodule.exports = {\n content: [\n './public/index.html', or this, if you're using ReactJS:\n\n```\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}'\n ],\n // ...\n}\n```\n\nWithin your `tailwind.config.js` file.\n\nYou also can *`learn/read`* more about it on: https://tailwindcss.com/docs/content-configuration, that worked perfectly for me!\n\n========================================\n\nCode:\n```text\n{\n loader: \"css-loader\",\n options: {\n modules: true,\n importLoaders: 1,\n sourceMap: true\n }\n }\n```\n\n```text\nmodule.exports = {\n content: [\n './public/index.html', <-\n ],\n}\n```\n\n```text\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}'\n ],\n // ...\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nlearn/read\n```\n\n========================================\n\nComments:\n- Do you get any errors? By the way, adding some code about the implementation and use of the library would help to answer it\n- Where are you importing `tailwind.css` into your app?\n- No errors so far. After adding tailwind configuration, the default styling of the library takes effect but adding class name doesn't work.\n- I only imported main.css in the `index.js` file. Am I to import tailwind.css too?\n- @Odunsi yes, you need to import `tailwind.css` as well.\n- Still the same. No changes\n- @Odunsi have you look at the example on how to integrate with with `webpack`? tailwindcss.com/docs/installation/#build-tool-examples\n- @goto1 Yes, I have. My configuration is the same with it\n- Unless you updated your code, I don't see that setup in your repo.\n- Okay, I just pushed my latest commit.\n- I did that and the issue still persist. I'm sure I did everything correctly. I'll just style it myself. Thank you\n- ok. And why do you use webpack? I suggest using react-scripts npm package which comes with create-react-app. create-react-app.dev/docs/getting-started/…\n- Yes, I know about create-react-app. But CRA comes with some things I probably won't need. And the project I'm working on isn't large, that is why I decided to create the React app without CRA.","metadata":{"transformedAt":"2026-08-18T18:33:42.921Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":89,"estimatedTokens":663}}450{"id":"stack-70585661","source":"stackoverflow","questionId":70585661,"title":"How to use Tailwind background-image in SvelteKit","tags":["tailwind-css","svelte","svelte-3","sveltekit"],"text":"Title: How to use Tailwind background-image in SvelteKit\nTags: tailwind-css, svelte, svelte-3, sveltekit\nSource: Stack Overflow\n\nQuestion:\nhttps://tailwindcss.com/docs/background-image#arbitrary-values\n\nthis is how I want to use Tailwind bg-image feature. This does not work using SvelteKit next 160 and Tailwind 3.0.9.\n\nCode:\n\n```\n\n import globe from '$assets/bg/bg_globe2.png'\n\n //children\n\n```\n\nthe `bg-[right_-14rem_bottom_-10rem]` class works without problems, so I assume Tailwind has problem with Svelte file paths?\n\nEDIT:\noutput from console.log(globe) is `src/assets/bg/bg_globe2.png`.\n\n========================================\n\nTop Answer:\nHere's the oneliner util function I came up with based on the response comments I've got, and also handling some path shenanigans on windows.\n\n```\nexport const toImageUrl = processedImagePath => `url('${processedImagePath.slice(1).replaceAll('\\\\', '/')}')`\n```\n\nand the usage:\n\n```\nimport background from '$assets/bg/bg_setup.png?format=webp&quality=90'\n import { toImageUrl } from '$utils/index.js'\n\n \n```\n\nThe query params in image import are due to the usage of `vite-imagetools`\n\n========================================\n\nCode:\n```text\n<script>\n import globe from '$assets/bg/bg_globe2.png'\n</script>\n\n<div\n class={`flex flex-col bg-primary-dark h-64 overflow-hidden bg-no-repeat bg-[right_-14rem_bottom_-10rem] bg-[url('${globe}')]`}\n>\n //children\n</div>\n```\n\n```text\nbg-[right_-14rem_bottom_-10rem]\n```\n\n```text\nsrc/assets/bg/bg_globe2.png\n```\n\n```text\n<div class=\"bg-{ userThemeColor }\"></div>\n```\n\n```text\n<div style=\"background-color: { userThemeColor }\"></div>\n```\n\n```text\nexport const toImageUrl = processedImagePath => `url('${processedImagePath.slice(1).replaceAll('\\\\', '/')}')`\n```\n\n```text\nimport background from '$assets/bg/bg_setup.png?format=webp&quality=90'\n import { toImageUrl } from '$utils/index.js'\n\n <div style=\"background-image: {toImageUrl(background)}\"/>\n```\n\n```text\nvite-imagetools\n```\n\n========================================\n\nComments:\n- What's the output of `console.log(globe)`? Can you please add that to your question?\n- Tested it on my end with the same result as yours. Arbitrary values work for positioning and show up in the style inspector, but the arbitrary value for the background image is not taken into account even though the path is correct (and tested), so I'm not sure it's a path issue?\n- Have you tried resolving the abiguity? `bg-[image:url('${globe}')]`\n- @JHeth I checked, doesn't change anything. Tested both dev and build+preview, same thing. The path to the image is valid, the tailwind syntax looks correct, but no `background-image` style is generated for the div.\n- @ThomasHennes does it at least work with a valid external URL? Like shown here play.tailwindcss.com/JHnGi2O6TQ if the answer is yes then I'd say using import for images is the problem.\n- @ThomasHennes output from console.log(globe) is `src/assets/bg/bg_globe2.png`. I updated the question.\n- @JHeth Just tested with a hardcoded, absolute URL (the same as in your tailwind playground) and the background image doesn't show. So it's clearly not a URL/path issue.\n- Apologies, I was wrong. The hardcoded URL gets correctly translated into a `background-image` style for the div (though the image still doesn't show up). So it looks like it **is** indeed a path issue. Sorry for misreporting that. I need some sleep -_-\n- I just tested a fresh SvelteKit install and the following worked fine `bg-[image:url('/src/assets/svelte.png')]` but no form of that path as a variable works including the import. The external image URL works both inline and as a variable for me. Tailwind seems to be purging any attempts at using the local file as a variable.","metadata":{"transformedAt":"2026-08-18T18:33:42.921Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":102,"estimatedTokens":940}}451{"id":"stack-75666529","source":"stackoverflow","questionId":75666529,"title":"How can I apply Tailwind CSS classes to SVG elements using D3.js (in VSCODE)?","tags":["javascript","visual-studio-code","d3.js","tailwind-css"],"text":"Title: How can I apply Tailwind CSS classes to SVG elements using D3.js (in VSCODE)?\nTags: javascript, visual-studio-code, d3.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow can I apply Tailwind CSS classes to SVG elements using D3.js?\n\nI'm working on a web project where I need to use both Tailwind CSS and D3.js. However, I'm having trouble applying Tailwind CSS classes to SVG elements using the .attr() method in D3.js.\n\nFor example, when I try to apply the `fill-red-500` class to a rectangle using `d3.select('rect').attr('class', 'fill-red-500')`, the class doesn't seem to be applied correctly, and the rectangle doesn't change color.\n\nI have confirmed that my Tailwind configuration file is correct since I was able to use it successfully with `tooltip.html(\"hello world\")`. However, I don't want to use `.html()` all the time because I am using D3.js to make coding charts easier.\n\nI have also tried different approaches, but none of them seem to work. I have verified that the class is shown in devtools, but no styles appear on the screen.\n\nMy project uses Vite as the bundler, and I am writing vanilla JS with D3.js. I am using Tailwind CSS without any CSS applied to the entire project. The browser I am testing on is Chrome, and my operating system is Windows 11.\n\nIs there a way to make Tailwind read the string inside the `.attr(\"class\", \"tailwindclass\")` method in D3.js? I am open to any solution, even changing the configuration. Ideally, the solution should also work programmatically. For example, something like `() => { if(num>60) {return \"fill-green-500\"} return \"fill-red-500\" }` should work fine.\n\nPlease let me know if I need to provide any additional information.\n\n========================================\n\nCode:\n```text\nfill-red-500\n```\n\n```text\nd3.select('rect').attr('class', 'fill-red-500')\n```\n\n```text\ntooltip.html(\"<div class=\"bg-red-500\">hello world</div>\")\n```\n\n```text\n.html()\n```\n\n```text\n.attr(\"class\", \"tailwindclass\")\n```\n\n```text\n() => { if(num>60) {return \"fill-green-500\"} return \"fill-red-500\" }\n```\n\n```text\nnpx tailwindcss -i ./input.css -o ./dist/output.css --watch\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```js\nd3.select('svg')\n .append(\"rect\")\n .classed('fill-red-500', true) // here the \"class\" working in tailwind\n .attr(\"x\", 10)\n .attr(\"y\", 10)\n .attr(\"height\", 50)\n .attr(\"width\", 50)\n\nconsole.clear() // just for the snippet, you don't need it\n```\n\n```html\n<!-- don't use this script in production, this is only for stackoverflow snippet.... use npm instead -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js\" integrity=\"sha512-oKI0pS1ut+mxQZdqnD3w9fqArLyILRsT3Dx0B+8RVEXzEk3aNK3J3pWlaGJ8MtTs1oiwyXDAH6hG6jy1sY0YqA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<svg height=\"300\" width=\"300\"></svg>\n```\n\n```js\n.classed('fill-green-500', (num) => num > 50) // if num is greater than 50 then add green\n .classed('fill-red-500', (num) => num <= 50); // if num is less or equal to 50 then add the class red.\n```\n\n```js\n\"tailwindCSS.experimental.classRegex\": [\n \"classed\\\\(\\\"([^)]*)\\\"\\\\)\"\n]\n```\n\n```text\n.classed()\n```\n\n```text\n.attr()\n```\n\n```text\n.classed()\n```\n\n```text\n.content\n```\n\n```text\n\"./*.{html,js}\"\n```\n\n```text\n.classed()\n```\n\n```text\n.classed('fill-red-500', true)\n```\n\n```text\n.attr()\n```\n\n```text\ntrue\n```\n\n```text\n.classList.add()\n```\n\n```text\nfalse\n```\n\n```text\n.classList.remove()\n```\n\n```text\ncallback functions\n```\n\n```text\n() => {}\n```\n\n```text\n.data(dataset).enter()\n```\n\n```text\n(d) => {}\n```\n\n```text\ntrue\n```\n\n```text\nfalse\n```\n\n```text\ntrue\n```\n\n```text\n\"\"\n```\n\n```text\nnull\n```\n\n```text\nundefined\n```\n\n```text\ndata()\n```\n\n```text\ndataset\n```\n\n```text\ntailwindCSS.experimental.classRegex\n```\n\n```text\n\"setting\"\n```\n\n```text\n\"TailwindCSS\"\n```\n\n```text\nTailwindCSS > Experimental: Class Regex\n```\n\n```text\ntailwindCSS.experimental.classRegex\n```\n\n========================================\n\nComments:\n- **Tailwind Regex notes:** provided regex works for double quotes, only. For single quotes, you can add/replace the regex with `\"classed\\\\('([^)]*)'\\\\)\"`. It also appears to not work once you add the bool value to `classed`. Otherwise fantastic answer!\n- Holy crap, stellar answer.","metadata":{"transformedAt":"2026-08-18T18:33:42.921Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":41,"totalLines":215,"estimatedTokens":1097}}452{"id":"stack-79766769","source":"stackoverflow","questionId":79766769,"title":"`@apply` is not working and does not validate actual TailwindCSS v4 class/utility names in an Angular (with Sass) project","tags":["angular","sass","tailwind-css","tailwind-css-4","angular20"],"text":"Title: `@apply` is not working and does not validate actual TailwindCSS v4 class/utility names in an Angular (with Sass) project\nTags: angular, sass, tailwind-css, tailwind-css-4, angular20\nSource: Stack Overflow\n\nQuestion:\nI've recently created a new Angular application (v20.3.0) and I installed TailwindCSS v4, using the Angular documentation guideline which is very simple to do (also TailwindCSS in its documentation has exactly the same guideline to integrate with Angular).\n\nSo briefly the guideline says:\n\n```\nnpm install tailwindcss @tailwindcss/postcss postcss\n```\n\n**.postcssrc.json**\n\n```\n{\n \"plugins\": {\n \"@tailwindcss/postcss\": {}\n }\n}\n```\n\n**styles.scss**\n\n```\n@use \"tailwindcss\";\n```\n\nSo, then I've tried using TailwindCSS classes in the components templates and it works perfectly, but when I start adding TailwindCSS classes into `.scss` files using `@apply`, I've noticed that it's only working in the `styles.scss` file, and not working for the components style files which are `.scss` files too.\n\n**styles.css**\n\n```\n@use \"tailwindcss\";\n\n.my-class {\n @apply bg-red-400; /* Error: Cannot apply unknown utility class `bg-red-400` */\n}\n```\n\nSo, when I add `@apply` inside any component style file, I get this compilation error:\n\nError: Cannot apply unknown utility class `bg-red-400`. Are you using CSS modules or similar and missing `@reference`? https://tailwindcss.com/docs/functions-and-directives#reference-directive\n\n========================================\n\nTop Answer:\n```\n\n @reference 'tailwindcss';\n\n .intercal-css {\n @apply bg-red-500;\n }\n\n \n\n### Hello world!\n\n Intercal CSS\n\n```\n\n in direct componet, means css modules\n\n========================================\n\nCode:\n```none\nnpm install tailwindcss @tailwindcss/postcss postcss\n```\n\n```json\n{\n \"plugins\": {\n \"@tailwindcss/postcss\": {}\n }\n}\n```\n\n```css\n@use \"tailwindcss\";\n```\n\n```css\n@use \"tailwindcss\";\n\n.my-class {\n @apply bg-red-400; /* Error: Cannot apply unknown utility class `bg-red-400` */\n}\n```\n\n```text\n.scss\n```\n\n```text\n@apply\n```\n\n```text\nstyles.scss\n```\n\n```text\n.scss\n```\n\n```text\n@apply\n```\n\n```text\nbg-red-400\n```\n\n```text\n@reference\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n --color-neutral-0: #111;\n}\n```\n\n```css\n@use \"custom.scss\";\n\n$primary: #42b883;\n\nbody {\n background: $primary;\n}\n```\n\n```js\nimport \"./main.scss\";\nimport \"./tailwind.css\";\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```css\n@reference \"./../tailwind.css\";\n\nheader {\n @apply bg-neutral-0;\n}\n```\n\n```json\n{\n …\n \"imports\": {\n \"#tailwind.css\": \"./src/tailwind.css\"\n },\n …\n}\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```css\n@reference \"#tailwind.css\";\n\nheader {\n @apply bg-neutral-0;\n}\n```\n\n```html\n<style>\n@reference \"#tailwind.css\";\n\n.example {\n @apply bg-red-400;\n}\n</style>\n\n<h1 class=\"example text-3xl font-bold underline\">\n Hello world!\n</h1>\n```\n\n```html\n<!-- WARNING: Non-working example, only to demonstrate incorrect usage -->\n\n<style type=\"text/scss\">\n@reference \"#tailwind.css\"; /* Error: Invalid CSS after \"@reference\": expected selector or at-rule */\n\n.example {\n @apply bg-red-400; /* Error: Cannot apply unknown utility class `bg-red-400` */\n}\n</style>\n\n<h1 class=\"example text-3xl font-bold underline\">\n Hello world!\n</h1>\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\n@use \"tailwindcss\";\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\n.scss\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\nstyles.scss\n```\n\n```text\ntailwind.css\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```text\n.btn\n```\n\n```text\n.input\n```\n\n```text\n.form\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```text\n.scss\n```\n\n```text\n@apply\n```\n\n```text\n.scss\n```\n\n```text\n.scss\n```\n\n```text\n@reference\n```\n\n```text\n@apply\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\n@reference\n```\n\n```text\n@reference\n```\n\n```text\n@apply\n```\n\n```text\n<style>\n```\n\n```text\n@apply\n```\n\n```text\n<style>\n```\n\n```text\n<style>\n```\n\n```text\n@reference \"tailwindcss\";\n```\n\n```text\n<style>\n @reference 'tailwindcss';\n\n .intercal-css {\n @apply bg-red-500;\n }\n</style>\n\n<main class=\"main\">\n <h1 class=\"text-3xl font-bold underline\">Hello world!</h1>\n <p class=\"intercal-css\">Intercal CSS</p>\n</main>\n<router-outlet />\n```\n\n========================================\n\nComments:\n- This question is similar to: How to use @apply in Tailwind v4?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.\n- Related: **Stop using `@apply` - Moni**\n- The question is primarily based on understanding the relationship between Sass and TailwindCSS v4, which I answered here: stackoverflow.com/a/79767026/15167500 - (I also explained how to properly use CSS Modules (`App.module.(s)css`) and inline `` tags with TailwindCSS.)\n- Seeing the many unrelated answers about CSS Modules, I expanded my response to explain how `@reference` and separated Sass work and how they should be used.\n- This is only for module CSS. It can't be integrated with Sass - see my answer: stackoverflow.com/a/79767026/15167500 - The proper integration is to install TailwindCSS without Sass, and then import the separately installed TailwindCSS into Sass using `@use`.\n- Moreover, the TailwindCSS developers do not recommend using `@apply` inside module CSS due to performance issues and increased build size - which was essentially the point of the question. See more: stackoverflow.com/a/79449440/15167500 (Because of the larger CSS module file sizes, a visitor ultimately generates more data transfer than they would have with a shared global CSS file.)\n- Furthermore, `@reference` by itself does not solve the installation issue mentioned in the question, which arises from the incompatibility between TailwindCSS v4 and Sass. The `@reference` directive can be used in CSS modules within an already functioning project.\n- Thanks for your info, but I'm using the Tailwind V4 with SCSS and using `@reference` inside the SCSS file of the angular component and there's no any issues faced me!!\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- Why don't the comments by rozsazoltan apply here? Please Explain! *@reference by itself does not solve the installation issue mentioned in the question, which arises from the incompatibility between TailwindCSS v4 and Sass. The @reference directive can be used in CSS modules within an already functioning project.*\n- In Angular 17+, styles within a component's `` are processed in isolation, within a CSS scope (shadow-like). This means that the Angular CSS compiler does not automatically inherit Tailwind's global imports. The `styles.css` file with `@import 'tailwindcss';` is processed only once—in the global application scope—not within the component's styles.","metadata":{"transformedAt":"2026-08-18T18:33:42.921Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":52,"totalLines":358,"estimatedTokens":1744}}453{"id":"stack-77037372","source":"stackoverflow","questionId":77037372,"title":"Using CSS calc() with TailwindCSS and JS variables","tags":["css","vue.js","tailwind-css","tailwind-ui","tailwind-in-js"],"text":"Title: Using CSS calc() with TailwindCSS and JS variables\nTags: css, vue.js, tailwind-css, tailwind-ui, tailwind-in-js\nSource: Stack Overflow\n\nQuestion:\nIn a sentence: Why does calculations with JS variables does not apply any style using TailwindCSS v3?\n\nI am using VueJS for my project, and this example works as expected as it simply applies calc as string:\n\n```\n...\n\n...\n```\n\nWhile this doesn't (there are JS variables involved):\n\n```\n...\n\n...\n```\n\nWhen I inspect the console, I can see HTML with the correct class:\n\n```\n...\n... **but styles are not applied**. Any ideas? What am I doing wrong? I think this is a very powerful feature as it lets you dynamically style your HTML based on underlying data, but I can't make it work although I think am so close.\n\nThanks in advance.\n\n========================================\n\nTop Answer:\nDo this instead:\n\n\r\n\r\n\n```\n\nel.style.setProperty('--languages-length', 6);\n\n```\n\n\r\n\r\n\r\n\nEquivalent in Vue:\n\n```\n\n```\n\n========================================\n\nCode:\n```text\n...\n<div class=\"w-[calc((100%-12rem)*2/3)]\">\n...\n```\n\n```text\n...\n<div :class=\"`w-[calc(${props.languages.length * 1.25 + 3}rem)]`\">\n...\n```\n\n```text\n...\n<div class=\"flex w-[calc(14.25rem)]\"\n...\n```\n\n```text\n<div :style=\"`width: ${props.languages.length * 1.25 + 3}rem;`\">\n```\n\n```text\nstyle\n```\n\n```text\nwidth\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div id=\"el\" class=\"w-[calc(var(--languages-length)_*_1.25rem_+_3rem)] h-10 bg-red-300\"></div>\n\n<script>\nel.style.setProperty('--languages-length', 6);\n</script>\n```\n\n```text\n<div \n class=\"w-[calc(var(--languages-length)_*_1.25rem_+_3rem)] h-10 bg-red-300\" \n :style=\"{ '--languages-length': props.languages.length }\"\n></div>\n```\n\n========================================\n\nComments:\n- I'm not sure, but if you're doing the calculation in JavaScript wouldn't it be \"easier\" to simply use `class=`flex w-[${calculation-result}]``, leading to - from your example - `class=`flex w-[14.25rem]``(edited after checking the docs).\n- Thanks @DavidThomas, I am using VueJS and have to prepend `:` to the `class` attribute for Vue to consider it as a \"JS string\". But I am basically doing what you suggest.\n- Fair enough, I admit that I didn't even notice the prepended `:` character; given your comment I'm rather glad that I didn't, since I'd probably have raised that as an issue (not knowing that Vue was in use). I have added the vue.js to the question so others are more aware, feel free to edit it back out though.\n- Just edited the question to add the VueJS dependency.\n- Yes, just wrote an answer with my own research and results. Thanks anyway!\n- Related: How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?\n- @dogukan's answer is much better. It builds a dynamic class, but it uses CSS variables, so the Tailwind CSS compiled code will reference the CSS variable. You can also manipulate the CSS variable at runtime with JavaScript, and the class will not change.\n- However, what you've shared is useful. The problem with dynamically declared class names using JS variables is that, during native CSS compilation, the variable's value is unknown, which can be practically anything. Therefore, using JS variables in dynamic class names, as you mentioned, is incorrect and should not be followed. Great research work!","metadata":{"transformedAt":"2026-08-18T18:33:42.921Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":116,"estimatedTokens":845}}454{"id":"stack-70316150","source":"stackoverflow","questionId":70316150,"title":"How remove the horizontal scroll bar in tailwind css?","tags":["html","tailwind-css"],"text":"Title: How remove the horizontal scroll bar in tailwind css?\nTags: html, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nSo i was trying out the new snap feature in tailwindCSS v3 from their video in YouTube but when i implement it in my local machine it shows a horizontal bar below like the **first image**.\nBut in the video there is no horizontal bar. **image attached below** but I have wrote the same code as the video .\n\n**video reference** : https://youtu.be/mSC6GwizOag?t=630\n\n```\n\n \n\n### Get away this winter\n\n \n\n \n \n \n \n\n \n \n Destination\n\n \n\n### amit deka\n\n \n\n browse\n \n \n \n\n \n- *4 times\n \n\n```\n\nhttps://i.sstatic.net/MVfae.png\n\nhttps://i.sstatic.net/MA2yi.jpg\n\n========================================\n\nCode:\n```text\n<div class=\"relative mt-32\">\n <h1 class=\"text-5xl font-extrabold tracking-tight text-center underline capitalize decoration-emerald-400\">Get away this winter</h1>\n <ul class=\"mt-10 pb-8 px-[50vw] w-full flex gap-8 snap-x overflow-x-auto self-center\">\n\n <li class=\"snap-center\">\n <div class=\"relative flex-shrink-0 max-w-[95vw] overflow-hidden rounded-3xl\">\n <img src=\"https://images.unsplash.com/photo-1542144612-1b3641ec3459?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60\" alt=\"\" class=\"absolute inset-0 object-cover object-bottom w-full h-full \" />\n <div class=\"absolute inset-0 w-full h-full bg-gradient-to-br from-black/75\"></div>\n\n <div class=\" relative h-96 w-[768px] p-12 flex flex-col justify-between items-start\">\n <div>\n <p class=\"font-medium text-stone-50\">Destination</p>\n <h2 class=\"w-2/3 mt-3 text-3xl font-semibold tracking-tight text-white\">amit deka</h2>\n </div>\n\n <a href=\"#\" class=\"px-4 py-3 text-sm font-medium bg-white rounded-lg text-slate-900\"> browse</a>\n </div>\n </div>\n </li>\n\n <li></li>*4 times\n </ul>\n</div>\n```\n\n```text\n/* Hide scrollbar for Chrome, Safari and Opera */\n.container-snap::-webkit-scrollbar {\n display: none;\n}\n\n/* Hide scrollbar for IE, Edge and Firefox */\n.container-snap {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n}\n```\n\n```text\n<div class=\"relative mt-32\">\n<h1 class=\"text-5xl font-extrabold tracking-tight text-center underline capitalize decoration-emerald-400\">Get away this winter</h1>\n<ul class=\"container-snap mt-10 pb-8 px-[50vw] w-full flex gap-8 snap-x overflow-x-auto self-center\">\n\n <li class=\"snap-center\">\n <div class=\"relative flex-shrink-0 max-w-[95vw] overflow-hidden rounded-3xl\">\n <img src=\"https://images.unsplash.com/photo-1542144612-1b3641ec3459?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60\" alt=\"\" class=\"absolute inset-0 object-cover object-bottom w-full h-full \" />\n <div class=\"absolute inset-0 w-full h-full bg-gradient-to-br from-black/75\"></div>\n\n <div class=\" relative h-96 w-[768px] p-12 flex flex-col justify-between items-start\">\n <div>\n <p class=\"font-medium text-stone-50\">Destination</p>\n <h2 class=\"w-2/3 mt-3 text-3xl font-semibold tracking-tight text-white\">amit deka</h2>\n </div>\n\n <a href=\"#\" class=\"px-4 py-3 text-sm font-medium bg-white rounded-lg text-slate-900\"> browse</a>\n </div>\n </div>\n </li>\n\n <li></li>*4 times\n</ul>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.921Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":114,"estimatedTokens":893}}455{"id":"stack-73527507","source":"stackoverflow","questionId":73527507,"title":"How to add multiple box shadows using Tailwind css?","tags":["html","css","angular","tailwind-css"],"text":"Title: How to add multiple box shadows using Tailwind css?\nTags: html, css, angular, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to give 2 box shadows using tailwind css\n\nCSS:\n\n```\nbutton{\n box-shadow: inset 0px 0px 0px 1px var(--primary-500), inset 0px 0px 0px 2px red;\n }\n```\n\nThis is what I'm able to achieve using tailwind css:\n\n```\n Hello World! \n```\n\n========================================\n\nTop Answer:\nTo use multiple box-shadows you can use comma separated box-shadow's values inside square brackets.\n\n```\n\n Hello World!\n\n```\n\n========================================\n\nCode:\n```text\nbutton{\n box-shadow: inset 0px 0px 0px 1px var(--primary-500), inset 0px 0px 0px 2px red;\n }\n```\n\n```text\n<button class=\"shadow-[inset_0_0_0_1px_var(--primary-500)]\"> Hello World! </button>\n```\n\n```text\nshadow\n```\n\n```text\nbox-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n```\n\n```text\ntheme.boxShadow\n```\n\n```text\ntheme.extend.boxShadow\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nDEFAULT\n```\n\n```text\n'2'\n```\n\n```text\nshadow-2\n```\n\n```html\n<button\n class=\"shadow-[inset_0_0_0_1px_var(--primary-500),inset_0px_0px_0px_2px_red]\">\n Hello World!\n</button>\n```\n\n```html\n<div class=\"shadow-sm shadow-y-[4px] shadows-4 shadows-scale-2\">...</div>\n```\n\n```text\nshadow-sm\n```\n\n```text\n4px\n```\n\n```text\nshadow-y-[4px]\n```\n\n```text\nshadows-4\n```\n\n```text\nshadows-scale-*\n```\n\n```text\nshadows-ease-{in|out}\n```\n\n========================================\n\nComments:\n- Is there a way to customize the tailwind config so DEFAULT or lg for example have two custom shadows?\n- Nevermind found it here: design2tailwind.com/blog/tailwindcss-box-shadows-how-to\n- Aga's example is correct for using arbitrary values. Luke's info is still relevant if you want to add custom classes or modify Tailwind defaults.","metadata":{"transformedAt":"2026-08-18T18:33:42.921Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":18,"totalLines":118,"estimatedTokens":457}}456{"id":"stack-75879418","source":"stackoverflow","questionId":75879418,"title":"How to remove arrows in input type \"number\" inside the input?","tags":["html","css","input","tailwind-css"],"text":"Title: How to remove arrows in input type \"number\" inside the input?\nTags: html, css, input, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'd like to remove the arrows when input is focused but I can't use a CSS file. I have to do it on my component.\n\nHow can I achieve that ? Is it possible with TailwindCSS ?\n\nTailwind Playground\n\n```\nconst InputCounter = ({ id, label, value }: NumericInputProps) => {\n const [count, setCount] = useState(value ?? 0);\n\n return (\n \n \n {label}\n \n\n \n setCount(count - 1)}\n >\n \n \n\n \n\n setCount(count + 1)}\n >\n \n \n \n \n );\n};\n```\n\n========================================\n\nTop Answer:\ntry this\n\n```\n\n```\n\nThis approach is simple yet powerful. Using `inputmode=”numeric”` attribute you can find an input box without an arrow. The older browsers might not support this feature for example Internet Explorer and Safari but most of modern browsers like Chrome, Firefox, Edge, and Opera support this attribute.\n\n========================================\n\nCode:\n```text\nconst InputCounter = ({ id, label, value }: NumericInputProps) => {\n const [count, setCount] = useState(value ?? 0);\n\n return (\n <div className=\"hk-flex hk-flex-col hk-gap-2\">\n <label htmlFor={id} className=\"hk-text-sm hk-font-bold hk-text-neutral-700\">\n {label}\n </label>\n\n <div>\n <button\n type=\"button\"\n className=\"hk-h-10 hk-w-10 hk-bg-transparent hk-rounded hk-rounded-r focus:hk-outline-none\"\n onClick={() => setCount(count - 1)}\n >\n <IconLess width={16} height={16} />\n </button>\n\n <input\n id={id}\n type=\"number\"\n value={count}\n className=\"hk-h-10 hk-w-16 hk-text-center hk-text-base hk-border-none hk-rounded focus:hk-outline-none hk-appearance-none\"\n />\n\n <button\n type=\"button\"\n className=\"hk-h-10 hk-w-10 hk-bg-transparent hk-rounded hk-rounded-l focus:hk-outline-none\"\n onClick={() => setCount(count + 1)}\n >\n <IconPlus width={16} height={16} />\n </button>\n </div>\n </div>\n );\n};\n```\n\n```html\n<input id=\"{id}\" type=\"number\" value=\"0\" class=\"[&::-webkit-inner-spin-button]:appearance-none\" />\n```\n\n```html\n<div class=\"flex items-center border border-neutral-300 w-fit rounded m-8 \">\n <button type=\"button\" class=\"h-10 w-10 rounded border-r border-gray-300 bg-transparent focus:outline-none\">-</button>\n\n <input id=\"{id}\" type=\"number\" value=\"0\" class=\"h-10 w-16 text-center [&::-webkit-inner-spin-button]:appearance-none\" />\n\n <button type=\"button\" class=\"h-10 w-10 rounded border-l border-neutral-300 bg-transparent focus:outline-none\">+</button>\n</div>\n```\n\n```text\n[&::-webkit-inner-spin-button]\n```\n\n```text\nappearance-none\n```\n\n```text\n-webkit-inner-spin-button\n```\n\n```text\n<input\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"Enter number...\"\n />\n```\n\n```text\ninputmode=”numeric”\n```\n\n```css\n.no-spinners {\n -moz-appearance: textfield;\n }\n \n .no-spinners::-webkit-outer-spin-button,\n .no-spinners::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n```\n\n```html\n<body>\n <h3>How to disable arrows from Number input?</h3>\n <!-- Method 3: CSS \"appearance\" property -->\n\n <input type=\"number\" placeholder=\"Enter a number here\" class=\"no-spinners\" />\n\n</body>\n```\n\n========================================\n\nComments:\n- Does this answer your question? stackoverflow.com/questions/3790935/…\n- no since the CSS is in CSS. I need it to be in my className or an attribute on the input\n- Then I guess there isn't any way to do that *only* with utility classes provided by tailwind. You'll need to use custom CSS styles.\n- You can add style=\"\" to the element.\n- You mean you are not able to add/update any CSS classes?\n- I can add classes or style attribute, but i cant create a css file to add CSS inside it\n- Then use a `` tag and write CSS inside of it.\n- I tried but get the error : \"Cannot find name 'webkit'\" ^^'\n- Make sure to do that in this way: `{`styles_go_here`}`\n- What happens when you add a style attribute?\n- @AHaworth I added it but the arrows was still there","metadata":{"transformedAt":"2026-08-18T18:33:42.921Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":166,"estimatedTokens":1047}}457{"id":"stack-73937028","source":"stackoverflow","questionId":73937028,"title":"How can we use TailwindCSS to proportionally scale an image to always fit within the viewport?","tags":["html","css","tailwind-css"],"text":"Title: How can we use TailwindCSS to proportionally scale an image to always fit within the viewport?\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWe would like to use TailwindCSS to proportionally scale an image (i.e. without altering the aspect ratio) such that the image is fully visible \"above the fold\", horizontally and vertically centered, and has a configurable amount of padding between the image and sides of the window.\n\nFor example, say we have some code which looks like this (Tailwind Playground):\n\n\r\n\r\n\n```\n\n \n \n \n \n \n \n \n\n```\n\n\r\n\r\n\r\n\nHere the image needs to be resized such that its height is not larger than the available screen. Additionally there should be padding between the image and sides of the screen. (The `sm` breakpoint can be ignored; this is more important for larger screens.)\n\nIdeally this will be achieved using only CSS (Tailwind specifically), however if necessary JavaScript is an option.\n\n========================================\n\nTop Answer:\nI hope this will this is what you are looking for.\n\n\r\n\r\n\n```\n\n \n \n \n \n \n \n \n\n```\n\n========================================\n\nCode:\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css\" />\n\n<html lang=\"en\" class=\"min-h-screen bg-gray-50\">\n <body class=\"min-h-screen\">\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"flex min-h-screen sm:px-12 py-8\">\n <img class=\"h-auto max-w-full drop-shadow-md sm:rounded-md\" src=\"https://via.placeholder.com/1500x2500\" alt=\"\" />\n </div>\n </div>\n </body>\n</html>\n```\n\n```text\nsm\n```\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css\" />\n\n<html lang=\"en\" class=\"bg-gray-50\">\n\n<body>\n <div class=\"flex justify-center sm:px-12 p-8 h-screen\">\n <img class=\"object-scale-down max-h-full drop-shadow-md rounded-md m-auto\" src=\"https://dummyimage.com/600x400/000/fff\" alt=\"\" />\n </div>\n</body>\n\n</html>\n```\n\n```text\n.h-screen\n```\n\n```text\nimg\n```\n\n```text\n.object-scale-down\n```\n\n```text\nmax-h-full\n```\n\n```text\nm-auto\n```\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css\" />\n\n<html lang=\"en\" class=\"min-h-screen bg-gray-50\">\n <body class=\"min-h-screen\">\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"flex min-h-screen h-screen\">\n <img class=\"h-auto object-contain max-w-full drop-shadow-md rounded-md\" src=\"https://via.placeholder.com/1500x2500\" alt=\"\" />\n </div>\n </div>\n </body>\n</html>\n```\n\n```text\nspacing: {\n '1/3': '33.33333%',\n '2/3': '66.66667%',\n '1/6': '16.666667%',\n '2/6': '33.333333%',\n '4/6': '66.666667%',\n '5/6': '83.333333%',\n '1/12': '8.333333%',\n '2/12': '16.666667%',\n '4/12': '33.333333%',\n '5/12': '41.666667%',\n '7/12': '58.333333%',\n '8/12': '66.666667%',\n '10/12': '83.333333%',\n '11/12': '91.666667%',\n },\n```\n\n```text\n<link rel=\"stylesheet\" href=\"https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css\" />\n<html lang=\"en\" class=\"min-h-screen bg-gray-50\">\n <body class=\"min-h-screen\">\n<div class=\"relative h-0 pb-2/3 sm:pt-1/3 lg:pb-1/3\">\n <img class=\"absolute w-full h-full inset-0 object-cover object-top\"\n src=\"https://picsum.photos/1200/1200\" alt=\"metal post thumbnail\"\n >\n</div>\n</body>\n</html>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.921Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":152,"estimatedTokens":883}}458{"id":"stack-79743663","source":"stackoverflow","questionId":79743663,"title":"How to use @apply in Tailwind v4?","tags":["css","vue.js","tailwind-css","tailwind-css-4"],"text":"Title: How to use @apply in Tailwind v4?\nTags: css, vue.js, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nSince Tailwind v4 update, all `@apply` directives have ceased to function.\n\nThe docs provide a workaround with `@reference` but the posted example is vague.\n\nI tried this but it doesn't work:\n\n```\n\n// @reference './../../assets/styles/scss/main.scss'; // workaround (incorrect)\n@reference \"tailwindcss\"; // should be sufficient\n\nheader {\n @apply bg-neutral-0; // used to work in Tailwind v3\n}\n(...)\n\n```\n\nWhen I inspect the Header in the browser, it doesn't have assigned any background color.\n\n**Edit.** I was missing `@tailwindcss/vite` but some utility classes still don't work. I.e. `@apply block` works, but `@apply bg-neutral-0` doesn't. It throws an error:\n\n```\n19:26:13 [vite] (client) hmr update /src/components/Header.vue?vue&type=style&index=1&lang.postcss (x2) \nError: Cannot apply unknown utility class `bg-neutral-0`. Are you using CSS modules or similar and missing `@reference`? https://tailwindcss.com/docs/functions-and-directives#reference-directive\n```\n\n========================================\n\nTop Answer:\nThe file that you point to `@reference` must be a CSS file, not a SCSS file. This CSS file should contain `@import \"tailwindcss\";` or similar. The `@reference` processing is done entirely through Tailwind and it does not understand any other preprocessor syntaxes.\n\nAs per the documentation:\n\nTailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.\n\n**Think of Tailwind CSS itself as your preprocessor** — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.\n\nAs a workaround, you can try having your Tailwind-related CSS in its own CSS file:\n\n```\n@import \"tailwindcss\";\n\n@theme {\n …\n}\n```\n\nAnd `@import`/`@use` that into your `main.scss` file:\n\n```\n@import \"./path/to/subfile.css\";\n```\n\nThen, you can do:\n\n```\n\n@reference './../../assets/styles/scss/path/to/subfile.css';\n\nheader {\n @apply bg-neutral-0;\n}\n(...)\n\n```\n\nThough as mentioned, **this is not guaranteed to work** as Tailwind does not support usage with Sass.\n\nIt is worth mentioning, Adam Wathan (creator of Tailwind) does seem to advocate avoiding `@apply`:\n\n- https://twitter.com/adamwathan/status/1226511611592085504\n\n- https://twitter.com/adamwathan/status/1559250403547652097\n\n- https://x.com/adamwathan/status/1890406016291938701\n\nInstead, you should look at using Tailwind class names directly:\n\n```\n\n …\n\n```\n\nIf your project fully encompasses this paradigm, you may find you write little CSS yourself. Thus you would not need Sass at all, simplifying the project setup.\n\n========================================\n\nCode:\n```text\n<style lang=\"postcss\">\n// @reference './../../assets/styles/scss/main.scss'; // workaround (incorrect)\n@reference \"tailwindcss\"; // should be sufficient\n\nheader {\n @apply bg-neutral-0; // used to work in Tailwind v3\n}\n(...)\n</style>\n```\n\n```text\n19:26:13 [vite] (client) hmr update /src/components/Header.vue?vue&type=style&index=1&lang.postcss (x2) \nError: Cannot apply unknown utility class `bg-neutral-0`. Are you using CSS modules or similar and missing `@reference`? https://tailwindcss.com/docs/functions-and-directives#reference-directive\n```\n\n```text\n@apply\n```\n\n```text\n@reference\n```\n\n```text\n@tailwindcss/vite\n```\n\n```text\n@apply block\n```\n\n```text\n@apply bg-neutral-0\n```\n\n```css\n$primary: #42b883;\n\nbody {\n background: $primary;\n}\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n --color-neutral-0: #111;\n}\n```\n\n```js\nimport \"./styles/scss/main.scss\";\nimport \"./styles/css/tailwind.css\";\n```\n\n```html\n<style lang=\"postcss\">\n@reference \"./../../assets/styles/css/tailwind.css\";\n\nheader {\n @apply bg-neutral-0;\n}\n</style>\n```\n\n```json\n// package.json\n{\n \"imports\": {\n \"#tailwind.css\": \"./assets/styles/css/tailwind.css\"\n },\n}\n```\n\n```html\n<style lang=\"postcss\">\n@reference \"#tailwind.css\";\n\nheader {\n @apply bg-neutral-0;\n}\n</style>\n```\n\n```text\n@apply\n```\n\n```text\nbg-neutral-0\n```\n\n```text\n@apply\n```\n\n```text\n@reference \"tailwindcss\";\n```\n\n```text\n--color-neutral-0\n```\n\n```text\n*.module.css\n```\n\n```text\n<style>\n```\n\n```text\n@reference\n```\n\n```text\n@apply\n```\n\n```text\nstyles.scss\n```\n\n```text\ntailwind.css\n```\n\n```text\ntailwind.css\n```\n\n```text\npackage.json\n```\n\n```text\n@reference\n```\n\n```text\n@reference\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n …\n}\n```\n\n```scss\n@import \"./path/to/subfile.css\";\n```\n\n```html\n<style lang=\"postcss\">\n@reference './../../assets/styles/scss/path/to/subfile.css';\n\nheader {\n @apply bg-neutral-0;\n}\n(...)\n</style>\n```\n\n```html\n<header class=\"bg-neutral-0\">\n …\n</header>\n```\n\n```text\n@reference\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\n@reference\n```\n\n```text\n@import\n```\n\n```text\n@use\n```\n\n```text\nmain.scss\n```\n\n```text\n@apply\n```\n\n========================================\n\nComments:\n- I was also missing `@tailwindcss/vite` plugin. But it still doesn't work. I get now `Error: Cannot apply unknown utility class bg-neutral-0`.\n- The file that you point to `@reference` must be a CSS file, not a SCSS file. This CSS file should contain `@import \"tailwindcss\";` or similar. The `@reference` processing is done entirely through Tailwind and it does not understand any other preprocessor syntaxes.\n- What a mess. I appreciate the help, though. But why do I need to define my theme and values in `tailwind.css` if I already have it in `tailwind.config.cjs`?\n- Although TailwindCSS v4 prefers a CSS-first configuration, yes, if you have an external configuration file it can also work - just make sure you declare its relative path in the `tailwind.css` file with `@config` directive.\n- Related: Stop using `@apply` - Moni","metadata":{"transformedAt":"2026-08-18T18:33:42.921Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":39,"totalLines":307,"estimatedTokens":1448}}459{"id":"stack-71191532","source":"stackoverflow","questionId":71191532,"title":"Setting custom dark mode theme in Tailwind CSS config?","tags":["reactjs","tailwind-css","tailwind-in-js"],"text":"Title: Setting custom dark mode theme in Tailwind CSS config?\nTags: reactjs, tailwind-css, tailwind-in-js\nSource: Stack Overflow\n\nQuestion:\nI'd like to use custom themes in Tailwind config to set primary/secondary colors for light and dark mode. The Tailwind docs only go over using classes in an html/jsx element like so:\n\n`Instead of declaring this on every element in my app, I'd like to do the following:\n\n``\n\nand then in config, define something like:\n\n```\ncolors: {\n light: {\n primary: \"white\",\n secondary: \"black\",\n }\n dark: {\n primary: \"black\",\n secondary: \"white\",\n }\n}\n```\n\nDoes anyone know of a way to do this? I am using Tailwind with React.\n\n========================================\n\nTop Answer:\nYou can use `@apply`:\n\n```\n.bg-primary {\n @apply bg-white dark:bg-slate-900\n}\n\n/* ... */\n```\n\nYou can even go so far as to write a script to generate this CSS.\n\nhttps://tailwindcss.com/docs/functions-and-directives\n\n========================================\n\nCode:\n```text\ncolors: {\n light: {\n primary: \"white\",\n secondary: \"black\",\n }\n dark: {\n primary: \"black\",\n secondary: \"white\",\n }\n}\n```\n\n```text\n<div class=\"bg-white dark:bg-slate-900...\n```\n\n```text\n<div class=\"bg-primary text-secondary\" />\n```\n\n```css\n.bg-primary {\n @apply bg-white dark:bg-slate-900\n}\n\n/* ... */\n```\n\n```text\n@apply\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n\n :root {\n --color-primary: 247 147 34;\n --color-text: 33 33 33;\n --color-success: 0 200 81;\n --color-info: 51 181 229;\n --color-warn: 255 187 51;\n --color-error: 254 78 78;\n }\n\n :root [class~=\"dark\"] {\n --color-primary: 247 147 34;\n --color-text: 33 33 33;\n --color-success: 0 200 81;\n --color-info: 51 181 229;\n --color-warn: 255 187 51;\n --color-error: 254 78 78;\n }\n}\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: \"class\",\n theme: {\n colors: {\n primary: \"rgb(var(--color-primary) / <alpha-value>)\",\n text: \"rgb(var(--color-text) / <alpha-value>)\",\n success: \"rgb(var(--color-success) / <alpha-value>)\",\n info: \"rgb(var(--color-info) / <alpha-value>)\",\n warn: \"rgb(var(--color-warn) / <alpha-value>)\",\n error: \"rgb(var(--color-error) / <alpha-value>)\",\n transparent: \"transparent\",\n current: \"currentColor\",\n },\n}\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- See my answer below - found a couple other solutions!","metadata":{"transformedAt":"2026-08-18T18:33:42.921Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":134,"estimatedTokens":625}}460{"id":"stack-67908209","source":"stackoverflow","questionId":67908209,"title":"How to convert background-position: % in Tailwind","tags":["css","tailwind-css"],"text":"Title: How to convert background-position: % in Tailwind\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nDidn't find a way to convert\n\n`background-position: 0% 20%;`\n\nin tailwind\n\nI only find these classes `bg-{side}`\n\nany help is appreciated\n\n========================================\n\nTop Answer:\nJIT for tailwind v3 is currently not implemented.\n\nI was able to achieve\n\n```\nbackground-position: -200% 0%;\n```\n\nor\n\n```\nbackground-position-x: -200%;\nbackground-position-y: 0%\n```\n\nby doing\n\n```\nbg-[left_calc(-200%)_top_calc(0%)]\n```\n\n========================================\n\nCode:\n```text\nbackground-position: 0% 20%;\n```\n\n```text\nbg-{side}\n```\n\n```text\nbg-[0% 20%]\n```\n\n```text\nbackground-position: -200% 0%;\n```\n\n```text\nbackground-position-x: -200%;\nbackground-position-y: 0%\n```\n\n```text\nbg-[left_calc(-200%)_top_calc(0%)]\n```\n\n```text\nbg-[length:auto_100%]\n```\n\n```text\nbackground-size: auto 100%\n```\n\n```text\nbg-[0%_20%]\n```\n\n```text\nbackground-position: calc(100% - 8px) 50%;\n```\n\n```text\nbg-[calc(100%-8px)_50%]\n```\n\n========================================\n\nComments:\n- write your own class. I doubt it's a good idea to have a class for each percentage.\n- Use an arbitrary value. E.g.: `bg-[0%_20%]` - yes, use `_` instead of spaces.\n- `bg-[0% 20%]` doesn't work for me, whereas something like `w-[80px]` does.\n- This looks more like a comment than an answer. We could start writing answers with various calculation compositions. A general answer: use an arbitrary value. For question, e.g: `bg-[0%_20%]`","metadata":{"transformedAt":"2026-08-18T18:33:42.922Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":94,"estimatedTokens":382}}461{"id":"stack-69710177","source":"stackoverflow","questionId":69710177,"title":"Why styles don't update when saving the files in Tailwind CSS JIT mode and I need to restart the server?","tags":["reactjs","tailwind-css"],"text":"Title: Why styles don't update when saving the files in Tailwind CSS JIT mode and I need to restart the server?\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nEdit: **This issue is now deprecated since version 3.0.0 of tailwind works with react without having to use CRACO**.\n\nWhile trying to use Tailwind with React in JIT mode the classes that I add have no styles, even after refreshing the page. I have to restart the server for the styles to take effect.\n\ntailwind.config.js:\n\n```\nmodule.exports = {\n mode: \"jit\",\n purge: [\"./src/**/*.{js,jsx,ts,tsx}\", \"./public/index.html\"],\n ...\n}\n```\n\ncraco.config.js:\n\n```\nmodule.exports = {\n style: {\n postcss: {\n plugins: [require(\"tailwindcss\"), require(\"autoprefixer\")]\n }\n }\n}\n```\n\npackage.json:\n\n```\n{\n \"name\": \"random-name\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@craco/craco\": \"^6.3.0\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-scripts\": \"4.0.3\",\n \"web-vitals\": \"^1.1.2\"\n },\n \"scripts\": {\n \"start\": \"craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\"\n },\n \"devDependencies\": {\n \"@tailwindcss/postcss7-compat\": \"^2.2.17\",\n \"autoprefixer\": \"^9.8.8\",\n \"postcss\": \"^7.0.39\",\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.2.17\"\n }\n}\n```\n\n========================================\n\nTop Answer:\nIn `package.json` you should activate watch mode on the start script like\n\n```\n\"scripts\": {\n \"start\": \"TAILWIND_MODE=watch craco start\",\n ...\n}\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n mode: \"jit\",\n purge: [\"./src/**/*.{js,jsx,ts,tsx}\", \"./public/index.html\"],\n ...\n}\n```\n\n```text\nmodule.exports = {\n style: {\n postcss: {\n plugins: [require(\"tailwindcss\"), require(\"autoprefixer\")]\n }\n }\n}\n```\n\n```text\n{\n \"name\": \"random-name\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@craco/craco\": \"^6.3.0\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-scripts\": \"4.0.3\",\n \"web-vitals\": \"^1.1.2\"\n },\n \"scripts\": {\n \"start\": \"craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\"\n },\n \"devDependencies\": {\n \"@tailwindcss/postcss7-compat\": \"^2.2.17\",\n \"autoprefixer\": \"^9.8.8\",\n \"postcss\": \"^7.0.39\",\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.2.17\"\n }\n}\n```\n\n```text\n{\n // ...\n scripts: {\n \"dev\": \"TAILWIND_MODE=watch craco start\",\n\n // Do not set TAILWIND_MODE for one-off builds\n \"build\": \"craco build\",\n // ...\n },\n // ...\n}\n```\n\n```text\nTAILWIND_MODE=watch\n```\n\n```text\npackage.json\n```\n\n```text\n\"scripts\": {\n \"start\": \"TAILWIND_MODE=watch craco start\",\n ...\n}\n```\n\n```text\npackage.json\n```\n\n```text\npackage.json\n```\n\n```text\nposctcss\n```\n\n```text\npostcss\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.922Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":164,"estimatedTokens":721}}462{"id":"stack-72443353","source":"stackoverflow","questionId":72443353,"title":"How do I use tailwindcss @apply directive inside a svelte component","tags":["javascript","webpack","tailwind-css","svelte","postcss"],"text":"Title: How do I use tailwindcss @apply directive inside a svelte component\nTags: javascript, webpack, tailwind-css, svelte, postcss\nSource: Stack Overflow\n\nQuestion:\nThis works:\n\n```\n\n```\n\nThis doesn't work:\n\n```\n\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer components {\n .list {\n @apply p-2;\n }\n }\n\n```\n\nI looked in Svelte's docs, but it explains the process with SvelteKit, which I'm not using. How can I make it work?\n\nwebpack.config.js:\n\n```\n...\nmodule: {\nrules: [\n {\n test: /\\.css$/i,\n use: ['style-loader', 'css-loader', 'postcss-loader'],\n },\n```\n\ntailwind.config.js:\n\n```\nmodule.exports = {\n purge: [\n './*.html',\n './src/**/*.js',\n './src/**/*.svelte'\n ],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\npostcss.config.js:\n\n```\nmodule.exports = {\n plugins: [\n ['tailwindcss'],\n ['autoprefixer'],\n ],\n};\n```\n\n========================================\n\nTop Answer:\nYou need to install `svelte-preprocess` and use it in the `svelte-loader` for Webpack.\n\nThe documentation for using `@import` gives an example:\n\n```\nconst sveltePreprocess = require('svelte-preprocess');\n...\nmodule.exports = {\n ...\n module: {\n rules: [\n ...\n {\n test: /\\.(html|svelte)$/,\n use: {\n loader: 'svelte-loader',\n options: {\n preprocess: sveltePreprocess({\n postcss: true\n })\n }\n }\n }\n ...\n ]\n },\n plugins: [\n new webpack.HotModuleReplacementPlugin(),\n ...\n ]\n}\n```\n\n(You may need various peer dependencies like `postcss` itself and `postcss-load-config` depending on which kinds of features you use.)\n\n========================================\n\nCode:\n```text\n<div class=\"list p-2\" />\n```\n\n```text\n<style lang=\"postcss\">\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer components {\n .list {\n @apply p-2;\n }\n }\n</style>\n```\n\n```text\n...\nmodule: {\nrules: [\n {\n test: /\\.css$/i,\n use: ['style-loader', 'css-loader', 'postcss-loader'],\n },\n```\n\n```text\nmodule.exports = {\n purge: [\n './*.html',\n './src/**/*.js',\n './src/**/*.svelte'\n ],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nmodule.exports = {\n plugins: [\n ['tailwindcss'],\n ['autoprefixer'],\n ],\n};\n```\n\n```text\n<style lang=\"postcss\">\n .list {\n @apply p-2;\n }\n</style>\n```\n\n```text\n<style lang=\"postcss\">\n @import \"tailwindcss\";\n \n .list {\n @apply p-2;\n }\n</style>\n```\n\n```js\nconst sveltePreprocess = require('svelte-preprocess');\n...\nmodule.exports = {\n ...\n module: {\n rules: [\n ...\n {\n test: /\\.(html|svelte)$/,\n use: {\n loader: 'svelte-loader',\n options: {\n preprocess: sveltePreprocess({\n postcss: true\n })\n }\n }\n }\n ...\n ]\n },\n plugins: [\n new webpack.HotModuleReplacementPlugin(),\n ...\n ]\n}\n```\n\n```text\nsvelte-preprocess\n```\n\n```text\nsvelte-loader\n```\n\n```text\n@import\n```\n\n```text\npostcss\n```\n\n```text\npostcss-load-config\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n \n}\n```\n\n```html\n<style lang=\"postcss\">\n@reference \"./../css/global.css\";\n \n.list {\n @apply p-2;\n}\n</style>\n```\n\n```html\n<style lang=\"postcss\">\n@reference \"tailwindcss\";\n \n.list {\n @apply p-2;\n}\n</style>\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\n@reference\n```\n\n```text\n@reference\n```\n\n```text\n@apply\n```\n\n```text\n@variant\n```\n\n```text\n<style>\n```\n\n```text\ntailwindcss\n```\n\n```text\n@reference\n```\n\n========================================\n\nComments:\n- Thank you, it's working now but it won't purge unused css. I'm getting 74 warnings of unused CSS selectors as soon as I add the three @tailwind directives in my tag. I tried manually setting process.env.NODE_ENV to \"production\" and my tailwind.config.js is bare bones.\n- You might want to place the `@tailwind` directives in a `global` style tag on a root component (example). That should get rid of the warnings, but I do not know if the purging will automatically work.\n- I tried that before, but for some reason the @tailwind directives are not being treated as global. If I try to use @apply in another component I get an error \"no matching `@tailwind components` directive\". A regular CSS selector works, it affects other components. The styles are in ``\n- Testing things further, if I only include the @tailwind directives in my main component, the tailwind classes that you apply inline to elements work fine, only when I try to use `@layer components` I get the error. And when I add the directives to that component as well, it complains about css duplication.\n- Related: **Stop using `@apply` - Moni**\n- imho, it should be the accepted answer : use reference over import tailwindcss if tailwind is already imported in a global.css\n- This should be the accepted answer. And while @apply might not be the best practice and you're better of writing ``, is suppose there are some valid use cases.\n- @rozsazoltan What if i have `{@html content}`, and i want to style h2 inside the content? Is `@reference \"./../css/global.css\"; :global(.content h2) { @apply text-primary; }` still worse than `{@html content}`?","metadata":{"transformedAt":"2026-08-18T18:33:42.922Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":25,"totalLines":310,"estimatedTokens":1313}}463{"id":"stack-68793033","source":"stackoverflow","questionId":68793033,"title":"Cypress Component Testing, ReactJS, and TailwindCSS","tags":["reactjs","cypress","tailwind-css","craco"],"text":"Title: Cypress Component Testing, ReactJS, and TailwindCSS\nTags: reactjs, cypress, tailwind-css, craco\nSource: Stack Overflow\n\nQuestion:\nDoes anyone know how can I load the TailwindCSS from the testing files?\n\nI've tried to use the same approach I used on VueJS, importing the css file, but it does just not load the styles.\n\nHere's the commit where I added the cypress component testing:\nhttps://github.com/vicainelli/cypress-component-testing-react-tailwindcss/commit/2fa25833cb965fadfeda6c53b80a23bb12b3b1c5\n\nI know in mount there are options that I can pass the stylesheet, for example\n\nLike this:\n\n```\nmount(, { stylesheet: \"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" });\n```\n\nBut I would like to use my custom css.\n\n========================================\n\nTop Answer:\nYou can directly import the tailwind CSS like this as mentioned in the cypress 7.0 migration guide. Also, `mountingOptions.stylesheets` are not recommended.\n\n```\nrequire('tailwindcss/dist/tailwindcss.min.css')\n```\n\nThe entire snippet:\n\n```\n// In the majority of modern style-loaders,\n// these styles will be injected into document.head when they're imported below\nrequire('./index.scss')\nrequire('tailwindcss/dist/tailwindcss.min.css')\n\nconst { mount } = require('@cypress/react')\nconst Button = require('./Button')\n\nit('renders a Button', () => {\n // This button will render with the Tailwind CSS styles\n // as well as the application's index.scss styles\n mount()\n})\n```\n\n========================================\n\nCode:\n```js\nmount(<App />, { stylesheet: \"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" });\n```\n\n```js\nimport 'tailwindcss/dist/tailwind.min.css'\n```\n\n```js\nimport 'tailwindcss/dist/tailwindcss.min.css' // causes error, not in node_modules\n```\n\n```js\nimport React from 'react';\nimport { mount } from '@cypress/react';\nimport App from './App';\nimport './index.css';\nimport 'tailwindcss/dist/tailwind.min.css'\n\nit('should renders the App correctly', () => {\n mount(<App />) \n cy.get('h1').contains('Cypress Component Testing with Tailwind CSS')\n .should('have.css', 'font-family') \n .and('match', /Georgia/) // passes\n});\n```\n\n```js\nyarn add -D @cypress/react\n//or\nnpm install -D @cypress/react\n```\n\n```js\nconst cracoConfig = require('../../craco.config.js')\nconst injectDevServer = require('@cypress/react/plugins/craco')\n\nmodule.exports = (on, config) => {\n injectDevServer(on, config, cracoConfig)\n\n return config\n}\n```\n\n```js\nmodule.exports = {\n style: {\n postcss: {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer'),\n ],\n },\n },\n}\n```\n\n```js\nimport React from 'react';\nimport { mount } from '@cypress/react';\nimport App from './App';\nimport './index.css';\n// import 'tailwindcss/dist/tailwind.min.css' // not required, plugin works\n\nit('should renders the App correctly', () => {\n mount(<App />) \n cy.get('h1').contains('Cypress Component Testing with Tailwind CSS')\n .should('have.css', 'font-family') \n .and('match', /Georgia/) // passes\n});\n```\n\n```text\ncypress/plugins/index.js\n```\n\n```text\ncraco.config.js\n```\n\n```js\nrequire('tailwindcss/dist/tailwindcss.min.css')\n```\n\n```text\n// In the majority of modern style-loaders,\n// these styles will be injected into document.head when they're imported below\nrequire('./index.scss')\nrequire('tailwindcss/dist/tailwindcss.min.css')\n\nconst { mount } = require('@cypress/react')\nconst Button = require('./Button')\n\nit('renders a Button', () => {\n // This button will render with the Tailwind CSS styles\n // as well as the application's index.scss styles\n mount(<Button />)\n})\n```\n\n```text\nmountingOptions.stylesheets\n```\n\n========================================\n\nComments:\n- Thanks! Both methods worked. The only thing, on the first option my custom css does not make any difference but is loading when I set up Craco on cypress plugins","metadata":{"transformedAt":"2026-08-18T18:33:42.922Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":160,"estimatedTokens":972}}464{"id":"stack-70375675","source":"stackoverflow","questionId":70375675,"title":"Tailwind CLI not importing external files","tags":["tailwind-css"],"text":"Title: Tailwind CLI not importing external files\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using Tailwind CSS 3.0 and have configured it according to the Using with Preprocessors documentation.\n\nMy `main.css` file looks like this:\n\n```\n@import \"tailwindcss/base\";\n@import \"./custom-base-styles.css\";\n\n@import \"tailwindcss/components\";\n@import \"./custom-components.css\";\n\n@import \"tailwindcss/utilities\";\n```\n\nMy `postcss.config.js` looks like this:\n\n```\nmodule.exports = {\n plugins: {\n \"postcss-import\": {},\n tailwindcss: {},\n autoprefixer: {}\n }\n}\n```\n\nThe directory structure looks like this:\n\n```\nStyles/v2\n├── custom-base-styles.css\n├── custom-components.css\n└── main.css\nwwwroot/dev\n└── v2\n └── main.css\n```\n\nAnd I execute the following command to build my `main.css` file:\n\n```\nnpx tailwindcss -i ./Styles/v2/main.css -o ./wwwroot/dev/v2/main.css --watch\n```\n\nThe build is executed and my `wwwroot/dev/v2/main.css` file is produced, but none of the additional changes added in my custom styles are included. Also; the `--watch` argument is listening for changes to the `main.css` input file, but non of the `@import`-ed files.\n\n========================================\n\nTop Answer:\nThis should also do the trick!\n\n```\ntailwindcss -i ./Styles/v2/main.css -o style.css --postcss\n```\n\n========================================\n\nCode:\n```css\n@import \"tailwindcss/base\";\n@import \"./custom-base-styles.css\";\n\n@import \"tailwindcss/components\";\n@import \"./custom-components.css\";\n\n@import \"tailwindcss/utilities\";\n```\n\n```json\nmodule.exports = {\n plugins: {\n \"postcss-import\": {},\n tailwindcss: {},\n autoprefixer: {}\n }\n}\n```\n\n```text\nStyles/v2\n├── custom-base-styles.css\n├── custom-components.css\n└── main.css\nwwwroot/dev\n└── v2\n └── main.css\n```\n\n```sh\nnpx tailwindcss -i ./Styles/v2/main.css -o ./wwwroot/dev/v2/main.css --watch\n```\n\n```text\nmain.css\n```\n\n```text\npostcss.config.js\n```\n\n```text\nmain.css\n```\n\n```text\nwwwroot/dev/v2/main.css\n```\n\n```text\n--watch\n```\n\n```text\nmain.css\n```\n\n```text\n@import\n```\n\n```text\nnpx tailwindcss\n```\n\n```text\npostcss ./Styles/v2/main.css -o style.css --watch\n```\n\n```text\ntailwindcss -i ./Styles/v2/main.css -o style.css --postcss\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.922Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":136,"estimatedTokens":551}}465{"id":"stack-60143878","source":"stackoverflow","questionId":60143878,"title":"Nextjs not compiling all tailwindcss classes","tags":["reactjs","next.js","postcss","tailwind-css"],"text":"Title: Nextjs not compiling all tailwindcss classes\nTags: reactjs, next.js, postcss, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to use Tailwindcss in my Nextjs project. The problem is that some of the classes that Tailwind Css has built-in are not working (like grid or active: pseudo class).\n\nI have this page:\n\n**Index.jsx**\n\n```\nimport React from \"react\";\n\nconst Index = () => (\n \n 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n \n);\nexport default Index;\n```\n\nThat renders:\n\nhttps://i.sstatic.net/bJL3l.jpg\n\ninstead of:\n\nhttps://i.sstatic.net/Z7LX5.png\n\nI configured Nextjs to use Tailwindcss (Using just postcss.config.js without Nextcss, since postcss is already in this version of Nextjs v9.2.1)\n\n**postcss.config.js**\n\n```\nmodule.exports = {\n plugins: [\"tailwindcss\", \"autoprefixer\"]\n};\n```\n\nand added the global `styles/main` with:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nto `_app.jsx` like this:\n\n**pages/_app.jsx**\n\n```\n/* eslint-disable react/jsx-props-no-spreading */\nimport React from \"react\";\nimport App from \"next/app\";\nimport { Provider } from \"react-redux\";\nimport withRedux from \"next-redux-wrapper\";\nimport initStore from \"../rx\";\nimport \"../styles/index.css\";\n\n// eslint-disable-next-line react/prop-types\nconst CustomApp = ({ Component, pageProps, store }) => (\n \n \n \n);\n\nCustomApp.getInitialProps = async appContext => {\n const appProps = await App.getInitialProps(appContext);\n\n return { ...appProps };\n};\n\nexport default withRedux(initStore)(CustomApp);\n```\n\n(Ignore redux implementation)\n\nAs you can see, some of the classes are being compiled but some others are not, when I enter the dev console and search for grid, there's not a class with such a name. What am I doing wrong in the configuration?\n\n========================================\n\nCode:\n```text\nimport React from \"react\";\n\nconst Index = () => (\n <div className=\"grid grid-cols-3 gap-4\">\n <div>1</div>\n <div>2</div>\n <div>3</div>\n <div>4</div>\n <div>5</div>\n <div>6</div>\n <div>7</div>\n <div>8</div>\n <div>9</div>\n </div>\n);\nexport default Index;\n```\n\n```text\nmodule.exports = {\n plugins: [\"tailwindcss\", \"autoprefixer\"]\n};\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n/* eslint-disable react/jsx-props-no-spreading */\nimport React from \"react\";\nimport App from \"next/app\";\nimport { Provider } from \"react-redux\";\nimport withRedux from \"next-redux-wrapper\";\nimport initStore from \"../rx\";\nimport \"../styles/index.css\";\n\n// eslint-disable-next-line react/prop-types\nconst CustomApp = ({ Component, pageProps, store }) => (\n <Provider store={store}>\n <Component {...pageProps} />\n </Provider>\n);\n\nCustomApp.getInitialProps = async appContext => {\n const appProps = await App.getInitialProps(appContext);\n\n return { ...appProps };\n};\n\nexport default withRedux(initStore)(CustomApp);\n```\n\n```text\nstyles/main\n```\n\n```text\n_app.jsx\n```\n\n========================================\n\nComments:\n- you need to import tailwindcss in postcss.config.js and import as variable not as a string should work for you.if you can a github repo it will be more useful\n- @Nikas The official documentation of Nextjs says: *Do not use require() to import the PostCSS Plugins. Plugins must be provided as strings.* (at the end of the article). However the problem could be that the default configuration of the autoprefixer is disabled. I'll link a github repo with the project soon.\n- Make sure you are using tailwindcss 1.2. Grid seems to be a fairly recent addition.\n- Do you have a tailwind.config.js? If so, can you add it here?\n- Thanks, pasting in the variants from the doc into my tailwind.config.js fixed that some classes were not working in nextjs for me","metadata":{"transformedAt":"2026-08-18T18:33:42.922Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":164,"estimatedTokens":932}}466{"id":"stack-73691710","source":"stackoverflow","questionId":73691710,"title":"How to select a specific child by className in Tailwind","tags":["tailwind-css"],"text":"Title: How to select a specific child by className in Tailwind\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow to select a specific child by className in Tailwind?\n\nI have tried some selectors but it seems nothing is matching, is it even possible?\n\n```\n\n \n text in red\n text in blue\n \n\n```\n\nnote: I can't style directly child component with CHILD_CLASSNAME\n\n========================================\n\nCode:\n```text\n<div className=\"[CHILD_CLASSNAME]:bg-red [NESTED_CHILD_CLASSNAME]:bg-blue\">\n <div className=\"CHILD_CLASSNAME\">\n text in red\n <div className=\"NESTED_CHILD_CLASSNAME\">text in blue</div>\n </div>\n<div>\n```\n\n```html\n<div class=\"[&_.CHILD-CLASSNAME]:bg-red-500 [&_.NESTED-CHILD-CLASSNAME]:bg-blue-500\">\n <div class=\"CHILD-CLASSNAME\">\n text in red\n <div class=\"NESTED-CHILD-CLASSNAME\">text in blue</div>\n </div>\n<div>\n```\n\n```html\n<div class=\"[&_.CHILD_CLASSNAME]:bg-red-500 [&_.NESTED-CHILD-CLASSNAME]:bg-blue-500\">\n <div class=\"CHILD_CLASSNAME\">\n text in red (not working because of \"_\")\n <div class=\"NESTED-CHILD-CLASSNAME\">text in blue</div>\n </div>\n<div>\n\n<div class=\"[&_.CHILD\\_CLASSNAME]:bg-red-500 [&_.NESTED-CHILD-CLASSNAME]:bg-blue-500\">\n <div class=\"CHILD_CLASSNAME\">\n text in red\n <div class=\"NESTED-CHILD-CLASSNAME\">text in blue</div>\n </div>\n<div>\n```\n\n```text\n&\n```\n\n```text\n&_.CHILD-CLASSNAME\n```\n\n```text\n_\n```\n\n```text\n\\\n```\n\n========================================\n\nComments:\n- Although @IharAliakseyenka gave a thorough answer, I believe it's relevant to the topic to discuss how to declare the styling of certain child elements within a parent element: How to access all the direct children of a div in Tailwind CSS?","metadata":{"transformedAt":"2026-08-18T18:33:42.922Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":77,"estimatedTokens":428}}467{"id":"stack-72889068","source":"stackoverflow","questionId":72889068,"title":"Template literal not working correctly with Tailwind CSS","tags":["css","reactjs","user-interface","tailwind-css","template-literals"],"text":"Title: Template literal not working correctly with Tailwind CSS\nTags: css, reactjs, user-interface, tailwind-css, template-literals\nSource: Stack Overflow\n\nQuestion:\nI am passing in a Hex Colour into a prop and attempting to set the background of an element with it. Here is my code:\n\n```\nlet cardColourRGB: string;\n if (cardColour) {\n cardColourRGB = \"[\" + cardColour + \"]\";\n console.log(cardColourRGB);\n } else {\n cardColourRGB = \"white/50\"\n }\n```\n\nIn the `return` function:\n\n```\n\n```\n\nPassing in some colours work, but others don't. For example, passing in #AAA32E as the prop does not set the colour, but setting the colour directly works:\n\n```\n\n```\n\nWhy could this be?\n\n========================================\n\nTop Answer:\nTailwindCSS doesn't allow you to generate classes dynamically. So when you use the following to generate the class…\n\n```\n`bg-${cardColourRGB}`\n```\n\n…TailwindCSS will not pick that up as a valid TailwindCSS class and therefore will not produce the necessary CSS.\n\nInstead, you must include the full name of the class in your source code. You can return the full value like this\n\n```\nlet cardColourRGB: string;\n if (cardColour) {\n cardColourRGB = \"bg-[\" + cardColour + \"]\";\n console.log(cardColourRGB);\n } else {\n cardColourRGB = \"bg-white/50\"\n }\n```\n\nwhere `cardColourRGB` is your value you are passing .\n\nBy doing it this way, the entire string for every class is in your source code, so TailwindCSS will know to generate the applicable CSS.\n\nRead more: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth\n\n========================================\n\nCode:\n```text\nlet cardColourRGB: string;\n if (cardColour) {\n cardColourRGB = \"[\" + cardColour + \"]\";\n console.log(cardColourRGB);\n } else {\n cardColourRGB = \"white/50\"\n }\n```\n\n```text\n<div className={`bg-${cardColourRGB}`}></div>\n```\n\n```text\n<div className={`bg-[#AAA32E]`}></div>\n```\n\n```text\nreturn\n```\n\n```text\n<div class=\"text-{{ error ? 'red' : 'green' }}-600\"></div>\n```\n\n```text\n<div class=\"{{ error ? 'text-red-600' : 'text-green-600' }}\"></div>\n```\n\n```text\n<div class=\"{{ cardColour ? 'bg-[#AAA32E]' : 'bg-white-50' }}\"></div>\n```\n\n```text\ntailwind.css\n```\n\n```text\nclassNames\n```\n\n```text\n`bg-${cardColourRGB}`\n```\n\n```text\nlet cardColourRGB: string;\n if (cardColour) {\n cardColourRGB = \"bg-[\" + cardColour + \"]\";\n console.log(cardColourRGB);\n } else {\n cardColourRGB = \"bg-white/50\"\n }\n```\n\n```text\ncardColourRGB\n```\n\n```text\n<div className={`w-4 h-1 relative etc...`} style={{backgroundColor: cardColourRGB}}></div>\n```\n\n========================================\n\nComments:\n- Does this answer your question? Programmatically craft Tailwind classes with Vue\n- If the color being passed is an arbitrary value, you can best handle this issue by using a `style` attribute instead of trying to create a dynamic Tailwind class. See: stackoverflow.com/questions/72825061/…","metadata":{"transformedAt":"2026-08-18T18:33:42.922Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":132,"estimatedTokens":725}}468{"id":"stack-64540908","source":"stackoverflow","questionId":64540908,"title":"Tailwind CSS & Alpine JS transition out issue","tags":["css","tailwind-css","alpine.js"],"text":"Title: Tailwind CSS & Alpine JS transition out issue\nTags: css, tailwind-css, alpine.js\nSource: Stack Overflow\n\nQuestion:\nI've got a very simple button & modal combo working inside Tailwind & Alpine - https://jsfiddle.net/0pso5cxh/\n\nMy issue is that on the leave transition (cancel button or close icon), none of the fade animation is happening at all and it just snaps to 0 opacity. This is my first use of both Tailwind and Alpine so any pointers would be massively appreciated!\n\n```\n\n ** Add Donation\n \n \n \n \n \n \n Header\n\n \n \n \n \n \n \n \n \n \n Inliberali Persius Multi iustitia pronuntiaret expeteretur sanos didicisset laus angusti ferrentur arbitrium arbitramur huic desiderent.?\n\n \n \n \n Cancel\n Confirm\n \n \n \n \n \n```\n\n========================================\n\nTop Answer:\nFor me, I just use this code below in the head of file\n\n\r\n\r\n\n```\n\n [x-cloak] { display: none }\n\n```\n\n\r\n\r\n\r\n\nand x-cloak in any elements\n\n\r\n\r\n\n```\nx-cloak\n```\n\n========================================\n\nCode:\n```text\n<div x-data=\"{ addDonationOpen: false }\">\n <button @click=\"addDonationOpen = !addDonationOpen\" class=\"bg-teal-700 hover:bg-teal-500 hover:text-gray-900 focus:bg-teal-500 focus:outline-none focus:shadow-outline text-white focus:text-gray-900 px-4 py-2 rounded font-medium mr-6\"><i class=\"fas fa-plus-square pr-1\"></i> Add Donation</button>\n \n <div x-show=\"addDonationOpen\" :class=\"{'flex': addDonationOpen, 'fixed': addDonationOpen, 'hidden': !addDonationOpen}\" x-transition:enter=\"transition ease-out duration-300\" x-transition:enter-start=\"transform opacity-0\" x-transition:enter-end=\"transform opacity-100\" x-transition:leave=\"transition ease-in duration-1000\" x-transition:leave-start=\"transform opacity-100\" x-transition:leave-end=\"transform opacity-0\" class=\"w-full h-100 inset-0 z-50 overflow-hidden justify-center items-center\" style=\"background: rgba(0,0,0,.7);\">\n <div class=\"border border-teal-500 shadow-lg modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto\">\n <div class=\"modal-content py-4 text-left px-6\">\n <!--Title-->\n <div class=\"flex justify-between items-center pb-3\">\n <p class=\"text-2xl font-bold\">Header</p>\n <div @click=\"addDonationOpen = !addDonationOpen\" class=\"modal-close cursor-pointer z-50\">\n <svg class=\"fill-current text-black\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 18 18\">\n <path\n d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\">\n </path>\n </svg>\n </div>\n </div>\n <!--Body-->\n <div class=\"my-5\">\n <p>Inliberali Persius Multi iustitia pronuntiaret expeteretur sanos didicisset laus angusti ferrentur arbitrium arbitramur huic desiderent.?</p>\n </div>\n <!--Footer-->\n <div class=\"flex justify-end pt-2\">\n <button @click=\"addDonationOpen = !addDonationOpen\" class=\"focus:outline-none modal-close px-4 bg-gray-400 p-3 rounded-lg text-black hover:bg-gray-300\">Cancel</button>\n <button class=\"focus:outline-none px-4 bg-teal-500 p-3 ml-3 rounded-lg text-white hover:bg-teal-400\">Confirm</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n```\n\n```text\nhidden\n```\n\n```text\nx-class\n```\n\n```text\nx-class\n```\n\n```text\nx-show\n```\n\n```text\nfixed\n```\n\n```text\nclass=\n```\n\n```html\n<style>\n [x-cloak] { display: none }\n</style>\n```\n\n```html\nx-cloak\n```\n\n========================================\n\nComments:\n- This isn't an accurate answer I'm afraid. `x-cloak` is used to hide the components as alpine is initialising, this is an issue between animation states","metadata":{"transformedAt":"2026-08-18T18:33:42.922Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":145,"estimatedTokens":975}}469{"id":"stack-65185411","source":"stackoverflow","questionId":65185411,"title":"Tailwindcss. Blue rectangle when click on mobile device","tags":["touch","tailwind-css"],"text":"Title: Tailwindcss. Blue rectangle when click on mobile device\nTags: touch, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHelp pls. When I press the Button on mobile devices, a blue rectangle appears on it. How can I remove this?\n\n```\nLink button\n```\n\nhttps://i.sstatic.net/glPEO.jpg\n\nhttps://i.sstatic.net/nKvgs.jpg\n\n========================================\n\nCode:\n```text\n<a href=\"#1\" class=\"block px-4 py-2 rounded-full bg-transparent border border-dashed hover:bg-gray-200 hover:text-gray-500 hover:border-transparent hover:shadow-md active:bg-gray-300\">Link button</a>\n```\n\n```text\n* { -webkit-tap-highlight-color: rgba(0,0,0,0); }\n```\n\n========================================\n\nComments:\n- This isn't supported in Firefox or Safari: caniuse.com/?search=-webkit-tap-highlight-color\n- Please see more complete answer here: stackoverflow.com/a/58165235/4378314","metadata":{"transformedAt":"2026-08-18T18:33:42.922Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":31,"estimatedTokens":216}}470{"id":"stack-66279676","source":"stackoverflow","questionId":66279676,"title":"Make animated tabs in Tailwind CSS?","tags":["html","css","reactjs","css-transitions","tailwind-css"],"text":"Title: Make animated tabs in Tailwind CSS?\nTags: html, css, reactjs, css-transitions, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to make an animated tab like:\n\nI am using React with Tailwind. This is my code:\n\n```\nimport React from 'react'\nimport clsx from 'clsx'\n\nexport const Modal = () => {\n const [theme, setTheme] = React.useState('light')\n return (\n \n \n {\n setTheme('light')\n }}\n >\n Light\n \n \n \n {\n setTheme('dark')\n }}\n >\n Dark\n \n \n \n {\n setTheme('system')\n }}\n >\n System\n \n \n \n )\n}\n```\n\nBut it looks like:\n\nAs I use `translate-x-10` when the theme is not `light`, therefore the text moves as well.\n\nI would love to make the UI exactly as the above one while still using buttons for the actual tabs.\n\nMinimal Codesandbox → https://codesandbox.io/s/mobx-theme-change-n1nvg?file=/src/App.tsx\n\nHow do I do it?\n\n========================================\n\nTop Answer:\nYou can do this animation very easily, you need to add another tag element inside the parent element that holds three buttons.\n\nSo, this element will track which button is active, and it will be moving based on their width.\n\nFor example, if the first button is active, this element will not be translated at all, because it is the first element, so the position will be 0.\n\nThis element that will do the animation stuff will have absolute positioning, like this:\n\n```\n.tab-item-animate {\n position: absolute;\n top: 6px;\n left: 6px;\n width: calc(100% - 12px);\n height: 32px;\n transform-origin: 0 0;\n transition: transform 0.25s;\n}\n```\n\n*First button active:*\n\n```\n.tabs .tabs-item:first-child.active ~ .tab-item-animate {\n transform: translateX(0) scaleX(0.333);\n}\n```\n\n*Second button active:*\n\n```\n.tabs .tabs-item:nth-child(2).active ~ .tab-item-animate {\n transform: translateX(33.333%) scaleX(0.333);\n}\n```\n\n*Third button active:*\n\n```\n.tabs .tabs-item:nth-child(3).active ~ .tab-item-animate {\n transform: translateX(33.333% * 2) scaleX(0.333);\n}\n```\n\nI don't have so much experience with Tailwind, but I'm not sure if you can manage the whole thing with it (maybe you can do some other manipulations with my code to do it only with Tailwind).\n\nI added a separate CSS file for this, I've provided a demo, based on the code that you've shared:\n\ntabs animated link\n\nPS: I've changed a bit your HTML structure, you don't need to add another div just above each button, it is not necessary.\n\n========================================\n\nCode:\n```text\nimport React from 'react'\nimport clsx from 'clsx'\n\nexport const Modal = () => {\n const [theme, setTheme] = React.useState<'light' | 'dark' | 'system'>('light')\n return (\n <div className=\"flex mx-2 mt-2 rounded-md bg-blue-gray-100\">\n <div\n className={clsx('flex-1 py-1 my-2 ml-2 text-center rounded-md', {\n 'bg-white': theme === 'light',\n 'transition duration-1000 ease-out transform translate-x-10':\n theme !== 'light',\n })}\n >\n <button\n className={clsx(\n 'w-full text-sm cursor-pointer select-none focus:outline-none',\n {\n 'font-bold text-blue-gray-900': theme === 'light',\n 'text-blue-gray-600': theme !== 'light',\n }\n )}\n onClick={() => {\n setTheme('light')\n }}\n >\n Light\n </button>\n </div>\n <div\n className={clsx('flex-1 py-1 my-2 ml-2 text-center rounded-md', {\n 'bg-white': theme === 'dark',\n })}\n >\n <button\n className={clsx(\n 'w-full text-sm cursor-pointer select-none focus:outline-none',\n {\n 'font-bold text-blue-gray-900': theme === 'dark',\n 'text-blue-gray-600': theme !== 'dark',\n }\n )}\n onClick={() => {\n setTheme('dark')\n }}\n >\n Dark\n </button>\n </div>\n <div\n className={clsx('flex-1 py-1 my-2 mr-2 text-center rounded-md', {\n 'bg-white': theme === 'system',\n })}\n >\n <button\n className={clsx(\n 'w-full text-sm cursor-pointer select-none focus:outline-none',\n {\n 'font-bold text-blue-gray-900': theme === 'system',\n 'text-blue-gray-600': theme !== 'system',\n }\n )}\n onClick={() => {\n setTheme('system')\n }}\n >\n System\n </button>\n </div>\n </div>\n )\n}\n```\n\n```text\ntranslate-x-10\n```\n\n```text\nlight\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n translate: {\n 200: '200%',\n },\n },\n },\n}\n```\n\n```text\nimport * as React from \"react\"\nimport { observer } from \"mobx-react\"\nimport clsx from \"clsx\"\n\nimport { useStore } from \"./context\"\n\nconst AppTheme = observer(() => {\n const {\n theme: { app },\n updateTheme,\n } = useStore()\n\n return (\n <>\n <div className=\"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left\">\n <div className=\"mt-2\">\n <h4 className=\"text-xl font-bold text-gray-800\">Background</h4>\n </div>\n </div>\n\n <div className=\"relative mx-2 mt-2 rounded-md bg-gray-100\">\n <div\n id=\"slider\"\n className={clsx(\n \"absolute inset-y-0 w-1/3 h-full px-4 py-1 transition-transform transform\",\n {\n \"translate-x-0\": app === \"light\",\n \"translate-x-full\": app === \"dark\",\n \"translate-x-200\": app === \"system\",\n },\n )}\n style={\n app === \"system\"\n ? {\n transform: \"translateX(200%)\", // if you added `translate-x-200` to `tailwind.config.js` then you can remove the `style` tag completely\n }\n : {}\n }\n >\n <div\n className={clsx(\n \"w-full h-full bg-white rounded-md\",\n {\n active: app === \"light\",\n \"bg-gray-600\": app === \"dark\",\n },\n {\n // needs to be separate object otherwise dark/light & system keys overlap resulting in a visual bug\n [\"bg-gray-600\"]: app === \"system\",\n },\n )}\n ></div>\n </div>\n <div className=\"relative flex w-full h-full\">\n <button\n tabIndex={0}\n className={clsx(\n \"py-1 my-2 ml-2 w-1/3 text-sm cursor-pointer select-none focus:outline-none\",\n {\n active: app === \"light\",\n \"font-bold text--gray-900\": app === \"light\",\n \"text--gray-600\": app !== \"light\",\n },\n )}\n onKeyUp={(event: React.KeyboardEvent<HTMLElement>) => {\n if (event.key === \"Tab\")\n updateTheme({\n app: \"light\",\n })\n }}\n onClick={() => {\n updateTheme({\n app: \"light\",\n })\n }}\n >\n Light\n </button>\n <button\n tabIndex={0}\n className={clsx(\n \"py-1 my-2 ml-2 w-1/3 text-sm cursor-pointer select-none focus:outline-none\",\n {\n active: app === \"dark\",\n \"font-bold text-white\": app === \"dark\",\n \"text--gray-600\": app !== \"dark\",\n },\n )}\n onKeyUp={(event: React.KeyboardEvent<HTMLElement>) => {\n if (event.key === \"Tab\")\n updateTheme({\n app: \"dark\",\n })\n }}\n onClick={() => {\n updateTheme({\n app: \"dark\",\n })\n }}\n >\n Dark\n </button>\n <button\n tabIndex={0}\n className={clsx(\n \"py-1 my-2 ml-2 w-1/3 text-sm cursor-pointer select-none focus:outline-none\",\n {\n active: app === \"system\",\n \"font-bold text-white\": app === \"system\",\n \"text--gray-600\": app !== \"system\",\n },\n )}\n onKeyUp={(event: React.KeyboardEvent<HTMLElement>) => {\n if (event.key === \"Tab\")\n updateTheme({\n app: \"system\",\n })\n }}\n onClick={() => {\n updateTheme({\n app: \"system\",\n })\n }}\n >\n System\n </button>\n </div>\n </div>\n </>\n )\n})\n\nexport default observer(function App() {\n return <AppTheme />\n})\n```\n\n```text\n.tab-item-animate {\n position: absolute;\n top: 6px;\n left: 6px;\n width: calc(100% - 12px);\n height: 32px;\n transform-origin: 0 0;\n transition: transform 0.25s;\n}\n```\n\n```text\n.tabs .tabs-item:first-child.active ~ .tab-item-animate {\n transform: translateX(0) scaleX(0.333);\n}\n```\n\n```text\n.tabs .tabs-item:nth-child(2).active ~ .tab-item-animate {\n transform: translateX(33.333%) scaleX(0.333);\n}\n```\n\n```text\n.tabs .tabs-item:nth-child(3).active ~ .tab-item-animate {\n transform: translateX(33.333% * 2) scaleX(0.333);\n}\n```\n\n========================================\n\nComments:\n- How about moving the animation to a `` and apply the `translate-x-10` to that?\n- @markmead where should the `span` be? i tried it just above `button` without surrounding it but i dont see anything.\n- @markmead here's the codesandbox → codesandbox.io/s/mobx-theme-change-n1nvg\n- Damn, thank you so much Teuta. I also thought it can't be done with Tailwind but then again I've never tried animating anything so wasn't sure :)\n- Hey Teuta, how did you decide `top` & `left` to be `6px` & `height` to be `32px` & `width` to be `calc(100% - 12px)`? Did you check `computed` property in DevTools or calculated by adding `font-size + margin + padding`? Also, I didn't understand the need for `scaleX`? Would love it if you can explain it in the post :)\n- @deadcoder0904, I added some explanations in this link: jsfiddle.net/teutak/j048m6fr\n- Thank you once again. I asked because the calculation is a little off when I add a focus-ring to it but I'll manage from here. Thanks again, appreciate your help :)\n- Oye Tueta, just wanted to let you know it's completely possible with Tailwind & I posted the solution below.\n- @deadcoder0904, wow, that's great! I am very happy to see that you found the solution to do it with Tailwind! :)","metadata":{"transformedAt":"2026-08-18T18:33:42.922Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":389,"estimatedTokens":2980}}471{"id":"stack-65141488","source":"stackoverflow","questionId":65141488,"title":"TailwindCSS autocompletion in PhpStorm not working","tags":["autocomplete","phpstorm","tailwind-css"],"text":"Title: TailwindCSS autocompletion in PhpStorm not working\nTags: autocomplete, phpstorm, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI just updated PhpStorm to version 2020.3 which now supports autocompletion for Tailwind CSS. But in my new updated version it isn't working and can't figure out why.\n\nIn html, blade and css files, there is no autocompletion for Tailwind CSS.\n\nDo I have this enable somewhere? Why isn't it working?\n\n========================================\n\nTop Answer:\nI solved by downloading the tailwindcss library.\n\nhttps://i.sstatic.net/1Vk9F.png\n\nhttps://i.sstatic.net/9fY1t.png\n\n========================================\n\nCode:\n```text\nnpm:@tailwindcss/postcss7-compat@^2.0.1\n```\n\n```text\nyarn install\n```\n\n```text\n\"scss\": \"scss\",\n \"html\": \"html\",\n \"javascript\": \"javascript\",\n \"typescript\": \"typescript\",\n \"css\": \"css\",\n \"vue\": \"vue\",\n \"sass\": \"sass\",\n \"twig\": \"twig\"\n```\n\n```text\n\"includeLanguages\"\n```\n\n========================================\n\nComments:\n- Check original ticket for possible requirements etc: youtrack.jetbrains.com/issue/WEB-42792 . The way how TailwindCSS package is installed / used Tailwind version may affect this. Check the ticket comments and look at related tickets. Other tickets (so you may browse through them): youtrack.jetbrains.com/issues/WEB?q=tailwind . blog.jetbrains.com/webstorm/2020/11/webstorm-2020-3-eap-7/…\n- Lol, still working on 2022.3.1... Thanks mate! Just run `npm i npm:@tailwindcss/postcss7-compat@^2.0.1` I'm using tailwind 3\n- Any tips on how to do this? I am so new to tailwinds and only really do PHP\n- I had an issue with 2021.3.1 but after upgrade to PhpStorm 2021.3.2 works fine.\n- It's a joke how it works then doesn't work then works without any changes again. Maybe it is on a tea break or popped out for a cigarette?\n- Confirmed working in Webstorm 2024.1 - thanks\n- I needed to add \"twig\": \"twig\"\n- @Chopchop I added it in, thanks.","metadata":{"transformedAt":"2026-08-18T18:33:42.922Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":57,"estimatedTokens":491}}472{"id":"stack-76233402","source":"stackoverflow","questionId":76233402,"title":"How to use SCSS with Tailwind CSS?","tags":["css","reactjs","sass","tailwind-css","tailwind-css-3"],"text":"Title: How to use SCSS with Tailwind CSS?\nTags: css, reactjs, sass, tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI am learning Tailwind CSS. I want to use SCSS with Tailwind CSS.\n\nHow to achieve it?\n\n========================================\n\nTop Answer:\n### TailwindCSS v4\n\nStarting from TailwindCSS v4, support for preprocessors has been discontinued, meaning that SASS can no longer be used with it from v4 onwards.\n\n- Compatibility\n\n- Deprecated: Sass, Less and Stylus preprocessors support\n`tailwindlabs/tailwindcss` #15716 by RobinMalfait:\nMigration tool doesn't recognize .scss files\n\n### TailwindCSS v4 and Sass (works, but *independently* of each other)\n\nYou **can use TailwindCSS and Sass side by side separately**. Create a **tailwind.css** file (important: **not an .scss** file) with content related only to TailwindCSS, for example:\n\n```\n@import \"tailwindcss\";\n```\n\nThen reference this new file in your **styles.scss** like this in **./scss/main.scss**:\n\n```\n@use \"custom.scss\";\n\n$primary: #42b883;\n\nbody {\n background: $primary;\n}\n```\n\nYou need to include `styles.scss` and `tailwind.css` as separate files in the project. They must not interact with each other or be nested into one another.\n\n**main.ts**\n\n```\nimport \"./main.scss\";\nimport \"./tailwind.css\";\n```\n\n- `tailwindlabs/tailwindcss` discussion #18364: Support Angular SCSS with TailwindCSS v4\n\n- How to use @apply in Tailwind v4?\n\n**Note**: *So officially it's not supported and cannot be used together directly, but they can be used side by side. Keep in mind that compatibility issues between TailwindCSS and these preprocessors will not be a priority in the future.*\n\nRelated:\n\n- Angular not detecting changes in `.scss` files\n\n- `@import \"tailwindcss\";` does not work when used in a file with an `.scss` extension\n\n### Extra: open source template\n\nI put together an open-source template. It's difficult to implement directly in a Stack Overflow answer, but it can serve as a useful learning example for using TailwindCSS and Sass in the same project, including both global CSS, CSS modules, and style blocks.\n\n- **Template**: Vite (with TypeScript) + Sass + TailwindCSS v4\n\n========================================\n\nCode:\n```text\nnpm install sass --save-dev\n```\n\n```text\nimport '../scss/yourStyle.scss';\n```\n\n```js\nmodule.exports = {\n //...\n mode: 'jit',\n module: {\n rules: [\n {\n test: /\\.scss$/,\n use: [\n 'style-loader',\n 'css-loader',\n 'sass-loader',\n ],\n },\n ],\n },\n //...\n };\n```\n\n```text\nnpm install node-sass\n```\n\n```text\n@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';\n```\n\n```text\ntailwind.config.js\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```css\n@use \"custom.scss\";\n\n$primary: #42b883;\n\nbody {\n background: $primary;\n}\n```\n\n```js\nimport \"./main.scss\";\nimport \"./tailwind.css\";\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\nstyles.scss\n```\n\n```text\ntailwind.css\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\n.scss\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\n.scss\n```\n\n========================================\n\nComments:\n- Probably easier if you everything you tried so far. including tailwind config file or any other relevant steps. You question is very vague and the docs already cover that tailwindcss.com/docs/using-with-preprocessors\n- Thank you! Are there any Tailwind pre-built components that comes with button actions like bootstrap\n- Sorry for the late reply, there is a library is called TailwindUI but it's not free. If you are looking for pre-built UI components, TailwindCss is not for you. You might want to check other libraries (Chakra UI, MUI, Antd...)\n- Try shadcn, you won't regret\n- Using sass is preferred way to go, because node-sass is outdated and has some security flaws.\n- We have a big project where we would like to slowly migrate from SCSS to tailwind. Any idea how it still can work together?\n- @IgorGonak You can temporarily use TailwindCSS v3, as it's not deprecated yet, and v4 was only released a month ago. It's worth reviewing the steps for migrating from v3 to v4 to avoid relying too much on the v3 JS-based configuration. I've also stuck with v3 for my larger projects since it's already a truly stable setup. For v4, I would wait until its currently known shortcomings are addressed or supplemented with various community packages.\n- Exactly six months after the release of v4, I started switching to v4 everywhere. Almost everyone (packages, plugins, UI systems) has followed the changes, and with v4.1, we’ve received many improvements in the meantime. I think it’s become much easier to customize TailwindCSS without relying on plugins.\n- I've created 2 separate files followed your instructions but it doesn't work. Is it outdated or some sort?\n- @V.Thái You're right - in special cases it doesn't always work when they are nested (before change). I don't even understand why I phrased it that way back then. Since the whole point is side-by-side usage, they need to be separated from each other and must not interact.","metadata":{"transformedAt":"2026-08-18T18:33:42.922Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":172,"estimatedTokens":1276}}473{"id":"stack-67944186","source":"stackoverflow","questionId":67944186,"title":"How to prevent Tailwind from changing a text input field's border when it's focused on?","tags":["reactjs","next.js","tailwind-css","tailwind-in-js"],"text":"Title: How to prevent Tailwind from changing a text input field's border when it's focused on?\nTags: reactjs, next.js, tailwind-css, tailwind-in-js\nSource: Stack Overflow\n\nQuestion:\nI recently upgraded the Tailwind version in my Next.js application and, as a result, a few things became wonky. I noticed that for input fields with the `type=\"text\"` attribute, their border now changes to a different color -- which I never assigned -- when they're focused on. Prior to upgrading Tailwind, the border color remained the same when text input fields were hovered and focused on. Interestingly, this doesn't happen to any of my other form fields that don't include the `type=\"text\"` attribute. I'd very much appreciate it if someone could explain why this might be happening & how I could fix this.\n\nHere's an image of a text input field when it's hovered on:\nText Input Field While Hovered On (Intended)\n\nHere's an image of that text input field when it's focused on:\nText Input Field While Focused On (Unintended)\n\n========================================\n\nTop Answer:\nThe form plugin is placing a border and ring property around the input from what I can tell.\n\nYou can remove the blue default ring by setting `focus:ring-0` and overriding the border color with `focus:border-none` or you can replace them with your color of choice.\n\n========================================\n\nCode:\n```text\ntype=\"text\"\n```\n\n```text\ntype=\"text\"\n```\n\n```text\nfocus:ring-0\n```\n\n```text\nfocus:border-none\n```\n\n```text\nfocus:outline-amber-200\n```\n\n```text\nclassName=\"outline-none\"\n```\n\n========================================\n\nComments:\n- What version did you upgrade from? It's generally good practice to have a visual representation when a field is focused, and most modern browsers even have default styles for this. To prevent the default styling (whether it's browser or Tailwind based), take a look at what CSS properties the input has when it's in focus and set it to something you prefer.\n- @j1mbl3s I upgraded to version 2.1.4 from 1.9. I ended up looking at the Styles tab in Chrome & discovered that there were some classes associated with items with the type=\"input\" attribute in the tailwind.css file that were causing the unintended color change and the file's located in the node_modules folder. How can I disable these classes without changing the file itself? Is it something I can do in my tailwind.config.js file?\n- I don't think this is possible in tailwind.config.js without removing some Tailwind layer, however you could try adding something like this in your CSS: `*:focus { thePropertyApplyingTheBorder: 'theValueYouWant'; }` or something similar.\n- @j1mbl3s Hmm, that's unfortunate to hear. Just to clarify, what's that asterisk before the colon for in `*:focus { thePropertyApplyingTheBorder: 'theValueYouWant'; }`? I noticed that in the tailwind.css file, it was the asterisk `* {}` class that applied the styling that I'm trying to void. In tailwind.css, I believe the * signifies box shadow.\n- The `*` selector is the wildcard selector. Essentially, `*:focus` selects anything with the `:focus` pseudo-class\n- @j1mbl3s Ah, gotcha -- thanks! I ended up resolving this issue by removing the tailwindcss/forms plugin I included in my tailwind.config.js.\n- Allthough, problem is not entirely solved. Zooming in on the component, I can see that the Tailwind forms plugin adds a second blue border when focused , in addition your own colored focus border. I can't figure out what is causing it though :\\. For now I disable the forms plugin like you do, but I'd actually like to use the forms plugin in the long run, so would be nice if someone know whats going on.\n- Set focus:ring-0 and focus:border-none to get rid of the colors. Or add your own colors if you want :)\n- Yes this was it! I searched for so long for this\n- Thank you, this was solution for me.","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":60,"estimatedTokens":966}}474{"id":"stack-77419177","source":"stackoverflow","questionId":77419177,"title":"Tailwind CSS height screen in mobile browser","tags":["html","css","tailwind-css","viewport-units"],"text":"Title: Tailwind CSS height screen in mobile browser\nTags: html, css, tailwind-css, viewport-units\nSource: Stack Overflow\n\nQuestion:\nI have an app that is full-screen\n\n```\n\n \n Header\n \n \n Main\n \n \n Footer\n \n\n```\n\nThis works normally.\n\nhttps://i.sstatic.net/Hw8y9tOy.png\n\n**In the phone browser, the bottom menu goes out of the page.**\nHowever it works in full-screen mode.\n\nhttps://i.sstatic.net/p3Rpy1fg.png\n\nI could not solve it. Can anyone guide me?\n\n========================================\n\nTop Answer:\nAs @Rico mentioned, instead of using `h-screen` (*height: 100vh*), you can use `h-[100dvh]` (*height: 100dvh*). Tailwind CSS injected this into the default template in PR #11317, so you can now refer to the `h-dvh` (*similarly height: 100dvh*) class.\n\n- tailwindcss PR #11317 - GitHub\n\n- Dynamic Viewport Height: `h-dvh` - Tailwind CSS Docs\n\n- Large Viewport Height: `h-lvh` - Tailwind CSS Docs\n\n- Small Viewport Height: `h-svh` - Tailwind CSS Docs\n\n========================================\n\nCode:\n```html\n<div class=\"h-screen flex flex-col\">\n <div>\n Header\n </div>\n <div class=\"flex-1 overflow-y-auto\">\n Main\n </div>\n <div>\n Footer\n </div>\n</div>\n```\n\n```text\nh-screen\n```\n\n```text\nh-dvh\n```\n\n```text\nh-[100dvh]\n```\n\n```text\nsvh\n```\n\n```text\nlvh\n```\n\n```text\ndvh\n```\n\n```text\nheight\n```\n\n```text\nmin-height\n```\n\n```text\nmax-height\n```\n\n```text\nvh\n```\n\n```text\ndvh\n```\n\n```text\nvh\n```\n\n```text\nh-screen\n```\n\n```text\nh-[100dvh]\n```\n\n```text\ndvh\n```\n\n```text\nh-screen\n```\n\n```text\nh-[100dvh]\n```\n\n```text\nh-dvh\n```\n\n```text\nh-dvh\n```\n\n```text\nh-lvh\n```\n\n```text\nh-svh\n```\n\n========================================\n\nComments:\n- Since 2023, dynamic values (`h-dvh`, `h-lvh`, `h-svh`) have become part of the default template. See: Reference and PR #11317.\n- Since 2023, dynamic values (`h-dvh`, `h-lvh`, `h-svh`) have become part of the default template. See: Reference and PR #11317.\n- I had no idea they added those, thanks for sharing!","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":22,"totalLines":152,"estimatedTokens":495}}475{"id":"stack-70791026","source":"stackoverflow","questionId":70791026,"title":"All colors gone after adding custom color in tailwind","tags":["css","tailwind-css"],"text":"Title: All colors gone after adding custom color in tailwind\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI just added a custom color to tailwind like this:\n\n```\ncolors: {\n 'slate': '#475569'\n },\n```\n\nThen I ran `npm run watch` and the color worked as expected, but all other colors are gone, they are wiped from the project and I can t use them because they don t show up in auto completion, nor do they work when typing them out myself.\n\nEdit: When I delete the custom color and rerun `npm run watch` the old colors work again, but I need to add a custom one :/\n\n========================================\n\nCode:\n```text\ncolors: {\n 'slate': '#475569'\n },\n```\n\n```text\nnpm run watch\n```\n\n```text\nnpm run watch\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n brown: {\n 50: '#fdf8f6',\n },\n }\n },\n },\n}\n```\n\n========================================\n\nComments:\n- Did you try to run `npm run dev`? this will compile things and probably will solve your issue.\n- in my case, the issue still occured\n- @Forbidden How did you solve this? Same for me\n- The issue was cause because I was using the same name that tailwind is already defined, example: red, red is already build-in color of tailwind, so when I extend red with: red is only equals to '#00ff' and not object type, those reds colors that are already defined will be replaced and red-800 or other will not be accessable","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":55,"estimatedTokens":363}}476{"id":"stack-70423476","source":"stackoverflow","questionId":70423476,"title":"How to set width over 100% using Tailwind CSS","tags":["css","width","tailwind-css"],"text":"Title: How to set width over 100% using Tailwind CSS\nTags: css, width, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI need to set div width to `110%`, but it doesn't seem possible with Tailwind CSS.\n\nTheir documentation only specifies a `100%` value.\n\nClass\nProperties\n\nw-full\nwidth: 100%;\n\n========================================\n\nCode:\n```text\n110%\n```\n\n```text\n100%\n```\n\n```text\nw-[110%]\n```\n\n========================================\n\nComments:\n- Define your own spacing value in `tailwind.config.js`.\n- I know I can do that, but I was wondering if it exists another way without messing with the config file\n- Well you can also use JIT as `width-[110%]`.\n- I didn't see that in the docs, was right below, lol. thank you\n- @Jax-p feel free to write an answer i will gladly accept it\n- I think you mean `w-[110%]`?","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":39,"estimatedTokens":205}}477{"id":"stack-73979553","source":"stackoverflow","questionId":73979553,"title":"Tailwind a max of two flex items per row","tags":["html","reactjs","flexbox","tailwind-css","responsive"],"text":"Title: Tailwind a max of two flex items per row\nTags: html, reactjs, flexbox, tailwind-css, responsive\nSource: Stack Overflow\n\nQuestion:\nI've the following items:\n\n```\nconst items = ['2342', 'Jensen Huang', 'jensen@gmail.com', '$ 200', 'delivered','29 Aug 2022', 'View All of the items']\n```\n\nAnd it is rendered as such (it's like flex-auto):\n\n```\n\n {items.map((item) => {item}\n\n)}\n\n```\n\nIt gives the following\n\n```\n+-----------------------------------------+\n|2342 Jensen Huang jensen@gmail.com|\n|$ 200 delivered 29 Aug 2022|\n|View All of the items |\n+-----------------------------------------+\n```\n\nbut I want a maximum of two elements per row; like this:\n\n```\n+--------------------------------+\n|2342 Jensen Huang|\n|jensen@gmail.com $ 200| \n|delivered 29 Aug 2022|\n|View All of the items |\n+--------------------------------+\n```\n\n========================================\n\nTop Answer:\nI think something like this might be what you want?\n\n```\n\n 2342\n\n jensen@gmail.com\n\n delivered\n\n View All of the items\n\n Jensen Huang\n\n ₹ 200\n\n 29 Aug 2022\n\n```\n\n========================================\n\nCode:\n```text\nconst items = ['2342', 'Jensen Huang', 'jensen@gmail.com', '$ 200', 'delivered','29 Aug 2022', 'View All of the items']\n```\n\n```text\n<div class=\"border flex flex-wrap gap-4 justify-between\">\n {items.map((item) => <p>{item}</p>)}\n</div>\n```\n\n```text\n+-----------------------------------------+\n|2342 Jensen Huang jensen@gmail.com|\n|$ 200 delivered 29 Aug 2022|\n|View All of the items |\n+-----------------------------------------+\n```\n\n```text\n+--------------------------------+\n|2342 Jensen Huang|\n|jensen@gmail.com $ 200| \n|delivered 29 Aug 2022|\n|View All of the items |\n+--------------------------------+\n```\n\n```text\n<div class=\"border grid grid-cols-2 gap-4 justify-between\">\n {items.map((item) => <p>{item}</p>)}\n</div>\n```\n\n```text\ngrid\n```\n\n```text\ngrid-cols-2\n```\n\n```text\n<div class=\"border flex flex-wrap gap-4 justify-between\">\n<div>\n <p>2342</p>\n <p>jensen@gmail.com</p>\n <p>delivered</p>\n <p>View All of the items</p>\n</div>\n<div>\n <p>Jensen Huang</p>\n <p>₹ 200</p>\n <p>29 Aug 2022</p>\n</div>\n```\n\n========================================\n\nComments:\n- Thanks a lot for the comment; I've edited the question to be more specific for my use case; my bad. If possible can you please help me with the updated question.","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":128,"estimatedTokens":611}}478{"id":"stack-66941076","source":"stackoverflow","questionId":66941076,"title":"How to make extra small devices design with tailwindcss?","tags":["tailwind-css"],"text":"Title: How to make extra small devices design with tailwindcss?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nReading https://tailwindcss.com/docs/responsive-design#overview docs\nI do not see any classes for extra small devices(like iPhone 5)\n\nSo if I need to made different design for iPhone 5 and nexus 7 is there is a way to make it with\ntailwindcss ?\n\nThanks!\n\n========================================\n\nTop Answer:\nYes there is way make things responsive for xs devices. How I achieve this is with a mobile first appraoch. SO instead of styling everything for md or lg devices, I would set for eg. p-20 md:p-10, this way I get the exact design I want on xs devices and tweak as necessary on bigger devices.\n\nHope this was helpful.\n\n========================================\n\nCode:\n```text\n// tailwind.config.js\nmodule.exports = {\n theme: {\n screens: {\n 'xxs': '540px', // min-width\n },\n }\n}\n```\n\n```text\nuppercase\n```\n\n```text\nmd:uppercase\n```\n\n```text\ntext-xs sm:text-base md:text-lg\n```\n\n```text\nfont-size: 0.875rem;\n```\n\n```text\nfont-size: 1rem;\n```\n\n```text\nfont-size: 1.125rem;\n```\n\n```text\ntext-xs xxs:text-sm\n```\n\n========================================\n\nComments:\n- Super useful, for more info check out the docs tailwindcss.com/docs/breakpoints\n- seems missing extend: {.. tailwindcss.com/docs/screens#adding-new-breakpoints","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":67,"estimatedTokens":340}}479{"id":"stack-71896236","source":"stackoverflow","questionId":71896236,"title":"How to put my text in a single line in tailwind css?","tags":["html","tailwind-css","svelte"],"text":"Title: How to put my text in a single line in tailwind css?\nTags: html, tailwind-css, svelte\nSource: Stack Overflow\n\nQuestion:\nI want the result to be like this\n\nhttps://i.sstatic.net/Eu7b9.png\n\nbut this is what i get\n\nhttps://i.sstatic.net/TLsyo.png\n\nwith my svelte code:\n\n```\n\n \n\n \n \n \n By {unsplash?.author.username}\n \n\n \n Find similar pictures on Unsplash\n \n\n \n\n```\n\ni used inline-block, but doesn't work\n\n========================================\n\nTop Answer:\nYou probably want Whitespace exactly `whitespace-nowrap` which is `white-space: nowrap;`\nAlthough you may look at Word break and Text overflow\n\n========================================\n\nCode:\n```js\n<div\n style=\"background-image: url('{unsplash?.url}');\"\n class=\"bg-black flex items-center justify-center min-h-screen bg-cover\"\n>\n <Authenticate />\n\n<!-- here is my div -->\n\n <div class=\"block flex absolute bottom-9 left-5 h-16 w-16\">\n <img src={unsplash?.author.avatar} alt={unsplash?.author.username} class=\"rounded-full\" />\n <p class=\"inline-block text-blank ml-2\">\n By <a class=\"inline-block\" target=\"__blank\" href={unsplash?.author.url}\n >{unsplash?.author.username}</a\n >\n </p>\n <p class=\"inline-block text-black\">\n Find similar pictures on <a class=\"inline-block\" target=\"__blank\" href=\"http://unsplash.com\"\n >Unsplash</a\n >\n </p>\n </div>\n</div>\n```\n\n```text\nwhitespace-nowrap\n```\n\n```text\nwhite-space: nowrap;\n```\n\n========================================\n\nComments:\n- `inline-block` has nothing to do with internal wrapping, though it enforces a box around the content. For an explanation what `inline-block` is about see this question. To prevent wrapping you need to set `white-space: nowrap` or similar; don't know what the respective Tailwind class for that is...\n- yeah, it worked, thanks. but i have a problem imgur.com/loJuRxo I want \"Find similar pictures on Unsplash\" this one below\n- Then don't use `inline-block` on the `p` elements, that puts the elements in text flow mode, `p` should stack on top of each other by default (they are block elements).\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":3,"totalLines":84,"estimatedTokens":583}}480{"id":"stack-74614394","source":"stackoverflow","questionId":74614394,"title":"How to write Viewport width/height in Tailwind CSS","tags":["css","tailwind-css"],"text":"Title: How to write Viewport width/height in Tailwind CSS\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWhen I check the official Tailwind CSS documentation, it says that\n\nUse w-screen to make an element span the entire width of the viewport.\n\nI mean, w-screen is ok when I try to implement\n\n```\nwidth: 100vw;\n```\n\nBut what should I do when I try to implement\n\n```\nwidth: 90vw;\nheight: 90vh;\n```\n\n========================================\n\nTop Answer:\nI find useful to create a plugin for this case\n\nChange Tailwind config into this (add plugin and default values)\n\n```\nconst plugin = require('tailwindcss/plugin')\n\n// create default values\nconst screenKeys = Array.from({length: 20}, (_, i) => i*5)\nconst screenSizes = screenKeys.reduce((v, key) => Object.assign(v, {[key]: key}), {});\n\nmodule.exports = {\n\n // ...\n\n plugins: [\n plugin(function ({matchUtilities, theme}) {\n matchUtilities(\n {\n 'w-screen': width => ({\n width: `${width}vw`\n })\n },\n { values: Object.assign(screenSizes, theme('screenSize', {})) }\n ),\n matchUtilities(\n {\n 'h-screen': height => ({\n height: `${height}vh`\n })\n },\n { values: Object.assign(screenSizes, theme('screenSize', {})) }\n )\n })\n ],\n}\n```\n\nIt will allow you to use `w-screen` or `h-screen` utility with any `vw` or `vh` values from 0 to 95 with step 5 (0,5,10...95). `w-screen` with no values will be `100vw` (as current behaviour)\n\n```\n\n Default width screen is still working\n\n 50vw width, 15vh from JIT\n No need to set h-screen-[15vh] as we already know we're working with vh units\n\n```\n\nIn your case it will be `w-screen-90 h-screen-90`\n\nYou may extend config for reusable classes with `screenSize` key\n\n```\nmodule.exports = {\n theme: {\n extend: {\n screenSize: {\n 33: 33 // just an example\n }\n },\n },\n}\n```\n\nUsage\n\n```\n\n 33vh from user config, 22vw from JIT\n\n```\n\nDEMO\n\n========================================\n\nCode:\n```text\nwidth: 100vw;\n```\n\n```text\nwidth: 90vw;\nheight: 90vh;\n```\n\n```text\n<div class=\"w-[90vw] h-[90vh]\"></div>\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n theme: {\n extend: {\n height: {\n 'screen/90': '90vh',\n },\n width: {\n 'screen/90': '90vw',\n }\n }\n }\n}\n```\n\n```text\n<div class=\"w-screen/90 h-screen/90\"></div>\n```\n\n```text\n90vw\n```\n\n```text\nw-90\nh-90\n```\n\n```js\nconst plugin = require('tailwindcss/plugin')\n\n// create default values\nconst screenKeys = Array.from({length: 20}, (_, i) => i*5)\nconst screenSizes = screenKeys.reduce((v, key) => Object.assign(v, {[key]: key}), {});\n\nmodule.exports = {\n\n // ...\n\n plugins: [\n plugin(function ({matchUtilities, theme}) {\n matchUtilities(\n {\n 'w-screen': width => ({\n width: `${width}vw`\n })\n },\n { values: Object.assign(screenSizes, theme('screenSize', {})) }\n ),\n matchUtilities(\n {\n 'h-screen': height => ({\n height: `${height}vh`\n })\n },\n { values: Object.assign(screenSizes, theme('screenSize', {})) }\n )\n })\n ],\n}\n```\n\n```html\n<div class=\"w-screen h-screen-35\">\n Default width screen is still working\n</div>\n\n<div class=\"w-screen-50 h-screen-[15]\">\n 50vw width, 15vh from JIT\n No need to set h-screen-[15vh] as we already know we're working with vh units\n</div>\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n screenSize: {\n 33: 33 // just an example\n }\n },\n },\n}\n```\n\n```html\n<div class=\"w-screen-[22] h-screen-33\">\n 33vh from user config, 22vw from JIT\n</div>\n```\n\n```text\nw-screen\n```\n\n```text\nh-screen\n```\n\n```text\nvw\n```\n\n```text\nvh\n```\n\n```text\nw-screen\n```\n\n```text\n100vw\n```\n\n```text\nw-screen-90 h-screen-90\n```\n\n```text\nscreenSize\n```\n\n========================================\n\nComments:\n- Unfortunately this wouldn't work. '90' isn't a default value in Tailwind and if it were, the convention would be that it would map to a rem value. `w-96` for example is 24rem.\n- This is wrong. It doesn't work this way. Arbitrary values should be wrapped in square brackets with the desired unit, for example, `w-[90vw]`.\n- You can do this for max-h-* and max-w-* as well. Just replace height with maxHeight and width with maxWidth in the config.","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":246,"estimatedTokens":1046}}481{"id":"stack-78418599","source":"stackoverflow","questionId":78418599,"title":"Input loses focus when Popover opens in ShadCN","tags":["javascript","reactjs","next.js","tailwind-css","shadcnui"],"text":"Title: Input loses focus when Popover opens in ShadCN\nTags: javascript, reactjs, next.js, tailwind-css, shadcnui\nSource: Stack Overflow\n\nQuestion:\nThis component contains Popover & Input from shadcn. The issue I'm facing is that when I click on the Input to open the Popover, the Input loses focus, and the cursor moves out.\n\n**Expected behavior:** \n\nWhen clicking on the Input component, the Popover should open, and the Input should remain focused with the cursor inside it, allowing the user to type without any additional clicks.\n\nLink to Sandbox\n\n```\n\"use client\";\n\nimport { Input } from \"@/components/ui/input\";\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\";\n\nexport default function Searchbar() {\n return (\n \n \n \n \n \n Place content for the popover here.\n \n \n );\n}\n```\n\n========================================\n\nCode:\n```text\n\"use client\";\n\nimport { Input } from \"@/components/ui/input\";\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\";\n\nexport default function Searchbar() {\n return (\n <div className=\"w-1/3\">\n <Popover>\n <PopoverTrigger>\n <Input />\n </PopoverTrigger>\n <PopoverContent>Place content for the popover here.</PopoverContent>\n </Popover>\n </div>\n );\n}\n```\n\n```text\n<Popover>\n <PopoverTrigger>\n <Input />\n </PopoverTrigger>\n <PopoverContent onOpenAutoFocus={(e) => e.preventDefault()}>\n Place content for the popover here.\n </PopoverContent>\n</Popover>\n```\n\n```text\n<Popover />\n```\n\n```text\n<Popover />\n```\n\n```text\nonOpenAutoFocus\n```\n\n```text\npreventDefault\n```\n\n========================================\n\nComments:\n- Rico's answer is correct! To add more context by default a11y rule, Popover is meant to be focused when opened because it usually contains an interactive component. If you want it to not \"stealing the focus\" with proper accessibility, maybe consider using Tooltip or HoverCard.\n- DImitrij, Thanks for the reply I'm planning to use this component to implement a Twitter or Google-like search bar. Here's my plan: When the user focuses on the input field, the popover should open, displaying the old search history along with any new matching searches below. Additionally, when the user clicks out of the input field or the popover, the popover should close and lose focus. Is there any other recommended way to achieve this?\n- There is a problem with the input field with the `spacebar` key. Inside the input field, when you use the space bar, the input field loses focus and the popover gets closed. See the documentation radixui-popover-keyboard-interactions\n- @johirHaqueDipok: you can resolve spacebar problem with this code: ` { if(e.code === \"Space\") e.preventDefault(); }}>...\n- Thank you very much. Even my CHATGPT premium version could not answer this. So what for AI replacing humans 🤣🤣","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":99,"estimatedTokens":719}}482{"id":"stack-69944010","source":"stackoverflow","questionId":69944010,"title":"Make sidebar slide in from the left when the button is clicked with TailwindCSS","tags":["html","css","reactjs","css-transitions","tailwind-css"],"text":"Title: Make sidebar slide in from the left when the button is clicked with TailwindCSS\nTags: html, css, reactjs, css-transitions, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThere is a sidebar menu and a button which shows/hides the sidebar. The problem is that I don't know how to make it slide in from the left when it appears. Also to slide back to the right of the screen when it is closing.\n\nHere is my code so far:\n\n```\nconst myClass = clsx({\n 'transition duration-300 h-screen mt-5 fixed z-10 left-0 w-80 ': true,\n 'opacity-0': open,\n 'opacity-100': !open\n });\n....\n\n return (\n \n \n \n ...\n \n \n );\n```\n\nI guess it should be added something with respect to isOpened, when it is closed or opened, tried with Tailwind's transition property but it didn't work out.\n\n========================================\n\nTop Answer:\nTry adding the classes `transition-all` (docs) and some duration, e.g. `duration-500`. Then instead of manipulating opacity, manipulate the offset. Make your sidebar position absolute and add a negative `left` offset when not open (e.g. `-left-36`), and change it to `left-0` when open.\n\nCheck out this live example where I'm sliding the sidebar when the page is hovered:\n\nhttps://play.tailwindcss.com/BpHgqXmmYm\n\n========================================\n\nCode:\n```text\nconst myClass = clsx({\n 'transition duration-300 h-screen mt-5 fixed z-10 left-0 w-80 ': true,\n 'opacity-0': open,\n 'opacity-100': !open\n });\n....\n\n return (\n <div className='w-8 h-8'>\n <button onClick={toggleSideBar}></button>\n <div className={containerClasses}>\n ...\n </div>\n </div>\n );\n```\n\n```text\nconst myClass = clsx({\n 'transition-all duration-1000 h-screen mt-5 fixed z-10 ': true,\n '-left-80 w-80': open,\n 'left-0 w-80': !open\n });\n```\n\n```text\ntransition-all\n```\n\n```text\nduration-500\n```\n\n```text\nleft\n```\n\n```text\n-left-36\n```\n\n```text\nleft-0\n```\n\n========================================\n\nComments:\n- if you have theme this will transition the colors as well- which is not desired\n- @mercury nowadays you can use arbitrary values if you need to transform just a single property. in this example you would change `transition-all` to ` transition-[left]`. more info in tailwind docs","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":92,"estimatedTokens":568}}483{"id":"stack-72755613","source":"stackoverflow","questionId":72755613,"title":"How to add space between table rows with tailwind?","tags":["html","css","html-table","tailwind-css","tailwind-ui"],"text":"Title: How to add space between table rows with tailwind?\nTags: html, css, html-table, tailwind-css, tailwind-ui\nSource: Stack Overflow\n\nQuestion:\nI am new to tailwind and trying to add space between table rows.\n\n```\n\n \n \n Chapter Number\n Chapter Name\n Added at\n Status\n \n \n \n {chapters.map((chapter) => (\n \n {chapter.chapterNumber}\n {chapter.chapterName}\n {chapter.addedAt}\n {!chapter.published && 'Not published'}\n \n ))}\n \n \n```\n\nThis does not add space between the table rows.\nSo,I have tried with `mt-6` on each rows. It has no effect.https://i.sstatic.net/zxqEQ.png\n\nI have seen a similar question and used the answer here and have added border-spacing and border-seperate.\n\nSo, now my table row has these classes.\n\n```\n\n```\n\nBut this results in adding space around all the elements.https://i.sstatic.net/p2OiH.png\n\nI do not understand why table row behaves this way and does not take the `margin` with `mt-6`.\n\nBut if I replace the rows with a div, it applies the margin top.\neg:\n\n```\n\n Chapter Number\n Chapter Name\n Added at\n Status\n \n \n 1\n Chapter Name\n 04/2/2022\n Not published\n \n \n 1\n Chapter Name\n 04/2/2022\n Not published\n \n```\n\nhttps://i.sstatic.net/nvmA1.png\n\n========================================\n\nTop Answer:\nUse `border-seperate` and `border-spacing-y-4` to add vertical magin only.\n\n\r\n\r\n\n```\n\n \n \n Chapter Number\n Chapter Name\n Added at\n Status\n \n \n \n \n \n {chapter.chapterNumber}\n {chapter.chapterName}\n {chapter.addedAt}\n {!chapter.published && 'Not published'}\n \n\n \n {chapter.chapterNumber}\n {chapter.chapterName}\n {chapter.addedAt}\n {!chapter.published && 'Not published'}\n \n\n \n {chapter.chapterNumber}\n {chapter.chapterName}\n {chapter.addedAt}\n {!chapter.published && 'Not published'}\n \n \n {chapter.chapterNumber}\n {chapter.chapterName}\n {chapter.addedAt}\n {!chapter.published && 'Not published'}\n \n \n \n \n \n\n```\n\n========================================\n\nCode:\n```html\n<table className=\"table-auto w-full shadow-md mt-5 rounded\">\n <thead className=\"bg-base-200 text-left text-gray-700 tracking-wider\">\n <tr>\n <th className=\"p-4 \">Chapter Number</th>\n <th className=\"p-4 \">Chapter Name</th>\n <th className=\"p-4 \">Added at</th>\n <th className=\"p-4 \">Status</th>\n </tr>\n </thead>\n <tbody>\n {chapters.map((chapter) => (\n <tr className=\"bg-card mt-6 rounded\" key={chapter.chapterNumber}>\n <td className=\"p-4\">{chapter.chapterNumber}</td>\n <td className=\"p-4\">{chapter.chapterName}</td>\n <td className=\"p-4\">{chapter.addedAt}</td>\n <td className=\"p-4\">{!chapter.published && 'Not published'}</td>\n </tr>\n ))}\n </tbody>\n </table>\n```\n\n```html\n<table className=\"table-auto w-full shadow-md mt-5 border-spacing-2 border-separate rounded\">\n```\n\n```html\n<div>\n <th className=\"p-4 \">Chapter Number</th>\n <th className=\"p-4 \">Chapter Name</th>\n <th className=\"p-4 \">Added at</th>\n <th className=\"p-4 \">Status</th>\n </div>\n <div className=\"mt-6 bg-card\">\n <th className=\"p-4 \">1</th>\n <th className=\"p-4 \">Chapter Name</th>\n <th className=\"p-4 \">04/2/2022</th>\n <th className=\"p-4 \">Not published</th>\n </div>\n <div className=\"mt-6 bg-card\">\n <th className=\"p-4 \">1</th>\n <th className=\"p-4 \">Chapter Name</th>\n <th className=\"p-4 \">04/2/2022</th>\n <th className=\"p-4 \">Not published</th>\n </div>\n```\n\n```text\nmt-6\n```\n\n```text\nmargin\n```\n\n```text\nmt-6\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<table class=\"table-auto w-full shadow-md mt-5 rounded bg-black border-separate border-spacing-y-3\">\n <thead class=\"text-left text-gray-500 tracking-wider\">\n <tr>\n <th class=\"p-4\">Chapter Number</th>\n <th class=\"p-4\">Chapter Name</th>\n <th class=\"p-4\">Added at</th>\n <th class=\"p-4\">Status</th>\n </tr>\n </thead>\n <tbody class=\"\">\n <tr class=\"bg-card rounded text-gray-200 bg-neutral-900\">\n <td class=\"p-4\">60001</td>\n <td class=\"p-4\"></td>\n <td class=\"p-4\">6/21/2022</td>\n <td class=\"p-4\">Not published</td>\n </tr>\n <tr class=\"bg-card rounded text-gray-200 bg-neutral-900\">\n <td class=\"p-4\">60001</td>\n <td class=\"p-4\"></td>\n <td class=\"p-4\">6/21/2022</td>\n <td class=\"p-4\">Not published</td>\n </tr>\n </tbody>\n</table>\n```\n\n```text\nborder-separate\n```\n\n```text\nborder-spacing-y-3\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<div class=\"bg-black\">\n<table class=\"table-auto w-full shadow-md rounded border-separate border-spacing-y-4\">\n <thead class=\"text-white text-left bg-gray-900 tracking-wider\">\n <tr>\n <th class=\"p-4 \">Chapter Number</th>\n <th class=\"p-4 \">Chapter Name</th>\n <th class=\"p-4 \">Added at</th>\n <th class=\"p-4 \">Status</th>\n </tr>\n </thead>\n <tbody class=\"\">\n \n <tr class=\"bg-stone-800 mt-6 text-white rounded\" key={chapter.chapterNumber}>\n <td class=\"p-4\">{chapter.chapterNumber}</td>\n <td class=\"p-4\">{chapter.chapterName}</td>\n <td class=\"p-4\">{chapter.addedAt}</td>\n <td class=\"p-4\">{!chapter.published && 'Not published'}</td>\n </tr>\n\n <tr class=\"bg-stone-800 mt-6 text-white rounded\" key={chapter.chapterNumber}>\n <td class=\"p-4\">{chapter.chapterNumber}</td>\n <td class=\"p-4\">{chapter.chapterName}</td>\n <td class=\"p-4\">{chapter.addedAt}</td>\n <td class=\"p-4\">{!chapter.published && 'Not published'}</td>\n </tr>\n\n <tr class=\"bg-stone-800 mt-6 text-white rounded\" key={chapter.chapterNumber}>\n <td class=\"p-4\">{chapter.chapterNumber}</td>\n <td class=\"p-4\">{chapter.chapterName}</td>\n <td class=\"p-4\">{chapter.addedAt}</td>\n <td class=\"p-4\">{!chapter.published && 'Not published'}</td>\n </tr>\n <tr class=\"bg-stone-800 mt-6 text-white rounded\" key={chapter.chapterNumber}>\n <td class=\"p-4\">{chapter.chapterNumber}</td>\n <td class=\"p-4\">{chapter.chapterName}</td>\n <td class=\"p-4\">{chapter.addedAt}</td>\n <td class=\"p-4\">{!chapter.published && 'Not published'}</td>\n </tr>\n \n \n </tbody>\n </table>\n</div>\n```\n\n```text\nborder-seperate\n```\n\n```text\nborder-spacing-y-4\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":277,"estimatedTokens":1651}}484{"id":"stack-71264259","source":"stackoverflow","questionId":71264259,"title":"How to enable Tailwind.css for Storybook in a Nx workspace Angular library?","tags":["tailwind-css","nrwl-nx","angular-storybook","nx-workspace"],"text":"Title: How to enable Tailwind.css for Storybook in a Nx workspace Angular library?\nTags: tailwind-css, nrwl-nx, angular-storybook, nx-workspace\nSource: Stack Overflow\n\nQuestion:\nI've created an Angular library in Nx workspace to provide ui-components (ui-kit). To this library I added Storybook which was working fine. Now I also want to include Tailwind because the components make use of it.\n\nI used the `nx generate @nrwl/angular:setup-tailwind --project=ui-kit --buildTarget=build-storybook` command to setup tailwind for that library. The library is buildable.\n\nI have a tailwind.config.js which looks like this:\n\n```\nconst { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');\nconst { join } = require('path');\n\nmodule.exports = {\n content: [\n join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),\n ...createGlobPatternsForDependencies(__dirname),\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\nand added a tailwind-imports.css with content\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nas import to `preview.js` in the .storybook folder of the library.\n\nBut, no tailwind.\n\nIs there any recipe to or some running example with nx, angular, storybook and tailwind?\n\nUsing nx version 13.8.3\n\nThanks so much for any help!\n\n========================================\n\nTop Answer:\nI have a React version working, I hope this helps.\n\nKeep in mind that storybook requires a hard refresh for UI updates to be reflected as there is no hot-reloading out of the box.\n\nWe are going with the PostCSS version seen here.\n\nYou need the following files:\n\n```\n// libs/{app-name}/tailwind.config.js\n\nconst { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');\nconst { join } = require('path');\n\nmodule.exports = {\n content: [\n join(__dirname, 'src/**/!(*.stories|*.spec).{ts,tsx,html}'),\n ...createGlobPatternsForDependencies(__dirname),\n ],\n theme: {\n extend: {},\n },\n variants: {},\n plugins: [],\n};\n```\n\n```\n// libs/{app-name}/postcss.config.js\n\nconst { join } = require('path');\n\nmodule.exports = {\n plugins: {\n tailwindcss: {\n config: join(__dirname, 'tailwind.config.js')\n },\n autoprefixer: {},\n },\n};\n```\n\n```\n// libs/{app-name}/.storybook/main.js\n\nconst rootMain = require('../../../.storybook/main');\n\nmodule.exports = {\n ...rootMain,\n\n core: { ...rootMain.core, builder: 'webpack5' },\n\n stories: [\n ...rootMain.stories,\n '../src/lib/**/*.stories.mdx',\n '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',\n ],\n addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],\n webpackFinal: async (config, { configType }) => {\n // apply any global webpack configs that might have been specified in .storybook/main.js\n if (rootMain.webpackFinal) {\n config = await rootMain.webpackFinal(config, { configType });\n }\n\n // add your own webpack tweaks if needed\n\n return config;\n },\n};\n```\n\n```\n// libs/{app-name}/.storybook/preview.js\n\nimport './tailwind-imports.css';\n```\n\n```\n// libs/{app-name}/.storybook/tailwind-imports.css\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n========================================\n\nCode:\n```js\nconst { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');\nconst { join } = require('path');\n\nmodule.exports = {\n content: [\n join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),\n ...createGlobPatternsForDependencies(__dirname),\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nnx generate @nrwl/angular:setup-tailwind --project=ui-kit --buildTarget=build-storybook\n```\n\n```text\npreview.js\n```\n\n```json\n\"build-storybook\": {\n \"executor\": \"@nrwl/storybook:build\",\n \"outputs\": [\"{options.outputPath}\"],\n \"options\": {\n \"uiFramework\": \"@storybook/angular\",\n \"outputPath\": \"dist/storybook/angular\",\n \"styles\": [\"libs/<library_name>/src/styles.scss\"], // <------ HERE\n \"config\": {\n \"configFolder\": \"libs/<library_name>/.storybook\"\n },\n \"projectBuildConfig\": \"angular:build-storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n// libs/{app-name}/tailwind.config.js\n\nconst { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');\nconst { join } = require('path');\n\nmodule.exports = {\n content: [\n join(__dirname, 'src/**/!(*.stories|*.spec).{ts,tsx,html}'),\n ...createGlobPatternsForDependencies(__dirname),\n ],\n theme: {\n extend: {},\n },\n variants: {},\n plugins: [],\n};\n```\n\n```text\n// libs/{app-name}/postcss.config.js\n\nconst { join } = require('path');\n\nmodule.exports = {\n plugins: {\n tailwindcss: {\n config: join(__dirname, 'tailwind.config.js')\n },\n autoprefixer: {},\n },\n};\n```\n\n```text\n// libs/{app-name}/.storybook/main.js\n\nconst rootMain = require('../../../.storybook/main');\n\nmodule.exports = {\n ...rootMain,\n\n core: { ...rootMain.core, builder: 'webpack5' },\n\n stories: [\n ...rootMain.stories,\n '../src/lib/**/*.stories.mdx',\n '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',\n ],\n addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],\n webpackFinal: async (config, { configType }) => {\n // apply any global webpack configs that might have been specified in .storybook/main.js\n if (rootMain.webpackFinal) {\n config = await rootMain.webpackFinal(config, { configType });\n }\n\n // add your own webpack tweaks if needed\n\n return config;\n },\n};\n```\n\n```text\n// libs/{app-name}/.storybook/preview.js\n\nimport './tailwind-imports.css';\n```\n\n```text\n// libs/{app-name}/.storybook/tailwind-imports.css\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n\"storybook\": {\n \"executor\": \"@nrwl/storybook:storybook\",\n \"options\": {\n \"styles\": [\"libs/shared/ui-components/.storybook/styles.css\"],\n \"uiFramework\": \"@storybook/angular\",\n \"port\": 4400,\n \"config\": {\n \"configFolder\": \"libs/shared/ui-components/.storybook\"\n },\n \"projectBuildConfig\": \"shared-ui-components:build-storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nimport '../src/app/global.css';\n```\n\n```text\n./storybook/preview.ts\n```\n\n========================================\n\nComments:\n- Thanks Stephen. I tried this but still doesn't work on Angular. The only difference and maybe that's the point, I haven't found anything to replace the `@nrwl/react/plugins/storybook` addon in the .storybook/main.js\n- Say, did you successfully used nested/variables inside storybook/apps with postcss?","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":315,"estimatedTokens":1683}}485{"id":"stack-71422057","source":"stackoverflow","questionId":71422057,"title":"Prevent Tailwind from stripping unused classes - preserve full css","tags":["tailwind-css","tailwind-ui"],"text":"Title: Prevent Tailwind from stripping unused classes - preserve full css\nTags: tailwind-css, tailwind-ui\nSource: Stack Overflow\n\nQuestion:\nI have a Laravel project with Tailwind and have Webpack configured:\n\n```\nmix.js('resources/js/app.js', 'public/js')\n .postCss('resources/css/app.css', 'public/css', [\n require(\"tailwindcss\"),\n ]);\n```\n\nAnd this is my Tailwind.config:\n\n```\nconst defaultTheme = require(\"tailwindcss/defaultTheme\");\nconst colors = require(\"tailwindcss/colors\");\n\nmodule.exports = {\n content: [\n \"./resources/**/*.blade.php\",\n \"./resources/**/*.js\",\n \"./resources/**/*.vue\",\n ],\n theme: {\n extend: {\n fontFamily: {\n sans: [\"Rubik\", ...defaultTheme.fontFamily.sans],\n },\n },\n colors: {\n transparent: \"transparent\",\n current: \"currentColor\",\n black: colors.black,\n white: colors.white,\n gray: colors.gray,\n emerald: colors.emerald,\n brandcolor: {\n 50: \"#f3d2e4\",\n 100: \"#ff53aa\",\n 200: \"#ff49a0\",\n 300: \"#ff3f96\",\n 400: \"#f8358c\",\n 500: \"#ee2b82\",\n 600: \"#e42178\",\n 700: \"#da176e\",\n 800: \"#d00d64\",\n 900: \"#c6035a\",\n },\n blue: {\n 50: \"#a6ecfd\",\n 100: \"#50d4ff\",\n 200: \"#46caff\",\n 300: \"#3cc0f6\",\n 400: \"#32b6ec\",\n 500: \"#28ace2\",\n 600: \"#1ea2d8\",\n 700: \"#1498ce\",\n 800: \"#0a8ec4\",\n 900: \"#0084ba\",\n },\n teal: colors.teal,\n yellow: colors.yellow,\n },\n },\n plugins: [\n require(\"@tailwindcss/forms\"),\n require(\"@tailwindcss/aspect-ratio\"),\n require(\"@tailwindcss/typography\"),\n ],\n};\n```\n\nAs you can see I changed and add some colors.\n\nWhen I have this in my code and I compile it:\n\n```\n\n```\n\nIt works, but when I change it to `800`, I have to recompile it.\n\nWhat do I have to change so the FULL css is compiled with all options available? So i can also do things like:\n\n```\n\n```\n\nAnd make the color as a variable in my code. And I know, that this is not recommended, but the CSS doesn't have to be small for this project.\n\n========================================\n\nTop Answer:\nI found using safelist in the Tailwinds config with an expression to match all works to output a file which currently is just over 8mb and has 404,324 lines. I believe that is 100% of the classes available, I've spot tested a few colors, padding and animations, and they all seem to be there. That number 8mb seems to match what I've heard raw Tailwinds would be if output in total, so I'm reasonably sure I've got a full output.\n\nI'm planning to build a PHP purging system for WordPress. So this full output file is needed to act as the input for that.\n\n```\nsafelist: [\n {\n pattern: /.*/,\n }\n],\n```\n\nBelow is the safelist in the context of the full tailwind.config.js file.\n\n```\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n safelist: [\n {\n pattern: /.*/,\n }\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nPerhaps worth noting that with this configuration you need to run the build as described in the Tailwind CSS docs. The resulting file takes an unusual amount of time to build, as much as 2-4 minutes depending on your machine.\n\nThe nice thing about this approach compared to CDN's is that you can run it again anytime there is an update, and if you don't really need 100% of the available classes you can make the regex more selective.\n\n========================================\n\nCode:\n```js\nmix.js('resources/js/app.js', 'public/js')\n .postCss('resources/css/app.css', 'public/css', [\n require(\"tailwindcss\"),\n ]);\n```\n\n```js\nconst defaultTheme = require(\"tailwindcss/defaultTheme\");\nconst colors = require(\"tailwindcss/colors\");\n\nmodule.exports = {\n content: [\n \"./resources/**/*.blade.php\",\n \"./resources/**/*.js\",\n \"./resources/**/*.vue\",\n ],\n theme: {\n extend: {\n fontFamily: {\n sans: [\"Rubik\", ...defaultTheme.fontFamily.sans],\n },\n },\n colors: {\n transparent: \"transparent\",\n current: \"currentColor\",\n black: colors.black,\n white: colors.white,\n gray: colors.gray,\n emerald: colors.emerald,\n brandcolor: {\n 50: \"#f3d2e4\",\n 100: \"#ff53aa\",\n 200: \"#ff49a0\",\n 300: \"#ff3f96\",\n 400: \"#f8358c\",\n 500: \"#ee2b82\",\n 600: \"#e42178\",\n 700: \"#da176e\",\n 800: \"#d00d64\",\n 900: \"#c6035a\",\n },\n blue: {\n 50: \"#a6ecfd\",\n 100: \"#50d4ff\",\n 200: \"#46caff\",\n 300: \"#3cc0f6\",\n 400: \"#32b6ec\",\n 500: \"#28ace2\",\n 600: \"#1ea2d8\",\n 700: \"#1498ce\",\n 800: \"#0a8ec4\",\n 900: \"#0084ba\",\n },\n teal: colors.teal,\n yellow: colors.yellow,\n },\n },\n plugins: [\n require(\"@tailwindcss/forms\"),\n require(\"@tailwindcss/aspect-ratio\"),\n require(\"@tailwindcss/typography\"),\n ],\n};\n```\n\n```html\n<div class=\"bg-brandcolor-600\">\n```\n\n```html\n<div class=\"bg-{{ $color ?? 'brandcolor' }}-600\">\n```\n\n```text\n800\n```\n\n```text\nmodule.exports = {\n content: [\n './resources/views/**/*.blade.php',\n './resources/js/**/*.js',\n ],\n safelist: [\n {\n pattern: /.-brandcolor-./,\n }\n ],\n theme: {,\n extend: {\n colors: {\n brandcolor: {\n 50: \"#f3d2e4\",\n 100: \"#ff53aa\",\n 200: \"#ff49a0\",\n 300: \"#ff3f96\",\n 400: \"#f8358c\",\n 500: \"#ee2b82\",\n 600: \"#e42178\",\n 700: \"#da176e\",\n 800: \"#d00d64\",\n 900: \"#c6035a\",\n },\n }\n },\n },\n}\n```\n\n```text\nmodule.exports = {\n content: [\n './resources/views/**/*.blade.php',\n './resources/js/**/*.js',\n ],\n safelist: [\n {\n pattern: /(bg|text)-(brandcolor|blue)-./,\n }\n // OR multiple entries - same as above\n {\n pattern: /(bg|text)-blue-./,\n },\n {\n pattern: /(bg|text)-brandcolor-./,\n }\n ],\n // theme config the same... \n}\n```\n\n```text\n@foreach ([50, 100, 300, 800] as $brand)\n <div class=\"bg-brandcolor-{{ $brand }}\">\n {{ $brand }}\n </div>\n@endforeach\n```\n\n```text\nmodule.exports = {\n content: [\n './resources/views/**/*.blade.php',\n './resources/js/**/*.js',\n './safelist.txt',\n ],\n // theme config the same... \n}\n```\n\n```text\n<script src=\"https://cdn.tailwindcss.com\"></script>\n <script>\n tailwind.config = {\n theme: {\n colors: {\n brandcolor: {\n 50: \"#f3d2e4\",\n 100: \"#ff53aa\",\n 200: \"#ff49a0\",\n 300: \"#ff3f96\",\n 400: \"#f8358c\",\n 500: \"#ee2b82\",\n 600: \"#e42178\",\n 700: \"#da176e\",\n 800: \"#d00d64\",\n 900: \"#c6035a\",\n },\n }\n }\n }\n </script>\n```\n\n```js\nsafelist: [\n {\n pattern: /.*/\n }\n],\n```\n\n```text\nsafelist\n```\n\n```text\nbrandcolor\n```\n\n```text\n-brandcolor-\n```\n\n```text\nsafelist.txt\n```\n\n```text\ncontent\n```\n\n```text\nhead\n```\n\n```text\n@foreach\n```\n\n```text\npurge.enabled = false\n```\n\n```text\nsafelist: [\n {\n pattern: /.*/,\n }\n],\n```\n\n```text\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n safelist: [\n {\n pattern: /.*/,\n }\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n========================================\n\nComments:\n- This is not just \"not recommended\", this is a no-go to ask your end users to download 5 MB of CSS on their 200$ phones when only 10kB may be enough. Depending of your framework, this may be as simple as having `myCoolColor` as a variable and having it matched to a value in an array (also called a `dictionary`/`associative array` in some programming languages). So yeah, try to having conditional in your code, it will bring a bit more effort on your side but will be super worth in the long run for everybody. Performance matters, money-wise too.\n- @kissu This was not a very useful answer while you should not make assumptions\n- I guess that having an empty `content` may be equivalent to not having a `purge`: tailwindcss.com/docs/content-configuration\n- I tried empty content it ignores everything but basic utilities\n- `it ignores` > no purge at all? What do you call basic utilities?\n- Yes no purge at all - compiled CSS contains `img, svg, video` etc - basically what will be generated by `@tailwind base;`\n- I guess before JIT Tailwind compiled full CSS file and purged it in a production mode depends on your content (purge section). Now it has different approach - CSS generated on the fly if your content contains utility. So as there is no content - there is nothing to purge and only base styles generated\n- FWIW, I think this regexp is not really correct, based on their documentation. the periods in that regexp only allow one character, probably you are meaning to use `.*` instead of just `.`","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":381,"estimatedTokens":2234}}486{"id":"stack-70754961","source":"stackoverflow","questionId":70754961,"title":"Force tailwind to use compatible rgb() syntax?","tags":["css","internet-explorer","tailwind-css","internet-explorer-11","tailwind-css-3"],"text":"Title: Force tailwind to use compatible rgb() syntax?\nTags: css, internet-explorer, tailwind-css, internet-explorer-11, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI'm porting an app using TailwindCSS to work with IE11. Unfortunately, TailwindCSS insists on generating colors using the modern W3C CSS Color Module Level 4 `rgb()` syntax, which does not appear to be working in IE, e.g. it generates classes like these:\n\n```\n.bg-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n```\n\nI have tried using postcss-color-rgb in my postcss pipeline to transform this back into the usual syntax to no avail:\n\n```\npostcss([\n require('tailwindcss')(twConfig),\n require('postcss-color-rgb'),\n require('autoprefixer'),\n]).process(cssContent, {\n from: css,\n to: `build/${name}.css.tmp`\n})\n```\n\nTailwind claims to be compatible with any modern browser, which some might dare to classify IE11 as. Any thoughts on getting TailwindCSS to play nicely with IE11 here?\n\n========================================\n\nTop Answer:\n### From Tailwind CSS v4 onwards\n\nStarting from v4, TailwindCSS has switched from the old RGB color scale to using OKLCH. As a result, from v4 onwards, it is no longer possible to achieve a similar IE11-compatible configuration.\n\n- `tailwindlabs/tailwindcss` PR #14693: Add first draft of new wide-gamut color palette\n\nOKLCH color values have been supported by all modern browsers since 2023. TailwindCSS will no longer lag behind due to IE11-compatible settings, as support for IE11 has been completely dropped.\n\n- `oklch()` browser compatibility - MDN Docs\n\nIn general, Tailwind CSS v3.0 is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. It does not support any version of IE, including IE 11.\n\n- Browser Support - TailwindCSS v3 Docs\n\nTailwind CSS v4.0 is designed for and tested on modern browsers, and the core functionality of the framework specifically depends on these browser versions:\n\n- Chrome 111 (released March 2023)\n\n- Safari 16.4 (released March 2023)\n\n- Firefox 128 (released July 2024)\n\n- Browser Support - TailwindCSS v4 Docs\n\n========================================\n\nCode:\n```css\n.bg-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n```\n\n```js\npostcss([\n require('tailwindcss')(twConfig),\n require('postcss-color-rgb'),\n require('autoprefixer'),\n]).process(cssContent, {\n from: css,\n to: `build/${name}.css.tmp`\n})\n```\n\n```text\nrgb()\n```\n\n```js\n// tailwind.config.js\n module.exports = {\n corePlugins: {\n // ...\n\n backgroundOpacity: false,\n }\n }\n```\n\n```js\n// tailwind.config.js\n module.exports = {\n corePlugins: {\n // ...\n backdropOpacity: false,\n backgroundOpacity: false,\n borderOpacity: false,\n divideOpacity: false,\n ringOpacity: false,\n textOpacity: false\n }\n }\n```\n\n```text\npostcss-color-rgb\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\noklch()\n```\n\n========================================\n\nComments:\n- The documentation clearly states it doesn't support IE 11: tailwindcss.com/docs/browser-support.\n- I agree with @firstlast mentioned. In addition, IE will also stop supporting in June this year. Using a modern browser like Chrome or Microsoft Edge would be a better choice.\n- This is just a workaround, Actual question is how to transform the RGB format to RGBA","metadata":{"transformedAt":"2026-08-18T18:33:42.923Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":129,"estimatedTokens":861}}487{"id":"stack-67600655","source":"stackoverflow","questionId":67600655,"title":"Next.js with Tailwind Refreshes Slow","tags":["performance","next.js","refresh","reload","tailwind-css"],"text":"Title: Next.js with Tailwind Refreshes Slow\nTags: performance, next.js, refresh, reload, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI experienced an extremely sluggish refresh time after adding Tailwind to my small Next project. I initially thought it was my device.\n\n========================================\n\nTop Answer:\nI solved this by using Tailwind's just-in-time mode.\n\n```\n// tailwind.config.js\n\nmodule.exports = {\n mode: 'jit',\n ...\n}\n```\n\nThis feature is currently in preview, which means it's subject to change, but it worked for me.\n\n========================================\n\nCode:\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n// tailwind.config.js\n\nmodule.exports = {\n mode: 'jit',\n ...\n}\n```\n\n```text\nnpx tailwindcss -i ./src/input.css -o ./dist/output.css --watch\n```\n\n```text\n@tailwind\n```\n\n```text\nglobal.css\n```\n\n```text\noutput.css\n```\n\n```text\n*.jsx\n```\n\n```text\ntailwindcss\n```\n\n```text\noutput.css\n```\n\n========================================\n\nComments:\n- I know it might be against the rules but I also see very slow refresh when using tailwind in next.js. I know it's not that helpful but you can run turbopack tracing following instruction here nextjs.org/docs/app/guides/local-development#turbopack-traci‌​ng and see that if you have tailwind turned on, you get a huge CSS parsing time penalty (I frequently see 20+ seconds, removing all my tailwind config completely removes this).\n- I am facing a similar issue, but the project is at such a stage I cannot move the inline classes to CSS. It's a lot of refactoring and maybe defeats some purpose of tailwind being inline-class utility. Hope there's a better solution out there.\n- Can you clarify regarding \"apply tailwind classes inline\"? Do you mean that classes cannot be used in components directly?\n- Yes. You won't be able to use each Tailwind utility classes in your components. You'll have to create (a) separate CSS file(s) for them.\n- this is the best solution I've found in 2024 with background style build - I can use all tailwind features and next dev is fast! Even with SWC it was veeeery slow with direct tailwind css import.","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":77,"estimatedTokens":541}}488{"id":"stack-69162070","source":"stackoverflow","questionId":69162070,"title":"Vertical alignment of svg inside button in Tailwind CSS","tags":["tailwind-css"],"text":"Title: Vertical alignment of svg inside button in Tailwind CSS\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to center the \"x\" in the red circular button using Tailwind CSS. I've tried numerous css but nothing worked. What will fix it?\n\nhttps://play.tailwindcss.com/Wz54NCHCI8\n\nhttps://i.sstatic.net/KLb5x.png\n\n```\n\n```\n\n========================================\n\nCode:\n```text\n<button type=\"button\" class=\"flex justify-center select-none bg-red-500 border-2 text-white\n text-xl font-bold p-2 m-2 rounded-full shadow h-20 w-20 focus:outline-none\n focus:shadow-outline\"><img src=\"/icons/x.svg\" alt=\"\" width=\"40\" h=\"40\" class=\"icon svelte-1iu276v\"></button>\n```\n\n```html\n<button type=\"button\" class=\"flex justify-center items-center select-none bg-red-500 border-2 text-white text-xl font-bold p-2 m-2 rounded-full shadow h-20 w-20 focus:outline-none focus:shadow-outline\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-x\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n</button>\n```\n\n```text\nitems-center\n```\n\n```text\njustify-center\n```\n\n========================================\n\nComments:\n- Documentation tailwindcss.com/docs/vertical-align\n- That doesn't work. I have read the documentation. Is it on the correct element?\n- Is that what you want?\n- Yes. What did you change? Added items-center?\n- @ROMS Yes, see my answer.","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":49,"estimatedTokens":394}}489{"id":"stack-71583585","source":"stackoverflow","questionId":71583585,"title":"How to group clases in CSS - Tailwind","tags":["html","css","sass","less","tailwind-css"],"text":"Title: How to group clases in CSS - Tailwind\nTags: html, css, sass, less, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to group clases so the code will be cleaner and legible. In the documentation of Tailwind it talks about \"@apply\", that can be used for this objective but I am using the CDN and therefore this is not working for me. So my question is, **¿Is there any form I can accomplish what I am looking for?** Maybe by using SASS/SCSS or LESS?\n\nHere is an example of what I wnat:\n\n```\n\n \n Home\n \n \n About Us\n \n \n Services\n \n \n Contact Us\n \n \n Log In\n \n \n Sign In\n \n\n```\n\n```\n\n \n Home\n \n \n About Us\n \n \n Services\n \n \n Contact Us\n \n \n Log In\n \n \n Sign In\n \n\n```\n\n========================================\n\nTop Answer:\nI found that \"@layer components\" + \"@apply\" works well in my nextjs/tailwind project\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n .login-page {\n @apply bg-gray-50 dark:bg-gray-900; \n }\n .login-container {\n @apply flex flex-col items-center justify-center px-6 py-8 mx-auto;\n }\n .login-title {\n @apply flex items-center mb-6 text-2xl font-semibold;\n }\n .login-card {\n @apply w-full bg-white rounded-lg shadow dark:border md:mt-0;\n }\n}\n```\n\nThe HTML is as follows\n\n```\nexport default function Login() {\nreturn (\n \n \n \n SineWave Engineering\n \n \n \n```\n\n========================================\n\nCode:\n```text\n<ul class=\"md:flex md:items-center z-[-1] md:z-auto md:static absolute bg-gray-800 w-full left-0 md:w-auto md:py-0 py-4 md:pr-0 pr-7 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-200\">\n <li class=\"nav-element\">\n <a href=\"#\" class=\"text-x1 md:hover:text-yellow-300 duration-500\">Home</a>\n </li>\n <li class=\"px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500\">\n <a href=\"#\" class=\"text-x1 md:hover:text-yellow-300 duration-500\">About Us</a>\n </li>\n <li class=\"px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500\">\n <a href=\"#\" class=\"text-x1 md:hover:text-yellow-300 duration-500\">Services</a>\n </li>\n <li class=\"px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500\">\n <a href=\"#\" class=\"text-x1 md:hover:text-yellow-300 duration-500\">Contact Us</a>\n </li>\n <button class=\"md:w-auto w-full bg-transparent text-white font-[Poppins] duration-500 px-6 py-2 hover:bg-white hover:text-gray-800 border border-white border-dotted rounded-lg\">\n Log In\n </button>\n <button class=\"md:w-auto w-full bg-yellow-500 text-white font-[Poppins] duration-500 px-6 py-2 md:mx-4 hover:bg-yellow-600 rounded-lg\">\n Sign In\n </button>\n</ul>\n```\n\n```text\n<ul class=\"nav-elemnts\">\n <li class=\"nav-element\">\n <a href=\"#\" class=\"nav-link\">Home</a>\n </li>\n <li class=\"nav-element\">\n <a href=\"#\" class=\"nav-link\">About Us</a>\n </li>\n <li class=\"nav-element\">\n <a href=\"#\" class=\"nav-link\">Services</a>\n </li>\n <li class=\"nav-element\">\n <a href=\"#\" class=\"nav-link\">Contact Us</a>\n </li>\n <button class=\"button-login\">\n Log In\n </button>\n <button class=\"button-signin\">\n Sign In\n </button>\n</ul>\n```\n\n```text\nfunction NavElement(props) {\n return (\n <li class=\"px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500\">\n <a href={props.href} class=\"text-x1 md:hover:text-yellow-300 duration-500\">{props.children}</a>\n </li>\n )\n}\n```\n\n```text\nfunction NavElements() {\n return (\n <ul class=\"md:flex md:items-center z-[-1] md:z-auto md:static absolute bg-gray-800 w-full left-0 md:w-auto md:py-0 py-4 md:pr-0 pr-7 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-200\">\n <NavElement href=\"/\">Home</NavElement>\n <NavElement href=\"/services\">Services</NavElement>\n <NavElement href=\"/about-us\">About us</NavElement>\n </ul>\n )\n}\n```\n\n```html\n<style type=\"text/tailwindcss\">\n @layer components {\n .some-class {\n @apply px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500;\n }\n }\n</style>\n```\n\n```text\n<div class=\"group p-4\">\n <p class=\"group-hover:bg-red-400\">lorem ipsum</p>\n</div>\n```\n\n```text\n// turns a JSON object's values into a single string (keys are irrelevant)\n\nexport const classify = (classes) => Object.values(classes).join(' ')\n```\n\n```text\nimport { classify } from 'shared/utils'\n\nexport const nav = classify({\n base: 'absolute bg-gray-800 w-full left-0 pr-7 pl-7 py-4 opacity-0 top-[-400px] z-[-1]',\n animation: 'transition-all ease-in duration-200',\n larger: 'md:flex md:items-center md:z-auto md:static md:w-auto md:py-0 md:pr-0 md:pl-0 md:opacity-100'\n})\n\nexport const navItem = classify({\n base: 'px-4 py-6 hover:bg-yellow-500 text-white',\n resp: 'md:py-0 md:hover:bg-transparent',\n anim: 'duration-500'\n})\n```\n\n```text\nimport * as styles from './styles'\n\nexport default Component = (props) => (\n <ul className={styles.nav}>\n <li className={styles.navItem}> ... </li>\n <li className={styles.navItem}> ... </li>\n <li className={styles.navItem}> ... </li>\n </ul>\n)\n```\n\n```text\nimport * as utilStyles from 'utils/styles'\nimport * as styles from './styles'\n\n<section className={`${utilStyles.shadowPanel} ${styles.mainSection}`>\n...\n</section>\n```\n\n```text\nclassify()\n```\n\n```html\n<body>\n<ul class=\"nav-elemnts\">\n <li class=\"nav-element\">\n <a href=\"#\" class=\"nav-link\">Home</a>\n </li>\n <li class=\"nav-element\">\n <a href=\"#\" class=\"nav-link\">About Us</a>\n </li>\n <li class=\"nav-element\">\n <a href=\"#\" class=\"nav-link\">Services</a>\n </li>\n <li class=\"nav-element\">\n <a href=\"#\" class=\"nav-link\">Contact Us</a>\n </li>\n <button class=\"button-login\">\n Log In\n </button>\n <button class=\"button-signin\">\n Sign In\n </button>\n</ul>\n<script>\nlet nav-link=\"text-x1 md:hover:text-yellow-300 duration-500\"\nArray.from(document.getElementsByClassName(\"nav-link\")).forEach((el)=>el.className=nav-link)\n</script>\n</body>\n```\n\n```css\n@tailwind base;\n @tailwind components;\n @tailwind utilities;\n \n @layer components {\n .card {\n background-color: theme('colors.white');\n border-radius: theme('borderRadius.lg');\n padding: theme('spacing.6');\n box-shadow: theme('boxShadow.xl');\n }\n /* ... */\n }\n```\n\n```text\n<!-- Will look like a card, but with square corners -->\n<div class=\"card rounded-none\">\n <!-- ... -->\n</div>\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n .login-page {\n @apply bg-gray-50 dark:bg-gray-900; \n }\n .login-container {\n @apply flex flex-col items-center justify-center px-6 py-8 mx-auto;\n }\n .login-title {\n @apply flex items-center mb-6 text-2xl font-semibold;\n }\n .login-card {\n @apply w-full bg-white rounded-lg shadow dark:border md:mt-0;\n }\n}\n```\n\n```text\nexport default function Login() {\nreturn (\n <section className=\"login-page\">\n <div className=\"login-container\">\n <a href=\"#\" className=\"login-title\">\n SineWave Engineering\n </a>\n <div className=\"login-card\">\n <div className=\"p-6 space-y-4 md:space-y-6 sm:p-8\">\n```\n\n```html\n<ul class=\"md:flex md:items-center z-[-1] md:z-auto md:static absolute bg-gray-800 w-full left-0 md:w-auto md:py-0 py-4 md:pr-0 pr-7 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-200 *:px-4 *:py-6 *:md:py-0 *:hover:bg-yellow-500 *:md:hover:bg-transparent *:text-white *:duration-500\">\n <li>\n <a href=\"#\" class=\"text-x1 md:hover:text-yellow-300 duration-500\">Home</a>\n </li>\n <li>\n <a href=\"#\" class=\"text-x1 md:hover:text-yellow-300 duration-500\">About Us</a>\n </li>\n <li>\n <a href=\"#\" class=\"text-x1 md:hover:text-yellow-300 duration-500\">Services</a>\n </li>\n <li>\n <a href=\"#\" class=\"text-x1 md:hover:text-yellow-300 duration-500\">Contact Us</a>\n </li>\n</ul>\n<button class=\"md:w-auto w-full bg-transparent text-white font-[Poppins] duration-500 px-6 py-2 hover:bg-white hover:text-gray-800 border border-white border-dotted rounded-lg\">\n Log In\n</button>\n<button class=\"md:w-auto w-full bg-yellow-500 text-white font-[Poppins] duration-500 px-6 py-2 md:mx-4 hover:bg-yellow-600 rounded-lg\">\n Sign In\n</button>\n```\n\n```text\nitems.map()\n```\n\n```text\n*:\n```\n\n```text\n<li>\n```\n\n```text\n<ul>\n```\n\n========================================\n\nComments:\n- I see what you are trying to tell me but the case is that i want to group the clases and then do what you are saying me. I mean, I want to have a amount of clases in a stylesheet where each class is a group af clases of Tailwind. So at the end I will have my custom clases using Tailwind. I dont know if you undertand what I am looking for, let me know if you don't and I will try to improve the question.\n- That's not what you *should* do in Tailwind. If you group your classes in CSS (even when using @apply) you're basically going back to normal CSS - having to come up with class names, managing selectors etc. Tailwind is there so that you don't have to do that. Consider that Tailwind might not be the best tool for you personally if you don't like one of the fundamental building blocks of it - using utility tokens - which is totally fine, lot's of people don't like it.\n- So this is not a \"problem\" and if I have a long line of classes is not bad?. I am new with Tailwind, and when I start coding I thougth that this was not like \"good practice\" to have a pile of classes.\n- No, it's not a problem. It can be an issue for maintenance if you have to maintain them manually, which is why we create small reusable components and not copy paste the classes everywhere, but the list is definitely not a problem on its own. Either you \"get used\" to it, or you will dislike it, so the subjective feeling plays a big part it this.\n- Thanks for the help, now I understand better how to use Tailwind and the objective of it\n- I try it and the vs code shows me this alert: \"Unknown at rule @layercss(unknownAtRules)\" and it dosn't apply anything to the element with the class I stablish\n- I think he meant how to group tailwindcss classes like @apply (but on cdn), not how to use the group class\n- @apply method is not so helpful as pseudo-classes can't be included.","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":364,"estimatedTokens":2576}}490{"id":"stack-70224449","source":"stackoverflow","questionId":70224449,"title":"@tailwindcss/forms plugin not working with React","tags":["reactjs","forms","npm","tailwind-css"],"text":"Title: @tailwindcss/forms plugin not working with React\nTags: reactjs, forms, npm, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to use the tailwindcss plugin forms, so I've installed it via npm using `npm install @tailwindcss/forms` and added the dependency in the forms section of my tailwindconfig @tailwindcss/forms with `plugins: [ require(\"@tailwindcss/forms\") ]`. According to https://github.com/tailwindlabs/tailwindcss-forms it must now be active, and it does seem to be installed - at least I don't get an error after starting the server. Hoewever, when styling some checkboxes e.g. with `` the styles are not applied.\n\n========================================\n\nTop Answer:\nIn `tailwind.config.js` modify plugin to use `class` strategy.\n\n```\n// tailwind.config.js\nplugins: [\n require(\"@tailwindcss/forms\")({\n strategy: 'class',\n }),\n],\n```\n\nand add `form-checkbox` class to input element.\n\n```\n\n```\n\nThis method worked for me.\n\n========================================\n\nCode:\n```text\nnpm install @tailwindcss/forms\n```\n\n```text\nplugins: [ require(\"@tailwindcss/forms\") ]\n```\n\n```text\n<input type=\"checkbox\" class=\"rounded text-pink-500\" />\n```\n\n```text\nnpm install @tailwindcss/forms\n```\n\n```js\n// tailwind.config.js\nplugins: [\n require(\"@tailwindcss/forms\")({\n strategy: 'class',\n }),\n],\n```\n\n```html\n<input type=\"checkbox\" class=\"form-checkbox rounded text-pink-500\" />\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nclass\n```\n\n```text\nform-checkbox\n```\n\n========================================\n\nComments:\n- do you have a create-react-app?\n- @MWO yes I do have create-react-app\n- and did you install tailwind according to the documentation?tailwindcss.com/docs/guides/create-react-app\n- @MWO yes and I've checked all the steps, nothing is different. Tailwindcss classes are applied regularly","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":80,"estimatedTokens":455}}491{"id":"stack-71896885","source":"stackoverflow","questionId":71896885,"title":"\"Term Expected\" error in tailwindcss generated css","tags":["css","intellij-idea","tailwind-css"],"text":"Title: \"Term Expected\" error in tailwindcss generated css\nTags: css, intellij-idea, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am working on an **node.js express** project using **EJS** as template engine. I am developing this on Intellij Ultimate Edition. Intellij's tailwind css plugin is installed. I am using tailwindcss v3 as my css framework. I have followed their Get Started guide and I am using Tailwind CLI as my method of installation.\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\n mode: 'jit',\n content: ['./views/*.ejs'],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\nI am building the css like so:\n\n`npx tailwindcss -i source.css -o public/stylesheets/style.css --watch`\n\n**source.css**\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nSo all is working fine, no issues, however I am a no error/warning in IDE kinda fellow (*read OCD*), and the error/warning shown in the IDE is bothering me and I want to know how to fix it OR if it is meant to be this way, then how to suppress it?\n\nI have added a screenshot for reference. Let me know if more info is needed to debug, I'll be happy to provide them.\n\nhttps://i.sstatic.net/QltiZ.png\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n mode: 'jit',\n content: ['./views/*.ejs'],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nnpx tailwindcss -i source.css -o public/stylesheets/style.css --watch\n```\n\n```text\n@tailwind base;\n```\n\n========================================\n\nComments:\n- Please check that Tailwind plugin is installed: jetbrains.com/help/idea/tailwind-css.html\n- I should have mentioned that tailwind-css IntelliJ plugin is already installed in my post. (I will add that now). I have also tried invalidating cache and restart as well.\n- @KonstantinAnnikov, upon checking the link that you posted above, looks like IntelliJ is recommending not to have “@tailwind base;” in the style.css. (source.css in my case). Why is that?","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":72,"estimatedTokens":512}}492{"id":"stack-64228127","source":"stackoverflow","questionId":64228127,"title":"Is there a way to have the links underlined by default with tailwind?","tags":["tailwind-css"],"text":"Title: Is there a way to have the links underlined by default with tailwind?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI just discovered tailwind css and I love it. But by default all the links have no style, meaning they are not underlined.\n\nI would like to apply if possible a `text-decoration: underline` or simply the tailwind `.underline` class by default to all my links. I think it's a good practice to have them underlined for the web accessibility and I guess it's not very efficient to add the `.undeline` class to all my links.\n\nMany thanks for your help :)\n\n========================================\n\nTop Answer:\nSimilar to @victoryoalli's answer, but doing the following will preserve browser default behaviour (valid links are underlined, invalid links without a href are not):\n\n```\n@layer base {\n a {\n text-decoration-line: revert;\n }\n}\n```\n\nAlso see https://github.com/tailwindlabs/tailwindcss/issues/18165#issuecomment-2916572995\n\n========================================\n\nCode:\n```text\ntext-decoration: underline\n```\n\n```text\n.underline\n```\n\n```text\n.undeline\n```\n\n```css\n@layer base {\n a {\n @apply underline;\n }\n}\n```\n\n```css\n@layer base {\n a {\n text-decoration-line: revert;\n }\n}\n```\n\n========================================\n\nComments:\n- That's it, thanks a lot :). I see they have other examples of adding its own base style here: tailwindcss.com/docs/preflight#extending-preflight. I guess it's the `a { text-decoration: inherit }` in their base css that removes the underlines.\n- If that's it, why not accept the answer? :)\n- This will underline all links, including those that don't have an href. Browser default behaviour is to only underline links with an href. Links without an href are not focusable, so you should be able to see when you are missing one. E.g. to avoid someone adding an onClick to an anchor without also adding `href=\"#\"` or similar.","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":63,"estimatedTokens":476}}493{"id":"stack-65320240","source":"stackoverflow","questionId":65320240,"title":"Blazor component isolated css with tailwind/postcss","tags":["blazor","tailwind-css","postcss"],"text":"Title: Blazor component isolated css with tailwind/postcss\nTags: blazor, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\n**Is it possible to use tailwind and postcss syntax for blazor component isolated css?**\n\nI really like Tailwind as a CSS framework specifically its use of postcss and the `@apply` functionality where you can bundle tailwinds css components into an individual class.\n\ne.g.\n\n```\n.some-button {\n @apply px-4 py-2 bg-blue-400 text-white\n}\n```\n\nI've been considering using Svelte because it offers both CSS isolation and postcss @apply syntax. However now that Blazor supports isolated CSS I would really like to take it a small step further and be able to write postcss styles from within component CSS.\n\nSo... any idea if that's possible yet?\n\n========================================\n\nTop Answer:\nAdding to @Philipp's response if you want also Hot Reload to work you need change 5th step target dependencies to:\n\nBeforeTargets=\"ResolveStaticWebAssets\" AfterTargets=\"BundleScopedCssFiles\"\n\n========================================\n\nCode:\n```text\n.some-button {\n @apply px-4 py-2 bg-blue-400 text-white\n}\n```\n\n```text\n@apply\n```\n\n```text\n// postcss.config.js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {}\n }\n}\n```\n\n```text\n// tailwind.config.js\npurge: {\n enabled: true,\n content: [\n './**/*.html',\n './**/*.razor',\n './**/*.razor.css'\n ],\n},\n```\n\n```text\n<Target Name=\"PostBuild\" AfterTargets=\"PostBuildEvent\">\n <Exec Command=\"npx postcss $(ProjectDir)obj\\$(ConfigurationName)\\net5.0\\scopedcss\\bundle\\$(ProjectName).styles.css -r\" />\n</Target>\n```\n\n```text\n<Target Name=\"PostBuild\" AfterTargets=\"PostBuildEvent\">\n <Exec Command=\"npx postcss $(ProjectDir)obj\\$(ConfigurationName)\\net5.0\\scopedcss\\projectbundle\\$(ProjectName).bundle.scp.css -r\" />\n</Target>\n```\n\n```text\nnpm init\n```\n\n```text\nnpm i -D postcss-cli autoprefixer postcss tailwindcss\n```\n\n```text\nnpx tailwindcss init\n```\n\n========================================\n\nComments:\n- Thanks so much for your input on this, it works perfectly when using a standard Blazor web project without a component library or compiling a component library directly. However I think there's an issue when a web project references a component library. It seems the very first line of the component lib compiled CSS has `@import '';` which I think confuses the postcss process, any ideas? Thanks again\n- I'm just getting started but it seems to work for .NET 6 as well! I replaced `net5.0` with `$(TargetFramework)` to make it more agnostic.\n- did you try with dotnet 8 RC1?\n- @namvo Yes, it works both with .NET 8 and .NET 9. Although, I couldn't make it work with tailwindcss v4 (probably too premature stage), I used v3 and it works great!\n- One remark, not sure how to make it work with Hot reload. I need to rebuild library to make all changes apply (pun not intended!)","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":95,"estimatedTokens":730}}494{"id":"stack-71678967","source":"stackoverflow","questionId":71678967,"title":"component in NextJS seems to lose the cursor-pointer with a as child component","tags":["css","next.js","tailwind-css"],"text":"Title: component in NextJS seems to lose the cursor-pointer with a as child component\nTags: css, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using NextJS and wanted to configure a top navigation header bar. In the left-hand side of my nav bar, I have a small svg and text that I would like to be Link's to the site's root. The Link component will not allow multiple children, so I have done this:\n\n```\n\n \n \n Root!\n \n\n```\n\nhowever, when I do this the entire div block loses it cursor-pointer and I need to then set a specific class of cursor pointer. I am also using tailwindCSS. I'm not sure what I'm doing wrong here in this instance - any help is appreciated!\n\n========================================\n\nTop Answer:\n`next/link` no longer requires manually adding as a child:\n\nhttps://nextjs.org/blog/next-13#nextlink\n\n```\nimport Link from 'next/link'\n\n// Before\n// Next.js 12: `` has to be nested otherwise it's excluded\n\n About\n\n// Next.js 13: `` always renders ``\n\n About\n\n```\n\n========================================\n\nCode:\n```text\n<Link href=\"/\">\n <div className=\"\">\n <img className=\"\" src=\"/whistle.svg\" />\n <span className=\"\">Root!</span>\n </div>\n</Link>\n```\n\n```text\n<Link href=\"/\">\n <a>\n <div className=\"\" style={{cursor: 'pointer'}}>\n <a>\n <img className=\"\" src=\"/whistle.svg\" />\n <span className=\"\">Root!</span>\n </a>\n </div>\n </a>\n</Link>\n```\n\n```text\n<Link>\n```\n\n```text\n<a>\n```\n\n```text\nclass\n```\n\n```text\nstyle\n```\n\n```text\ndiv\n```\n\n```text\nclassName=\"cursor-pointer\"\n```\n\n```text\n<Link>\n```\n\n```text\n<a>\n```\n\n```text\nimport Link from 'next/link'\n\n// Before\n// Next.js 12: `<a>` has to be nested otherwise it's excluded\n<Link href=\"/about\">\n <a>About</a>\n</Link>\n\n// Next.js 13: `<Link>` always renders `<a>`\n<Link href=\"/about\">\n About\n</Link>\n```\n\n```text\nnext/link\n```\n\n========================================\n\nComments:\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":120,"estimatedTokens":609}}495{"id":"stack-70428529","source":"stackoverflow","questionId":70428529,"title":"Safelist all margin values with screen variants in Tailwind","tags":["tailwind-css","css-purge"],"text":"Title: Safelist all margin values with screen variants in Tailwind\nTags: tailwind-css, css-purge\nSource: Stack Overflow\n\nQuestion:\nI need to safelist all margin values with the respective responsive sizes.\n\nExample:\n\n- 'mb-10'\n\n- 'md:mb-10'\n\n- 'xl:mb-10'\n\nand so on.\n\nHere is what I have right now in my `tailwind.config.js` but it doesn't seem to work for the **responseive** variants:\n\n```\nsafelist: [\n {\n pattern: /\\-?m(\\w?)-/,\n },\n],\n```\n\nIs there an easy way to achieve this with regex patterns or do I need any other specific configuration? I would of course like to avoid listing them all manually.\n\n========================================\n\nTop Answer:\nI simply put a circumflex `^` and it just limits those that start with the word next to it.\n\n```\n{ \n pattern: /^m-\\d+/,\n variants: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n}\n```\n\n========================================\n\nCode:\n```text\nsafelist: [\n {\n pattern: /\\-?m(\\w?)-/,\n },\n],\n```\n\n```text\ntailwind.config.js\n```\n\n```js\nmodule.exports = {\n content: [],\n safelist: [\n {\n pattern: /^(?!(?:scroll|bottom)$)m\\w?-/,\n variants: ['sm', 'md', 'lg', 'xl', '2xl'],\n },\n ],\n}\n```\n\n```text\nm-\n```\n\n```text\nbottom-\n```\n\n```text\nscroll-m-\n```\n\n```js\n{ \n pattern: /^m-\\d+/,\n variants: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n}\n```\n\n```text\n^\n```\n\n========================================\n\nComments:\n- Thanks very much for this, I had tried using `variants` but for some reason it didn't seem to work, maybe my `pattern` was wrong. That said I'm fully aware that this behaviour should be avoided, but I need this exceptionally in a project for the time being, hopefully I'll be able to solve this in some other way to avoid this malpractice. In the meantime I thank you for your help!\n- The pattern `/^(?!(?:scroll|bottom)$)m\\w?-/` does not work for multiple reason, one being that it only works for new lines `^`. Also, you need a negative lookbehind instead of negative lookahead. This pattern is tested and works... `/(?<!scroll-|botto)m\\w?-/`.\n- warn - The safelist pattern `/^(?!(?:scroll|bottom)$)m\\w?-/` doesn't match any Tailwind CSS classes.","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":97,"estimatedTokens":535}}496{"id":"stack-59308735","source":"stackoverflow","questionId":59308735,"title":"Center text (vertically/horizontally) with tailwind","tags":["css","tailwind-css"],"text":"Title: Center text (vertically/horizontally) with tailwind\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI created a little card, which should have a number on the left side. I solved this - but there is one little thing I could not solve until now.\n\nThis number should be horizontally and vertically centered.\n\nThis is what I did: https://codepen.io/spqrinc/pen/jOEraJx\n\n\r\n\r\n\n```\n\r\n\r\n \r\n \r\n \r\n 1\r\n \r\n \r\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata\r\n sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et\r\n ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\r\n \n\n\r\n \r\n \r\n\n```\n\n\r\n\r\n\r\n\nUnfortunately, content-center did not work out for me.\n\n========================================\n\nCode:\n```html\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css\">\n<div class=\"md:flex lg:w-1/2 p-2\">\n <div class=\"md:flex-1 rounded-sm shadow-lg text-gray-600 bg-white rounded-sm shadow-lg\">\n <div class=\"overflow-hidden w-full flex leading-normal lg:h-full\">\n <div class=\"sm:w-1/3 lg:w-1/4 bg-teal-600 block\">\n <div class=\"text-center text-6xl font-bold text-white\">1</div>\n </div>\n <p class=\"text-gray-600 sm:w-2/3 lg:w-3/4 p-4\">\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata\n sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et\n ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n </p>\n </div>\n </div>\n</div>\n```\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css\">\n<div class=\"md:flex lg:w-1/2 p-2\">\n <div class=\"md:flex-1 rounded-sm shadow-lg text-gray-600 bg-white rounded-sm shadow-lg\">\n <div class=\"overflow-hidden w-full flex leading-normal lg:h-full\">\n <div class=\"sm:w-1/3 lg:w-1/4 bg-teal-600 flex items-center justify-center\">\n <div class=\"text-center text-6xl font-bold text-white\">1</div>\n </div>\n <p class=\"text-gray-600 sm:w-2/3 lg:w-3/4 p-4\">\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata\n sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et\n ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n </p>\n </div>\n </div>\n</div>\n```\n\n```text\nflex items-center justify-center\n```\n\n```text\nblock\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":86,"estimatedTokens":890}}497{"id":"stack-74445383","source":"stackoverflow","questionId":74445383,"title":"Applying an effect to multiple pseudo classes at once in tailwind","tags":["css","tailwind-css","tailwind-ui"],"text":"Title: Applying an effect to multiple pseudo classes at once in tailwind\nTags: css, tailwind-css, tailwind-ui\nSource: Stack Overflow\n\nQuestion:\nI am looking for a good shorthand to apply the same effect to multiple pseudo classes in tailwind.\n\nFor example, I may want to apply a blue background to both :hover and :focus states on a div.\n\nCurrently I'd have to write the following:\n\n```\nText\n```\n\nOR, i could use apply to build out a custom class like this:\n\n```\n.hover-focus-bg-blue {\n @apply hover:bg-blue focus:bg-blue\n}\n```\n\nBut neither of these are great options when i have to apply complex states (in my current project I need to cover 11 states on one element (rest/hover/active/focus/focus-visible/focus-visible && hover etc).\n\nThe apply method only saves code if there are multiple uses of it.\n\nWhat I would like to see is something like:\n\n```\nText\n```\n\nDoes anyone know of some syntax like that? Can't find it anywhere.\n\n========================================\n\nTop Answer:\n**Edit: These functions are useless, because your site will be up before these functions even run. Leaving them here in case may be you can use it if you don't use vite.**\n\nI recently provided an answer in another question for grouping classes here but your question is a bit different so here's an improved version to the previous function:\n\n```\nconst pseudoJoin = (selectors, str) => {\n let result = \"\";\n selectors.forEach(selector=> result+=selector+\":\"+str.split(\" \").join(\" \"+selector+\":\")+\" \")\n return result;\n}\n```\n\nNow you can call it anywhere like:\n\n```\nHello World!\n```\n\nOr when you are using `classnames` framework:\n\n```\nHello World!\n```\n\nFor making it shorter even further, you can replace `pseudoJoin` with a shorter name because I couldn't think of a better name.\n\n========================================\n\nCode:\n```text\n<div className=\"hover:bg-blue focus:bg-blue>Text<div>\n```\n\n```text\n.hover-focus-bg-blue {\n @apply hover:bg-blue focus:bg-blue\n}\n```\n\n```text\n<div className=\"[hover, focus]:bg-blue\">Text</div>\n```\n\n```text\nhover:(bg-red-500 border-2)\n```\n\n```text\nfocus:(font-bold,underline)\n```\n\n```text\nfocus:font-bold\n```\n\n```text\nfocus:font-bold\n```\n\n```text\nfocus:(font-bold,underline)\n```\n\n```text\nfocus:(font-bold,underline)\n```\n\n```text\nfocus:font-bold focus: underline\n```\n\n```js\nconst pseudoJoin = (selectors, str) => {\n let result = \"\";\n selectors.forEach(selector=> result+=selector+\":\"+str.split(\" \").join(\" \"+selector+\":\")+\" \")\n return result;\n}\n```\n\n```text\n<div className=`${pseudoJoin(['hover','focus'],\"classes you want on hover & focus\")} some more classes here ${pseudoJoin(['focus'],\"classes when focused\")}`>Hello World!</div>\n```\n\n```text\n<div className={ classnames(\n pseudoJoin(['hover','focused'], \"classes you want on hover & focused\"),\n \"Other classes here\",\n pseudoJoin(['focused'], \"classes when focused\")\n)}>Hello World!</div>\n```\n\n```text\nclassnames\n```\n\n```text\npseudoJoin\n```\n\n```js\nconst pseudoJoin = (str) => {\n let result= [];\n let storedvar;\n str=str.split(\" \");\n\n str.forEach(function(s,i){\n if((/\\:\\(/).test(s)) storedvar=i;\n if(!storedvar) result.push(s);\n if(s.endsWith(\")\")){\n result.push(str.slice(storedvar,i+1).join(\" \"))\n storedvar=null;\n }\n })\n \n str=[]\n result.forEach(function(s,i){\n if((/\\w\\:/).test(s)){\n storedvar = s.split(/\\:(.*)/s);\n \n if(s.endsWith(\")\")){\n storedvar[1].slice(1,-1).split(\" \").forEach(function(t){\n storedvar[0].split(\"+\").forEach(function(x){str.push(x+\":\"+t)})\n })\n } else {\n storedvar[0].split(\"+\").forEach(function(x){\n str.push(x+\":\"+storedvar[1])\n })\n }\n } else {\n str.push(s)\n }\n })\n return str.join(\" \");\n}\n```\n\n```text\npseudoJoin(\"hover:text-black hover+focus+active:(bg-white margin-[3.2rem] underline) before+after:content-[Hello_\\+_I_am_groot] sm:hidden\"));\n```\n\n========================================\n\nComments:\n- I know it doesn't work with pseudo-selectors, and I'm pretty sure the same logic applies here. Read here: stackoverflow.com/questions/74166688/…\n- Thats great - thanks, stick that in as an answer to the questions and i'll mark it correct. Cheers!\n- I think the question is phrased slightly differently from what you answered. The person is asking how to add multiple pseudo selectors to a single style, not the other way around. Either way, I don't think the feature exists atm.","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":184,"estimatedTokens":1109}}498{"id":"stack-70583924","source":"stackoverflow","questionId":70583924,"title":"How to add dynamic background in NextJS with Tailwind?","tags":["javascript","css","next.js","tailwind-css"],"text":"Title: How to add dynamic background in NextJS with Tailwind?\nTags: javascript, css, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have an poster image, that I will use it to make it as a background image. I fetch it from MovieDb. I put it inside **className** like so **className={`bg-[url('${path}')] h-screen bg-cover bg-center text-white border-b-8 border-b-solid border-b-slate-400`}**.But it throw error\n\n```\n./styles/globals.css:5:0\nModule not found: Can't resolve './${path}'\n\nImport trace for requested module:\n./styles/globals.css\n./pages/_app.js\n\nhttps://nextjs.org/docs/messages/module-not-found\n```\n\nI want to add my **browse.tsx** file also\n\n```\nimport { GetStaticProps } from \"next\";\nimport React from \"react\";\nimport { getData } from \"./api/randomMovie\";\nimport { getServerSideProps } from \"./gr-en\";\n\nexport default function Browse({ movies }) {\n console.log(movies);\n const { poster_path } = movies;\n const path =\n \"https://www.themoviedb.org/t/p/w1280_and_h720_multi_faces/rYFAvSPlQUCebayLcxyK79yvtvV.jpg\";\n console.log(path);\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n- Home\n \n- TV Shows\n \n- Movies\n \n- New & Popular\n \n- My List\n \n \n \n \n- Search\n \n- Kids\n \n- Bell\n \n- User\n \n- My List\n \n \n \n );\n}\n\nexport const getStaticProps: GetStaticProps = async (context) => {\n const movies = await getData();\n\n console.log(movies);\n return {\n props: { movies },\n };\n};\n```\n\nSo what is the way to use dynamic path inside className with template literals?\n\n========================================\n\nCode:\n```js\n./styles/globals.css:5:0\nModule not found: Can't resolve './${path}'\n\nImport trace for requested module:\n./styles/globals.css\n./pages/_app.js\n\nhttps://nextjs.org/docs/messages/module-not-found\n```\n\n```js\nimport { GetStaticProps } from \"next\";\nimport React from \"react\";\nimport { getData } from \"./api/randomMovie\";\nimport { getServerSideProps } from \"./gr-en\";\n\nexport default function Browse({ movies }) {\n console.log(movies);\n const { poster_path } = movies;\n const path =\n \"https://www.themoviedb.org/t/p/w1280_and_h720_multi_faces/rYFAvSPlQUCebayLcxyK79yvtvV.jpg\";\n console.log(path);\n return (\n <div\n className={`bg-[url('${path}')] h-screen bg-cover bg-center text-white border-b-8 border-b-solid border-b-slate-400`}\n >\n <nav className=\"grid grid-cols-2 py-2 text-white bg-black/60\">\n <div className=\"flex col-span-full ml-10\">\n <div className=\"text-white mt-2 \">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"\"\n fill=\"none\"\n viewBox=\"0 0 300 81.387\"\n width=\"10vw\"\n height=\"8vh\"\n >\n <g fill=\"#e50914\">\n <path d=\"M256.09 76.212c4.178.405 8.354.84 12.52 1.29l9.198-22.712 8.743 24.807c4.486.562 8.97 1.152 13.44 1.768l-15.328-43.501L299.996 0H287.01l-.135.186-8.283 20.455L271.32.003h-12.822l13.237 37.565-15.644 38.644zM246.393 75.322V0h-12.817v74.265c4.275.33 8.552.684 12.817 1.056M150.113 71.11c3.46 0 6.916.026 10.366.054V43.492h15.397V31.708H160.48v-19.91h17.733V0h-30.6v71.12c.831 0 1.666-.013 2.5-.01M110.319 71.83c4.27-.152 8.544-.28 12.824-.384V11.8h11.98V.003H98.339V11.8h11.982v60.03h-.002zM12.295 79.772V34.897L27.471 77.96c4.667-.524 9.341-1.017 14.028-1.483V.001H29.201v46.483L12.825.001H0v81.384h.077c4.063-.562 8.14-1.096 12.218-1.613M85.98 11.797V.001H55.377V75.202a1100.584 1100.584 0 0 1 30.578-2.211V61.184c-5.916.344-11.82.74-17.71 1.181V43.497h15.397V31.706H68.245V11.797H85.98zM203.614 60.62V-.003h-12.873v71.876c10.24.376 20.44.9 30.606 1.56V61.619c-5.9-.381-11.81-.712-17.733-1\" />\n </g>\n </svg>\n </div>\n <ul className=\"flex ml-10 mt-4\">\n <li className=\"mx-2\">Home</li>\n <li className=\"mx-2\">TV Shows</li>\n <li className=\"mx-2\">Movies</li>\n <li className=\"mx-2\">New & Popular</li>\n <li className=\"mx-2\">My List</li>\n </ul>\n </div>\n <ul className=\"flex ml-10 pt-3 col-end-6 mr-10\">\n <li className=\"mx-2\">Search</li>\n <li className=\"mx-2\">Kids</li>\n <li className=\"mx-2\">Bell</li>\n <li className=\"mx-2\">User</li>\n <li className=\"mx-2\">My List</li>\n </ul>\n </nav>\n </div>\n );\n}\n\nexport const getStaticProps: GetStaticProps = async (context) => {\n const movies = await getData();\n\n console.log(movies);\n return {\n props: { movies },\n };\n};\n```\n\n```text\nbg-[url('${path}')] h-screen bg-cover bg-center text-white border-b-8 border-b-solid border-b-slate-400\n```\n\n```js\n<div styles={{backgroundImage:`url(${path})`}} classNames=\"....\">\n```\n\n```text\nbackground-image\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":172,"estimatedTokens":1172}}499{"id":"stack-61914275","source":"stackoverflow","questionId":61914275,"title":"a div sticky position not work tailwindcss","tags":["html","css","tailwind-css"],"text":"Title: a div sticky position not work tailwindcss\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI working with Tailwind CSS. I have two sticky positions one sticky header another sticky sidebar.\nmy sticky header works fine.:\n\n```\n\n \n \n \n \n \n \n **\n \n Logo\n \n \n \n ** \n\n \n \n \n \n \n```\n\n(in the above code hidden class for a tested second sticky position alone) but the second sticky position not work! Continuing the above code\n\n```\n\n \n \n \n \n \n\n \n \n \n\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo similique adipisci quam pariatur\n explicabo, assumenda voluptatem saepe, accusamus nostrum optio, rem impedit aliquid.\n Obcaecati quidem, aut inventore quae cupiditate ex?\n\n \n ** Login\n \n ** Register\n \n\n \n\n \n\n \n \n ...\n```\n\nsticky sidebar not working even header is hide and when remove `overflow-y-scroll lg:overflow-y-hidden` classes. and i don't know why \n\nand live page: https://codepen.io/djary/pen/QWjYOGX\n\nregister and login items (container must be sticky position)\n\n========================================\n\nCode:\n```text\n<body>\n <!-- haed -->\n <header class=\"sticky z-50 top-0 hidden\">\n <!-- searchbar -->\n <div class=\"grid grid-cols-12 p-1 sm:py-3 md:px-16 md:py-12 xl:px-32 xl:pt-24 bg-gray-100\">\n <div class=\"col-span-12 mb-2 lg:col-span-3 \">\n <span id=\"btnMenu\" onclick=\"toggleButton(); return false\">\n <i class=\"fal fa-2x fa-bars hover:bg-white\"></i>\n </span>\n <span class=\"mx-2 float-left lg:float-none lg:mx-6\">Logo</span>\n </div>\n <div class=\"col-span-12 lg:col-span-9\">\n <span class=\"w-full h-10 bg-gray-200 cursor-pointer border border-gray-300 text-sm rounded-full flex\">\n <input type=\"search\" name=\"serch\" placeholder=\"Search...\"\n class=\"flex-grow px-4 rounded-l-full rounded-r-full text-sm focus:outline-none\"> <i\n class=\"fas fa-search m-3 mr-5 text-lg text-gray-700 w-4 h-4\"> </i> </span>\n\n </div>\n </div>\n <!-- end searchbar -->\n </header>\n <!-- end head -->\n```\n\n```text\n<div class=\"relative h-auto w-auto\">\n\n <!-- sidebar and mainpage -->\n <div class=\"grid grid-cols-12\">\n <!-- sidebar -->\n <div id=\"backgroundmenu\"\n class=\"hidden z-30 absolute top-0 right-0 h-full w-full bg-black opacity-25 top-0 lg:hidden\"></div>\n <!-- background mobile shadow -->\n\n <div id=\"rightSidebar\"\n class=\"hidden z-30 absolute right-0 top-0 h-full w-full lg:static lg:block lg:right-auto lg:top-auto col-span-12 sm:col-span-12 md:col-span-4 lg:col-span-3 xl:col-span-2\">\n <!-- sidebar items -->\n <div class=\"sticky top-0 bg-gray-100 font-light h-full w-1/3 lg:w-auto overflow-y-scroll lg:overflow-y-hidden\">\n\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo similique adipisci quam pariatur\n explicabo, assumenda voluptatem saepe, accusamus nostrum optio, rem impedit aliquid.\n Obcaecati quidem, aut inventore quae cupiditate ex?</p>\n <a href=\"#\" class=\"p-5 pr-10 block hover:bg-gray-200 hover:shadow-xs hover:rounded-full\">\n <i class=\"fal fa-sign-in\"></i> Login</a>\n <a href=\"#\" class=\"p-5 pr-10 block hover:bg-gray-200 hover:shadow-xs hover:rounded-full\">\n <i class=\"fal fa-user-plus\"></i> Register</a>\n </div>\n\n <!-- end sidebar items -->\n\n </div>\n\n <!-- end sidebar -->\n <!-- main --> \n ...\n```\n\n```text\noverflow-y-scroll lg:overflow-y-hidden\n```\n\n```text\nh-full\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":138,"estimatedTokens":958}}500{"id":"stack-67853350","source":"stackoverflow","questionId":67853350,"title":"What does it mean by 'Requires js' when using TailwindCSS?","tags":["vue.js","vue-component","tailwind-css","tailwind-in-js"],"text":"Title: What does it mean by 'Requires js' when using TailwindCSS?\nTags: vue.js, vue-component, tailwind-css, tailwind-in-js\nSource: Stack Overflow\n\nQuestion:\nI am completely new to Vue and Tailwind. I was just looking at https://tailwindui.com/components/marketing/elements/headers and saw the `Requires JS` tag. When I copy-paste the code to my project, it gives a blank page. Where do I configure this part to include the JS?\n\n========================================\n\nCode:\n```text\nRequires JS\n```\n\n========================================\n\nComments:\n- I want to use tailwind ready components with simple HTML , where can I get JS file ? I am using components from here \"tailwindui.com/components/marketing/elements/headers\". but it wants JS , where to find it ?\n- @SwapnilKotkar - I'm trying to use them with Ruby on Rails 7, but lordy the importmaps/JS world is mind-boggling to me. All I want is a dropdown! Why is this so hard?\n- I have the same issue, did you find it?\n- Same here, where can I find JS file?\n- There is no way; you need to write a custom JS handle or use some lib","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":22,"estimatedTokens":272}}501{"id":"stack-67212508","source":"stackoverflow","questionId":67212508,"title":"How to close headlessui-vue Popover from code","tags":["vuejs3","tailwind-css"],"text":"Title: How to close headlessui-vue Popover from code\nTags: vuejs3, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a vue component that shows a popover with some content using the headlessui for vue and I want to close it when I click on the content. I have read the headlessui/vue docs for manually handling the opening and closing of a Popover which states:\n\nIf you'd rather handle this yourself (perhaps because you need to add an extra wrapper element for one reason or another), you can pass a static prop to the PopoverPanel to tell it to always render, and then use the open slot prop to control when the panel is shown/hidden yourself.\n\nI have:\n\n```\n\n \n \n \n \n \n \n\n```\n\nand it works so far but I want to close the Popover when I click the some content inside it, essentially I want to know how I can access that \"open\" in my script. I'm quite new to vue so maybe I'm missing something simple.\n\n========================================\n\nTop Answer:\nHere is the code that I'm using in Vue3.\nCan use a `close` slot to make a close button inside content.\n\n```\n\n import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\n\n \n Open/Close out of Content\n \n Close Button in Content\n \n \n\n```\n\n========================================\n\nCode:\n```text\n<Popover v-slot=\"{ open }\">\n <PopoverButton>\n </PopoverButton>\n <div v-if=\"open\">\n <PopoverPanel static>\n </PopoverPanel>\n </div>\n</Popover>\n```\n\n```js\nconst buttonRef = useRef();\n\n<Popover>\n <Popover.Button ref={buttonRef}>Click me</Popover.Button>\n <Popover.Panel>\n <button onClick={() => buttonRef.current?.click()}>Content</button>\n </Popover.Panel>\n</Popover>\n```\n\n```text\n<script setup>\n import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'\n</script>\n<template>\n <Popover>\n <PopoverButton>Open/Close out of Content</PopoverButton>\n <PopoverPanel v-slot=\"{ close }\">\n <button @click=\"close\">Close Button in Content</button>\n </PopoverPanel>\n </Popover>\n</template>\n```\n\n```text\nclose\n```\n\n========================================\n\nComments:\n- See discussion here: github.com/tailwindlabs/headlessui/issues/427 Even though you are already participating there, this may help other people.\n- hey I forgot to come back and thank you for this answer. It was helpful for me\n- Please don't do this. Look at the other answer (call `close` fn).","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":92,"estimatedTokens":593}}502{"id":"stack-70922810","source":"stackoverflow","questionId":70922810,"title":"The \"content\" options in your Tailwind CSS configration is missing or empty","tags":["css","tailwind-css","tailwind-css-3"],"text":"Title: The \"content\" options in your Tailwind CSS configration is missing or empty\nTags: css, tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nThis is my first time installing and running Tailwind CSS. I the instructions and did everything accordingly but then it started showing some warnings like below:\n\nwarn - The `content` options in your Tailwind CSS configration is missing or empty.\n\nwarn - Configure your content sources or your generated CSS will be missing style.\n\nwarn - https://v3.tailwindcss.com/docs/content-configuration\n\nhttps://i.sstatic.net/8uYDd.png\n\nCan you tell me why I am getting these warnings and anyway for me to fix them? As I am worried that my generated CSS will be missing styles So help is needed to fix it.\n\nAlso, can I keep the Tailwind CSS in watch mode?\n\n========================================\n\nTop Answer:\nThis warning occurred because you did not use any of the tailwind classes, causing tailwind to suspect that the project config was not implemented correctly.\n\nhttps://tailwindcss.com/docs/installation\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\ntailwind.config.js\n```\n\n```text\njs\n```\n\n```text\nts\n```\n\n```text\nnpm install -D tailwindcss postcss autoprefixer\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n========================================\n\nComments:\n- Just a quick note for newcomers: as of January 2025, Tailwind CSS v4 has removed the JS-based configuration by default. So the mentioned error message only applies up to v3. While v4 still offers a legacy JS-based configuration option, the `content` property has been completely removed and replaced by automatic source detection and the manual `@source` CSS directive.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review","metadata":{"transformedAt":"2026-08-18T18:33:42.924Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":69,"estimatedTokens":585}}503{"id":"stack-70980379","source":"stackoverflow","questionId":70980379,"title":"SvelteKit(ViteJS) + TailwindCSS not hot reloading components","tags":["tailwind-css","svelte","vite","sveltekit"],"text":"Title: SvelteKit(ViteJS) + TailwindCSS not hot reloading components\nTags: tailwind-css, svelte, vite, sveltekit\nSource: Stack Overflow\n\nQuestion:\nI'm trying to code an app using TailwindCSS and SvelteKit, which uses ViteJS under the hood, and while coding I realized that my *Header* component that is inside `./src/components/common/Header.svelte` was not **hot reloading** on changes. No matter how big or small the change to the component, Svelte would not display them until I terminated script in the console and re-ran `npm run dev`.\n\nThe normal behaviour would be that the whole page updated **WITH** changes to the components other than pages.\n\n*Note that adding and removing changes to any routes the changes are instantly visible but the components stay the same.*\n\nThis issue got quite annoying after some time and I tried finding the fix in TailwindCSS and in the `svelte.config.js` (Not a .cjs file in Svelte-Kit) file.\n\nAfter searching for a ton of answers I could not find anything that worked.\n\nThis behaviour is quite weird since in the other projects that I work on that use this same architecture of TailwindCSS and Svelte-kit the HMR works like a charm.\n\nHere is the code for my `Header.svelte` file and the `__layout.svelte`\n\n***Header.svelte***\n\n```\n\n \n \n \n \n \n- Home\n \n- About\n \n- Contact\n \n \n- Random Change\n \n \n\n```\n\n**__layout.svelte**\n\n```\n\n import '../css/tailwind.css';\n import Header from '../components/common/Header.svelte';\n\n```\n\nalso my config files:\n\n***tailwind.config.cjs***\n\n```\nmodule.exports = {\n content: ['./src/**/*.svelte', './src/app.html'],\n plugins: []\n};\n```\n\n***svelte.config.js***\n\n```\nimport preprocess from 'svelte-preprocess';\nimport path from 'path';\n\n// @type {import('@sveltejs/kit').Config\nconst config = {\n // Consult https://github.com/sveltejs/svelte-preprocess\n // for more information about preprocessors\n preprocess: preprocess(),\n\n kit: {\n vite: {\n resolve: {\n alias: {\n '@components': path.resolve('./src/components'),\n '@routes': path.resolve('./src/routes'),\n '@utils': path.resolve('./src/utils'),\n '@data': path.resolve('./src/data')\n }\n }\n }\n }\n};\n\nexport default config;\n```\n\n========================================\n\nCode:\n```html\n<script>\n</script>\n\n<header>\n <!-- TEST HEADER -->\n <nav>\n <ul class=\"flex gap-5 bg-red-500\">\n <!--These classes are tests and won't change the appearance of the Header unless I restart the script-->\n <li><a href=\"/\">Home</a></li>\n <li><a href=\"/about\">About</a></li>\n <li><a href=\"/contact\">Contact</a></li>\n <!--Other random change that won't update-->\n <li>Random Change</li>\n </ul>\n </nav>\n</header>\n```\n\n```html\n<script>\n import '../css/tailwind.css';\n import Header from '../components/common/Header.svelte';\n</script>\n\n<Header />\n<slot />\n```\n\n```js\nmodule.exports = {\n content: ['./src/**/*.svelte', './src/app.html'],\n plugins: []\n};\n```\n\n```js\nimport preprocess from 'svelte-preprocess';\nimport path from 'path';\n\n\n// @type {import('@sveltejs/kit').Config\nconst config = {\n // Consult https://github.com/sveltejs/svelte-preprocess\n // for more information about preprocessors\n preprocess: preprocess(),\n\n kit: {\n vite: {\n resolve: {\n alias: {\n '@components': path.resolve('./src/components'),\n '@routes': path.resolve('./src/routes'),\n '@utils': path.resolve('./src/utils'),\n '@data': path.resolve('./src/data')\n }\n }\n }\n }\n};\n\nexport default config;\n```\n\n```text\n./src/components/common/Header.svelte\n```\n\n```text\nnpm run dev\n```\n\n```text\nsvelte.config.js\n```\n\n```text\nHeader.svelte\n```\n\n```text\n__layout.svelte\n```\n\n========================================\n\nComments:\n- I know this is unhelpful, but I put all this code into a SvelteKit project with Tailwind configured and HMR worked fine in `Header.svelte`. Perhaps you could isolate the offending code by starting with a fresh SvelteKit project and seeing if HMR works, then install Tailwind, then make the changes in `svelte.config.js`—something is not right but I don't think it is included in what you posted here.\n- Yeah seems to work. That's odd. I'll have to take a look at my dependencies.\n- I have the same problem. I work with Svelte (not SvelteKit), Tailwind and Vite. Right now I force a restart with \"vite-plugin-restart\"\n- Do you have any updates on that problem? I was not able to solve this. Somewhere else here on Stackoverflow I saw that movin the svelte plugin in the vite config to end helps and it does, but not fully.\n- @Woww Unfortunately I still haven't found the cause of this problem. I solved it by simply creating a new SvelteKit skeleton project and starting from there.\n- I found it happens when the component is outside the routes folder. Probably Vite is not tracking folders outside routes folder.\n- This issue is still valid with the current version of SvelteKit. All of my components are inside the routes folder, none of my import paths use uppercase letters, and I'm not even using a layout file yet.\n- Amazingly, I can also reproduce this with `SvelteKit v1.0.0-next.350`. If the case is not correct in the import path, the module will load and display but the hot reloading does not work. Good catch!","metadata":{"transformedAt":"2026-08-18T18:33:42.925Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":188,"estimatedTokens":1341}}504{"id":"stack-74844176","source":"stackoverflow","questionId":74844176,"title":"Spacing is not working for me in Tailwind css","tags":["css","tailwind-css"],"text":"Title: Spacing is not working for me in Tailwind css\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI just started learning Tailwind CSS, all day long I'm trying to understand why space-x-n not working for me\nI searched everywhere on Google but no luck\n\nthis is my code:\n\n```\n\n \n \n \n \n \n \n \n \n \n Features\n Pricing\n \n \n secondary nav\n \n \n\n```\n\nthis is my app.css\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nconfig file\n\n```\nconst defaultTheme = require('tailwindcss/defaultTheme');\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',\n './storage/framework/views/*.php',\n './resources/views/**/*.blade.php',\n './resources/js/Pages/*.vue',\n ],\n theme: {\n extend: {\n fontFamily: {\n sans: ['Nunito', ...defaultTheme.fontFamily.sans],\n },\n },\n screens:{\n sm: '480px',\n md: '768px',\n lg: '976px',\n xl: '1440px'\n }\n },\n\n plugins: [require('@tailwindcss/forms')],\n};\n```\n\n========================================\n\nTop Answer:\nFor the ones who still have this issue, As @andreas mentioned, just past your code here, and check if it's working, if yes, probably you have a compilation problem, other classes may still work since they are already available in the output file.\n\npossible solutions :\n\n- Make sure your dev server is working and -watching.\n\n- Clear server cache.\n\n- Verify the config file ( content prop )\n\n========================================\n\nCode:\n```text\n<nav class=\"bg-gray-800\">\n <div class=\"max-w-7xl mx-auto\">\n <div class=\"flex justify-between\">\n <div class=\"flex space-x-4\">\n <div>\n <a href=\"#\">\n <img src=\"/src/logo.png\" style=\"height:40px;\" alt=\"logo\">\n </a>\n </div>\n <div>\n <a href=\"\">Features</a>\n <a href=\"\">Pricing</a>\n </div>\n </div>\n <div>secondary nav</div>\n </div>\n </div>\n</nav>\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nconst defaultTheme = require('tailwindcss/defaultTheme');\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',\n './storage/framework/views/*.php',\n './resources/views/**/*.blade.php',\n './resources/js/Pages/*.vue',\n ],\n theme: {\n extend: {\n fontFamily: {\n sans: ['Nunito', ...defaultTheme.fontFamily.sans],\n },\n },\n screens:{\n sm: '480px',\n md: '768px',\n lg: '976px',\n xl: '1440px'\n }\n },\n\n plugins: [require('@tailwindcss/forms')],\n};\n```\n\n```text\nspace-x-4\n```\n\n```text\ngap-x-4\n```\n\n```text\nspace-x-4\n```\n\n```text\nmr-4\n```\n\n```text\nimport type { Config } from \"tailwindcss\";\n\nexport default {\n content: [\n \"./src/pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/containers/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n extend: {\n colors: {\n background: \"var(--background)\",\n foreground: \"var(--foreground)\",\n },\n },\n },\n plugins: [],\n} satisfies Config;\n```\n\n```text\ntailwind.config.ts\n```\n\n========================================\n\nComments:\n- The spacing is working fine. Between which elements do you want the space exactly to be?\n- @nourhomsi between the logo and the links\n- not working since im using flex\n- gap applies to both, flexbox and grid. I just realized, your example code works for me though... both with gap and space.\n- very weired it doesnt works for me\n- You can always test your markup here: play.tailwindcss.com Did you do any other customizations to the tailwind config?\n- please check my question again, I added the config file\n- Hm, nothing unusual for me. Have you checked your browsers web inspector? Is the `space-x-4` class there? Is the property available in the elements css property list?\n- doesnt exist when i inspect\n- Well then there is something wrong in your compilation. Maybe a cached version is served. Try to rebuild your project or restart your dev server.\n- very strange I also restarted the apache and I did npm install && npm run same problem also i checked on a different browser + incognito always same issue\n- I found the issue was in my layout.vue I dont know why but now I moved the navbar to home.vue inside and it works\n- Where does layout.vue live? Is it part of the configured content files?\n- - JS - Layouts / AppLayout.vue and another folder - Pages / Home.vue inside home I have and of course in my AppLayout.vue I have\n- Looks like you need to add `'./resources/js/Layouts/*.vue'` to your config file. Your layout.vue was not checked by tailwind for classes. I suspect that the other tailwind classes that worked in this file were already part of other files tailwind did track. Updated my answer accordingly.\n- You're very welcome. I would appreciate an accept / upvote of my answer :)","metadata":{"transformedAt":"2026-08-18T18:33:42.925Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":203,"estimatedTokens":1297}}505{"id":"stack-73666015","source":"stackoverflow","questionId":73666015,"title":"Nested Brackets and Ampersand usage in Tailwind UI examples","tags":["css","sass","tailwind-css","postcss"],"text":"Title: Nested Brackets and Ampersand usage in Tailwind UI examples\nTags: css, sass, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nCan somebody help translate bracket usage in Tailwind.css?\n\nIn Example 1: what does [&_*] mean?\n\nIn Example 2: what does the nested bracket combined with _& mean?\n\nExample 1:\n\n```\ndocument.documentElement.classList.add('[&_*]:!transition-none')\n```\n\nExample 2:\n\n```\n\n```\n\nThe closest I can get is the `[]` refers to attribute selection (in general) for .css and the Ampersand in is used by PostCSS processing in \"normal\" SASS nesting rules (as defined by tailwind's default nesting declaration support provided by postcss-nested).\n\n========================================\n\nCode:\n```text\ndocument.documentElement.classList.add('[&_*]:!transition-none')\n```\n\n```text\n<LightIcon className=\"hidden h-4 w-4 fill-slate-400 [:not(.dark)[data-theme=system]_&]:block\" />\n```\n\n```text\n[]\n```\n\n```html\n<div class=\"foo\">\n <div class=\"[.foo_&]:text-white\"></div>\n</div>\n```\n\n```html\n<div class=\"foo\">\n <div class=\"bar\"></div>\n</div>\n<style>\n/**\n * .foo .bar\n * ↓\n * .foo &\n * ↓\n * .foo_&\n */\n.foo .bar {\n color: white;\n}\n</style>\n```\n\n```html\n<div class=\"foo\"></div><div class=\"[.foo+&]:text-white\"></div>\n```\n\n```html\n<div class=\"foo\"></div><div class=\"bar\"></div>\n<style>\n/**\n * .foo + .bar\n * ↓\n * .foo + &\n * ↓\n * .foo+&\n */\n.foo + .bar {\n color: white;\n}\n</style>\n```\n\n```html\n<div data-foo class=\"[&[data-foo]]:text-white\"></div>\n```\n\n```html\n<div data-foo class=\"bar\"></div>\n<style>\n/**\n * .bar[data-foo]\n * ↓\n * &[data-foo]\n */\n.bar[data-foo] {\n color: white;\n}\n</style>\n```\n\n```text\n&\n```\n\n```text\n.bar\n```\n\n```text\n&\n```\n\n```text\n.bar\n```\n\n```text\n+\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.925Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":121,"estimatedTokens":428}}506{"id":"stack-70954332","source":"stackoverflow","questionId":70954332,"title":"Using `@tailwindcss/typography` prose on dark background makes text look too dark","tags":["css","tailwind-css","tailwind-css-3"],"text":"Title: Using `@tailwindcss/typography` prose on dark background makes text look too dark\nTags: css, tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\n**TL;DR**: How do I get `@tailwindcss/typography` prose to work on a dark background?\n\nI have a Site running Sage 10 with WordPress, where I use TailwindCSS (v3.0.18) for the base styling.\n\nThe page is not in dark mode, nor should it be. However, I have a Footer, that has a dark background, as is quite common with Websites.\nMy issue is that the `prose` class I add to it, will show the text (etc.) quite dark, not really readable. I want to have `prose` usable on dark backgrounds too. `prose-invert` doesn't seem to work. I am not sure if it only works with `dark:prose-invert`?\n\nI could manually change all the elements within the footer, but I would prefer if Tailwind had a way of handling this without manual labor.\n\nIn the image you can see the left part has `prose` and ends up dark. The right part does not and keeps looking as it should, but is missing the sizes and all the fancy stuff.\n\nhttps://i.sstatic.net/BRM3X.png\n\n**tailwind.config.js**\n\n```\n// Source - https://stackoverflow.com/q/70954332\n// Posted by Frizzant\n// Retrieved 2025-12-05, License - CC BY-SA 4.0\n\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n content: [\n // WP default php files\n './index.php',\n './functions.php',\n './author.php',\n './archive.php',\n './home.php',\n './front-page.php',\n './404.php',\n './search.php',\n './category.php',\n './page.php',\n './single.php',\n './taxonomy.php',\n // END WP default php files\n './resources/views/**/*.php',\n './resources/scripts/**/*.js',\n ],\n theme: {\n extend: {\n colors: {\n primary: colors.indigo,\n secondary: colors.yellow,\n },\n },\n },\n plugins: [\n require('@tailwindcss/typography'),\n ],\n}\n```\n\nI compile everything with composer into one CSS file, so Tailwind JIT is in use and scans all the correct files as you can see.\n\nFollowing is a very minimal example of the compiled HTML (removed a lot of stuff, just for demo purposes):\n\n- TailwindCSS v3 Playground\n\n```\n\n \n \n \n \n \n\n### Text\n\n \n \n \n \n\n```\n\n========================================\n\nTop Answer:\nI faced a similar issue and resolved it by adding two classes as outlined below:\n\n```\nclass=\"prose dark:prose-invert\"\n```\n\nThe `prose` class ensures proper functionality in the browser's day mode. Meanwhile, when the user switches to or is already in dark mode, the `dark:prose-invert` class comes into play.\n\nWhen you use the `dark:prose-invert` class, it takes care of how the text looks on dark backgrounds. You don't have to manually set it up, making things easier. This simple adjustment ensures that the text looks better and more consistent, providing a genuine improvement in how things appear visually.\n\n========================================\n\nCode:\n```js\n// Source - https://stackoverflow.com/q/70954332\n// Posted by Frizzant\n// Retrieved 2025-12-05, License - CC BY-SA 4.0\n\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n content: [\n // WP default php files\n './index.php',\n './functions.php',\n './author.php',\n './archive.php',\n './home.php',\n './front-page.php',\n './404.php',\n './search.php',\n './category.php',\n './page.php',\n './single.php',\n './taxonomy.php',\n // END WP default php files\n './resources/views/**/*.php',\n './resources/scripts/**/*.js',\n ],\n theme: {\n extend: {\n colors: {\n primary: colors.indigo,\n secondary: colors.yellow,\n },\n },\n },\n plugins: [\n require('@tailwindcss/typography'),\n ],\n}\n```\n\n```html\n<footer class=\"footer bg-stone-800 p-8\">\n <div class=\"container mx-auto\">\n <div class=\"sm:flex gap-x-3 mb-4\"> \n <div class=\"prose-invert footer__item sm:w-1/4 h-auto\">\n <section class=\"widget block-15 widget_block\">\n <h2>Text</h2>\n </section> \n </div>\n </div>\n </div>\n</footer>\n```\n\n```text\n@tailwindcss/typography\n```\n\n```text\nprose\n```\n\n```text\nprose\n```\n\n```text\nprose-invert\n```\n\n```text\ndark:prose-invert\n```\n\n```text\nprose\n```\n\n```text\nprose-invert\n```\n\n```text\nprose\n```\n\n```text\nprose prose-invert\n```\n\n```text\nclass=\"prose dark:prose-invert\"\n```\n\n```text\nprose\n```\n\n```text\ndark:prose-invert\n```\n\n```text\ndark:prose-invert\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.925Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":204,"estimatedTokens":1080}}507{"id":"stack-79544983","source":"stackoverflow","questionId":79544983,"title":"Why is there excessive spacing between elements in ReactMarkdown rendering?","tags":["css","reactjs","next.js","tailwind-css","react-markdown"],"text":"Title: Why is there excessive spacing between elements in ReactMarkdown rendering?\nTags: css, reactjs, next.js, tailwind-css, react-markdown\nSource: Stack Overflow\n\nQuestion:\nI'm using **Next.js 15** with **Tailwind CSS V3** and the **react-markdown** package to render AI chat output inside a component.\n\nI've customized the markdown rendering to replace all ``, ``, `` elements with styled ``s using Tailwind classes to avoid default typography spacing issues.\n\nDespite this, there’s still **excessive vertical space** between elements — particularly under `h1`, `h2`, and `h3` replacements. I've tried removing all `margin-bottom` and adding `mb-0`, `mt-0`, etc., but spacing persists.\n\nHere’s what it looks like (I’ve added debug background colors and annotations):\n\nhttps://i.sstatic.net/z1VK4nJ5.png\n\n### What I’m using:\n\n- **Next.js** `15`\n\n- **React** `19`\n\n- **ReactMarkdown** `react-markdown@9`\n\n- **Tailwind CSS** `v3`\n**Plugins:**\n\n- `remark-gfm`\n\n- `rehype-highlight`\n\n### Expected result:\n\nMinimal vertical spacing between elements in the chat bubbles.\n\n### Actual result:\n\nHeadings and their following content have unwanted gaps that don’t collapse.\n\n### Code (ChatPage.tsx)\n\n```\n (\n \n ),\n h2: ({ node, ...props }) => (\n \n ),\n h3: ({ node, ...props }) => (\n \n ),\n p: ({ node, ...props }) => (\n \n ),\n ul: ({ node, ...props }) => (\n \n ),\n li: ({ node, ...props }) => (\n \n ),\n code: ({ node, ...props }) => (\n `),\n pre: ({ node, ...props }) => (\n \n )\n }}\n>\n {msg.text}\n\n```\n\n### Tried so far:\n\n- Replacing all headings with ` tags\n\n- Zeroing margins with `mb-0`, `mt-0`\n\n- Reducing adjacent spacing with `[+ *]` in Tailwind\n\n- Inspecting computed styles — no unexpected margin\n\n### Question:\n\nIs there something about `react-markdown`’s structure or the way it parses elements that still causes vertical gaps between custom heading components and their following siblings?\n\nDo I need to wrap children or flatten block structure?\n\nAny tips would be greatly appreciated.\n\n### Example of what is rendered in the DOM\n\n```\n\n \n `useMemo` and\n `useCallback` are both hooks provided by\n React to optimize performance by memoizing values or functions. Let's break down the differences\n and when to use each:\n \n\n useMemo\n \n **Purpose:** `useMemo` is\n used to memoize a computed value.\n \n\n **Syntax:**\n\n `const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);\n```\n\n **When to Use:**\n\n \n \n **Expensive Calculations:** Use\n useMemo` when you have a calculation\n that is computationally expensive and you want to avoid recalculating it on every render\n unless its dependencies change.\n \n \n **Derived State:** When deriving state from props or state that requires some\n computation.\n\n========================================\n\nTop Answer:\nI found a better solution. One that you can control.\n\nstyles/global.css\n\n```\n/* markdown parent div */\n.markdown-parent-element > * {\n display: block !important;\n margin-bottom: 20px !important; \n} \n\n/* for lists */\n.markdown-parent-element > ol > li {\n display: block !important;\n margin-bottom: 20px !important; \n}\n```\n\ncomponents/markdown-with-code.tsx\n\n```\n'use client'\n\nimport React, { useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport { Prism as SyntaxHighlighterBase } from 'react-syntax-highlighter'\nimport { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'\nimport { Button } from '@flavioespinoza/salsa-ui'\nimport { Check, Copy } from 'lucide-react'\n\ninterface MarkdownWithCodeProps {\n markdown: string\n}\n\nconst MarkdownWithCode: React.FC = ({ markdown }) => {\n const CodeBlock = ({ node, inline, className, children, ...props }: any): JSX.Element => {\n const match = /language-(\\w+)/.exec(className || '')\n const language = match ? match[1] : null\n const [copied, setCopied] = useState(false)\n\n const handleCopy = () => {\n navigator.clipboard.writeText(String(children)).then(() => {\n setCopied(true)\n setTimeout(() => setCopied(false), 4000)\n })\n }\n\n const SyntaxHighlighter = SyntaxHighlighterBase as unknown as React.ComponentType\n\n if (!inline && language) {\n return (\n \n \n {language}\n \n {copied ? (\n \n \n Copied\n \n ) : (\n \n \n Copy\n \n )}\n \n \n \n {String(children).replace(/\\n$/, '')}\n \n \n )\n }\n\n return (\n `{children}`\n )\n }\n\n return (\n \n \n {markdown}\n \n \n )\n}\n\nexport default MarkdownWithCode\n```\n\n========================================\n\nCode:\n```tsx\n<ReactMarkdown\n remarkPlugins={[remarkGfm]}\n rehypePlugins={[rehypeHighlight]}\n components={{\n h1: ({ node, ...props }) => (\n <div className=\"text-lg font-bold bg-pink-200 mt-2 mb-0\" {...props} />\n ),\n h2: ({ node, ...props }) => (\n <div className=\"text-base font-semibold bg-pink-200 mt-2 mb-0\" {...props} />\n ),\n h3: ({ node, ...props }) => (\n <div className=\"text-base font-medium bg-pink-200 mt-2 mb-0\" {...props} />\n ),\n p: ({ node, ...props }) => (\n <p className=\"mt-[2px] mb-[2px] bg-red-400\" {...props} />\n ),\n ul: ({ node, ...props }) => (\n <ul className=\"pl-5 my-[2px] list-disc bg-limegreen\" {...props} />\n ),\n li: ({ node, ...props }) => (\n <li className=\"my-[2px] bg-cornflowerblue\" {...props} />\n ),\n code: ({ node, ...props }) => (\n <code className=\"bg-black/5 px-1 rounded text-[13px]\" {...props} />\n ),\n pre: ({ node, ...props }) => (\n <pre className=\"bg-orange p-2 rounded my-2 overflow-x-auto\" {...props} />\n )\n }}\n>\n {msg.text}\n</ReactMarkdown>\n```\n\n```html\n<div class=\"markdown\">\n <p class=\"bg-red-400 mb-[2px] mt-[2px]\">\n <code class=\"rounded bg-black/5 px-1 text-[13px]\">useMemo</code> and\n <code class=\"rounded bg-black/5 px-1 text-[13px]\">useCallback</code> are both hooks provided by\n React to optimize performance by memoizing values or functions. Let's break down the differences\n and when to use each:\n </p>\n <div class=\"bg-pink-200 mb-0 mt-2 text-base font-medium\">useMemo</div>\n <p class=\"bg-red-400 mb-[2px] mt-[2px]\">\n <strong>Purpose:</strong> <code class=\"rounded bg-black/5 px-1 text-[13px]\">useMemo</code> is\n used to memoize a computed value.\n </p>\n <p class=\"bg-red-400 mb-[2px] mt-[2px]\"><strong>Syntax:</strong></p>\n <pre\n class=\"bg-orange my-2 overflow-x-auto rounded p-2\"\n ><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const</span> memoizedValue = <span class=\"hljs-title function_\">useMemo</span>(<span class=\"hljs-function\">() =></span> <span class=\"hljs-title function_\">computeExpensiveValue</span>(a, b), [a, b]);\n </code></pre>\n <p class=\"bg-red-400 mb-[2px] mt-[2px]\"><strong>When to Use:</strong></p>\n <ul class=\"bg-limegreen my-[2px] list-disc pl-5\">\n <li class=\"bg-cornflowerblue my-[2px]\">\n <strong>Expensive Calculations:</strong> Use\n <code class=\"rounded bg-black/5 px-1 text-[13px]\">useMemo</code> when you have a calculation\n that is computationally expensive and you want to avoid recalculating it on every render\n unless its dependencies change.\n </li>\n <li class=\"bg-cornflowerblue my-[2px]\">\n <strong>Derived State:</strong> When deriving state from props or state that requires some\n computation.\n </li>\n </ul>\n</div>\n```\n\n```text\n<h1>\n```\n\n```text\n<h2>\n```\n\n```text\n<h3>\n```\n\n```text\n<div>\n```\n\n```text\nh1\n```\n\n```text\nh2\n```\n\n```text\nh3\n```\n\n```text\nmargin-bottom\n```\n\n```text\nmb-0\n```\n\n```text\nmt-0\n```\n\n```text\n15\n```\n\n```text\n19\n```\n\n```text\nreact-markdown@9\n```\n\n```text\nv3\n```\n\n```text\nremark-gfm\n```\n\n```text\nrehype-highlight\n```\n\n```text\n<div>\n```\n\n```text\nmb-0\n```\n\n```text\nmt-0\n```\n\n```text\n[+ *]\n```\n\n```text\nreact-markdown\n```\n\n```text\nwhitespace: pre-wrap\n```\n\n```text\n/* markdown parent div */\n.markdown-parent-element > * {\n display: block !important;\n margin-bottom: 20px !important; \n} \n\n/* for lists */\n.markdown-parent-element > ol > li {\n display: block !important;\n margin-bottom: 20px !important; \n}\n```\n\n```text\n'use client'\n\nimport React, { useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport { Prism as SyntaxHighlighterBase } from 'react-syntax-highlighter'\nimport { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'\nimport { Button } from '@flavioespinoza/salsa-ui'\nimport { Check, Copy } from 'lucide-react'\n\ninterface MarkdownWithCodeProps {\n markdown: string\n}\n\nconst MarkdownWithCode: React.FC<MarkdownWithCodeProps> = ({ markdown }) => {\n const CodeBlock = ({ node, inline, className, children, ...props }: any): JSX.Element => {\n const match = /language-(\\w+)/.exec(className || '')\n const language = match ? match[1] : null\n const [copied, setCopied] = useState(false)\n\n const handleCopy = () => {\n navigator.clipboard.writeText(String(children)).then(() => {\n setCopied(true)\n setTimeout(() => setCopied(false), 4000)\n })\n }\n\n const SyntaxHighlighter = SyntaxHighlighterBase as unknown as React.ComponentType<any>\n\n if (!inline && language) {\n return (\n <div className=\"overflow-hidden rounded-md border border-zinc-200\">\n <div className=\"flex items-center justify-between bg-sage-600 px-3 font-mono text-[10px] text-white\">\n <span>{language}</span>\n <Button variant=\"static\" size=\"sm\" className=\"p-0\" onClick={handleCopy}>\n {copied ? (\n <div className=\"flex\">\n <Check className=\"h-3.5 w-3 text-white\" />\n <div className=\"ml-1 text-[10px] text-white\">Copied</div>\n </div>\n ) : (\n <div className=\"flex\">\n <Copy className=\"h-3.5 w-3 text-white\" />\n <div className=\"ml-1 text-[10px] text-white\">Copy</div>\n </div>\n )}\n </Button>\n </div>\n <SyntaxHighlighter\n style={vscDarkPlus}\n language={language}\n PreTag=\"div\"\n customStyle={{\n margin: 0,\n padding: '1rem',\n fontSize: '0.875rem'\n }}\n {...props}\n >\n <div id=\"parent\">{String(children).replace(/\\n$/, '')}</div>\n </SyntaxHighlighter>\n </div>\n )\n }\n\n return (\n <code className={className} {...props}>\n {children}\n </code>\n )\n }\n\n return (\n <div className=\"markdown-parent-element\">\n <ReactMarkdown\n components={{\n code: CodeBlock\n }}\n >\n {markdown}\n </ReactMarkdown>\n </div>\n )\n}\n\nexport default MarkdownWithCode\n```\n\n========================================\n\nComments:\n- Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet** using the `<>` icon. See **How to create a Minimal, Reproducible Example**\n- Have you looked at the actual, final, code generated to see where that space is coming from?\n- @AHaworth yes and I'm just as baffled. I can add it here. I posted it in my answer above.\n- @Flavio I'm having the same issue. Have you had any luck solving?\n- This helped me, I had an outer Div which I had something like this in {msg.body} the outerdiv was a ContainerRef which sort of looked like this but removing the white space prewrap fixed it! Thank you so much!","metadata":{"transformedAt":"2026-08-18T18:33:42.925Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":26,"totalLines":488,"estimatedTokens":2977}}508{"id":"stack-71587449","source":"stackoverflow","questionId":71587449,"title":"How to add custom font family in TailwindCSS?","tags":["tailwind-css","tailwind-css-3"],"text":"Title: How to add custom font family in TailwindCSS?\nTags: tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nHow to add Roboto font family in TailwindCSS and us it for label element?\n\n```\n\n```\n\n========================================\n\nTop Answer:\nThis has not much to do with Tailwind. Just import the font from Google fonts, and use it throughout your application. So for instance:\n\n```\n@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,600;1,400;1,600&display=swap');\n\nhtml, body, label {\n font-family: 'Roboto', sans-serif;\n}\n```\n\n========================================\n\nCode:\n```html\n<label class=\"font-roboto\"></label>\n```\n\n```text\nmodule.exports = {\n theme: {\n fontFamily: {\n 'sans': [your_main_font],\n 'roboto': ['Roboto', 'sans-serif'],\n }\n }\n}\n```\n\n```text\n@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,600;1,400;1,600&display=swap');\n\nhtml, body, label {\n font-family: 'Roboto', sans-serif;\n}\n```\n\n========================================\n\nComments:\n- Answer for TailwindCSS v4: stackoverflow.com/a/79842832/15167500\n- Thank you, how to use roboto regular? Now I just use `class=\"font-roboto\"`\n- Do you mean the font-weight? In that case you can just use `font-normal`, see here: tailwindcss.com/docs/font-weight\n- Thank you, how to use roboto regular? Now I just use class=\"font-roboto\"\n- yeah after the above configuration, you can call class font-roboto in your label tag","metadata":{"transformedAt":"2026-08-18T18:33:42.925Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":3,"totalLines":58,"estimatedTokens":371}}509{"id":"stack-73151325","source":"stackoverflow","questionId":73151325,"title":"Is there a way to add translate-z-[ ] utility class","tags":["tailwind-css"],"text":"Title: Is there a way to add translate-z-[ ] utility class\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI would like to add translate-z-[] utility class to my tailwindcss classes so I could use parallax scrolling effects with perspective and translateZ, is there a way to generate these classes (add something like --tw-translate-z variable at the end on tailwinds transform class)?\n\n========================================\n\nTop Answer:\nYou can add *tailwind-3dtransforms* plugin into your tailwindcss setup and start using 3d transforms. With this plugin, you can use classes such as `translate-z-10`, `translate-z-20` ...etc. Further, it also allows other transforms like rotate, scale, flip in all 3 axes.\n\nUsing this plugin you can add following if you want to translate 250px on Z axis,\n\n```\n\n```\n\nOr tailwind defaults for translate are also possible. For instance, you can do following,\n\n```\n\n```\n\nYou can check the documentation here and github repository here.\n\n- *I'm the author of tailwind-3dtransform-plugin.*\n\n========================================\n\nCode:\n```js\nconst plugin = require('tailwindcss/plugin');\n\nmodule.exports = {\n theme: {},\n plugins: [\n plugin(function({ matchUtilities, theme }) {\n matchUtilities(\n {\n 'translate-z': (value) => ({\n '--tw-translate-z': value,\n transform: ` translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))`,\n }), // this is actual CSS\n },\n { values: theme('translate'), supportsNegativeValues: true }\n )\n })\n ],\n}\n```\n\n```html\n<div class=\"transform translate-z-[250px]></div>\n```\n\n```html\n<div class=\"transform translate-z-20\"></div>\n```\n\n```text\ntranslate-z-10\n```\n\n```text\ntranslate-z-20\n```\n\n========================================\n\nComments:\n- Thank you very much, I've read the docs now and this will 100% do the job.\n- How to add negative values so `-translate-z-1` also works? _It works with abritrary values, like `translate-z-[-1px]`, but doesn't look as nice.\n- @oemera Good catch, thanks! Change default values form `{values: theme('translate')}` into `{values: theme('translate'), supportsNegativeValues: true}` - I've updated the answer","metadata":{"transformedAt":"2026-08-18T18:33:42.925Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":74,"estimatedTokens":586}}510{"id":"stack-61976785","source":"stackoverflow","questionId":61976785,"title":"How do you use custom fonts with TailwindCSS and NuxtJS?","tags":["css","vue.js","fonts","tailwind-css","nuxt.js"],"text":"Title: How do you use custom fonts with TailwindCSS and NuxtJS?\nTags: css, vue.js, fonts, tailwind-css, nuxt.js\nSource: Stack Overflow\n\nQuestion:\nSo I'm building a website with NuxtJS using Tailwind CSS for my styles. I'm using the @nuxtjs/tailwindcss module.\n\nThe issue is that my fonts don't seem to be loading on the browser. The correct `font-family` is still applied by the CSS as you can see in the devtools screenshot, but the browser still renders my text with Times New Roman.\n\n--Devtools Screenshot\n\nMy fonts files are .ttf files stored in a `/assets/fonts/` folder in my project's root directory.\n\nMy `tailwind.css` file looks like this \n\n```\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n\n@font-face {\n font-family: 'Montserrat';\n font-weight: 400;\n src: url('../fonts/Montserrat-Regular.ttf') format('ttf');\n}\n\n@font-face {\n font-family: 'Montserrat';\n font-weight: 700;\n src: url('../fonts/Montserrat-Bold.ttf') format('ttf');\n}\n\n@font-face {\n font-family: 'Montserrat';\n font-weight: 900;\n src: url('../fonts/Montserrat-Black.ttf') format('ttf');\n}\n```\n\nand my `tailwind.config.js` looks like this\n\n```\nmodule.exports = {\n theme: {\n fontFamily: {\n sans: ['Montserrat'],\n serif: ['Montserrat'],\n mono: ['Montserrat'],\n display: ['Montserrat'],\n body: ['Montserrat']\n },\n // Some more irrelevant theme customization\n },\n variants: {},\n plugins: []\n}\n```\n\nI wanted to completly override Tailwind's base fonts so I didn't use `extend` and I plan on cleaning this up and using an other font for some texts once I figure out how to properly do this.\n\nMy guts tell me that Tailwind is not the problem here since the Devtools actually show Montserrat as the computed font, and the webpack build does not throw any error.\n\nI've tried both answers featured in this related question, the accepted one actually being my implementation, but no good result so far.\n\nI'd be very grateful if somebody could help me !\n\nEDIT : I created a Github repo reproducing the issue, it can be found here and all steps to reproduce are in the README.MD\n\n========================================\n\nCode:\n```text\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n\n@font-face {\n font-family: 'Montserrat';\n font-weight: 400;\n src: url('../fonts/Montserrat-Regular.ttf') format('ttf');\n}\n\n@font-face {\n font-family: 'Montserrat';\n font-weight: 700;\n src: url('../fonts/Montserrat-Bold.ttf') format('ttf');\n}\n\n@font-face {\n font-family: 'Montserrat';\n font-weight: 900;\n src: url('../fonts/Montserrat-Black.ttf') format('ttf');\n}\n```\n\n```text\nmodule.exports = {\n theme: {\n fontFamily: {\n sans: ['Montserrat'],\n serif: ['Montserrat'],\n mono: ['Montserrat'],\n display: ['Montserrat'],\n body: ['Montserrat']\n },\n // Some more irrelevant theme customization\n },\n variants: {},\n plugins: []\n}\n```\n\n```text\nfont-family\n```\n\n```text\n/assets/fonts/\n```\n\n```text\ntailwind.css\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nextend\n```\n\n```css\nsrc: url('../fonts/Montserrat-Regular.ttf') format('ttf');\n```\n\n```css\nsrc: url('../fonts/Montserrat-Regular.ttf') format('truetype');\n```\n\n```css\nsrc: url('../fonts/Montserrat-Regular.ttf');\n```\n\n```css\nsrc:\n url('../fonts/Montserrat-Regular.ttf') format('truetype'),\n url('../fonts/Montserrat-Regular.woff2') format('woff2'),\n url('../fonts/Montserrat-Regular.woff') format('woff')\n```\n\n```css\nsrc:\n url('../fonts/Montserrat-Regular.woff2') format('woff2'),\n url('../fonts/Montserrat-Regular.woff') format('woff')\n```\n\n```text\n@font-face\n```\n\n```text\nsrc\n```\n\n```text\ncaniuse\n```\n\n========================================\n\nComments:\n- Is font in production directory? Is loaded by browser?\n- As explained in my post (maybe nor clearly enough, my bad then), my font files are located in `/assets/fonts` at the root of my project directory. I don't know how to check if the fonts are actually loaded by the browser, all I know is that my screenshot shows that the right font shows in the \"computed\" panel but the browser still renders using Times New Roman, which would lead me to believe that the font is actually not loaded.\n- 1. I believe you are talking about sources root, but I'm asking about files after build (dist directory) to check if webpack for some reason is ignoring them. 2. You can check if files are loaded in browser in Network tab in devtools. 3. Build app and check in css source if there still are @font-face with your font present. 4. It would be best if You could provide some demo in any sandbox.\n- Oh my bad, I though you where talking about font sources. I have no CSS in my build output though, just two folders (client and server, seems normal using Nuxt), and the client one contains a fonts folder containing my built font. I'm a bit new to server side rendering stuff, especially in dev mode, but I'm a bit surprised to see that my network tab shows no download of either a CSS stylesheet or a font file . I'll try to put up some demo but I don't know of any sandbox that allows to recreate a SSR environment. I'll provide a github link soon. Thx for the help !\n- codesandbox.io I think fastest way is to find any existing nuxt demo and just change fonts like you did. But git source will do too.\n- I updated my question with a link to the Github repo. Contains the bare minimum needed. NuxtJS app serving a single index.vue file with TailwindCSS for styles, loading custom fonts.\n- Ok I will answer soon\n- I'm actually not suprised this was so simple... I am confused because I basically used the same 'ttf' format on an angular project of mine which worked perfectly fine. Thanks for the woff advice as well, I'll take a look at it ! Anyway, this works. Thank you very much for your help !\n- If \"ttf\" worked in other project then maybe font that was used in project was actually installed locally in system, so font-face was not used and you could missed it. Also it would work without using \"format('xxx')\".\n- PS if you are planning to use this repo, you have missing @nuxtjs/apollo dependency in package.json\n- I'm not planning on using the repo, it's just a copy of the main one. I tried to remove as much dependencies as possible to make it easier on you. Guess this one sliped through. Thanks again.","metadata":{"transformedAt":"2026-08-18T18:33:42.925Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":15,"totalLines":181,"estimatedTokens":1562}}511{"id":"stack-72391045","source":"stackoverflow","questionId":72391045,"title":"What do the parameters in tailwind `grid-cols-[1fr,700px,2fr]` do?","tags":["tailwind-css"],"text":"Title: What do the parameters in tailwind `grid-cols-[1fr,700px,2fr]` do?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI’m trying to understand tailwind grids better - could someone help me understand what each of the parameters `1fr`, `700px` and `2fr` do in\n\n```\n\n \n\n```\n\np.s. Be careful looking at the answers. As of Tailwind 4.x, the separator is `_`, so `grid-cols-[1fr_700px_2fr]` is what newer versions are concerned with.\n\n========================================\n\nTop Answer:\n**There is one update related to the title of this question in the new official tailwind 3.4.3 document.**\n\nInstead of using comma separated column widths:\n\n```\ngrid-cols-[1fr,700px,2fr]\n```\n\n**They have adopted the underscore syntax something like:**\n\n```\ngrid-cols-[1fr_700px_2fr]\n```\n\nI believe because the old syntax was very prone to errors. For instance if we use spaces by mistake after commas something like :\n\n```\ngrid-cols-[1fr, 700px, 2fr]\n```\n\nThe grid-template-columns property was not applied.\n\n========================================\n\nCode:\n```text\n<!-- Complex grids -->\n<div class=\"grid-cols-[1fr,700px,2fr]\">\n <!-- ... -->\n</div>\n```\n\n```text\n1fr\n```\n\n```text\n700px\n```\n\n```text\n2fr\n```\n\n```text\n_\n```\n\n```text\ngrid-cols-[1fr_700px_2fr]\n```\n\n```css\ngrid-template-columns: none|auto|max-content|min-content|length|initial|inherit;\n```\n\n```css\n.grid-container {\n display: grid;\n grid-template-columns: 1fr 700px 2fr;\n grid-gap: 10px;\n background-color: #2196F3;\n padding: 10px;\n}\n\n.grid-container>div {\n background-color: rgba(255, 255, 255, 0.8);\n text-align: center;\n padding: 20px 0;\n font-size: 30px;\n}\n```\n\n```html\n<!DOCTYPE html>\n<html>\n\n<head></head>\n\n<body>\n\n <div class=\"grid-container\">\n <div class=\"item1\">1fr</div>\n <div class=\"item2\">700px</div>\n <div class=\"item3\">2fr</div>\n <div class=\"item1\">1fr</div>\n <div class=\"item2\">700px</div>\n <div class=\"item3\">2fr</div>\n <div class=\"item1\">1fr</div>\n <div class=\"item2\">700px</div>\n <div class=\"item3\">2fr</div>\n </div>\n\n</body>\n\n</html>\n```\n\n```text\ngrid-template-columns: 1fr 700px 2fr;\n```\n\n```text\ngrid-template-columns\n```\n\n```text\ngrid-template-columns\n```\n\n```text\ngrid-template-columns\n```\n\n```text\n1fr\n```\n\n```text\n1fr\n```\n\n```text\n2fr\n```\n\n```text\n700px\n```\n\n```text\n1fr\n```\n\n```text\n700px\n```\n\n```text\n2fr\n```\n\n```text\ngrid-cols-[1fr,700px,2fr]\n```\n\n```text\ngrid-cols-[1fr_700px_2fr]\n```\n\n```text\ngrid-cols-[1fr, 700px, 2fr]\n```\n\n========================================\n\nComments:\n- Do you think it makes sense to update the question and title accordingly?\n- I don't think so, since still many codebases will certainly be using the old syntax. When I noticed my grid was breaking due to an extra space, I checked the docs and I found a new syntax is added, so I felt it is less prone to breaking\n- Well, I took the liberty of editing the question a bit, because that particular syntax is easy to miss in their pretty complex docs on the subject.","metadata":{"transformedAt":"2026-08-18T18:33:42.925Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":23,"totalLines":178,"estimatedTokens":742}}512{"id":"stack-69711877","source":"stackoverflow","questionId":69711877,"title":"Chakra-UI removing default background color","tags":["next.js","tailwind-css","chakra-ui"],"text":"Title: Chakra-UI removing default background color\nTags: next.js, tailwind-css, chakra-ui\nSource: Stack Overflow\n\nQuestion:\nI'm using @chakra-ui/react with Tailwind CSS and NextJS. I have set my background color to `black` in my `globals.css` file:\n\n```\nbody {\n background-color: black;\n}\n```\n\nBut I don't see the black color being applied, I only see a white screen. This worked before I switched to chakra so I suppose this is something to do with it.\n\nThis is my app.js file:\n\n```\nimport { ChakraProvider } from '@chakra-ui/react'\nimport 'tailwindcss/tailwind.css'\nimport '../styles/globals.css' // file which sets the body's background-color to black\n\nfunction MyApp({ Component, pageProps }) {\n return (\n \n \n \n )\n}\n\nexport default MyApp\n```\n\nI assume this is because of chakra's default theme? How would I disable it?\n\n========================================\n\nCode:\n```css\nbody {\n background-color: black;\n}\n```\n\n```js\nimport { ChakraProvider } from '@chakra-ui/react'\nimport 'tailwindcss/tailwind.css'\nimport '../styles/globals.css' // file which sets the body's background-color to black\n\nfunction MyApp({ Component, pageProps }) {\n return (\n <ChakraProvider>\n <Component {...pageProps} />\n </ChakraProvider>\n )\n}\n\nexport default MyApp\n```\n\n```text\nblack\n```\n\n```text\nglobals.css\n```\n\n```js\nconst theme = extendTheme({\n styles: {\n global: () => ({\n body: {\n bg: \"\",\n },\n }),\n },\n});\n```\n\n```text\nstyle\n```\n\n```text\nbody-bg\n```\n\n========================================\n\nComments:\n- For my use-case, I just imported a single component (that uses Chakra) into my existing app (which doesn't). It seems like I can't stop Chakra from going \"out of bounds\" of that component and changing ~everything. It's infuriating.\n- Still not working here, I also have a NextJS application using TailwindCSS and ChakraUI. When I switch the mode from white to dark, only my anchors change the colors to white, but the background keeps white (what should be gray.800)\n- worked for me when i wrote \"background\" instead of \"bg\"","metadata":{"transformedAt":"2026-08-18T18:33:42.925Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":94,"estimatedTokens":514}}513{"id":"stack-64064826","source":"stackoverflow","questionId":64064826,"title":"Correctly formatting and blocks in Vue.js","tags":["html","vue.js","tailwind-css","pre"],"text":"Title: Correctly formatting and blocks in Vue.js\nTags: html, vue.js, tailwind-css, pre\nSource: Stack Overflow\n\nQuestion:\nI have the following `` block in my Vue.js application as follows, (using TailwindCSS classes):\n\n```\n`{{ dataset.bibTex }}`\n```\n\nHowever, on the page, this looks as follows:\n\nhttps://i.sstatic.net/lIO1P.png\n\nI was wondering, what have I done wrong in formatting this block? Do I need to regex replace anything? I've tried trim, and regex replacing characters at the start and end, but nothing seems to work...\n\n========================================\n\nTop Answer:\nUsing `white-space: pre;` means you have to be careful of the whitespace in your editor. Here's some examples:\n\n\r\n\r\n\n```\ncode.pre {\n white-space: pre;\n}\n```\n\n\r\n\n```\n`test`\n\n`test\n dfgdkfhdfg`\n\n`test\n dfgdkfjgh`\n\n`test\ndfgdkfjgh`\n```\n\n\r\n\r\n\r\n\nTry this instead:\n\n```\n`{{ dataset.bibTex }}`\n```\n\n========================================\n\nCode:\n```text\n<code class=\"block whitespace-pre overflow-x-scroll\">\n {{ dataset.bibTex }}\n</code>\n```\n\n```text\n<code></code>\n```\n\n```text\n<code class=\"block whitespace-pre overflow-x-scroll\">\n {{ dataset.bibTex }}\n</code>\n```\n\n```text\n<code class=\"block whitespace-pre overflow-x-scroll\" v-text=\"dataset.bibText\"></code>\n```\n\n```text\n<code class=\"block whitespace-pre overflow-x-scroll\">{{ dataset.bibTex }}</code>\n```\n\n```css\ncode.pre {\n white-space: pre;\n}\n```\n\n```html\n<code>\n test\n</code>\n\n<hr/>\n\n<code class=\"pre\">\n\n test\n dfgdkfhdfg\n \n</code>\n\n<hr/>\n\n<code class=\"pre\">\n test\n dfgdkfjgh\n</code>\n\n<hr/>\n\n<code class=\"pre\">\ntest\ndfgdkfjgh\n</code>\n```\n\n```text\n<code class=\"block whitespace-pre overflow-x-scroll\">\n{{ dataset.bibTex }}\n</code>\n```\n\n```text\nwhite-space: pre;\n```\n\n========================================\n\nComments:\n- How would you like it to be formatted? Is it just the extra space at the beginning?\n- how confident are you that `dataset.bibTex` doesn't have whitespace? can you show what you tried to remove the whitespace exactly?\n- looking at the doc for whitespace-pre you might try removing that class or making code block one line\n- @depperm I am 100% certain. Looks like it was the use of Vue.js {{ }} template tags that was throwing things.\n- Thanks for this considered answer - just to show you the curtsey I have chosen the other answer as it has some interesting Vue related features (use of v-text directive). Thank you for the time spent tho to answer. +1 voted!","metadata":{"transformedAt":"2026-08-18T18:33:42.925Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":136,"estimatedTokens":611}}514{"id":"stack-66779965","source":"stackoverflow","questionId":66779965,"title":"tailwindcss flexcols with different height","tags":["html","css","tailwind-css"],"text":"Title: tailwindcss flexcols with different height\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to split the div into two parts with individuals heights. But the flex and grid classes from tailwind will stretch the height of the smaller child to the height of the other child.\n\nAt the moment it looks like this\n\n\r\n\r\n\n```\n\n \n \n \n \n \n \n\n```\n\n\r\n\r\n\r\n\nHow do I achieve individual height? (the content of the Childs is programmatically set and does not always have the same height)\n\n========================================\n\nTop Answer:\nJust move the h- class on the parent div\n\n\r\n\r\n\n```\n\n \n \n \n \n \n \n\n```\n\n========================================\n\nCode:\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n<div class=\"flex flex-row\">\n <div class=\"bg-green-500 w-1/2\">\n <div class=\"h-4\"></div>\n </div>\n <div class=\"bg-red-500 w-1/2\">\n <div class=\"h-12\"></div>\n </div>\n</div>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n<div class=\"flex flex-row items-start\">\n <div class=\"bg-green-500 w-1/2\">\n <div class=\"h-4\"></div>\n </div>\n <div class=\"bg-red-500 w-1/2\">\n <div class=\"h-12\"></div>\n </div>\n</div>\n```\n\n```text\nalign-items\n```\n\n```text\nstretch\n```\n\n```text\nflex-start\n```\n\n```text\n.items-start\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n<div class=\"flex flex-row h-min\">\n <div class=\"h-4 bg-green-500 w-1/2\">\n <div class=\"\"></div>\n </div>\n <div class=\"h-12 bg-red-500 w-1/2\">\n <div class=\"\"></div>\n </div>\n</div>\n```\n\n========================================\n\nComments:\n- You can use `.items-start` or `.items-center` depending on the vertical alignment you want","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":107,"estimatedTokens":442}}515{"id":"stack-79607461","source":"stackoverflow","questionId":79607461,"title":"How to make TailwindCSS v4 desktop-first breakpoints","tags":["css","tailwind-css","tailwind-css-4"],"text":"Title: How to make TailwindCSS v4 desktop-first breakpoints\nTags: css, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nIt used to be that in Tailwind v3, you could just reconfigure the screen queries to work desktop-first. Make something look good on your large computer screen, the downsize, make adjustments and finally get to the size of a mobile screen like so:\n\n```\nexport default {\n theme: {\n screens: {\n '2xl': { max: '1535px' },\n xl: { max: '1279px' },\n lg: { max: '1023px' },\n md: { max: '767px' },\n sm: { max: '639px' },\n },\n },\n};\n```\n\nMany devs (including me) just can not wrap their heads round starting with a tiny screen and sizing the project upwards to desktop screens. I wanted to do the same thing as above in an idiomatic v4 style using their new CSS-only configuration techniques, but it seems like the only option to achieve this is by configuring each prefix for each possible prop individually (see below) unlike with v3 config where it could have been done globally with a few lines.\n\n```\n@layer utilities {\n /* xs: ≤479px */\n @media (max-width: 479px) {\n .xs\\:w-40 { width: 10rem; }\n .xs\\:h-40 { height: 10rem; }\n }\n\n /* sm: ≤639px */\n @media (max-width: 639px) {\n .sm\\:w-48 { width: 12rem; }\n .sm\\:h-48 { height: 12rem; }\n }\n...\n}\n```\n\nI tried searching for some V4-specific solutions to this issue but it seems like a new enough problem not many people had really dealt with it to this point. Am I missing some configuration or has this just been blatantly removed because \"mobile-first\" and that's it?\n\n========================================\n\nCode:\n```js\nexport default {\n theme: {\n screens: {\n '2xl': { max: '1535px' },\n xl: { max: '1279px' },\n lg: { max: '1023px' },\n md: { max: '767px' },\n sm: { max: '639px' },\n },\n },\n};\n```\n\n```css\n@layer utilities {\n /* xs: ≤479px */\n @media (max-width: 479px) {\n .xs\\:w-40 { width: 10rem; }\n .xs\\:h-40 { height: 10rem; }\n }\n\n /* sm: ≤639px */\n @media (max-width: 639px) {\n .sm\\:w-48 { width: 12rem; }\n .sm\\:h-48 { height: 12rem; }\n }\n...\n}\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n --breakpoint-*: initial;\n}\n\n@custom-variant 2xl (@media (max-width: 1535px));\n@custom-variant xl (@media (max-width: 1279px));\n@custom-variant lg (@media (max-width: 1023px));\n@custom-variant md (@media (max-width: 767px));\n@custom-variant sm (@media (max-width: 639px));\n```\n\n```text\nmax-{breakpoint}\n```\n\n```text\nmd\n```\n\n```text\nxl\n```\n\n```text\nmd:max-xl:bg-black\n```\n\n```text\ndefault\n```\n\n```text\nxl\n```\n\n```text\nmax-xl:bg-black\n```\n\n```text\nmax-{breakpoint}:{class}\n```\n\n```text\n@custom-variant\n```\n\n```text\n@custom-variant\n```\n\n========================================\n\nComments:\n- Ok, that's interesting, I must have glanced over @custom-variant and wiped it from my memory. I'll give it a try and come back in a few minutes. Funny enough, most of the issues about tailwind I've seen here, you were the one with the best answer, so seems like you know your stuff.\n- Yeah, this seems to be working. I'll have to do some testing but it seems to do the job. Also thanks for the docs references, I'll have something to read this evening!","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":135,"estimatedTokens":792}}516{"id":"stack-76535186","source":"stackoverflow","questionId":76535186,"title":"Why can't I pass variable as a className to tailwind-css?","tags":["javascript","reactjs","tailwind-css","react-context","tailwind-in-js"],"text":"Title: Why can't I pass variable as a className to tailwind-css?\nTags: javascript, reactjs, tailwind-css, react-context, tailwind-in-js\nSource: Stack Overflow\n\nQuestion:\nI am trying to pass a context variable as a value to tailwind className in react. As per tailwind documentation `bg-[hex-val]` is used to pass custom color codes to background color.\n\nI'm using Template literals to pass context variable as value.\n\nNavBar.js\n\n```\nimport { useContext } from 'react';\nimport { AiOutlineMenu } from 'react-icons/ai';\nimport ThemeToggle from './ThemeToggle';\nimport ThemeContext from '../context/ThemeContext';\n\nconst NavBar = () => {\n const { colors } = useContext(ThemeContext); \n\n return \n \n {//below line is not working}\n\n Some words\n\n \n \n \n \n}\n\nexport default NavBar;\n```\n\nThemeContext.js\n\n```\nimport { createContext,useState } from \"react\"\n\nconst ThemeContext = createContext();\n\nconst ThemeProvider = ({ children })=>{\n\n const [darkTheme, setTheme] = useState(true);\n \n const colors = {\n primary: darkTheme ? \"#282828\" : \"#E8E8E8\",\n secondary: darkTheme ? \"#FFFFFF\" : \"#FFFFFF\",\n secondary2: darkTheme ? '#232323' : '#ECECEC',\n card: darkTheme ?'#383838' : 'F3EFEF',\n buttons: darkTheme ? '#504D4D' : '#C0C0C0',\n buttonActive: darkTheme ? '#A9A9A9' : '#828282'\n }\n\n const handleTheme = (themeParam)=>{\n setTheme(themeParam);\n }\n return<>\n \n {children}\n \n \n}\n\nexport {ThemeProvider};\nexport default ThemeContext;\n```\n\nI have tried using classNames npm package to combine context variable and other classnames but no luck!\n\n========================================\n\nTop Answer:\nAs a last resort, if you need to construct class names dynamically, make sure to `safelist` possible values in the `tailwind.config.js` to force Tailwind's process to include them in the final stylesheet\n\n```\n\n```\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}',\n ],\n safelist: [\n 'text-red-600',\n 'text-green-600'\n ]\n // ...\n}\n```\n\nYou could also use a pattern to match classes:\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}',\n ],\n safelist: [\n {\n pattern: /bg-(red|green)-600/,\n },\n ]\n // ...\n}\n```\n\nThere is more in doc:\nhttps://tailwindcss.com/docs/content-configuration#safelisting-classes\n\n========================================\n\nCode:\n```text\nimport { useContext } from 'react';\nimport { AiOutlineMenu } from 'react-icons/ai';\nimport ThemeToggle from './ThemeToggle';\nimport ThemeContext from '../context/ThemeContext';\n\n\n\nconst NavBar = () => {\n const { colors } = useContext(ThemeContext); \n\n\n return <div className=\"w-screen h-46 bg-secondary-dark grid grid-cols-6 gap-4 content-center\">\n \n {//below line is not working}\n\n <p className={`bg-[${colors.secondary}] text-text-white`}>Some words</p>\n <AiOutlineMenu style={{color:\"white\",fontSize:\"1.5rem\"}} className='ms-4 place-self-start col-span-5 '/>\n <ThemeToggle />\n \n </div>\n}\n\nexport default NavBar;\n```\n\n```text\nimport { createContext,useState } from \"react\"\n\nconst ThemeContext = createContext();\n\nconst ThemeProvider = ({ children })=>{\n\n const [darkTheme, setTheme] = useState(true);\n \n const colors = {\n primary: darkTheme ? \"#282828\" : \"#E8E8E8\",\n secondary: darkTheme ? \"#FFFFFF\" : \"#FFFFFF\",\n secondary2: darkTheme ? '#232323' : '#ECECEC',\n card: darkTheme ?'#383838' : 'F3EFEF',\n buttons: darkTheme ? '#504D4D' : '#C0C0C0',\n buttonActive: darkTheme ? '#A9A9A9' : '#828282'\n }\n\n const handleTheme = (themeParam)=>{\n setTheme(themeParam);\n }\n return<>\n <ThemeContext.Provider value={{darkTheme, handleTheme, colors}}>\n {children}\n </ThemeContext.Provider>\n </>\n}\n\nexport {ThemeProvider};\nexport default ThemeContext;\n```\n\n```text\nbg-[hex-val]\n```\n\n```js\n<div class=\"text-{{ error ? 'red' : 'green' }}-600\"></div>\n```\n\n```js\n<div class=\"{{ error ? 'text-red-600' : 'text-green-600' }}\"></div>\n```\n\n```js\nconst colors = {\n // …\n secondary: darkTheme ? \"bg-[#FFFFFF]\" : \"bg-[#FFFFFF]\",\n // …\n}:\n```\n\n```text\n<p className={`${colors.secondary} text-text-white`}>\n```\n\n```text\n<p className=\"text-text-white\" style={{ backgroundColor: colors.secondary }}>\n```\n\n```text\ntext-red-600\n```\n\n```text\ntext-green-600\n```\n\n```text\nstyle\n```\n\n```text\n<div class=\"text-{{ error ? 'red' : 'green' }}-600\"></div>\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}',\n ],\n safelist: [\n 'text-red-600',\n 'text-green-600'\n ]\n // ...\n}\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}',\n ],\n safelist: [\n {\n pattern: /bg-(red|green)-600/,\n },\n ]\n // ...\n}\n```\n\n```text\nsafelist\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- Instead of declaring class names, you can use CSS variables to declare Tailwind class names. The native CSS class can also be prepared with the CSS variable name. The CSS variable can then be manipulated at runtime using JavaScript. For more details, see @dogukan's answer to the \"Using TailwindCSS and JS variables\" question.\n- Related: How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":265,"estimatedTokens":1386}}517{"id":"stack-76845987","source":"stackoverflow","questionId":76845987,"title":"Flowbite React: how to get rid of this annoying border?","tags":["css","tailwind-css","flowbite"],"text":"Title: Flowbite React: how to get rid of this annoying border?\nTags: css, tailwind-css, flowbite\nSource: Stack Overflow\n\nQuestion:\nI'm using Flowbite React, an dit has a lot of great elements, but many interactive component get this really annoying border when clicked. How do you et rid of it? This turns a beautiful component to an ugly one, and I can't figure out how to change it.\n\nIn the example here I am trying to use the tabs. When looking at the theme at the bottom of the page, I see that the border comes from the \"ring\" property which is set to `focus:ring-4 focus:ring-cyan-300`. I've tried setting my items className to this: `className=\"ring-0 focus:ring-0 focus:ring-transparent\"` but nothing gets overridden and the ring still shows up.\n\nThis is my entire component:\n\n```\n\"use client\";\n\nimport { Tabs } from \"flowbite-react\";\nimport {BsFillGrid3X2GapFill, BsFan} from 'react-icons/bs'\nimport { HiSignal } from \"react-icons/hi2\";\n\nexport default function ConfigureDeckTabs({\n onTabChange,\n}: {\n onTabChange: (tab: number) => void;\n}) {\n return (\n \n \n \n \n \n );\n}\n```\n\nhttps://i.sstatic.net/EBO2p.png\n\n========================================\n\nTop Answer:\nOverride the style by using CSS\n\n```\n* {\n --tw-ring-color: rgb(0 0 0 / 0) !important;\n }\n```\n\n========================================\n\nCode:\n```text\n\"use client\";\n\nimport { Tabs } from \"flowbite-react\";\nimport {BsFillGrid3X2GapFill, BsFan} from 'react-icons/bs'\nimport { HiSignal } from \"react-icons/hi2\";\n\nexport default function ConfigureDeckTabs({\n onTabChange,\n}: {\n onTabChange: (tab: number) => void;\n}) {\n return (\n <Tabs.Group style=\"underline\" onActiveTabChange={onTabChange} className=\"mt-2\">\n <Tabs.Item\n active\n icon={BsFillGrid3X2GapFill}\n title=\"Panels\"\n className=\"ring-0 focus:ring-transparent focus:ring-8\"\n ></Tabs.Item>\n <Tabs.Item\n icon={BsFan}\n title=\"Fans\"\n className=\"ring-0 focus:ring-0 focus:ring-transparent\"\n ></Tabs.Item>\n <Tabs.Item\n icon={HiSignal}\n title=\"Sensors\"\n className=\"ring-0 focus:ring-0 focus:ring-transparent\"\n ></Tabs.Item>\n </Tabs.Group>\n );\n}\n```\n\n```text\nfocus:ring-4 focus:ring-cyan-300\n```\n\n```text\nclassName=\"ring-0 focus:ring-0 focus:ring-transparent\"\n```\n\n```text\n.focus\\:ring-cyan-300:focus {\n --tw-ring-opacity: 0 !important;\n}\n```\n\n```text\n* {\n --tw-ring-color: rgb(0 0 0 / 0) !important;\n }\n```\n\n```text\n<Tabs\n style='underline'\n className='mb-4 w-max md:w-full'\n theme={{\n tablist: {\n tabitem: {\n base: 'flex items-center justify-center p-4 text-sm font-medium first:ml-0 disabled:cursor-not-allowed disabled:text-gray-400 disabled:dark:text-gray-500 focus:ring-0 focus:outline-none rounded-t-lg border-b-2 border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-600',\n },\n },\n }}\n>\n {tabItems.map((tab) => (\n <Tabs.Item\n key={tab.title}\n active={tab.isActive}\n icon={() => renderIcon(tab.icon)}\n title={tab.title}\n >\n <tab.component />\n </Tabs.Item>\n ))}\n</Tabs>\n```\n\n```text\n[multiple]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, select:focus, textarea:focus {\n --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/) !important;\n --tw-ring-offset-width: 0px !important;\n --tw-ring-offset-color: #fff !important;\n --tw-ring-color: transparent !important;\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;\n border-color: transparent !important;\n box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) !important;\n outline: none !important;\n outline-offset: none;\n}\n```\n\n========================================\n\nComments:\n- Please create a reproducible demo of the about output so that people here can look into your problem.\n- maybe you need to use these tabs and use state to render details accordingly\n- @Usama thank you for the suggestion. It's not really a way to disable the border, but is indeed the approach I should take and have taken. With the \"vanilla\" tailwind I get the result I want now.\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.\n- This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review\n- This is exacty what fixed that for me! Just add this to `globals.css`\n- I can attest that this works!\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":155,"estimatedTokens":1318}}518{"id":"stack-77917343","source":"stackoverflow","questionId":77917343,"title":"Shadcn Dialog component margin","tags":["tailwind-css","radix","shadcnui"],"text":"Title: Shadcn Dialog component margin\nTags: tailwind-css, radix, shadcnui\nSource: Stack Overflow\n\nQuestion:\nTrying to add some simple margin to left and right of a dialog box when viewing on a mobile screen. No matter where I seem to add mx-5 it doesn't actually work. Any ideas on how to add some margin to a shadcn dialog when viewing on a phone like this?\n\nExample of Dialog on mobile without margin\n\nJust about every place I can find on this component I added an mx-5 to add left and right margin but it doesn't seem to have an effect. Also tried sm:mx-5 hoping it would apply on mobile screens but no luck.\n\n========================================\n\nTop Answer:\nYou can use the `w-[calc(100%-64px)]` classname on DialogPrimitive.Content component to achieve margin on small screen devices\n\n========================================\n\nCode:\n```text\n<DialogContent className=\"w-11/12 sm:max-w-md\">\n```\n\n```text\nimport { Copy } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function DialogCloseButton() {\n return (\n <Dialog>\n <DialogTrigger asChild>\n <Button variant=\"outline\">Share</Button>\n </DialogTrigger>\n <DialogContent className=\"w-11/12 sm:max-w-md\">\n <DialogHeader>\n <DialogTitle>Share link</DialogTitle>\n <DialogDescription>\n Anyone who has this link will be able to view this.\n </DialogDescription>\n </DialogHeader>\n <div className=\"flex items-center space-x-2\">\n <div className=\"grid flex-1 gap-2\">\n <Label htmlFor=\"link\" className=\"sr-only\">\n Link\n </Label>\n <Input\n id=\"link\"\n defaultValue=\"https://ui.shadcn.com/docs/installation\"\n readOnly\n />\n </div>\n <Button type=\"submit\" size=\"sm\" className=\"px-3\">\n <span className=\"sr-only\">Copy</span>\n <Copy className=\"h-4 w-4\" />\n </Button>\n </div>\n <DialogFooter className=\"sm:justify-start\">\n <DialogClose asChild>\n <Button type=\"button\" variant=\"secondary\">\n Close\n </Button>\n </DialogClose>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n )\n}\n```\n\n```text\nDialogContent\n```\n\n```text\nmax-w-lg\n```\n\n```text\n32rem\n```\n\n```text\n:max-w-md\n```\n\n```text\nw-11/12\n```\n\n```text\nw-[calc(100%-64px)]\n```\n\n========================================\n\nComments:\n- Thank you. Very helpful. I also found that if I change w-full to w-5/6 on DialogPrimitive.Content in the component source itself it has the desired effect.\n- Yeah! You can do that as well. But I won't advise you to do it at the source component because you may have a different specification in the near future.","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":111,"estimatedTokens":758}}519{"id":"stack-76419626","source":"stackoverflow","questionId":76419626,"title":"how to style the body tag with tailwind.css in create-react-app","tags":["reactjs","tailwind-css","create-react-app"],"text":"Title: how to style the body tag with tailwind.css in create-react-app\nTags: reactjs, tailwind-css, create-react-app\nSource: Stack Overflow\n\nQuestion:\nI recently started with Create-react-app and TailwindCSS and I wanted to change the background of the whole page. couldn't find a way to style the tag\n\nI tried adding my own style in the index.css file like this\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nbody{\n background-color: aqua;\n}\n```\n\nbut still didn't work, seems that it's overriden by tailwinds styles\nis there some way to style the body tag?\n\n========================================\n\nCode:\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nbody{\n background-color: aqua;\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n body {\n @apply bg-black\n }\n}\n```\n\n```text\nbody\n```\n\n```text\n@layer base\n```\n\n```text\n@apply\n```\n\n========================================\n\nComments:\n- Did you try the `bg` property in Tailwind? Like if you want to change background of entire app to black, you can try to add App component's className to this: `bg-black`\n- I guess you can surround everything inside the app component with an extra div and style it, but it wouls be nicer to just be able to style the entire body as a whole.","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":64,"estimatedTokens":328}}520{"id":"stack-79494762","source":"stackoverflow","questionId":79494762,"title":"Is there a way to bypass this error and make pnpm dlx work with TailwindCSS?","tags":["reactjs","typescript","tailwind-css","vite","tailwind-css-4"],"text":"Title: Is there a way to bypass this error and make pnpm dlx work with TailwindCSS?\nTags: reactjs, typescript, tailwind-css, vite, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nMy questions are: Is there a way to bypass this error and make `pnpm dlx` work with TailwindCSS? If not, how can I manually locate the necessary binaries to run TailwindCSS?\n\nI'm using pnpm v10.5.2 and TailwindCSS v4.0 Any help would be appreciated!\n\nI'm trying to run TailwindCSS using `pnpm dlx`, but I keep getting this error:\n\nERR_PNPM_DLX_NO_BIN No binaries found in tailwindcss.\n\nThe command I used:\n\n```\npnpm dlx tailwindcss -i ./src/input.css -o ./dist/output.css --watch\n```\n\nFrom my understanding, `pnpm dlx` runs binaries from the package, but it seems like TailwindCSS doesn't expose any.\n\n========================================\n\nTop Answer:\nThe CLI interface for Tailwind CSS is in a different package, `@tailwindcss/cli`. Thus, your command should look like:\n\n```\npnpm dlx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch\n```\n\n========================================\n\nCode:\n```none\npnpm dlx tailwindcss -i ./src/input.css -o ./dist/output.css --watch\n```\n\n```text\npnpm dlx\n```\n\n```text\npnpm dlx\n```\n\n```text\npnpm dlx\n```\n\n```text\npnpm dlx tailwindcss@3 init\n```\n\n```bash\npnpm dlx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch\n```\n\n```text\n@tailwindcss/cli\n```\n\n========================================\n\nComments:\n- Related: Problem installing TailwindCSS with Vite, after \"npx tailwindcss init -p\" command","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":65,"estimatedTokens":385}}521{"id":"stack-75093209","source":"stackoverflow","questionId":75093209,"title":"How to make a header in react have a shadow only on scroll using tailwindcss?","tags":["reactjs","scroll","header","tailwind-css","navbar"],"text":"Title: How to make a header in react have a shadow only on scroll using tailwindcss?\nTags: reactjs, scroll, header, tailwind-css, navbar\nSource: Stack Overflow\n\nQuestion:\nI have a header in react that I want to have no shadow when the scrollbar position is initial (0), and on scroll, to have a shadow. Here is the code to the header with and without a shadow using tailwindCSS:\n\n**With shadow:**\n\n```\n\n...\n\n```\n\n**Without shadow:**\n\n```\n\n...\n\n```\n\nHow can I check if the scrollbar is not in its initial position to make the header take the className \"shadow\"?\n\n========================================\n\nCode:\n```text\n<header className=\"sticky left-0 top-0 right-0 z-20 shadow\">\n...\n</header>\n```\n\n```text\n<header className=\"sticky left-0 top-0 right-0 z-20\">\n...\n</header>\n```\n\n```text\nconst [top, setTop] = useState(true);\n\nuseEffect(() => {\n const scrollHandler = () => {\n setTop(window.scrollY <= 10)\n };\n window.addEventListener('scroll', scrollHandler);\n return () => window.removeEventListener('scroll', scrollHandler);\n}, [top]);\n```\n\n```text\n<header className={`sticky left-0 top-0 right-0 z-20 ${!top && `bg-white shadow-lg`}`}>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":55,"estimatedTokens":288}}522{"id":"stack-73462143","source":"stackoverflow","questionId":73462143,"title":"I am getting an error Module not found: Error: Can't resolve '@heroicons/react/solid'","tags":["reactjs","tailwind-css","package.json","tailwind-ui","heroicons"],"text":"Title: I am getting an error Module not found: Error: Can't resolve '@heroicons/react/solid'\nTags: reactjs, tailwind-css, package.json, tailwind-ui, heroicons\nSource: Stack Overflow\n\nQuestion:\nI have run\n\n```\nnpm install @heroicons/react\n```\n\nand my package.json looks like this:\n\n```\n\"dependencies\": {\n\"@headlessui/react\": \"^1.6.6\",\n\"@heroicons/react\": \"^2.0.0\",\n...\n```\n\nbut for some reason I cannot get it to work!\n\nI am still getting this error\n\nPlease help me out here. I don't understand what is the issue here?\n\n========================================\n\nCode:\n```text\nnpm install @heroicons/react\n```\n\n```text\n\"dependencies\": {\n\"@headlessui/react\": \"^1.6.6\",\n\"@heroicons/react\": \"^2.0.0\",\n...\n```\n\n```js\nimport { AcademicCapIcon } from '@heroicons/react/20/solid';\nimport { BeakerIcon } from '@heroicons/react/24/outline';\nimport { PlayIcon } from '@heroicons/react/24/solid';\n\nfunction Preview() {\n return (\n <div>\n <AcademicCapIcon />\n <BeakerIcon />\n <PlayIcon />\n </div>\n )\n}\n```\n\n```text\n2.0.0\n```\n\n```text\n@heroicons/react/20/solid\n```\n\n```text\n@heroicons/react/24/outline\n```\n\n```text\n@heroicons/react/24/solid\n```\n\n========================================\n\nComments:\n- Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.\n- Thanks , this was exactly the issue I was facing. Next time I will make it a point to look inside the node_modules folder.","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":77,"estimatedTokens":377}}523{"id":"stack-69719318","source":"stackoverflow","questionId":69719318,"title":"Tailwind on click show data","tags":["javascript","css","tailwind-css"],"text":"Title: Tailwind on click show data\nTags: javascript, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\ni am showing sub menu by on Hover in tailwind css,\n\nHow can i achieve exact same functionality by doing onclick event instead of on hover.\n\n**DEMO**\n\n**CODE:**\n\n```\n\n Admission\n \n \n\n Admission Process\n\n option 1\n\n option 2\n\n \n\n```\n\nis there a way to do using only tailwind css or js?\n\n========================================\n\nTop Answer:\n**1st Option: Using data-dropdown-toggle attribute**\n\nIf you want to show a dropdown menu when click on an element, make sure that you add the the data-dropdown-toggle=\"dropdownId\" data attribute to the element that will toggle the dropdown menu.\n\nCheck the Example: https://flowbite.com/docs/components/dropdowns/\n\n**2nd Option: Using @click hide and show option**\n\nCheck the Example: https://bbbootstrap.com/snippets/tailwind-css-dropdown-menu-85681515\n\n========================================\n\nCode:\n```text\n<div class=\"group\">\n <span class=\"font-bold text-gray-700\"> Admission</span>\n <div class=\" hidden group-hover:block bg-white w-auto\">\n \n<div class=\"p-3 hover:bg-gray-200 \">\n Admission Process\n</div>\n<div class=\"p-3 hover:bg-gray-200\"\">\n option 1\n</div>\n<div class=\"p-3 hover:bg-gray-200\"\">\n option 2\n</div>\n </div> \n</div>\n```\n\n```js\nconst dropdownButton = document.querySelector(\"#dropdown\");\nconst dropdownList = document.querySelector(\"#dropdown + div.hidden\");\n\ndropdownButton.addEventListener(\"click\", () => {\n dropdownList.classList.toggle(\"hidden\");\n});\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div class=\"group\">\n <span class=\"font-bold text-gray-700\" id=\"dropdown\">Admission</span>\n <div class=\" hidden group-hover:block bg-white w-auto\">\n <div class=\"p-3 hover:bg-gray-200 \">\n Admission Process\n </div>\n <div class=\"p-3 hover:bg-gray-200\">\n option 1\n </div>\n <div class=\"p-3 hover:bg-gray-200\">\n option 2\n </div>\n </div> \n</div>\n```\n\n```html\n<div class=\"group dropdown\">\n <span class=\"font-bold text-gray-700\">Admission</span>\n <div class=\" hidden group-hover:block bg-white w-auto\">\n <div class=\"p-3 hover:bg-gray-200 \">\n Admission Process\n </div>\n <div class=\"p-3 hover:bg-gray-200\">\n option 1\n </div>\n <div class=\"p-3 hover:bg-gray-200\">\n option 2\n </div>\n </div> \n</div>\n```\n\n```js\nconst dropdowns = document.querySelectorAll(\".dropdown\");\n\ndropdowns.forEach(dropdown => {\n dropdown.querySelector('span').addEventListener(\"click\", () => {\n dropdown.querySelector('span + div').classList.toggle('hidden');\n });\n});\n```\n\n```text\nclick\n```\n\n```text\ndropdown\n```\n\n========================================\n\nComments:\n- Note that the first option requires `flowbite.js` and the second `alpine.js`. You can do that easily with pure javascript, there are not needed libraries for a such simple use case.\n- what if have more then one menu?\n- Check the update in my answer","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":134,"estimatedTokens":735}}524{"id":"stack-66605081","source":"stackoverflow","questionId":66605081,"title":"Using TailwindCSS and the Typography plugin, how do I allow for customizations within .prose using classes?","tags":["tailwind-css"],"text":"Title: Using TailwindCSS and the Typography plugin, how do I allow for customizations within .prose using classes?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have TailwindCSS 2.0 installed and the Typography plugin. I have customized my default styling in the Tailwind config like the docs suggest. In my customizations, I have styles for the text color and even customizations for h2, h3, etc and everything works as expected.\n\nHowever, I would like to be able to occasionally modify styles within the .prose class by adding classes directly to tags. For example:\n\n```\n\n### Make this heading red even though the default configuration makes it grey.\n\n```\n\nThe code above seems to have no effect on changing the heading 2. I guess because the text-red-400 has a lower specificity so it gets overridden by the theme styles. I want to use prose in lots of places on my site but also allow for customizations inside of the prose class occasionally. Is there a way to set this up so I can do that?\n\n========================================\n\nTop Answer:\nNote that because colors are stored in CSS variables you can also modify the variables directly. This is particularly useful for editing colors to user-defined values in React:\n\n```\n\n Hello world\n\n```\n\nYou can view a list of all color variables on the Tailwind typography plugin page or by inspecting the CSS on the `` element.\n\n========================================\n\nCode:\n```text\n<div class=\"prose\">\n<h2 class=\"text-red-400\">Make this heading red even though the default configuration makes it grey.</h2>\n</div>\n```\n\n```html\n<div class=\"prose prose-red-h2\">\n <h2>Make this heading red even though the default configuration makes it grey.</h2>\n</div>\n```\n\n```js\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n theme: {\n extend: {\n typography: {\n 'red-h2': {\n css: {\n h2: {\n color: colors.red['600'],\n },\n },\n },\n },\n },\n },\n variants: {},\n plugins: [require('@tailwindcss/typography')],\n}\n```\n\n```text\nprose-*\n```\n\n```text\n!important\n```\n\n```text\n<div\n className=\"prose\"\n style={{ \"--tw-prose-body\": myColor }}\n>\n <p>Hello world</p>\n</div>\n```\n\n```text\n<div class=\"prose\">\n```\n\n========================================\n\nComments:\n- This is a good solution, thanks. Even though I was looking for a more loosey-goosey way assigning classes, I think this solution makes more sense.","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":92,"estimatedTokens":613}}525{"id":"stack-74976622","source":"stackoverflow","questionId":74976622,"title":"tailwindcss dynamic border-color using template string doesn't work","tags":["javascript","css","reactjs","user-interface","tailwind-css"],"text":"Title: tailwindcss dynamic border-color using template string doesn't work\nTags: javascript, css, reactjs, user-interface, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using react 18, nextjs 13 with tailwindcss, postcss, autoprefixer\n\nexpect: clicking the button to toggle border-color and other styles\nbehavior: all styles toggle except border-color\n\nquestion: why doesn't border-color behave the same way as the other styles?\n\nbroken code:\n\n```\nimport Head from 'next/head'\nimport { useState } from 'react'\n\nexport default function Home() {\n const [dark, darkSet] = useState(true)\n function handleClick() {\n darkSet((prev) => !prev)\n }\n\n const bgColor = 'bg-' + (dark ? 'black' : 'white')\n const textColor = 'text-' + (dark ? 'white' : 'black')\n const borderColor = 'border-' + (dark ? 'white' : 'black')\n const borderStyle = 'border-' + (dark ? 'solid' : 'dashed')\n\n return (\n <>\n \n Create Next App\n \n \n \n \n \n \n Get started by editing\n \n \n theme\n \n \n \n \n )\n}\n```\n\n========================================\n\nTop Answer:\nupdate: this still doesn't work for colors other than black/white, what is going on here?\n\nsolution: as per tailwindcss docs\n\nDon't construct class names dynamically\n\nAlways use complete class names\n\nhttps://tailwindcss.com/docs/content-configuration#dynamic-class-names\n\nworking code:\n\n```\n// ...\n const bgColor = dark ? 'bg-black' : 'bg-white'\n const textColor = dark ? 'text-white' : 'text-black'\n const borderColor = dark ? 'border-white' : 'border-black'\n const borderStyle = dark ? 'border-solid' : 'border-dashed'\n// ...\n```\n\nthe difference is that the entire utility class is conditionally constructed then inserted into the template string literal in the jsx `className` attribute.\n\nquestion: I still want to know why this `border-color` case is different as I've run into a few cases like this when conditionally constructing the utility classes.\n\n========================================\n\nCode:\n```text\nimport Head from 'next/head'\nimport { useState } from 'react'\n\nexport default function Home() {\n const [dark, darkSet] = useState(true)\n function handleClick() {\n darkSet((prev) => !prev)\n }\n\n const bgColor = 'bg-' + (dark ? 'black' : 'white')\n const textColor = 'text-' + (dark ? 'white' : 'black')\n const borderColor = 'border-' + (dark ? 'white' : 'black')\n const borderStyle = 'border-' + (dark ? 'solid' : 'dashed')\n\n return (\n <>\n <Head>\n <title>Create Next App</title>\n <meta name=\"description\" content=\"Generated by create next app\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n </Head>\n <main>\n <div className={`flex min-h-screen min-w-screen `}>\n <div\n className={`${bgColor} ${textColor} border-8 ${borderStyle} ${borderColor}`}\n >\n Get started by editing\n </div>\n <button onClick={handleClick} className=\"h-8 bg-red-500\">\n theme\n </button>\n </div>\n </main>\n </>\n )\n}\n```\n\n```text\nconst bgColor = 'bg-' + (dark ? 'black' : 'white')\n const textColor = 'text-' + (dark ? 'white' : 'black')\n const borderColor = 'border-' + (dark ? 'white' : 'black')\n const borderStyle = 'border-' + (dark ? 'solid' : 'dashed')\n```\n\n```text\nconst bgColor = dark ? 'bg-black' : 'bg-white'\n const textColor = dark ? 'text-white' : 'text-black'\n const borderColor = dark ? 'border-white' : 'border-black'\n const borderStyle = dark ? 'border-solid' : 'border-dashed'\n```\n\n```text\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}',\n ],\n safelist: [\n {\n pattern: /bg-(red|green|blue|orange)/, // You can display all the colors that you need\n variants: ['lg', 'hover', 'focus', 'lg:hover'], // Optional\n },\n ],\n // ...\n}\n```\n\n```text\ndynamic class\n```\n\n```text\ntailwind\n```\n\n```text\ndynamic classes\n```\n\n```text\ntailwind-css\n```\n\n```text\ntailwind\n```\n\n```text\ntree-shaking\n```\n\n```text\npattern\n```\n\n```text\nvariants\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n// ...\n const bgColor = dark ? 'bg-black' : 'bg-white'\n const textColor = dark ? 'text-white' : 'text-black'\n const borderColor = dark ? 'border-white' : 'border-black'\n const borderStyle = dark ? 'border-solid' : 'border-dashed'\n// ...\n```\n\n```text\nclassName\n```\n\n```text\nborder-color\n```\n\n========================================\n\nComments:\n- I suspect it is working because you are using those colors elsewhere so they are already being picked up by tailwind. Please show the code that is not working, I expect that safeclassing the correct regex pattern will make your template string class composition work. For example, I dynamically generate opacity-* values and it works because I force tailwind to pre-generate all opacity-* options with: safelist: [ { pattern: /opacity(-[0-9]{1,3})/, }, ]\n- Thanks for fleshing this out a bit but I still don't understand why the `border-` doesn't work.\n- As i have mentioned in the answer, `tailwind uses tree-shaking i.e any class that wasn't declared in your source files, won't be generated in the output file.`. So you have to declare `border-` explicitly somewhere in the code. Then it works\n- wow thanks! ok, so I had defined the `border-red-900 dark:border-white` utility classes in a file at `/styles/styles.js` and exported it to the `/pages/index.js` (this is a nextjs pages style app).\n- `styles.js` was not included in the `content` field of `tailwind.config.js` so it wasn't seeing the class defined in the code. I just added `/styles/**/*.{js,jsx,ts,tsx}` to the config and now the border color is being picked up on.\n- that is awesome to here","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":213,"estimatedTokens":1420}}526{"id":"stack-71217171","source":"stackoverflow","questionId":71217171,"title":"Is it possible to compile tailwind.config.js from multiple sources?","tags":["next.js","tailwind-css"],"text":"Title: Is it possible to compile tailwind.config.js from multiple sources?\nTags: next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHere's a typical `tailwind.config.js` file:\n\n```\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nSince we are creating an infrastructure, we would love to split this file into two config files and rejoin/recompile them before nextjs build.\n\nFor example, we want to have `tailwind.config.base.js` that is centralized and contains:\n\n```\ncontent: [\n \"./pages/**/*.js\",\n \"./components/**/*.js\",\n \"./base/**/*.js\",\n \"./contents/**/*.js\",\n \"./modules/**/*.js\"\n // Here we have a chance to centralize our directory structure\n // We can also prevent common mistakes\n // And we can ensure that all projects use js and not typescript\n ],\n plugins: [\n require('@tailwindcss/typography')\n // Here we have the chance to give all of our projects a unified toolset\n ]\n```\n\nAnd then each project would have its own `tailwind.config.project.js`:\n\n```\ntheme: {\n extend: {\n colors: {\n tomato: {\n 400: '#FD6A5E'\n }\n },\n animation: {\n wiggle: 'wiggle 5s infinite'\n },\n keyframes: {\n wiggle: {\n '0%, 100%': {\n transform: 'translateY(0.5rem) scale(0.5)'\n },\n '50%': {\n transform: 'translateY(0) scale(0.5)'\n }\n }\n }\n },\n },\n```\n\nAnd then we would create a `tailwind.config.js` before each nextjs build.\n\nIs it possible? How?\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\ncontent: [\n \"./pages/**/*.js\",\n \"./components/**/*.js\",\n \"./base/**/*.js\",\n \"./contents/**/*.js\",\n \"./modules/**/*.js\"\n // Here we have a chance to centralize our directory structure\n // We can also prevent common mistakes\n // And we can ensure that all projects use js and not typescript\n ],\n plugins: [\n require('@tailwindcss/typography')\n // Here we have the chance to give all of our projects a unified toolset\n ]\n```\n\n```text\ntheme: {\n extend: {\n colors: {\n tomato: {\n 400: '#FD6A5E'\n }\n },\n animation: {\n wiggle: 'wiggle 5s infinite'\n },\n keyframes: {\n wiggle: {\n '0%, 100%': {\n transform: 'translateY(0.5rem) scale(0.5)'\n },\n '50%': {\n transform: 'translateY(0) scale(0.5)'\n }\n }\n }\n },\n },\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.base.js\n```\n\n```text\ntailwind.config.project.js\n```\n\n```text\ntailwind.config.js\n```\n\n```js\n// tailwind.config.project.js\n\nmodule.exports = { // specific project colors, animation, etc };\n```\n\n```js\n// tailwind.config.js\n\nmodule.exports = {\n presets: [\n require('./path/to/tailwind.config.project.js')\n ],\n // ...\n}\n```\n\n```text\ntailwind.config.project.js\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":166,"estimatedTokens":744}}527{"id":"stack-66134112","source":"stackoverflow","questionId":66134112,"title":"How to make button with icon at left side without line break?","tags":["html","tailwind-css"],"text":"Title: How to make button with icon at left side without line break?\nTags: html, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWith tailwindcss I make button with icon at left side, but I got that icon and buttons are on different lines and to fix it I wrapped these 2 elements with `flex items-start justify-between` classes :\n\n```\n\n \n \n \n \n \n Cancel\n \n \n```\n\nBut in result icon is hidden at all and I see only Cancel button.\nHow to fix it ?\n\n**MODIFIED BLOCK:**\nMy PhpStorm show hint that div is not allowed inside of `` tag, so I tried to wrap\nwith span, like\n\n```\n \n \n \n \n \n \n \n \n Cancel\n \n \n\n```\n\nBut icon is not visible anyway.\n\n========================================\n\nTop Answer:\nHere an another sample:\n\n*source: https://tailwindcomponents.com/component/button-with-icon*\n\n\r\n\r\n\n```\n\n \n Download\n\n```\n\n\r\n\r\n\r\n\nhttps://i.sstatic.net/kd4PH.png\n\n========================================\n\nCode:\n```text\n<div class=\"flex\">\n <button type=\"submit\" class=\"bg-gray-500 text-white hover:bg-purple-500 p-2 rounded text-sm w-auto\">\n <div class=\"flex items-start justify-between\" >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M6.707 4.879A3 3 0 018.828 4H15a3 3 0 013 3v6a3 3 0 01-3 3H8.828a3 3 0 01-2.12-.879l-4.415-4.414a1 1 0 010-1.414l4.414-4.414zm4 2.414a1 1 0 00-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 101.414 1.414L12 11.414l1.293 1.293a1 1 0 001.414-1.414L13.414 10l1.293-1.293a1 1 0 00-1.414-1.414L12 8.586l-1.293-1.293z\" clip-rule=\"evenodd\" />\n </svg>\n Cancel\n </div>\n </button>\n```\n\n```text\n<button type=\"submit\" class=\"bg-gray-500 text-white hover:bg-purple-500 p-2 rounded text-sm w-auto\"> \n <span class=\" flex items-start justify-start\">\n <span class=\"\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\"\n d=\"M6.707 4.879A3 3 0 018.828 4H15a3 3 0 013 3v6a3 3 0 01-3 3H8.828a3 3 0 01-2.12-.879l-4.415-4.414a1 1 0 010-1.414l4.414-4.414zm4 2.414a1 1 0 00-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 101.414 1.414L12 11.414l1.293 1.293a1 1 0 001.414-1.414L13.414 10l1.293-1.293a1 1 0 00-1.414-1.414L12 8.586l-1.293-1.293z\"\n clip-rule=\"evenodd\"/>\n </svg>\n </span>\n <span>\n Cancel\n </span>\n </span> \n</button>\n```\n\n```text\nflex items-start justify-between\n```\n\n```text\n<button>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n<button type=\"submit\" class=\"flex items-center bg-gray-500 text-white hover:bg-purple-500 p-2 rounded text-sm w-auto\">\n <svg class=\"w-6\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M6.707 4.879A3 3 0 018.828 4H15a3 3 0 013 3v6a3 3 0 01-3 3H8.828a3 3 0 01-2.12-.879l-4.415-4.414a1 1 0 010-1.414l4.414-4.414zm4 2.414a1 1 0 00-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 101.414 1.414L12 11.414l1.293 1.293a1 1 0 001.414-1.414L13.414 10l1.293-1.293a1 1 0 00-1.414-1.414L12 8.586l-1.293-1.293z\" clip-rule=\"evenodd\" />\n </svg>\n <span>Cancel</span>\n</button>\n```\n\n```text\nflex\n```\n\n```text\n<button>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n<button class=\"bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded inline-flex items-center\">\n <svg class=\"w-4 h-4 mr-2\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z\"/></svg>\n <span>Download</span>\n</button>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":133,"estimatedTokens":913}}528{"id":"stack-68211972","source":"stackoverflow","questionId":68211972,"title":"Tailwind CSS table header not respecting text-right","tags":["html","css","tailwind-css","text-alignment"],"text":"Title: Tailwind CSS table header not respecting text-right\nTags: html, css, tailwind-css, text-alignment\nSource: Stack Overflow\n\nQuestion:\nI'm using tailwindcss to generate code for a table, but I can't get the headers to respect the `text-right` / `text-left` / `text-center` directives.\n\nHere's a fiddle: https://jsfiddle.net/3u2jgqoc/\n\nIs there a way to line up the header name so that it would match with the column? (In the example I've set the `Address` header to `text-right` since it's the most obvious that it's actually aligning left, but I'd probably want to align the date header as `text-right`).\n\n========================================\n\nCode:\n```text\ntext-right\n```\n\n```text\ntext-left\n```\n\n```text\ntext-center\n```\n\n```text\nAddress\n```\n\n```text\ntext-right\n```\n\n```text\ntext-right\n```\n\n```text\nflex\n```\n\n```text\nblock\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":45,"estimatedTokens":209}}529{"id":"stack-70301843","source":"stackoverflow","questionId":70301843,"title":"Tailwind 3 in Laravel gives: Error: PostCSS plugin tailwindcss requires PostCSS 8","tags":["laravel","tailwind-css"],"text":"Title: Tailwind 3 in Laravel gives: Error: PostCSS plugin tailwindcss requires PostCSS 8\nTags: laravel, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to upgrade tailwind to version 3 in my Laravel application.\n\nI followed the installation as instructed in\n\nhttps://tailwindcss.com/docs/upgrade-guide#upgrade-packages\n\nnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest\n\nThis worked fine. But when I run `npm run dev` I get this error:\n\nERROR in ./resources/assets/css/tailwindcore.css\nModule build failed (from ./node_modules/css-loader/index.js):\nModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):\nError: PostCSS plugin tailwindcss requires PostCSS 8.\n\nI have read from the docs that PostCSS 8 is now required with tailwind 3. However, PostCSS 8 has been installed. Why would I still receive this error? I also tried to remove node_modules folder and reinstall, but got same error.\n\nThis is my package.json:\n\n```\n{\n \"private\": true,\n \"scripts\": {\n \"dev\": \"npm run development\",\n \"development\": \"cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js\",\n \"watch\": \"npm run development -- --watch\",\n \"watch-poll\": \"npm run watch -- --watch-poll\",\n \"hot\": \"cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --open --hot --config=node_modules/laravel-mix/setup/webpack.config.js\",\n \"prod\": \"npm run production\",\n \"production\": \"cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js\"\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.0\",\n \"axios\": \"^0.19\",\n \"babel-plugin-component\": \"^1.1.1\",\n \"bootstrap\": \"^4.5.2\",\n \"cross-env\": \"^7.0\",\n \"deepmerge\": \"^4.2.2\",\n \"fibers\": \"^4.0.2\",\n \"jquery\": \"^3.5.1\",\n \"laravel-mix\": \"^4.1.4\",\n \"laravel-mix-purgecss\": \"^5.0.0-rc.1\",\n \"lodash\": \"^4.17.20\",\n \"popper.js\": \"^1.12\",\n \"postcss\": \"^8.4.4\",\n \"purify-css\": \"^1.2.5\",\n \"purifycss-webpack\": \"^0.7.0\",\n \"resolve-url-loader\": \"^2.3.1\",\n \"sass\": \"^1.27.0\",\n \"sass-loader\": \"^7.3.1\",\n \"tailwindcss\": \"^3.0.0\",\n \"vue\": \"^2.6.12\",\n \"vue-template-compiler\": \"^2.6.12\",\n \"vuetifyjs-mix-extension\": \"0.0.2\"\n },\n \"dependencies\": {\n \"@tailwindcss/forms\": \"^0.3.3\",\n \"axiom\": \"^0.1.6\",\n \"buefy\": \"^0.9.7\",\n \"element-ui\": \"^2.13.1\",\n \"modal-video\": \"^2.4.2\",\n \"prod\": \"^1.0.1\",\n \"trumbowyg\": \"^2.21.0\",\n \"vue-multiselect\": \"^2.1.6\",\n \"vue-scrollto\": \"^2.19.1\",\n \"vue-select\": \"^3.11.2\",\n \"vue-trumbowyg\": \"^3.6.2\",\n \"vuetify\": \"^2.3.13\",\n \"vuetify-loader\": \"^1.6.0\"\n }\n}\n```\n\nmy webpack.mix.js setting:\n\n```\n.postCss(\"resources/assets/css/tailwindcore.css\", \"public/css\", [\n require(\"tailwindcss\"),\n])\n```\n\nmy tailwind.config.js:\n\n```\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n content: [\n './resources/**/*.blade.php',\n './resources/**/*.js',\n './resources/**/*.vue',\n ],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n backgroundImage: {\n 'gradient-radial-at-r': 'radial-gradient(ellipse at right, var(--tw-gradient-stops))',\n },\n colors: {\n lightblue: {\n DEFAULT: '#08c'\n },\n cyan: colors.cyan,\n }\n },\n },\n variants: {\n extend: {},\n },\n plugins: [require('@tailwindcss/forms'),],\n}\n```\n\n========================================\n\nCode:\n```text\n{\n \"private\": true,\n \"scripts\": {\n \"dev\": \"npm run development\",\n \"development\": \"cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js\",\n \"watch\": \"npm run development -- --watch\",\n \"watch-poll\": \"npm run watch -- --watch-poll\",\n \"hot\": \"cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --open --hot --config=node_modules/laravel-mix/setup/webpack.config.js\",\n \"prod\": \"npm run production\",\n \"production\": \"cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js\"\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.0\",\n \"axios\": \"^0.19\",\n \"babel-plugin-component\": \"^1.1.1\",\n \"bootstrap\": \"^4.5.2\",\n \"cross-env\": \"^7.0\",\n \"deepmerge\": \"^4.2.2\",\n \"fibers\": \"^4.0.2\",\n \"jquery\": \"^3.5.1\",\n \"laravel-mix\": \"^4.1.4\",\n \"laravel-mix-purgecss\": \"^5.0.0-rc.1\",\n \"lodash\": \"^4.17.20\",\n \"popper.js\": \"^1.12\",\n \"postcss\": \"^8.4.4\",\n \"purify-css\": \"^1.2.5\",\n \"purifycss-webpack\": \"^0.7.0\",\n \"resolve-url-loader\": \"^2.3.1\",\n \"sass\": \"^1.27.0\",\n \"sass-loader\": \"^7.3.1\",\n \"tailwindcss\": \"^3.0.0\",\n \"vue\": \"^2.6.12\",\n \"vue-template-compiler\": \"^2.6.12\",\n \"vuetifyjs-mix-extension\": \"0.0.2\"\n },\n \"dependencies\": {\n \"@tailwindcss/forms\": \"^0.3.3\",\n \"axiom\": \"^0.1.6\",\n \"buefy\": \"^0.9.7\",\n \"element-ui\": \"^2.13.1\",\n \"modal-video\": \"^2.4.2\",\n \"prod\": \"^1.0.1\",\n \"trumbowyg\": \"^2.21.0\",\n \"vue-multiselect\": \"^2.1.6\",\n \"vue-scrollto\": \"^2.19.1\",\n \"vue-select\": \"^3.11.2\",\n \"vue-trumbowyg\": \"^3.6.2\",\n \"vuetify\": \"^2.3.13\",\n \"vuetify-loader\": \"^1.6.0\"\n }\n}\n```\n\n```text\n.postCss(\"resources/assets/css/tailwindcore.css\", \"public/css\", [\n require(\"tailwindcss\"),\n])\n```\n\n```text\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n content: [\n './resources/**/*.blade.php',\n './resources/**/*.js',\n './resources/**/*.vue',\n ],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n backgroundImage: {\n 'gradient-radial-at-r': 'radial-gradient(ellipse at right, var(--tw-gradient-stops))',\n },\n colors: {\n lightblue: {\n DEFAULT: '#08c'\n },\n cyan: colors.cyan,\n }\n },\n },\n variants: {\n extend: {},\n },\n plugins: [require('@tailwindcss/forms'),],\n}\n```\n\n```text\nnpm run dev\n```\n\n```text\nnpm install laravel-mix@latest @tailwindcss/forms@latest\n```\n\n```text\n\"scripts\": {\n \"dev\": \"npm run development\",\n \"development\": \"mix\",\n \"watch\": \"mix watch\",\n \"watch-poll\": \"mix watch -- --watch-options-poll=1000\",\n \"hot\": \"mix watch --hot\",\n \"prod\": \"npm run production\",\n \"production\": \"mix --production\"\n},\n```\n\n```text\n@tailwindcss/form\n```\n\n```text\nscripts\n```\n\n```text\npackage.json\n```\n\n========================================\n\nComments:\n- Thank you. In order to install the latest laravel-mix and forms, I first had to remove tailwind like this `npm uninstall tailwindcss postcss autoprefixer` and remove tailwind-form. Now the installation worked. I now have 21 compile errors to fix. I will try to resolve them and let you know if it worked.\n- I am getting \"TypeError: Cannot read property 'resolve' of undefined\". Any idea?\n- @S.Farooq It's probably an issue with your node/npm version. You'll probably need to update it. That being said, this is outside the scope of the original question so if you are still having issues, I recommend opening a new question.","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":249,"estimatedTokens":1799}}530{"id":"stack-68370059","source":"stackoverflow","questionId":68370059,"title":"Why is my SVG element not appearing? (even when Inspecting my webpage)","tags":["html","css","svg","tailwind-css"],"text":"Title: Why is my SVG element not appearing? (even when Inspecting my webpage)\nTags: html, css, svg, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nSo I tried to include an SVG element to my drop-menu, and I included the SVG attribute. However, it doesn't seem to be considered by any browser; even when inspecting the page, I cannot find the SVG attribute anywhere. Below is a sample of the code (notice I'm using CSS's utility framework Tailwind).\n\n\r\n\r\n\n```\n\n Category\n Personal\n Buisness\n You\n \n \n \n \n \n \n \n \n\n```\n\n\r\n\r\n\r\n\nI tried changing the place of the SVG element by placing it outside of the select element but still into the span element. This time, the SVG element was visible. However -and naturally- it was outside of the select element, rather on the extreme right (Even tho after inspecting the span element, it clearly contains the \"category\" space. I thought It could be a browser problem, so I tried on other ones (I'm using Chrome) and on the Tailwind playground, and nothing changes. Does anyone have a solution?\n\n========================================\n\nCode:\n```html\n<select class=\"font-semi bold text-sm appearance-none bg-gray-200 \n inline-block p-5 px-5 py-2 rounded-2xl \">\n <option value=\"Categor\" disabled selected>Category</option>\n <option value=\"personal\">Personal</option>\n <option value=\"buisness\">Buisness</option>\n <option value=\"You\">You</option>\n <svg class=\"transform -rotate-90 absolute pointer-events-none inline flex\" style=\"right: 12px;\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path stroke=\"#000\" stroke-opacity=\".012\" stroke-width=\".5\"\n d=\"M21 1v20.16H.84V1z\">\n </path>\n <path fill=\"#222\"\n d=\"M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 \n 1.184-5.04-5.04 5.04-5.04z\">\n </path>\n </g>\n </svg>\n</select>\n```\n\n```html\n<!--this works-->\n<select>\n <optgroup label=\"opt group\" />\n <option>Option 1</option>\n <option>Option 2</option>\n</select>\n```\n\n```html\n<span>\n <select class=\"font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl \">\n <option value=\"Categor\" disabled selected>Category</option>\n <option value=\"personal\">Personal</option>\n <option value=\"buisness\">Buisness</option>\n <option value=\"You\">You </option>\n <svg class=\"transform -rotate-90 absolute pointer-events-none inline flex\" style=\"right: 12px;\" width=\"22\"\n height=\"22\" viewBox=\"0 0 22 22\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path stroke=\"#000\" stroke-opacity=\".012\" stroke-width=\".5\" d=\"M21 1v20.16H.84V1z\">\n </path>\n <path fill=\"#222\"\n d=\"M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z\"></path>\n </g>\n </svg> \n </select>\n```\n\n```html\n<span>\n <select class=\"font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl \">\n <option value=\"Categor\" disabled selected>Category</option>\n <option value=\"personal\">Personal</option>\n <option value=\"buisness\">Buisness</option>\n <option value=\"You\">You </option>\n \n </select>\n <svg class=\"transform -rotate-90 absolute pointer-events-none inline flex\" style=\"right: 12px;\" width=\"22\"\n height=\"22\" viewBox=\"0 0 22 22\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path stroke=\"#000\" stroke-opacity=\".012\" stroke-width=\".5\" d=\"M21 1v20.16H.84V1z\">\n </path>\n <path fill=\"#222\"\n d=\"M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z\"></path>\n </g>\n </svg>\n```\n\n```css\nsvg {\n position: absolute;\n right:0;\n}\n```\n\n```css\nsvg {\n position: absolute;\n right: 0;\n}\n```\n\n```html\n<span>\n <select class=\"font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl \">\n <option value=\"Categor\" disabled selected>Category</option>\n <option value=\"personal\">Personal</option>\n <option value=\"buisness\">Buisness</option>\n <option value=\"You\">You </option>\n \n </select>\n <svg class=\"transform -rotate-90 absolute pointer-events-none inline flex\" style=\"right: 12px;\" width=\"22\"\n height=\"22\" viewBox=\"0 0 22 22\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path stroke=\"#000\" stroke-opacity=\".012\" stroke-width=\".5\" d=\"M21 1v20.16H.84V1z\">\n </path>\n <path fill=\"#222\"\n d=\"M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z\"></path>\n </g>\n </svg>\n```\n\n```css\nsvg {\n position: absolute;\n right: 0;\n}\n```\n\n```html\n<div><strong>this is bold</strong> iqjr 98qc0 v0q89ure qoicqje oqircjoe iaewc r</div>\n<span>\n <select class=\"font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl \">\n <option value=\"Categor\" disabled selected>Category</option>\n <option value=\"personal\">Personal</option>\n <option value=\"buisness\">Buisness</option>\n <option value=\"You\">You </option>\n \n </select>\n <svg class=\"transform -rotate-90 absolute pointer-events-none inline flex\" style=\"right: 12px;\" width=\"22\"\n height=\"22\" viewBox=\"0 0 22 22\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path stroke=\"#000\" stroke-opacity=\".012\" stroke-width=\".5\" d=\"M21 1v20.16H.84V1z\">\n </path>\n <path fill=\"#222\"\n d=\"M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z\"></path>\n </g>\n </svg>\n```\n\n```css\ntable {\n width: 100%;\n}\n#triangle {\n text-align:right;\n}\n```\n\n```html\n<div><strong>this is bold</strong> ercjieo aceijrop ioejcrpa aeijrcop aeijopcr aeiojcr aeiojr aij eirojtper ieorjc</div>\n<table>\n<tr><td><select class=\"font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl \">\n <option value=\"Categor\" disabled selected>Category</option>\n <option value=\"personal\">Personal</option>\n <option value=\"buisness\">Buisness</option>\n <option value=\"You\">You </option>\n \n </select>\n \n </td>\n <td id=\"triangle\">\n <svg class=\"transform -rotate-90 absolute pointer-events-none inline flex\" style=\"right: 12px;\" width=\"22\"\n height=\"22\" viewBox=\"0 0 22 22\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path stroke=\"#000\" stroke-opacity=\".012\" stroke-width=\".5\" d=\"M21 1v20.16H.84V1z\">\n </path>\n <path fill=\"#222\"\n d=\"M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z\"></path>\n </g>\n </svg>\n </td></tr></table>\n```\n\n```css\n.faketable {\n display:table;\n}\n.faketable>div {\n display:table-row;\n}\n.faketable>div>div {\n display:table-cell;\n padding:7px;\n}\n```\n\n```html\n<div class=\"faketable\">\n<div>\n<div>Cell One (aruc b)</div>\n<div>Cell Two (ierjc eijac)</div>\n</div>\n<div>\n<div>Cell Three (qrc a)</div>\n<div>Cell Four (caf vfjj)</div>\n</div>\n</div>\n```\n\n```css\n.faketable {\n width: 100%;\n}\n\n#triangle {\n text-align: right;\n}\n\n.faketable {\n display: table;\n}\n\n.faketable>div {\n display: table-row;\n}\n\n.faketable>div>div {\n display: table-cell;\n padding: 7px;\n}\n```\n\n```html\n<div><strong>this is bold</strong> ercjieo aceijrop ioejcrpa aeijrcop aeijopcr aeiojcr aeiojr aij eirojtper ieorjc</div>\n<div class=\"faketable\">\n <div>\n <div>\n <select class=\"font-semi bold text-sm appearance-none bg-gray-200 inline-block p-5 px-5 py-2 rounded-2xl \">\n <option value=\"Categor\" disabled selected>Category</option>\n <option value=\"personal\">Personal</option>\n <option value=\"buisness\">Buisness</option>\n <option value=\"You\">You </option>\n\n </select>\n\n </div>\n <div id=\"triangle\">\n <svg class=\"transform -rotate-90 absolute pointer-events-none inline flex\" style=\"right: 12px;\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path stroke=\"#000\" stroke-opacity=\".012\" stroke-width=\".5\" d=\"M21 1v20.16H.84V1z\">\n </path>\n <path fill=\"#222\"\n d=\"M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z\"></path>\n </g>\n </svg>\n </div>\n </div>\n</div>\n```\n\n```js\nvar coll = document.getElementsByClassName(\"collapsible\");\nvar i;\n\nfor (i = 0; i < coll.length; i++) {\n coll[i].addEventListener(\"click\", function() {\n this.classList.toggle(\"active\");\n var content = document.getElementById('content');\n if (content.style.display === \"block\") {\n content.style.display = \"none\";\n } else {\n content.style.display = \"block\";\n }\n });\n}\n\nfunction hide(element) {\n var x = document.getElementsByClassName(\"options\");\n var i;\n for (i = 0; i < x.length; i++) {\n x[i].style.backgroundColor = \"white\";\n }\n document.getElementById('content').style.display = 'none';\n element.style.backgroundColor = \"#00ffff\"\n}\n```\n\n```css\n.options:hover {\n background-color: #00dddd !important;\n}\n\n#buttons,\n.options {\n cursor: pointer;\n}\n\n.options {\n border: 1px solid black;\n background-color: white;\n}\n\n#content {\n position: fixed;\n top: 1em;\n}\n\nsvg {\n position: absolute;\n right: 0;\n}\n```\n\n```html\n<table>\n <tr>\n <td><button style=\"width: 100%;\" id=\"buttons\" class=\"collapsible\">Click Me</button> <svg class=\"transform -rotate-90 absolute pointer-events-none inline flex\" style=\"right: 12px;\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path stroke=\"#000\" stroke-opacity=\".012\" stroke-width=\".5\" d=\"M21 1v20.16H.84V1z\">\n </path>\n <path fill=\"#222\"\n d=\"M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z\"></path>\n </g>\n </svg> </td>\n </tr>\n <tr>\n <td id=\"content\" style=\"display:none;\" onblur=\"this.style.display='none';\">\n <ul style=\"list-style:none;\">\n <li onclick=\"hide(this); document.getElementById('buttons').innerHTML=this.innerHTML;\" class=\"options\">option 1</li>\n <li onclick=\"hide(this); document.getElementById('buttons').innerHTML=this.innerHTML;\" class=\"options\">option 2</li>\n <li onclick=\"hide(this); document.getElementById('buttons').innerHTML=this.innerHTML;\" class=\"options\">option 3</li>\n </ul>\n </td>\n </tr>\n</table>\n```\n\n```text\n<\n```\n\n```text\ndisplay:table;\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":20,"totalLines":362,"estimatedTokens":2900}}531{"id":"stack-67402948","source":"stackoverflow","questionId":67402948,"title":"Vue transitions with Tailwind css not visible on fade out","tags":["css","vue.js","css-transitions","tailwind-css"],"text":"Title: Vue transitions with Tailwind css not visible on fade out\nTags: css, vue.js, css-transitions, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm usind Tailwind css and Vue.js to create a modal.\nSince Tailwind does not support Vue 2, I have to add the transitions.\nYou can see the desired effect here:\nhttps://tailwindui.com/components/application-ui/overlays/modals\n\nHere is the code:\n\n```\n\n \n Click\n\n \n \n \n \n \n \n \n\n \n ​\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n Deactivate account\n \n \n \n Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.\n \n\n \n \n \n \n \n \n Deactivate\n \n \n Cancel\n \n \n \n \n \n \n\n \n\nimport { Component, Vue, Prop } from 'nuxt-property-decorator';\n\n@Component\nexport default class TestModal extends Vue {\n @Prop({ type: Boolean, required: false })\n show: boolean = false;\n\n layout () {\n return 'none';\n }\n}\n\n.ease-out-overlay-enter-active, .ease-out-overlay-leave-active {\n @apply opacity-100 duration-300;\n}\n\n.ease-out-overlay-enter, .ease-out-overlay-leave-to /* .fade-leave-active below version 2.1.8 */ {\n @apply ease-in opacity-0 duration-200;\n}\n\n.ease-out-modal-enter-active, .ease-out-modal-leave-active {\n @apply opacity-100 translate-y-0 sm:scale-100 duration-300;\n}\n\n.ease-out-modal-enter, .ease-out-modal-leave-to /* .fade-leave-active below version 2.1.8 */ {\n @apply ease-in opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95 duration-200;\n}\n\n```\n\nThe transition is visible when the modal appears, but not when it disappears. I'm not sure what I've done wrong.\n\nAny idea on how to have a transition when closing the modal?\n\n========================================\n\nCode:\n```text\n<template>\n <div>\n <button @click=\"show = true\">Click</button>\n\n <!-- This example requires Tailwind CSS v2.0+ -->\n <div v-show=\"show\" class=\"fixed z-10 inset-0 overflow-y-auto\" aria-labelledby=\"modal-title\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0\">\n <!--\n Background overlay, show/hide based on modal state.\n\n Entering: \"ease-out duration-300\"\n From: \"opacity-0\"\n To: \"opacity-100\"\n Leaving: \"ease-in duration-200\"\n From: \"opacity-100\"\n To: \"opacity-0\"\n -->\n <transition name=\"ease-out-overlay\">\n <div v-show=\"show\" class=\"fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity\"></div>\n </transition>\n\n <!-- This element is to trick the browser into centering the modal contents. -->\n <span class=\"hidden sm:inline-block sm:align-middle sm:h-screen\" aria-hidden=\"true\">​</span>\n\n <!--\n Modal panel, show/hide based on modal state.\n\n Entering: \"ease-out duration-300\"\n From: \"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\"\n To: \"opacity-100 translate-y-0 sm:scale-100\"\n Leaving: \"ease-in duration-200\"\n From: \"opacity-100 translate-y-0 sm:scale-100\"\n To: \"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\"\n -->\n <transition name=\"ease-out-modal\">\n <div v-show=\"show\" class=\"inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full\">\n <div class=\"bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4\">\n <div class=\"sm:flex sm:items-start\">\n <div class=\"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10\">\n <!-- Heroicon name: outline/exclamation -->\n <svg class=\"h-6 w-6 text-red-600\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\" />\n </svg>\n </div>\n <div class=\"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left\">\n <h3 class=\"text-lg leading-6 font-medium text-gray-900\" id=\"modal-title\">\n Deactivate account\n </h3>\n <div class=\"mt-2\">\n <p class=\"text-sm text-gray-500\">\n Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse\">\n <button @click=\"show = false\" type=\"button\" class=\"w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm\">\n Deactivate\n </button>\n <button type=\"button\" class=\"mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm\">\n Cancel\n </button>\n </div>\n </div>\n </transition>\n </div>\n </div>\n\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { Component, Vue, Prop } from 'nuxt-property-decorator';\n\n@Component\nexport default class TestModal extends Vue {\n @Prop({ type: Boolean, required: false })\n show: boolean = false;\n\n layout () {\n return 'none';\n }\n}\n</script>\n\n<style scoped>\n\n.ease-out-overlay-enter-active, .ease-out-overlay-leave-active {\n @apply opacity-100 duration-300;\n}\n\n.ease-out-overlay-enter, .ease-out-overlay-leave-to /* .fade-leave-active below version 2.1.8 */ {\n @apply ease-in opacity-0 duration-200;\n}\n\n.ease-out-modal-enter-active, .ease-out-modal-leave-active {\n @apply opacity-100 translate-y-0 sm:scale-100 duration-300;\n}\n\n.ease-out-modal-enter, .ease-out-modal-leave-to /* .fade-leave-active below version 2.1.8 */ {\n @apply ease-in opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95 duration-200;\n}\n\n</style>\n```\n\n```text\nv-show=\"show\"\n```\n\n```text\nleave-active-class=\"duration-300\"\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.926Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":219,"estimatedTokens":1630}}532{"id":"stack-65049624","source":"stackoverflow","questionId":65049624,"title":"Tailwind CSS \"sm:block\" class is not overwriting \"hidden\" class after passing the \"sm:\" breakpoint","tags":["reactjs","next.js","responsive","tailwind-css"],"text":"Title: Tailwind CSS \"sm:block\" class is not overwriting \"hidden\" class after passing the \"sm:\" breakpoint\nTags: reactjs, next.js, responsive, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am following a navbar tutorial from the creator of TailwindCSS on Youtube and I am stuck on this part, where the `sm:block` class should override the `hidden` class when the screen width hits the `sm:` breakpoint.\n\nThis almost exactly the same example works as expected, where the items show when the page's width is increased.\n\nHowever, when I try to implement this on my project which is created using `npx create-next-app --example blog-starter-typescript`. This is where I got it from, the items on the navbar don't show when the page width is increased.\n\nHere is the exact spot in my repowhere this doesn't work.\n\nIf I replace `hidden sm:block` with `sm:hidden block` it works. and if I add a different background colour to each breakpoint, that also works.\n\nCan anyone see what I am doing wrong?\n\nThanks\n\n========================================\n\nTop Answer:\n`hidden` is not override correctly\ntry `sm:!block`\n\n========================================\n\nCode:\n```text\nsm:block\n```\n\n```text\nhidden\n```\n\n```text\nsm:\n```\n\n```text\nnpx create-next-app --example blog-starter-typescript\n```\n\n```text\nhidden sm:block\n```\n\n```text\nsm:hidden block\n```\n\n```text\ndisplay : hidden !important\n```\n\n```text\nhidden\n```\n\n```text\nsm:!block\n```\n\n========================================\n\nComments:\n- Welcome to SO, it would be nice if you please make sure to provide the right and relevant answer (not assumptions) and proper reference link behind your solution with example. Thank you for your contribution.\n- @ASMSayem that is the right and relevant answer \"!\" makes it important if it that wasn't obvious.","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":69,"estimatedTokens":447}}533{"id":"stack-67242266","source":"stackoverflow","questionId":67242266,"title":"setting image next to text without text wrapping around image with tailwind","tags":["css","tailwind-css"],"text":"Title: setting image next to text without text wrapping around image with tailwind\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have this web page layout where I want the text be right of the image\nbut if by height the text expands It wont overflow to the left side below the image like so:\n\nhttps://i.sstatic.net/aWaoT.png\n\nMy code looks like so:\n\n```\n\n \n \n lorem ...\n \n \n```\n\nI am using float-left on my image which lets the text reside on the right, but if the text goes further from the image height it goes below the image like so:\n\nhttps://i.sstatic.net/TKauN.png\n\nI tried adding `float-right` to my item body but then the whole text went below my image.\n\nI tried adding the `clear` attribute but nothing seems to do the thing.\n\n========================================\n\nCode:\n```text\n<div class=\"content py-2 px-10\">\n <img class=\"w-48 h-48 float-left \" src=\"#\" alt=\"\">\n <div class=\"item-body \">\n lorem ...\n </div>\n </div>\n```\n\n```text\nfloat-right\n```\n\n```text\nclear\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n<div class=\"content flex py-2\">\n <img class=\"w-48 h-48\" src=\"#\" alt=\"\">\n <div class=\"item-body px-2 \">\n Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.\n\nThe standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.\n </div>\n </div>\n```\n\n```text\nfloat-left\n```\n\n```text\nflex\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":68,"estimatedTokens":607}}534{"id":"stack-79495678","source":"stackoverflow","questionId":79495678,"title":"Tailwind @apply doesn't work with @layer base and @layer components anymore in v4","tags":["css","tailwind-css","tailwind-css-4"],"text":"Title: Tailwind @apply doesn't work with @layer base and @layer components anymore in v4\nTags: css, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nDocs says in v4 base and components layers are still defined with `@layer base` and `@layer components`, also in v3 classes defined like that could be used with `@apply`. The problem is they fail in v4.\n\nhttps://tailwindcss.com/docs/adding-custom-styles#adding-base-styles\n\nPractically it means I am forced to define all base, components and utilities layers with `@utility` to be able to use those classes with `@apply` which of course would create a big mess.\n\nI could define all layers with `@utility` and then set layers in `@import` statement but that also doesn't look too nice.\n\n```\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/base.css\" layer(base);\n@import \"tailwindcss/components.css\" layer(components);\n@import \"tailwindcss/utilities.css\" layer(utilities);\n```\n\nSo at the end how to do this in v4? I already have a lot of code that uses custom classes with `@apply` defined in base and components layers and now in v4 they produce `Cannot apply unknown utility class`. On the other hand I dont want to define base and components as utilities.\n\nI saw similar Github issues without obvious solution. If I use `@reference` I get `@custom-variant cannot be nested.` and `@utility cannot be nested.`.\n\nhttps://github.com/tailwindlabs/tailwindcss/discussions/16429\n\nhttps://github.com/tailwindlabs/tailwindcss/discussions/13336\n\nYou can see my styles code here:\n\nhttps://github.com/nemanjam/nemanjam.github.io/tree/feat/tailwind4-v2/src/styles\n\n========================================\n\nCode:\n```css\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/base.css\" layer(base);\n@import \"tailwindcss/components.css\" layer(components);\n@import \"tailwindcss/utilities.css\" layer(utilities);\n```\n\n```text\n@layer base\n```\n\n```text\n@layer components\n```\n\n```text\n@apply\n```\n\n```text\n@utility\n```\n\n```text\n@apply\n```\n\n```text\n@utility\n```\n\n```text\n@import\n```\n\n```text\n@apply\n```\n\n```text\nCannot apply unknown utility class\n```\n\n```text\n@reference\n```\n\n```text\n@custom-variant cannot be nested.\n```\n\n```text\n@utility cannot be nested.\n```\n\n```css\n@utility foo {\n @layer base {\n …\n }\n}\n```\n\n```text\n@layer\n```\n\n```text\n@utility\n```\n\n```text\n@apply\n```\n\n```text\n@layer\n```\n\n```text\n@utility\n```\n\n```text\n@apply\n```\n\n========================================\n\nComments:\n- Isnt it confusing and counterintuitive to define layer base using `@utility` directive?\n- So its unclear what does `@layer base` directive do in v4? Does it do anything at all?\n- V4 leverages `@layer` directives to organize its CSS rules. Consider reading up on CSS cascade layers if you would like.\n- It is confusing and counterintuitive to define layer base using `@utility` directive. Base styles shouldn't ever need to be used with `@apply`, and thus they wouldn't need to be declared with `@utility`.\n- But components layer makes sense with `@apply`.\n- I fundamentally disagree with Adam on the use of @apply. I understand his sentiment, and the reason why, but his view of it is unfortunately, narrow-minded. I use apply and scoped css in my components when that utility-class list gets awfully long (which happens a lot if you're having to support somewhat decent responsive design). IMHO, it is much nicer and easier to read a list of classes in a vertical fashion, as part of your scoped css, rather than horizontally, which is just really difficult to read, particularly if you're debugging particular rules...","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":20,"totalLines":131,"estimatedTokens":897}}535{"id":"stack-67210709","source":"stackoverflow","questionId":67210709,"title":"Failed to do the line break in Tailwind CSS table","tags":["html","css","laravel","laravel-blade","tailwind-css"],"text":"Title: Failed to do the line break in Tailwind CSS table\nTags: html, css, laravel, laravel-blade, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nCan someone help to troubleshoot this issue? I want to make the line break while touching the cell's border, but you can see at the bottom right corner ( Last Row, REASON column) there, the *This is a long.....reason* didn't break when it hit the border. I have tried the table-fixed, word-break..methods, all no use for me. May I ask what might be the cause?\n\n(Sorry, the HTML code might look a bit messy as I have been trying a different way.)\n\nhttps://i.sstatic.net/ZCK2X.png\n\n```\n\n \n \n \n \n \n \n Requestor\n \n ......\n \n Reason\n \n @can('manage-users')\n \n Edit\n \n @endif\n \n \n \n @foreach ($applications as $application)\n \n \n \n \n \n \n \n \n {{ $application->user->name }}\n \n \n {{ $application->user->email }}\n \n \n \n \n ...\n \n {{ $application->request_reason }}\n \n @can('manage-users')\n \n id }}, 'Approve')\">\n Approve\n \n id }}, 'Reject')\">\n Reject\n \n \n @endif\n \n @endforeach\n \n \n \n \n\n```\n\n========================================\n\nCode:\n```text\n<div class=\"-my-2 overflow-hidden sm:-mx-6\">\n <div class=\"py-2 align-middle inline-block sm:px-6 lg:px-8\">\n <div class=\"shadow overflow-hidden border-b border-gray-200 sm:rounded-lg\">\n <table class=\"divide-y divide-gray-200 table-fixed\">\n <thead class=\"bg-gray-50\">\n <tr>\n <th class=\"w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider\">\n Requestor\n </th>\n ......\n <th class=\"w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider\">\n Reason\n </th>\n @can('manage-users')\n <th scope=\"col\" class=\"relative px-6 py-3 bg-gray-200 \">\n <span class=\"sr-only\">Edit</span>\n </th>\n @endif\n </tr>\n </thead>\n <tbody class=\"bg-white divide-y divide-gray-200\">\n @foreach ($applications as $application)\n <tr>\n <td class=\"px-6 py-4 whitespace-nowrap\">\n <div class=\"flex items-center\">\n <div class=\"flex-shrink-0 h-10 w-10\">\n <img class=\"h-10 w-10 rounded-full\"\n src=\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60\"\n alt=\"\">\n </div>\n <div class=\"ml-4\">\n <div class=\"text-sm font-medium text-gray-900\">\n {{ $application->user->name }}\n </div>\n <div class=\"text-sm text-gray-500\">\n {{ $application->user->email }}\n </div>\n </div>\n </div>\n </td>\n ...\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n {{ $application->request_reason }}\n </td>\n @can('manage-users')\n <td class=\"px-6 py-4 whitespace-nowrap text-right text-sm font-medium\">\n <button\n class=\"bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full\"\n wire:click=\"selectItem({{ $application->id }}, 'Approve')\">\n Approve\n </button>\n <button\n class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full\"\n wire:click=\"selectItem({{ $application->id }}, 'Reject')\">\n Reject\n </button>\n </td>\n @endif\n </tr>\n @endforeach\n </tbody>\n </table>\n </div>\n </div>\n</div>\n</div>\n</div>\n```\n\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.1/tailwind.min.css\" rel=\"stylesheet\" />\n\n<div class=\"-my-2 overflow-hidden sm:-mx-6\">\n <div class=\"py-2 align-middle inline-block sm:px-6 lg:px-8\">\n <div class=\"shadow overflow-hidden border-b border-gray-200 sm:rounded-lg\">\n <table class=\"divide-y divide-gray-200 table-fixed w-full\">\n <thead class=\"bg-gray-50\">\n <tr>\n <th class=\"w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider\">\n Requestor\n </th>\n <th class=\"w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider\">\n Reason\n </th>\n <th scope=\"col\" class=\"relative px-6 py-3 bg-gray-200 \">\n <span class=\"sr-only\">Edit</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"bg-white divide-y divide-gray-200\">\n <tr>\n <td class=\"px-6 py-4 whitespace-nowrap\">\n <div class=\"flex items-center\">\n <div class=\"flex-shrink-0 h-10 w-10\">\n <img class=\"h-10 w-10 rounded-full\" src=\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60\" alt=\"\">\n </div>\n <div class=\"ml-4\">\n <div class=\"text-sm font-medium text-gray-900\">\n Someone J\n </div>\n <div class=\"text-sm text-gray-500\">\n someone@gmail.com\n </div>\n </div>\n </div>\n </td>\n <td class=\"px-6 py-4 text-sm text-gray-500 break-all\">\n wefwe wefffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n</div>\n</div>\n</div>\n```\n\n```text\nbreak-all\n```\n\n```text\nw-full\n```\n\n```text\n<table>\n```\n\n```text\nbreak-normal\n```\n\n```text\nmax-width\n```\n\n========================================\n\nComments:\n- Try setting a maximum width for the cell\n- @AjithGopi the cell did become smaller but the line doesn't wrap\n- Try adding the class `break-normal`\n- @AjithGopi Thanks for your reply but not working as well","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":223,"estimatedTokens":1756}}536{"id":"stack-79519148","source":"stackoverflow","questionId":79519148,"title":"Missing tailwind.config.js in Latest Tailwind CSS and Next.js Versions - Issues Configuring Hero UI","tags":["typescript","next.js","tailwind-css","nextui"],"text":"Title: Missing tailwind.config.js in Latest Tailwind CSS and Next.js Versions - Issues Configuring Hero UI\nTags: typescript, next.js, tailwind-css, nextui\nSource: Stack Overflow\n\nQuestion:\nI'm trying to configure Hero UI (or any component library) with the latest versions of Tailwind CSS and Next.js. However, I'm facing issues because there's no tailwind.config.js file in my project, and I'm unsure how to proceed with the configuration.\n\nHere are the details:\n\n*Versions:*\n\nNext.js: 14.x\n\nTailwind CSS: 3.x\n\nHero UI: latest\n\nIssue:\n\nAfter installing Tailwind CSS using the official guide, I don't see a tailwind.config.js file in my project.\n\nI need to customize Tailwind to work with Hero UI components, but I'm unable to do so without the config file.\n\nSteps I've Taken:\n\nInstalled Tailwind CSS using the following command:\n\n```\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init\n```\n\nAdded the following to my postcss.config.js:\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\nAdded the following to my globals.css\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nExpected Behavior:\n\nA tailwind.config.js file should be generated automatically, allowing me to customize Tailwind for Hero UI.\n\nActual Behavior:\n\nNo tailwind.config.js file is created, and I'm unable to configure Tailwind for Hero UI.\n\nAdditional Information:\n\nI'm using the latest versions of Next.js and Tailwind CSS.\n\nI've tried manually creating a tailwind.config.js file, but I'm unsure of the correct configuration for Hero UI.\n\nCould someone please guide me on how to resolve this issue? Thank you!\n\n========================================\n\nTop Answer:\n**In Tailwind CSS v4, the `tailwind.config.js` file no longer exists — that's why you can’t find it.**\n\nTailwind 4 introduced a new configuration system that uses the `@theme` and `@import` directives directly inside your CSS instead of a config file.\n\nSo instead of customizing Tailwind through `tailwind.config.js`, you now customize everything inside your main CSS file(global.css file in next.js), like this\n\n```\n@import \"tailwindcss\";\n\n@theme {\n --color-brand: #4f46e5;\n --radius-card: 12px;\n}\n```\n\n========================================\n\nCode:\n```text\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```none\nnpm uninstall autoprefixer\nnpm install tailwindcss @tailwindcss/postcss postcss\n```\n\n```js\nexport default {\n plugins: {\n \"@tailwindcss/postcss\": {}, /* instead of tailwindcss */\n }\n}\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```none\nnpm install tailwindcss@3\n```\n\n```none\nnpm install -D tailwindcss@3 postcss autoprefixer\nnpx tailwindcss init\n```\n\n```js\nexport default {\n plugins: {\n \"tailwindcss\": {},\n }\n}\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n \n // Or if using `src` directory:\n \"./src/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\ninit\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@theme\n```\n\n```text\n@plugin\n```\n\n```text\n@variant\n```\n\n```text\n@custom-variant\n```\n\n```text\n@utility\n```\n\n```text\ntailwindcss@3\n```\n\n```text\n@import \"tailwindcss\";\n\n@theme {\n --color-brand: #4f46e5;\n --radius-card: 12px;\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@theme\n```\n\n```text\n@import\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- Yeah: stackoverflow.com/a/79519233/15167500","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":24,"totalLines":227,"estimatedTokens":960}}537{"id":"stack-75100680","source":"stackoverflow","questionId":75100680,"title":"Issue using 'inherit' with Tailwind CSS","tags":["next.js","jsx","tailwind-css"],"text":"Title: Issue using 'inherit' with Tailwind CSS\nTags: next.js, jsx, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWhen I use the `inherit` property on a `` it doesn't take the color of the parent, but it instead takes the color of the sibling.\n\nMy JSX:\n\n```\n\n \n \n \n\n```\n\nI want the `span` to take the blue color, not the white one.\n\nI tried to put `important` on the `bg-color` of the parent, but that doesn't work.\n\nAny ideas?\n\n========================================\n\nCode:\n```html\n<div className={`relative flex items-center justify-center bg-blue-500`}>\n <span\n className={`bg-rose-600 border-4 border-inherit h-16 w-16 absolute top-1 rounded-full duration-500 ${Menus[active].dis}`}>\n </span>\n <div className={`bg-white max-h-[4.4rem] max-w-[360px] px-6 rounded-t-xl mt-6`}>\n</div>\n```\n\n```text\ninherit\n```\n\n```text\n<span>\n```\n\n```text\nspan\n```\n\n```text\nimportant\n```\n\n```text\nbg-color\n```\n\n```text\n<div class=\"... border-amber-400 \"> 👈 add border color here \n <span class=\"border-inherit ... \"> </span>\n <div class=\"... \"></div>\n</div>\n```\n\n```text\n<div class=\"relative flex items-center justify-center border-amber-400 bg-blue-500\">\n <span class=\"absolute top-1 h-16 w-16 rounded-full border-4 border-inherit bg-rose-600 duration-500\"> </span>\n <div class=\"mt-6 max-h-[4.4rem] max-w-[360px] rounded-t-xl bg-white px-6\"></div>\n</div>\n```\n\n```text\nborder-color\n```\n\n========================================\n\nComments:\n- You are using `border-inherit`, but the parent doesn't have a border. If you try to inherit the background, you overdrive it with `bg-rose-600`. What exactly are you trying to do? Your explanation is somewhat confusing to understand.\n- I want that the border of the Child has the same color of the parent div\n- But the parent div doesn't have a border/border color. Are you trying to do something like this? play.tailwindcss.com/to0hWjaPwu\n- I understand my mistake sorry of course with a border-color of the parent it works ...","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":80,"estimatedTokens":494}}538{"id":"stack-74989027","source":"stackoverflow","questionId":74989027,"title":"Tailwind css break-word not working in input field","tags":["css","reactjs","tailwind-css"],"text":"Title: Tailwind css break-word not working in input field\nTags: css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nNow my reactjs input field looked like this.\nhttps://i.sstatic.net/TuOd1.png\n\nAs you can see the text just keeps going straight and not moving down to the next line. How do I solve this? Here is my code for this input field.\n\n```\n setEventName(event.target.value)} value={eventName}/>\n```\n\n========================================\n\nTop Answer:\nNot sure if you still need help, but incase anyone else needs help with this same issue later on and is hellbent on not using a **div** like I was, then use **textarea** to solve this issue. It functions just the same as an input, but the **input** tag isn't designed to support multi line input, whereas the **textarea** tag is designed for that.\n\n========================================\n\nCode:\n```text\n<input className=\"bg-slate-50 text-main-blue border border-gray-300 drop-shadow-lg text-sm rounded-md my-5 block w-full p-2.5 whitespace-normal word-break:break-word\" type=\"text\" name=\"eventName\" placeholder=\"Event Name\" required onChange={event => setEventName(event.target.value)} value={eventName}/>\n```\n\n```text\n<div class=\"m-4 max-w-full overflow-y-hidden break-words border border-solid border-black text-4xl\" contenteditable=\"true\"></div>\n```\n\n```text\nword-break:break-word\n```\n\n```text\nbreak-words\n```\n\n```text\nword-break:break-word\n```\n\n```text\ntextarea\n```\n\n```text\ntext\n```\n\n```text\ntype = \"textarea\"\n```\n\n```text\ncontenteditable\n```\n\n```text\ndiv\n```\n\n```text\nbreak-words\n```\n\n```text\nTailwind Play\n```\n\n========================================\n\nComments:\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":74,"estimatedTokens":471}}539{"id":"stack-77181779","source":"stackoverflow","questionId":77181779,"title":"Is it possible to use Tailwind to create a responsive grid (dynamic number of columns that wraps to new row when appropriate)?","tags":["html","css","tailwind-css","css-grid"],"text":"Title: Is it possible to use Tailwind to create a responsive grid (dynamic number of columns that wraps to new row when appropriate)?\nTags: html, css, tailwind-css, css-grid\nSource: Stack Overflow\n\nQuestion:\nhttps://play.tailwindcss.com/gUoOBmaNxj was my attempt:\n\n```\n\n \n 1\n 2 this one is taller\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n 10\n \n\n```\n\nBut you can see that it just creates 1 row and doesn't wrap.\n\nhttps://i.sstatic.net/Tgy6C.png\n\nI don't understand the Tailwind grid docs (e.g. https://tailwindcss.com/docs/grid-auto-columns).\n\nThe red-bordered container represents the screen width.\n\nI want people to be able to resize their screens and have the grid adjust.\n\nBut I don't want to need to use breakpoints like `sm:` and `md:` and specify a number of columns for each.\n\n========================================\n\nCode:\n```html\n<div class=\"w-96 border-2 border-red-500\">\n <div class=\"grid auto-cols-max grid-flow-col gap-2 border-2 border-black\">\n <div class=\"w-20 bg-blue-500 p-4\">1</div>\n <div class=\"w-20 bg-green-500 p-4\">2 this one is taller</div>\n <div class=\"w-20 bg-red-500 p-4\">3</div>\n <div class=\"w-20 bg-yellow-500 p-4\">4</div>\n <div class=\"w-20 bg-purple-500 p-4\">5</div>\n <div class=\"w-20 bg-pink-500 p-4\">6</div>\n <div class=\"w-20 bg-indigo-500 p-4\">7</div>\n <div class=\"w-20 bg-teal-500 p-4\">8</div>\n <div class=\"w-20 bg-cyan-500 p-4\">9</div>\n <div class=\"w-20 bg-gray-500 p-4\">10</div>\n </div>\n</div>\n```\n\n```text\nsm:\n```\n\n```text\nmd:\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.3.3\"></script>\n\n<div class=\"w-96 border-2 border-red-500\">\n <div class=\"grid grid-cols-[repeat(auto-fill,5rem)] gap-2 border-2 border-black\">\n <div class=\"w-20 bg-blue-500 p-4\">1</div>\n <div class=\"w-20 bg-green-500 p-4\">2 this one is taller</div>\n <div class=\"w-20 bg-red-500 p-4\">3</div>\n <div class=\"w-20 bg-yellow-500 p-4\">4</div>\n <div class=\"w-20 bg-purple-500 p-4\">5</div>\n <div class=\"w-20 bg-pink-500 p-4\">6</div>\n <div class=\"w-20 bg-indigo-500 p-4\">7</div>\n <div class=\"w-20 bg-teal-500 p-4\">8</div>\n <div class=\"w-20 bg-cyan-500 p-4\">9</div>\n <div class=\"w-20 bg-gray-500 p-4\">10</div>\n </div>\n</div>\n\n<div class=\"border-2 border-red-500\">\n <div class=\"grid grid-cols-[repeat(auto-fill,5rem)] gap-2 border-2 border-black\">\n <div class=\"w-20 bg-blue-500 p-4\">1</div>\n <div class=\"w-20 bg-green-500 p-4\">2 this one is taller</div>\n <div class=\"w-20 bg-red-500 p-4\">3</div>\n <div class=\"w-20 bg-yellow-500 p-4\">4</div>\n <div class=\"w-20 bg-purple-500 p-4\">5</div>\n <div class=\"w-20 bg-pink-500 p-4\">6</div>\n <div class=\"w-20 bg-indigo-500 p-4\">7</div>\n <div class=\"w-20 bg-teal-500 p-4\">8</div>\n <div class=\"w-20 bg-cyan-500 p-4\">9</div>\n <div class=\"w-20 bg-gray-500 p-4\">10</div>\n </div>\n</div>\n```\n\n```text\ngrid-template-columns: repeat(auto-fill, <size>)\n```\n\n```text\ngrid-template-columns: repeat(auto-fit, <size>)\n```\n\n```text\ngrid-cols-*\n```\n\n```text\n<size>\n```\n\n```text\n5rem\n```\n\n========================================\n\nComments:\n- I think that's probably exactly what I wanted! Right, I'd specified the cell widths via `w-20`, which is `5rem` according to tailwindcss.com/docs/width, so your approach is probably what I was looking for. I never would have figured this out from the docs. Thanks!\n- Epic answer, works as advertised, thank you! More importantly, I'm surprised there isn't a more obvious/direct way to do this in Tailwind.\n- I know I am late. But I want to add a little more to the answer , `grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-10` . This will make every grid at least `300px` and when small screen each grid will take whole screen width.","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":124,"estimatedTokens":922}}540{"id":"stack-73225541","source":"stackoverflow","questionId":73225541,"title":"Tailwind autogenerated css file variables empty","tags":["css","tailwind-css","postcss","tailwind-css-3"],"text":"Title: Tailwind autogenerated css file variables empty\nTags: css, tailwind-css, postcss, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI am using tailwind with postcss configuration that generates a CSS file to be used in production with only the needed CSS classes for the app. However, when the CSS file gets generated, I noticed many empty CSS variables that, in my opinion, are not serving any purpose and my IDE is recognizing them as an error. An example of one of these classes is the following:\n\n```\n*, ::before, ::after {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n```\n\nHow can I get rid of those classes if they are not necessary? Most importantly how can I stop Tailwind from auto-generating these classes? Am I doing something wrong?\n\nThis is my tailwind.config.js:\n\n```\nmodule.exports = {\n content: [\"./src/**/*.{vue,js,ts,jsx,tsx}\"],\n theme: {\n colors: {\n \"primary-darker\": \"#45622E\",\n \"primary-dark\": \"#5A7B31\",\n \"primary-med\": \"#76A340\",\n primary: \"#96BA57\",\n \"primary-light\": \"#F3F9EC\",\n white: \"#FFFFFF\",\n \"secondary-dark\": \"#202020\",\n secondary: \"#262626\",\n \"secondary-light\": \"#373737\",\n \"active-gray\": \"#999999\",\n \"inactive-grey\": \"#D8D8D8\",\n \"background-grey\": \"#F8F8F8\",\n \"background-light\": \"#F2F2F2\",\n success: \"#83C117\",\n alert: \"#B63A2F\",\n current: \"currentColor\",\n },\n extend: {\n fontFamily: {\n konnect: \"Konnect, Helvetica, Arial, sans-serif\",\n \"konnect-medium\": \"Konnect Medium, Helvetica, Arial, sans-serif\",\n \"konnect-semibold\": \"Konnect SemiBold, Helvetica, Arial, sans-serif\",\n \"konnect-light\": \"Konnect Light, Helvetica, Arial, sans-serif\",\n },\n },\n },\n plugins: [],\n};\n```\n\nand this is the command I use to auto generate file with tailwind:\n\n```\n\"tailwinds:build\": \"npx tailwindcss -i src/assets/sass/tailwind.scss -o ./public/output.css --watch\"\n```\n\n========================================\n\nCode:\n```text\n*, ::before, ::after {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n```\n\n```text\nmodule.exports = {\n content: [\"./src/**/*.{vue,js,ts,jsx,tsx}\"],\n theme: {\n colors: {\n \"primary-darker\": \"#45622E\",\n \"primary-dark\": \"#5A7B31\",\n \"primary-med\": \"#76A340\",\n primary: \"#96BA57\",\n \"primary-light\": \"#F3F9EC\",\n white: \"#FFFFFF\",\n \"secondary-dark\": \"#202020\",\n secondary: \"#262626\",\n \"secondary-light\": \"#373737\",\n \"active-gray\": \"#999999\",\n \"inactive-grey\": \"#D8D8D8\",\n \"background-grey\": \"#F8F8F8\",\n \"background-light\": \"#F2F2F2\",\n success: \"#83C117\",\n alert: \"#B63A2F\",\n current: \"currentColor\",\n },\n extend: {\n fontFamily: {\n konnect: \"Konnect, Helvetica, Arial, sans-serif\",\n \"konnect-medium\": \"Konnect Medium, Helvetica, Arial, sans-serif\",\n \"konnect-semibold\": \"Konnect SemiBold, Helvetica, Arial, sans-serif\",\n \"konnect-light\": \"Konnect Light, Helvetica, Arial, sans-serif\",\n },\n },\n },\n plugins: [],\n};\n```\n\n```text\n\"tailwinds:build\": \"npx tailwindcss -i src/assets/sass/tailwind.scss -o ./public/output.css --watch\"\n```\n\n========================================\n\nComments:\n- Thank you for sharing. I know see that this is part of the framework utilization. We are using Codacy for detecting issues in our source coed. I guess we will just ignore the generated file for now since my IDE, as well as Codacy, are detecting these empty fields as issues.\n- Still, it sucks. Makes all pages using tailwind invalid according to W3C.\n- If Tailwind cared about what the W3C values then it wouldn't exist. It's inline styles all over again.","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":194,"estimatedTokens":1366}}541{"id":"stack-79458659","source":"stackoverflow","questionId":79458659,"title":"How to create config in Tailwind CSS v4","tags":["css","tailwind-css","tailwind-css-4"],"text":"Title: How to create config in Tailwind CSS v4\nTags: css, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\n### Context\n\nI am trying to create custom animation in Tailwind CSS v4. I am stuck because the `tailwind.config.js` file is deprecated by this tailwind version and I don't find out an alternative.\n\nFor example, I want a custom animation and I found online this animation in js format:\n\n```\ntailwind.config = {\n theme: {\n extend: {\n keyframes: {\n typing: {\n \"0%\": {\n width: \"0%\",\n visibility: \"hidden\"\n },\n \"100%\": {\n width: \"100%\"\n }\n },\n blink: {\n \"50%\": {\n borderColor: \"transparent\"\n },\n \"100%\": {\n borderColor: \"white\"\n }\n }\n },\n animation: {\n typing: \"typing 2s steps(20) infinite alternate, blink .7s infinite\"\n }\n },\n },\n plugins: [],\n }\n```\n\n### Question\n\nHow I can obtain the same result in Tailwind v4? I don't understand the general rule to translate js config files into Tailwind v4 syntax.\n\n### What I found\n\nOn the documentation I found how to force Tailwind v4 to use `tailwind.config.js`, but it is a legacy approach which excludes also some functionality. Since I am building a site from scratch, I don't think I have to adopt deprecated operations.\n\nI saw other answer about this topic, but no one of them explain how to pass from js config to Tailwind v4 config. For instance, in this answer is explained only how to achieve the translation of only that piece of code, but it is not enough for what I aim to obtain.\n\nI tried to translate in Tailwind v4 the file I found online looking at that answer:\n\n```\n@utility keyframes {\n @variant typing {\n \n }\n}\n\n@utility animation {\n @variant typing {\n\n }\n}\n```\n\nBut I still stuck because I don't know how to translate some js file slices like this:\n\n```\n// ...\n typing: {\n \"0%\": // ...\n```\n\ninto Tailwind v4 syntax.\n\n========================================\n\nCode:\n```js\ntailwind.config = {\n theme: {\n extend: {\n keyframes: {\n typing: {\n \"0%\": {\n width: \"0%\",\n visibility: \"hidden\"\n },\n \"100%\": {\n width: \"100%\"\n }\n },\n blink: {\n \"50%\": {\n borderColor: \"transparent\"\n },\n \"100%\": {\n borderColor: \"white\"\n }\n }\n },\n animation: {\n typing: \"typing 2s steps(20) infinite alternate, blink .7s infinite\"\n }\n },\n },\n plugins: [],\n }\n```\n\n```css\n@utility keyframes {\n @variant typing {\n \n }\n}\n\n@utility animation {\n @variant typing {\n\n }\n}\n```\n\n```js\n// ...\n typing: {\n \"0%\": // ...\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```css\n@theme {\n --animate-wiggle: wiggle 1s ease-in-out infinite;\n\n @keyframes wiggle {\n 0%,\n 100% {\n transform: rotate(-3deg);\n }\n 50% {\n transform: rotate(3deg);\n }\n }\n}\n```\n\n```html\n<div class=\"animate-wiggle\">\n <!-- ... -->\n</div>\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n --animate-typing: typing 2s steps(20) infinite alternate, blink .7s infinite;\n\n @keyframes typing {\n 0% {\n width: 0%;\n visibility: hidden;\n }\n 100% {\n width: 100%;\n }\n }\n @keyframes blink {\n 50% {\n border-color: transparent;\n }\n 100% {\n border-color: white;\n }\n }\n}\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4.0.8\"></script>\n\n<style type=\"text/tailwindcss\">\n@theme {\n --animate-typing: typing 2s steps(20) infinite alternate, blink .7s infinite;\n\n @keyframes typing {\n 0% {\n width: 0%;\n visibility: hidden;\n }\n 100% {\n width: 100%;\n }\n }\n @keyframes blink {\n 50% {\n border-color: transparent;\n }\n 100% {\n border-color: white;\n }\n }\n}\n</style>\n\n<div class=\"animate-typing h-10 bg-red-500 border-r-10\"></div>\n```\n\n```text\n--animate-*\n```\n\n```text\nanimate-wiggle\n```\n\n========================================\n\nComments:\n- The general rule to write config in Tailwind v4 syntax config which I was looking for is in this part of documentation, reachable from which one you linked. Thank you for help finding the right place, I'm new to Tailwind and I found difficult that part of documentation.","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":232,"estimatedTokens":1059}}542{"id":"stack-79391628","source":"stackoverflow","questionId":79391628,"title":"Unable to upgrade Tailwind CSS v3 to v4","tags":["reactjs","migration","tailwind-css","vite","tailwind-css-4"],"text":"Title: Unable to upgrade Tailwind CSS v3 to v4\nTags: reactjs, migration, tailwind-css, vite, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI am unable to upgrade my old vite React project with **Tailwind CSS v3** to **Tailwind CSS v4** by using the below command:\n\n`npx @tailwindcss/upgrade@next`\n\nThe terminal output screenshot:\n\nError Message\n\nAt first I was using the command:\n\n`npx @tailwindcss/upgrade@next`\n\nbut it was showing something related to git cache clear warn message. That's a different thing; thats why I have used `--force` after the command:\n\n`npx @tailwindcss/upgrade@next --force`\n\nAlso, it was running without `--force` itself.\nBut the problem is that it's showing the error:\n\n`↳ Could not load the configuration file: Can't resolve`\n\nas per the above screenshot.\n\nI will really appreciate it if anyone can help me regarding this issue, as I am unable to convert all of my old tailwind css react vite projects.\n\n========================================\n\nCode:\n```text\nnpx @tailwindcss/upgrade@next\n```\n\n```text\nnpx @tailwindcss/upgrade@next\n```\n\n```text\n--force\n```\n\n```text\nnpx @tailwindcss/upgrade@next --force\n```\n\n```text\n--force\n```\n\n```text\n↳ Could not load the configuration file: Can't resolve\n```\n\n```text\npath.relative(…)\n```\n\n```text\n./\n```\n\n```text\nfile.relative(…)\n```\n\n```text\n./\n```\n\n========================================\n\nComments:\n- Did you end up Using Windows Subsystem for Linux to get this working? Or how did you end up resolving it?\n- Now fixed in #15927.","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":78,"estimatedTokens":377}}543{"id":"stack-67469718","source":"stackoverflow","questionId":67469718,"title":"How to hide flashing dialog content when page is loading?","tags":["tailwind-css","alpine.js"],"text":"Title: How to hide flashing dialog content when page is loading?\nTags: tailwind-css, alpine.js\nSource: Stack Overflow\n\nQuestion:\nOn tailwindcss, Alpinejs page I use modal which is opened by click on button.\nProblem is that while page is loading I see flashing dialog content.\nI tried to set hidden class to modal window and in the end of init method\nto set isPageLoaded variable into true\n\n```\n\n \n Open modal\n \n \n \n\n \n\n...\n\n function app() {\n return {\n showModal : false,\n isPageLoaded : false,\n\n appInit: function () {\n console.log('appInit::')\n this.isPageLoaded= true\n },\n\n }\n }\n\n```\n\nAs a result I do not see flashing dialog content, but I can not show dialog modal, which I tried to set with:\n\n```\n'visible' : isPageLoaded\n```\n\nI mean to toggle hidden class I set by default. But that does not work.\n\nCould you please check pen :\nhttps://codepen.io/petrogromovo/pen/yLMNVLr\n\nThanks in advance!\n\n========================================\n\nCode:\n```text\n<div class=\"overflow-auto border-2 border-grey-900\" x-data=\"app()\" x-init=\"appInit()\">\n\n <div class=\"w-full h-full\">\n <button\n type=\"button\"\n class=\"bg-transparent border border-gray-500 hover:border-indigo-500 text-gray-500 hover:text-indigo-500 font-bold py-2 px-4 rounded-full\"\n @click=\"showModal = true\"\n >Open modal\n </button>\n </div>\n <!--Overlay-->\n\n <div class=\"overflow-auto w-full h-full hidden\" style=\"background-color: rgba(0,0,0,0.5)\" x-show=\"showModal\" :class=\"{ 'fixed inset-0 z-10 flex items-center justify-center': showModal, 'visible' : isPageLoaded }\">\n\n...\n<script>\n\n function app() {\n return {\n showModal : false,\n isPageLoaded : false,\n\n appInit: function () {\n console.log('appInit::')\n this.isPageLoaded= true\n },\n\n }\n }\n\n</script>\n```\n\n```text\n'visible' : isPageLoaded\n```\n\n```text\n[x-cloak] { display: none; }\n```\n\n```text\nx-cloak\n```\n\n```text\nx-cloak\n```\n\n========================================\n\nComments:\n- Thanks! Looks like it works. Also have I always to put x-cloak in the same div with x-data and x-init ? I suppose in all cases I have to hide html inside x-data and x-init ?\n- @PetroGromovo You can put it on any element. In this specific case, you should put it on the element that has `x-show=\"showModal\"`, since that's the element you don't want flashing up while the page is loading.\n- Why do they not fix it, so you do not need x-cloak on everything?","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":109,"estimatedTokens":627}}544{"id":"stack-65655722","source":"stackoverflow","questionId":65655722,"title":"How to grow rotated text with tailwind css","tags":["tailwind-css"],"text":"Title: How to grow rotated text with tailwind css\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have this html example:\n\n```\n\n \n \n \n \n \n \n SUBSCRIBE AND CANCEL ANYTIME ANYWHERE\n \n \n \n \n \n \n \n \n \n \n mid\n right\n \n \n \n```\n\nI would like text to look it like this:\n\nhttps://i.sstatic.net/t27Bu.png\n\nbut for some reason it does not take all space, like this:\n\nhttps://i.sstatic.net/7UHeu.png\n\n========================================\n\nTop Answer:\nYou have way too much HTML in there for such a simple task. Start with this, it will give you basics of what you need\n\n```\nSUBSCRIBE AND CANCEL ANYTIME ANYWHERE\n```\n\n========================================\n\nCode:\n```html\n<div class=\"h-screen\">\n <div class=\"absolute inset-0 -z-1 bg-black\"></div>\n <div class=\"flex flex-col text-white h-screen\">\n <div class=\"flex justify-between h-full\">\n <div class=\"flex flex-col justify-between space-y-5 w-24\">\n <div class=\"h-2/3 bg-red-300\">\n <div class=\"block origin-left-top transform -rotate-90\">\n SUBSCRIBE AND CANCEL ANYTIME ANYWHERE\n </div>\n </div>\n <div class=\"flex flex-col items-center space-y-5\">\n <div class=\"pb-5\">\n <button\n class=\"border-white flex items-center justify-center border-2 w-10 h-10\"\n >\n <i-uil-comment-alt-dots />\n </button>\n </div>\n </div>\n </div>\n <div>mid</div>\n <div class=\"w-24\">right</div>\n </div>\n </div>\n </div>\n```\n\n```text\n<div className=\"rotate-180 bg-black text-white\"\n style={{ writingMode: 'vertical-rl' }}\n>\n SUBSCRIBE AND CANCEL ANYTIME ANYWHERE\n</div>\n```\n\n```text\n<div class=\"transform -rotate-90 bg-black text-white\">SUBSCRIBE AND CANCEL ANYTIME ANYWHERE</div>\n```\n\n========================================\n\nComments:\n- Thank you for your response. Problem is, I have this conteiner around, which sets some size limits, and with your solution I get somthing like (check image in description)\n- Try to add `inline-block` to @UXCODA code\n- Style apply helped thanks.","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":3,"totalLines":99,"estimatedTokens":528}}545{"id":"stack-77272678","source":"stackoverflow","questionId":77272678,"title":"Primeng not working correctly after adding Tailwindcss to Project","tags":["css","angular","typescript","tailwind-css","primeng"],"text":"Title: Primeng not working correctly after adding Tailwindcss to Project\nTags: css, angular, typescript, tailwind-css, primeng\nSource: Stack Overflow\n\nQuestion:\nI tried to create a project using both tailwindcss and primeng. But after I import Tailwind, the styles of Primeng are not applied any further\n\nI tried using the Tailwind prefix option, but as soon as I import Tailwind the styles of Primeng are not applied anymore.\nTo rule out other reasons, I created a fresh Angular project (Angular version 16) and installed only Tailwindcss and Primeng.\n\n`tailwind.config.js`\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n prefix: \"tw-\",\n}\n```\n\n`angular.json`\n\n```\n{\n \"assets\": [\n \"src/favicon.ico\",\n \"src/assets\"\n],\n\"styles\": [\n \"src/styles.css\"\n],\n\"scripts\": []\n},\n```\n\n`style.css`\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@import \"primeng/resources/themes/lara-light-blue/theme.css\";\n@import \"primeng/resources/primeng.css\";\n```\n\nIn the app component I have a few test divs (Primeng button and Input - Tailwind container with some styles)\n\nAfter I delete the tailwindcss imports (more precisely @tailwind/base) from the `style.css` the primeng components have the correct style. but the tailwind styles are lost\n\n========================================\n\nTop Answer:\nadd this into your tailwindcss.config.js :\n\n```\ncorePlugins: { preflight: false }\n```\n\nI tried and did it\n\n========================================\n\nCode:\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n prefix: \"tw-\",\n}\n```\n\n```text\n{\n \"assets\": [\n \"src/favicon.ico\",\n \"src/assets\"\n],\n\"styles\": [\n \"src/styles.css\"\n],\n\"scripts\": []\n},\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@import \"primeng/resources/themes/lara-light-blue/theme.css\";\n@import \"primeng/resources/primeng.css\";\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nangular.json\n```\n\n```text\nstyle.css\n```\n\n```text\nstyle.css\n```\n\n```text\n@import \"tailwindcss/base\" layer(tailwindcss);\n@import \"tailwindcss/components\" layer(tailwindcss);\n@import \"tailwindcss/utilities\" layer(tailwindcss);\n@import \"primeng/resources/themes/lara-light-blue/theme.css\";\n@import \"primeng/resources/primeng.css\";\n```\n\n```text\ncorePlugins: { preflight: false }\n```\n\n```css\n@layer tailwind-base, primeng, tailwind-utilities;\n \n@layer tailwind-base {\n @tailwind base;\n}\n\n@layer tailwind-utilities {\n @tailwind components;\n @tailwind utilities;\n}\n```\n\n```text\n@import 'primeng/resources/themes/aura-light-blue/theme.css';\n@import 'primeng/resources/primeng.css';\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n// preflight borders\n*,\n::before,\n::after {\n border-width: 0;\n border-style: solid;\n border-color: theme('borderColor.DEFAULT', currentColor);\n}\n```\n\n```text\ncorePlugins: { preflight: false },\n```\n\n```text\n\"styles\": [\n\"src/styles.scss\",\n\"./node_modules/tailwindcss-primeui/v4/index.css\"\n],\n```\n\n```text\n@use 'tailwindcss';\n@use 'primeicons/primeicons.css';\n```\n\n========================================\n\nComments:\n- This is working fine for me, thanks man, you save my time :)\n- If it does not work You can write like this. And it works for me: `@import \"../node_modules/tailwindcss/base.css\" layer(tailwindcss); @import \"../node_modules/tailwindcss/components.css\" layer(tailwindcss); @import \"../node_modules/tailwindcss/utilities.css\" layer(tailwindcss); @import \"primeng/resources/themes/lara-light-blue/theme.css\"; @import \"primeng/resources/primeng.css\";`","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":186,"estimatedTokens":945}}546{"id":"stack-56999151","source":"stackoverflow","questionId":56999151,"title":"Unable to center form using Tailwindcss","tags":["css","tailwind-css"],"text":"Title: Unable to center form using Tailwindcss\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm currently working on a Rails 6 application and doing a form. I want to center the form in the middle of the page. I'using Tailwindcss to style the page. But when I add the with it doesn't center if moves to the right of the page.\n\nhttps://i.sstatic.net/SHnne.png\n\nHere is what the form looks like:\n\n```\n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n```\n\nAny ideas?\n\n========================================\n\nTop Answer:\nWhithout h-screen class, items-center is not working so in your case 'div' that have to be centered need also this\n\n```\n\n```\n\n========================================\n\nCode:\n```text\n<div class=\"max-w-full\">\n <%= form_for @post do |f| %>\n <div class=\"md:flex md:items-center mb-6\">\n <div class=\"md:w-1/3\">\n <label class=\"block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4\" for=\"inline-full-name\">\n <%= f.label :title, 'Title:' %>\n </label>\n </div>\n <div class=\"md:w-2/3\">\n <%= f.text_field :title, class: \"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\" %>\n </div>\n </div>\n\n <div class=\"md:flex md:items-center mb-6\">\n <div class=\"md:w-1/3\">\n <label class=\"block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4\" for=\"inline-full-name\">\n <%= f.label :description, 'Description:' %>\n </label>\n </div>\n <div class=\"md:w-2/3\">\n <%= f.text_area :description, class: \"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\" %>\n </div>\n </div>\n\n <div class=\"md:flex md:items-center mb-6\">\n <div class=\"md:w-1/3\">\n <label class=\"block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4\" for=\"inline-full-name\">\n <%= f.label :location, 'Location:' %>\n </label>\n </div>\n <div class=\"md:w-2/3\">\n <%= f.text_field :location, class: \"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\" %>\n </div>\n </div>\n\n <div class=\"md:flex md:items-center mb-6 upload-btn-wrapper\">\n <div class=\"md:w-1/3\">\n <label class=\"block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4\" for=\"inline-full-name\">\n <%= f.label :image, 'Image:' %>\n </label>\n </div>\n <div class=\"md:w-2/3\" id=\"file-upload\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"fill-current text-teal-500 inline-block h-12 w-12\" viewBox=\"0 0 22 22\"><path d=\"M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2h-3zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8h-3zM5 19l3-4 2 3 3-4 4 5H5z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>\n <%= f.file_field :image, as: :file %>\n </div>\n </div>\n\n <div class=\"md:flex md:items-center\">\n <div class=\"md:w-1/3\"></div>\n <div class=\"md:w-2/3\">\n <%= f.submit \"Create\", class: \"shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded\" %>\n </div>\n </div>\n <% end %>\n</div>\n```\n\n```html\n<div class=\"md:flex md:items-center mb-6\">\n```\n\n```html\n<div class=\"md:flex md:justify-center mb-6\">\n```\n\n```text\n<div class=\"max-w-full\">\n <%= form_for @post do |f| %>\n <center>\n <div class=\"md:flex md:items-center mb-6\">\n <div class=\"md:w-1/3\">\n <label class=\"block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4\" for=\"inline-full-name\">\n <%= f.label :title, 'Title:' %>\n </label>\n </div>\n <div class=\"md:w-2/3\">\n <%= f.text_field :title, class: \"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\" %>\n </div>\n </div>\n \n <div class=\"md:flex md:items-center mb-6\">\n <div class=\"md:w-1/3\">\n <label class=\"block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4\" for=\"inline-full-name\">\n <%= f.label :description, 'Description:' %>\n </label>\n </div>\n <div class=\"md:w-2/3\">\n <%= f.text_area :description, class: \"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\" %>\n </div>\n </div>\n \n <div class=\"md:flex md:items-center mb-6\">\n <div class=\"md:w-1/3\">\n <label class=\"block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4\" for=\"inline-full-name\">\n <%= f.label :location, 'Location:' %>\n </label>\n </div>\n <div class=\"md:w-2/3\">\n <%= f.text_field :location, class: \"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\" %>\n </div>\n </div>\n \n <div class=\"md:flex md:items-center mb-6 upload-btn-wrapper\">\n <div class=\"md:w-1/3\">\n <label class=\"block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4\" for=\"inline-full-name\">\n <%= f.label :image, 'Image:' %>\n </label>\n </div>\n <div class=\"md:w-2/3\" id=\"file-upload\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"fill-current text-teal-500 inline-block h-12 w-12\" viewBox=\"0 0 22 22\"><path d=\"M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2h-3zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8h-3zM5 19l3-4 2 3 3-4 4 5H5z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>\n <%= f.file_field :image, as: :file %>\n </div>\n </div>\n </center>\n \n <div class=\"md:flex md:items-center\">\n <div class=\"md:w-1/3\"></div>\n <div class=\"md:w-2/3\">\n <%= f.submit \"Create\", class: \"shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded\" %>\n </div>\n </div>\n <% end %>\n </div>\n```\n\n```text\n<div class=\"md:flex md:h-screen md:items-center mb-6\">\n```\n\n========================================\n\nComments:\n- It might help to include the compiled HTML and relevant CSS to provide a minimal, reproducible example that demonstrates the issue.\n- I just placed all the input blocks (divs) including the submit button inside a tag. This tag is used to center any block. @showdev\n- Ok, thank you. Incidentally, note that the `` tag is obsolete.\n- Yes I know. But you can still use it. By the way I gave this solution because i was unable to run your code as I am not familiar with rail. @showdev","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":220,"estimatedTokens":1788}}547{"id":"stack-75391736","source":"stackoverflow","questionId":75391736,"title":"How to have vertical text next to horizontal text on tailwind css","tags":["html","css","tailwind-css"],"text":"Title: How to have vertical text next to horizontal text on tailwind css\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm struggling with tailwind layout and text placement i try to achieve a responsive layout for mobile screen and big screen:\n\nhttps://i.sstatic.net/s8uO3.png\n\nhttps://i.sstatic.net/28NiX.png\n\nThis is what i try to do in tailwind play but it ain't working html\n\n```\n\n \n \n EN BOUCHE:\n\n Au premier abord déconcertant, il libère ensuite toute sa palette aromatique allant du fruit exotique à la fraicheur des Astéracées.\n\n \n \n \n \n \"On parie que les hard seltzer ne sont pas une mode passagère mais le reflet de changements profonds des modes de consommation\"\n\n HARD SELTZER\n\n \n \n \n```\n\ncss:\n\n```\n.texto {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n}\n```\n\nThanks for you answer time and attention.\n\n========================================\n\nTop Answer:\nI found `writing-mode: sideways-lr;` might work for your case but somehow it isn't supported by Chrome.\n\nReference: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode\n\n========================================\n\nCode:\n```text\n<div class=\"grid sm:h-screen sm:grid-rows-2 lg:grid-cols-2\">\n <section class=\"bg-black lg:h-screen text-white\">\n <div class=\"grid grid-cols-2\">\n <p class=\"texto rotate-180 text-5xl\">EN BOUCHE:</p>\n <p class=\"text-5xl\">Au premier abord déconcertant, il libère ensuite toute sa palette aromatique allant du fruit exotique à la fraicheur des Astéracées.</p>\n </div>\n </section>\n <section class=\"bg-white sm:h-screen\">\n <div class=\"grid grid-cols-2 gap-1\">\n <p class=\"text-5xl\">\"On parie que les hard seltzer ne sont pas une mode passagère mais le reflet de changements profonds des modes de consommation\"</p>\n <p class=\"texto rotate-180 text-5xl\">HARD SELTZER</p>\n </div>\n </section>\n </div>\n```\n\n```text\n.texto {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n}\n```\n\n```text\nrotate\n```\n\n```text\nwriting-mode\n```\n\n```text\nvertical-lr\n```\n\n```text\n[writing-mode:vertical-lr]\n```\n\n```text\nwriting-mode: sideways-lr;\n```\n\n========================================\n\nComments:\n- While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":103,"estimatedTokens":604}}548{"id":"stack-79459792","source":"stackoverflow","questionId":79459792,"title":"ShadCN and TailwindCSS V4 causing error [plugin:@tailwindcss/vite:generate:serve] Unexpected semicolon","tags":["reactjs","tailwind-css","vite","shadcnui"],"text":"Title: ShadCN and TailwindCSS V4 causing error [plugin:@tailwindcss/vite:generate:serve] Unexpected semicolon\nTags: reactjs, tailwind-css, vite, shadcnui\nSource: Stack Overflow\n\nQuestion:\nI am currently trying to make a new project on React 19 using Vite, TailwindCSS V4 and ShadCN. Been following the documentation from ShadCN. After initializing the shadCN with command `pnpm dlx shadcn@canary init`, which adds the components.json and sets up the CSS variables, it breaks the application. The error message is the following\n`[vite] Internal server error: Unexpected semicolon`\n\n`Plugin: @tailwindcss/vite:generate:serve`\n\n`File: C:/Users/joni/Documents/GitHub/txtcompare/src/index.css`.\n\nIf I remove the styling it has created to the index.css, it works but of course then the styling is gone. Has anyone else encountered this?\n\n========================================\n\nCode:\n```text\npnpm dlx shadcn@canary init\n```\n\n```text\n[vite] Internal server error: Unexpected semicolon\n```\n\n```text\nPlugin: @tailwindcss/vite:generate:serve\n```\n\n```text\nFile: C:/Users/joni/Documents/GitHub/txtcompare/src/index.css\n```\n\n```text\n--radius: 0.625rem;;\n```\n\n========================================\n\nComments:\n- Yep, this fixed it for me too. Looks like there's an issue in GitHub raised to address this: github.com/shadcn-ui/ui/issues/6737","metadata":{"transformedAt":"2026-08-18T18:33:42.927Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":41,"estimatedTokens":333}}549{"id":"stack-70666485","source":"stackoverflow","questionId":70666485,"title":"Target child element with hover in Tailwind CSS","tags":["reactjs","tailwind-css"],"text":"Title: Target child element with hover in Tailwind CSS\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a parent div with a child image element inside of it.\nWhen I hover over the parent div I want my child element's src to change to a different source. But I'm struggling to find a way to do this with tailwind.\n\n```\n\n \n \n \n {title}\n \n```\n\nhttps://i.sstatic.net/iTSaP.png\n\nImage should turn white (different source) on hover. How to do this with Tailwind?\n\n========================================\n\nCode:\n```text\n<button className=\"flex flex-col items-center justify-center w-40 h-40 mx-12 transition ease-in-out rounded-full shrink-0 text-primary hover:text-white hover:bg-light\">\n <div className=\"relative flex items-center justify-center w-20 h-20 mb-2\">\n <Image src={icon} alt={`${title} icon`} />\n </div>\n <span className=\"text-xl text-center\">{title}</span>\n </button>\n```\n\n```html\n<button class=\"relative flex flex-col items-center justify-center group w-20 h-20 m-12 rounded-full text-primary\">\n <img class=\"absolute group-hover:invisible w-20 h-20 rounded-full\" src=\"https://www.fillmurray.com/100/100\"/>\n <img class=\"absolute invisible group-hover:visible w-20 h-20 rounded-full\" src=\"https://www.fillmurray.com/g/100/100\"/>\n <span class=\"absolute top-10 text-xl text-center text-green-500 group-hover:text-white\">title</span>\n</button>\n```\n\n```text\ngroup-hover\n```\n\n========================================\n\nComments:\n- I think that this is either job for javascript or dont use Image but background of div\n- I'm willing to use background of div, but i dont know how to do that either in tailwind @Wraithy\n- you can use ``\n- @Wraithy i tried this but it's in a loop so the url is dynamic and string interpolation somehow doesnt work with tailwind.","metadata":{"transformedAt":"2026-08-18T18:33:42.928Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":52,"estimatedTokens":455}}550{"id":"stack-67741429","source":"stackoverflow","questionId":67741429,"title":"Tailwind css Grid is not working in Reactjs?","tags":["css","reactjs","css-grid","tailwind-css"],"text":"Title: Tailwind css Grid is not working in Reactjs?\nTags: css, reactjs, css-grid, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHere is an example of taiwind css grid working properly in HTML :\nhttps://play.tailwindcss.com/mU6PzU0sqX\n\nDespites, here is the same example in react, and it seems it does not pass:\nhttps://codesandbox.io/s/react-typescript-tailwind-playground-forked-m77pw?file=/src/App.tsx\nSee the not working component in the browser : https://m77pw.csb.app/\n\nHere is the React code :\n\n```\n\n \n\n### Hello CodeSandbox\n\n \n\n### Start editing to see some magic happen!\n\n \n \n 1\n \n \n 2\n \n \n\n```\n\n========================================\n\nTop Answer:\nInstall tailwindcss with npm and make sure you include paths to your templates/components files in tailwind.config.js.\n\n```\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n========================================\n\nCode:\n```text\n<div className=\"App\">\n <h1 className=\"text-red-500\">Hello CodeSandbox</h1>\n <h2>Start editing to see some magic happen!</h2>\n <div className=\"grid grid-cols-3 gap-4\">\n <div className=\"border col-span-1\">\n 1\n </div>\n <div className=\"border col-span-1\">\n 2\n </div>\n </div>\n</div>\n```\n\n```text\ntailwind.css\n```\n\n```text\n\"start\": \"cross-env TAILWIND_MODE=watch craco start\",\n```\n\n```text\nstart\n```\n\n```text\npackage.json\n```\n\n```text\n.vue\n```\n\n```text\n.vue\n```\n\n```text\ntailwind.config.js\n```\n\n```js\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n========================================\n\nComments:\n- great, it shows that the problem does not come from the tailwind syntax. I know that grid is now a standard tailwind plugin only recently, maybe tailwind does not support it entirely ? for notice, I was able to make it work on my local machine with tailwind config 'purge' option at false.\n- thank you it seems that sometimes the installed tailwind package does not take into account the 'grid grid-cols-{n}' syntax, when the purge option is set to true.\n- Do you know how to bypass this behavior ?\n- @FrédéricLang That would depend on how you're using the class and how you're configuring tailwind. This would probably be a separate question, but maybe check out the docs on writing purgable HTML? tailwindcss.com/docs/optimizing-for-production\n- yes, so : - when purge is off, everything work as expected - when purge is on, the grid column template does not pass (in the contrary of other tailwind classes) the behavior is a bit unexpected, but at the end you can make it work by disabling purge.\n- Of course, I don't use string concatenation in my class names\n- @FrédéricLang You might want to create a minimal reproduction and create a new question for that. I wouldn't suggest disabling purge since the file sizes get very large (unless you're using JIT where purge isn't used).\n- I followed your advice and created 2 minimals examples, one working and one not. Hope I will finally get an answer! : stackoverflow.com/questions/67765561/…\n- Missing grid utilities was my problem too - but caused by the Tailwind 2 JIT compiler not pulling them in without a restart of my CRA 4 project.\n- OP's question was about Tailwind not working in React, your answer is about Tailwind not working in VueJs. And while you edited your post by adding a reference to React the original question already has an accepted answer (from May 2021). If you take the time to read that answer you'll realize what you're describing here is an entirely different issue from the OP's one. So yes, you're answering a new question.\n- @lbsn This answer really helped because I was having the same issue. Stop this non-sense please.\n- Tell me about it @caravana_942, glad to have helped you out\n- @caravana_942 I never said this answer is not helpful. I'm just saying it's the answer to a different question and that question should be separately posted and answered (e.g with a VueJs tag instead of ReactJS, with VueJs in the title instead of ReactJS etc.) so that other VueJS users with the same issue can easily find it. Just my opinion, no bad intentions here.\n- @lbsn I get your point and it's totally fair. But the answer came naturally as a Vue.js answer and that is also great, I even found out my Vue answer on Google and got this link, everyone is happy :)\n- Thanks. Once we create the new folders and we want to implement Tailwinds that need to be included inside tailwind.config.js tailwindcss.com/docs/content-configuration","metadata":{"transformedAt":"2026-08-18T18:33:42.928Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":136,"estimatedTokens":1202}}551{"id":"stack-72920505","source":"stackoverflow","questionId":72920505,"title":"How to customize tailwind typography blockquotes","tags":["tailwind-css"],"text":"Title: How to customize tailwind typography blockquotes\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nTailwind typography, In order to add opening and closing quotes, add an `after` and `before` pseudo elements to blockquotes:\n\n```\n\n :after\n Lorem ipsum.\n\n :before\n\n```\n\nI want to customize the style removing just the closing quotes to match this pattern:\n\nhttps://i.sstatic.net/DNqHM.png\n\nIs it possible customize it from tailwind.config.js or should I override styles with CSS and `!important`?\n\n========================================\n\nCode:\n```text\n<blockquote>\n :after\n <p>Lorem ipsum.</p>\n :before\n</blockquote>\n```\n\n```text\nafter\n```\n\n```text\nbefore\n```\n\n```text\n!important\n```\n\n```js\nmodule.exports = {\n theme: {\n // ...\n extend: {\n typography: {\n quoteless: {\n css: {\n 'blockquote p:first-of-type::before': { content: 'none' },\n 'blockquote p:first-of-type::after': { content: 'none' },\n },\n },\n },\n },\n },\n //...\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nprose-quoteless\n```\n\n========================================\n\nComments:\n- Is blockquote any component?\n- Sorry, I don't understand the question. It is not a TW component. It is rendered by a WordPress normal blockquotes.","metadata":{"transformedAt":"2026-08-18T18:33:42.928Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":77,"estimatedTokens":322}}552{"id":"stack-78229296","source":"stackoverflow","questionId":78229296,"title":"Google fonts not working using tailwind CSS in React Vite","tags":["reactjs","tailwind-css","vite","google-font-api"],"text":"Title: Google fonts not working using tailwind CSS in React Vite\nTags: reactjs, tailwind-css, vite, google-font-api\nSource: Stack Overflow\n\nQuestion:\nI'm banging my head against the wall. My project is in React with Vite and tailwind CSS configured. Now I want to use Google fonts in tailwind CSS. It doesn't work for some reason. All the tutorials seem to make me think it should be easy, so I'm guessing my problem is somewhere very easy to fix with someone experienced. Thanks in advance!\n\nhttps://i.sstatic.net/dP72i.png\n\nindex.css\n\n```\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\ntailwind.config.js\n\n```\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {\n fontFamily: {\n inter: [\"Inter\", \"sans-serif\"],\n }\n },\n },\n plugins: [],\n}\n```\n\nindex.html\n\n```\n\n \n ...\n \n \n \n \n \n \n\n```\n\nvite.config.js\n\n```\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react-swc'\nimport tailwindcss from 'tailwindcss'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [react()],\n css: {\n postcss: {\n plugins: [tailwindcss()],\n },\n }\n})\n```\n\npostcss.config.js\n\n```\nexport default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n========================================\n\nTop Answer:\n### Update for TailwindCSS v4\n\nIn tailwind Version-4, we do not need to use `tailwind.config.js` configurations. I faced the issues in my current React-Vite project. The process is simpler now:\n\nAfter importing your font in index.css file (keeping it on the top), just add this line of code:\n\n```\n@theme {\n --font-inter: 'Inter', 'sans-serif';\n}\n```\n\nI am using Inter font, you can replace with your own font.\n\nhttps://i.sstatic.net/xFMPw2ei.png\n\nAnd for those who are unaware about the new changes to be made in `vite.config.js` for tailwind-4 to work with vite. Here are the updates:\n\n```\nimport { defineConfig } from 'vite'\nimport tailwindcss from '@tailwindcss/vite'\nimport react from '@vitejs/plugin-react'\n\nexport default defineConfig({\n plugins: [tailwindcss(), react()]\n})\n```\n\nFor the complete tailwind-4 with Vite apps update: Check TailwindCSS v4 with Vite on here on StackOverflow.\n\n========================================\n\nCode:\n```text\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {\n fontFamily: {\n inter: [\"Inter\", \"sans-serif\"],\n }\n },\n },\n plugins: [],\n}\n```\n\n```text\n<!doctype html>\n<html lang=\"en\">\n <head>\n ...\n </head>\n <body>\n <div id=\"root\"></div>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script type=\"module\" src=\"/src/main.jsx\"></script>\n </body>\n</html>\n```\n\n```text\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react-swc'\nimport tailwindcss from 'tailwindcss'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [react()],\n css: {\n postcss: {\n plugins: [tailwindcss()],\n },\n }\n})\n```\n\n```text\nexport default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\"./index.html\", \"./src/**/*.{js,ts,jsx,tsx}\"],\n theme: {\n extend: {\n fontFamily: {\n roboto: [\"Roboto\", \"sans-serif\"],\n },\n },\n },\n\n plugins: [],\n};\n```\n\n```text\n@import url(\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\");\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nnpm run dev\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nvite.config.js\n```\n\n```text\npostcss.config.js\n```\n\n```text\nvite.config.js\n```\n\n```text\npostcss.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nindex.css\n```\n\n```text\n@theme {\n --font-inter: 'Inter', 'sans-serif';\n}\n```\n\n```text\nimport { defineConfig } from 'vite'\nimport tailwindcss from '@tailwindcss/vite'\nimport react from '@vitejs/plugin-react'\n\nexport default defineConfig({\n plugins: [tailwindcss(), react()]\n})\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nvite.config.js\n```\n\n========================================\n\nComments:\n- I tried all that, didn't work for me. The only thing worked was switching to regular react rather than react-swc when creating vite react project. I still don't know or find the reason why react-swc didn't work though.","metadata":{"transformedAt":"2026-08-18T18:33:42.928Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":268,"estimatedTokens":1184}}553{"id":"stack-75846665","source":"stackoverflow","questionId":75846665,"title":"How can I group several Tailwind CSS utilities under one modifier?","tags":["tailwind-css","modifier","utilities"],"text":"Title: How can I group several Tailwind CSS utilities under one modifier?\nTags: tailwind-css, modifier, utilities\nSource: Stack Overflow\n\nQuestion:\nI'm using Tailwind's default breakpoint values in a TypeScript + React project compiled with Vite. But I noticed that in my project and on a section of their documentation that both repeated instances of the same modifiers within one element. In the doc's case `md:`:\n\n``\n\nIs there a way to group `h-full` and `w-48` under one `md:` modifier to make certain styles more readable and easier to locate?\n\n### My Attempted Solution\n\nUsing Tailwind's default color palette and default breakpoint values, I made \"Hello World\" take on an orange background and the heaviest available font weight when the screen size is equal to or greater than `sm`'s default minimum width of 640px:\n\n```\n\n### Hello World\n\n```\n\nTo reproduce the same result using one instance of the `sm` modifier within the same `` element, I tried adding curly braces around utility classes grouped together with commas:\n\n```\n\n### Hello World\n\n```\n\n========================================\n\nTop Answer:\nIt is NOT possible to group several Tailwind classes under a single breakpoint prefix, such as md: or lg:.\nIf you need to customize your classes in this way, you may want to consider using an alternative tool, such as WindiCSS or UnoCSS. These tools offer similar functionality to Tailwind, but with additional features and customization options.\n\n========================================\n\nCode:\n```text\n<h1 className=\"sm:bg-orange-500 sm:font-black\">Hello World</h1>\n```\n\n```text\n<h1 className=\"sm:{bg-orange-500, font-black}\">Hello World</h1>\n```\n\n```text\nmd:\n```\n\n```text\n<img class=\"h-48 w-full object-cover md:h-full md:w-48\" src=\"/img/building.jpg\" alt=\"Modern building architecture\">\n```\n\n```text\nh-full\n```\n\n```text\nw-48\n```\n\n```text\nmd:\n```\n\n```text\nsm\n```\n\n```text\nsm\n```\n\n```text\n<h1>\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\n\nexport default {\n content: [\n \"./index.html\"\n \"./src/**/*.{js,ts,jsx,tsx}\"\n ],\n theme: {\n //...\n },\n plugins: [\n // add the following lines\n require('tailwindcss/plugin')(({ matchUtilities }) => {\n matchUtilities({\n 'x': (value) => ({\n [`@apply ${value.replaceAll(',', ' ')}`]: {}\n })\n })\n })\n ]\n}\n```\n\n```html\n<!-- then -->\n<section className='text-[#f00] text-[25px] font-semibold md:text-[#0f0] md:text-[36px] md:font-bold'>\n {...}\n</section>\n\n<!-- now -->\n<section className='text-[#f00] text-[25px] font-semibold md:x-[text-[#0f0],text-[36px],font-bold]'>\n {...}\n</section>\n```\n\n```text\n[\n /^(font|bg|border|stroke|outline|ring|divide|text)-\\[(.*)\\]$/,\n ([, category, stringElement]) => {\n type Category = 'font' | 'bg' | 'border' | 'stroke' | 'outline' | 'text' | 'ring' | 'divide'\n type MediaQuery = 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n const categories: readonly Category[] = ['font', 'bg', 'border', 'stroke', 'outline', 'text', 'ring', 'divide']\n const mediaQuery: readonly MediaQuery[] = ['sm', 'md', 'lg', 'xl', '2xl']\n const rulesForBrakets: Record<'open' | 'close', string> = {\n open: '[',\n close: ']'\n }\n\n if (!categories.includes(category as Category)) {\n throw new Error(`category in not in unocss list config=> ${category}`)\n }\n\n function splitString(str: string): Set<string> {\n const result = new Set<string>()\n let currentElement = ''\n let parenthesesCount = true\n for (const char of str) {\n if (char === rulesForBrakets.open) {\n parenthesesCount = false\n } else if (char === rulesForBrakets.close) {\n parenthesesCount = true\n }\n if (char === ',' && parenthesesCount === true) {\n result.add(currentElement.toLowerCase().trim())\n currentElement = ''\n } else {\n currentElement += char.trim()\n }\n }\n if (currentElement.trim() !== '') {\n result.add(currentElement.toLowerCase().trim())\n }\n return result\n }\n\n const arraySet = splitString(stringElement)\n\n const regexAtribuffy = new RegExp(`([^:]+):\\\\${rulesForBrakets.open}([^\\\\]]+)\\\\${rulesForBrakets.close}$`)\n const mycustomSet = new Set<string>()\n\n for (const v of arraySet) {\n if (v.includes(':')) {\n if (v.match(regexAtribuffy)) {\n const match = v.match(regexAtribuffy)\n\n if (match) {\n const [, md, rest] = match\n if (!mediaQuery.includes(md as MediaQuery)) {\n throw new Error('bad media querie')\n }\n const [breakpoint] = md.trim().split(':')\n\n for (const e of rest.split(',')) {\n if (e.includes(':')) {\n const index: number = e.lastIndexOf(':')\n const state = e.slice(0, index)\n const css = e.slice(index + 1)\n const result = `${breakpoint}:${state}:${category}-${css.trim()}`\n mycustomSet.add(result)\n } else {\n mycustomSet.add(`${breakpoint}:${category}-${e.trim()}`)\n }\n }\n }\n } else {\n const index = v.lastIndexOf(':')\n const breakpointORstate = v.slice(0, index)\n const css = v.slice(index + 1)\n const value = `${breakpointORstate}:${category}-${css.trim()}`\n mycustomSet.add(value.trim())\n }\n } else {\n mycustomSet.add(`${category}-${v.trim()}`)\n }\n }\n return Array.from(mycustomSet).join(' ')\n }\n ],\n```\n\n```text\ntext-[red,md:[green,hover:pink,2xl],xl]\n```\n\n```mjs\nimport plugin from 'tailwindcss/plugin'\n\nmodule.exports = plugin.withOptions(() => ({ matchUtilities }) => {\n matchUtilities({\n join: value => ({\n [`@apply ${value.replaceAll(',', ' ')}`]: {}\n })\n })\n})\n```\n\n```css\n@plugin \"./twPluginJoin.mjs\";\n```\n\n```js\n\"experimental\": {\n \"classRegex\": [[\"join-\\\\[((?:[\\\\w-]+,?)+)\\\\]\", \"([^,]+)\"]]\n }\n```\n\n```tsx\nclassName=\"[&_button]:join-[min-w-0,p-0] flex gap-1\"\n```\n\n```text\ntwPluginJoin.mjs\n```\n\n```text\n.css\n```\n\n========================================\n\nComments:\n- Dude this is a crazy hack how did you even think of that. It works, thought you have a typo error as you declared \"value\" but used \"val\". It is a shame that we have to concat the classes with anything but a blank space (comma in your example). Personnally I named the class \"concat\" (or \"join\") instead of \"x\". I think it make it clear that this class just concat some classes and does not represent something specific. Anyway thank you for this great answer, should be the accepted answer.\n- You're right, I made a mistake using `val` instead of `value`, it's now fixed, thanks for the comment, as for the name of `'x'` yes, it can be changed to whatever you want, but for me personally it's easier to just use `'x'`, anyway, I'm glad you solved the problem\n- This answer deserves more recognition!\n- Inventive solution @MarcosGuerrero, but it's not working for me and I'm not sure why. I've implemented exactly like you show. I'm getting this error: `Cannot apply unknown utility class: md:join-[p-0,w-10]` I'm using tailwind/vite 4.1.4 with Astro.\n- also see github.com/tailwindlabs/tailwindcss/discussions/12712\n- warning: this is still not recommended. Also, I noticed the style doesn't apply in some situations like I have to copy the styles out of `join` into a regular place, open the page, then move it back for it to stay - but maybe it was something on my part.","metadata":{"transformedAt":"2026-08-18T18:33:42.928Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":246,"estimatedTokens":2095}}554{"id":"stack-59238969","source":"stackoverflow","questionId":59238969,"title":"Css flexbox gutter with spacing","tags":["html","css","flexbox","tailwind-css","gutter"],"text":"Title: Css flexbox gutter with spacing\nTags: html, css, flexbox, tailwind-css, gutter\nSource: Stack Overflow\n\nQuestion:\nI'm trying to inline 3 items on 1 row. Every item must have a bit of space. The problem is when I add margin\nthe third item will wrap. I already tried to add negative margin \nto the parent but that's not working. \n\nI made an example with my problem the example is using tailwindcss:\n\n\r\n\r\n\n```\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n JS Bin\r\n\r\n\r\n\r\n \r\n test\r\n \r\n \r\n \r\n test\r\n \r\n \r\n \r\n test\r\n \r\n\r\n\r\n\n```\n\n\r\n\r\n\r\n\nI cannot remove `flex-wrap` because it has to wrap every 3 items, and I cannot use `padding`. \n\nHow can I get this to work?\n\n========================================\n\nTop Answer:\nYou need to do slight modification to your css.\nSince parent width is 100% and each child width is 33.33%, it won't accommodate in one line along with margin included. Margins are on top of the element and so total width becomes > 100% and the last element is moved to new line. \n\nSo, we will use `calc` here. We need to have width in a way that margin can be accommodated. So, if width = calc(33.33% - 20px), it means, per div we have 20px space which can be used to give margins of 10px on each side. To maintain uniformity make sure margin given is 50% of the value you subtract from 33.33%.\n\nHave updated the code (added a style tag and modified the css accordingly):\n\n\r\n\r\n\n```\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n JS Bin\r\n \r\n .test {\r\n width: calc(33.33% - 20px);\r\n margin: 10px;\r\n }\r\n \r\n\r\n\r\n\r\n \r\n test\r\n \r\n \r\n \r\n test\r\n \r\n \r\n \r\n test\r\n \r\n \r\n test\r\n \r\n \r\n \r\n test\r\n \r\n \r\n \r\n test\r\n \r\n\r\n\r\n\n```\n\n\r\n\r\n\r\n\nHope if helps. Revert for any clarifications.\n\n========================================\n\nCode:\n```html\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n <title>JS Bin</title>\n</head>\n<body>\n<div class=\"flex flex-wrap -m-2\">\n <div class=\"bg-red-500 w-1/3 p-4 m-2\">\n test\n </div> \n \n <div class=\"bg-red-500 w-1/3 p-4 m-2\">\n test\n </div> \n \n <div class=\"bg-red-500 w-1/3 p-4 m-2\">\n test\n </div> \n</div>\n</body>\n</html>\n```\n\n```text\nflex-wrap\n```\n\n```text\npadding\n```\n\n```css\n.flex-wrap > div {\n width: calc(33.333333% - 1rem);\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\">\n<div class=\"flex flex-wrap\">\n <div class=\"bg-red-500 p-4 m-2\">\n test\n </div>\n <div class=\"bg-red-500 p-4 m-2\">\n test\n </div>\n <div class=\"bg-red-500 p-4 m-2\">\n test\n </div>\n <div class=\"bg-red-500 p-4 m-2\">\n test\n </div>\n <div class=\"bg-red-500 p-4 m-2\">\n test\n </div>\n <div class=\"bg-red-500 p-4 m-2\">\n test\n </div>\n</div>\n```\n\n```css\n.flex-wrap > div {\n border: .5rem solid white;\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\">\n<div class=\"flex flex-wrap\">\n <div class=\"bg-red-500 w-1/3 p-4\">\n test\n </div>\n <div class=\"bg-red-500 w-1/3 p-4\">\n test\n </div>\n <div class=\"bg-red-500 w-1/3 p-4\">\n test\n </div>\n <div class=\"bg-red-500 w-1/3 p-4\">\n test\n </div>\n <div class=\"bg-red-500 w-1/3 p-4\">\n test\n </div>\n <div class=\"bg-red-500 w-1/3 p-4\">\n test\n </div>\n</div>\n```\n\n```text\nm-2\n```\n\n```text\n.5rem\n```\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n <title>JS Bin</title>\n <style>\n .test {\n width: calc(33.33% - 20px);\n margin: 10px;\n }\n </style>\n</head>\n<body>\n<div class=\"flex flex-wrap\">\n <div class=\"bg-red-500 test p-4\">\n test\n </div> \n \n <div class=\"bg-red-500 test p-4\">\n test\n </div> \n \n <div class=\"bg-red-500 test p-4\">\n test\n </div> \n <div class=\"bg-red-500 test p-4\">\n test\n </div> \n \n <div class=\"bg-red-500 test p-4\">\n test\n </div> \n \n <div class=\"bg-red-500 test p-4\">\n test\n </div>\n</div>\n</body>\n</html>\n```\n\n```text\ncalc\n```\n\n```html\n<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n <title>JS Bin</title>\n <style>\n .custom-flexbox-1 > div {\n flex: 1 0 0;\n }\n html {\n overflow: hidden;\n }\n </style>\n</head>\n\n<body>\n <div class=\"flex flex-wrap -m-2 custom-flexbox-1\">\n <div class=\"bg-red-500 w-1/3 p-4 m-2\">\n test\n </div>\n\n <div class=\"bg-red-500 w-1/3 p-4 m-2\">\n test\n </div>\n\n <div class=\"bg-red-500 w-1/3 p-4 m-2\">\n test\n </div>\n </div>\n</body>\n\n</html>\n```\n\n```text\n33.33333333% -1rem\n```\n\n```text\nflex: 1 0 0;\n```\n\n```text\n0\n```\n\n```text\n1\n```\n\n```text\n0\n```\n\n```css\n.container {\n height: 100px;\n background: red;\n display: flex;\n}\n.child {\n background: blue;\n flex: 1;\n}\n.child:not(:last-child) {\n margin-right: 10px;\n}\n\n/* Grid way */\n.container-grid {\n height: 100px;\n background: red;\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n grid-column-gap: 10px;\n}\n.child-grid {\n background: blue;\n}\n\n/* Even be easier if you know ahead that there're only 3 items */\n.container-grid-3 {\n background: red;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 10px;\n}\n.child-grid-3 {\n height: 100px;\n background: blue;\n}\n```\n\n```html\n<div class=\"container\">\n <div class=\"child\"></div>\n <div class=\"child\"></div>\n <div class=\"child\"></div>\n <div class=\"child\"></div>\n</div>\n\n<hr>\n\n<div class=\"container-grid\">\n <div class=\"child-grid\"></div>\n <div class=\"child-grid\"></div>\n <div class=\"child-grid\"></div>\n <div class=\"child-grid\"></div>\n</div>\n\n<hr>\n\n<div class=\"container-grid-3\">\n <div class=\"child-grid-3\"></div>\n <div class=\"child-grid-3\"></div>\n <div class=\"child-grid-3\"></div>\n <div class=\"child-grid-3\"></div>\n</div>\n```\n\n```text\ncalc\n```\n\n```text\nflex: 1;\n```\n\n```text\nmargin-right\n```\n\n```text\n:not(:last-child)\n```\n\n```text\n<div class=\"flex flex-wrap \" style=\"justify-content: space-evenly;\">\n <div class=\"bg-red-500 p-4 m-2 \" style=\"width: 30%;\">\n test\n </div>\n\n <div class=\"bg-red-500 p-4 m-2\" style=\"width: 30%;\">\n test\n </div>\n\n <div class=\"bg-red-500 p-4 m-2\" style=\"width: 30%;\">\n test\n </div>\n </div>\n```\n\n```css\n.bg-red-500 {\n border: 0.5em transparent solid;\n background-clip: padding-box;/* do not draw me where borders stand */\n}\n```\n\n```html\n<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width\">\n <link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n <title>JS Bin</title>\n</head>\n\n<body>\n <div class=\"flex flex-wrap m-2\">\n <div class=\"bg-red-500 w-1/3 p-4 \">\n test\n </div>\n\n <div class=\"bg-red-500 w-1/3 p-4 \">\n test\n </div>\n\n <div class=\"bg-red-500 w-1/3 p-4 \">\n test\n </div>\n </div>\n</body>\n\n</html>\n```\n\n```text\nbackground-clip\n```\n\n```html\n<div class=\"grid gap-3 grid-cols-2\">\n <div>01</div>\n <div>02</div>\n</div>\n```\n\n```text\nlg:flex-nowrap lg:gap-x-5 flex-wrap\n```\n\n========================================\n\nComments:\n- That's not the desired result. The width between the items should be constant.","metadata":{"transformedAt":"2026-08-18T18:33:42.928Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":29,"totalLines":485,"estimatedTokens":1827}}555{"id":"stack-71588274","source":"stackoverflow","questionId":71588274,"title":"Trying to apply hover: to a Tailwind CSS custom-class I made, but it doesn't seems to work","tags":["css","next.js","hover","tailwind-css"],"text":"Title: Trying to apply hover: to a Tailwind CSS custom-class I made, but it doesn't seems to work\nTags: css, next.js, hover, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nExample:\n\n```\n.btn {bg-blue-500 text-2 text-orange-300}\n.btn2 {bg-orange-500 text-2 text-blue-300}\n```\n\n### Attempted:\n\n**Edit:** I'm sorry I forgot to include the code I was using... it was late night.\n\n```\n `btn` of course appears, but upon hovering, `btn2` styling does not appear.\n\nIf i'm doing something stupid or I clearly missed something already stated in the docs, feel free to just point me in the direction.\n\nI've tried searching but I'm going in circles and I just have a lot of styles I'd like to change functionally by applying them in different states, but its going to be a pain in I have to create a separate `.btn .btn2 btn2-hover btn-hover` etc.. etc..\n\nIs it a variant issue? Or is it a process that reads the `css` in a certain order? Could it be that I'm expecting hover to be applied to all internal `css` when it really doesn't do that? Or do I need to make some exception? I'm jumbled.\n\n========================================\n\nTop Answer:\nYou simply forgot to apply **Pseudo-classes** like **:hover**:\n\nhttps://tailwindcss.com/docs/hover-focus-and-other-states\n\nand if you're using css, you can use **@apply** in your style and then use tailwindcss class. In that case, you must also use **:hover**\n\n========================================\n\nCode:\n```text\n.btn {bg-blue-500 text-2 text-orange-300}\n.btn2 {bg-orange-500 text-2 text-blue-300}\n```\n\n```text\n< button className=\"btn hover:btn2\"/> <---this does not work btn2 does not actually get applied as a hover\n```\n\n```text\nbtn\n```\n\n```text\nbtn2\n```\n\n```text\n.btn .btn2 btn2-hover btn-hover\n```\n\n```text\ncss\n```\n\n```text\ncss\n```\n\n```text\n@layer utilities{\n.btn {bg-blue-500 text-2 text-orange-300}\n.btn2 {bg-orange-500 text-2 text-blue-300}}\n```\n\n```text\n<button className=\"btn hover:btn2\"/>\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nhtml, body, #root{\n width: 100%;\n height: 100%;\n}\n```\n\n```css\n@import \"tailwindcss\";\n\n/* Define Custom Variants for Themes */\n@custom-variant dark (&:where(.dark, .dark *));\n@custom-variant black (&:where(.black, .black *));\n@custom-variant lemonade (&:where(.lemonade, .lemonade *));\n\n@theme{\n /* Light Pallet */\n --color-light-bg: #fafafa;\n --color-light-pri: #3232ff;\n --color-light-pri-hover: #0000ff;\n\n /* Dark Pallet */\n --color-dark-bg: #181818;\n --color-dark-pri: #101010;\n --color-dark-pri-hover: #121212;\n\n /* Black Pallet */\n --color-black-bg: black;\n --color-black-pri: #161616;\n --color-black-text-pri: #fafafa;\n --color-black-pri-hover: #202020;\n\n /* Dark Pallet */\n --color-lemonade-bg: #a2a2a2;\n --color-lemonade-pri: rgba(1,1,1, 0.2);\n --color-lemonade-pri-hover: rgba(1,1,1, 0.1);\n}\n\n@utility background { @apply bg-light-bg dark:bg-dark-bg dark:text-white black:bg-black-bg lemonade:bg-lemonade-bg; }\n@utility pri-box { @apply bg-light-pri dark:bg-dark-pri black:bg-black-pri black:text-black-text-pri lemonade:bg-lemonade-pri lemonade:cursor-pointer; }\n\n@utility flex-center { @apply flex justify-center items-center; }\n```\n\n```html\n<ul class=\"w-screen h-screen grid grid-cols-2 grid-rows-2 bg-blue-500 *:flex-center **:flex-center\">\n <li class=\"w-full h-full background\">\n <div class=\"pri-box size-24 hover:bg-light-pri-hover shadow-2xl\">Light</div>\n </li>\n <li class=\"w-full h-full background dark\">\n <div class=\"pri-box size-24 shadow-2xl hover:bg-black-pri-hover\">dark</div>\n </li>\n <li class=\"w-full h-full background black\">\n <div class=\"pri-box size-24 shadow-2xl hover:bg-black-pri-hover\">black</div>\n </li>\n <li class=\"w-full h-full background lemonade\">\n <div class=\"pri-box size-24 shadow-2xl hover:text-black-pri-hover\">lemonad</div>\n </li>\n</ul>\n```\n\n```css\n/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n 'Noto Color Emoji';\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',\n monospace;\n --color-blue-500: oklch(0.623 0.214 259.815);\n --color-white: #fff;\n --spacing: 0.25rem;\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-light-bg: #fafafa;\n --color-light-pri: #3232ff;\n --color-light-pri-hover: #0000ff;\n --color-dark-bg: #181818;\n --color-dark-pri: #101010;\n --color-black-bg: black;\n --color-black-pri: #161616;\n --color-black-text-pri: #fafafa;\n --color-black-pri-hover: #202020;\n --color-lemonade-bg: #a2a2a2;\n --color-lemonade-pri: rgba(1,1,1, 0.2);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: color-mix(in oklab, currentColor 50%, transparent);\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden='until-found'])) {\n display: none!important;\n }\n}\n@layer utilities {\n .grid {\n display: grid;\n }\n .size-24 {\n width: calc(var(--spacing) * 24);\n height: calc(var(--spacing) * 24);\n }\n .h-full {\n height: 100%;\n }\n .h-screen {\n height: 100vh;\n }\n .w-full {\n width: 100%;\n }\n .w-screen {\n width: 100vw;\n }\n .pri-box {\n background-color: var(--color-light-pri);\n &:where(.dark, .dark *) {\n background-color: var(--color-dark-pri);\n }\n &:where(.black, .black *) {\n background-color: var(--color-black-pri);\n }\n &:where(.black, .black *) {\n color: var(--color-black-text-pri);\n }\n &:where(.lemonade, .lemonade *) {\n cursor: pointer;\n }\n &:where(.lemonade, .lemonade *) {\n background-color: var(--color-lemonade-pri);\n }\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-rows-2 {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n }\n .background {\n background-color: var(--color-light-bg);\n &:where(.dark, .dark *) {\n background-color: var(--color-dark-bg);\n }\n &:where(.dark, .dark *) {\n color: var(--color-white);\n }\n &:where(.black, .black *) {\n background-color: var(--color-black-bg);\n }\n &:where(.lemonade, .lemonade *) {\n background-color: var(--color-lemonade-bg);\n }\n }\n .bg-blue-500 {\n background-color: var(--color-blue-500);\n }\n .shadow-2xl {\n --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .\\*\\:flex-center {\n :is(& > *) {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n .\\*\\*\\:flex-center {\n :is(& *) {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n .hover\\:bg-black-pri-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-black-pri-hover);\n }\n }\n }\n .hover\\:bg-light-pri-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-light-pri-hover);\n }\n }\n }\n .hover\\:text-black-pri-hover {\n &:hover {\n @media (hover: hover) {\n color: var(--color-black-pri-hover);\n }\n }\n }\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n```\n\n```html\n<ul class=\"w-screen h-screen grid grid-cols-2 grid-rows-2 bg-blue-500 *:flex-center **:flex-center\">\n <li class=\"w-full h-full background\">\n <div class=\"pri-box size-24 hover:bg-light-pri-hover shadow-2xl\">Light</div>\n </li>\n <li class=\"w-full h-full background dark\">\n <div class=\"pri-box size-24 shadow-2xl hover:bg-black-pri-hover\">dark</div>\n </li>\n <li class=\"w-full h-full background black\">\n <div class=\"pri-box size-24 shadow-2xl hover:bg-black-pri-hover\">black</div>\n </li>\n <li class=\"w-full h-full background lemonade\">\n <div class=\"pri-box size-24 shadow-2xl hover:text-black-pri-hover\">lemonad</div>\n </li>\n</ul>\n```\n\n```css\n@utility btn-primary {\n @apply bg-blue-500 text-2 text-orange-300;\n}\n@utility btn-secondary {\n @apply bg-orange-500 text-2 text-blue-300;\n}\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n/* https://tailwindcss.com/docs/theme#theme-variable-namespaces */\n@theme {\n --text-2: 2rem; /* \"text-2\" is not default so I need to add it with new CSS-first configuration */\n}\n\n@utility btn-primary {\n @apply bg-blue-500 text-2 text-orange-300;\n}\n@utility btn-secondary {\n @apply bg-orange-500 text-2 text-blue-300;\n}\n</style>\n\n<div class=\"btn-primary hover:btn-secondary cursor-pointer\">Button</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n/* https://tailwindcss.com/docs/theme#theme-variable-namespaces */\n@theme {\n --text-2: 2rem; /* \"text-2\" is not default so I need to add it with new CSS-first configuration */\n}\n\n@utility btn-primary {\n @apply bg-blue-500 text-2 text-orange-300;\n \n @variant hover {\n @apply bg-orange-500 text-blue-300;\n }\n}\n</style>\n\n<div class=\"btn-primary cursor-pointer\">Button</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n/* https://tailwindcss.com/docs/theme#theme-variable-namespaces */\n@theme {\n --text-2: 2rem; /* \"text-2\" is not default so I need to add it with new CSS-first configuration */\n}\n\n@utility btn-primary {\n @apply bg-blue-500 text-2 text-orange-300;\n \n @variant hover {\n @apply btn-secondary;\n }\n}\n@utility btn-secondary {\n @apply bg-orange-500 text-2 text-blue-300;\n}\n</style>\n\n<div class=\"btn-primary cursor-pointer\">Button</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n/* https://tailwindcss.com/docs/theme#theme-variable-namespaces */\n@theme {\n --text-2: 2rem; /* \"text-2\" is not default so I need to add it with new CSS-first configuration */\n}\n\n@utility btn-primary {\n @apply bg-blue-500 text-2 text-orange-300 hover:btn-secondary;\n}\n@utility btn-secondary {\n @apply bg-orange-500 text-2 text-blue-300;\n}\n</style>\n\n<div class=\"btn-primary cursor-pointer\">Button</div>\n```\n\n```text\n@layer utilities\n```\n\n```text\n@utility\n```\n\n```text\n@utility\n```\n\n```text\n@layer components\n```\n\n```text\n@layer utilities\n```\n\n```text\n@utility\n```\n\n```text\n@utility\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\n@apply\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\n@apply\n```\n\n```text\n@utility\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\n@apply\n```\n\n```text\n@utility\n```\n\n```text\n@variant\n```\n\n```text\n@variant\n```\n\n```text\n@custom-variant\n```\n\n```text\nhover:classname\n```\n\n```text\n@apply\n```\n\n```text\n@variant\n```\n\n```jsx\n<div classname=\"text-outline group-hover:text-outline-hover\"> ... </div>\n```\n\n```text\n.text-outline {\n -webkit-text-stroke: 1px #fff;\n}\n\n@utility text-outline-hover {\n -webkit-text-stroke: 1px #e8a702;\n}\n```\n\n```text\n<div classname=\"text-outline group-hover:!text-outline-hover\"> ... </div>\n```\n\n```text\n!important\n```\n\n========================================\n\nComments:\n- Why should anything happen on hovering? You don't have any `:hover` rules in your code.\n- I know this is an old question related to TailwindCSS v3, but I want to mention that this issue can still be relevant in v4. In v4, instead of `@layer utilities`, a new solution is recommended using the `@utility` TailwindCSS directive.\n- when I do that I get an error that focus class does not exsist. **code**: `css .focus-ring { @apply focus:ring-2 }`\n- Where declare `btn` and `btn2` utilities, what mentioned in question?\n- it should be worked with @apply like this : `@layer utilities{ .btn { @apply bg-blue-500 text-2 text-orange-300} .btn2 {@apply bg-orange-500 text-2 text-blue-300}}`\n- If the answer was in the docs please could you link to it.\n- I know this is an old question related to TailwindCSS v3, but I want to mention that this issue can still be relevant in v4. In v4, instead of `@layer utilities`, a new solution is recommended using the `@utility` TailwindCSS directive.\n- How to related for the question? Too much code without explanation.","metadata":{"transformedAt":"2026-08-18T18:33:42.928Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":44,"totalLines":693,"estimatedTokens":4215}}556{"id":"stack-67738307","source":"stackoverflow","questionId":67738307,"title":"How to use tailwindcss colors in custom css classes?","tags":["css","tailwind-css"],"text":"Title: How to use tailwindcss colors in custom css classes?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI can use predefined `tailwind` classes to set color in HTML like:\n\n```\n\n```\n\nBut I also would like to use the same color in my custom CSS, like:\n\n```\n.my-class {\n border: 1px solid $purple-500;\n}\n```\n\nIs it possible to get tailwind color value in CSS?\n\n========================================\n\nTop Answer:\nYou can also add exact color to tailwind.css inside [ ]. For example\n\n```\n\n```\n\nYou can use the same color in css class:\n\n```\n.my-class {\n border: 1px solid #4231d;\n}\n```\n\n========================================\n\nCode:\n```text\n<div class=\"border border-purple-500\"></div>\n```\n\n```text\n.my-class {\n border: 1px solid $purple-500;\n}\n```\n\n```text\ntailwind\n```\n\n```text\n.my-class {\n border: 1px solid theme('colors.purple.500');\n}\n```\n\n```text\n.my-class {\n @apply border border-purple-500;\n}\n```\n\n```text\ntheme()\n```\n\n```text\n@apply\n```\n\n```text\n<div class=\"border border-[#4231d]\"></div>\n```\n\n```text\n.my-class {\n border: 1px solid #4231d;\n}\n```\n\n========================================\n\nComments:\n- Awesome, thanks! I know about @apply but it does not work on pseudo classes like :before or :after. That's why I need to access values directly.","metadata":{"transformedAt":"2026-08-18T18:33:42.928Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":89,"estimatedTokens":321}}557{"id":"stack-66330112","source":"stackoverflow","questionId":66330112,"title":"Tailwind Custom Colors Not Complied","tags":["javascript","reactjs","tailwind-css","craco"],"text":"Title: Tailwind Custom Colors Not Complied\nTags: javascript, reactjs, tailwind-css, craco\nSource: Stack Overflow\n\nQuestion:\nOn `npm start (craco start)` everything **works fine** and colors are being compiled.\n\nWhen running `npm run build (craco build)` though, **only one color of each configuration is being compiled**, `dallas` from `theme.textColor` and `vista-white` from `theme.gradientColorStops`.\n\nI tried:\n\n- Reordering `theme.textColor` properties.\n\n- Deleting `node_modules` and `npm i`.\n\n- Deleting the `build` and rebuilding.\n\n```\n// craco.config.js\nmodule.exports = {\n style: {\n postcss: {\n plugins: [require('tailwindcss'), require('autoprefixer')],\n },\n },\n};\n```\n\n```\n// tailwind.config.js\nmodule.exports = {\n purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n textColor: (theme) => ({\n ...theme('colors'),\n dallas: '#664A2D',\n 'blue-charcoal': '#24292E',\n denim: '#0D66C2',\n 'spring-green': '#05E776',\n flamingo: '#E65A4D',\n }),\n gradientColorStops: (theme) => ({\n ...theme('colors'),\n 'vista-white': '#E1DFDC',\n }),\n },\n variants: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n========================================\n\nTop Answer:\nIf u use Tailwind 3 you can :\n\n```\nmodule.exports = {\n theme: {\nextend: {\n colors: {\n 'regal-blue': '#243c5a',\n },\n }\n }\n }\n```\n\nJust add \"extend\" if no use, All colors will be reset\nThis allows you not to have to use the safelist\n\n========================================\n\nCode:\n```js\n// craco.config.js\nmodule.exports = {\n style: {\n postcss: {\n plugins: [require('tailwindcss'), require('autoprefixer')],\n },\n },\n};\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n textColor: (theme) => ({\n ...theme('colors'),\n dallas: '#664A2D',\n 'blue-charcoal': '#24292E',\n denim: '#0D66C2',\n 'spring-green': '#05E776',\n flamingo: '#E65A4D',\n }),\n gradientColorStops: (theme) => ({\n ...theme('colors'),\n 'vista-white': '#E1DFDC',\n }),\n },\n variants: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\nnpm start (craco start)\n```\n\n```text\nnpm run build (craco build)\n```\n\n```text\ndallas\n```\n\n```text\ntheme.textColor\n```\n\n```text\nvista-white\n```\n\n```text\ntheme.gradientColorStops\n```\n\n```text\ntheme.textColor\n```\n\n```text\nnode_modules\n```\n\n```text\nnpm i\n```\n\n```text\nbuild\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n // Added safelist\n purge: {\n content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n options: {\n safelist: ['hover:text-blue-charcoal', 'hover:text-denim', 'hover:text-spring-green', 'hover:text-flamingo'],\n },\n },\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n textColor: (theme) => ({\n ...theme('colors'),\n dallas: '#664A2D',\n 'blue-charcoal': '#24292E',\n denim: '#0D66C2',\n 'spring-green': '#05E776',\n flamingo: '#E65A4D',\n }),\n gradientColorStops: (theme) => ({\n ...theme('colors'),\n 'vista-white': '#E1DFDC',\n }),\n },\n variants: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\npurge.options.safelist\n```\n\n```text\nmodule.exports = {\n theme: {\n textColor: {\n 'primary': '#3490dc',\n 'secondary': '#ffed4a',\n 'danger': '#e3342f',\n }\n }\n}\n```\n\n```text\nmodule.exports = {\n theme: {\nextend: {\n colors: {\n 'regal-blue': '#243c5a',\n },\n }\n }\n }\n```\n\n========================================\n\nComments:\n- It sounds as though your styles are being purged. Are you actually *using* them in your mark-up?\n- Yes I am, @George. And IntelliSense is also showing them in VSCode. You may check the website here (`hover:denim` on my linkedin icon for example): aboqasem.dev Source code: github.com/aboqasem/aboqasem.dev/blob/main/src/pages/…\n- Purge will not recognise your usage of this class. See tailwindcss.com/docs/…. Specifically, *\"Don't use string concatenation to create class names\"*. Purge is not 'smart' in any way, it works by matching your utilities against classes (or any string, really..) throughout your templates.\n- Thanks a lot @George! Do you recommend using `safelist: ['bg-red-500', 'px-4'],` option? Or refactor my `IContact.color` to have `text-denim` instead of `denim` (I don't think this will work right?)?\n- Oh I think it does: regex101.com/r/9XRVMP/1\n- It does indeed. Which route you take is up to your requirements. A safelist can prevent the purging of utilities that may not be known to you at build time. Since you *do* know the names of utilities used, I'd probably prefer the former option (explicitly naming classes in your object).","metadata":{"transformedAt":"2026-08-18T18:33:42.928Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":226,"estimatedTokens":1190}}558{"id":"stack-70597881","source":"stackoverflow","questionId":70597881,"title":"Exclude a class being tree-shaken by Tailwind","tags":["tailwind-css","tailwind-css-3","arbitrary-values"],"text":"Title: Exclude a class being tree-shaken by Tailwind\nTags: tailwind-css, tailwind-css-3, arbitrary-values\nSource: Stack Overflow\n\nQuestion:\nIs there a way to exclude certain classes from being tree-shaken? The reason I ask is that in my JavaScript I'm using an arbitrary-value e.g. `bg-[url('/img/hero-pattern.svg')]` but the `url` is passed via a Vue computed property e.g.\n\n```\nbg-[url('${this.image}')]\n```\n\nI don't think this is being recognized, although I'm not certain.\n\nI'm aware of how to use `tailwind.config.js` with the `purge` option, and the issue does not seem to be there, because other classes in the Vue component are included.\n\nI'm using the `mode: 'jit'` option to allow arbitrary values.\n\n========================================\n\nTop Answer:\n**Tailwind v3**\n\nYou can safelist classes as a last resort\n\n```\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}'\n './components/**/*.{html,js}',\n ],\n safelist: [\n 'bg-red-500',\n 'text-3xl',\n 'lg:text-4xl',\n ]\n // ...\n}\n```\n\nMore information at https://tailwindcss.com/docs/content-configuration#safelisting-classes\n\n**Tailwind v4**\n\n```\n@import \"tailwindcss\";\n@source inline(\"bg-red-500 text-3xl lg:text-4xl\");\n```\n\nMore information at https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-specific-utilities\n\n========================================\n\nCode:\n```text\nbg-[url('${this.image}')]\n```\n\n```text\nbg-[url('/img/hero-pattern.svg')]\n```\n\n```text\nurl\n```\n\n```text\ntailwind.config.js\n```\n\n```text\npurge\n```\n\n```text\nmode: 'jit'\n```\n\n```js\nfunction DynamicBackground({ image }) {\n return (\n <div\n className=\"w-64 h-64 bg-cover bg-center\"\n style={{ backgroundImage: `url(${image})` }}\n >\n Dynamic background\n </div>\n );\n}\n```\n\n```html\n<DynamicBackground image=\"https://example.com/image1.jpg\" />\n<DynamicBackground image=\"https://example.com/image2.jpg\" />\n```\n\n```js\nfunction DynamicBackgroundVar({ image }) {\n return (\n <div\n className=\"w-64 h-64 bg-cover bg-center bg-[image:var(--bg-image)]\"\n style={{ '--bg-image': `url(${image})` }}\n >\n Dynamic background with CSS variable\n </div>\n );\n}\n```\n\n```html\n<DynamicBackgroundVar image=\"https://example.com/image1.jpg\" />\n<DynamicBackgroundVar image=\"https://example.com/image2.jpg\" />\n```\n\n```text\nbg-[url('${this.image}')]\n```\n\n```text\nbg-[image:var(--bg-image)]\n```\n\n```js\noptions: {\n safelist: {\n greedy: [\n /^bg-/\n ]\n }\n}\n```\n\n```text\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}'\n './components/**/*.{html,js}',\n ],\n safelist: [\n 'bg-red-500',\n 'text-3xl',\n 'lg:text-4xl',\n ]\n // ...\n}\n```\n\n```text\n@import \"tailwindcss\";\n@source inline(\"bg-red-500 text-3xl lg:text-4xl\");\n```\n\n```js\nsafelist: [\n {\n pattern: /^(bg-|border-|text-)/,\n variants: [\"hover\", \"active\"],\n },\n],\n```\n\n========================================\n\nComments:\n- FWIW, the main issue is that Tailwind needs to be able to see whole utility class strings to register them and thereby prevent them from being tree-shaken out of the build. Old me didn't realise this at the time. It could've been solved by simply *not* trying to use Tailwind to apply the styles. See stackoverflow.com/a/79745895/1090438 for a full explanation.\n- greedy is an outdated feature, must use the pattern\n- It just gives the example of safelist it doesn't exactly address the question asked.\n- You still aren't answering the question: Is there a way to exclude certain classes from being tree-shaken? What the TailwindCSS engine does is correct. It can't react to dynamic values because it doesn't process files at runtime - it works statically during a single compilation. What you're suggesting is essentially forcing certain classes into the generated CSS. Neither your v3 nor v4 examples actually force dynamic class names into the generated CSS; you only mentioned that safelisting exists. See more: stackoverflow.com/a/79745895/15167500\n- So, if you use TailwindCSS according to the documentation, there's no need for the extra step mentioned in the question.\n- Or use pre-declared enums: stackoverflow.com/a/78979537/15167500","metadata":{"transformedAt":"2026-08-18T18:33:42.928Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":169,"estimatedTokens":1032}}559{"id":"stack-68832525","source":"stackoverflow","questionId":68832525,"title":"Is there a way to change tailwind default style option?","tags":["html","css","next.js","html-lists","tailwind-css"],"text":"Title: Is there a way to change tailwind default style option?\nTags: html, css, next.js, html-lists, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm building a blog in NextJS. Apparently in Tailwind's list style type the default style is `list-none`. So every ` ` elements in my app is not styled at all.\n\nI use remark to process `.md` files and my function returns ` ` without classes so in this case I can't specify the classes by manually writing them.\n\n- Is there any way to change this default styling so my ` ` is not plain text?\n\n- or is there any way to give a `list-disc` class to all ` `?\n\n- or is there any way to exclude certain ``s from being styled by Tailwind?\n\n- other approach?\n\nI tried this\n\n```\n// tailwind.config.js\n module.exports = {\n corePlugins: {\n // ...\n listStyleType: false,\n }\n }\n```\n\nbut it doesn't solve the problem.\n\nAny help would be appreciated.\n\n========================================\n\nTop Answer:\nYou can disable the tailwind default nomalized stylings (preflight) from the tailwind.config.js like this:\n\n```\nmodule.exports = {\n corePlugins: {\n preflight: false,\n }\n};\n```\n\n========================================\n\nCode:\n```text\n// tailwind.config.js\n module.exports = {\n corePlugins: {\n // ...\n listStyleType: false,\n }\n }\n```\n\n```text\nlist-none\n```\n\n```text\n<ul> <li>\n```\n\n```text\n.md\n```\n\n```text\n<ul> <li>\n```\n\n```text\n<ul> <li>\n```\n\n```text\nlist-disc\n```\n\n```text\n<ul> <li>\n```\n\n```text\n<div>\n```\n\n```css\nul {\n @apply list-disc;\n}\n\nOR\n\n@tailwind base;\n@layer base{\n ul {\n @apply list-disc;\n }\n}\n```\n\n```css\nconst plugin = require('tailwindcss/plugin')\n\nmodule.exports = {\n plugins: [\n plugin(function({ addBase, theme }) {\n addBase({\n 'ul': { listStyle: 'disc' },\n })\n })\n ]\n}\n```\n\n```text\nmodule.exports = {\n corePlugins: {\n preflight: false,\n }\n};\n```\n\n```text\n@tailwindcss/typography\n```\n\n```text\nprose\n```\n\n```text\n@layer base {\n ul, ol {\n list-style: revert-layer;\n }\n}\n```\n\n========================================\n\nComments:\n- With Tailwind v4, tailwind.config.js configuration is no longer supported. All changes to base styles should be done in CSS directly: tailwindcss.com/docs/preflight\n- Object key can't use short line. list-style must be listStyle.\n- With Tailwind v4, tailwind.config.js configuration is no longer supported.\n- With Tailwind v4, tailwind.config.js configuration is no longer supported.\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.928Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":152,"estimatedTokens":666}}560{"id":"stack-74355713","source":"stackoverflow","questionId":74355713,"title":"Is there anyway to target nth child in tailwind-css v3?","tags":["css","reactjs","tailwind-css"],"text":"Title: Is there anyway to target nth child in tailwind-css v3?\nTags: css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a total of 10 items and I am *mapping* through them to render each one. I want least opacity for last element and highest for first element. I am aware of `:first` and `:last` in `tailwind-css`, but I was wondering if there is way so that I can target lets say *my 8th or 9th* in `tailwind-css`\n\nhere is my return statement from a component:\n\n```\n{[0,1,2,3,4,5,6,7,8,9].map((item) => (\n \n \n \n \n\n \n \n\n \n ))}\n```\n\nI want to decrease `opacity` going downwards i.e, from first item to last item.\n\n========================================\n\nTop Answer:\nArbitrary variants can be used for this.\n\nFor example, this\n\n```\n\n```\n\ngives an opacity of `0.25` to a section element that is an eighth child.\n\n========================================\n\nCode:\n```text\n{[0,1,2,3,4,5,6,7,8,9].map((item) => (\n <section\n key={item}\n className='last:opacity-20 flex justify-between items-center text-slate-600 bg-white shadow-sm p-5 rounded-xl my-4 cursor-pointer dark:bg-black dark:text-slate-400'\n >\n <div className='flex gap-3 items-center'>\n <div className='rounded-full w-8 h-8 bg-slate-200'></div>\n <p className='w-44 h-4 bg-slate-100'></p>\n </div>\n <p className='w-16 h-4 bg-slate-100'></p>\n </section>\n ))}\n```\n\n```text\n:first\n```\n\n```text\n:last\n```\n\n```text\ntailwind-css\n```\n\n```text\ntailwind-css\n```\n\n```text\nopacity\n```\n\n```js\n// tailwind.config.js\nlet plugin = require(\"tailwindcss/plugin\");\n\nmodule.exports = {\n plugins: [\n plugin(function ({ matchVariant, theme }) {\n matchVariant(\n 'nth',\n (value) => {\n return `&:nth-child(${value})`;\n },\n {\n values: {\n DEFAULT: 'n', // Default value for `nth:`\n '2n': '2n', // `nth-2n:utility` will generate `:nth-child(2n)` CSS selector\n '3n': '3n',\n '4n': '4n',\n '5n': '5n',\n //... so on if you need\n },\n }\n );\n }),\n ],\n}\n```\n\n```html\n<ul class=\"\">\n \n <li class=\"nth-2n:bg-red-400 nth-5n:bg-blue-500 nth-[5n+1]:bg-green-500 p-2\">1</li>\n <li class=\"nth-2n:bg-red-400 nth-5n:bg-blue-500 nth-[5n+1]:bg-green-500 p-2\">2</li>\n <li class=\"nth-2n:bg-red-400 nth-5n:bg-blue-500 nth-[5n+1]:bg-green-500 p-2\">3</li>\n <li class=\"nth-2n:bg-red-400 nth-5n:bg-blue-500 nth-[5n+1]:bg-green-500 p-2\">4</li>\n <li class=\"nth-2n:bg-red-400 nth-5n:bg-blue-500 nth-[5n+1]:bg-green-500 p-2\">5</li>\n <li class=\"nth-2n:bg-red-400 nth-5n:bg-blue-500 nth-[5n+1]:bg-green-500 p-2\">6</li>\n\n</ul>\n```\n\n```text\nnth-child\n```\n\n```text\nmatchVariant\n```\n\n```text\n2n\n```\n\n```text\n1st, 6th, 11th, 5n+1\n```\n\n```text\naddVariant\n```\n\n```text\nnth-child\n```\n\n```text\n{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item) => {\n // Generate class name\n // Need to config Tailwind as shown later for this to work\n const opacity = `opacity-${(10 - item) * 10}`;\n\n // Changed to bg-black here so result is more visible\n return (\n <section\n key={item}\n className={`${opacity} flex justify-between items-center text-slate-600 bg-black shadow-sm p-5 rounded-xl my-4 cursor-pointer dark:bg-black dark:text-slate-400`}\n >\n <div className=\"flex gap-3 items-center\">\n <div className=\"rounded-full w-8 h-8 bg-slate-200\"></div>\n <p className=\"w-44 h-4 bg-slate-100\"></p>\n </div>\n <p className=\"w-16 h-4 bg-slate-100\"></p>\n </section>\n );\n })}\n```\n\n```text\nconst opacitySafeList = [];\n\nfor (i = 1; i < 11; i++) {\n opacitySafeList.push(`opacity-${i * 10}`);\n}\n\nmodule.exports = {\n content: [\"...content of the project\"],\n\n// Tell Tailwind to generate these class names which does not exist in content files\n safelist: opacitySafeList,\n\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\nnth-child\n```\n\n```text\ntailwind.config.cjs\n```\n\n```html\n<section className=\"[&:nth-child(8)]:opacity-25\">\n</section>\n```\n\n```text\n0.25\n```\n\n========================================\n\nComments:\n- `opacity-{(10-item)*10}`","metadata":{"transformedAt":"2026-08-18T18:33:42.928Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":204,"estimatedTokens":1114}}561{"id":"stack-70790519","source":"stackoverflow","questionId":70790519,"title":"TailwindCSS: How can I fix a header & footer to the screen while keeping scrollable content in between?","tags":["reactjs","flexbox","tailwind-css"],"text":"Title: TailwindCSS: How can I fix a header & footer to the screen while keeping scrollable content in between?\nTags: reactjs, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm creating a React PWA for a client using Tailwind CSS and I want to achieve a layout in which there's a header fixed to the top of the screen and a navbar fixed to the bottom of the screen. In between I'll display scrollable content of dynamic size.\n\nI've been struggling with this problem for the most part of the day and I'm following the instructions on this answer as well as the code it provided here.\n\nI though I got it, as I implemented all the recommended classes in the relevant components and I got this result on my browser dev tools:\n\nhttps://i.sstatic.net/LKAZz.gif\n\nHowever, I got curious and decided to open the page on my phone. This is the result there and, as you can see, neither of the desired elements are actually fixed to the screen:\n\nhttps://i.sstatic.net/h0mVE.gif\n\nAt this point I'm completely lost. I've tried using `className={fixed}` in the Navbar, but it ends up clipping part of the content even when adding margin or padding to either the navbar or the content.\n\nHow can I fix both header and navbar to the screen while keeping the content scrollable?\n\nThese are the relevant parts of my code:\n\n**App.js**:\n\n```\nfunction App() {\n return (\n \n \n \n \n \n } />\n } />\n } />\n } />\n } />\n } />\n \n \n \n \n \n );\n}\n```\n\n**Header.js:**\n\n```\nconst Header = () => {\n return (\n \n \n \n )\n}\n```\n\n**Navbar.js:**\n\n```\nfunction Navbar() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n```\n\n========================================\n\nTop Answer:\nActually you don't need to set the position to \"fixed\" or \"absolut\". The problem can be solved simpler.\n\nYou need 4 divs. One as a container (we can call its class \"root\") which contains the further 3 divs.\n\nFor defining how much space each inner div can take from the root div we can use \"flex\" (with \"flex\" you can define the proportion to other components).\n\n(You can of course change height and width of root as you like)\n\n\r\n\r\n\n```\n.root {\n height: 70vh;\n width: 50vw;\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n}\n\n.Header--container {\n flex: 1;\n background-color: green;\n}\n\n.Footer--container {\n flex: 1;\n background-color: red;\n}\n\n.Content--container {\n flex: 5;\n background-color: white;\n overflow-y: scroll;\n}\n```\n\n\r\n\n```\n\n \n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata\n sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n \n \n \n\n```\n\n========================================\n\nCode:\n```js\nfunction App() {\n return (\n <Router>\n <div className='flex flex-col h-screen overflow-hidden'>\n <Header></Header>\n <div className='MainContent flex-1 overflow-y-scroll py-2 mx-2'>\n <Routes>\n <Route path=\"/\" element={<OrderView />} />\n <Route path=\"/DeliverymenView\" element={<DeliverymenView />} />\n <Route path=\"/InventoryView\" element={<InventoryView />} />\n <Route path=\"/RouteGenerationView\" element={<RouteGenerationView />} />\n <Route path=\"/AdministrativeView\" element={<AdministrativeView />} />\n <Route path=\"*\" element={<ErrorView />} />\n </Routes>\n </div>\n <Navbar></Navbar>\n </div>\n </Router>\n );\n}\n```\n\n```js\nconst Header = () => {\n return (\n <div className=\"Header shadow-md bg-white w-full \">\n <CurrentPage />\n </div>\n )\n}\n```\n\n```js\nfunction Navbar() {\n return (\n <div className=\"Navbar w-full flex flex-row gap-x-2 justify-evenly py-1 bg-white drop-shadow-md-top\">\n <Link to=\"/\">\n <MdShoppingCart className=\"text-zinc-400 text-5xl \"></MdShoppingCart>\n </Link>\n <Link to=\"/DeliverymenView\">\n <MdPerson className=\"text-zinc-400 text-5xl \"></MdPerson>\n </Link>\n <Link to=\"/InventoryView\">\n <MdViewList className=\"text-zinc-400 text-5xl \"></MdViewList>\n </Link>\n <Link to=\"/RouteGenerationView\">\n <MdDeliveryDining className=\"text-zinc-400 text-5xl \"></MdDeliveryDining>\n </Link>\n </div>\n )\n}\n```\n\n```text\nclassName={fixed}\n```\n\n```text\n<div class=\"flex flex-col h-screen\">\n <header class=\"w-full text-center border-b border-grey p-4 sticky top-0\">Some header</header>\n <main class=\"flex-1 overflow-y-scroll\">\n <div class=\"min-h-screen bg-slate-100\">\n <p>This is a very long section that consumes 100% viewport height!</p>\n </div>\n <div class=\"min-h-screen bg-slate-200\">\n <p>This is second long section that consumes 100% viewport height!</p>\n </div>\n <div class=\"min-h-screen bg-slate-100\">\n <p>This is third long section that consumes 100% viewport height!</p>\n </div>\n <div class=\"min-h-screen bg-slate-200\">\n <p>This is fourth long section that consumes 100% viewport height!</p>\n </div>\n <div class=\"min-h-screen bg-slate-100\">\n <p>This is fifth long section that consumes 100% viewport height!</p>\n </div>\n </main>\n <footer class=\"w-full text-center border-t border-grey p-4 sticky bottom-0\">some footer</footer>\n</div>\n```\n\n```text\nsticky\n```\n\n```text\ntop-0\n```\n\n```text\nbottom-0\n```\n\n```css\n.root {\n height: 70vh;\n width: 50vw;\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n}\n\n.Header--container {\n flex: 1;\n background-color: green;\n}\n\n.Footer--container {\n flex: 1;\n background-color: red;\n}\n\n.Content--container {\n flex: 5;\n background-color: white;\n overflow-y: scroll;\n}\n```\n\n```html\n<div class=\"root\">\n <div class=\"Header--container\">\n </div>\n <div class=\"Content--container\">\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata\n sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n </div>\n <div class=\"Footer--container\">\n </div>\n</div>\n```\n\n========================================\n\nComments:\n- Is your second screenshot showing an example of the `flex-col` solution? Because the header is showing some \"fixed\" behavior before it scrolls off the top, which should not happen.\n- Also, what styles are you applying with the `Header`, `Navbar`, and `MainContent` classes?\n- I ended up \"downgrading\" to \"position: fixed\" and adding padding to both the Header and Navbar.\n- Thnx for the feedback. I've edited the answer. Further feedback is welcome.\n- I came back to this issue, implemented your solution and it finally worked. I did have to set a fixed `y` margin to my `` component since it's height is variable.","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":284,"estimatedTokens":1918}}562{"id":"stack-73549023","source":"stackoverflow","questionId":73549023,"title":"Tailwind - keep header and left/right sidebar sticky on scroll","tags":["css","tailwind-css","tailwind-ui"],"text":"Title: Tailwind - keep header and left/right sidebar sticky on scroll\nTags: css, tailwind-css, tailwind-ui\nSource: Stack Overflow\n\nQuestion:\nHow do I keep my header, left/right sidebar sticky on scroll (on desktop, not mobile)?\n\nIt doesn't seem to be working with the fixed or sticky class, I've posted an example here: https://play.tailwindcss.com/Bj68nUJj1C.\n\n```\n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n Search projects\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Open main menu\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Documentation\n Support\n \n \n \n \n \n Open user menu\n \n \n \n\n \n \n \n View Profile\n Settings\n Logout\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n```\n\n========================================\n\nTop Answer:\nYou need to use `top-X` class together with `sticky`. For navbar `sticky top-0` and for sidebar something like `sticky top-20` should work.\n\nPrefix it with corresponding breakpoint prefix to apply it only for bigger screens.\n\n========================================\n\nCode:\n```text\n<!-- Background color split screen for large screens -->\n<div class=\"fixed top-0 left-0 h-full w-1/2 bg-white\" aria-hidden=\"true\"></div>\n<div class=\"fixed top-0 right-0 h-full w-1/2 bg-gray-50\" aria-hidden=\"true\"></div>\n<div class=\"relative flex min-h-screen flex-col\">\n <!-- Navbar -->\n <nav class=\"flex-shrink-0 bg-indigo-600\">\n <div class=\"mx-auto max-w-7xl px-2 sm:px-4 lg:px-8\">\n <div class=\"relative flex h-16 items-center justify-between\">\n <!-- Logo section -->\n <div class=\"flex items-center px-2 lg:px-0 xl:w-64\">\n <div class=\"flex-shrink-0\">\n <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=300\" alt=\"Workflow\" />\n </div>\n </div>\n\n <!-- Search section -->\n <div class=\"flex flex-1 justify-center lg:justify-end\">\n <div class=\"w-full px-2 lg:px-6\">\n <label for=\"search\" class=\"sr-only\">Search projects</label>\n <div class=\"relative text-indigo-200 focus-within:text-gray-400\">\n <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3\">\n <!-- Heroicon name: mini/magnifying-glass -->\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clip-rule=\"evenodd\" />\n </svg>\n </div>\n <input id=\"search\" name=\"search\" class=\"block w-full rounded-md border border-transparent bg-indigo-400 bg-opacity-25 py-2 pl-10 pr-3 leading-5 text-indigo-100 placeholder-indigo-200 focus:bg-white focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-0 sm:text-sm\" placeholder=\"Search projects\" type=\"search\" />\n </div>\n </div>\n </div>\n <div class=\"flex lg:hidden\">\n <!-- Mobile menu button -->\n <button type=\"button\" class=\"inline-flex items-center justify-center rounded-md bg-indigo-600 p-2 text-indigo-400 hover:bg-indigo-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600\" aria-controls=\"mobile-menu\" aria-expanded=\"false\">\n <span class=\"sr-only\">Open main menu</span>\n <!--\n Icon when menu is closed.\n\n Heroicon name: outline/bars-3-center-left\n\n Menu open: \"hidden\", Menu closed: \"block\"\n -->\n <svg class=\"block h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5\" />\n </svg>\n <!--\n Icon when menu is open.\n\n Heroicon name: outline/x-mark\n\n Menu open: \"block\", Menu closed: \"hidden\"\n -->\n <svg class=\"hidden h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n <!-- Links section -->\n <div class=\"hidden lg:block lg:w-80\">\n <div class=\"flex items-center justify-end\">\n <div class=\"flex\">\n <a href=\"#\" class=\"rounded-md px-3 py-2 text-sm font-medium text-indigo-200 hover:text-white\">Documentation</a>\n <a href=\"#\" class=\"rounded-md px-3 py-2 text-sm font-medium text-indigo-200 hover:text-white\">Support</a>\n </div>\n <!-- Profile dropdown -->\n <div class=\"relative ml-4 flex-shrink-0\">\n <div>\n <button type=\"button\" class=\"flex rounded-full bg-indigo-700 text-sm text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-700\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n <span class=\"sr-only\">Open user menu</span>\n <img class=\"h-8 w-8 rounded-full\" src=\"https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&h=256&q=80\" alt=\"\" />\n </button>\n </div>\n\n <!--\n Dropdown menu, show/hide based on menu state.\n\n Entering: \"transition ease-out duration-100\"\n From: \"transform opacity-0 scale-95\"\n To: \"transform opacity-100 scale-100\"\n Leaving: \"transition ease-in duration-75\"\n From: \"transform opacity-100 scale-100\"\n To: \"transform opacity-0 scale-95\"\n -->\n <div class=\"absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"user-menu-button\" tabindex=\"-1\">\n <!-- Active: \"bg-gray-100\", Not Active: \"\" -->\n <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-0\">View Profile</a>\n <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-1\">Settings</a>\n <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Logout</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </nav>\n\n <!-- 3 column wrapper -->\n <div class=\"mx-auto w-full max-w-7xl flex-grow lg:flex xl:px-8\">\n <!-- Left sidebar & main wrapper -->\n <div class=\"min-w-0 flex-1 bg-white xl:flex\">\n <div class=\"border-b border-gray-200 bg-white xl:w-64 xl:flex-shrink-0 xl:border-b-0 xl:border-r xl:border-gray-200\">\n <div class=\"h-full py-6 pl-4 pr-6 sm:pl-6 lg:pl-8 xl:pl-0\">\n <!-- Start left column area -->\n <div class=\"relative h-full\" style=\"min-height: 12rem\">\n <div class=\"absolute inset-0 rounded-lg border-2 border-dashed border-gray-200\"></div>\n </div>\n <!-- End left column area -->\n </div>\n </div>\n\n <div class=\"bg-white lg:min-w-0 lg:flex-1\">\n <div class=\"h-full py-6 px-4 sm:px-6 lg:px-8\">\n <!-- Start main area-->\n <div class=\"relative h-full\" style=\"min-height: 36rem\">\n <div class=\"absolute inset-0 rounded-lg border-2 border-dashed border-gray-200\"></div>\n </div>\n <!-- End main area -->\n </div>\n </div>\n </div>\n\n <div class=\"bg-gray-50 pr-4 sm:pr-6 lg:flex-shrink-0 lg:border-l lg:border-gray-200 lg:pr-8 xl:pr-0\">\n <div class=\"h-full py-6 pl-6 lg:w-80\">\n <!-- Start right column area -->\n <div class=\"relative h-full\" style=\"min-height: 16rem\">\n <div class=\"absolute inset-0 rounded-lg border-2 border-dashed border-gray-200\"></div>\n </div>\n <!-- End right column area -->\n </div>\n </div>\n </div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"fixed top-0 left-0 h-full w-1/2 bg-white\" aria-hidden=\"true\"></div>\n<div class=\"fixed top-0 right-0 h-full w-1/2 bg-gray-50\" aria-hidden=\"true\"></div>\n<div class=\"relative grid grid-cols-[2rem_1fr_2rem] xl:grid-cols-[minmax(2rem,1fr)_16rem_minmax(200px,calc(80rem-32rem))_16rem_minmax(2rem,1fr)] lg:grid-cols-[2rem_minmax(200px,calc(100%-16rem))_16rem_2rem] min-h-screen\">\n <!-- Navbar -->\n <nav class=\"min-h-[4rem] sticky top-0 z-10 col-[1/-1] row-[1] flex justify-center items-center bg-indigo-600 text-white\">\n Nav\n </nav>\n\n <aside class=\"max-h-screen xl:sticky lg:static top-12 col-[2] row-[2] border-b border-gray-200 bg-white xl:border-b-0 xl:border-r xl:border-gray-200\">\n <div class=\"h-full py-6 pl-4 pr-6 sm:pl-6 lg:pl-8 xl:pl-0\">\n <!-- Start left column area -->\n <div class=\"relative h-full\" style=\"min-height: 12rem\">\n <div class=\"absolute inset-0 rounded-lg border-2 border-dashed border-gray-200 flex justify-center items-center\">\n Aside\n </div>\n </div>\n <!-- End left column area -->\n </div>\n </aside>\n\n <main class=\"bg-white col-[2] row[3] xl:col-[3] xl:row-[2] min-h-[150vh]\">\n <div class=\"h-full py-6 px-4 sm:px-6 lg:px-8\">\n <!-- Start main area-->\n <div class=\"relative h-full\" style=\"min-height: 36rem\">\n <div class=\"absolute inset-0 rounded-lg border-2 border-dashed border-gray-200 flex justify-center items-center\">\n Main\n </div>\n </div>\n <!-- End main area -->\n </div>\n </main>\n\n <aside class=\"max-h-screen sticky top-12 col-[2] row-[4] xl:col-[4] xl:row-[2] lg:col-[3] lg:row-[2/2_span] bg-gray-50 pr-4 sm:pr-6 lg:border-l lg:border-gray-200 lg:pr-8 xl:pr-0\">\n <div class=\"h-full py-6 pl-6\">\n <!-- Start right column area -->\n <div class=\"relative h-full\" style=\"min-height: 16rem\">\n <div class=\"absolute inset-0 rounded-lg border-2 border-dashed border-gray-200 flex justify-center items-center\">\n Aside\n </div>\n </div>\n <!-- End right column area -->\n </div>\n </aside>\n</div>\n```\n\n```text\ntop-X\n```\n\n```text\nsticky\n```\n\n```text\nsticky top-0\n```\n\n```text\nsticky top-20\n```\n\n========================================\n\nComments:\n- This is the correct answer per TW docs: tailwindcss.com/docs/position#sticky-positioning-elements\n- spent 2 hours for a sticky header and first column table. 'sticky top-0' for , 'sticky left-0' for first in . and finally with your answer; 'sticky left-0 top-X' for first in every solved it. i still understand how :)\n- it has some kind of funny stacking but it can make it alive","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":334,"estimatedTokens":2746}}563{"id":"stack-76615907","source":"stackoverflow","questionId":76615907,"title":"How to apply tailwind styles only in a certain element?","tags":["css","tailwind-css","postcss"],"text":"Title: How to apply tailwind styles only in a certain element?\nTags: css, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI'm writing a WordPress plugin using ReactPress as well as Tailwind and don't want the part of my application's CSS that is written in React to affect the styles of the Wordpress part.\n\nHowever, since\n\n`index.css`\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nis applied to the whole page, this screws up the rest of the page.\n\nIs there any way to only make these styles apply inside a certain element, like this for example?\n\n```\ndiv#root {\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n}\n```\n\n========================================\n\nTop Answer:\nRefer to this:\n\nhttps://www.npmjs.com/package/tailwindcss-scoped-preflight\n\nThis lets you define `isolationStrategy`, where you can pace a single selector or an array of selectors(inside your tailwind.config.js):\n\n```\nplugins: [\n scopedPreflightStyles({\n isolationStrategy: isolateInsideOfContainer([\".tw-class\", \"#tw-id\"]),\n }),\n ],\n```\n\nThis will apply it to all of the containers using the class `tw-class`, the `id tw-id` and its children.\n\nA really smooth solution!\n\n========================================\n\nCode:\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```css\ndiv#root {\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n}\n```\n\n```text\nindex.css\n```\n\n```css\n.react-style-reset html,\n.react-style-reset body,\n.react-style-reset div,\n.react-style-reset span,\n.react-style-reset applet,\n.react-style-reset object,\n.react-style-reset iframe,\n.react-style-reset h1,\n.react-style-reset h2,\n.react-style-reset h3,\n.react-style-reset h4,\n.react-style-reset h5,\n.react-style-reset h6,\n.react-style-reset p,\n.react-style-reset blockquote {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n}\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\"./index.html\", \"./src/**/*.{js,ts,jsx,tsx}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n corePlugins: {\n preflight: false,\n },\n prefix: \"tw-\",\n important: true,\n};\n```\n\n```text\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App.tsx\";\nimport \"./embed-reset.css\";\nimport \"./index.css\";\n\nReactDOM.createRoot(document.getElementById(\"react-embed-1\")!).render(\n <React.StrictMode>\n <App />\n </React.StrictMode>\n);\n```\n\n```html\n<div id=\"react-embed-1\" class=\"react-style-reset\"></div>\n```\n\n```html\n<script type=\"module\" crossorigin src=\"/assets/index-7124ef29.js\"></script>\n <link rel=\"stylesheet\" href=\"/assets/index-8e021281.css\">\n```\n\n```text\n@tailwind base; @tailwind components; @tailwind utilities;\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nembed-reset.css\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmain.tsx\n```\n\n```text\nembed-reset.css\n```\n\n```text\nindex.css\n```\n\n```text\n<div>\n```\n\n```text\nreact-embed-1\n```\n\n```text\nreact-style-reset\n```\n\n```text\nplugins: [\n scopedPreflightStyles({\n isolationStrategy: isolateInsideOfContainer([\".tw-class\", \"#tw-id\"]),\n }),\n ],\n```\n\n```text\nisolationStrategy\n```\n\n```text\ntw-class\n```\n\n```text\nid tw-id\n```\n\n========================================\n\nComments:\n- It ended up being a problem completelely unrelated to this, but thank you anyways for the detailed answer!\n- No worries, I needed somewhere to document my answer and your question was still relevant to my issue lol. Maybe it will help someone.\n- tailwind.config.js example was very helpful, thank you.","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":22,"totalLines":201,"estimatedTokens":895}}564{"id":"stack-56588040","source":"stackoverflow","questionId":56588040,"title":"Transition duration with tailwind css","tags":["tailwind-css"],"text":"Title: Transition duration with tailwind css\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIs there a class for the transition duration with tailwind CSS? \nFor example, is there a way to add transition duration on this example div?\n\n```\ntest\n```\n\n========================================\n\nTop Answer:\n### Edit: tailwindcss v1.2.0 added transitions in 2020\n\nThere are currently no transition utilities in standard tailwindcss (there is an open issue on github from 2017). However, transition utilities can be enabled through plugins. You should look at benface's plugin tailwindcss-transitions. \n\n```\nnpm install tailwindcss-transitions\n```\n\n========================================\n\nCode:\n```text\n<div class=”text-black hover:text-red”>test</div>\n```\n\n```text\nnpm install tailwindcss-transitions\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":2,"totalLines":33,"estimatedTokens":202}}565{"id":"stack-79633687","source":"stackoverflow","questionId":79633687,"title":"Tailwind dark mode not working even after configuring — dark: classes are always active / take preference","tags":["html","css","reactjs","tailwind-css","tailwind-css-4"],"text":"Title: Tailwind dark mode not working even after configuring — dark: classes are always active / take preference\nTags: html, css, reactjs, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nTailwindCSS version:\n\n```\n{\n \"dependencies\": {\n \"tailwindcss\": \"^4.1.3\",\n }\n}\n```\n\nI'm using Tailwind CSS in a React project with the following configuration:\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: 'class',\n content: ['./src/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\nIn my components, I use dark mode utility classes like this:\n\n```\n\n Hello\n\n```\n\nTo toggle dark mode\n\n```\nconst root = document.documentElement;\nroot.classList.toggle('dark', themeMode === 'dark');\nlocalStorageUtil.setMode(themeMode);\n```\n\nEven when the dark class is not present on the element, the dark: styles (like dark:bg-black) are still applied as if dark mode is always enabled.\n\n========================================\n\nCode:\n```json\n{\n \"dependencies\": {\n \"tailwindcss\": \"^4.1.3\",\n }\n}\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: 'class',\n content: ['./src/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\n<div className=\"bg-white text-black dark:bg-black dark:text-white\">\n Hello\n</div>\n```\n\n```text\nconst root = document.documentElement;\nroot.classList.toggle('dark', themeMode === 'dark');\nlocalStorageUtil.setMode(themeMode);\n```\n\n```none\nnpm install tailwindcss@3\n```\n\n```css\n@import \"tailwindcss\";\n\n@custom-variant dark (&:where(.dark, .dark *));\n```\n\n```text\nbg-white text-black\n```\n\n```text\nnpm install tailwindcss\n```\n\n```text\nselector\n```\n\n```text\nclass\n```\n\n```text\n@tailwindcss/postcss\n```\n\n```text\n@tailwindcss/vite\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntheme.extend\n```\n\n```text\n@custom-variant\n```\n\n```text\n@custom-variant\n```\n\n========================================\n\nComments:\n- Which version of TailwindCSS are you using?\n- @rozsazoltan \"tailwindcss\": \"^4.1.3\",\n- Related: How to use custom color themes in TailwindCSS v4\n- @Vin If you have any questions about the solution, feel free to ask. I will do my best to answer based on my knowledge. If you found the answer helpful, please consider upvoting and marking it with a checkmark so that the system can highlight it as a potential solution for others.\n- It's working!, I just needed to add `@custom-variant dark (&:where(.dark, .dark *));` , Thankyou for helping\n- Thanks @custom-variant dark (&:where(.dark, .dark *)); this worked for me!","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":16,"totalLines":141,"estimatedTokens":640}}566{"id":"stack-67539820","source":"stackoverflow","questionId":67539820,"title":"HeadlessUI/vue: TypeError vue.defineComponent is not a function","tags":["typescript","vue.js","vuejs2","nuxt.js","tailwind-css"],"text":"Title: HeadlessUI/vue: TypeError vue.defineComponent is not a function\nTags: typescript, vue.js, vuejs2, nuxt.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI try to install `@headlessui/vue` in my `nuxt` project.\n\nWhen I try to use it like:\n\n```\n\n \n \n Item\n \n \n\nimport Vue from 'vue'\nimport { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'\n\nexport default Vue.extend({\n components: { Menu, MenuButton, MenuItems, MenuItem },\n data () {\n return {\n isScrolling: false\n }\n },\n....\n```\n\nI get a type error while compiling\n\n```\nTypeError\nvue.defineComponent is not a function\n```\n\n========================================\n\nCode:\n```html\n<template>\n <Menu>\n <MenuItems>\n <MenuItem>Item</MenuItem>\n </MenuItems>\n </Menu>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue'\nimport { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'\n\nexport default Vue.extend({\n components: { Menu, MenuButton, MenuItems, MenuItem },\n data () {\n return {\n isScrolling: false\n }\n },\n....\n```\n\n```text\nTypeError\nvue.defineComponent is not a function\n```\n\n```text\n@headlessui/vue\n```\n\n```text\nnuxt\n```\n\n========================================\n\nComments:\n- The library stated that it only supports vue3 while nuxt is still using vue 2.6.12 npmjs.com/package/@headlessui/vue\n- Hi, this has been around for a while, but I'm still getting this error with Nuxt. Is there a way to fix? I'm using chartjs vue wrapper with Nuxt and getting this error\n- @CornelVerster this is unrelated to HeadlessUI. I've answered you on your own question.","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":82,"estimatedTokens":393}}567{"id":"stack-76566469","source":"stackoverflow","questionId":76566469,"title":"Setting custom max and min height or width in Tailwind CSS","tags":["html","css","tailwind-css"],"text":"Title: Setting custom max and min height or width in Tailwind CSS\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI know in CSS, you can set the `min-height` and `max-width` but when I try `min-h-10` and `max-h-10` it doesn't do anything in Tailwind CSS.\n\nAnd this is what I have:\n\n```\n\n \n h\n \n\n```\n\n========================================\n\nTop Answer:\nIn Tailwind CSS, you can set your custom values like this:\n\n```\n\n \n h\n \n\n```\n\n========================================\n\nCode:\n```html\n<div class=\"flex-col justify-center\">\n <div class=\"h-10 w-10 border bg-blue-300 block\">\n h\n </div>\n</div>\n```\n\n```text\nmin-height\n```\n\n```text\nmax-width\n```\n\n```text\nmin-h-10\n```\n\n```text\nmax-h-10\n```\n\n```text\nmodule.exports = {\n theme: {\n maxHeight: {\n '10': '10px',\n }\n }\n}\n```\n\n```text\n<div class=\"max-h-10 w-32 bg-red-400\">\n I'm an element!\n</div>\n```\n\n```html\n<div class=\"max-h-[10px] w-32 bg-red-400\">\n I'm an element!\n</div>\n```\n\n```text\nmin-h-10\n```\n\n```text\nmax-h-10\n```\n\n```text\nmin-h-0\n```\n\n```text\nmin-h-full\n```\n\n```text\nmin-h-screen\n```\n\n```text\nmin-h-min\n```\n\n```text\nmin-h-max\n```\n\n```text\nmin-h-fit\n```\n\n```text\nmin-h-10\n```\n\n```text\nmin-height\n```\n\n```text\ntheme.minHeight\n```\n\n```text\ntheme.extend.minHeight\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmax-height\n```\n\n```text\nmin-height\n```\n\n```text\nmin-width\n```\n\n```text\nmax-width\n```\n\n```html\n<div class=\"flex-col justify-center items-center\">\n <div class=\"min-h-[100px] min-w-[100px] border bg-blue-300 block\">\n h\n </div>\n</div>\n```\n\n```text\ntheme:{\n extend: {\n minHeight: {\n ...defaultTheme.height,\n },\n minWidth: {\n ...defaultTheme.width,\n },\n }\n}\n```\n\n```text\ntheme:{\n extend: {\n minHeight: ({ theme }) => ({\n ...theme('height'),\n }),\n minWidth: ({ theme }) => ({\n ...theme('width'),\n }),\n\n }\n}\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":29,"totalLines":185,"estimatedTokens":481}}568{"id":"stack-74319907","source":"stackoverflow","questionId":74319907,"title":"Extending Tailwind \"modes\" alongside dark mode","tags":["css","reactjs","tailwind-css","tailwind-css-3"],"text":"Title: Extending Tailwind \"modes\" alongside dark mode\nTags: css, reactjs, tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nHow to can adding more themes for Tailwind in the same manner as dark mode?\n\nThe `dark` class is included within the HTML tag to signify that the page is now in dark mode, and we use the `dark:` selector when defining classes to style in that mode.\n\nMy question - how do we go about adding additional classes to the HTML tag and using additional custom selectors within styles to style in that particular variant?\n\n========================================\n\nTop Answer:\nI know I am late to the party here, but you can now just simply pass a selector, and the data tag, or class name in the tailwindcss config file now.\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: ['selector', '[data-mode=\"dark\"]'],\n\n // ...\n}\n```\n\nor you can have multiple selectors as well\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: ['variant', [\n '@media (prefers-color-scheme: dark) { &:not(.light *) }',\n '&:is(.dark *)',\n ]],\n // ...\n}\n```\n\nThis is useful for some plugins that manage dark mode in ways other than adding a class tag. I stumbled on this questions looking for the exact same thing actually.\n\n========================================\n\nCode:\n```text\ndark\n```\n\n```text\ndark:\n```\n\n```js\nconst plugin = require('tailwindcss/plugin')\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n plugins: [\n plugin(function({addVariant}) {\n // here is your CSS selector - could be anything\n // in this case it is `.theme` element\n // with `.theme--red` class (both present)\n addVariant('theme-red', '.theme.theme--red &')\n\n // and so on\n addVariant('theme-green', '.theme.theme--green &')\n })\n ],\n}\n```\n\n```html\n<div class=\"theme\">\n <div class=\"theme-red:bg-red-200 theme-green:bg-green-200 theme-red:text-red-700 theme-green:text-green-700\">\n <h2 class=\"\">Heading</h2>\n\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio nam blanditiis vitae. Accusantium nostrum tenetur assumenda dolorum placeat, aliquam reprehenderit porro illum nam illo quis eum mollitia nulla atque delectus?</p>\n </div>\n</div>\n```\n\n```text\nhtml\n```\n\n```text\nbody\n```\n\n```text\ndata-attributes\n```\n\n```text\ndata-theme\n```\n\n```text\n:has\n```\n\n```text\n.theme\n```\n\n```text\n:has\n```\n\n```text\ntheme--red\n```\n\n```text\ntheme--green\n```\n\n```text\n.theme\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: ['selector', '[data-mode=\"dark\"]'],\n\n // ...\n}\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: ['variant', [\n '@media (prefers-color-scheme: dark) { &:not(.light *) }',\n '&:is(.dark *)',\n ]],\n // ...\n}\n```\n\n```js\ndocument.querySelector('#toggle-dark').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n document.documentElement.classList.remove('coffee');\n});\n\ndocument.querySelector('#toggle-coffee').addEventListener('click', () => {\n document.documentElement.classList.toggle('coffee');\n document.documentElement.classList.remove('dark');\n});\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant dark (&:where(.dark, .dark *));\n@custom-variant coffee (&:where(.coffee, .coffee *));\n\n@theme {\n --color-pink: #eb6bd8;\n --color-tsunami: #77b4ea;\n}\n\n@layer theme {\n :root, :host {\n @variant dark {\n --color-pink: #8e0d7a;\n --color-tsunami: #0d84ec;\n }\n \n @variant coffee {\n --color-pink: #a67ca8;\n --color-tsunami: #b57913;\n }\n }\n}\n</style>\n\n<div class=\"mb-4\">\n <button id=\"toggle-dark\" class=\"px-4 py-2 bg-sky-600 hover:bg-sky-950 text-white cursor-pointer rounded-lg\">Toggle Dark</button>\n <button id=\"toggle-coffee\" class=\"px-4 py-2 bg-amber-600 hover:bg-amber-950 text-white cursor-pointer rounded-lg\">Toggle Coffee</button>\n</div>\n\n<button class=\"size-20 bg-pink dark:text-white coffee:text-amber-50\">Hello World</button>\n<div class=\"w-50 h-12 bg-tsunami dark:text-white coffee:text-orange-200\">\n Lorem Ipsum\n</div>\n```\n\n```js\ndocument.querySelector('#toggle-dark').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n document.documentElement.classList.remove('coffee');\n});\n\ndocument.querySelector('#toggle-coffee').addEventListener('click', () => {\n document.documentElement.classList.toggle('coffee');\n document.documentElement.classList.remove('dark');\n});\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant dark (&:where(.dark, .dark *));\n@custom-variant coffee (&:where(.coffee, .coffee *));\n\n/* NOTE: It still works starting from Chrome 111 and Safari 16.4. */\n@theme inline {\n --color-pink:\n var(--tw-light, #eb6bd8)\n var(--tw-dark, #8e0d7a)\n var(--tw-coffee, #a67ca8);\n --color-tsunami:\n var(--tw-light, #77b4ea)\n var(--tw-dark, #0d84ec)\n var(--tw-coffee, #b57913);\n}\n\n* {\n color-scheme: light;\n --tw-light: initial;\n --tw-dark: ;\n --tw-coffee: ;\n \n @variant dark {\n color-scheme: dark;\n --tw-light: ;\n --tw-dark: initial;\n --tw-coffee: ;\n }\n \n @variant coffee {\n /* You can keep the value on \"light\" or \"dark\" as needed. */\n /* color-scheme: coffee; is invalid. */\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#syntax */\n color-scheme: light;\n --tw-light: ;\n --tw-dark: ;\n --tw-coffee: initial;\n }\n}\n</style>\n\n<div class=\"mb-4\">\n <button id=\"toggle-dark\" class=\"px-4 py-2 bg-sky-600 hover:bg-sky-950 text-white cursor-pointer rounded-lg\">Toggle Dark</button>\n <button id=\"toggle-coffee\" class=\"px-4 py-2 bg-amber-600 hover:bg-amber-950 text-white cursor-pointer rounded-lg\">Toggle Coffee</button>\n</div>\n\n<button class=\"size-20 bg-pink dark:text-white coffee:text-amber-50\">Hello World</button>\n<div class=\"w-50 h-12 bg-tsunami dark:text-white coffee:text-orange-200\">\n Lorem Ipsum\n</div>\n```\n\n```text\ndark\n```\n\n```text\n@custom-variant\n```\n\n```text\ndark:\n```\n\n```text\n@layer theme\n```\n\n```text\n@variant\n```\n\n```text\n@variant\n```\n\n```text\n:root\n```\n\n```text\n@theme\n```\n\n```text\n@layer theme\n```\n\n```text\n@theme\n```\n\n```text\n@layer theme\n```\n\n```text\n:root\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n```text\nlight-dark()\n```\n\n```text\nlight-dark()\n```\n\n```text\nlight-dark()\n```\n\n========================================\n\nComments:\n- From TailwindCSS v4 onward, no JS configuration is needed; in a CSS-first configuration, it is also possible in multiple ways, see: How to use custom color themes in TailwindCSS v4 (Just like with dark in the referenced answer, you can also create red: and its associated colors.) Or another alternative: stackoverflow.com/a/79741037/15167500\n- Fantastic response, thank you!","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":37,"totalLines":328,"estimatedTokens":1732}}569{"id":"stack-79705933","source":"stackoverflow","questionId":79705933,"title":"Should I use `@theme` or `@theme inline`?","tags":["tailwind-css","tailwind-css-4"],"text":"Title: Should I use `@theme` or `@theme inline`?\nTags: tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nIn some guides, they use `@theme`, while in others, they use `@theme inline`. If I stick to the `@theme inline` written by Next.js, the dark mode override mentioned in several answers here does not work:\n\n- How to use custom color themes in TailwindCSS v4 - StackOverflow\n\n```\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```\n:root {\n --primaryLight: oklch(51.1% 0.262 276.966);\n --primaryDark: oklch(43.8% 0.218 303.724);\n}\n```\n\n```\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme inline {\n --color-background: oklch(80.9% 0.105 251.813);\n --color-foreground: var(--primaryLight);\n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n}\n\n@layer theme {\n :root, :host {\n @variant dark {\n --color-background: oklch(74% 0.238 322.16);\n --color-foreground: var(--primaryDark);\n }\n }\n}\n\nClick Here\n\n Example with variant (working)\n\n Example with background and foreground (not working)\n\n```\n\nIn the example, I declared two colors.\n\n- One with a fixed color code, which I later overrode in the recommended way with another fixed color.\n\n- The other was declared using a CSS variable, which I would also override later with another CSS variable.\n\nNeither works. In contrast, the dark mode toggle works well because the original TailwindCSS colors change properly with the `dark:` variant.\n\nThe only difference compared to the linked SO answer is that I am using `@theme inline` based on Next.js's recommendation. How should I properly use `@theme inline` so that it works in dark mode as well?\n\n========================================\n\nCode:\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```css\n:root {\n --primaryLight: oklch(51.1% 0.262 276.966);\n --primaryDark: oklch(43.8% 0.218 303.724);\n}\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme inline {\n --color-background: oklch(80.9% 0.105 251.813);\n --color-foreground: var(--primaryLight);\n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n}\n\n@layer theme {\n :root, :host {\n @variant dark {\n --color-background: oklch(74% 0.238 322.16);\n --color-foreground: var(--primaryDark);\n }\n }\n}\n</style>\n\n<button class=\"w-100 h-12 bg-sky-200 text-sky-800\">Click Here</button>\n<div class=\"w-100 h-12 bg-purple-200 dark:bg-purple-900 dark:text-white\">\n Example with variant (working)\n</div>\n<div class=\"w-100 h-12 bg-background text-foreground\">\n Example with background and foreground (not working)\n</div>\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n```text\n@theme inline\n```\n\n```text\ndark:\n```\n\n```text\n@theme inline\n```\n\n```text\n@theme inline\n```\n\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```css\n:root {\n --primaryLight: oklch(51.1% 0.262 276.966);\n --primaryDark: oklch(43.8% 0.218 303.724);\n}\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-background: oklch(80.9% 0.105 251.813);\n}\n\n@theme {\n --color-foreground: var(--primaryLight);\n}\n\n@theme inline {\n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n}\n\n@layer theme {\n :root, :host {\n @variant dark {\n --color-background: oklch(74% 0.238 322.16);\n --color-foreground: var(--primaryDark);\n }\n }\n}\n</style>\n\n<button class=\"w-100 h-12 bg-sky-200 text-sky-800\">Click Here</button>\n<div class=\"w-100 h-12 bg-purple-200 dark:bg-purple-900 dark:text-white\">\n Example with variant (working)\n</div>\n<div class=\"w-100 h-12 bg-background text-foreground\">\n Example with background and foreground<br>(working by \"@theme\" instead of \"@theme inline\")\n</div>\n```\n\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```css\n:root {\n --primaryLight: oklch(51.1% 0.262 276.966);\n --primaryDark: oklch(43.8% 0.218 303.724);\n}\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme inline {\n /* So if you provide a hardcoded color, it cannot be overridden anymore */\n --color-background: oklch(80.9% 0.105 251.813);\n \n /* If you provide a variable, it can be overridden.\n This way, you avoid having to nest the variable\n inside another global variable\n (This is the purpose of the inline approach)\n */\n --color-foreground: var(--primaryLight);\n \n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n}\n\n@layer theme {\n /* In this case, the value previously declared in `:root` can be overridden by using `*` */\n * {\n @variant dark {\n /* So only inline values declared with variables\n can be overridden by overriding the original variable */\n --primaryLight: var(--primaryDark);\n \n /* Let's be honest, this looks awkward.\n So it's recommended to name the variables more carefully */\n }\n }\n}\n</style>\n\n<button class=\"w-100 h-12 bg-sky-200 text-sky-800\">Click Here</button>\n<div class=\"w-100 h-12 bg-purple-200 dark:bg-purple-900 dark:text-white\">\n Example with variant (working)\n</div>\n<div class=\"w-100 h-12 bg-background text-foreground font-bold\">\n Example with background and foreground<br>(foreground working by original variable)\n</div>\n```\n\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-background: oklch(80.9% 0.105 251.813);\n}\n\n@theme inline {\n --color-foreground: var(--myForegroundColor);\n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n}\n\n@layer theme {\n :root, :host {\n --myForegroundColor: oklch(51.1% 0.262 276.966);\n \n @variant dark {\n --color-background: oklch(74% 0.238 322.16);\n --myForegroundColor: oklch(43.8% 0.218 303.724);\n }\n }\n}\n</style>\n\n<button class=\"w-100 h-12 bg-sky-200 text-sky-800\">Click Here</button>\n<div class=\"w-100 h-12 bg-purple-200 dark:bg-purple-900 dark:text-white\">\n Example with variant (working)\n</div>\n<div class=\"w-100 h-12 bg-background text-foreground\">\n Example with background and foreground (working)\n</div>\n```\n\n```text\n@theme inline\n```\n\n```text\n@theme\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n```text\n@theme inline\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n```text\n@theme\n```\n\n```text\n@layer theme\n```\n\n```text\n:root\n```\n\n```text\n*\n```\n\n```text\n:root, :host\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n========================================\n\nComments:\n- Related: github.com/tailwindlabs/tailwindcss/discussions/18560","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":35,"totalLines":356,"estimatedTokens":1836}}570{"id":"stack-67070641","source":"stackoverflow","questionId":67070641,"title":"Pre-build all (including unused) tailwind classes in dev","tags":["laravel","tailwind-css"],"text":"Title: Pre-build all (including unused) tailwind classes in dev\nTags: laravel, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI would like to build all tailwind classes immediately with yarn in development so I have them all pre-built.\n\n**Why?**\n\nMy problem is this:\n\nI am \"doing frontend\" in my Laravel project as good as I can and am trying out all these different classes from tailwind. It seems to me that only the tailwind classes that are used in the project gets built on `yarn run` (or at start with `yarn watch`). This leads to a problem when I have my `yarn watch` active. As `yarn watch` only watches my scss files, and not my blades, it does not trigger a build when I add a novel tailwind class to a blade file. Hence I need to manually close the watch and restart it each time I use a novel class.\n\nA solution that I am grasping for would be to, in dev, pre-build every tailwind class, even the so far unused ones. How could that be done?\n\n========================================\n\nTop Answer:\nUse the `safelist` option in the tailwind.config.js file. That option is designed to generate classes even if the classes cannot be found in the html files listed in your `content` path of that config file. The fun thing is that `safelist` accepts regex patterns so you can just throw in `.*` and you should get everything.\n\nI just tried and it appeared to work. The resulting css file is 45,292 lines long and contains every tailwind class I've ever seen.\n\n```\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n safelist: [\n {\n pattern: /.*/\n }\n ]\n}\n```\n\n========================================\n\nCode:\n```text\nyarn run\n```\n\n```text\nyarn watch\n```\n\n```text\nyarn watch\n```\n\n```text\nyarn watch\n```\n\n```text\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n safelist: [\n {\n pattern: /.*/\n }\n ]\n}\n```\n\n```text\nsafelist\n```\n\n```text\ncontent\n```\n\n```text\nsafelist\n```\n\n```text\n.*\n```\n\n========================================\n\nComments:\n- Might be worth looking into the new JIT mode for TailwindCSS.\n- I will note that all the classes generated by this approach will end up conflicting with each other. So although it helps with autocomplete, you can't reliably test the page in your browser afterwards.","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":94,"estimatedTokens":583}}571{"id":"stack-73261400","source":"stackoverflow","questionId":73261400,"title":"Tailwind css carousel example not working","tags":["reactjs","next.js","tailwind-css"],"text":"Title: Tailwind css carousel example not working\nTags: reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn a `next.js` project, I am trying to build a carousel using this example :\nhttps://tailwind-elements.com/docs/standard/components/carousel/\n\nI have installed `tailwindcss@2.0.2` do i need anything else to make CSS work.\n\n========================================\n\nTop Answer:\nPlease, make sure this.\n\nBefore starting the project, install Node.js (LTS) and TailwindCSS.\n\nRun the following command to install the package via NPM:\n\n**TERMINAL**\n\n```\nnpm install tw-elements\n```\n\n- Tailwind Elements is a plugin and should be included inside the tailwind.config.js file. It is also recommended to extend the content array with a js file that loads dynamic component classes:\n\n**TAILWIND.CONFIG.JS**\n\n```\nmodule.exports = {\n content: ['./src/**/*.{html,js}', './node_modules/tw-elements/dist/js/**/*.js'],\n plugins: [\n require('tw-elements/dist/plugin')\n ]\n}\n```\n\n- Dynamic components will work after adding the js file:\n\n**INDEX.HTML**\n\n```\n\n```\n\nAlternatively, you can import it in the following way (bundler version):\n\n**INDEX.JS**\n\n```\nimport 'tw-elements';\n```\n\n========================================\n\nCode:\n```text\nnext.js\n```\n\n```text\ntailwindcss@2.0.2\n```\n\n```text\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css\" />\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\" />\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css\" />\n<script src=\"https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js\"></script>\n```\n\n```text\nnpm install tw-elements\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nnpm install tw-elements\n```\n\n```text\nmodule.exports = {\n content: ['./src/**/*.{html,js}', './node_modules/tw-elements/dist/js/**/*.js'],\n plugins: [\n require('tw-elements/dist/plugin')\n ]\n}\n```\n\n```text\n<script src=\"./TW-ELEMENTS-PATH/dist/js/index.min.js\"></script>\n```\n\n```text\nimport 'tw-elements';\n```\n\n========================================\n\nComments:\n- can we see your react code? probably you made a mistake, but I can't realize what exactly happend","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":105,"estimatedTokens":562}}572{"id":"stack-76600778","source":"stackoverflow","questionId":76600778,"title":"Tailwind not applying styles to pages in Nextjs but applies to index page","tags":["reactjs","next.js","tailwind-css"],"text":"Title: Tailwind not applying styles to pages in Nextjs but applies to index page\nTags: reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nBrand new to Tailwind and Nextjs, but have made some projects in the past with create-react-app. I'm struggling to figure out why Tailwind is not applying styles to my pages, but applies styles to my index page (`page.tsx`). Directly importing Tailwind to `test.tsx` applies the styles but I would rather have Tailwind be applied to everything with just the single import in `layout.tsx`.\n\nglobals.css:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\ntailwind.config.js:\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx,mdx}',\n './components/**/*.{js,ts,jsx,tsx,mdx}',\n './app/**/*.{js,ts,jsx,tsx,mdx}',\n ],\n theme: {\n extend: {\n backgroundImage: {\n 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',\n 'gradient-conic':\n 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',\n },\n },\n },\n plugins: [],\n}\n```\n\nlayout.tsx:\n\n```\nimport type { Metadata } from 'next'\n \nimport './globals.css'\n \nexport const metadata: Metadata = {\n title: 'Create Next App',\n description: 'Generated by create next app',\n}\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n \n {children}\n \n )\n}\n```\n\nFolder Structure (Only showing relevant files and folders):\n\n```\n.\n├── app\n│ ├── globals.css\n│ └── layout.tsx\n│ └── page.tsx\n├── pages\n│ └── test.tsx\n├── tailwind.config.js\n└── package.json\n```\n\n========================================\n\nTop Answer:\nIt is not applying styles to pages route because it was only imported in app/layout and works only for routes in app directory.\n\nTo apply for routes in pages as well, you need to import **globals.css** in the routes on /pages.\n\n```\nimport \"@/styles/globals.css\";\n```\n\n========================================\n\nCode:\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx,mdx}',\n './components/**/*.{js,ts,jsx,tsx,mdx}',\n './app/**/*.{js,ts,jsx,tsx,mdx}',\n ],\n theme: {\n extend: {\n backgroundImage: {\n 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',\n 'gradient-conic':\n 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',\n },\n },\n },\n plugins: [],\n}\n```\n\n```text\nimport type { Metadata } from 'next'\n \nimport './globals.css'\n \nexport const metadata: Metadata = {\n title: 'Create Next App',\n description: 'Generated by create next app',\n}\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <html lang=\"en\">\n <body>{children}</body>\n </html>\n )\n}\n```\n\n```text\n.\n├── app\n│ ├── globals.css\n│ └── layout.tsx\n│ └── page.tsx\n├── pages\n│ └── test.tsx\n├── tailwind.config.js\n└── package.json\n```\n\n```text\npage.tsx\n```\n\n```text\ntest.tsx\n```\n\n```text\nlayout.tsx\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntest.tsx\n```\n\n```text\nimport \"@/styles/globals.css\";\n```\n\n```text\nimport React from \"react\";\nimport \"**@/styles/globals.css**\";\n\nexport default function App({ Component, pageProps }) {\n return <Component {...pageProps} />;\n}\n```\n\n========================================\n\nComments:\n- I think I may have fixed this after playing with the tailwind.config.js file. All I did was delete and re-pasted the content array and suddenly the test.tsx page was rendering the Tailwind classes. I made no changes to the file. Maybe the Tailwind config file somehow needed a refresh?\n- Sometimes, deleting and re-pasting the file can help to clear any errors or inconsistencies.\n- I see. I'm assuming that is some Nextjs logic working behind the scenes.\n- Yes, Next.js has some logic to optimize your project for production, such as code splitting, minification, etc. It also uses webpack to bundle your assets and modules. Sometimes, these processes can cause some issues with your styles or scripts, especially if you are using external libraries or frameworks like Tailwind.\n- Facing the same issue and above solutions are not working for me\n- This worked for me, just needed to update the `globals.css` import to use the correct path.\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":196,"estimatedTokens":1151}}573{"id":"stack-68992603","source":"stackoverflow","questionId":68992603,"title":"Tailwind - How to customize padding such as px-10","tags":["tailwind-css"],"text":"Title: Tailwind - How to customize padding such as px-10\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn Tailwind, I want to customize **px-10** to equal\n\n```\npadding-left: 10; \npadding-right: 10px;\n```\n\nHow do I do that?\n\nMany thanks.\n\n========================================\n\nTop Answer:\nyou can set options in thier config file~tailwind.config.ts\n\n```\ntheme: {\n extend: {\n padding: { \n '2.5': '0.625rem',\n }\n },\n},\n```\n\nit will auto generate px-2.5, like\n\n```\npadding-left: 10px;\npadding-right: 10px;\n```\n\n========================================\n\nCode:\n```text\npadding-left: 10; \npadding-right: 10px;\n```\n\n```text\n// tailwind.config.js\n module.exports = {\n theme: {\n spacing: {\n sm: '10px',\n }\n }\n }\n```\n\n```text\n<div class=\"px-sm\"> .. <div/>\n```\n\n```text\n<div className=\"pl-[10px] pr-[10px]\"> .. </div>\n```\n\n```text\ntheme: {\n extend: {\n padding: { \n '2.5': '0.625rem',\n }\n },\n},\n```\n\n```text\npadding-left: 10px;\npadding-right: 10px;\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":79,"estimatedTokens":252}}574{"id":"stack-68613313","source":"stackoverflow","questionId":68613313,"title":"How do I fix tailwindcss-cli from throwing TypeError: Object.fromEntries is not a function?","tags":["html","npm","tailwind-css","postcss"],"text":"Title: How do I fix tailwindcss-cli from throwing TypeError: Object.fromEntries is not a function?\nTags: html, npm, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI've been following Tailwind's tutorials and when. I get to the part of the tutorial where they ask me to run `npx tailwindcss-cli build css/tailwind.css -o build/tailwind.css`, I get the following error. How do I solve this?\n\n```\n(node:5568) ExperimentalWarning: The fs.promises API is experimental\n/Users/USERNAME-REDACTED/.npm/_npx/8bcfa250e55e6bf5/node_modules/tailwindcss/lib/jit/corePlugins.js:242\n ...Object.fromEntries(Object.entries(corePlugins).map(([pluginName, plugin]) => {\n ^\n\nTypeError: Object.fromEntries is not a function\n at Object. (/Users/USERNAME-REDACTED/.npm/_npx/8bcfa250e55e6bf5/node_modules/tailwindcss/lib/jit/corePlugins.js:242:13)\n at Module._compile (internal/modules/cjs/loader.js:778:30)\n at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)\n at Module.load (internal/modules/cjs/loader.js:653:32)\n at tryModuleLoad (internal/modules/cjs/loader.js:593:12)\n at Function.Module._load (internal/modules/cjs/loader.js:585:3)\n at Module.require (internal/modules/cjs/loader.js:692:17)\n at require (internal/modules/cjs/helpers.js:25:18)\n at Object. (/Users/USERNAME-REDACTED/.npm/_npx/8bcfa250e55e6bf5/node_modules/tailwindcss/lib/jit/lib/setupContextUtils.js:36:43)\n at Module._compile (internal/modules/cjs/loader.js:778:30)\n```\n\nI've tried deleting npm, updating npm, removing my package-lock and node modules and restarting, and adding -i. all to no prevail. As is made apparent from the youtube series I linked, I'm just learning tailwind, so I'm sure it's a super stupid mistake.\n\n========================================\n\nTop Answer:\nIf you don't want the overhead of nvm then you can just download a binary release of nodejs, eg:\n\nmkdir -p ~/opt/src\n\ncd ~/opt/src\n\nwget https://nodejs.org/download/release/v14.17.0/node-v14.17.0-linux-x64.tar.xz\ncd ~/opt tar xf src/node-v14.17.0-linux-x64.tar.xz --strip 1\n\nTo use it interactively first run:\n\nexport PATH=$HOME/opt/bin:$PATH\n\nSource:https://community.opalstack.com/d/636-install-node-and-npm-without-having-to-sudo\n\n========================================\n\nCode:\n```text\n(node:5568) ExperimentalWarning: The fs.promises API is experimental\n/Users/USERNAME-REDACTED/.npm/_npx/8bcfa250e55e6bf5/node_modules/tailwindcss/lib/jit/corePlugins.js:242\n ...Object.fromEntries(Object.entries(corePlugins).map(([pluginName, plugin]) => {\n ^\n\nTypeError: Object.fromEntries is not a function\n at Object.<anonymous> (/Users/USERNAME-REDACTED/.npm/_npx/8bcfa250e55e6bf5/node_modules/tailwindcss/lib/jit/corePlugins.js:242:13)\n at Module._compile (internal/modules/cjs/loader.js:778:30)\n at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)\n at Module.load (internal/modules/cjs/loader.js:653:32)\n at tryModuleLoad (internal/modules/cjs/loader.js:593:12)\n at Function.Module._load (internal/modules/cjs/loader.js:585:3)\n at Module.require (internal/modules/cjs/loader.js:692:17)\n at require (internal/modules/cjs/helpers.js:25:18)\n at Object.<anonymous> (/Users/USERNAME-REDACTED/.npm/_npx/8bcfa250e55e6bf5/node_modules/tailwindcss/lib/jit/lib/setupContextUtils.js:36:43)\n at Module._compile (internal/modules/cjs/loader.js:778:30)\n```\n\n```text\nnpx tailwindcss-cli build css/tailwind.css -o build/tailwind.css\n```\n\n```text\nsudo npm i -g n\n```\n\n```text\nn latest\n```\n\n========================================\n\nComments:\n- Can you check the NodeJS version? Run `node --version` in console. The min. requirement is v12.13: tailwindcss.com/docs/…","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":84,"estimatedTokens":919}}575{"id":"stack-70585305","source":"stackoverflow","questionId":70585305,"title":"How to use TailwindCSS3 with ngClass?","tags":["angular","tailwind-css","ng-class"],"text":"Title: How to use TailwindCSS3 with ngClass?\nTags: angular, tailwind-css, ng-class\nSource: Stack Overflow\n\nQuestion:\nI'm trying to use TailwindCSS in function inside ngClass.\n\nTailwindCSS classes were generated in function to maintain my template but it doesn't work.\n\nPlease check my code below\n\n*.component.html\n\n```\n...\n\n \n...\n```\n\n*.component.ts\n\n```\n...\n generateCol(fieldUI: any) {\n return `col-span-12 sm:col-start-${fieldUI.startCol} sm:col-end-${fieldUI.endCol}`;\n }\n...\n```\n\nIs it impossible with TailwindCSS3?\n\n========================================\n\nTop Answer:\nIt seems it is possible to get it to work with ngClass and Tailwindcss v3.0.13 and Angular 13.1.3\n\nThis is my solution below:\n\n*.component.html\n\n```\n\n {{text}}\n\n```\n\n*.component.ts\n\n```\n@Output() onClick = new EventEmitter();\n @Input() text: string|any;\n availableStyles: string[] = ['primary', 'secondary'];\n @Input() styleName!: string | \"primary\";\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n getValidateStyle(){\n if(this.availableStyles.includes(this.styleName))\n {\n return this.styleName;\n } \n return \"primary\";\n }\n\n buttonClicked(event: any) {\n this.onClick.emit(event);\n }\n```\n\n*.component.css\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components{\n\n .primary{\n\n @apply px-2 flex rounded items-center text-sm bg-sky-100;\n }\n}\n\n@layer components{\n\n .secondary{\n\n @apply px-2 flex rounded items-center text-sm bg-sky-500;\n }\n}\n```\n\nThe usage of the button looks like this:\n\nsomefile.component.html\n\n```\n\n \n```\n\nsomefile.component.ts\n\n```\nlogToConsole(event: any): void{\n console.log(\"Button clicked\", event);\n }\n```\n\n========================================\n\nCode:\n```text\n...\n<div class=\"grid grid-cols-12\">\n <div ngClass=\"generateCol(fieldUI)\">\n...\n```\n\n```text\n...\n generateCol(fieldUI: any) {\n return `col-span-12 sm:col-start-${fieldUI.startCol} sm:col-end-${fieldUI.endCol}`;\n }\n...\n```\n\n```text\n<p\n [ngClass]=\"{ \n 'visible text-red-600': fieldError(usernameContName, authForm, 'required'), \n invisible: !fieldError(pwContName, authForm, 'required') \n }\">\n Username required.\n</p>\n```\n\n```text\n<button [ngClass]=\"getValidateStyle()\" \n type=\"button\" \n (click)=\"buttonClicked($event)\">\n <span class=\"px-2\">{{text}}</span>\n</button>\n```\n\n```text\n@Output() onClick = new EventEmitter<any>();\n @Input() text: string|any;\n availableStyles: string[] = ['primary', 'secondary'];\n @Input() styleName!: string | \"primary\";\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n getValidateStyle(){\n if(this.availableStyles.includes(this.styleName))\n {\n return this.styleName;\n } \n return \"primary\";\n }\n\n buttonClicked(event: any) {\n this.onClick.emit(event);\n }\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components{\n\n .primary{\n\n @apply px-2 flex rounded items-center text-sm bg-sky-100;\n }\n}\n\n@layer components{\n\n .secondary{\n\n @apply px-2 flex rounded items-center text-sm bg-sky-500;\n }\n}\n```\n\n```text\n<app-custom-button \n styleName=\"secondary\"\n text=\"This is a second button\"\n (onClick)=\"logToConsole($event)\">\n </app-custom-button>\n```\n\n```text\nlogToConsole(event: any): void{\n console.log(\"Button clicked\", event);\n }\n```\n\n========================================\n\nComments:\n- I have one question for TailwindCSS v3. This is happening because of JIT?\n- @honeybear I don't think it is because of the JIT. I think it may have been because you could have missed square brackets [ ] around your ngClass. I am also not sure how you may have constructed your CSS file, so I provided as much as I could for you.","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":215,"estimatedTokens":911}}576{"id":"stack-56365824","source":"stackoverflow","questionId":56365824,"title":"Slim templates and TailwindCSS use ' : ' in class declaration","tags":["slim-lang","tailwind-css"],"text":"Title: Slim templates and TailwindCSS use ' : ' in class declaration\nTags: slim-lang, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nTailwindCSS is looking like a great frontend tool but I'm wondering how to use it with the Rails Slim template language?\n\nFor example:\n\n```\n\n```\n\nIf I run it through HTML2SLIM I get this recommendation:\n\n```\n.bg-red-500.sm:bg-green-500.md:bg-blue-500.lg:bg-pink-500.xl:bg-teal-500\n```\n\nWhich produces the following HTML:\n\n```\n\n \n \n \n \n \n \n \n\n```\n\nIt seems that the colon ':' is interperted as multiple html elemments. Im wondering if there's a way around this? I'd love to use Slim with TailwindCSS.\n\nSo far I've made some progress using Rails' content_tag:\n\n```\n= content_tag :span, 'Accounts', class: 'invisible md:visible lg:visible'\n```\n\nBut I can only go so far with this.\n\n========================================\n\nTop Answer:\nIt's just not possible to have these colons in the class shorthand notation. You can do the following though\n\n```\ndiv class=\"bg-red-500.sm::bg-green-500.md:bg-blue-500.lg:bg-pink-500.xl:bg-teal-500\"\n```\n\nwhich results in the desired HTML:\n\n```\n\n```\n\n========================================\n\nCode:\n```text\n<div class=\"bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500\"></div>\n```\n\n```text\n.bg-red-500.sm:bg-green-500.md:bg-blue-500.lg:bg-pink-500.xl:bg-teal-500\n```\n\n```text\n<div class=\"bg-red-500 sm\">\n <bg-green-500 class=\"md\">\n <bg-blue-500 class=\"lg\">\n <bg-pink-500 class=\"xl\">\n <bg-teal-500></bg-teal-500>\n </bg-pink-500>\n </bg-blue-500>\n </bg-green-500>\n</div>\n```\n\n```text\n= content_tag :span, 'Accounts', class: 'invisible md:visible lg:visible'\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n separator: \"_\",\n}\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n …\n theme: {\n extend: {\n width: {\n \"1-of-2\": \"50%\"\n }\n }\n }\n}\n```\n\n```text\n.sm_bg-green-500\n```\n\n```text\n.w-1/2\n```\n\n```text\n.w-1-of-2\n```\n\n```text\ndiv class=\"bg-red-500.sm::bg-green-500.md:bg-blue-500.lg:bg-pink-500.xl:bg-teal-500\"\n```\n\n```text\n<div class=\"bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500\"></div>\n```\n\n```css\n/*app/assets/stylesheets/application.tailwind.css*/\n.magic-btn {\n @apply bg-red-500 sm:bg-green-500;\n}\n```\n\n```text\nbtn.magic-btn\n```\n\n```text\nmodule.exports = { separator: \"_\" }\n```\n\n```text\n.sm_bg-green-500\n```\n\n```text\n.sm:bg-green-500\n```\n\n```text\nmy-block__my-element\n```\n\n```text\n..text-sm.px-4.py-2.5..\n```\n\n```text\nbutton.text-sm.px-4.text-center.inline-flex[class=\"py-2.5\"]\n```\n\n========================================\n\nComments:\n- (slim now supports \":\" in class names)\n- It sucks to have to add div with the class attribute, but This is the best solution.\n- Note that Slim 4.1.0 improved Tailwind support without having to do some of these things: github.com/slim-template/slim/pull/841","metadata":{"transformedAt":"2026-08-18T18:33:42.929Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":167,"estimatedTokens":722}}577{"id":"stack-71122727","source":"stackoverflow","questionId":71122727,"title":"Why some classes in tailwind is not present in laravel install?","tags":["laravel","tailwind-css"],"text":"Title: Why some classes in tailwind is not present in laravel install?\nTags: laravel, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI wonder why tailwind admin templates won't work, then later I figured out that some classes are not present in my app.css.\n\nI have followed the installation in https://tailwindcss.com/docs/guides/laravel.\n\nThese are the classes in my app.css.\n\nWhy some classes are not present in app.css?\nex: bg-gray-800, w-full, h-20 etc..\n\n\r\n\r\n\n```\n/*\n! tailwindcss v3.0.22 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n display: none;\n}\n\n*, ::before, ::after {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n.fixed {\n position: fixed;\n}\n.relative {\n position: relative;\n}\n.top-0 {\n top: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.ml-1 {\n margin-left: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mr-2 {\n margin-right: 0.5rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.ml-4 {\n margin-left: 1rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.ml-12 {\n margin-left: 3rem;\n}\n.-mt-px {\n margin-top: -1px;\n}\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n.hidden {\n display: none;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-16 {\n height: 4rem;\n}\n.min-h-screen {\n min-height: 100vh;\n}\n.w-5 {\n width: 1.25rem;\n}\n.w-8 {\n width: 2rem;\n}\n.w-auto {\n width: auto;\n}\n.max-w-6xl {\n max-width: 72rem;\n}\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-gray-200 {\n --tw-border-opacity: 1;\n border-color: rgb(229 231 235 / var(--tw-border-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n.p-6 {\n padding: 1.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-center {\n text-align: center;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.font-semibold {\n font-weight: 600;\n}\n.leading-7 {\n line-height: 1.75rem;\n}\n.text-gray-200 {\n --tw-text-opacity: 1;\n color: rgb(229 231 235 / var(--tw-text-opacity));\n}\n.text-gray-300 {\n --tw-text-opacity: 1;\n color: rgb(209 213 219 / var(--tw-text-opacity));\n}\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n.underline {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n}\n.antialiased {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n@media (prefers-color-scheme: dark) {\n\n .dark\\:border-gray-700 {\n --tw-border-opacity: 1;\n border-color: rgb(55 65 81 / var(--tw-border-opacity));\n }\n\n .dark\\:bg-gray-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(17 24 39 / var(--tw-bg-opacity));\n }\n\n .dark\\:bg-gray-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / var(--tw-bg-opacity));\n }\n\n .dark\\:text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n }\n\n .dark\\:text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n }\n\n .dark\\:text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n }\n}\n@media (min-width: 640px) {\n\n .sm\\:ml-0 {\n margin-left: 0px;\n }\n\n .sm\\:block {\n display: block;\n }\n\n .sm\\:h-20 {\n height: 5rem;\n }\n\n .sm\\:items-center {\n align-items: center;\n }\n\n .sm\\:justify-start {\n justify-content: flex-start;\n }\n\n .sm\\:justify-between {\n justify-content: space-between;\n }\n\n .sm\\:rounded-lg {\n border-radius: 0.5rem;\n }\n\n .sm\\:px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n\n .sm\\:pt-0 {\n padding-top: 0px;\n }\n\n .sm\\:text-left {\n text-align: left;\n }\n\n .sm\\:text-right {\n text-align: right;\n }\n}\n@media (min-width: 768px) {\n\n .md\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .md\\:border-t-0 {\n border-top-width: 0px;\n }\n\n .md\\:border-l {\n border-left-width: 1px;\n }\n}\n@media (min-width: 1024px) {\n\n .lg\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n```\n\n========================================\n\nTop Answer:\nyou can add the paths to the admin files in the setup here\n\n```\ncontent: [\n \"./resources/**/*.blade.php\",\n \"./resources/**/*.js\",\n \"./resources/**/*.vue\",\n ],\n```\n\ni presume it will be\n\n```\n\"./resources/admin/**/*.blade.php\",\n```\n\n========================================\n\nCode:\n```css\n/*\n! tailwindcss v3.0.22 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n display: none;\n}\n\n*, ::before, ::after {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n.fixed {\n position: fixed;\n}\n.relative {\n position: relative;\n}\n.top-0 {\n top: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.ml-1 {\n margin-left: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mr-2 {\n margin-right: 0.5rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.ml-4 {\n margin-left: 1rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.ml-12 {\n margin-left: 3rem;\n}\n.-mt-px {\n margin-top: -1px;\n}\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n.hidden {\n display: none;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-16 {\n height: 4rem;\n}\n.min-h-screen {\n min-height: 100vh;\n}\n.w-5 {\n width: 1.25rem;\n}\n.w-8 {\n width: 2rem;\n}\n.w-auto {\n width: auto;\n}\n.max-w-6xl {\n max-width: 72rem;\n}\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-gray-200 {\n --tw-border-opacity: 1;\n border-color: rgb(229 231 235 / var(--tw-border-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n.p-6 {\n padding: 1.5rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-center {\n text-align: center;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.font-semibold {\n font-weight: 600;\n}\n.leading-7 {\n line-height: 1.75rem;\n}\n.text-gray-200 {\n --tw-text-opacity: 1;\n color: rgb(229 231 235 / var(--tw-text-opacity));\n}\n.text-gray-300 {\n --tw-text-opacity: 1;\n color: rgb(209 213 219 / var(--tw-text-opacity));\n}\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n.underline {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n}\n.antialiased {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n@media (prefers-color-scheme: dark) {\n\n .dark\\:border-gray-700 {\n --tw-border-opacity: 1;\n border-color: rgb(55 65 81 / var(--tw-border-opacity));\n }\n\n .dark\\:bg-gray-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(17 24 39 / var(--tw-bg-opacity));\n }\n\n .dark\\:bg-gray-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / var(--tw-bg-opacity));\n }\n\n .dark\\:text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n }\n\n .dark\\:text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n }\n\n .dark\\:text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n }\n}\n@media (min-width: 640px) {\n\n .sm\\:ml-0 {\n margin-left: 0px;\n }\n\n .sm\\:block {\n display: block;\n }\n\n .sm\\:h-20 {\n height: 5rem;\n }\n\n .sm\\:items-center {\n align-items: center;\n }\n\n .sm\\:justify-start {\n justify-content: flex-start;\n }\n\n .sm\\:justify-between {\n justify-content: space-between;\n }\n\n .sm\\:rounded-lg {\n border-radius: 0.5rem;\n }\n\n .sm\\:px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n\n .sm\\:pt-0 {\n padding-top: 0px;\n }\n\n .sm\\:text-left {\n text-align: left;\n }\n\n .sm\\:text-right {\n text-align: right;\n }\n}\n@media (min-width: 768px) {\n\n .md\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .md\\:border-t-0 {\n border-top-width: 0px;\n }\n\n .md\\:border-l {\n border-left-width: 1px;\n }\n}\n@media (min-width: 1024px) {\n\n .lg\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n```\n\n```text\nnpm run watch\n```\n\n```text\nmix.disableNotifications();\n```\n\n```text\ncontent: [\n \"./resources/**/*.blade.php\",\n \"./resources/**/*.js\",\n \"./resources/**/*.vue\",\n ],\n```\n\n```text\n\"./resources/admin/**/*.blade.php\",\n```\n\n========================================\n\nComments:\n- Still the same.\n- I have the exact same issue and I made 100% sure of doing what the instructions on the Tailwind website says. When you run 'npm run dev' the app.css file is supposed to be populated with Tailwind rules yet not all are there, which makes no sense. How does it decide what not to load and what to load.\n- @calvincani add this to your webpack.mix.js mix.disableNotifications(); thanks to jakub\n- thank you, solved just my problem! by the way where did you found this answer?\n- @Pusoy I found the answer in your link to tailwind/laravel doc. ;)","metadata":{"transformedAt":"2026-08-18T18:33:42.930Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":1475,"estimatedTokens":6655}}578{"id":"stack-74906906","source":"stackoverflow","questionId":74906906,"title":"Radix UI \"Select\" primitive overflows screen","tags":["html","css","reactjs","user-interface","tailwind-css"],"text":"Title: Radix UI \"Select\" primitive overflows screen\nTags: html, css, reactjs, user-interface, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using the \"Select\" component from Radix-UI Radix Ui Select and the modal that pops up is overflowing the top of the screen, please see the attached image. overflowing modal. But when i have a few options, it works fine, please see attached imae => fine modal\n\nThe select button:\n\n```\nconst SelectButton = (props: Props) => {\n\n function handleOnValueChange(newValue:string){\n props.onChange(newValue)\n }\n\n return (\n \n\n \n {props.children}\n \n\n \n \n \n \n \n \n {props.options.map(\n (f, i) => (\n \n {f}\n \n \n \n \n )\n )}\n \n \n \n \n \n \n\n \n );\n};\n\nexport default SelectButton;\n```\n\n========================================\n\nCode:\n```text\nconst SelectButton = (props: Props) => {\n\n\n function handleOnValueChange(newValue:string){\n props.onChange(newValue)\n }\n\n\n return (\n <SelectPrimitive.Root defaultValue=\"blueberry\" onValueChange={handleOnValueChange}>\n\n <SelectPrimitive.Trigger asChild aria-label=\"Food\">\n {props.children}\n </SelectPrimitive.Trigger>\n\n <SelectPrimitive.Content className=\"rounded-lg mt-4 top-5\">\n <SelectPrimitive.ScrollUpButton className=\"flex items-center justify-center text-gray-700 dark:text-gray-300\">\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpButton>\n <SelectPrimitive.Viewport className=\"bg-white dark:bg-black p-2 rounded-lg shadow-lg top-5\">\n <SelectPrimitive.Group>\n {props.options.map(\n (f, i) => (\n <SelectPrimitive.Item\n //disabled={f === \"Grapes\"}\n key={`${f}-${i}`}\n value={props.toLower == undefined ? f.toLowerCase() : f}\n className={cx(\n \"relative flex items-center px-8 py-2 rounded-md text-sm text-gray-700 dark:text-gray-300 font-medium focus:bg-gray-100 dark:focus:bg-gray-900\",\n \"radix-disabled:opacity-50\",\n \"focus:outline-none select-none\"\n )}\n >\n <SelectPrimitive.ItemText>{f}</SelectPrimitive.ItemText>\n <SelectPrimitive.ItemIndicator className=\"absolute left-2 inline-flex items-center\">\n <CheckIcon />\n </SelectPrimitive.ItemIndicator>\n </SelectPrimitive.Item>\n )\n )}\n </SelectPrimitive.Group>\n </SelectPrimitive.Viewport>\n <SelectPrimitive.ScrollDownButton className=\"flex items-center justify-center text-gray-700 dark:text-gray-300\">\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownButton>\n </SelectPrimitive.Content>\n\n </SelectPrimitive.Root>\n );\n};\n\nexport default SelectButton;\n```\n\n```text\nmax-height: var(--radix-select-content-available-height);\n```\n\n```text\n<SelectPrimitive.Content position=\"popper\" />\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.930Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":118,"estimatedTokens":732}}579{"id":"stack-73523166","source":"stackoverflow","questionId":73523166,"title":"Is there a way to transition a border in with Tailwind?","tags":["css","reactjs","css-transitions","tailwind-css"],"text":"Title: Is there a way to transition a border in with Tailwind?\nTags: css, reactjs, css-transitions, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to make it so that a border transitions on to the page smoothly once I reach a y point but I am having trouble with the transition animation. I'm using react and tailwind.\n\nThis is the code I have so far.\n\n```\nconst Navbar = () => {\n const [navStyles, setNavStyles] = useState(false);\n\n useEffect(() => {\n const handleNavStyles = () => {\n if (window.scrollY > 80) {\n setNavStyles(true);\n } else {\n setNavStyles(false);\n }\n };\n window.addEventListener('scroll', handleNavStyles);\n }, []);\n\n \n return (\n \n \n Navbar\n \n \n );\n};\n```\n\n========================================\n\nTop Answer:\nUse the class `transition-[border]`\n\n========================================\n\nCode:\n```text\nconst Navbar = () => {\n const [navStyles, setNavStyles] = useState(false);\n\n useEffect(() => {\n const handleNavStyles = () => {\n if (window.scrollY > 80) {\n setNavStyles(true);\n } else {\n setNavStyles(false);\n }\n };\n window.addEventListener('scroll', handleNavStyles);\n }, []);\n\n \n return (\n <header className=\"sticky top-0 z-10 backdrop-blur-md \">\n <nav\n className={`mx-auto flex max-w-screen-sm items-center space-x-3 py-3 px-4 sm:py-5 sm:px-0 ${\n navStyles ? 'border-b transition duration-300 ease-in' : ''\n }`}\n >\n <div>Navbar</div>\n </nav>\n </header>\n );\n};\n```\n\n```text\ntransition-[border]\n```\n\n========================================\n\nComments:\n- AFAIK `transition: all` is terrible for performance. It's weird that tailwind doesn't have the option to transition specific transitional properties :/\n- How exactly? I don't use Tailwind, but a comment to the accepted answer states \"*tailwind doesn't have the option to transition specific transitional properties*\".","metadata":{"transformedAt":"2026-08-18T18:33:42.930Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":2,"totalLines":82,"estimatedTokens":475}}580{"id":"stack-66428211","source":"stackoverflow","questionId":66428211,"title":"How to create an equal width columns grid with gap in Tailwind?","tags":["css","css-grid","tailwind-css"],"text":"Title: How to create an equal width columns grid with gap in Tailwind?\nTags: css, css-grid, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nFirst time i'm using css grid and i have problems with getting an equal content of my 3 columns when adding gap between them.\nI'm not sure it's a tailwind problem (with the predefined classes) or with the grip or where the solution can come from (what i'm missing).\n\nHere is an illustrative example:\n\nhttps://codepen.io/erkage/pen/VwmxeRG\n\n\r\n\r\n\n```\n\n \n Label 1\n \n \n \n Label 2\n \n \n \n Label 3\n \n \n\n```\n\n\r\n\r\n\r\n\nThe HTML:\n\n```\n\n this is larger than 2-3\n this is equal with 3rd\n this is equal with 2nd\n\n```\n\nThe used css are (which comes from tailwind):\n\n```\n.parent {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n```\n\n```\n.child2 {\n margin-right: calc(0.75rem * 0);\n margin-left: calc(0.75rem * calc(1 - 0));\n}\n```\n\nAnd i know that the main problem comes from that child 2 and 3 has a margin and 1 not but looking for a builtin solution (with css grid) if it exist.\nAlso child 1 can't have margin-left because of design circumstences.\n\n========================================\n\nCode:\n```html\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css\">\n<div class=\"grid grid-cols-3 space-x-3 items-stretch mt-10 m-auto border border-gray-900\" style=\"width:800px\">\n <div class=\"bg-blue-200 py-2\">\n <label class=\"block\">Label 1</label>\n <input type=\"text\" class=\"rounded-lg border border-gray-400 py-2 w-full\" placeholder=\"266px\">\n </div>\n <div class=\"bg-blue-200 py-2\">\n <label class=\"block\">Label 2</label>\n <input type=\"text\" class=\"rounded-lg border border-gray-400 py-2 w-full\" placeholder=\"254px\">\n </div>\n <div class=\"bg-blue-200 py-2\">\n <label class=\"block\">Label 3</label>\n <input type=\"text\" class=\"rounded-lg border border-gray-400 py-2 w-full\" placeholder=\"254px\">\n </div>\n</div>\n```\n\n```html\n<div class=\"parent\">\n <div class=\"child\">this is larger than 2-3</div>\n <div class=\"child2\">this is equal with 3rd</div>\n <div class=\"child2\">this is equal with 2nd</div>\n</div>\n```\n\n```css\n.parent {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n```\n\n```css\n.child2 {\n margin-right: calc(0.75rem * 0);\n margin-left: calc(0.75rem * calc(1 - 0));\n}\n```\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css\">\n\n<div class=\"grid grid-cols-3 gap-x-3 items-stretch mt-10 m-auto border border-gray-900\" style=\"width:800px\">\n <div class=\"bg-blue-200 py-2\">\n <label class=\"block\">Label 1</label>\n <input type=\"text\" class=\"rounded-lg border border-gray-400 py-2 w-full\" placeholder=\"266px\">\n </div>\n <div class=\"bg-blue-200 py-2\">\n <label class=\"block\">Label 2</label>\n <input type=\"text\" class=\"rounded-lg border border-gray-400 py-2 w-full\" placeholder=\"254px\">\n </div>\n <div class=\"bg-blue-200 py-2\">\n <label class=\"block\">Label 3</label>\n <input type=\"text\" class=\"rounded-lg border border-gray-400 py-2 w-full\" placeholder=\"254px\">\n </div>\n</div>\n```\n\n```text\nspace-x-3\n```\n\n```text\ngap-x-3\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.930Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":134,"estimatedTokens":783}}581{"id":"stack-73898178","source":"stackoverflow","questionId":73898178,"title":"Aliases for tailwind classes?","tags":["css","tailwind-css"],"text":"Title: Aliases for tailwind classes?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to change the name of the tailwind `hidden` class so that whenever I want to use `display:none`, I can do so by using the word `no-display` instead of using the word `hidden`. I am assuming this is a change I can make in the tailwind config file but I can't seem to figure out exactly how and what changes need to be made in that file. Thanks for the help\n\n========================================\n\nCode:\n```text\nhidden\n```\n\n```text\ndisplay:none\n```\n\n```text\nno-display\n```\n\n```text\nhidden\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer utilities {\n .no-display {\n @apply hidden\n }\n}\n```\n\n```html\n<div class=\"no-display\">You can't see this text</div>\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer utilities {\n .no-display {\n display: none;\n }\n}\n```\n\n```html\n<div class=\"no-display\">You can't see this text</div>\n```\n\n```text\nCSS\n```\n\n```text\n@apply\n```\n\n```text\nmain.css\n```\n\n```text\nCSS\n```\n\n```text\nmain.css\n```\n\n========================================\n\nComments:\n- Depending on how you're using it, I'd just go find the `.hidden {...` class and change it to `.hidden, .no-display {...`\n- `hidden` is the tailwind utility class for `display:none`, I want to change that name but am unsure of where to go to change that","metadata":{"transformedAt":"2026-08-18T18:33:42.930Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":83,"estimatedTokens":350}}582{"id":"stack-67322070","source":"stackoverflow","questionId":67322070,"title":"Can I achieve an underlined button on hover with Tailwind CSS?","tags":["html","css","tailwind-css"],"text":"Title: Can I achieve an underlined button on hover with Tailwind CSS?\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm beginning to learn Tailwind CSS and am trying to implement the button below. It's a blank button that highlights its bottom border on hover.\n\nhttps://i.sstatic.net/7QyVj.png\n\nHowever, scanning through the docs, I can't seem to be able to recreate the effects.\n\n========================================\n\nTop Answer:\n```\n\n \n Button\n \n\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n variants: {\n extend: {\n // ...\n borderStyle: ['hover'],\n }\n }\n}\n```\n\n```text\n<button class=\"p-4 font-bold font-sans border-b-2 border-double \n border-transparent hover:border-current cursor-pointer select-none\">\n Button\n</button>\n```\n\n```text\nnpm run prod\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"flex items-center justify-center min-h-screen\">\n <button class=\"text-6xl font-bold transition duration-150 border-b-8 border-transparent hover:border-purple-500\">\n Button\n </button>\n</div>\n```\n\n========================================\n\nComments:\n- Set a bottom border, make it transparent, and switch to a given color on hover. Use a transition to smooth out the effect. Entirely possible in Tailwind.\n- Which *specific* bit of that is causing you problems? It would help if you provided a live demo of what you have so far.\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.930Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":63,"estimatedTokens":426}}583{"id":"stack-66785996","source":"stackoverflow","questionId":66785996,"title":"Can't override Linear Gradient in Tailwind?","tags":["html","css","reactjs","tailwind-css"],"text":"Title: Can't override Linear Gradient in Tailwind?\nTags: html, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nJust jumped into Tailwind, all was great until this happened - I set my button to have a linear background gradient but also set a :hover to change its background, like this:\n\n```\nclassName=\"w-1/4 h-2/3 bg-gradient-to-b from-indigo-50 to-indigo-200 self-center\n rounded-lg text-indigo-800 text-4xl font-bold focus:outline-none hover:bg-white\">\n```\n\nIssue is it seems the hover can't override the gradient, I searched and variants seemed to have been the solution but I add the variants like this and it still doesn't work:\n\n```\nvariants: {\n extend: { \n backgroundImage: ['hover', 'focus'],\n },\n },\n```\n\nDo I need to do something else after I declare the variants?\n\n========================================\n\nTop Answer:\nUse\n\n```\nhover:bg-none\n```\n\nIt's because bg-gradient adds background image property which is different than background color.\n\n========================================\n\nCode:\n```text\nclassName=\"w-1/4 h-2/3 bg-gradient-to-b from-indigo-50 to-indigo-200 self-center\n rounded-lg text-indigo-800 text-4xl font-bold focus:outline-none hover:bg-white\">\n```\n\n```text\nvariants: {\n extend: { \n backgroundImage: ['hover', 'focus'],\n },\n },\n```\n\n```text\n<button class=\"w-1/4 h-2/3 bg-gradient-to-b from-indigo-50 to-indigo-200 self-center rounded-lg text-indigo-800 text-4xl font-bold focus:outline-none hover:from-white hover:to-white\">\n Button\n</button>\n```\n\n```text\nbg-gradient\n```\n\n```text\nhover:from-white hover:to-white\n```\n\n```text\nhover:bg-none\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.930Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":68,"estimatedTokens":404}}584{"id":"stack-68897988","source":"stackoverflow","questionId":68897988,"title":"How can Tailwind/typography work well with markdown-it in a React project?","tags":["reactjs","markdown","tailwind-css","typography","markdown-it"],"text":"Title: How can Tailwind/typography work well with markdown-it in a React project?\nTags: reactjs, markdown, tailwind-css, typography, markdown-it\nSource: Stack Overflow\n\nQuestion:\nI'm attempted to develop a new feature for my blog, that is a Markdown editor for writing articles.\n\nI chosed `@tailwindcss/typography` and markdown-it to do that, so this is my whole dependencies:\n\n### package.json\n\n```\n{\n \"dependencies\": {\n \"firebase\": \"^9.0.0-beta.7\",\n \"markdown-it\": \"^12.2.0\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-router-dom\": \"^5.2.0\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.15.0\",\n \"@babel/preset-env\": \"^7.15.0\",\n \"@babel/preset-react\": \"^7.14.5\",\n \"@tailwindcss/typography\": \"^0.4.1\",\n \"autoprefixer\": \"^10.3.2\",\n \"babel-loader\": \"^8.2.2\",\n \"css-loader\": \"^6.2.0\",\n \"dotenv-webpack\": \"^7.0.3\",\n \"html-webpack-plugin\": \"^5.3.2\",\n \"postcss\": \"^8.3.6\",\n \"postcss-cli\": \"^8.3.1\",\n \"postcss-loader\": \"^6.1.1\",\n \"style-loader\": \"^3.2.1\",\n \"tailwindcss\": \"^2.2.7\",\n \"webpack\": \"^5.51.1\",\n \"webpack-cli\": \"^4.8.0\",\n \"webpack-dev-server\": \"^4.0.0\"\n }\n}\n```\n\nBelow code is the component for this feature, including a editing area and a preview area. However, it didn't work.\n\nWhen I run this code, it is rendered out like this, without typographing the `` tag.\n\nHowever, if I repalce `md.render(markdown)` with `\n\n### hello\n\n`(the markdown-it's rendering result), it seems \"work\", looking like this.\n\n### Editor.jsx\n\n```\nimport React, { useState } from \"react\";\nconst md = require(\"markdown-it\")('commonmark');\n\nconst Editor = () => {\n const [markdown, setMarkdown] = useState(\"# hello\");\n const onTextChange = (e) => {\n setMarkdown(e.target.value);\n }\n\n return (\n \n \n onTextChange(e)}>\n {markdown}\n \n \n\n \n {md.render(markdown)} {/* \n\n### hello\n\n */}\n \n\n \n )\n}\n\nexport default Editor;\n```\n\nWhy these things happened? and how can I make it run with expections?\n\n========================================\n\nCode:\n```text\n{\n \"dependencies\": {\n \"firebase\": \"^9.0.0-beta.7\",\n \"markdown-it\": \"^12.2.0\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-router-dom\": \"^5.2.0\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.15.0\",\n \"@babel/preset-env\": \"^7.15.0\",\n \"@babel/preset-react\": \"^7.14.5\",\n \"@tailwindcss/typography\": \"^0.4.1\",\n \"autoprefixer\": \"^10.3.2\",\n \"babel-loader\": \"^8.2.2\",\n \"css-loader\": \"^6.2.0\",\n \"dotenv-webpack\": \"^7.0.3\",\n \"html-webpack-plugin\": \"^5.3.2\",\n \"postcss\": \"^8.3.6\",\n \"postcss-cli\": \"^8.3.1\",\n \"postcss-loader\": \"^6.1.1\",\n \"style-loader\": \"^3.2.1\",\n \"tailwindcss\": \"^2.2.7\",\n \"webpack\": \"^5.51.1\",\n \"webpack-cli\": \"^4.8.0\",\n \"webpack-dev-server\": \"^4.0.0\"\n }\n}\n```\n\n```js\nimport React, { useState } from \"react\";\nconst md = require(\"markdown-it\")('commonmark');\n\n\nconst Editor = () => {\n const [markdown, setMarkdown] = useState(\"# hello\");\n const onTextChange = (e) => {\n setMarkdown(e.target.value);\n }\n\n return (\n <div>\n <form>\n <textarea onChange={(e) => onTextChange(e)}>\n {markdown}\n </textarea>\n </form>\n\n <div id=\"preview\" className=\"prose\">\n {md.render(markdown)} {/* <h1>hello</h1> */}\n </div>\n\n </div>\n )\n}\n\nexport default Editor;\n```\n\n```text\n@tailwindcss/typography\n```\n\n```text\n<h1>\n```\n\n```text\nmd.render(markdown)\n```\n\n```text\n<h1>hello</h1>\n```\n\n```js\nimport ReactMarkdown from \"react-markdown\";\n\n<div className=\"prose\">\n <ReactMarkdown>{markdown}</ReactMarkdown>\n</div>\n```\n\n```text\nmarkdown-it\n```\n\n```text\nTailwind/typography\n```\n\n========================================\n\nComments:\n- Please add further details to expand on your answer, such as working code or documentation citations.","metadata":{"transformedAt":"2026-08-18T18:33:42.930Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":189,"estimatedTokens":922}}585{"id":"stack-69039637","source":"stackoverflow","questionId":69039637,"title":"how can i customize container width in tailwind-css?","tags":["css","tailwind-css"],"text":"Title: how can i customize container width in tailwind-css?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\ntailwind CSS container width in 2xl is not desired for me .\nhow can I change it ?\nhttps://i.sstatic.net/5J9qK.png\n\nI want to remove its default width in 2xl .\nHow can I do it?\n\n========================================\n\nTop Answer:\nOr if you need some custom solution not directly connected with your \"screens\" configuration (as suggested by JHeth) you can configure container behavior separately like this:\n\n```\nmodule.exports= {\n theme: {\n container: {\n screens: {\n 'sm': '100%',\n 'md': '100%',\n 'lg': '1024px',\n 'xl': '1280px',\n '2xl': '1600px',\n }\n }\n }\n}\n```\n\n========================================\n\nCode:\n```text\nmodule.exports= {\n theme: {\n screens: {\n 'sm': '640px', // => @media (min-width: 640px) { ... }\n 'md': '768px', // => @media (min-width: 768px) { ... }\n 'lg': '1024px', // => @media (min-width: 1024px) { ... }\n 'xl': '1280px', // => @media (min-width: 1280px) { ... }\n }\n }\n}\n```\n\n```text\nmodule.exports= {\n theme: {\n container: {\n screens: {\n 'sm': '100%',\n 'md': '100%',\n 'lg': '1024px',\n 'xl': '1280px',\n '2xl': '1600px',\n }\n }\n }\n}\n```\n\n========================================\n\nComments:\n- There's a Github issue for this that might help you github.com/tailwindlabs/tailwindcss/issues/1102","metadata":{"transformedAt":"2026-08-18T18:33:42.930Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":2,"totalLines":69,"estimatedTokens":379}}586{"id":"stack-68170735","source":"stackoverflow","questionId":68170735,"title":"How to show a child or another depending on parent hover state (CSS Only)","tags":["css","reactjs","tailwind-css"],"text":"Title: How to show a child or another depending on parent hover state (CSS Only)\nTags: css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm building a Menu component in react that shows a list of options. Each option has a text on the left and the '>' icon on the right. But, when I hover on the parent I want the '>' symbol to change to '>>'. How can I do this? I have added the current state of the source. I just need to hide BsChevronRight on parent hover and show BsChevronDoubleRight and viceversa.\n\n```\nfunction Menu({data}:{data:IMenuItemData[]}) {\n return (\n \n {data.map(el => {\n return \n {el.text}\n \n \n \n \n })}\n \n \n )\n}\n```\n\nI'm looking for a CSS only solution.\n\n========================================\n\nTop Answer:\nThere's a quick way to do this in Tailwind:\n\n1.) Add a \"group\" class to the parent e.g.\n\n```\n\n```\n\n2.) Add the hover effect on the child, prefixing with group e.g.\n\n```\n\n```\n\nMore info in the tailwind docs: https://tailwindcss.com/docs/hover-focus-and-other-states\n\n========================================\n\nCode:\n```text\nfunction Menu({data}:{data:IMenuItemData[]}) {\n return (\n <div className=\"w-2/12 flex flex-col absolute top-2/4\">\n {data.map(el => {\n return <a href=\"#\" className=\"flex row justify-between items-center group\">\n {el.text}\n <BsChevronRight></BsChevronRight>\n <BsChevronDoubleRight></BsChevronDoubleRight>\n </a>\n \n })}\n </div> \n \n )\n}\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n variants: {\n extend: {\n display: ['group-hover'],\n visibility: ['group-hover'],\n }\n }\n}\n```\n\n```text\nhidden group-hover:block\n```\n\n```text\ninvisible group-hover:visible\n```\n\n```text\nopacity-0 group-hover:opacity-100\n```\n\n```text\na\n```\n\n```text\ngroup\n```\n\n```text\njit\n```\n\n```text\ngroup-hover\n```\n\n```text\nfunction Menu({data}:{data:IMenuItemData[]}) {\n const [isHovered , setIsHovered] = useState(false);\n const handleMouseEnter = ()=>{\n setIsHovered(true)\n }\n const handleMouseLeave = ()=>{\n setIsHovered(false)\n }\n return (\n <div className=\"w-2/12 flex flex-col absolute top-2/4\">\n {data.map(el => {\n return <a onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} href=\"#\" className=\"flex row justify-between items-center group\">\n {el.text}\n {!isHovered ? <BsChevronRight/> : \n <BsChevronDoubleRight/>}\n </a>\n \n })}\n </div> \n \n )\n}\n```\n\n```text\nisHovered\n```\n\n```text\nonMouseEnter\n```\n\n```text\nonMouseLeave\n```\n\n```text\n<html>\n <body>\n <div class=\"parent\">\n Hello\n <div class=\"child1\"></div>\n <div class=\"child2\"></div>\n </div>\n </body>\n</html>\n```\n\n```text\n.parent {\n width:300px;\n height:300px;\n background-color:yellow;\n display:flex;\n}\n\n.parent:hover > .child1 {\n display:block;\n}\n\n.parent:hover > .child2 {\n display:none;\n}\n\n.child1 {\n display:none;\n width: 100px;\n height:100px;\n background-color: green;\n}\n\n.child2 {\n display:block;\n width: 100px;\n height:100px;\n background\n}\n```\n\n```text\n<div class=\"group i-am-parent\">\n```\n\n```text\n<div class=\"i-am-child group-hover:scale-110\">\n```\n\n========================================\n\nComments:\n- Yes, this would work. But I was looking for a css only (if possible) option. Don't feel like keeping a state for every item. Anyway thanks fro the try! I just added it to the title to be more clear.\n- Yes, I knew that. Just posted the css code because it was easily translatable to tailwind and in the end is same thing you did. Anyway I will accept your answer because my question had the tailwind tag.","metadata":{"transformedAt":"2026-08-18T18:33:42.930Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":200,"estimatedTokens":968}}587{"id":"stack-68100057","source":"stackoverflow","questionId":68100057,"title":"Determine if ellipsis is showing for text truncated with -webkit-line-clamp","tags":["javascript","css","reactjs","typescript","tailwind-css"],"text":"Title: Determine if ellipsis is showing for text truncated with -webkit-line-clamp\nTags: javascript, css, reactjs, typescript, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a paragraph tag I am wanting to check if the ellipsis is showing, but I am using the `-webkit-line-clamp` css property.\n\nI have the following component and hook, however using width values doesn't work. The values for `scrollWidth`, `clientWidth` and `offsetWidth` are always the same value.\n\n```\nconst Description = ({ data }: Props) => {\n const [open, setOpen] = useState(false);\n const ref = useRef(null);\n const isTruncated = useIsTruncated(ref);\n\n return (\n <>\n \n \n {data.description}\n \n\n {isTruncated && (\n setOpen(true)}\n >\n more\n \n )}\n \n \n \n );\n};\n\nconst useIsTruncated = (element: RefObject) => {\n const determineIsTruncated = () => {\n if (!element.current) return false;\n return element.current.scrollWidth > element.current.clientWidth;\n };\n const [isTruncated, setIsTruncated] = useState(determineIsTruncated());\n\n useEffect(() => {\n const resizeListener = () => setIsTruncated(determineIsTruncated());\n window.addEventListener(\"resize\", resizeListener);\n return () => {\n window.removeEventListener(\"resize\", resizeListener);\n };\n }, []);\n return isTruncated;\n};\n```\n\nIs this possible using `-webkit-line-clamp`?\n\nI am using tailwindcss, the css for `line-clamp-3` is:\n\n```\noverflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: 3;\n```\n\n========================================\n\nTop Answer:\nThe accepted answer is not correct, or well the original code in the question is not correct, as it always returns false.\nThis code works:\n\n```\nconst useIsTruncated = element => {\n const determineIsTruncated = () => {\n if (!element.current) return false;\n return element.current.scrollWidth > element.current.clientWidth;\n };\n useEffect(() => {\n if (!element.current) return false;\n return setIsTruncated(\n element.current.scrollHeight > element.current.clientHeight,\n );\n }, element.current);\n const [isTruncated, setIsTruncated] = useState(determineIsTruncated());\n\n useEffect(() => {\n const resizeListener = () => setIsTruncated(determineIsTruncated());\n window.addEventListener('resize', resizeListener);\n return () => {\n window.removeEventListener('resize', resizeListener);\n };\n }, []);\n return isTruncated;\n};\n```\n\n========================================\n\nCode:\n```js\nconst Description = ({ data }: Props) => {\n const [open, setOpen] = useState<boolean>(false);\n const ref = useRef<HTMLParagraphElement>(null);\n const isTruncated = useIsTruncated(ref);\n\n return (\n <>\n <div className=\"my-3 max-h-[4.5rem] relative\">\n <p ref={ref} className=\"inline line-clamp-3\">\n {data.description}\n </p>\n {isTruncated && (\n <button\n className=\"text-blue-600 leading-none absolute bottom-0 right-0 font-medium\"\n onClick={() => setOpen(true)}\n >\n more\n </button>\n )}\n </div>\n <Modal open={open} setOpen={setOpen} />\n </>\n );\n};\n\n\nconst useIsTruncated = (element: RefObject<HTMLParagraphElement>) => {\n const determineIsTruncated = () => {\n if (!element.current) return false;\n return element.current.scrollWidth > element.current.clientWidth;\n };\n const [isTruncated, setIsTruncated] = useState(determineIsTruncated());\n\n useEffect(() => {\n const resizeListener = () => setIsTruncated(determineIsTruncated());\n window.addEventListener(\"resize\", resizeListener);\n return () => {\n window.removeEventListener(\"resize\", resizeListener);\n };\n }, []);\n return isTruncated;\n};\n```\n\n```css\noverflow: hidden;\ndisplay: -webkit-box;\n-webkit-box-orient: vertical;\n-webkit-line-clamp: 3;\n```\n\n```text\n-webkit-line-clamp\n```\n\n```text\nscrollWidth\n```\n\n```text\nclientWidth\n```\n\n```text\noffsetWidth\n```\n\n```text\n-webkit-line-clamp\n```\n\n```text\nline-clamp-3\n```\n\n```js\nconst determineIsTruncated = () => {\n if (!element.current) return false;\n return element.current.scrollHeight > element.current.clientHeight;\n};\n```\n\n```text\nconst useIsTruncated = element => {\n const determineIsTruncated = () => {\n if (!element.current) return false;\n return element.current.scrollWidth > element.current.clientWidth;\n };\n useEffect(() => {\n if (!element.current) return false;\n return setIsTruncated(\n element.current.scrollHeight > element.current.clientHeight,\n );\n }, element.current);\n const [isTruncated, setIsTruncated] = useState(determineIsTruncated());\n\n useEffect(() => {\n const resizeListener = () => setIsTruncated(determineIsTruncated());\n window.addEventListener('resize', resizeListener);\n return () => {\n window.removeEventListener('resize', resizeListener);\n };\n }, []);\n return isTruncated;\n};\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.930Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":204,"estimatedTokens":1199}}588{"id":"stack-67393854","source":"stackoverflow","questionId":67393854,"title":"how to add custom 26rem value in max-height on tailwindcss","tags":["tailwind-css"],"text":"Title: how to add custom 26rem value in max-height on tailwindcss\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm able to get up to 24rem on max-height using tailwindcss, but not 26rem. How would I add this value? I was not able to find information on how to do this in the docs: https://tailwindcss.com/docs/max-height . The only value-related changes I can find are for adding scale. Thank you!\n\n========================================\n\nTop Answer:\nYou have two options:\n\n- You can add the values directly inside your class names like so: the link\n\n``\n\n- the second approach is by using config file which locates in your project root directory: >: the link\n\n```\nmodule.exports = {\n theme: {\n extend: {\n height: {\n '128': '32rem',\n }\n }\n }\n }\n```\n\n========================================\n\nCode:\n```text\ntheme: {\n extend: {\n height: {\n 100: '24rem',\n },\n },\n },\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmax-h-100\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n height: {\n '128': '32rem',\n }\n }\n }\n }\n```\n\n```text\n<div class=\"h-[250px] w-[30rem] absolute top-[1rem] ...\"></div>\n```\n\n========================================\n\nComments:\n- You can make use of config or you can use JWT if you can use it. with JWT you don't need to add config, just simply use `-max-h-[26rem]`","metadata":{"transformedAt":"2026-08-18T18:33:42.930Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":71,"estimatedTokens":351}}589{"id":"stack-73884269","source":"stackoverflow","questionId":73884269,"title":"Custom group \"states\" in tailwind css","tags":["css","tailwind-css"],"text":"Title: Custom group \"states\" in tailwind css\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThere are essentially just two states for groups out-of-the-box: `hover` and `focus`\n\nSimplified examples:\n\n```\n\n foo\n\n bar\n\n```\n\n```\n\n foo\n bar\n\n```\n\nHo to add custom states, so this is possible:\n\n```\n\n foo\n bar\n\n```\n\nand with the custom state `foo-state` active\n\n```\n\n foo\n bar\n\n```\n\nEssentially mimicking the `CSS` cascade.\n\n========================================\n\nCode:\n```html\n<div class=\"group\">\n <p class=\"group-hover:text-gray-900\">foo</p>\n <p class=\"group-hover:text-gray-500\">bar</p>\n</div>\n```\n\n```html\n<a class=\"group\">\n <span class=\"group-focus:text-gray-900\">foo</span>\n <span class=\"group-focus:text-gray-500\">bar</span>\n</a>\n```\n\n```html\n<a class=\"group\">\n <span class=\"group-foo-state:text-gray-900\">foo</span>\n <span class=\"group-foo-state:text-gray-500\">bar</span>\n</a>\n```\n\n```html\n<a class=\"group foo-state\">\n <span class=\"group-foo-state:text-gray-900\">foo</span>\n <span class=\"group-foo-state:text-gray-500\">bar</span>\n</a>\n```\n\n```text\nhover\n```\n\n```text\nfocus\n```\n\n```text\nfoo-state\n```\n\n```text\nCSS\n```\n\n```js\n// tailwind.config.js\n\nconst plugin = require('tailwindcss/plugin')\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n theme: {\n extend: {\n // ...\n },\n },\n plugins: [\n plugin(function({ addVariant }) {\n addVariant('group-with-foo', ':merge(.group).foo &') // custom CSS\n addVariant('group-no-foo', ':merge(.group):not(.foo) &')\n })\n ],\n}\n```\n\n```html\n<a class=\"group\">\n <span class=\"group-with-foo:bg-red-500\">\n Parent has NOT `foo` class therefore I'm NOT red\n </span>\n <span class=\"group-no-foo:bg-red-500\">\n Parent has NOT `foo` class but it doesn't matter (it has `group` though)\n </span>\n</a>\n\n<hr>\n\n<a class=\"group foo\">\n <span class=\"group-with-foo:bg-red-500\">\n It is red because parent has BOTH `group` and `foo` class\n </span>\n <span class=\"group-no-foo:bg-red-500\">\n Parent has `foo` class therefore I'm not red\n </span>\n</a>\n```\n\n```html\n<a class=\"group\">\n <span class=\"[.group.foo_&]:bg-red-500\">\n It is red because parent has BOTH `group` and `foo` class\n </span>\n <span class=\"[.group:not(.foo)_&]:bg-red-500\">\n Parent has `foo` class therefore I'm not red\n </span>\n</a>\n```\n\n```text\naddVarinat\n```\n\n```text\n&\n```\n\n```text\n&\n```\n\n```text\n@\n```\n\n```text\n_\n```\n\n```text\n_\n```\n\n```text\n\\_\n```\n\n========================================\n\nComments:\n- That's weird. Why isn't it mentioned in this page that we need to add the variants into the tailwind.configs BEFORE using it?\n- @maiakd not sure I understood you. It is a custom variant and it should be registered. Page you gave is about default group variants\n- when using custom arbitrary values in any other cases, we ain't registering nothing. Such as `text-[6rem]`, p-[1rem], so why are supposed to register it in this case? Besides in the page I linked, they are not saying we have to UNLESS we check the Plugins page\n- You're not supposed. Both cases are present in the answer. Register plugin or use arbitrary variants is just user preference","metadata":{"transformedAt":"2026-08-18T18:33:42.930Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":18,"totalLines":180,"estimatedTokens":784}}590{"id":"stack-70996492","source":"stackoverflow","questionId":70996492,"title":"Tailwind CSS classes is not working with React, error \"You need to enable JavaScript to run this app...\"","tags":["reactjs","tailwind-css","tailwind-css-3"],"text":"Title: Tailwind CSS classes is not working with React, error \"You need to enable JavaScript to run this app...\"\nTags: reactjs, tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nTalwind CSS is not working with React. I have installed Tailwind CSS as per the documentation (https://v1.tailwindcss.com/docs/installation) and my code is below.\n\nCan someone help me?\n\nHere is my browser pic of the inspect to understand my problem\n\nHere is my package.json file\n\n```\n{\n \"name\": \"my-app\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^5.16.2\",\n \"@testing-library/react\": \"^12.1.2\",\n \"@testing-library/user-event\": \"^13.5.0\",\n \"autoprefixer\": \"^10.4.2\",\n \"postcss-cli\": \"^9.1.0\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-scripts\": \"5.0.0\",\n \"tailwindcss\": \"^3.0.18\",\n \"web-vitals\": \"^2.1.4\"\n },\n \"scripts\": {\n \"build:css\": \"postcss src/assets/css/tailwind.css -o src/assets/css/style.css\",\n \"start\": \"npm run build:css && react-scripts start \",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n```\n\nBelow is my postcss.config.js\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n }\n```\n\nBelow is my tailwind.config.js\n\n```\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n plugins: [\n // ...\n require('tailwindcss'),\n require('autoprefixer'),\n // ...\n ]\n}\n```\n\nLater, I edited my index.js\n\n```\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\n\n//const App = require(\"./App\");\n\nReactDOM.render(\n , document.getElementById(\"root\")\n);\n```\n\nI also edited my App.js like below\n\n```\nimport React from \"react\";\n import \"./assets/css/style.css\"\n\n function App({title}) {\n return (\n \n {title} \n \n );\n \n } \n export default App;\n```\n\nLast but now least these is my style.css file is generated\n\nStyle.css\n\n```\n/*\n! tailwindcss v3.0.18 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n display: none;\n}\n\n*, ::before, ::after {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n} \n\n'```\n```\n\n========================================\n\nTop Answer:\ncheck your index.js file you need to import ReactDom porperlt and also use it properlylike this\n\nimport ReactDom from \"react-dom\";\n\nand this\n\nimport ReactDom from \"react-dom\";\n\n========================================\n\nCode:\n```json\n{\n \"name\": \"my-app\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^5.16.2\",\n \"@testing-library/react\": \"^12.1.2\",\n \"@testing-library/user-event\": \"^13.5.0\",\n \"autoprefixer\": \"^10.4.2\",\n \"postcss-cli\": \"^9.1.0\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-scripts\": \"5.0.0\",\n \"tailwindcss\": \"^3.0.18\",\n \"web-vitals\": \"^2.1.4\"\n },\n \"scripts\": {\n \"build:css\": \"postcss src/assets/css/tailwind.css -o src/assets/css/style.css\",\n \"start\": \"npm run build:css && react-scripts start \",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n```\n\n```js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n }\n```\n\n```js\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n plugins: [\n // ...\n require('tailwindcss'),\n require('autoprefixer'),\n // ...\n ]\n}\n```\n\n```text\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\n\n//const App = require(\"./App\");\n\nReactDOM.render(\n <App title=\"Heyy React Dev Tool\"/>, document.getElementById(\"root\")\n);\n```\n\n```text\nimport React from \"react\";\n import \"./assets/css/style.css\"\n\n function App({title}) {\n return (\n <div>\n <div className=\"bg-gray-600 text-white p-5 border\">{title}</div> \n </div>\n );\n \n } \n export default App;\n```\n\n```css\n/*\n! tailwindcss v3.0.18 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n display: none;\n}\n\n*, ::before, ::after {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n} \n\n'```\n```\n\n```text\nmodule.exports = {\n // You are missing this block that defines what files tailwind should scan for usage\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n.js\n```\n\n```text\ntailwindcss\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nnpx tailwindcss init\n```\n\n========================================\n\nComments:\n- Is your app created using create-react-app?\n- @Terry,yes, I used these command npx create-react-app my-app\n- I understood a bit now If you see the pic in that Element.styles{} is empty how to reflect on that\n- Did you this guide? tailwindcss.com/docs/guides/create-react-app\n- yes, I followed these guide only, can I provide ACCESS TO MY git\n- Perhaps try creating a minimal reproducible example on codesandbox: it's impossible to troubleshoot based on the code here and to know what could've gone wrong. I have personally followed the guide before and my react app compiles without an issue with tailwind CSS. When you receive no response on a question for an extended period of time, it is likely an indicative of irreproducibility, lack of clarity, rather than a reflection of the helpfulness of the community.\n- @Terry, I forgot to inform you that , I deleted all the files in the src folder and created my own App.js and index.js in src folder. then I install the taiwindcss.\n- Here is my codesandboxlink: codesandbox.io/s/late-dew-bz89t\n- I think the issue is that codesandbox doesn't allow you to run the build scripts necessary to generate your pre-built tailwind CSS file :/ but based on the generated CSS file you've shared, it appears that tailwind has failed to detect uses. I have a feeling that's because in your code example, the file `tailwind.css` is not imported anywhere else. What happens if you import it in your React app and rebuild it?\n- @Terry, I never mind if you make any changes :). But, I changed it by importing tailwind.css instead of style.css. But raising the same thing. COuld you please edit, that's okay for me, its a sample project\n- and i also feel that could you please help me where to write the exact console.log() so, that I will get some info, even I tried these as well, please Terry, I am trying these from a week.\n- really thanks, I followed the guide, But I mistakenly, Instead of adding in tailwind.config.js , I added in postcss.config.js. But thanks terry for your help atlost I solved it\n- This question is similar to: How to use create React app with TailwindCSS v4. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.","metadata":{"transformedAt":"2026-08-18T18:33:42.931Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":1114,"estimatedTokens":5640}}591{"id":"stack-72296342","source":"stackoverflow","questionId":72296342,"title":"Best way to handle Svelte component props","tags":["javascript","tailwind-css","svelte","sveltekit"],"text":"Title: Best way to handle Svelte component props\nTags: javascript, tailwind-css, svelte, sveltekit\nSource: Stack Overflow\n\nQuestion:\nI'm building an app using SvelteKit and Tailwind. I know that when using Tailwind to style it is recommended to leverage components to reduce the amount of repeated code you have to write using Tailwinds utility classes. My issue is that when making components based on HTML tags, for instance an `` tag, dealing with props in that component that would normally just be attributes for that tag is getting overwhelming. MDN shows that the `` tag has 31 possible attributes. I know that I won't be using all of them but going back and forth and adding them as props to a component is getting tiresome.\n\nWhat is the best way to solve this problem without adding up to 31 lines of `export let attribute` to a component and adding them to the **real** HTML tag inside of the component?\n\nExample:\n\n```\n\n export let name;\n export let id;\n export let type;\n export let disabled;\n export let required;\n export let minLength;\n export let maxLength;\n export let min;\n export let max;\n export let pattern;\n\n let value;\n let borderColor = '#D1D5DB';\n\n const inputHandler = (e) => {\n if (e.target.value === '') {\n borderColor = '#D1D5DB';\n } else {\n borderColor = '';\n }\n };\n\n```\n\n========================================\n\nTop Answer:\nIf you want to be able to do\n\n```\n\n```\n\nWithout having to declare all these extra attribute, the best way to do so is to use the `$$restProps`, this object will contain all the props that have been passed to the component but have not been explicitly defined as props (exported).\n\n```\n\n export let name = \"\";\n\n```\n\n(here `name` was defined, so it will not be included in `$$restProps` and I had to add it myself)\n\n========================================\n\nCode:\n```text\n<script>\n export let name;\n export let id;\n export let type;\n export let disabled;\n export let required;\n export let minLength;\n export let maxLength;\n export let min;\n export let max;\n export let pattern;\n\n let value;\n let borderColor = '#D1D5DB';\n\n const inputHandler = (e) => {\n if (e.target.value === '') {\n borderColor = '#D1D5DB';\n } else {\n borderColor = '';\n }\n };\n</script>\n\n<input\n {name}\n {id}\n {type}\n {disabled}\n {required}\n {minLength}\n {maxLength}\n {min}\n {max}\n {pattern}\n on:input={inputHandler}\n style={`border-color: ${borderColor}`}\n class=\"\n w-full px-1 py-px mb-4 bg-transparent border-2 border-gray-300 \n rounded-xl last:mb-0 valid:border-emerald-300 invalid:border-rose-400\n \"\n/>\n```\n\n```text\n<input>\n```\n\n```text\n<input>\n```\n\n```text\nexport let attribute\n```\n\n```text\n<script>\n import Input from './Input.svelte';\n\n const options ={\n type: 'number',\n placeholder:'input a number',\n required: true\n };\n</script>\n\n<Input {options} />\n```\n\n```text\n<script>\n export let options = {}\n export let value = ''\n</script>\n\n<input type=\"text\"\n placeholder=\"default placeholder\"\n {...options}\n bind:value\n style:border-color=\"{options.required && value === '' ? 'tomato' : ''}\"\n class=\"w-full px-1 py-px mb-4 bg-transparent border-2 ...\"\n />\n```\n\n```text\n$$restProps\n```\n\n```html\n<MyInputField name=\"123\" maxLength=\"5\" type=\"text\">\n```\n\n```html\n<script>\n export let name = \"\";\n</script>\n\n<input name={name} {..$$restProps}>\n```\n\n```text\n$$restProps\n```\n\n```text\nname\n```\n\n```text\n$$restProps\n```\n\n========================================\n\nComments:\n- you could export an object as prop and then spread it into the `input`\n- @pilchard this is absolutely the way to do it, you should write it up as an answer using your REPL code as a guideline\n- @pilchard The default values which are set on the exported variable get overwritten if the prop is passed on the component. So if just one value should be modified, all the values must be defined again in the parent. To prevent that I would suggest to seperate the default Options into a seperate object and spread both on the input element svelte.dev/repl/52715e3c326349fca4f310060869960b?version=3.4‌​8.0\n- Or probably even better - set the attributes which actually have a default value directly on the input element and spread the options afterwards svelte.dev/repl/062b19cdfc1a45409d66fbd1245609c6?version=3.4‌​8.0\n- @Corrl your last suggestion seems a good way forward, mine was a little off the cuff too late at night.\n- You commented above that @pilchard's way is the one to do it. Is that because of the \"optimisation problems\" the docs state? *\"It shares the same optimisation problems as $$props, and is likewise not recommended\"*\n- That comment was not mine, but yes the optimization is an issue with props and restProps.\n- Oh my fault, both your names come up so often. Sorry for the confusion and thanks for answering!\n- I'm curious, do you think that this would suffer from the same optimization problems as $$restProps since the props aren't explicitly defined? This solution and $$restProps are exactly what I'm looking for, minus the optimization problems and I'm likely going to go with one or the other. I wonder if the optimization problems are referring to props that are reactive and are likely to change a lot, like value or possibly disabled. If so, using this solution or $$restProps wouldn't be a big deal for props such as placeholder or type since they are usually set once and not changed again.\n- Your solution for setting the border color if the value is empty is also much more succinct than my original solution! Thank you for the bonus optimization!\n- @Clarence I was also wondering if the 'kind of props' like you discribe make a difference with the optimization. Unfortunately I don't know enough from 'behind the scenes' yet to be able to tell if there are similar problems with the exported options version","metadata":{"transformedAt":"2026-08-18T18:33:42.931Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":187,"estimatedTokens":1489}}592{"id":"stack-70377749","source":"stackoverflow","questionId":70377749,"title":"Custom google fonts with NextJs and tailwindCSS","tags":["reactjs","next.js","tailwind-css","google-fonts"],"text":"Title: Custom google fonts with NextJs and tailwindCSS\nTags: reactjs, next.js, tailwind-css, google-fonts\nSource: Stack Overflow\n\nQuestion:\nI would like to use google fonts in my NextJS app. I use tailwindCSS and I already imported reference link in the _document.js Head section . In the tailwind.config file I defined my fontFamily, but when I try to use the custom class it does not apply the font family to the html element. What am I doing wrong?\n\nMy _document.js file:\n\n```\nimport Document, { Html, Head, Main, NextScript } from \"next/document\";\n\nclass MyDocument extends Document {\n static async getInitialProps(ctx) {\n const initialProps = await Document.getInitialProps(ctx);\n return { ...initialProps };\n }\n\n render() {\n return (\n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default MyDocument;\n```\n\ntailwind.config file:\n\n```\nconst defaultTheme = require(\"tailwindcss/defaultTheme\");\n\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {\n fontFamily: {\n press: [\"Press Start 2P\", ...defaultTheme.fontFamily.sans],\n },\n },\n },\n plugins: [],\n};\n```\n\nText where I want to use the custom font:\n\n```\n\n This is a random text with custom google font family Press Start 2P!\n\n```\n\n========================================\n\nTop Answer:\nThis is my reference and solution:\n\n**_document.js**\n\n```\nimport Document, { Html, Head, Main, NextScript } from \"next/document\";\n\nclass MyDocument extends Document {\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nexport default MyDocument;\n```\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n fontFamily: {\n syne_mono: [\"Syne Mono\", \"monospace\"],\n press: [\"Press Start 2P\", \"cursive\"],\n ubuntu: [\"Ubuntu Mono\", \"monospace\"],\n },\n\n extend: {},\n },\n plugins: [],\n};\n```\n\n**index.js** (*home page*)\n\n```\nimport Head from \"next/head\";\n\nexport default function Home() {\n return (\n \n \n Create Next App\n \n \n \n\n \n \n\n### Custom Fonts:\n\n \n\n### Syne Mono, monospace\n\n \n\n### Press Start 2P, cursive;\n\n \n\n### Ubuntu Mono, monospace;\n\n \n \n );\n}\n```\n\noutput:\n\nhttps://i.sstatic.net/BOc14.png\n\n*\"next\": \"12.0.7\",\"react\": \"17.0.2\",\"tailwindcss\": \"^3.0.5\"*\n\n========================================\n\nCode:\n```text\nimport Document, { Html, Head, Main, NextScript } from \"next/document\";\n\nclass MyDocument extends Document {\n static async getInitialProps(ctx) {\n const initialProps = await Document.getInitialProps(ctx);\n return { ...initialProps };\n }\n\n render() {\n return (\n <Html>\n <Head>\n <link\n href=\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\"\n rel=\"stylesheet\"\n />\n </Head>\n <body>\n <Main />\n <NextScript />\n </body>\n </Html>\n );\n }\n}\n\nexport default MyDocument;\n```\n\n```text\nconst defaultTheme = require(\"tailwindcss/defaultTheme\");\n\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {\n fontFamily: {\n press: [\"Press Start 2P\", ...defaultTheme.fontFamily.sans],\n },\n },\n },\n plugins: [],\n};\n```\n\n```text\n<h2 className=\"font-press text-3xl\">\n This is a random text with custom google font family Press Start 2P!\n</h2>\n```\n\n```text\n// ...\n extend: {\n fontFamily: {\n press: ['\"Press Start 2P\"', ...defaultTheme.fontFamily.sans],\n },\n },\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nimport Document, { Html, Head, Main, NextScript } from \"next/document\";\n\nclass MyDocument extends Document {\n render() {\n return (\n <Html>\n <Head>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n <link\n rel=\"preconnect\"\n href=\"https://fonts.gstatic.com\"\n crossOrigin=\"true\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Syne+Mono&family=Ubuntu+Mono&display=swap\"\n rel=\"stylesheet\"\n />\n </Head>\n <body>\n <Main />\n <NextScript />\n </body>\n </Html>\n );\n }\n}\n\nexport default MyDocument;\n```\n\n```text\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n fontFamily: {\n syne_mono: [\"Syne Mono\", \"monospace\"],\n press: [\"Press Start 2P\", \"cursive\"],\n ubuntu: [\"Ubuntu Mono\", \"monospace\"],\n },\n\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\nimport Head from \"next/head\";\n\nexport default function Home() {\n return (\n <div>\n <Head>\n <title>Create Next App</title>\n <meta name=\"description\" content=\"Generated by create next app\" />\n <link rel=\"icon\" href=\"/favicon.ico\" />\n </Head>\n\n <div className=\"flex items-center justify-center h-screen flex-col gap-5\">\n <h1 className=\"text-6xl text-blue-600 p-3\">Custom Fonts:</h1>\n <h2 className=\"font-syne_mono text-6xl\">Syne Mono, monospace</h2>\n <h2 className=\"font-press text-6xl\">Press Start 2P, cursive;</h2>\n <h2 className=\" font-ubuntu text-6xl\">Ubuntu Mono, monospace;</h2>\n </div>\n </div>\n );\n}\n```\n\n========================================\n\nComments:\n- Yes, this is what I missed from my code. Thank you for solve it, accepted your answer!","metadata":{"transformedAt":"2026-08-18T18:33:42.931Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":308,"estimatedTokens":1356}}593{"id":"stack-77701618","source":"stackoverflow","questionId":77701618,"title":"How does `first-child` work with arbitrary variants in tailwind css?","tags":["css","tailwind-css"],"text":"Title: How does `first-child` work with arbitrary variants in tailwind css?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've been trying to make sense of the `first-child` pseudo selector and this toy example has me really confused..\n\n```\n\n \n \n- abc\n \n- def\n \n- ghi\n \n \n \n- jkl\n \n- mno\n \n- pqr\n \n\n```\n\nhttps://i.sstatic.net/fZOFL.png\n\n### My expectation\n\nI *thought* that `[&:first-child]:text-red-500` meant\n\nturn the text red, for the first child of *this element* (`&`)\n\nbut clearly that's not the case. What's really going on here?\n\n========================================\n\nCode:\n```text\n<div class=\"[&:first-child]:text-red-500\">\n <ul>\n <li>abc</li>\n <li>def</li>\n <li>ghi</li>\n </ul>\n <ul class=\"[&:first-child]:text-blue-500\">\n <li>jkl</li>\n <li>mno</li>\n <li>pqr</li>\n </ul>\n</div>\n```\n\n```text\nfirst-child\n```\n\n```text\n[&:first-child]:text-red-500\n```\n\n```text\n&\n```\n\n```text\n[&:first-child]:text-red-500\n```\n\n```text\n&\n```\n\n```text\n[&>:first-child]:text-red-500\n```\n\n========================================\n\nComments:\n- Thanks, this helped me a lot! Btw, I don't *want* anything in particular. I'm merely playing around with the selector, trying to wrap my head around it :)","metadata":{"transformedAt":"2026-08-18T18:33:42.931Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":84,"estimatedTokens":306}}594{"id":"stack-73164671","source":"stackoverflow","questionId":73164671,"title":"first: and last: , even: and odd: don't work on \"tailwindcss\": \"^3.1.6\"","tags":["tailwind-css","tailwind-variants"],"text":"Title: first: and last: , even: and odd: don't work on \"tailwindcss\": \"^3.1.6\"\nTags: tailwind-css, tailwind-variants\nSource: Stack Overflow\n\nQuestion:\nso I'm learning tailwind CSS but when I arrived at variants I got stuck\n\nso when I use first: and last: only first works and it gets applied to all my list elements, it is supposed to work only to the first one, its the same for even and odd, please help me out\n\n```\n\n \n- Lorem ipsum dolor sit amet.\n \n- Lorem ipsum dolor sit amet.\n \n- Lorem ipsum dolor sit amet.\n \n- Lorem ipsum dolor sit amet.\n \n- Lorem ipsum dolor sit amet.\n \n- Lorem ipsum dolor sit amet.\n \n```\n\n========================================\n\nTop Answer:\nIf you don't like the accepted answer and want to apply it to the parent element instead of all the children, here is another way to do the same in TailwindCSS. Here is the demo link on tailwind playground.\n\n\r\n\r\n\n```\n*:last-child]:text-blue-600 [&>*:last-child]:font-bold \">\n \n- First List Item\n \n- Second List Item\n \n- Third List Item\n \n- Fourth List Item\n \n- Fifth List Item\n \n- Last List Item\n \n```\n\n========================================\n\nCode:\n```text\n<ol class=\" first:bg-green-500 last:bg-black\">\n <li>Lorem ipsum dolor sit amet.</li>\n <li>Lorem ipsum dolor sit amet.</li>\n <li>Lorem ipsum dolor sit amet.</li>\n <li>Lorem ipsum dolor sit amet.</li>\n <li>Lorem ipsum dolor sit amet.</li>\n <li>Lorem ipsum dolor sit amet.</li>\n </ol>\n```\n\n```html\n<ul class=\"\">\n <li class=\"first:bg-green-500 last:bg-black\">Lorem ipsum dolor sit amet.</li>\n <li class=\"first:bg-green-500 last:bg-black\">Lorem ipsum dolor sit amet.</li>\n <li class=\"first:bg-green-500 last:bg-black\">Lorem ipsum dolor sit amet.</li>\n <li class=\"first:bg-green-500 last:bg-black\">Lorem ipsum dolor sit amet.</li>\n <li class=\"first:bg-green-500 last:bg-black\">Lorem ipsum dolor sit amet.</li>\n <li class=\"first:bg-green-500 last:bg-black\">Lorem ipsum dolor sit amet.</li>\n</ul>\n```\n\n```html\n<ul class=\"\">\n <li class=\"bg-green-500\">Lorem ipsum dolor sit amet.</li>\n <li class=\"\">Lorem ipsum dolor sit amet.</li>\n <li class=\"\">Lorem ipsum dolor sit amet.</li>\n <li class=\"\">Lorem ipsum dolor sit amet.</li>\n <li class=\"\">Lorem ipsum dolor sit amet.</li>\n <li class=\"bg-black\">Lorem ipsum dolor sit amet.</li>\n</ul>\n```\n\n```html\n<ul class=\"\">\n <!-- Some Loop -->\n @foreach($els as $el)\n <li class=\"first:bg-green-500 last:bg-black\">First will be green, last will be black.</li>\n @endforeach\n</ul>\n```\n\n```html\n<ul class=\"[&>*:last-child]:text-blue-600 [&>*:last-child]:font-bold \">\n <li>First List Item</li>\n <li>Second List Item</li>\n <li>Third List Item</li>\n <li>Fourth List Item</li>\n <li>Fifth List Item</li>\n <li>Last List Item</li>\n </ul>\n```\n\n========================================\n\nComments:\n- but it doesn't make sense if it was like that i'll directly apply backgrounds directly withouts adding first or last , + in the tailwind documentation theye have added the first and last to the parent and it get applayed to the first child and last one , ` {#each people as person} {/each} `\n- it makes perfect sense - it is supposed to be used in loops where you have no control over certain elements\n- for exemple if i want to creat a huge table and the color will be different for each row, for exemple the odd must be grey and the even must be white so i have to apply the colors one by one ! i remember in pure css it was not like that you apply it to the parents and the children will have it...\n- Just realized placed same link twice, updated answer. The documentation place it on child (not parent) - see here\n- i think i finally got you, thank you for your time sir you were a big help","metadata":{"transformedAt":"2026-08-18T18:33:42.931Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":115,"estimatedTokens":932}}595{"id":"stack-71947440","source":"stackoverflow","questionId":71947440,"title":"React App: Cannot find module 'react-dom/client' or its corresponding type declarations","tags":["reactjs","tailwind-css","bit.dev"],"text":"Title: React App: Cannot find module 'react-dom/client' or its corresponding type declarations\nTags: reactjs, tailwind-css, bit.dev\nSource: Stack Overflow\n\nQuestion:\nI'm currently experiencing this error and I'm not really sure how to fix it. I've been trying to merge a project with components stored in bit.dev.\n\n```\nimport React from 'react';\nimport { createRoot } from 'react-dom/client'; // Cannot find module 'react-dom/client' or its corresponding type declarations.\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\nimport { BrowserRouter } from 'react-router-dom';\n\nimport 'bootstrap/dist/css/bootstrap.min.css';\n\nconst rootElement = document.getElementById('root');\nif (!rootElement) throw new Error('Failed to find the root element');\nconst root = createRoot(rootElement);\nroot.render(\n \n \n \n \n \n);\n```\n\nHere is the code. Thanks for your help!\n\n========================================\n\nTop Answer:\nAfter running `npm install react react-dom` or `yarn add react react-dom` as instructed here, you should then run\n\n```\nnpm install -D @types/react-dom\n```\n\nor\n\n```\nyarn add -D @types/react-dom\n```\n\nThis will add `react-dom/client` type declarations to your project and will remove the error you pointed at on line 2 of your code.\n\n========================================\n\nCode:\n```text\nimport React from 'react';\nimport { createRoot } from 'react-dom/client'; // Cannot find module 'react-dom/client' or its corresponding type declarations.\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\nimport { BrowserRouter } from 'react-router-dom';\n\nimport 'bootstrap/dist/css/bootstrap.min.css';\n\nconst rootElement = document.getElementById('root');\nif (!rootElement) throw new Error('Failed to find the root element');\nconst root = createRoot(rootElement);\nroot.render(\n <React.StrictMode>\n <BrowserRouter>\n <App />\n </BrowserRouter>\n </React.StrictMode>\n);\n```\n\n```text\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\nimport { BrowserRouter } from 'react-router-dom';\n\nimport 'bootstrap/dist/css/bootstrap.min.css';\n\nReactDOM.render(\n <React.StrictMode>\n <BrowserRouter>\n <App />\n </BrowserRouter>\n </React.StrictMode>,\n document.getElementById('root')\n);\n```\n\n```text\nimport * as ReactDOM from 'react-dom/client';\n```\n\n```text\nReactDOM.createRoot\n```\n\n```text\nnpm install -D @types/react-dom\n```\n\n```text\nyarn add -D @types/react-dom\n```\n\n```text\nnpm install react react-dom\n```\n\n```text\nyarn add react react-dom\n```\n\n```text\nreact-dom/client\n```\n\n========================================\n\nComments:\n- Does this answer your question? Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'\n- It gives the same error/warning.\n- Of course, they were already installed. Yet it continues to show that error for `react-dom/client`.","metadata":{"transformedAt":"2026-08-18T18:33:42.931Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":127,"estimatedTokens":751}}596{"id":"stack-73561810","source":"stackoverflow","questionId":73561810,"title":"How to setup Tailwind CSS with a React Microsoft Office Add-in created with Yeoman Generator?","tags":["reactjs","office-js","tailwind-css","office-addins","yeoman-generator"],"text":"Title: How to setup Tailwind CSS with a React Microsoft Office Add-in created with Yeoman Generator?\nTags: reactjs, office-js, tailwind-css, office-addins, yeoman-generator\nSource: Stack Overflow\n\nQuestion:\nI created a Microsoft Office Add-in (for PowerPoint) with React using the Yeoman Generator as described here:\nhttps://learn.microsoft.com/en-us/office/dev/add-ins/develop/yeoman-generator-overview\n\nNow, the question is how I can Tailwind to it.\n\nFollowing the Tailwind installation documentation for Create React App (https://tailwindcss.com/docs/installation) does not work.\n\nI thought that installing Tailwind CSS as a PostCSS plugin could be a good idea, but I didn't get it to work.\n\nAny recommendations?\n\n========================================\n\nTop Answer:\nThese were the steps needed to install it for me in an yeoman taskpane application with tailwind v3.3\n\n- Install dependencies:\n\n`npm install --save-dev style-loader css-loader postcss postcss-loader postcss-preset-env tailwindcss`\n\n- Add the following to the \"rules\" block in your webpack.config.js in the project root directory:\n\n```\n{\n test: /\\.css$/i,\n include: path.resolve(__dirname, \"src\"),\n use: [\"style-loader\", \"css-loader\", \"postcss-loader\"],\n},\n```\n\nalso add `const path = require('path');` to the top of this file.\n\n- Add these lines to the top of your taskpane.css\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n- Remove `` from your `taskpane.html` and add it as an import to the top of your `src/taskpane/index.tsx` like so:\n\n```\nimport \"./taskpane.css\";\n```\n\n- Create a `tailwind.config.js` in the root of your project\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./src/**/*.{js,jsx,ts,tsx}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n- Add a postcss.config.js\n\n```\nconst tailwindcss = require(\"tailwindcss\");\nmodule.exports = {\n plugins: [\"postcss-preset-env\", tailwindcss],\n};\n```\n\nDone\n\n========================================\n\nCode:\n```text\n{\n test: /\\.css$/i,\n include: path.resolve(__dirname, \"src\"),\n use: [\"style-loader\", \"css-loader\", \"postcss-loader\"],\n},\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nimport \"./taskpane.css\";\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./src/**/*.{js,jsx,ts,tsx}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\nconst tailwindcss = require(\"tailwindcss\");\nmodule.exports = {\n plugins: [\"postcss-preset-env\", tailwindcss],\n};\n```\n\n```text\nnpm install --save-dev style-loader css-loader postcss postcss-loader postcss-preset-env tailwindcss\n```\n\n```text\nconst path = require('path');\n```\n\n```text\n<link href=\"taskpane.css\" rel=\"stylesheet\" type=\"text/css\" />\n```\n\n```text\ntaskpane.html\n```\n\n```text\nsrc/taskpane/index.tsx\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n\"tailwindcss\": \"^3.3.3\",\n```\n\n========================================\n\nComments:\n- I did not up on the proposed solution, but this seems to be the right approach. Thank you.\n- did you manage to make it work?\n- yes you need to create it yourself\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- Downgrading is never a good solution. Why should it be done? Why specifically to 3.3.3? Why not to 3.x instead?\n- @rozsazoltan i agree, but that just what worked for me, take it or leave it","metadata":{"transformedAt":"2026-08-18T18:33:42.931Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":151,"estimatedTokens":897}}597{"id":"stack-73701911","source":"stackoverflow","questionId":73701911,"title":"Equal-width columns in CSS with flexbox and Tailwind","tags":["css","tailwind-css"],"text":"Title: Equal-width columns in CSS with flexbox and Tailwind\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to have a flexbox layout where three columns have the same width.\n\nI have to use Tailwind in this case, but it doesn't change the CSS theory... which, as far as I know, says I need to give the three columns the same basis, and then let them grow freely (all of them will grow the same proportion because they have the same basis).\n\nBut it's not working. One of the column gets bigger and I don't know why.\n\n*Note*: I added a border just to make it visually clear, but I don't need that.\n\n\r\n\r\n\n```\n.just-a-border {\nborder: 2px dotted purple;\n}\n```\n\n\r\n\n```\n\n \n I want to have more words\n 6 hours\n \n \n Yes\n 1 hour\n \n \n No\n 3 hours\n \n\n```\n\n\r\n\r\n\r\n\nAny idea to make it work?\n\n========================================\n\nTop Answer:\nIt appears you are using Tailwind classes from version 3 while you are using version 2.2.19.\n\nI added the following classes to your css and it now gives even columns.\n\n```\n.grow {\n flex-grow: 1;\n}\n\n.basis-1 {\n flex-basis: 0.25rem;\n}\n```\n\nAlso see the Play demo which uses your code, unchanged, and works as you would have expected.\n\nhttps://play.tailwindcss.com/VjbHZcTiVH\n\n\r\n\r\n\n```\n.just-a-border {\nborder: 2px dotted purple;\n}\n\n.grow {\n flex-grow: 1;\n}\n\n.basis-1 {\n flex-basis: 0.25rem;\n}\n```\n\n\r\n\n```\n\n \n I want to have more words\n 6 hours\n \n \n Yes\n 1 hour\n \n \n No\n 3 hours\n \n\n```\n\n========================================\n\nCode:\n```css\n.just-a-border {\nborder: 2px dotted purple;\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\" />\n<div class=\"grow flex flex-nowrap items-center gap-5 justify-center py-12 flex-row\">\n <div class=\"just-a-border h-full p-6 text-center basis-1 grow\">\n <div class=\"mb-2 text-sm font-medium uppercase\">I want to have more words</div>\n <div class=\"font-medium\">6 hours</div>\n </div>\n <div class=\"just-a-border h-full p-6 text-center basis-1 grow\">\n <div class=\"mb-2 text-sm font-medium uppercase\">Yes</div>\n <div class=\"font-medium\">1 hour</div>\n </div>\n <div class=\"just-a-border h-full p-6 text-center basis-1 grow\">\n <div class=\"mb-2 text-sm font-medium uppercase\">No</div>\n <div class=\"font-medium\">3 hours</div>\n </div>\n</div>\n```\n\n```css\n.just-a-border {\n border: 2px dotted purple;\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n<div class=\"flex flex-row flex-nowrap items-center gap-5 justify-center py-12\">\n <div class=\"just-a-border h-full p-6 text-center flex-1 flex-grow\">\n <div class=\"mb-2 text-sm font-medium uppercase\">I want to have more words</div>\n <div class=\"font-medium\">6 hours</div>\n </div>\n <div class=\"just-a-border h-full p-6 text-center flex-1 flex-grow\">\n <div class=\"mb-2 text-sm font-medium uppercase\">Yes</div>\n <div class=\"font-medium\">1 hour</div>\n </div>\n <div class=\"just-a-border h-full p-6 text-center flex-1 flex-grow\">\n <div class=\"mb-2 text-sm font-medium uppercase\">No</div>\n <div class=\"font-medium\">3 hours</div>\n </div>\n</div>\n```\n\n```text\nbasis-1\n```\n\n```text\nflex-1\n```\n\n```text\ngrow\n```\n\n```text\nflex-grow\n```\n\n```text\n.grow {\n flex-grow: 1;\n}\n\n.basis-1 {\n flex-basis: 0.25rem;\n}\n```\n\n```css\n.just-a-border {\nborder: 2px dotted purple;\n}\n\n.grow {\n flex-grow: 1;\n}\n\n.basis-1 {\n flex-basis: 0.25rem;\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\" />\n<div class=\"grow flex flex-nowrap items-center gap-5 justify-center py-12 flex-row\">\n <div class=\"just-a-border h-full p-6 text-center basis-1 grow\">\n <div class=\"mb-2 text-sm font-medium uppercase\">I want to have more words</div>\n <div class=\"font-medium\">6 hours</div>\n </div>\n <div class=\"just-a-border h-full p-6 text-center basis-1 grow\">\n <div class=\"mb-2 text-sm font-medium uppercase\">Yes</div>\n <div class=\"font-medium\">1 hour</div>\n </div>\n <div class=\"just-a-border h-full p-6 text-center basis-1 grow\">\n <div class=\"mb-2 text-sm font-medium uppercase\">No</div>\n <div class=\"font-medium\">3 hours</div>\n </div>\n</div>\n```\n\n```text\n<div class=\"grid w-full grid-cols-3 flex-row justify-center gap-5 py-12\">\n <div class=\"rounded-lg border border-slate-300 p-6 text-center\">\n <div class=\"mb-2 text-sm font-medium uppercase\">I want to have more words</div>\n <div class=\"font-medium\">6 hours</div>\n </div>\n <div class=\"rounded-lg border border-slate-300 p-6 text-center\">\n <div class=\"mb-2 text-sm font-medium uppercase\">Yes</div>\n <div class=\"font-medium\">1 hour</div>\n </div>\n <div class=\"rounded-lg border border-slate-300 p-6 text-center\">\n <div class=\"mb-2 text-sm font-medium uppercase\">No</div>\n <div class=\"font-medium\">3 hours</div>\n </div>\n</div>\n```\n\n```text\ngrid\n```\n\n```text\nflex\n```\n\n```text\ngrid-cols-3\n```\n\n========================================\n\nComments:\n- I don't think you need `flex` at all if you use tailwind. Just use columns. tailwindcss.com/docs/columns\n- Nice! But how do you make this responsive?\n- tailwindcss.com/docs/…","metadata":{"transformedAt":"2026-08-18T18:33:42.931Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":248,"estimatedTokens":1278}}598{"id":"stack-79763537","source":"stackoverflow","questionId":79763537,"title":"How to make a pseudo-element span full width of grid container but align with specific grid item in Tailwind CSS?","tags":["css","tailwind-css","tailwind-css-4"],"text":"Title: How to make a pseudo-element span full width of grid container but align with specific grid item in Tailwind CSS?\nTags: css, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI’m working on a grid layout using Tailwind CSS (v4.1).\n\nVisit this play snippet\n\nhttps://play.tailwindcss.com/cAvvS656Ts\n\nHere’s a minimal example:\n\n```\n\n@utility border-line-1 {\n content: \"\";\n width: 100vw;\n height: 2px;\n background-color: red;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n\n \n \n A\n B\n C\n D\n E\n F\n \n \n\n```\n\n### What I want\n\nThe red line should start from the beginning of section **A** (so basically from the very left edge of the grid container).\n\nIt should span the entire width (A → B → C).\n\nIt should sit exactly at the bottom of **B**.\n\n### What happens now\n\nSince the pseudo-element is inside `B`, it only positions relative to `B`. If I hack it with `left:-180px`, it looks close to what I want — but that’s not responsive or correct.\n\n### Question\n\nHow can I properly make this red line span the full width of the grid container but align with the bottom of `B` **without hardcoding offsets**?\n\n### Note\n\nThis is **purely a CSS positioning issue** — I’m just using Tailwind classes to generate the CSS, so I added the `tailwind-css` tag as well.\n\n========================================\n\nTop Answer:\nA perfect use case for anchor positioning even if the support is still not good\n\n```\nsection:after {\n content: \"\";\n position: absolute;\n height: 2px;\n background-color: red;\n inset: auto anchor(--C right) anchor(--B bottom) anchor(--A left);\n}\n.A { anchor-name: --A}\n.B { anchor-name: --B}\n.C { anchor-name: --C}\n```\n\n```\n\n \n \n A\n B\n C\n D\n E\n F\n \n \n\n```\n\n========================================\n\nCode:\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@utility border-line-1 {\n content: \"\";\n width: 100vw;\n height: 2px;\n background-color: red;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n</style>\n\n<body class=\"bg-gray-800\">\n <section class=\" h-[100vh] w-full bg-gray-900 p-4 text-white\">\n <div class=\" grid grid-cols-4 grid-rows-6 gap-5\">\n <div class=\"row-span-6 border border-white\">A</div>\n <div class=\"relative col-span-2 border border-white after:border-line-1\">B</div>\n <div class=\"row-span-6 border border-white\">C</div>\n <div class=\"row-span-4 border border-white\">D</div>\n <div class=\"row-span-4 border border-white\">E</div>\n <div class=\"col-span-2 border border-white\">F</div>\n </div>\n </section>\n</body>\n```\n\n```text\nB\n```\n\n```text\nB\n```\n\n```text\nleft:-180px\n```\n\n```text\nB\n```\n\n```text\ntailwind-css\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@utility line-on-* { \n &::after {\n content: \"\";\n position: absolute;\n height: 2px;\n background-color: var(--color-red-500);\n bottom: anchor(--value([*]) bottom);\n }\n}\n\n@utility line-from-* { \n &::after {\n left: anchor(--value([*]) left);\n }\n}\n\n@utility line-to-* { \n &::after {\n right: anchor(--value([*]) right);\n }\n}\n</style>\n\n<body class=\"bg-gray-800\">\n <section class=\"h-[100vh] w-full bg-gray-900 p-4 text-white\">\n <div class=\"grid grid-cols-4 grid-rows-6 gap-5\">\n <div class=\"row-span-6 border border-white [anchor-name:--A]\">A</div>\n <div class=\"col-span-2 border border-white [anchor-name:--B]\">B</div>\n <div class=\"row-span-6 border border-white [anchor-name:--C]\">C</div>\n <div class=\"row-span-4 border border-white [anchor-name:--D]\">D</div>\n <div class=\"row-span-4 border border-white [anchor-name:--E]\">E</div>\n <div class=\"col-span-2 border border-white [anchor-name:--F]\">F</div>\n </div>\n\n <span class=\"line-on-[--B] line-from-[--A] line-to-[--C]\"></span>\n <span class=\"line-on-[--D] line-from-[--A] line-to-[--C]\"></span>\n <span class=\"line-on-[--A] line-from-[--A] line-to-[--C]\"></span>\n </section>\n</body>\n```\n\n```text\nanchor\n```\n\n```text\nanchor\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@utility border-line-1 {\n height: 2px;\n width: 50%;\n background-color: red;\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n</style>\n\n<body class=\"bg-gray-800\">\n <section class=\"h-[100vh] w-full bg-gray-900 p-4 text-white\">\n <div class=\"grid grid-cols-4 grid-rows-6 gap-5\">\n <div class=\"relative row-span-6 border border-white after:border-line-1\">A</div>\n <div class=\"relative col-span-2 border border-white after:border-line-1\">B</div>\n <div class=\"row-span-6 border border-white\">C</div>\n <div class=\"relative row-span-4 border border-white after:border-line-1\">D</div>\n <div class=\"row-span-4 border border-white\">E</div>\n <div class=\"col-span-2 border border-white\">F</div>\n </div>\n </section>\n</body>\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@utility border-line-1 {\n height: 2px;\n width: 100%;\n padding-inline: 100cqw;\n background-color: red;\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n</style>\n\n<body class=\"bg-gray-800\">\n <section class=\"h-[100vh] w-full bg-gray-900 p-4 text-white\">\n <div class=\"grid grid-cols-4 grid-rows-6 gap-5 overflow-hidden\">\n <div class=\"relative row-span-6 border border-white after:border-line-1\">A</div>\n <div class=\"relative col-span-2 border border-white after:border-line-1\">B</div>\n <div class=\"row-span-6 border border-white\">C</div>\n <div class=\"relative row-span-4 border border-white after:border-line-1\">D</div>\n <div class=\"row-span-4 border border-white\">E</div>\n <div class=\"col-span-2 border border-white\">F</div>\n </div>\n </section>\n</body>\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@utility border-line-1 {\n height: 2px;\n background-color: red;\n position: absolute;\n bottom: 0;\n left: -100cqw;\n right: -100cqw;\n}\n</style>\n\n<body class=\"bg-gray-800\">\n <section class=\"h-[100vh] w-full bg-gray-900 p-4 text-white\">\n <div class=\"grid grid-cols-4 grid-rows-6 gap-5 overflow-hidden\">\n <div class=\"relative row-span-6 border border-white after:border-line-1\">A</div>\n <div class=\"relative col-span-2 border border-white after:border-line-1\">B</div>\n <div class=\"row-span-6 border border-white\">C</div>\n <div class=\"relative row-span-4 border border-white after:border-line-1\">D</div>\n <div class=\"row-span-4 border border-white\">E</div>\n <div class=\"col-span-2 border border-white\">F</div>\n </div>\n </section>\n</body>\n```\n\n```text\n::after\n```\n\n```text\n.grid\n```\n\n```text\n.grid\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@utility border-line-* { \n position: relative;\n \n &::before, &::after {\n content: \"\";\n position: absolute;\n left: -100vw;\n height: calc(--value(integer) * 2px);\n height: --value([length]);\n width: 200vw;\n }\n \n /* Top line */\n /*\n &::before {\n top: 0;\n background-color: var(--color-blue-500);\n }\n */\n \n /* Bottom line */\n &::after {\n bottom: 0;\n background-color: var(--color-red-500);\n }\n}\n</style>\n\n<body class=\"bg-gray-800 overflow-x-hidden\">\n <section class=\"h-[100vh] w-full bg-gray-900 p-4 text-white\">\n <div class=\"grid grid-cols-4 grid-rows-6 gap-5\">\n <div class=\"row-span-6 border border-white border-line-1\">A</div>\n <div class=\"col-span-2 border border-white border-line-1\">B</div>\n <div class=\"row-span-6 border border-white\">C</div>\n <div class=\"row-span-4 border border-white border-line-1\">D</div>\n <div class=\"row-span-4 border border-white\">E</div>\n <div class=\"col-span-2 border border-white\">F</div>\n </div>\n </section>\n</body>\n```\n\n```text\nafter:\n```\n\n```css\nsection:after {\n content: \"\";\n position: absolute;\n height: 2px;\n background-color: red;\n inset: auto anchor(--C right) anchor(--B bottom) anchor(--A left);\n}\n.A { anchor-name: --A}\n.B { anchor-name: --B}\n.C { anchor-name: --C}\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n\n<body class=\"bg-gray-800\">\n <section class=\" h-[100vh] w-full bg-gray-900 p-4 text-white\">\n <div class=\" grid grid-cols-4 grid-rows-6 gap-5\">\n <div class=\"row-span-6 border border-white A\">A</div>\n <div class=\"relative col-span-2 border border-white B\">B</div>\n <div class=\"row-span-6 border border-white C\">C</div>\n <div class=\"row-span-4 border border-white\">D</div>\n <div class=\"row-span-4 border border-white\">E</div>\n <div class=\"col-span-2 border border-white\">F</div>\n </div>\n </section>\n</body>\n```\n\n========================================\n\nComments:\n- Must it be a pseudo element of B, or can it be another element as long as it achieves the same required visual effect? Or otherwise, can HTML structure be altered?\n- @Wongjn The reason I’m trying to use a ::after pseudo-element is because in my layout I sometimes use the same technique to place vertical divider lines and sometimes horizontal lines. So if I can make this work with ::after, it keeps the approach consistent and reusable.\n- @Wongjn If you check this image: awesomescreenshot.com/image/… , you’ll see the effect that I want in the bottom menus. Right now, each section is separated by a kind of square/box divider. That’s the “active” separator I’m using, but I’m not satisfied with how it’s implemented — it feels more like a workaround than the correct way. What I actually need is the proper CSS way to create those dividers. If necessary, I can the full HTML/CSS code for the image so the issue is clearer.\n- @Wongjn Ultimately, I need to find the proper solution to create this visual effect. I don’t mind whether it requires altering the HTML or using CSS — either way is fine. The important part is that I should be able to easily place horizontal or vertical lines to achieve the kind of visual effect shown in the image I shared above.\n- @Wongjn, this layout design I want canva.com/design/DAGy1GAWyZY/EsgRj9awDyo0-R_c-tGDVA/…\n- The second piece of code you provided might work, but I’m still looking for the most elegant, purely dynamic solution. Once I find it, I’ll definitely it here. Thank you for your mentorship and valuable time — I am really thankful to you.\n- Working on Chrome, Edge, Firefox and Safari. :)\n- Look at this: play.tailwindcss.com/DQJTgWsY6K . I can easily achieve the effect with that code, but I want the same effect for the OP’s code.\n- This exact approach is used for the Tailwind sponsor section located on the home page of the Tailwind official website\n- Working on Chrome, Edge, Firefox and Safari. :)\n- Related: How to create a clean continuous grid border effect with gaps?\n- Thanks for creating this Tailwind version for anchors. I do have an opinion that I recently shared in a GitHub discussion on Tailwind. It would be great if you could check it out—I’m really interested in hearing your thoughts! github.com/tailwindlabs/tailwindcss/discussions/18925\n- Not working on Firefox :)\n- Related: How to create a clean continuous grid border effect with gaps?","metadata":{"transformedAt":"2026-08-18T18:33:42.931Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":386,"estimatedTokens":2818}}599{"id":"stack-72069858","source":"stackoverflow","questionId":72069858,"title":"NEXT Image: Shrinking inside flexbox with tailwind","tags":["css","tailwind-css","next-images"],"text":"Title: NEXT Image: Shrinking inside flexbox with tailwind\nTags: css, tailwind-css, next-images\nSource: Stack Overflow\n\nQuestion:\nI am using NEXT Image component to Fit in with a flex box without shrinking. However, based on the content that is there in the other element, it keeps shrinking:\n\nhttps://i.sstatic.net/wDz3P.png\n\nHere's my code:\n\n```\nimport React from 'react';\nimport Image from 'next/image';\ntype Props = {\n imageUrl?: string;\n senderName: string;\n newMessageCount?: number;\n latestMessage: string;\n};\n\nexport default function MessageBox({\n imageUrl,\n senderName,\n newMessageCount,\n latestMessage,\n}: Props) {\n const isNewMessageDefined = newMessageCount ? true : false;\n const newMsgValue =\n latestMessage.length > 80\n ? `${latestMessage.slice(0, 80)}...`\n : latestMessage;\n return (\n \n \n \n \n \n\n### {senderName ?? 'John Doe'}\n\n {isNewMessageDefined && (\n \n \n {newMessageCount}\n \n \n )}\n \n \n \n {newMsgValue}\n \n \n \n \n );\n}\n```\n\nCan someone help me identify how to prevent this issue as I always want my image to be of the size and never shrink. I tried using the property: `flex-shrink: 0` but that didn't work too.\n\n========================================\n\nTop Answer:\nAgree with answer from @georgekpc, you need to wrap the Image in a container\n\nFrom the docs\n\nThe parent element must assign position: \"relative\", position:\n\"fixed\", or position: \"absolute\" style.\n\nHowever, the `layout` prop is now deprecated and you need to use the `fill` prop as true.\n\n```\n\n \n \n```\n\nhttps://nextjs.org/docs/pages/api-reference/components/image\n\nhttps://nextjs.org/docs/pages/api-reference/components/image#fill\n\n========================================\n\nCode:\n```text\nimport React from 'react';\nimport Image from 'next/image';\ntype Props = {\n imageUrl?: string;\n senderName: string;\n newMessageCount?: number;\n latestMessage: string;\n};\n\nexport default function MessageBox({\n imageUrl,\n senderName,\n newMessageCount,\n latestMessage,\n}: Props) {\n const isNewMessageDefined = newMessageCount ? true : false;\n const newMsgValue =\n latestMessage.length > 80\n ? `${latestMessage.slice(0, 80)}...`\n : latestMessage;\n return (\n <div className='flex w-full gap-2' aria-label='Funfuse-Message-Container'>\n <Image\n alt='Message Image'\n src={imageUrl ?? '/funfuse/avatar-02.jpg'}\n className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'\n height={80}\n width={80}\n objectFit='cover'\n objectPosition='center'\n />\n <div className='flex flex-col'>\n <div\n aria-label='Funfuse-Message-Header'\n className='flex flex-row items-center gap-2'>\n <h2 className='text-xl text-black'>{senderName ?? 'John Doe'}</h2>\n {isNewMessageDefined && (\n <div className='h-[1.2rem] w-[1.2rem] rounded-full relative bg-funfuse'>\n <label className='absolute text-xs text-white transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2'>\n {newMessageCount}\n </label>\n </div>\n )}\n </div>\n <div aria-label='Funfuse-Message-Body'>\n <label className='text-sm font-semibold text-gray-400'>\n {newMsgValue}\n </label>\n </div>\n </div>\n </div>\n );\n}\n```\n\n```text\nflex-shrink: 0\n```\n\n```text\n<Image\n alt='Message Image'\n src={imageUrl ?? '/funfuse/avatar-02.jpg'}\n className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'\n height={80}\n width={80}\n objectFit='cover'\n objectPosition='center'\n/>\n```\n\n```text\n<div className=\"relative w-[80px] h-[80px]\">\n <Image\n alt='Message Image'\n src={imageUrl ?? '/funfuse/avatar-02.jpg'}\n className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'\n layout=\"fill\"\n objectFit='cover'\n objectPosition='center'\n />\n</div>\n```\n\n```text\n<Image />\n```\n\n```text\nposition: relative;width:80px;height:80px\n```\n\n```text\nwidth\n```\n\n```text\nheight\n```\n\n```text\n<Image />\n```\n\n```text\nlayout=\"fill\"\n```\n\n```text\nreturn (\n<div className='flex w-full gap-2' aria-label='Funfuse-Message-Container'>\n <Image\n alt='Message Image'\n src={imageUrl ?? '/funfuse/avatar-02.jpg'}\n className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'\n height={80}\n layout=\"fixed\"\n width={80}\n objectFit='cover'\n objectPosition='center'\n />\n <div className='flex flex-col'>\n <div\n aria-label='Funfuse-Message-Header'\n className='flex flex-row items-center gap-2'>\n <h2 className='text-xl text-black'>{senderName ?? 'John Doe'}</h2>\n {isNewMessageDefined && (\n <div className='h-[1.2rem] w-[1.2rem] rounded-full relative bg-funfuse'>\n <label className='absolute text-xs text-white transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2'>\n {newMessageCount}\n </label>\n </div>\n )}\n </div>\n <div aria-label='Funfuse-Message-Body'>\n <label className='text-sm font-semibold text-gray-400'>\n {newMsgValue}\n </label>\n </div>\n </div>\n</div>\n```\n\n```text\n<div className=\"relative h-[56px] w-[56px]\">\n <Image\n className=\"h-14 w-14 rounded-full\"\n src={author.profileImageUrl}\n alt=\"Profile Image\"\n fill={true}\n />\n </div>\n```\n\n```text\nlayout\n```\n\n```text\nfill\n```\n\n========================================\n\nComments:\n- Hey Thanks but I actually tried this too. It had no effect\n- @ShivamSahil did you resolve this? same problem here.\n- Nope used some hack to fix it at that time don't remember exactly now. Maybe `object-fit: cover; object-position: center;` something along those lines","metadata":{"transformedAt":"2026-08-18T18:33:42.931Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":256,"estimatedTokens":1404}}600{"id":"stack-76408807","source":"stackoverflow","questionId":76408807,"title":"Style children based on their data attributes in TailwindCSS","tags":["tailwind-css"],"text":"Title: Style children based on their data attributes in TailwindCSS\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have the following HTML\n\n```\n\n \n\n \n\n \n\n \n\n```\n\nThe behaviour I am looking for, is that when the `p` element's `data-a` is true, a the font becomes bold.\n\nI tried applying `[&>a]:data-[a=\"true\"]:font-bold` to the parent `div` tag, but it tries to detect if the parent has data-a, and applied `font-bold` to all children when it is true. How do I change the \"order of operations\" here?\n\n========================================\n\nTop Answer:\nYou should also be able to swap the order of the Tailwind operators:\n\n`[&>svg]:data-[active=true]:...` becomes `[data-active=true] > svg`\n\n`data-[active=true]:[&>svg]:...` becomes `> svg[data-active=true]`\n\n========================================\n\nCode:\n```html\n<div>\n <p data-a=\"true\"></p>\n <p data-a=\"false\"></p>\n <p data-a=\"false\"></p>\n <p data-a=\"false\"></p>\n</div>\n```\n\n```text\np\n```\n\n```text\ndata-a\n```\n\n```text\n[&>a]:data-[a=\"true\"]:font-bold\n```\n\n```text\ndiv\n```\n\n```text\nfont-bold\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"[&>[data-a=true]>a]:font-bold\">\n <p data-a=\"true\">\n <a>Foo</a>\n <span>Bar</span>\n </p>\n <p data-a=\"false\">\n <a>Foo</a>\n <span>Bar</span>\n </p>\n</div>\n```\n\n```text\n[&>[data-a=true]>a]:\n```\n\n```text\n<div>\n```\n\n```text\n[&>svg]:data-[active=true]:...\n```\n\n```text\n[data-active=true] > svg\n```\n\n```text\ndata-[active=true]:[&>svg]:...\n```\n\n```text\n> svg[data-active=true]\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":102,"estimatedTokens":382}}601{"id":"stack-72807273","source":"stackoverflow","questionId":72807273,"title":"Tailwind css apply order","tags":["css","tailwind-css"],"text":"Title: Tailwind css apply order\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to know tailwind css apply order. Or it can be issue of general css order.\n\nHowever, when I put 2 classes, `bg-gray-50` and `bg-gray-500`, `bg-gray-50` class is applied only. It doesn't matter for order of two classes.\nSo, `bg-gray-50 bg-gray-500` and `bg-gray-500 bg-gray-50` has same effect.\nAlways `bg-gray-50 class` is applied only.\n\nWhy does it work and how can I apply `bg-gray-500` class?\n\n========================================\n\nTop Answer:\njust add Important modifier `!bg-gray-500`\n\nhttps://tailwindcss.com/docs/configuration#important-modifier\n\n========================================\n\nCode:\n```text\nbg-gray-50\n```\n\n```text\nbg-gray-500\n```\n\n```text\nbg-gray-50\n```\n\n```text\nbg-gray-50 bg-gray-500\n```\n\n```text\nbg-gray-500 bg-gray-50\n```\n\n```text\nbg-gray-50 class\n```\n\n```text\nbg-gray-500\n```\n\n```text\n// tailwind.css\n.bg-gray-50 { background-color: #E9E6E6 }\n.bg-gray-500 { background-color: #DCD7D7 }\n```\n\n```text\nbg-gray-50\n```\n\n```text\nbg-gray-500\n```\n\n```text\nbg-gray-500\n```\n\n```text\nbackgroundColor\n```\n\n```text\nstyle\n```\n\n```text\nstyle={{backgroundColor: '#DCD7D7'}}\n```\n\n```text\n!bg-gray-500\n```\n\n========================================\n\nComments:\n- Thanks for your answer. Is there any other solution? I am using tailwind css in React, and I want to customize style by passing classnames.\n- you can add `!important` to class you define in file `tailwind.config.js`\n- @Yerycs One thing you can do is to conditionally add only one of the classes. Or you could set inline css style if you want to override tailwind class.\n- This approach sooo defeats the purpose of TW! ... It's one of the key issues with this framewark actually. Just because something happens to be defined after in the resulting css! How can we control that?!","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":92,"estimatedTokens":462}}602{"id":"stack-69264976","source":"stackoverflow","questionId":69264976,"title":"Can't display markdown on NEXTJS","tags":["reactjs","next.js","markdown","tailwind-css","react-markdown"],"text":"Title: Can't display markdown on NEXTJS\nTags: reactjs, next.js, markdown, tailwind-css, react-markdown\nSource: Stack Overflow\n\nQuestion:\nHaloo, hope you have a great day!\n\nI'm in the middle of learning something about markdown on react, i already success using react markdown editor, but now, when i want to display it, i got stuck, i'm using `react-markdown` and `NEXTJS`, and here's the problem:\n\nimporting the `library`:\n\n```\nconst ReactMarkdown = dynamic(\n () => import(\"react-markdown\").then((mod) => mod.default),\n { ssr: false }\n);\nconst rehypeRaw = dynamic(\n () => import(\"rehype-raw\").then((mod) => mod.default),\n { ssr: false }\n);\nconst remarkGfm = dynamic(\n () => import(\"remark-gfm\").then((mod) => mod.default),\n { ssr: false }\n);\n```\n\ni have markdown look like this:\n\n```\nconst [value, setValue] = useState(\"# A demo of `react-markdown`\");\n```\n\nand this is my div\n\n```\n\n \n\n```\n\nand when i refresh my page, i got this:\n\nhttps://i.sstatic.net/r1zPj.png\n\nthat's not `H1`, and the `code tag` seems didn't work, **BUT** when i'm using bold:\n\n```\nconst [value, setValue] = useState(\"# A **demo** of `react-markdown`\");\n```\n\nthe bold is being display..\n\nhttps://i.sstatic.net/2Qkti.png\n\nand at this point, idk why this happend, can somebody help me?\n\n========================================\n\nCode:\n```text\nconst ReactMarkdown = dynamic(\n () => import(\"react-markdown\").then((mod) => mod.default),\n { ssr: false }\n);\nconst rehypeRaw = dynamic(\n () => import(\"rehype-raw\").then((mod) => mod.default),\n { ssr: false }\n);\nconst remarkGfm = dynamic(\n () => import(\"remark-gfm\").then((mod) => mod.default),\n { ssr: false }\n);\n```\n\n```text\nconst [value, setValue] = useState(\"# A demo of `react-markdown`\");\n```\n\n```text\n<div className=\"container mx-auto px-0 lg:px-40 pt-6 pb-8 sm:pt-14 sm:pb-16 md:pt-14 md:pb-16 min-h-screen\">\n <ReactMarkdown\n children={value}\n remarkPlugins={[remarkGfm]}\n />\n</div>\n```\n\n```text\nconst [value, setValue] = useState(\"# A **demo** of `react-markdown`\");\n```\n\n```text\nreact-markdown\n```\n\n```text\nNEXTJS\n```\n\n```text\nlibrary\n```\n\n```text\nH1\n```\n\n```text\ncode tag\n```\n\n```text\n// tailwindcss.config.js\nmodule.exports = {\n plugins: [require('@tailwindcss/typography'), (...)],\n ...\n}\n```\n\n```text\n<div className=\"prose ...\">(...)</div>\n```\n\n```text\nconst ReactMarkdown = dynamic(() => import(\"react-markdown\"), { ssr: false });\n```\n\n```text\nh1\n```\n\n```text\n@tailwindcss/typography\n```\n\n```text\ntailwindcss.config.js\n```\n\n```text\nprose\n```\n\n```text\nNext.js\n```\n\n```text\nthen\n```\n\n```text\ndefault\n```\n\n```text\nthen\n```\n\n========================================\n\nComments:\n- Dudeeee, you were right!!! it is because of tailwindcss, i need to export tailwind/typography to make it h1, butt, i need ask another thing, i'm already importing all the css, include the table css, but, why my table didn't appear? even tho i just using the default table still didn't appear, i think this is not because of the css anymore, because all the css (h1, a, blockquotes, etc) is perfectly appear, i think this is because of `another library` that `react-markdown` needs, am i right? just imported `remarkGfm` still didn't work..\n- Okeee nevermind, solved! just change `remarkGfm` from dynamic import to legacy import\n- TypeScript is not happy with this dynamic import","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":20,"totalLines":165,"estimatedTokens":831}}603{"id":"stack-70361974","source":"stackoverflow","questionId":70361974,"title":"Upgrade tailwind v2 to v3 TypeError: Cannot read property","tags":["javascript","upgrade","tailwind-css"],"text":"Title: Upgrade tailwind v2 to v3 TypeError: Cannot read property\nTags: javascript, upgrade, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have the guide to upgrade on tailwind https://tailwindcss.com/docs/upgrade-guide.\n\nBut I know get an error on my ionic angular app\n\n```\nTypeError: Cannot read property '700' of undefined\n```\n\n========================================\n\nCode:\n```text\nTypeError: Cannot read property '700' of undefined\n```\n\n```text\nnpm install -D @tailwindcss/typography@latest \\\n@tailwindcss/forms@latest\n```\n\n========================================\n\nComments:\n- Don't forget forms also!: 'npm i @tailwindcss/forms@latest' Source: github.com/tailwindlabs/tailwindcss/issues/6398","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":29,"estimatedTokens":176}}604{"id":"stack-63922017","source":"stackoverflow","questionId":63922017,"title":"margin of an element at specific breakpoints doesn't work in Tailwind","tags":["css","plugins","themes","next.js","tailwind-css"],"text":"Title: margin of an element at specific breakpoints doesn't work in Tailwind\nTags: css, plugins, themes, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI was trying to set margin of an `div` element at specific breakpoints by adding a `{screen}: prefix` but it won't work.\nWhat I tried is below;\n\n```\n\n \n \n {children}\n \n \n\n```\n\nInspecting mode, I could identify that only `my-8` class works.\n\nhttps://i.sstatic.net/SOTdR.png\n\nAll classes of Tailwind work well and `flex` for responsive works as well, but the margin(padding) for responsive doesn't work.\nI use Next.js and Tailwind CSS.\n\n========================================\n\nCode:\n```text\n<div className={'flex justify-center'}>\n <div className={'w-full my-8 sm:my-20 md:my-48'}>\n <div {...props}>\n {children}\n </div>\n </div>\n</div>\n```\n\n```text\ndiv\n```\n\n```text\n{screen}: prefix\n```\n\n```text\nmy-8\n```\n\n```text\nflex\n```\n\n```text\n// tailwind.config.js\n module.exports = {\n variants: {\n // ...\n- margin: ['hover'],\n+ margin: ['responsive', 'hover'],\n }\n }\n```\n\n```text\nvariants\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- So you did try other stuff like `sm:bg-red-500` and it worked but margin and padding don't? Maybe your PurgeCss setup isn't correct?\n- Thank you for your comment. I found the answer on my own.","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":78,"estimatedTokens":339}}605{"id":"stack-66158031","source":"stackoverflow","questionId":66158031,"title":"Less wont apply Tailwind CSS classname with dot (.)","tags":["less","tailwind-css"],"text":"Title: Less wont apply Tailwind CSS classname with dot (.)\nTags: less, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow to apply a Tailwind CSS classname that includes a dot with Less? Escaping (\\) didn't worked.\nI can use this code without any problems in Sass:\n\n```\n@apply py-0.5;\n```\n\nSyntax error: The `0.5` class does not exist. If you're sure that\n`0.5` exists, make sure that any `@import` statements are being\nproperly processed before Tailwind CSS sees your CSS, as `@apply` can\nonly be used for classes in the same CSS tree. (7:4)\n\nOther Tailwind CSS classnames just work fine.\n\n========================================\n\nCode:\n```text\n@apply py-0.5;\n```\n\n```text\n0.5\n```\n\n```text\n0.5\n```\n\n```text\n@import\n```\n\n```text\n@apply\n```\n\n```css\n@apply ~\"py-0.5\";\n```\n\n```text\n~\n```\n\n========================================\n\nComments:\n- Thanks a lot! I have googled it, no idea what happened (also it's on the first place!). Hope this question/topic will help someone else too =) Thanks again!\n- Do you know how to do the same in SCSS ?\n- @Tonio This might be relevant to you: sass-lang.com/documentation/values/strings#escapes.","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":56,"estimatedTokens":283}}606{"id":"stack-71946463","source":"stackoverflow","questionId":71946463,"title":"Rails 7 - Using daisyUI with importmap-rails","tags":["ruby-on-rails","ruby","tailwind-css","ruby-on-rails-7","daisyui"],"text":"Title: Rails 7 - Using daisyUI with importmap-rails\nTags: ruby-on-rails, ruby, tailwind-css, ruby-on-rails-7, daisyui\nSource: Stack Overflow\n\nQuestion:\nI'm trying to build a new Rails 7 project, testing out Hotwire and some of the new default stuff. I'm excited by the idea of leaving Webpacker (and maybe React) behind. But I'm having trouble figuring out how to get daisyUI working with Tailwind in the new toolchain.\n\nI created the app with `--css tailwind`. I ran `./bin/importmap pin daisyui`, which added a whole bunch of lines to `config/importmap.rb`. And I added `require(\"daisyui\")` to the array of plugins in `config/tailwind.config.js.`\n\nBut when I run `./bin/dev,` I get this:\n\n```\n13:30:55 web.1 | started with pid 36044\n13:30:55 css.1 | started with pid 36045\n13:30:56 web.1 | => Booting Puma\n13:30:56 web.1 | => Rails 7.0.2.3 application starting in development\n13:30:56 web.1 | => Run `bin/rails server --help` for more startup options\n13:30:56 web.1 | Puma starting in single mode...\n13:30:56 web.1 | * Puma version: 5.6.4 (ruby 3.1.1-p18) (\"Birdie's Version\")\n13:30:56 web.1 | * Min threads: 5\n13:30:56 web.1 | * Max threads: 5\n13:30:56 web.1 | * Environment: development\n13:30:56 web.1 | * PID: 36044\n13:30:56 web.1 | * Listening on http://127.0.0.1:3000\n13:30:56 web.1 | * Listening on http://[::1]:3000\n13:30:56 web.1 | Use Ctrl-C to stop\n13:30:57 css.1 | node:internal/modules/cjs/loader:933\n13:30:57 css.1 | const err = new Error(message);\n13:30:57 css.1 | ^\n13:30:57 css.1 |\n13:30:57 css.1 | Error: Cannot find module 'daisyui'\n13:30:57 css.1 | Require stack:\n13:30:57 css.1 | - /Users/phillip/Dev/test_project/config/tailwind.config.js\n13:30:57 css.1 | - /snapshot/tailwindcss/lib/cli.js\n13:30:57 css.1 | - /snapshot/tailwindcss/standalone-cli/standalone.js\n13:30:57 css.1 | 1) If you want to compile the package/file into executable, please pay attention to compilation warnings and specify a literal in 'require' call. 2) If you don't want to compile the package/file into executable and want to 'require' it from filesystem (likely plugin), specify an absolute path in 'require' call using process.cwd() or process.execPath.\n13:30:57 css.1 | at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)\n13:30:57 css.1 | at Function._resolveFilename (pkg/prelude/bootstrap.js:1819:46)\n13:30:57 css.1 | at Function.Module._load (node:internal/modules/cjs/loader:778:27)\n13:30:57 css.1 | at Module.require (node:internal/modules/cjs/loader:1005:19)\n13:30:57 css.1 | at Module.require (pkg/prelude/bootstrap.js:1719:31)\n13:30:57 css.1 | at Module.require (/snapshot/tailwindcss/standalone-cli/standalone.js:21:22)\n13:30:57 css.1 | at require (node:internal/modules/cjs/helpers:94:18)\n13:30:57 css.1 | at Object. (/Users/phillip/Dev/test_project/config/tailwind.config.js:20:5)\n13:30:57 css.1 | at Module._compile (node:internal/modules/cjs/loader:1101:14)\n13:30:57 css.1 | at Module._compile (pkg/prelude/bootstrap.js:1758:32) {\n13:30:57 css.1 | code: 'MODULE_NOT_FOUND',\n13:30:57 css.1 | requireStack: [\n13:30:57 css.1 | '/Users/phillip/Dev/test_project/config/tailwind.config.js',\n13:30:57 css.1 | '/snapshot/tailwindcss/lib/cli.js',\n13:30:57 css.1 | '/snapshot/tailwindcss/standalone-cli/standalone.js'\n13:30:57 css.1 | ],\n13:30:57 css.1 | pkg: true\n13:30:57 css.1 | }\n13:30:57 css.1 | exited with code 0\n13:30:57 system | sending SIGTERM to all processes\n13:30:57 web.1 | - Gracefully stopping, waiting for requests to finish\n13:30:57 web.1 | Exiting\n13:30:57 web.1 | terminated by SIGTERM\n```\n\nI'm sure what I'm missing is very basic, but what is it?\n\nI can tell you it's *not* adding either `import \"daisyui\"` or `import \"daisy\"` to `app/javascripts/application.js`.\n\n========================================\n\nTop Answer:\nFor me, the problem was solved by adding daisyui via npm and then just putting it into requirements of tailwind.config.js as it was mentioned at the official website. It seems like there is no way of using it withimportmaps right now.\n\n`module.exports = {plugins: [require(\"daisyui\")]}`\n\n========================================\n\nCode:\n```text\n13:30:55 web.1 | started with pid 36044\n13:30:55 css.1 | started with pid 36045\n13:30:56 web.1 | => Booting Puma\n13:30:56 web.1 | => Rails 7.0.2.3 application starting in development\n13:30:56 web.1 | => Run `bin/rails server --help` for more startup options\n13:30:56 web.1 | Puma starting in single mode...\n13:30:56 web.1 | * Puma version: 5.6.4 (ruby 3.1.1-p18) (\"Birdie's Version\")\n13:30:56 web.1 | * Min threads: 5\n13:30:56 web.1 | * Max threads: 5\n13:30:56 web.1 | * Environment: development\n13:30:56 web.1 | * PID: 36044\n13:30:56 web.1 | * Listening on http://127.0.0.1:3000\n13:30:56 web.1 | * Listening on http://[::1]:3000\n13:30:56 web.1 | Use Ctrl-C to stop\n13:30:57 css.1 | node:internal/modules/cjs/loader:933\n13:30:57 css.1 | const err = new Error(message);\n13:30:57 css.1 | ^\n13:30:57 css.1 |\n13:30:57 css.1 | Error: Cannot find module 'daisyui'\n13:30:57 css.1 | Require stack:\n13:30:57 css.1 | - /Users/phillip/Dev/test_project/config/tailwind.config.js\n13:30:57 css.1 | - /snapshot/tailwindcss/lib/cli.js\n13:30:57 css.1 | - /snapshot/tailwindcss/standalone-cli/standalone.js\n13:30:57 css.1 | 1) If you want to compile the package/file into executable, please pay attention to compilation warnings and specify a literal in 'require' call. 2) If you don't want to compile the package/file into executable and want to 'require' it from filesystem (likely plugin), specify an absolute path in 'require' call using process.cwd() or process.execPath.\n13:30:57 css.1 | at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)\n13:30:57 css.1 | at Function._resolveFilename (pkg/prelude/bootstrap.js:1819:46)\n13:30:57 css.1 | at Function.Module._load (node:internal/modules/cjs/loader:778:27)\n13:30:57 css.1 | at Module.require (node:internal/modules/cjs/loader:1005:19)\n13:30:57 css.1 | at Module.require (pkg/prelude/bootstrap.js:1719:31)\n13:30:57 css.1 | at Module.require (/snapshot/tailwindcss/standalone-cli/standalone.js:21:22)\n13:30:57 css.1 | at require (node:internal/modules/cjs/helpers:94:18)\n13:30:57 css.1 | at Object.<anonymous> (/Users/phillip/Dev/test_project/config/tailwind.config.js:20:5)\n13:30:57 css.1 | at Module._compile (node:internal/modules/cjs/loader:1101:14)\n13:30:57 css.1 | at Module._compile (pkg/prelude/bootstrap.js:1758:32) {\n13:30:57 css.1 | code: 'MODULE_NOT_FOUND',\n13:30:57 css.1 | requireStack: [\n13:30:57 css.1 | '/Users/phillip/Dev/test_project/config/tailwind.config.js',\n13:30:57 css.1 | '/snapshot/tailwindcss/lib/cli.js',\n13:30:57 css.1 | '/snapshot/tailwindcss/standalone-cli/standalone.js'\n13:30:57 css.1 | ],\n13:30:57 css.1 | pkg: true\n13:30:57 css.1 | }\n13:30:57 css.1 | exited with code 0\n13:30:57 system | sending SIGTERM to all processes\n13:30:57 web.1 | - Gracefully stopping, waiting for requests to finish\n13:30:57 web.1 | Exiting\n13:30:57 web.1 | terminated by SIGTERM\n```\n\n```text\n--css tailwind\n```\n\n```text\n./bin/importmap pin daisyui\n```\n\n```text\nconfig/importmap.rb\n```\n\n```text\nrequire(\"daisyui\")\n```\n\n```text\nconfig/tailwind.config.js.\n```\n\n```text\n./bin/dev,\n```\n\n```text\nimport \"daisyui\"\n```\n\n```text\nimport \"daisy\"\n```\n\n```text\napp/javascripts/application.js\n```\n\n```text\n<%= stylesheet_link_tag \"https://cdn.jsdelivr.net/npm/daisyui@2.14.1/dist/full.css\" %>\n```\n\n```text\nlayouts/application.html.erb\n```\n\n```text\nmodule.exports = {plugins: [require(\"daisyui\")]}\n```\n\n========================================\n\nComments:\n- third party plugins cannot be used with standalone tailwind which is used by `tailwindcss-rails`. switch to `cssbundling-rails`\n- In this case, it's simpler to just include daisyUI through a stylesheet link to the CDN.","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":178,"estimatedTokens":1971}}607{"id":"stack-65497300","source":"stackoverflow","questionId":65497300,"title":"Gatsby \"variantsValue is not iterable\" error after configuring Tailwind 2 variants?","tags":["gatsby","tailwind-css"],"text":"Title: Gatsby \"variantsValue is not iterable\" error after configuring Tailwind 2 variants?\nTags: gatsby, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using Tailwind 2 with Gatsby.\n\nI want to apply the class `odd:flex-row-reverse`, but the Tailwind docs say:\n\nBy default, the odd-child variant is not enabled for any core plugins.\n\nSo I've configured the \"odd-child\" variant to work with `marginLeft`:\n\n```\n// tailwind.config.js\n\nmodule.exports = {\n variants: {\n extend: {\n flexDirection: ['odd'],\n marginLeft: ['odd'], // This line causes the error\n },\n },\n ...\n}\n```\n\nBut for some reason, I'm getting the following errors in the console while using `gatsby develop`:\n\n```\nerror Generating development JavaScript bundle failed\n\nvariantsValue is not iterable\nfailed Re-building development bundle - 0.232s\n```\n\nEverything runs fine if I remove the `marginLeft` line.\n\nWhy does the `marginLeft` variant cause errors?\n\n========================================\n\nCode:\n```js\n// tailwind.config.js\n\nmodule.exports = {\n variants: {\n extend: {\n flexDirection: ['odd'],\n marginLeft: ['odd'], // This line causes the error\n },\n },\n ...\n}\n```\n\n```text\nerror Generating development JavaScript bundle failed\n\nvariantsValue is not iterable\nfailed Re-building development bundle - 0.232s\n```\n\n```text\nodd:flex-row-reverse\n```\n\n```text\nmarginLeft\n```\n\n```text\ngatsby develop\n```\n\n```text\nmarginLeft\n```\n\n```text\nmarginLeft\n```\n\n```js\n// tailwind.config.js\n\nmodule.exports = {\n variants: {\n extend: {\n flexDirection: ['odd'],\n margin: ['odd'], // `margin` instead of `marginLeft`\n },\n },\n ...\n}\n```\n\n```text\nmarginLeft\n```\n\n```text\nmargin\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":105,"estimatedTokens":418}}608{"id":"stack-71128589","source":"stackoverflow","questionId":71128589,"title":"How to change default style of React Phone Number input field","tags":["css","reactjs","tailwind-css","react-hook-form"],"text":"Title: How to change default style of React Phone Number input field\nTags: css, reactjs, tailwind-css, react-hook-form\nSource: Stack Overflow\n\nQuestion:\nHow can I override the style of the react-phone-number-input component using https://www.npmjs.com/package/react-phone-number-input?\n\nAlong with this component, I'm using a React Hook Form and Tailwind CSS. Unfortunately, the background and border colors do not change, and the border width is too wide. I'm not sure how I can change the style.\n\nhttps://i.sstatic.net/T4l0C.png\n\n```\n//React hook form\n const {\n register,\n handleSubmit,\n watch,\n formState: { errors },\n control,\n } = useForm();\n\n //Component\n \n```\n\n========================================\n\nTop Answer:\nFound this while trying to solve the same problem myself and figured I'd put this here for anyone else coming from Google.\n\nI am using the PhoneInputWithCountry from 'react-phone-number-input/react-hook-form' and Tailwind. The easiest way I found to style the input itself was by passing some Tailwind classes to the numberInputProps as below.\n\n```\n\n```\n\nExact documentation here, as well as explanations of all of the other props the input will accept. I found this much easier than providing my own custom input. Hopefully this helps :)\n\n========================================\n\nCode:\n```text\n//React hook form\n const {\n register,\n handleSubmit,\n watch,\n formState: { errors },\n control,\n } = useForm();\n\n\n //Component\n <PhoneInputWithCountry\n international\n name=\"phone\"\n control={control}\n defaultCountry=\"BD\"\n country=\"BD\"\n id=\"phone\"\n className=\"rounded rounded-full bg-gray-100 py-1 px-2 text-gray-700 shadow-sm border-green\"\n />\n```\n\n```text\n<PhoneInputWithCountry\n style={{borderRadius: 3px, ...}}\n ...\n/>\n```\n\n```text\nstyle\n```\n\n```text\nimport 'react-phone-number-input/style.css'\n```\n\n```text\n<PhoneInputWithCountry\n name=\"phone\" // whatever your name for react-hook-form is\n control={control} // from react-hook-form\n numberInputProps={{\n className: 'rounded-md px-4 focus:outline-none...' // my Tailwind classes\n }}\n/>\n```\n\n```js\n<div>\n <label htmlFor=\"phone\" className=\"block text-sm font-medium text-gray-700\">Phone Number: \n <PhoneInput \n id=\"phone\" \n name=\"phone\" \n country={'us'}\n value={phoneNumber} \n onChange={handleChange}\n inputProps={{\n required:true,\n className:\"bg-opacity-50 text-gray-950 mt-2 block border rounded-md border-gray-700 h-[48px] w-[450px] pl-[45px] pr-[12px] justify-between shadow-sm focus:border-gray-300 focus:ring focus:ring-gray-200\"\n}}\n \n/>\n</label>\n```\n\n```text\n<select name=\"phoneCountry\" aria-label=\"Phone number country\" class=\"PhoneInputCountrySelect\"></select>\n```\n\n```text\n.PhoneInputCountrySelect { \n width: 100%; \n border: none; \n background: white; \n font-size: 14px; \n padding: 8px; \n color: #333; }\n```\n\n========================================\n\nComments:\n- As you can see, it only affects the input component's outer side, not its inner side. SS Link : i.imgur.com/go7oh7d.png Code SS Link: i.imgur.com/ICY79yU.png\n- You can view the classes by inspecting the element. And write custom css for that class\n- @Maneth It still affects the whole component not the inner input component. Can you please show example of what you mean?\n- As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":128,"estimatedTokens":916}}609{"id":"stack-75919757","source":"stackoverflow","questionId":75919757,"title":"Autofill input in dark mode with Tailwind","tags":["css","reactjs","sass","tailwind-css","darkmode"],"text":"Title: Autofill input in dark mode with Tailwind\nTags: css, reactjs, sass, tailwind-css, darkmode\nSource: Stack Overflow\n\nQuestion:\nI had a problem with ugly colour in input after filling it with remembered password using Dark Mode.\nIn light mode it was yellow, not that bad.\n\nhttps://i.sstatic.net/1L39n.jpg\n\nhttps://i.sstatic.net/4EbJE.jpg\n\nI found some answers using `webkit-autofill` in SO here, but had problem with implementing it in with tailwind `dark:` prop and with sass in `global.scss` file.\n\n========================================\n\nTop Answer:\nThanks for the solution, works great! For those not using SCC here is a CSS solution,\n\n```\n@layer components {\n .inputDarkModeOverride:-webkit-autofill {\n box-shadow: 0 0 0 30px #1c1c1d inset;\n }\n\n .inputDarkModeOverride:-webkit-autofill:hover {\n box-shadow: 0 0 0 30px #1c1c1d inset;\n }\n\n .inputDarkModeOverride:-webkit-autofill:focus {\n box-shadow: 0 0 0 30px #1c1c1d inset;\n }\n\n .inputDarkModeOverride:-webkit-autofill:active {\n box-shadow: 0 0 0 30px #1c1c1d inset;\n }\n}\n```\n\nTo target just input elements with dark mode class dark:bg-slate-700 for my theme in TailwindCSS, I did this:\n\n```\n@media (prefers-color-scheme: dark) {\n input.dark\\:bg-slate-700:-webkit-autofill {\n box-shadow: 0 0 0 30px rgb(51 65 85) inset;\n -webkit-text-fill-color: rgb(203 213 225);\n }\n input.dark\\:bg-slate-700:-webkit-autofill:hover {\n box-shadow: 0 0 0 30px rgb(51 65 85) inset;\n -webkit-text-fill-color: rgb(203 213 225);\n }\n input.dark\\:bg-slate-700:-webkit-autofill:focus {\n box-shadow: 0 0 0 30px rgb(51 65 85) inset;\n -webkit-text-fill-color: rgb(203 213 225);\n }\n input.dark\\:bg-slate-700:-webkit-autofill:active {\n box-shadow: 0 0 0 30px rgb(51 65 85) inset;\n -webkit-text-fill-color: rgb(203 213 225);\n }\n}\n```\n\n========================================\n\nCode:\n```text\nwebkit-autofill\n```\n\n```text\ndark:\n```\n\n```text\nglobal.scss\n```\n\n```text\n@layer components {\n .inputDarkModeOverride {\n &:-webkit-autofill {\n box-shadow: 0 0 0 30px #1c1c1d inset;\n }\n\n &:-webkit-autofill:hover {\n box-shadow: 0 0 0 30px #1c1c1d inset;\n }\n\n &:-webkit-autofill:focus {\n box-shadow: 0 0 0 30px #1c1c1d inset;\n }\n\n &:-webkit-autofill:active {\n box-shadow: 0 0 0 30px #1c1c1d inset;\n }\n }\n}\n```\n\n```text\nclassName={`${styles.input} dark:inputDarkModeOverride`}\n```\n\n```text\n@layer components {\n .inputDarkModeOverride:-webkit-autofill {\n box-shadow: 0 0 0 30px #1c1c1d inset;\n }\n\n .inputDarkModeOverride:-webkit-autofill:hover {\n box-shadow: 0 0 0 30px #1c1c1d inset;\n }\n\n .inputDarkModeOverride:-webkit-autofill:focus {\n box-shadow: 0 0 0 30px #1c1c1d inset;\n }\n\n .inputDarkModeOverride:-webkit-autofill:active {\n box-shadow: 0 0 0 30px #1c1c1d inset;\n }\n}\n```\n\n```text\n@media (prefers-color-scheme: dark) {\n input.dark\\:bg-slate-700:-webkit-autofill {\n box-shadow: 0 0 0 30px rgb(51 65 85) inset;\n -webkit-text-fill-color: rgb(203 213 225);\n }\n input.dark\\:bg-slate-700:-webkit-autofill:hover {\n box-shadow: 0 0 0 30px rgb(51 65 85) inset;\n -webkit-text-fill-color: rgb(203 213 225);\n }\n input.dark\\:bg-slate-700:-webkit-autofill:focus {\n box-shadow: 0 0 0 30px rgb(51 65 85) inset;\n -webkit-text-fill-color: rgb(203 213 225);\n }\n input.dark\\:bg-slate-700:-webkit-autofill:active {\n box-shadow: 0 0 0 30px rgb(51 65 85) inset;\n -webkit-text-fill-color: rgb(203 213 225);\n }\n}\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":143,"estimatedTokens":866}}610{"id":"stack-67382005","source":"stackoverflow","questionId":67382005,"title":"How to use dynamic tailwind classes with JS switch statement and pass them correctly in Vue?","tags":["javascript","vue.js","switch-statement","tailwind-css"],"text":"Title: How to use dynamic tailwind classes with JS switch statement and pass them correctly in Vue?\nTags: javascript, vue.js, switch-statement, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am a beginner to Vue JS and I'm trying to create a function for assigning corresponding colours to the order statuses. I would like to use switch-statement to achieve this, that would grab the value of order status and pass it to the getStatusColour function(), like this:\n\n```\nconst getStatusColour = (orderStatus) => {\n let statusColour = \"\";\n switch (orderStatus) {\n case \"new\": \n statusColour = \"bg-green-100 text-green-900\";\n break;\n case \"preparing\": \n statusColour = \"bg-yellow-400 text-yellow-900\";\n break;\n case \"ready\":\n statusColour = \"bg-blue-200 text-blue-800\";\n break;\n case \"delivered\":\n statusColour = \"bg-green-300 text-green-800\";\n break;\n case \"failed\": \n statusColour = \"bg-red-400 text-red-900\";\n break;\n default:\n statusColour = \"bg-gray-100 text-gray-800\"\n }\n return statusColour;\n}\n```\n\nThen in the `Index.vue` file I have `export default { getStatusColour }`, I guess that's should be a mistake here.\n\nAnd then in the template I call it like this:\n\n```\n{{ order.status }}\n```\n\nBut I keep getting `Uncaught (in promise) TypeError: _ctx.getStatusColour is not a function` error. I'll appreciate any help here.\n\n========================================\n\nTop Answer:\nThe answer of kissu should fix your problem, but I would recomend use computed properties.\nThis way you can write less code and also you can create a default state which handles it when the input of `color` or `variant` is invalid.\n\n```\n\nexport default {\nprops: {\n color: {\n type: String,\n default: 'primary',\n },\n variant: {\n type: String,\n default: 'enabled',\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n},\ncomputed: {\n class_type: function(){\n switch(this.variant)\n case \"enabled\": \n return `disabled:bg-${this.color}-500 hover:bg-${this.color}-700 bg-${this.color}-500 text-${this.color}-500`\n case \"outlined\":\n return `hover:bg-${this.color}-a12 text-${this.color}-500`\n case \"reversed\": \n return `text-${this.color}-500`\n default: \n console.error(\"you didn't put a proper variant to this component\")\n }\n}\n\n```\n\n========================================\n\nCode:\n```js\nconst getStatusColour = (orderStatus) => {\n let statusColour = \"\";\n switch (orderStatus) {\n case \"new\": \n statusColour = \"bg-green-100 text-green-900\";\n break;\n case \"preparing\": \n statusColour = \"bg-yellow-400 text-yellow-900\";\n break;\n case \"ready\":\n statusColour = \"bg-blue-200 text-blue-800\";\n break;\n case \"delivered\":\n statusColour = \"bg-green-300 text-green-800\";\n break;\n case \"failed\": \n statusColour = \"bg-red-400 text-red-900\";\n break;\n default:\n statusColour = \"bg-gray-100 text-gray-800\"\n }\n return statusColour;\n}\n```\n\n```html\n<span :class=\"getStatusColour(order.status)\">{{ order.status }}</span>\n```\n\n```text\nIndex.vue\n```\n\n```text\nexport default { getStatusColour }\n```\n\n```text\nUncaught (in promise) TypeError: _ctx.getStatusColour is not a function\n```\n\n```js\nconst getStatusColour = (orderStatus) => {\n let statusColour = ''\n switch (orderStatus) {\n case 'new':\n statusColour = 'bg-green-100 text-green-900'\n break\n case 'preparing':\n statusColour = 'bg-yellow-400 text-yellow-900'\n break\n case 'ready':\n statusColour = 'bg-blue-200 text-blue-800'\n break\n case 'delivered':\n statusColour = 'bg-green-300 text-green-800'\n break\n case 'failed':\n statusColour = 'bg-red-400 text-red-900'\n break\n default:\n statusColour = 'bg-gray-100 text-gray-800'\n }\n return statusColour\n}\n\nexport { getStatusColour }\n```\n\n```html\n<template>\n <div>\n <div :class=\"getStatusColour(order.status)\">\n This div do have the correct: `bg-green-100 text-green-900` on it\n </div>\n </div>\n</template>\n\n<script>\nimport { getStatusColour } from './utils/test'\n\nexport default {\n data() {\n return {\n order: {\n status: 'new',\n },\n }\n },\n methods: {\n getStatusColour,\n },\n}\n</script>\n```\n\n```html\n<button\n class=\"flex items-center w-auto p-4 text-center ...\"\n :class=\"[\n callToAction.types[color][variant],\n { 'opacity-50 cursor-not-allowed shadow-none': disabled },\n ]\"\n>\n Nice flexible button\n</button>\n\n<script>\nexport default {\nprops: {\n color: {\n type: String,\n default: 'primary',\n },\n variant: {\n type: String,\n default: 'enabled',\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n},\n\ndata() {\n return {\n callToAction: {\n types: {\n primary: {\n enabled: 'disabled:bg-primary-500 hover:bg-primary-700 bg-primary-500 text-primary-500',\n outlined: 'hover:bg-primary-a12 text-primary-500',\n reversed: 'text-primary-500',\n },\n secondary: {\n enabled: 'disabled:bg-secondary-500 hover:bg-secondary-700 bg-secondary-500 text-secondary-500',\n outlined: 'hover:bg-secondary-a12 text-secondary-500',\n reversed: 'text-secondary-500',\n },\n tertiary: {\n enabled: 'disabled:bg-tertiary-500 hover:bg-tertiary-700 bg-tertiary-500 text-tertiary-500',\n outlined: 'hover:bg-tertiary-a12 text-tertiary-500',\n reversed: 'text-tertiary-500',\n },\n bluegray: {\n enabled: 'disabled:bg-bluegray-500 hover:bg-bluegray-700 bg-bluegray-500 text-bluegray-500',\n outlined: 'hover:bg-bluegray-a12 text-bluegray-500',\n reversed: 'text-bluegray-500',\n },\n error: {\n enabled: 'disabled:bg-error-500 hover:bg-error-700 bg-error-500 text-error-500',\n outlined: 'hover:bg-error-a12 text-error-500',\n reversed: 'text-error-500',\n },\n },\n },\n }\n}\n</script>\n```\n\n```html\n<call-to-action color=\"tertiary\" variant=\"reversed\"></call-to-action>\n```\n\n```text\nutils/test.js\n```\n\n```text\nApp.vue\n```\n\n```text\ncallToAction.vue\n```\n\n```text\ncolor=\"primary\"\n```\n\n```text\nvariant=\"enabled\"\n```\n\n```text\n<button\n class=\"flex items-center w-auto p-4 text-center ...\"\n :class=\"[\n class_type,\n { 'opacity-50 cursor-not-allowed shadow-none': disabled },\n ]\"\n>\n\n<script>\nexport default {\nprops: {\n color: {\n type: String,\n default: 'primary',\n },\n variant: {\n type: String,\n default: 'enabled',\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n},\ncomputed: {\n class_type: function(){\n switch(this.variant)\n case \"enabled\": \n return `disabled:bg-${this.color}-500 hover:bg-${this.color}-700 bg-${this.color}-500 text-${this.color}-500`\n case \"outlined\":\n return `hover:bg-${this.color}-a12 text-${this.color}-500`\n case \"reversed\": \n return `text-${this.color}-500`\n default: \n console.error(\"you didn't put a proper variant to this component\")\n }\n}\n</script>\n```\n\n```text\ncolor\n```\n\n```text\nvariant\n```\n\n```text\n<script setup>\n const orderStatus = {\n default: 'bg-gray-100 text-gray-800'\n new: 'bg-green-100 text-green-90',\n preparing: 'bg-yellow-400 text-yellow-900',\n ready: 'bg-blue-200 text-blue-800'\n }\n\n defineProps({\n status: {\n type: String,\n default: orderStatus['default'],\n required: true\n }\n })\n</script>\n\n<template>\n <span :class=\"orderStatus[status]\">\n {{ status }}\n </span>\n</template>\n```\n\n========================================\n\nComments:\n- How do you import the function?\n- Yeah, tailwind, it's imported correctly and works well in other parts, so I assume the issue in calling this functions\n- Alright, once this one is solved, I'd show an alternative way of doing this with Tailwind. You will see if it suits your needs. :)\n- Glad that I helped you with your issue. I edited my answer with my way of doing things. Not sure if it may help anyhow or give some cool ideas for your own implementation.\n- this is not recommended, use safelist instead to achieve the same\n- You indeed cannot interpolate tailwind classes. tailwindcss.com/docs/content-configuration#dynamic-class-nam‌​es The computed may be an idea otherwise indeed.","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":18,"totalLines":353,"estimatedTokens":2065}}611{"id":"stack-72012643","source":"stackoverflow","questionId":72012643,"title":"Why aren't the Tailwind classes taking effect in my Vite React project?","tags":["reactjs","tailwind-css","postcss","vite"],"text":"Title: Why aren't the Tailwind classes taking effect in my Vite React project?\nTags: reactjs, tailwind-css, postcss, vite\nSource: Stack Overflow\n\nQuestion:\nI have a Vite React project that uses Tailwind via PostCSS. However, none of the classes are reflecting the the localhost. Below are the files in the project:\n\n**postcss.config.js:**\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n }\n}\n```\n\n**tailwind.config.js:**\n\n```\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n**App.js:**\n\n```\nconst App = () => {\n return (\n \n \n Hello world!\n \n \n )\n}\nexport default App\n```\n\nThis was all done following the instructions in the Tailwind documentation at https://tailwindcss.com/docs/installation/using-postcss.\n\nWhy doesn't it work?\n\n========================================\n\nTop Answer:\nThe reason for the error can be Unknown at rule @tailwindcss\n\nTo solve this you must download this extension\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n }\n}\n```\n\n```js\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nconst App = () => {\n return (\n <div className=\"App\">\n <h1 class=\"text-3xl font-bold underline\">\n Hello world!\n </h1>\n </div>\n )\n}\nexport default App\n```\n\n```js\nmodule.exports = {\n content: [\"./src/**/*.{html,js,jsx}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n{html,js} => {html,js,jsx}\n```\n\n========================================\n\nComments:\n- The problem is likely your filenames. They contain JSX so they should have the `.jsx` file extension (a new Vite + React scaffolded project would warn about this). Also, the Tailwind `content` config should include `.jsx`. See demo.","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":113,"estimatedTokens":477}}612{"id":"stack-78694270","source":"stackoverflow","questionId":78694270,"title":"Colon symbol in class names for tailwind break Pug files","tags":["vue.js","tailwind-css","pug"],"text":"Title: Colon symbol in class names for tailwind break Pug files\nTags: vue.js, tailwind-css, pug\nSource: Stack Overflow\n\nQuestion:\nI am creating a project in Vue where the HTML aspect of it is written in pug. When I add a tailwind class, (for example in this case I am trying to add the classes )\n\n```\n.w-16.md:w-32.lg:w-48\n```\n\nSince it is in pug and normally classes dont have the colon, but I am using tailwind where I am trying to make this responsive to different screen sizes. I get the following error:\n\n```\nUnexpected token `filter` expected `text`, `interpolated-code`, `code`, `:`, `slash`, `newline` or `eos`\n```\n\nIs there a way where I can replace all the instances of the colon with something else, in a way where tailwind can reade it and doesnt break the project? \"replacing ':' with '--' or something like that, where a class that was called .lg:w-48 can now be called .lg--w-48\"\n\n========================================\n\nCode:\n```text\n.w-16.md:w-32.lg:w-48\n```\n\n```text\nUnexpected token `filter` expected `text`, `interpolated-code`, `code`, `:`, `slash`, `newline` or `eos`\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n separator: '_',\n}\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n separator: '--',\n}\n```\n\n```text\nseparator\n```\n\n```text\nhover\n```\n\n```text\nfocus\n```\n\n```text\ntext-center\n```\n\n```text\nitems-end\n```\n\n```text\n:\n```\n\n```text\n--\n```\n\n========================================\n\nComments:\n- They don't only break pug files, they are one hell of a problem when using CSS selectors.\n- Looks like tailwind v4 has broken this :-/","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":77,"estimatedTokens":404}}613{"id":"stack-63870891","source":"stackoverflow","questionId":63870891,"title":"PurgeCSS removing Tailwind font in next.js","tags":["reactjs","next.js","tailwind-css","css-purge"],"text":"Title: PurgeCSS removing Tailwind font in next.js\nTags: reactjs, next.js, tailwind-css, css-purge\nSource: Stack Overflow\n\nQuestion:\nI have a next.js site I am building that uses a specific text as below,\n\n```\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['SFMono-Regular', 'Menlo', ...defaultTheme.fontFamily.sans],\n },\n colors: {\n // indigo: '#7D00FF',\n blue: '#51B1E8',\n red: '#FF0E00',\n },\n },\n },\n plugins: [\n require('@tailwindcss/ui'),\n ]\n}\n```\n\nFor some reason the text style is being purged when it is deployed to Vercel. This is the purge css config.\n\n```\nmodule.exports = {\n plugins: [\n \"postcss-import\",\n \"tailwindcss\",\n \"autoprefixer\"\n ]\n };\n\n const purgecss = [\n \"@fullhuman/postcss-purgecss\",\n {\n content: [\n './pages/**/**/*.{js,jsx,ts,tsx}',\n './pages/**/*.{js,jsx,ts,tsx}',\n './pages/*.{js,jsx,ts,tsx}',\n\n './components/**/**/*.{js,jsx,ts,tsx}',\n './components/**/*.{js,jsx,ts,tsx}',\n './components/*.{js,jsx,ts,tsx}',\n ],\n defaultExtractor: content => content.match(/[\\w-/:]+(?What is going on?\n\nThanks in advance,\n\n========================================\n\nTop Answer:\nI have this set in my Vue project:\n\n```\nmodule.exports = {\n content: [\n \"./src/**/*.vue\",\n ],\n safelist: [\n \"body\",\n \"html\",\n \"img\",\n \"a\",\n \"g-image\",\n \"g-image--lazy\",\n \"g-image--loaded\",\n /-(leave|enter|appear)(|-(to|from|active))$/,\n /^(?!(|.*?:)cursor-move).+-move$/,\n /^router-link(|-exact)-active$/,\n /data-v-.*/,\n ],\n extractors: [\n {\n extractor: (content) => content.match(/[A-z0-9-:\\\\/]+/g),\n extensions: [\"vue\"],\n },\n ],\n}\n```\n\nDepending on the version of PurgeCSS you are on, (mine was on: `v3.1.3`), the `safelist` is used for exclusion pattern, in older versions you might have to use `whitelist` instead.\n\n========================================\n\nCode:\n```text\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['SFMono-Regular', 'Menlo', ...defaultTheme.fontFamily.sans],\n },\n colors: {\n // indigo: '#7D00FF',\n blue: '#51B1E8',\n red: '#FF0E00',\n },\n },\n },\n plugins: [\n require('@tailwindcss/ui'),\n ]\n}\n```\n\n```text\nmodule.exports = {\n plugins: [\n \"postcss-import\",\n \"tailwindcss\",\n \"autoprefixer\"\n ]\n };\n\n const purgecss = [\n \"@fullhuman/postcss-purgecss\",\n {\n content: [\n './pages/**/**/*.{js,jsx,ts,tsx}',\n './pages/**/*.{js,jsx,ts,tsx}',\n './pages/*.{js,jsx,ts,tsx}',\n\n './components/**/**/*.{js,jsx,ts,tsx}',\n './components/**/*.{js,jsx,ts,tsx}',\n './components/*.{js,jsx,ts,tsx}',\n ],\n defaultExtractor: content => content.match(/[\\w-/:]+(?<!:)/g) || []\n }\n ];\n module.exports = {\n plugins: [\n \"postcss-import\",\n \"tailwindcss\",\n \"autoprefixer\",\n ...(process.env.NODE_ENV === \"production\" ? [purgecss] : [])\n ]\n };\n```\n\n```js\nconst purgecss = require('@fullhuman/postcss-purgecss')({\n // Specify the paths to all of the template files in your project\n content: [\n // './src/**/*.html',\n './pages/**/*.vue',\n './layouts/**/*.vue',\n './components/**/*.vue'\n ],\n safelist: ['html', 'body'],\n\n // Include any special characters you're using in this regular expression\n defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []\n})\n```\n\n```text\nhtml\n```\n\n```text\nbody\n```\n\n```text\nsafelist\n```\n\n```text\npackage.json\n```\n\n```text\nwhitelistPatterns\n```\n\n```text\nsafelist\n```\n\n```text\nmodule.exports = {\n content: [\n \"./src/**/*.vue\",\n ],\n safelist: [\n \"body\",\n \"html\",\n \"img\",\n \"a\",\n \"g-image\",\n \"g-image--lazy\",\n \"g-image--loaded\",\n /-(leave|enter|appear)(|-(to|from|active))$/,\n /^(?!(|.*?:)cursor-move).+-move$/,\n /^router-link(|-exact)-active$/,\n /data-v-.*/,\n ],\n extractors: [\n {\n extractor: (content) => content.match(/[A-z0-9-:\\\\/]+/g),\n extensions: [\"vue\"],\n },\n ],\n}\n```\n\n```text\nv3.1.3\n```\n\n```text\nsafelist\n```\n\n```text\nwhitelist\n```\n\n========================================\n\nComments:\n- Running into the same problem here, did you find a solution @LeCoda?","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":232,"estimatedTokens":1046}}614{"id":"stack-60815995","source":"stackoverflow","questionId":60815995,"title":"Lottie animation going over header","tags":["reactjs","gatsby","lottie","tailwind-css"],"text":"Title: Lottie animation going over header\nTags: reactjs, gatsby, lottie, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nYou can check what is going on in www.dynamicpoa.com\n\nJust scroll and you'll see that everything is working properly, except the SVG animation (Lottie) that is going over the header. In both pages (\"/\" and \"/cursos\").\n\nAnyone have a hint on how to fix it?\n\nI've tried changing header position to 'fixed' and 'sticky' but nothing seems to work. I've tried to change the properties of the div that holds the animation aswell.\n\nAppreciate your time.\n\nThank you very much.\n\n========================================\n\nTop Answer:\nAdd **z-index:10** to header container: element class:\n\n```\nsticky top-0 bg-white shadow\n```\n\nAdd **z-index:1** to animation container: element class: \n\n```\nwidth:500px;height:500px;overflow:hidden;margin:0 auto;z-index: 1;outline:none; z1\n```\n\n========================================\n\nCode:\n```text\n.sticky{\n position: sticky;\n z-index: 10;\n}\n```\n\n```text\nz-index\n```\n\n```text\nheader\n```\n\n```text\n.sticky\n```\n\n```text\nsticky top-0 bg-white shadow\n```\n\n```text\nwidth:500px;height:500px;overflow:hidden;margin:0 auto;z-index: 1;outline:none; z1\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":61,"estimatedTokens":299}}615{"id":"stack-72993010","source":"stackoverflow","questionId":72993010,"title":"TailwindCSS Autoprefixer not working | flex","tags":["reactjs","tailwind-css","autoprefixer"],"text":"Title: TailwindCSS Autoprefixer not working | flex\nTags: reactjs, tailwind-css, autoprefixer\nSource: Stack Overflow\n\nQuestion:\nHi I used tailwind in my react project but when I build the project, the autoprefixer doesn't work properly\n\n**tailwind.config.js:**\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n container: {\n center: true,\n padding: \"1rem\",\n },\n extend: {},\n },\n },\n plugins: [\n require('autoprefixer')\n ]\n};\n```\n\nI wanna autoprefixer work for every flex property like:\n\n```\n.flex{\n display: flex;\n}\n```\n\nto\n\n```\n.flex{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n```\n\nbrowserslist package.json:\n\n```\n{\n ....\n\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n\n ...\n}\n```\n\n**I want all flex properties to work in all browsers, because, for example, on an old phone in the Safari browser, the *gap* property does not work correctly.**\n\n========================================\n\nTop Answer:\nIn the `index.css` file or where you imprort tailwind,\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nYou can extend components and utilities using\n\n```\n@layer utilities {\n .flex {\n ...\n }\n}\n```\n\n========================================\n\nCode:\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n container: {\n center: true,\n padding: \"1rem\",\n },\n extend: {},\n },\n },\n plugins: [\n require('autoprefixer')\n ]\n};\n```\n\n```css\n.flex{\n display: flex;\n}\n```\n\n```css\n.flex{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n```\n\n```json\n{\n ....\n\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n\n ...\n}\n```\n\n```json\n{\n ....\n\n \"browserslist\": {\n \"production\": [\n \">0.01%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \">0.01%\",\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n\n ...\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\n@layer utilities {\n .flex {\n ...\n }\n}\n```\n\n```text\nindex.css\n```\n\n```text\n.svelte\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nflex\n```\n\n```text\noutput.css\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":202,"estimatedTokens":645}}616{"id":"stack-65486651","source":"stackoverflow","questionId":65486651,"title":"Tailwind CSS with Next.js not applicable","tags":["next.js","tailwind-css"],"text":"Title: Tailwind CSS with Next.js not applicable\nTags: next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIntroduced Tailwind CSS to the Next.js environment.\n\nI want to apply `color.lime`, but I get the following error.\n\n```\n./node_modules/tailwindcss/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-5-2!./node_modules/tailwindcss/tailwind.css)\nReferenceError: color is not defined\n```\n\n**tailwind.config.js**\n\n```\nconst colors = require(`tailwindcss/colors`);\nmodule.exports = {\n purge: [\"./src/**/*.{js,ts,jsx,tsx}\"],\n darkMode: false, // 'media' or 'class'\n theme: { extend: { colors: { lime: color.lime } } },\n variants: { extend: {} },\n plugins: [],\n};\n```\n\n**__app.tsx**\n\n```\nimport \"tailwindcss/tailwind.css\";\nimport type { AppProps } from \"next/app\";\nimport Head from \"next/head\";\n\nconst App = (props: AppProps) => {\n return (\n <>\n \n nexst\n \n \n \n );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default App;\n```\n\n========================================\n\nCode:\n```text\n./node_modules/tailwindcss/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-5-2!./node_modules/tailwindcss/tailwind.css)\nReferenceError: color is not defined\n```\n\n```text\nconst colors = require(`tailwindcss/colors`);\nmodule.exports = {\n purge: [\"./src/**/*.{js,ts,jsx,tsx}\"],\n darkMode: false, // 'media' or 'class'\n theme: { extend: { colors: { lime: color.lime } } },\n variants: { extend: {} },\n plugins: [],\n};\n```\n\n```text\nimport \"tailwindcss/tailwind.css\";\nimport type { AppProps } from \"next/app\";\nimport Head from \"next/head\";\n\nconst App = (props: AppProps) => {\n return (\n <>\n <Head>\n <title>nexst</title>\n </Head>\n <props.Component {...props.pageProps} />\n </>\n );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default App;\n```\n\n```text\ncolor.lime\n```\n\n```text\nconst colors = require(`tailwindcss/colors`);\nmodule.exports = {\n purge: [\"./src/**/*.{js,ts,jsx,tsx}\"],\n darkMode: false, // 'media' or 'class'\n theme: { extend: { colors: { lime: colors.lime } } }, // here use `colors`\n variants: { extend: {} },\n plugins: [],\n};\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ncolors.lime\n```\n\n```text\ncolor.lime\n```\n\n========================================\n\nComments:\n- Have you tried moving `colors: { lime: color.lime }` outside of `extend: { }` ?","metadata":{"transformedAt":"2026-08-18T18:33:42.932Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":119,"estimatedTokens":627}}617{"id":"stack-73187548","source":"stackoverflow","questionId":73187548,"title":"FontAwesome css classes missing?","tags":["reactjs","next.js","font-awesome","tailwind-css"],"text":"Title: FontAwesome css classes missing?\nTags: reactjs, next.js, font-awesome, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using a very similar Next.js project setup where the FontAwesome CSS classes are working, the only real difference is that this project is using `Tailwindcss`, where my previous project was with `styled-components`\n\nThis is my `package.json`\n\n```\n{\n \"name\": \"trpc-test\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"rm -rf .next && prisma generate && next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"postinstall\": \"yarn migrate:prod && prisma generate\"\n },\n \"dependencies\": {\n \"@fortawesome/fontawesome-svg-core\": \"^6.1.1\",\n \"@fortawesome/free-brands-svg-icons\": \"^6.1.1\",\n \"@fortawesome/free-regular-svg-icons\": \"^6.1.1\",\n \"@fortawesome/free-solid-svg-icons\": \"^6.1.1\",\n \"@fortawesome/react-fontawesome\": \"^0.1.18\",\n \"@next-auth/prisma-adapter\": \"^1.0.3\",\n \"@prisma/client\": \"^4.1.0\",\n \"@reduxjs/toolkit\": \"1.8.1\",\n \"@svgr/webpack\": \"5.5.0\",\n \"@trpc/client\": \"^9.26.2\",\n \"@trpc/next\": \"^9.26.2\",\n \"@trpc/react\": \"^9.26.2\",\n \"@trpc/server\": \"^9.26.2\",\n \"framer-motion\": \"^6.5.1\",\n \"next\": \"12.2.1\",\n \"next-auth\": \"^4.10.1\",\n \"nodemailer\": \"^6.7.7\",\n \"nprogress\": \"^0.2.0\",\n \"react\": \"18.2.0\",\n \"react-dom\": \"18.2.0\",\n \"react-query\": \"3.39.2\",\n \"react-redux\": \"8.0.1\",\n \"react-toastify\": \"8.0.3\",\n \"redux\": \"4.2.0\",\n \"redux-persist\": \"6.0.0\",\n \"redux-thunk\": \"2.4.1\",\n \"superjson\": \"^1.9.1\",\n \"zod\": \"^3.17.3\"\n },\n \"devDependencies\": {\n \"@types/node\": \"18.0.0\",\n \"@types/nprogress\": \"^0.2.0\",\n \"@types/prettier\": \"^2.4.1\",\n \"@types/react\": \"18.0.14\",\n \"@types/react-dom\": \"18.0.5\",\n \"@types/react-redux\": \"7.1.24\",\n \"@types/react-toastify\": \"4.1.0\",\n \"@typescript-eslint/eslint-plugin\": \"5.0.0\",\n \"@typescript-eslint/parser\": \"5.0.0\",\n \"autoprefixer\": \"^10.4.7\",\n \"eslint\": \"8.1.0\",\n \"eslint-config-airbnb\": \"^19.0.4\",\n \"eslint-config-airbnb-typescript\": \"^17.0.0\",\n \"eslint-config-next\": \"12.2.1\",\n \"eslint-config-prettier\": \"^8.5.0\",\n \"eslint-plugin-cypress\": \"^2.12.1\",\n \"eslint-plugin-import\": \"^2.26.0\",\n \"eslint-plugin-jsx-a11y\": \"^6.6.0\",\n \"eslint-plugin-prettier\": \"^4.2.1\",\n \"eslint-plugin-react\": \"^7.30.1\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"postcss\": \"^8.4.14\",\n \"prettier\": \"^2.4.1\",\n \"prisma\": \"^4.1.0\",\n \"tailwindcss\": \"^3.1.6\",\n \"typescript\": \"4.3.5\",\n \"vercel\": \"^27.2.0\"\n }\n}\n```\n\nThen in a component, I'm just doing what I'd usually do\n\n```\nimport React from \"react\";\nimport type { NextPage } from \"next\";\nimport { faTimes } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nconst Home: NextPage = () => {\n return (\n \n );\n};\n\nexport default Home;\n```\n\nThe icon renders fine, it's the classes applied to the SVG, those closes don't seem to exist\n\nlike `fa-1x` which would usually apply `font-size: 1em;` to the element, is not being applied in my app.\n\nI'm not sure if there is something specific I'm missing here?\n\nhttps://i.sstatic.net/36kxC.jpg\n\n========================================\n\nCode:\n```text\n{\n \"name\": \"trpc-test\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"rm -rf .next && prisma generate && next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"postinstall\": \"yarn migrate:prod && prisma generate\"\n },\n \"dependencies\": {\n \"@fortawesome/fontawesome-svg-core\": \"^6.1.1\",\n \"@fortawesome/free-brands-svg-icons\": \"^6.1.1\",\n \"@fortawesome/free-regular-svg-icons\": \"^6.1.1\",\n \"@fortawesome/free-solid-svg-icons\": \"^6.1.1\",\n \"@fortawesome/react-fontawesome\": \"^0.1.18\",\n \"@next-auth/prisma-adapter\": \"^1.0.3\",\n \"@prisma/client\": \"^4.1.0\",\n \"@reduxjs/toolkit\": \"1.8.1\",\n \"@svgr/webpack\": \"5.5.0\",\n \"@trpc/client\": \"^9.26.2\",\n \"@trpc/next\": \"^9.26.2\",\n \"@trpc/react\": \"^9.26.2\",\n \"@trpc/server\": \"^9.26.2\",\n \"framer-motion\": \"^6.5.1\",\n \"next\": \"12.2.1\",\n \"next-auth\": \"^4.10.1\",\n \"nodemailer\": \"^6.7.7\",\n \"nprogress\": \"^0.2.0\",\n \"react\": \"18.2.0\",\n \"react-dom\": \"18.2.0\",\n \"react-query\": \"3.39.2\",\n \"react-redux\": \"8.0.1\",\n \"react-toastify\": \"8.0.3\",\n \"redux\": \"4.2.0\",\n \"redux-persist\": \"6.0.0\",\n \"redux-thunk\": \"2.4.1\",\n \"superjson\": \"^1.9.1\",\n \"zod\": \"^3.17.3\"\n },\n \"devDependencies\": {\n \"@types/node\": \"18.0.0\",\n \"@types/nprogress\": \"^0.2.0\",\n \"@types/prettier\": \"^2.4.1\",\n \"@types/react\": \"18.0.14\",\n \"@types/react-dom\": \"18.0.5\",\n \"@types/react-redux\": \"7.1.24\",\n \"@types/react-toastify\": \"4.1.0\",\n \"@typescript-eslint/eslint-plugin\": \"5.0.0\",\n \"@typescript-eslint/parser\": \"5.0.0\",\n \"autoprefixer\": \"^10.4.7\",\n \"eslint\": \"8.1.0\",\n \"eslint-config-airbnb\": \"^19.0.4\",\n \"eslint-config-airbnb-typescript\": \"^17.0.0\",\n \"eslint-config-next\": \"12.2.1\",\n \"eslint-config-prettier\": \"^8.5.0\",\n \"eslint-plugin-cypress\": \"^2.12.1\",\n \"eslint-plugin-import\": \"^2.26.0\",\n \"eslint-plugin-jsx-a11y\": \"^6.6.0\",\n \"eslint-plugin-prettier\": \"^4.2.1\",\n \"eslint-plugin-react\": \"^7.30.1\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"postcss\": \"^8.4.14\",\n \"prettier\": \"^2.4.1\",\n \"prisma\": \"^4.1.0\",\n \"tailwindcss\": \"^3.1.6\",\n \"typescript\": \"4.3.5\",\n \"vercel\": \"^27.2.0\"\n }\n}\n```\n\n```text\nimport React from \"react\";\nimport type { NextPage } from \"next\";\nimport { faTimes } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nconst Home: NextPage = () => {\n return (\n <FontAwesomeIcon icon={faTimes} color=\"#fff\" size=\"1x\" />\n );\n};\n\nexport default Home;\n```\n\n```text\nTailwindcss\n```\n\n```text\nstyled-components\n```\n\n```text\npackage.json\n```\n\n```text\nfa-1x\n```\n\n```text\nfont-size: 1em;\n```\n\n```text\nimport { config } from '@fortawesome/fontawesome-svg-core'\nimport '@fortawesome/fontawesome-svg-core/styles.css'\nconfig.autoAddCss = false\n\nexport default function MyApp({ Component, pageProps }) {\n return <Component {...pageProps} />\n}\n```\n\n```text\npages/_app.js\n```\n\n========================================\n\nComments:\n- Thanks! That worked. Not sure why I've never had to do that before though.\n- Exactly. The need for this seems to have changed. A site was working fine w/ @fortawesome/fontawesome-svg-core v1.2.28. I \"updated\" it to 1.2.32, and the styles disappeared.","metadata":{"transformedAt":"2026-08-18T18:33:42.933Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":237,"estimatedTokens":1568}}618{"id":"stack-62037968","source":"stackoverflow","questionId":62037968,"title":"Tailwind CSS :before pseudo class","tags":["reactjs","storybook","tailwind-css","emotion","css-in-js"],"text":"Title: Tailwind CSS :before pseudo class\nTags: reactjs, storybook, tailwind-css, emotion, css-in-js\nSource: Stack Overflow\n\nQuestion:\nI've now been working in circles trying to understand what is happening. I'm making a design library using storybook with Tailwind. I can't seem to get the :before pseudo class to work. No matter where I place it in the styling, then it's never rendered.\n\nAn example is that I am trying to make a component which uses react-slick, and want to style the navigation:\n\n```\n'& .slick-dots': {\n bottom: -30,\n display: 'block',\n left: 4,\n listStyle: 'none',\n margin: 0,\n padding: 0,\n position: 'absolute',\n textAlign: 'center',\n width: '100%',\n\n '& li': {\n cursor: 'pointer',\n display: 'inline-block',\n height: 20,\n margin: '0 5px',\n padding: 0,\n position: 'relative',\n width: 20,\n\n '& button': {\n border: 0,\n background: 'transparent',\n display: 'block',\n height: 20,\n width: 20,\n outline: 'none',\n lineHeight: 0,\n fontSize: 0,\n color: 'transparent',\n padding: 5,\n cursor: 'pointer',\n\n '&:before': {\n position: 'absolute',\n top: 0,\n left: 0,\n content: '',\n width: 20,\n height: 20,\n fontFamily: 'sans-serif',\n fontSize: 20,\n lineHeight: 20,\n textAlign: 'center',\n color: '#000000',\n opacity: 0.75,\n display: 'inline-block',\n },\n },\n },\n},\n```\n\n========================================\n\nTop Answer:\nAnother way is to define your content in the **tailwind.config.js**\n\n```\ntheme: {\n extend: {\n content: {\n 'arrowNeonGreen': 'url(\"../src/images/icons/arrow-neon-green.svg\")',\n },\n fontSize: {\n...\n```\n\nYou can render it using the following className. Make sure to include an **inline-block** and **width**.\n\n```\nLearn More\n```\n\nYou can also apply a hover state like this **hover:after:content-arrowNeonGreen**\n\n```\nLearn More\n```\n\n========================================\n\nCode:\n```text\n'& .slick-dots': {\n bottom: -30,\n display: 'block',\n left: 4,\n listStyle: 'none',\n margin: 0,\n padding: 0,\n position: 'absolute',\n textAlign: 'center',\n width: '100%',\n\n '& li': {\n cursor: 'pointer',\n display: 'inline-block',\n height: 20,\n margin: '0 5px',\n padding: 0,\n position: 'relative',\n width: 20,\n\n '& button': {\n border: 0,\n background: 'transparent',\n display: 'block',\n height: 20,\n width: 20,\n outline: 'none',\n lineHeight: 0,\n fontSize: 0,\n color: 'transparent',\n padding: 5,\n cursor: 'pointer',\n\n '&:before': {\n position: 'absolute',\n top: 0,\n left: 0,\n content: '',\n width: 20,\n height: 20,\n fontFamily: 'sans-serif',\n fontSize: 20,\n lineHeight: 20,\n textAlign: 'center',\n color: '#000000',\n opacity: 0.75,\n display: 'inline-block',\n },\n },\n },\n},\n```\n\n```text\ncontent: '\"text\"',\n```\n\n```text\ncontent: 'text',\n```\n\n```text\ntheme: {\n extend: {\n content: {\n 'arrowNeonGreen': 'url(\"../src/images/icons/arrow-neon-green.svg\")',\n },\n fontSize: {\n...\n```\n\n```text\n<Link className=\"after:content-arrowNeonGreen after:inline-block after:w-8\">Learn More</Link>\n```\n\n```text\n<Link className=\"hover:after:content-arrowNeonGreen after:content-arrowBlack after:inline-block after:w-8\">Learn More</Link>\n```\n\n========================================\n\nComments:\n- Can you show code snipper or sandbox (jsfiddle, codepen)?\n- It's ok, found the problem. The :before pseudo class won't render unless there is content, but in the case of css in js, then content needs to look like this `content: '\"text\"',` and not `content: 'text',`","metadata":{"transformedAt":"2026-08-18T18:33:42.933Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":178,"estimatedTokens":894}}619{"id":"stack-72397407","source":"stackoverflow","questionId":72397407,"title":"tailwindcss Forms PlugIn: Styling Checkboxes","tags":["css","tailwind-css"],"text":"Title: tailwindcss Forms PlugIn: Styling Checkboxes\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nLike the title says, I am using tailwind and the forms plugin. I have styled the color (green), border color (grey) and tab outline (green as well) by changing the text, border and ring color. (I have attached an image so that you know what I'm talking about.) However, I haven't yet found out how to change the (white by default) color when the checkbox is not selected, the checkmark color, and the color of the (white) border between the checkbox and the outer border for the tab key highlighting. Can somebody help?\n\nCheckboxes\n\n========================================\n\nTop Answer:\n**Here's the trick**\n\nyou need both focus-within:hidden & border-0\n\n```\n\n```\n\nWorking Tailwind-Play\n\n========================================\n\nCode:\n```css\n[type='checkbox']:checked {\n background-image: url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" fill=\"black\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"/></svg>');\n}\n```\n\n```text\nfill\n```\n\n```text\nfill=\"(255,0,0)\"\n```\n\n```text\nring-offset\n```\n\n```text\nfocus:ring-offset-purple-500\n```\n\n```text\n<input type=\"checkbox\" checked class=\"h-72 w-72 border-0 bg-transparent text-transparent focus-within:hidden\" />\n```\n\n========================================\n\nComments:\n- Please can you attach the code needed to reproduce the issue?\n- Thank you so much, this actually worked. I was searching for ages for how to change the checkmark color. Sad that there isn't simply a property for that, but still thank you.\n- Any idea how you would make it different colors depending on whether it's light or dark mode?","metadata":{"transformedAt":"2026-08-18T18:33:42.933Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":57,"estimatedTokens":443}}620{"id":"stack-57898372","source":"stackoverflow","questionId":57898372,"title":"How to import font-awesome in tailwind css in the rails application","tags":["ruby-on-rails-5","font-awesome","tailwind-css"],"text":"Title: How to import font-awesome in tailwind css in the rails application\nTags: ruby-on-rails-5, font-awesome, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to import font-awesome in my rails application which uses tailwind css framework.Unfortunately instead of icons square boxes show up in my application. \n\nSteps followed:\n\n```\nyarn add --dev @fortawesome/fontawesome-free\n\napplication.scss\n@import \"@fortawesome/fontawesome-free\";\n```\n\nI tried so many ways but not able to display icons. Can someone let me know how to resolve this?\n\n========================================\n\nCode:\n```text\nyarn add --dev @fortawesome/fontawesome-free\n\napplication.scss\n@import \"@fortawesome/fontawesome-free\";\n```\n\n```text\n# application.scss\n$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; \n@import '~@fortawesome/fontawesome-free/scss/fontawesome';\n@import '~@fortawesome/fontawesome-free/scss/regular';\n@import '~@fortawesome/fontawesome-free/scss/solid';\n```\n\n========================================\n\nComments:\n- How to include .css files instead of .scss files?\n- check the last answer to this link","metadata":{"transformedAt":"2026-08-18T18:33:42.933Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":41,"estimatedTokens":279}}621{"id":"stack-71589223","source":"stackoverflow","questionId":71589223,"title":"Nuxt3 default error page can't be overwritten with layouts/error.vue","tags":["javascript","vue.js","vuejs3","tailwind-css","nuxt3.js"],"text":"Title: Nuxt3 default error page can't be overwritten with layouts/error.vue\nTags: javascript, vue.js, vuejs3, tailwind-css, nuxt3.js\nSource: Stack Overflow\n\nQuestion:\nI have created a layouts/error.vue file that I'd like to use as my error page in my Nuxt3 app.\n\nBut for some reason, the default error page keeps loading up every time.\n\nThis is the default error page:https://i.sstatic.net/9xYAg.png\n\nThis is the code I have in my error.vue file:\n\n```\n\n \n \n\n### Page not found\n\n \n\n### An error occurred\n\n Home page\n \n\nexport default {\n props: [\"error\"],\n};\n\n```\n\nEvery developer I have seen so far or read the docs explains this as a pretty simple thing to do by creating a folder and a file, so this might have to do something with my setup tho.\n\nAnyway, could any of you point me to the right direction here please?\n\n========================================\n\nCode:\n```text\n<template>\n <div class=\"container\">\n <h1 v-if=\"error.statusCode === 404\">Page not found</h1>\n <h1 v-else>An error occurred</h1>\n <NuxtLink to=\"/\">Home page</NuxtLink>\n </div>\n</template>\n\n<script>\nexport default {\n props: [\"error\"],\n};\n</script>\n```\n\n```text\nerror\n```\n\n```text\nlayouts\n```\n\n========================================\n\nComments:\n- Did you restart your nuxt app?\n- Yes, a couple million times, just to make sure, but still wasn't showing up :S\n- \"You can customize this error page by adding ~/error.vue in the source directory of your application, alongside app.vue. This page has a single prop - error which contains an error for you to handle.\" You have yours in layouts folder maybe that's the case\n- This was the solution, thanks! The only thing I can't understand now is which part I was doing wrong when I was going with the documentation solution \"You can customize the error page by adding a layouts/error.vue file\" nuxtjs.org/docs/directory-structure/layouts/#layouts-directo‌​ry\n- This is for Nuxt 2 since Nuxt 3 is still in Beta release the authors need to have both documentations\n- Great, thanks again!:)\n- Is this behaviour configurable ? Maybe via `nuxt.config.js` ?\n- Read this page: nuxt.com/docs/getting-started/…","metadata":{"transformedAt":"2026-08-18T18:33:42.933Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":75,"estimatedTokens":538}}622{"id":"stack-67252995","source":"stackoverflow","questionId":67252995,"title":"How to use custom class to show different images for different devices in TailwindCSS?","tags":["tailwind-css"],"text":"Title: How to use custom class to show different images for different devices in TailwindCSS?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn Laravel 8 / tailwindcss 2 app I wand to show different image as background in class:\n\n```\n**\n```\n\nWith custom class defined :\n\n```\n.test-device {\n background: url(lg:/img/test-device/lg.png xl:/img/test-device/exlg.png md:/img/test-device/md.png ;\n```\n\nbut that does not work and background image is not displayed anyway.\n\nWhich way is valid?\n\n========================================\n\nCode:\n```text\n<i class=\"test-device px-5\"></i>\n```\n\n```text\n.test-device {\n background: url(lg:/img/test-device/lg.png xl:/img/test-device/exlg.png md:/img/test-device/md.png ;\n```\n\n```js\n// tailwind.config.js\n\nmodule.exports = {\n theme: {\n extend: {\n backgroundImage: theme => ({\n 'test-device-md': \"url('/img/test-device/md.png')\",\n 'test-device-lg': \"url('/img/test-device/lg.png')\",\n 'test-device-xl': \"url('/img/test-device/exlg.png')\",\n })\n }\n }\n}\n```\n\n```html\n<i class=\"px-5 md:bg-test-device-md lg:bg-test-device-lg xl:bg-test-device-xl\"></i>\n```\n\n```text\nbackgroundImage\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nbg-*\n```\n\n========================================\n\nComments:\n- Thanks! It works! Could you please to explain how bg-test-device-md works as background Image for defined test-device-md themes? Some rules in naming ?\n- The images you add under `backgroundImage` will be available as `bg-` prefixed classes. Have a read through the background image docs directly.","metadata":{"transformedAt":"2026-08-18T18:33:42.933Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":71,"estimatedTokens":403}}623{"id":"stack-78952738","source":"stackoverflow","questionId":78952738,"title":"How should you support different font sizes and heights for different font-families in Tailwind?","tags":["tailwind-css"],"text":"Title: How should you support different font sizes and heights for different font-families in Tailwind?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn our tailwind.config.js file we have\n\n```\nfontSize: {\n xxs: [\"0.75rem\", \"0.75rem\"], \n xs: [\"0.875rem\", \"1.25rem\"],\n sm: [\"1rem\", \"1.5rem\"],\n base: [\"1.125rem\", \"1.75rem\"],\n lg: [\"1.25rem\", \"1.75rem\"],\n```\n\nThis allows us to use classes such as `text-xs`, `text-sm` etc.\n\nIn our design we are using 2 different font families. The designer would like us to use a different line height for \"sm\" when using the second font.\n\nWhat is the tailwind way of solving this?\nShould we add it to the theme? Use `leading` or something else?\n\n========================================\n\nCode:\n```text\nfontSize: {\n xxs: [\"0.75rem\", \"0.75rem\"], \n xs: [\"0.875rem\", \"1.25rem\"],\n sm: [\"1rem\", \"1.5rem\"],\n base: [\"1.125rem\", \"1.75rem\"],\n lg: [\"1.25rem\", \"1.75rem\"],\n```\n\n```text\ntext-xs\n```\n\n```text\ntext-sm\n```\n\n```text\nleading\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n fontFamily: {\n primary: [\"primary\", \"sans-serif\"],\n secondary: [\"secondary\", \"serif\"],\n },\n lineHeight: {\n \"sm-secondary\": \"1.25rem\", \n \"lg-secondary\": \"1.75rem\", \n },\n },\n },\n plugins: [\n function ({ addUtilities, theme }) {\n const newUtilities = {\n \".font-secondary.text-sm\": {\n fontFamily: theme(\"fontFamily.secondary\"),\n lineHeight: theme(\"lineHeight.sm-secondary\"),\n },\n \".font-secondary.text-lg\": {\n fontFamily: theme(\"fontFamily.secondary\"),\n lineHeight: theme(\"lineHeight.lg-secondary\"),\n },\n };\n addUtilities(newUtilities, [\"responsive\", \"hover\"]);\n },\n ],\n};\n```\n\n```html\n<p class=\"font-secondary text-sm\">\n secondary font with 1.25rem line height\n</p>\n```\n\n```html\n<p class=\"font-secondary text-lg\">\n secondary font with 1.75rem line height\n</p>\n```\n\n```text\nfontFamily\n```\n\n```text\nlineHeight\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nline-height\n```\n\n========================================\n\nComments:\n- I think this largely depends on how you are specifying the font, as there shouldn't be any selectors in CSS directly related to fonts.","metadata":{"transformedAt":"2026-08-18T18:33:42.933Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":111,"estimatedTokens":564}}624{"id":"stack-79473004","source":"stackoverflow","questionId":79473004,"title":"Adding HeroUI after creating a ReactJS application via Vite","tags":["reactjs","next.js","tailwind-css","vite","tailwind-css-4"],"text":"Title: Adding HeroUI after creating a ReactJS application via Vite\nTags: reactjs, next.js, tailwind-css, vite, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI'm following the instruction Here trying to make HeroUI works with React app created via Vite. However, it doesn't seem to be working!\n\nTailwind CSS on the other hand is working perfectly, app running with no errors, but HeroUI components are not applied!!\n\nmy vite.config.js:\n\n```\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vite.dev/config/\nexport default defineConfig({\n plugins: [\n react(),\n tailwindcss()\n ],\n})\n```\n\nmy tailwind.config.js:\n\n```\nimport { heroui } from \"@heroui/react\";\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx,tsx}\",\n \"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}\"\n ],\n theme: {\n extend: {},\n },\n darkMode: \"class\",\n plugins: [heroui()]\n}\n```\n\nmy main.jsx:\n\n```\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom/client'\n\nimport {HeroUIProvider} from '@heroui/react'\nimport App from './App.jsx'\nimport './index.css'\n\ncreateRoot(document.getElementById('root')).render(\n \n \n \n \n \n \n ,\n)\n```\n\nmy index.css:\n\n```\n@import \"tailwindcss\";\n```\n\nand my App.jsx:\n\n```\nimport {DateInput} from \"@heroui/react\";\nimport {CalendarDate} from \"@internationalized/date\";\nimport {Avatar} from \"@heroui/react\";\n\nexport default function App() {\n return (\n <>\n \n \n\n### Hello, Vite + React!\n\n \n\n \n \n \n\n \n\n \n \n \n \n \n \n \n \n\n \n )\n}\n```\n\nI've tried many different configurations but no use, I couldn't make the HeroUI components work so far. Any suggestion? did I miss something?\n\n========================================\n\nCode:\n```text\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vite.dev/config/\nexport default defineConfig({\n plugins: [\n react(),\n tailwindcss()\n ],\n})\n```\n\n```text\nimport { heroui } from \"@heroui/react\";\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx,tsx}\",\n \"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}\"\n ],\n theme: {\n extend: {},\n },\n darkMode: \"class\",\n plugins: [heroui()]\n}\n```\n\n```text\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom/client'\n\nimport {HeroUIProvider} from '@heroui/react'\nimport App from './App.jsx'\nimport './index.css'\n\ncreateRoot(document.getElementById('root')).render(\n <StrictMode>\n \n <HeroUIProvider>\n <App />\n </HeroUIProvider>\n \n </StrictMode>,\n)\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\nimport {DateInput} from \"@heroui/react\";\nimport {CalendarDate} from \"@internationalized/date\";\nimport {Avatar} from \"@heroui/react\";\n\nexport default function App() {\n return (\n <>\n <div className=\"bg-blue-500 text-white p-4\">\n <h1>Hello, Vite + React!</h1>\n </div>\n\n <div className=\"flex w-full flex-wrap md:flex-nowrap gap-4\">\n <DateInput\n className=\"max-w-sm\"\n label={\"Birth date\"}\n placeholderValue={new CalendarDate(1995, 11, 6)} />\n </div>\n\n \n\n <div className=\"flex gap-3 items-center\">\n <Avatar src=\"https://i.pravatar.cc/150?u=a042581f4e29026024d\" />\n <Avatar name=\"Junior\" />\n <Avatar src=\"https://i.pravatar.cc/150?u=a042581f4e29026704d\" />\n <Avatar name=\"Jane\" />\n <Avatar src=\"https://i.pravatar.cc/150?u=a04258114e29026702d\" />\n <Avatar name=\"Joe\" />\n </div>\n\n </> \n )\n}\n```\n\n```none\nnpm install @heroui/react@latest\n```\n\n```js\n// hero.ts\nimport { heroui } from \"@heroui/react\";\n// or import from theme package if you are using individual packages.\n// import { heroui } from \"@heroui/theme\";\nexport default heroui();\n```\n\n```css\n@import \"tailwindcss\";\n\n/* Note: Make sure the relative reference is correct */\n/* I assumed when writing the response that they are in the same folder */\n@plugin './hero.ts';\n/* Note: You may need to change the path to fit your project structure */\n@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';\n@custom-variant dark (&:is(.dark *));\n```\n\n```none\nnpm install @heroui/react@beta\n```\n\n```js\nimport { heroui } from \"@heroui/react\";\nexport default heroui();\n```\n\n```css\n@import \"tailwindcss\";\n@plugin './hero.ts';\n/* Note: You may need to change the path to fit your project structure */\n@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';\n@custom-variant dark (&:is(.dark *));\n```\n\n```css\n@import \"tailwindcss\";\n@source \"../../node_modules/@heroui\";\n```\n\n```none\nnpm install tailwindcss@3\n```\n\n```text\nhero.ts\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@config\n```\n\n```text\n.gitignore\n```\n\n```text\n/node_modules/\n```\n\n```text\nhero-inc/heroui\n```\n\n========================================\n\nComments:\n- saved me a few hours, köszi!","metadata":{"transformedAt":"2026-08-18T18:33:42.933Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":19,"totalLines":281,"estimatedTokens":1249}}625{"id":"stack-64452314","source":"stackoverflow","questionId":64452314,"title":"How to keep individual grid column height in tailwind","tags":["css","tailwind-css"],"text":"Title: How to keep individual grid column height in tailwind\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn the below example (see the tailwind play here: https://play.tailwindcss.com/wUWT1PCfEU), if the first `` is open, the height of the other columns will increase with it.\n\n```\n\n \n \n aaaa\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui vitae nunc porta finibus eu ut turpis. Donec rhoncus, mauris at fringilla ullamcorper, nibh lacus laoreet sapien, non viverra lectus diam non dolor.\n \n \n \n \n bbbb\n A small text\n \n \n \n \n cccc\n A medium text\n \n \n\n```\n\nHow can this be prevent and each column has individual height?\n\n========================================\n\nCode:\n```html\n<div class=\"grid grid-cols-1 sm:grid-cols-3\">\n <div class=\"bg-gray-400\">\n <details>\n <summary>aaaa</summary>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui vitae nunc porta finibus eu ut turpis. Donec rhoncus, mauris at fringilla ullamcorper, nibh lacus laoreet sapien, non viverra lectus diam non dolor.\n </details>\n </div>\n <div class=\"bg-green-400\">\n <details>\n <summary>bbbb</summary>\n A small text\n </details>\n </div>\n <div class=\"bg-purple-400\">\n <details>\n <summary>cccc</summary>\n A medium text\n </details>\n </div>\n</div>\n```\n\n```text\n<details>\n```\n\n```text\n<div class=\"flex w-full\">\n <div class=\"bg-gray-400 w-4/12 h-full\">\n <details>\n <summary>aaaa</summary>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui vitae nunc porta finibus eu ut turpis. Donec rhoncus, mauris at fringilla ullamcorper, nibh lacus laoreet sapien, non viverra lectus diam non dolor.\n </details>\n </div>\n <div class=\"bg-green-400 w-4/12 h-full\">\n <details>\n <summary>bbbb</summary>\n A small text\n </details>\n </div>\n <div class=\"bg-purple-400 w-4/12 h-full\">\n <details>\n <summary>cccc</summary>\n A medium text\n </details>\n </div>\n</div>\n```\n\n```text\nflex\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.933Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":88,"estimatedTokens":499}}626{"id":"stack-72077976","source":"stackoverflow","questionId":72077976,"title":"How to build vue component library with vite and tailwind? (tailwind classes not working when importing to other project)","tags":["vue.js","nuxt.js","tailwind-css","vite"],"text":"Title: How to build vue component library with vite and tailwind? (tailwind classes not working when importing to other project)\nTags: vue.js, nuxt.js, tailwind-css, vite\nSource: Stack Overflow\n\nQuestion:\n### Current\n\nI have two repositories:\n\n- Main Web App - simple nuxt3 web app\n\n- Component Library - simple vite/vue app\n\n### Goal\n\nBuild my own component library using vite, vue3 and tailwindcss\n\n### Problem\n\nWhen I use `npm run dev` I can se my components working fine (from the vite app) but when I build my library `npm run build:watch` and import them in another project (nuxt app) tailwind classes/styles are not working\n\nThis is mi vite app (all good)\n\nThis is the nuxt app where I imported the component (no style)\n\nRepositories:\n\n- Main Web App: https://github.com/fro-systems/clau-web\n\n- Component Library: https://github.com/fro-systems/clau-components\n\n========================================\n\nCode:\n```text\nnpm run dev\n```\n\n```text\nnpm run build:watch\n```\n\n```text\n\"exports\": {\n \"./dist/style.css\": \"./dist/style.css\"\n },\n```\n\n```text\ncss: [\n \"clau-components/dist/style.css\"\n],\n```\n\n```text\npackage.json\n```\n\n```text\nnuxt.config.ts\n```\n\n========================================\n\nComments:\n- Can I ask if there is a way to fix this **without explicitly importing css in the host project** (in this case, `nuxt.config.ts`)? Cos if we have a lot of custom libraries then importing the bundled css is going to need a lot of manual work. Pls advice if I should post a separate qn\n- Were you are to resolve this without an explicit import to the host project?","metadata":{"transformedAt":"2026-08-18T18:33:42.933Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":67,"estimatedTokens":395}}627{"id":"stack-79764220","source":"stackoverflow","questionId":79764220,"title":"How to create a clean continuous grid border effect with gaps?","tags":["css","tailwind-css","tailwind-css-4"],"text":"Title: How to create a clean continuous grid border effect with gaps?\nTags: css, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI’m trying to build a grid layout with Tailwind CSS (v4.1) where:\n\n- There is a gap between items (e.g., gap-10)\n\n- But the border linesshould continue across the entire container(like graph paper)\n\n- The lines should form clean squares aligned with the grid, not just outline individual cells.\n\nHere’s my current attempt:\nTailwind Play link with my code\n\n```\n\n * {\n box-sizing: border-box;\n }\n @utility border-line {\n content: \"\";\n display: block;\n position: absolute;\n background-color: #ffffff;\n }\n\n @utility border-line-vertical-right {\n @apply border-line;\n height: 200vh;\n width: 1px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n }\n\n @utility border-line-vertical-left {\n @apply border-line;\n height: 200vh;\n width: 1px;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n }\n\n @utility border-line-horizontal-top {\n @apply border-line;\n height: 1px;\n width: 200vw;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n }\n\n @utility border-line-horizontal-bottom {\n @apply border-line;\n height: 1px;\n width: 200vw;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n }\n\n \n \n A\n \n B\n \n C\n \n D\n \n \n E\n \n \n \n\n```\n\nThis sort of works, but the problem is:\n\n- Some lines overlap other sections.\n\n- It’s hard to control with z-index.\n\n- The code feels messy and unscalable.\n\n📷 Here’s the image of the exact effect I want:\nhttps://i.sstatic.net/JarKef2C.png\n\n**Question:**\nHow can I create this effect in a cleaner way?\n\n*I don’t mind changing the HTML structure or approach — I just want the grid to have continuous lines across gaps, without overlapping issues.*\n\nNote:\nThis is purely a CSS positioning issue — I’m just using Tailwind classes to generate the CSS, so I added the tailwind-css tag as well.\n\nAlmost the same issue I posted yesterday, and there I got a solution\nusing CSS Anchor Positioning, which works but I’d like to avoid since\nit’s not fully supported across browsers yet.\nHow to make a pseudo-element span full width of grid container but align with specific grid item in Tailwind CSS?\n\n========================================\n\nTop Answer:\nYou could consider having elements not related to the main content elements. This could be easier to maintain as you can separate them out as purely aesthetic, perhaps with comments. Though ultimately, what feels messy would be down to personal opinion.\n\n```\n\n \n \n A\n B\n C\n D\n E\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n```\n\nNotes:\n\n- Abstracted `padding` and `gap` to CSS variables. This allows a single source of truth, as they are used later in the lines to set appropriate overlap outside the grid container.\n\n- Adjusted the grid system to be 2 row spans - no need for 3.\n\nYou could then perhaps look at abstracting the class names into utilities, if that would seem more neat for you. Though really, I'd utilitize your templating system (if one exists) to abstract the classes (if needed). This would allow for better class collision and thus lower CSS file size.\n\n```\n\n/**\n * Vertical line from top to bottom.\n */\n@utility line-v-full-* {\n grid-row: 1 / -1;\n margin-block: calc(var(--p) * -1);\n border-right: 1px solid var(--color-white);\n justify-self: --value('start', 'end');\n}\n\n/**\n * Vertical line where the top starts mid-grid and ends at the bottom.\n */\n@utility line-v-bottom-* {\n grid-row-end: -1;\n margin-top: calc(var(--gap) * -1);\n margin-bottom: calc(var(--p) * -1);\n border-right: 1px solid var(--color-white);\n justify-self: --value('start', 'end');\n}\n\n/**\n * Horizontal line where the left and right finish mid-grid.\n */\n@utility line-h-mid-* {\n margin-inline: calc(var(--gap) * -1);\n border-bottom: 1px solid var(--color-white);\n align-self: --value('start', 'end');\n}\n\n \n \n A\n B\n C\n D\n E\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n```\n\nYou could flesh these utilities out to all possibilities which could then work for any grid layout:\n\n```\n\n/**\n * Vertical line from top to bottom.\n */\n@utility line-v-full-* {\n grid-row: 1 / -1;\n margin-block: calc(var(--p) * -1);\n border-right: 1px solid var(--color-white);\n justify-self: --value('start', 'end');\n}\n\n/**\n * Vertical line where the top starts at the top edge and ends at mid grid.\n */\n@utility line-v-top-* {\n grid-row-start: 1;\n margin-top: calc(var(--p) * -1);\n margin-bottom: calc(var(--gap) * -1);\n border-right: 1px solid var(--color-white);\n justify-self: --value('start', 'end');\n}\n\n/**\n * Vertical line where the top starts mid-grid and ends at the bottom.\n */\n@utility line-v-bottom-* {\n grid-row-end: -1;\n margin-top: calc(var(--gap) * -1);\n margin-bottom: calc(var(--p) * -1);\n border-right: 1px solid var(--color-white);\n justify-self: --value('start', 'end');\n}\n\n/**\n * Vertical line where it starts and ends inside the grid.\n */\n@utility line-v-mid-* {\n margin-top: calc(var(--gap) * -1);\n margin-bottom: calc(var(--gap) * -1);\n border-right: 1px solid var(--color-white);\n justify-self: --value('start', 'end');\n}\n\n/**\n * Horizontal line from left to right.\n */\n@utility line-h-full-* {\n grid-column: 1 / -1;\n margin-inline: calc(var(--p) * -1);\n border-bottom: 1px solid var(--color-white);\n align-self: --value('start', 'end');\n}\n\n/**\n * Horizontal line where the left starts at the left edge and ends at mid grid.\n */\n@utility line-h-left-* {\n grid-column-start: 1;\n margin-left: calc(var(--p) * -1);\n margin-right: calc(var(--gap) * -1);\n border-bottom: 1px solid var(--color-white);\n align-self: --value('start', 'end');\n}\n\n/**\n * Horizontal line where the left starts mid-grid and ends at the right edge.\n */\n@utility line-h-right-* {\n grid-column-end: -1;\n margin-left: calc(var(--gap) * -1);\n margin-right: calc(var(--p) * -1);\n border-bottom: 1px solid var(--color-white);\n align-self: --value('start', 'end');\n}\n\n/**\n * Horizontal line where it starts and ends inside the grid.\n */\n@utility line-h-mid-* {\n margin-left: calc(var(--gap) * -1);\n margin-right: calc(var(--gap) * -1);\n border-bottom: 1px solid var(--color-white);\n align-self: --value('start', 'end');\n}\n\n \n \n A\n B\n C\n D\n E\n F\n G\n H\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n \n \n\n```\n\nAgain, you can go further still. It seems like there is always a pair of lines, so perhaps there's some abstraction that could be done there.\n\n========================================\n\nCode:\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n * {\n box-sizing: border-box;\n }\n @utility border-line {\n content: \"\";\n display: block;\n position: absolute;\n background-color: #ffffff;\n }\n\n @utility border-line-vertical-right {\n @apply border-line;\n height: 200vh;\n width: 1px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n }\n\n @utility border-line-vertical-left {\n @apply border-line;\n height: 200vh;\n width: 1px;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n }\n\n @utility border-line-horizontal-top {\n @apply border-line;\n height: 1px;\n width: 200vw;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n }\n\n @utility border-line-horizontal-bottom {\n @apply border-line;\n height: 1px;\n width: 200vw;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n }\n</style>\n\n<body class=\"bg-gray-800 p-4\">\n <section class=\"h-[90vh] w-full overflow-hidden bg-gray-900 p-2 text-white\">\n <div class=\"grid h-full grid-cols-4 grid-rows-6 gap-10 border-1 border-white *:relative *:bg-gray-700\">\n <div class=\"row-span-6 after:border-line-vertical-right\">A</div>\n <div class=\"col-span-2 row-span-2 before:border-line-vertical-left after:border-line-horizontal-bottom\">\n B\n </div>\n <div class=\"row-span-6 after:border-line-vertical-left\">C</div>\n <div class=\"row-span-4 before:border-line-vertical-right before:border-line-horizontal-top after:border-line-vertical-right\">\n D\n </div>\n <div class=\"row-span-4 before:border-line-vertical-right after:border-line-vertical-left\">\n E\n </div>\n </div>\n </section>\n</body>\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@utility gap-* {\n --grid-gap: --spacing(--value(integer));\n --grid-gap: --value([*]);\n}\n\n@utility grid-lines {\n overflow: hidden;\n \n & > * {\n position: relative;\n padding: 1rem;\n\n @variant before {\n display: block;\n position: absolute;\n inset: 0;\n height: calc(100% + var(--grid-gap, 0) * 2);\n border-inline: 2px solid #fff;\n translate: 0 calc(var(--grid-gap, 0) * -1);\n }\n\n @variant after {\n display: block;\n position: absolute;\n inset: 0;\n width: calc(100% + var(--grid-gap, 0) * 2);\n border-block: 2px solid #fff;\n translate: calc(var(--grid-gap, 0) * -1) 0;\n }\n }\n}\n</style>\n\n<body class=\"bg-gray-800 p-4\">\n <section class=\"w-full overflow-hidden bg-gray-900 p-2 text-white\">\n <div class=\"grid grid-lines h-full grid-cols-4 grid-rows-6 gap-10 *:bg-gray-700\">\n <div class=\"row-span-6\">A</div>\n <div class=\"col-span-2 row-span-2\">B</div>\n <div class=\"row-span-6\">C</div>\n <div class=\"row-span-4\">D</div>\n <div class=\"row-span-4\">E</div>\n </div>\n </section>\n</body>\n```\n\n```text\nz-index\n```\n\n```text\nz-index\n```\n\n```text\nz-index\n```\n\n```text\nz-index\n```\n\n```text\nz-index\n```\n\n```text\ngap-*\n```\n\n```text\n100% + 2*gap\n```\n\n```text\n1*gap\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n\n<body class=\"bg-gray-800 p-4\">\n <section class=\"h-[90vh] w-full overflow-hidden bg-gray-900 p-(--p) [--p:--spacing(2)] text-white\">\n <div class=\"grid h-full grid-cols-4 grid-rows-[1fr_2fr] gap-(--gap) [--gap:--spacing(10)] border-1 border-white *:bg-gray-700\">\n <div class=\"p-px row-start-1 row-span-2 col-start-1\">A</div>\n <div class=\"p-px row-start-1 col-start-2 col-span-2\">B</div>\n <div class=\"p-px row-start-1 row-span-2 col-start-4\">C</div>\n <div class=\"p-px row-start-2 col-start-2\">D</div>\n <div class=\"p-px row-start-2 col-start-3\">E</div>\n \n <!-- Full height vertical lines -->\n <div class=\"row-span-full col-start-1 justify-self-end border-r border-white -my-(--p)\"></div>\n <div class=\"row-span-full col-start-2 justify-self-start border-r border-white -my-(--p)\"></div>\n <div class=\"row-span-full col-start-3 justify-self-end border-r border-white -my-(--p)\"></div>\n <div class=\"row-span-full col-start-4 justify-self-start border-r border-white -my-(--p)\"></div>\n\n <!-- D,E half vertical lines -->\n <div class=\"row-start-2 col-start-2 justify-self-end border-r border-white -mt-(--gap) -mb-(--p)\"></div>\n <div class=\"row-start-2 col-start-3 justify-self-start border-r border-white -mt-(--gap) -mb-(--p)\"></div>\n \n <!-- Horizontal lines -->\n <div class=\"row-start-1 col-start-2 col-span-2 self-end border-b border-white -mx-(--gap)\"></div>\n <div class=\"row-start-2 col-start-2 col-span-2 self-start border-b border-white -mx-(--gap)\"></div>\n </div>\n </section>\n</body>\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n\n<style type=\"text/tailwindcss\">\n/**\n * Vertical line from top to bottom.\n */\n@utility line-v-full-* {\n grid-row: 1 / -1;\n margin-block: calc(var(--p) * -1);\n border-right: 1px solid var(--color-white);\n justify-self: --value('start', 'end');\n}\n\n/**\n * Vertical line where the top starts mid-grid and ends at the bottom.\n */\n@utility line-v-bottom-* {\n grid-row-end: -1;\n margin-top: calc(var(--gap) * -1);\n margin-bottom: calc(var(--p) * -1);\n border-right: 1px solid var(--color-white);\n justify-self: --value('start', 'end');\n}\n\n/**\n * Horizontal line where the left and right finish mid-grid.\n */\n@utility line-h-mid-* {\n margin-inline: calc(var(--gap) * -1);\n border-bottom: 1px solid var(--color-white);\n align-self: --value('start', 'end');\n}\n</style>\n\n<body class=\"bg-gray-800 p-4\">\n <section class=\"h-[90vh] w-full overflow-hidden bg-gray-900 p-(--p) [--p:--spacing(2)] text-white\">\n <div class=\"grid h-full grid-cols-4 grid-rows-[1fr_2fr] gap-(--gap) [--gap:--spacing(10)] border-1 border-white *:bg-gray-700\">\n <div class=\"p-px row-start-1 row-span-2 col-start-1\">A</div>\n <div class=\"p-px row-start-1 col-start-2 col-span-2\">B</div>\n <div class=\"p-px row-start-1 row-span-2 col-start-4\">C</div>\n <div class=\"p-px row-start-2 col-start-2\">D</div>\n <div class=\"p-px row-start-2 col-start-3\">E</div>\n \n <!-- Full height vertical lines -->\n <div class=\"col-start-1 line-v-full-end\"></div>\n <div class=\"col-start-2 line-v-full-start\"></div>\n <div class=\"col-start-3 line-v-full-end\"></div>\n <div class=\"col-start-4 line-v-full-start\"></div>\n\n <!-- D,E half vertical lines -->\n <div class=\"row-start-2 col-start-2 line-v-bottom-end\"></div>\n <div class=\"row-start-2 col-start-3 line-v-bottom-start\"></div>\n \n <!-- Horizontal lines -->\n <div class=\"row-start-1 col-start-2 col-span-2 line-h-mid-end\"></div>\n <div class=\"row-start-2 col-start-2 col-span-2 line-h-mid-start\"></div>\n </div>\n </section>\n</body>\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n\n<style type=\"text/tailwindcss\">\n/**\n * Vertical line from top to bottom.\n */\n@utility line-v-full-* {\n grid-row: 1 / -1;\n margin-block: calc(var(--p) * -1);\n border-right: 1px solid var(--color-white);\n justify-self: --value('start', 'end');\n}\n\n/**\n * Vertical line where the top starts at the top edge and ends at mid grid.\n */\n@utility line-v-top-* {\n grid-row-start: 1;\n margin-top: calc(var(--p) * -1);\n margin-bottom: calc(var(--gap) * -1);\n border-right: 1px solid var(--color-white);\n justify-self: --value('start', 'end');\n}\n\n/**\n * Vertical line where the top starts mid-grid and ends at the bottom.\n */\n@utility line-v-bottom-* {\n grid-row-end: -1;\n margin-top: calc(var(--gap) * -1);\n margin-bottom: calc(var(--p) * -1);\n border-right: 1px solid var(--color-white);\n justify-self: --value('start', 'end');\n}\n\n/**\n * Vertical line where it starts and ends inside the grid.\n */\n@utility line-v-mid-* {\n margin-top: calc(var(--gap) * -1);\n margin-bottom: calc(var(--gap) * -1);\n border-right: 1px solid var(--color-white);\n justify-self: --value('start', 'end');\n}\n\n/**\n * Horizontal line from left to right.\n */\n@utility line-h-full-* {\n grid-column: 1 / -1;\n margin-inline: calc(var(--p) * -1);\n border-bottom: 1px solid var(--color-white);\n align-self: --value('start', 'end');\n}\n\n/**\n * Horizontal line where the left starts at the left edge and ends at mid grid.\n */\n@utility line-h-left-* {\n grid-column-start: 1;\n margin-left: calc(var(--p) * -1);\n margin-right: calc(var(--gap) * -1);\n border-bottom: 1px solid var(--color-white);\n align-self: --value('start', 'end');\n}\n\n/**\n * Horizontal line where the left starts mid-grid and ends at the right edge.\n */\n@utility line-h-right-* {\n grid-column-end: -1;\n margin-left: calc(var(--gap) * -1);\n margin-right: calc(var(--p) * -1);\n border-bottom: 1px solid var(--color-white);\n align-self: --value('start', 'end');\n}\n\n/**\n * Horizontal line where it starts and ends inside the grid.\n */\n@utility line-h-mid-* {\n margin-left: calc(var(--gap) * -1);\n margin-right: calc(var(--gap) * -1);\n border-bottom: 1px solid var(--color-white);\n align-self: --value('start', 'end');\n}\n</style>\n\n<body class=\"bg-gray-800 p-4\">\n <section class=\"h-[90vh] w-full overflow-hidden bg-gray-900 p-(--p) [--p:--spacing(2)] text-white\">\n <div class=\"grid h-full grid-cols-6 grid-rows-6 gap-(--gap) [--gap:--spacing(4)] border-1 border-white *:bg-gray-700\">\n <div class=\"p-px row-start-1 row-span-full col-start-1\">A</div>\n <div class=\"p-px row-start-1 col-start-2 col-span-full\">B</div>\n <div class=\"p-px row-start-2 col-start-2\">C</div>\n <div class=\"p-px row-start-2 row-span-3 col-start-4 col-span-3\">D</div>\n <div class=\"p-px row-start-2 col-start-3 row-span-4\">E</div>\n <div class=\"p-px row-start-3 col-start-2 -row-end-2\">F</div>\n <div class=\"p-px row-start-6 col-start-2 col-span-2\">G</div>\n <div class=\"p-px row-start-5 row-span-2 col-start-4 -col-end-1\">H</div>\n \n <!-- A,B full height -->\n <div class=\"col-start-1 line-v-full-end\"></div>\n <div class=\"col-start-2 line-v-full-start\"></div>\n\n <!-- E,D -->\n <div class=\"row-start-2 -row-end-1 col-start-3 line-v-bottom-end\"></div>\n <div class=\"row-start-2 -row-end-1 col-start-4 line-v-bottom-start\"></div>\n\n <!-- C,E -->\n <div class=\"row-start-2 -row-end-2 col-start-2 line-v-mid-end\"></div>\n <div class=\"row-start-2 -row-end-2 col-start-3 line-v-mid-start\"></div>\n \n <!-- B,C -->\n <div class=\"row-start-1 col-start-2 -col-end-1 line-h-right-end\"></div>\n <div class=\"row-start-2 col-start-2 -col-end-1 line-h-right-start\"></div>\n \n <!-- C,F -->\n <div class=\"row-start-2 col-start-2 line-h-mid-end\"></div>\n <div class=\"row-start-3 col-start-2 line-h-mid-start\"></div>\n\n <!-- C,F -->\n <div class=\"row-start-5 col-start-2 col-span-2 line-h-mid-end\"></div>\n <div class=\"row-start-6 col-start-2 col-span-2 line-h-mid-start\"></div>\n\n <!-- D,H -->\n <div class=\"row-start-4 col-start-4 line-h-right-end\"></div>\n <div class=\"row-start-5 col-start-4 line-h-right-start\"></div>\n </div>\n </section>\n</body>\n```\n\n```text\npadding\n```\n\n```text\ngap\n```\n\n========================================\n\nComments:\n- Hm. Maybe: play.tailwindcss.com/hW4mfgu44Z\n- Off - @DevWebTk This is quite a useful tool for improving English grammar: github.com/Automattic/harper\n- I understand your point about preserving human-to-human interactions. However, the evolution of technology itself can feel like a “threat” to traditional ways of working — that doesn’t mean we should avoid adopting it. The primary purpose of any technology is to make tasks easier. Here, I used a modern tool — a language model — only to improve the clarity of my question, nothing more.\n- To give an analogy: before high-level programming languages existed, we had low-level languages. If we refused high-level languages, developers would have to manage hardware directly. Clearly, adopting new tools doesn’t replace understanding, it just improves efficiency. The reality is that things are always changing, and we should adopt new tools responsibly, ensuring they are used in line with their intended purpose.","metadata":{"transformedAt":"2026-08-18T18:33:42.934Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":731,"estimatedTokens":4634}}628{"id":"stack-65996174","source":"stackoverflow","questionId":65996174,"title":"How to deal with Tailwind & PurgeCSS and A LOT of different folders?","tags":["tailwind-css","css-purge"],"text":"Title: How to deal with Tailwind & PurgeCSS and A LOT of different folders?\nTags: tailwind-css, css-purge\nSource: Stack Overflow\n\nQuestion:\nI've been using Tailwind with the \"Purge\" option to make the final css file a lot smaller and successfully. However, I've been wondering about the efficience of my methods. I'm working on projects that have got a lot of subfolders, which I all specify like:\n\n```\npurge: {\n layers: ['components', 'utilities', 'base'],\n content: [\n '../A.Umb.E.Platform.Frontend/Assets/**/*.css',\n '../A.Umb.E.Platform.Vue/src/Apps/ESearch/*.vue',\n '../A.Umb.E.Platform.Vue/src/Apps/ESearch/Components/*.vue',\n '../A.Umb.E.Platform.Vue/src/Apps/HSearch/*.vue',\n '../A.Umb.E.Platform.Vue/src/Apps/HSearch/Components/*.vue',\n '../A.Umb.E.Platform.Web/Views/**/*.cshtml',\n '../A.Umb.E.Platform.Web/Views/**/**/*.cshtml',\n '../A.Umb.E.Platform.Web/Views/**/**/**/*.cshtml',\n '../A.Umb.E.Platform.Web/Views/**/**/**/**/*.cshtml',\n\n ]\n }\n```\n\nI've been looking for a solution to this inefficient method, but all I can find is examples of tiny projects that have got only a few html or vue files in the same folder. So my question: is there a way to do this more efficiently or am I bound to do it like I already did?\n\n========================================\n\nCode:\n```text\npurge: {\n layers: ['components', 'utilities', 'base'],\n content: [\n '../A.Umb.E.Platform.Frontend/Assets/**/*.css',\n '../A.Umb.E.Platform.Vue/src/Apps/ESearch/*.vue',\n '../A.Umb.E.Platform.Vue/src/Apps/ESearch/Components/*.vue',\n '../A.Umb.E.Platform.Vue/src/Apps/HSearch/*.vue',\n '../A.Umb.E.Platform.Vue/src/Apps/HSearch/Components/*.vue',\n '../A.Umb.E.Platform.Web/Views/**/*.cshtml',\n '../A.Umb.E.Platform.Web/Views/**/**/*.cshtml',\n '../A.Umb.E.Platform.Web/Views/**/**/**/*.cshtml',\n '../A.Umb.E.Platform.Web/Views/**/**/**/**/*.cshtml',\n\n ]\n }\n```\n\n```text\npurge: {\n layers: ['components', 'utilities', 'base'],\n content: [\n '../A.Umb.E.Platform.Frontend/Assets/**/*.css',\n '../A.Umb.E.Platform.Vue/src/Apps/**/*.vue',\n '../A.Umb.E.Platform.Web/Views/**/*.cshtml'\n ]\n}\n```\n\n```text\nglob\n```\n\n```text\n**\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.934Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":66,"estimatedTokens":564}}629{"id":"stack-71725430","source":"stackoverflow","questionId":71725430,"title":"BackgroundImage is not changing dynamically using tailwind & nextjs","tags":["javascript","reactjs","next.js","background","tailwind-css"],"text":"Title: BackgroundImage is not changing dynamically using tailwind & nextjs\nTags: javascript, reactjs, next.js, background, tailwind-css\nSource: Stack Overflow\n\nQuestion:\n### Intro\n\nI am creating a weather application with nextJS and TailwindCSS. I had almost created the whole application but stuck at the end with this UI issue.\nhttps://i.sstatic.net/rjBWE.jpg\n\n### What do I want?\n\nI want to change the backgroundImage dynamically depending upon the weather description ( ex: clear sky, haze, rain, snow).\n\n### Problem\n\nFor that I had written a function `changeBackground(\"rain\")` but it is not working. I had defined all the image paths in the `tailwind.config.js` file. After debugging, I found that the function is giving the correct answer (printed answer in console) but my `className=\"bg-${changeBackground(\"rain\")}\"` not working. Below is the code for this\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {\n backgroundImage: {\n 'day_sun' : \"url('../public/back_big.jpg')\",\n 'day_rain' : \"url('../public/dayrain.jpg')\",\n 'day_cloud' : \"url('../public/daycloud2.jpg')\",\n 'day_snow' : \"url('../public/daysnow.jpg')\",\n 'night_sun' : \"url('../public/nightsunny.jpg')\",\n 'night_snow' : \"url('../public/nightsnow.jpg')\",\n 'night_thunder' : \"url('../public/nightthunder.jpg')\",\n }\n },\n },\n plugins: [],\n}\n```\n\n**index.js**\n\n```\nimport Head from \"next/head\";\nimport { useEffect } from \"react\";\nimport Image from \"next/image\";\nimport { useState } from \"react\";\nimport Today_highlight from \"./components/Today_highlight\";\nimport Weather_Today from \"./components/Weather_Today\";\nimport Weather_week from \"./components/Weather_week\";\nimport searchimageurl from \"../public/search.gif\";\nimport Typed from \"react-typed\";\n\nconst Home = () => {\n //console.log(\"res1 = \", results1);\n //const router = useRouter();\n const [city, setCity] = useState(\"\");\n const [data, setData] = useState({ day: {}, week: {} });\n\n \n\n //for the first time\n useEffect(() => {\n (async () => {\n const url = `https://api.openweathermap.org/data/2.5/weather?q=Delhi&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;\n const res1 = await fetch(url);\n const response1 = await res1.json();\n //console.log(\"res1 = \",response1);\n\n //api-2\n const url1 = `https://api.openweathermap.org/data/2.5/forecast/daily?q=Delhi&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;\n const res2 = await fetch(url1);\n const response2 = await res2.json();\n //console.log(\"res2 = \",response2);\n\n setData({ day: response1, week: response2 });\n })();\n }, []);\n\n const handleChange = (e) => {\n setCity(e.target.value);\n //console.log(city)\n };\n\n const handleSubmit = async (e) => {\n //console.log(\"%c ClickSubmit\",\"font-size:12px; color:green; padding:10px;\")\n //console.log(\"city = \", city);\n //router.push(`/?term=${city}`);\n\n const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;\n const res = await fetch(url);\n const data1 = await res.json();\n //console.log(data1);\n\n //api-2\n const url1 = `https://api.openweathermap.org/data/2.5/forecast/daily?q=${city}&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;\n const res1 = await fetch(url1);\n const data2 = await res1.json();\n //console.log(data2);\n setData({ day: data1, week: data2 });\n };\n\n //console.log(data);\n const weather = data?.day?.weather;\n \n //console.log(\"we - \",weather[0]?.description)\n //fn to determine the bg\n function changebackground(des) {\n //console.log(\"des =\",des)\n\n if (des === \"sky is clear\" || des === \"clear sky\") return 'day_sun';\n else if (des === \"few clouds\") return 'day_cloud';\n else if (des === \"scattered clouds\") return 'day_cloud';\n else if (des === \"broken clouds\" || des === \"overcast clouds\")\n return 'day_cloud';\n else if (\n des === \"shower rain\" ||\n des === \"light rain\" ||\n des === \"drizzle\" ||\n des === \"moderate rain\"\n )\n return 'day_rain';\n else if (\n des === \"rain\" ||\n des === \"very heavy rain\" ||\n des === \"heavy intensity rain\" ||\n des === \"extreme rain\" ||\n des === \"heavy intensity shower rain\"\n )\n return 'day_rain';\n else if (\n des === \"thunderstorm\" ||\n des === \"light thunderstorm\" ||\n des === \"heavy thunderstorm\" ||\n des === \"ragged thunderstorm\" ||\n des === \"thunderstorm with rain\"\n )\n return 'night_thunder';\n else if (des === \"snow\" || des === \"light snow\" || des === \"heavy snow\")\n return 'day_snow';\n else if (\n des === \"light rain and snow\" ||\n des === \"rain and snow\" ||\n des === \"light shower snow\"\n )\n return 'night_snow';\n else if (\n des === \"mist\" ||\n des === \"fog\" ||\n des === \"smoke\" ||\n des === \"haze\"\n )\n return 'day_rain';\n else return 'day_sun';\n }\n\n console.log(changebackground(\"snow\"),\"-> picture\")\n\n return (\n <>\n \n Weather-Lytics\n \n \n \n\n \n {/* input */}\n \n \n \n \n \n \n \n handleSubmit()}\n >\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default Home;\n```\n\n### Please help me to do so???\n\n========================================\n\nTop Answer:\nTailwindCss don't allow construct class names dynamically.\ninstead use\n\n```\nif (des === \"sky is clear\" || des === \"clear sky\") return 'bg-day_sun';\n else if (des === \"few clouds\") return 'bg-day_cloud';\n else if (des === \"scattered clouds\") return 'bg-day_cloud';\n else if (des === \"broken clouds\" || des === \"overcast clouds\")\n return 'bg-day_cloud';\n else if (\n des === \"shower rain\" ||\n des === \"light rain\" ||\n des === \"drizzle\" ||\n des === \"moderate rain\"\n )\n return 'bg-day_rain';\n else if (\n des === \"rain\" ||\n des === \"very heavy rain\" ||\n des === \"heavy intensity rain\" ||\n des === \"extreme rain\" ||\n des === \"heavy intensity shower rain\"\n )\n return 'bg-day_rain';\n else if (\n des === \"thunderstorm\" ||\n des === \"light thunderstorm\" ||\n des === \"heavy thunderstorm\" ||\n des === \"ragged thunderstorm\" ||\n des === \"thunderstorm with rain\"\n )\n return 'night_thunder';\n else if (des === \"snow\" || des === \"light snow\" || des === \"heavy snow\")\n return 'bg-day_snow';\n else if (\n des === \"light rain and snow\" ||\n des === \"rain and snow\" ||\n des === \"light shower snow\"\n )\n return 'bg-night_snow';\n else if (\n des === \"mist\" ||\n des === \"fog\" ||\n des === \"smoke\" ||\n des === \"haze\"\n )\n return 'bg-day_rain';\n else return 'day_sun';\n }\n```\n\nand in your CSR use\n\n```\n\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {\n backgroundImage: {\n 'day_sun' : \"url('../public/back_big.jpg')\",\n 'day_rain' : \"url('../public/dayrain.jpg')\",\n 'day_cloud' : \"url('../public/daycloud2.jpg')\",\n 'day_snow' : \"url('../public/daysnow.jpg')\",\n 'night_sun' : \"url('../public/nightsunny.jpg')\",\n 'night_snow' : \"url('../public/nightsnow.jpg')\",\n 'night_thunder' : \"url('../public/nightthunder.jpg')\",\n }\n },\n },\n plugins: [],\n}\n```\n\n```text\nimport Head from \"next/head\";\nimport { useEffect } from \"react\";\nimport Image from \"next/image\";\nimport { useState } from \"react\";\nimport Today_highlight from \"./components/Today_highlight\";\nimport Weather_Today from \"./components/Weather_Today\";\nimport Weather_week from \"./components/Weather_week\";\nimport searchimageurl from \"../public/search.gif\";\nimport Typed from \"react-typed\";\n\n\nconst Home = () => {\n //console.log(\"res1 = \", results1);\n //const router = useRouter();\n const [city, setCity] = useState(\"\");\n const [data, setData] = useState({ day: {}, week: {} });\n\n \n\n\n //for the first time\n useEffect(() => {\n (async () => {\n const url = `https://api.openweathermap.org/data/2.5/weather?q=Delhi&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;\n const res1 = await fetch(url);\n const response1 = await res1.json();\n //console.log(\"res1 = \",response1);\n\n //api-2\n const url1 = `https://api.openweathermap.org/data/2.5/forecast/daily?q=Delhi&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;\n const res2 = await fetch(url1);\n const response2 = await res2.json();\n //console.log(\"res2 = \",response2);\n\n setData({ day: response1, week: response2 });\n })();\n }, []);\n\n\n const handleChange = (e) => {\n setCity(e.target.value);\n //console.log(city)\n };\n\n const handleSubmit = async (e) => {\n //console.log(\"%c ClickSubmit\",\"font-size:12px; color:green; padding:10px;\")\n //console.log(\"city = \", city);\n //router.push(`/?term=${city}`);\n\n const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;\n const res = await fetch(url);\n const data1 = await res.json();\n //console.log(data1);\n\n //api-2\n const url1 = `https://api.openweathermap.org/data/2.5/forecast/daily?q=${city}&appid=${process.env.NEXT_PUBLIC_API_KEY_1}`;\n const res1 = await fetch(url1);\n const data2 = await res1.json();\n //console.log(data2);\n setData({ day: data1, week: data2 });\n };\n\n //console.log(data);\n const weather = data?.day?.weather;\n \n //console.log(\"we - \",weather[0]?.description)\n //fn to determine the bg\n function changebackground(des) {\n //console.log(\"des =\",des)\n\n if (des === \"sky is clear\" || des === \"clear sky\") return 'day_sun';\n else if (des === \"few clouds\") return 'day_cloud';\n else if (des === \"scattered clouds\") return 'day_cloud';\n else if (des === \"broken clouds\" || des === \"overcast clouds\")\n return 'day_cloud';\n else if (\n des === \"shower rain\" ||\n des === \"light rain\" ||\n des === \"drizzle\" ||\n des === \"moderate rain\"\n )\n return 'day_rain';\n else if (\n des === \"rain\" ||\n des === \"very heavy rain\" ||\n des === \"heavy intensity rain\" ||\n des === \"extreme rain\" ||\n des === \"heavy intensity shower rain\"\n )\n return 'day_rain';\n else if (\n des === \"thunderstorm\" ||\n des === \"light thunderstorm\" ||\n des === \"heavy thunderstorm\" ||\n des === \"ragged thunderstorm\" ||\n des === \"thunderstorm with rain\"\n )\n return 'night_thunder';\n else if (des === \"snow\" || des === \"light snow\" || des === \"heavy snow\")\n return 'day_snow';\n else if (\n des === \"light rain and snow\" ||\n des === \"rain and snow\" ||\n des === \"light shower snow\"\n )\n return 'night_snow';\n else if (\n des === \"mist\" ||\n des === \"fog\" ||\n des === \"smoke\" ||\n des === \"haze\"\n )\n return 'day_rain';\n else return 'day_sun';\n }\n\n console.log(changebackground(\"snow\"),\"-> picture\")\n\n return (\n <>\n <Head>\n <title>Weather-Lytics</title>\n <meta name=\"description\" content=\"Generated by create next app\" />\n <link rel=\"icon\" href=\"/favicon.ico\" />\n </Head>\n\n <div className={`lg:bg-${changebackground(\"snow\")} bg-no-repeat`} >\n {/* input */}\n <div className=\"p-3 xl:p-5 flex flex-row justify-center items-center space-x-2 xl:space-x-5 \">\n <div className=\" border-2 border-stone-700 rounded-full \">\n <Typed\n strings={[\n \"Search for Delhi\",\n \"Search for Tokyo\",\n \"Search for California\",\n \"Search for Ulaanbaatar\",\n ]}\n typeSpeed={30}\n backSpeed={50}\n attr=\"placeholder\"\n loop\n >\n <input\n className=\"w-full rounded-full p-2 xl:p-4 pl-5 xl:pl-10 text-base xl:text-3xl text-blue-800 font-bold active:rounded-full \"\n value={city}\n type=\"text\"\n onChange={handleChange}\n />\n </Typed>\n </div>\n <div>\n <button\n className=\"p-1 m-auto p-auto\"\n onClick={() => handleSubmit()}\n >\n <div className=\"w-14 h-14 xl:w-16 xl:h-16 p-2 rounded-full bg-pink-400 border-2 hover:bg-pink-600 border-white\">\n <Image\n src={searchimageurl}\n layout=\"responsive\"\n alt=\"Search_icon\"\n className=\" rounded-full p-3 bg-blue-900 \"\n />\n </div>\n </button>\n </div>\n </div>\n\n <div className=\"min-h-full flex flex-col lg:flex-row justify-evenly \">\n <div className=\"bg-white/50 xl:bg-white/70 w-full h-full lg:w-1/4 lg:h-full xl:m-4 rounded-lg xl:rounded-3xl\">\n <Weather_Today results={data.day} />\n </div>\n <div className=\" lg:h-full\">\n <div className=\"min-h-full flex flex-col\">\n <div className=\"bg-white/50 xl:bg-white/70 xl:m-4 xl:rounded-3xl\">\n <Today_highlight results={data.day} />\n </div>\n <div className=\"bg-white/50 xl:bg-white/70 xl:m-4 xl:rounded-3xl\">\n <Weather_week results1={data.week} />\n </div>\n </div>\n </div>\n </div>\n </div>\n </>\n );\n};\n\n\nexport default Home;\n```\n\n```text\nchangeBackground(\"rain\")\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nclassName=\"bg-${changeBackground(\"rain\")}\"\n```\n\n```text\n`lg:bg-${changebackground(\"snow\")}`\n```\n\n```text\nconst backgroundClasses = {\n day_snow: 'lg:bg-day_snow',\n day_sun: 'lg:bg-day_sun',\n // ...\n}\n```\n\n```text\nif (des === \"sky is clear\" || des === \"clear sky\") return 'bg-day_sun';\n else if (des === \"few clouds\") return 'bg-day_cloud';\n else if (des === \"scattered clouds\") return 'bg-day_cloud';\n else if (des === \"broken clouds\" || des === \"overcast clouds\")\n return 'bg-day_cloud';\n else if (\n des === \"shower rain\" ||\n des === \"light rain\" ||\n des === \"drizzle\" ||\n des === \"moderate rain\"\n )\n return 'bg-day_rain';\n else if (\n des === \"rain\" ||\n des === \"very heavy rain\" ||\n des === \"heavy intensity rain\" ||\n des === \"extreme rain\" ||\n des === \"heavy intensity shower rain\"\n )\n return 'bg-day_rain';\n else if (\n des === \"thunderstorm\" ||\n des === \"light thunderstorm\" ||\n des === \"heavy thunderstorm\" ||\n des === \"ragged thunderstorm\" ||\n des === \"thunderstorm with rain\"\n )\n return 'night_thunder';\n else if (des === \"snow\" || des === \"light snow\" || des === \"heavy snow\")\n return 'bg-day_snow';\n else if (\n des === \"light rain and snow\" ||\n des === \"rain and snow\" ||\n des === \"light shower snow\"\n )\n return 'bg-night_snow';\n else if (\n des === \"mist\" ||\n des === \"fog\" ||\n des === \"smoke\" ||\n des === \"haze\"\n )\n return 'bg-day_rain';\n else return 'day_sun';\n }\n```\n\n```text\n<div className={`lg:${changebackground(\"snow\")} bg-no-repeat`} >\n```\n\n========================================\n\nComments:\n- I'm fairly sure `lg:${changebackground(\"snow\")}` still counts as a dynamic class name. instead, include the `lg:` as part of the return value for that function.\n- \"lg\" is a media-query right?\n- Yes `lg` is a breakpoint for screen (for large screen)","metadata":{"transformedAt":"2026-08-18T18:33:42.934Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":572,"estimatedTokens":3754}}630{"id":"stack-75660470","source":"stackoverflow","questionId":75660470,"title":"Tailwind: How to style element based on peer checked state, if target peer is descendant of sibling","tags":["tailwind-css"],"text":"Title: Tailwind: How to style element based on peer checked state, if target peer is descendant of sibling\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn the following example:\n\n```\n\n \n\n \n Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.\n Salutantibus vitae elit libero, a pharetra augue. Quam diu \n etiam furor iste tuus nos eludet? Fabio vel iudice vincam, \n sunt in culpa qui officia. Quam temere in vitiis, legem \n sancimus haerentia. Quisque ut dolor gravida, placerat libero\n vel, euismod.\n \n\n```\n\nhttps://play.tailwindcss.com/wCVr7xrBco\n\nI am trying to change an element based of the checked state of the descendant of a sibling.\n\nI've tried arbitrary peers but can't seem to create a custom selector that achieves this. I've also looked into arbitrary variants but I'm finding it difficult to wrap my head around them and am not sure this is the right use case for them.\n\nI wish I could just have the elements as direct siblings, but unfortunately in this situation that's not possible.\n\n========================================\n\nTop Answer:\nIf you remove the div from around the input, it will work. Then the div with the text div is a direct peer from the input. Now, it is a peer of the div around the input.\n\n```\n\n Text here\n\n```\n\n========================================\n\nCode:\n```html\n<div>\n <input class=\"peer\" type=\"checkbox\" />\n</div>\n<div class=\"peer-checked:text-red-600\">\n <div>\n Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.\n Salutantibus vitae elit libero, a pharetra augue. Quam diu \n etiam furor iste tuus nos eludet? Fabio vel iudice vincam, \n sunt in culpa qui officia. Quam temere in vitiis, legem \n sancimus haerentia. Quisque ut dolor gravida, placerat libero\n vel, euismod.\n </div>\n</div>\n```\n\n```html\n<div class=\"peer\">\n <input type=\"checkbox\" />\n</div>\n<div class=\"peer-has-[:checked]:text-red-600\">\n <div>\n Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.\n Salutantibus vitae elit libero, a pharetra augue. Quam diu \n etiam furor iste tuus nos eludet? Fabio vel iudice vincam, \n sunt in culpa qui officia. Quam temere in vitiis, legem \n sancimus haerentia. Quisque ut dolor gravida, placerat libero\n vel, euismod.\n </div>\n</div>\n```\n\n```text\npeer-has-[]\n```\n\n```text\n<input class=\"peer\" type=\"checkbox\">\n\n<div class=\"peer-checked:text-red-600\">\n <p>Text here</p>\n</div>\n```\n\n========================================\n\nComments:\n- Thanks for the answer, but I did say in the question \"I wish I could just have the elements as direct siblings, but unfortunately in this situation that's not possible.\"\n- Thanks! This was in a recent Tailwind release: tailwindcss.com/blog/tailwindcss-v3-4#new-has-variant - so make sure you're updated to at least 3.4 to be able to use this.","metadata":{"transformedAt":"2026-08-18T18:33:42.934Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":93,"estimatedTokens":703}}631{"id":"stack-60472110","source":"stackoverflow","questionId":60472110,"title":"Positioning of HTML elements in Tailwind css","tags":["html","css","vue.js","css-position","tailwind-css"],"text":"Title: Positioning of HTML elements in Tailwind css\nTags: html, css, vue.js, css-position, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to learn `tailwind-css` or I would say learning `css` where I'm struggling with the position of elements. Working on `Vue js` components.\n\nI achieved the designing few of the elements so far:\n\nhttps://i.sstatic.net/3dFsV.png\n\nhttps://i.sstatic.net/fXS9I.png\n\nhttps://i.sstatic.net/6NIVy.png\n\nhttps://i.sstatic.net/TodoU.png\n\nI want to add some shapes or designs inside the `banner/dark-blue` area and then would add some widget-box inside of it. My code look something like this:\n\n```\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n\nFor reference to the components code: https://github.com/nitish1986/sample_website\n\nMy approach was to fix position of the parent element or make it relative then position the shapes with absolute positioning respective to its parent element but whenever I try to put absolute position the shapes reaches to the top of the website. It is not taking respective positioning\n\n```\n\n \n \n \n \n\n```\n\nHow can achieve this positioning? I want to achieve something like this:\n\nhttps://i.sstatic.net/3DSnS.png\n\nAny better approach into it are most welcome. Thanks.\n\n========================================\n\nCode:\n```text\n<div class=\"bg-white block\">\n <nav-bar></nav-bar>\n <div class=\"hidden md:block w-2/5 top-0 left-0\">\n <img src=\"/nits-assets/images/body_shape.png\" alt=\"shape\" align=\"left\">\n </div>\n <div class=\"hidden md:block\">\n <img src=\"/nits-assets/images/body_shape_2.png\" alt=\"shape\" align=\"right\">\n </div>\n <div class=\"block\">\n <div class=\"absolute w-full top-0 pl-12 pr-12 pt-40\">\n <slider></slider>\n <div class=\"flex justify-around\">\n <card></card>\n <card></card>\n <card></card>\n <card></card>\n </div>\n </div>\n </div>\n <div class=\"block\">\n <div class=\"bg-white overlflow-hidden\">\n <div class=\"relative\">\n <img src=\"/nits-assets/images/screenshot_banner.png\" alt=\"screenshot_banner\" align=\"center\">\n <img class=\"absolute top-0 left-0\" src=\"/nits-assets/images/pattern_1.png\" alt=\"banner\" align=\"left\">\n </div>\n </div>\n </div>\n <feature></feature>\n</div>\n```\n\n```text\n<div class=\"bg-white overlflow-hidden\">\n <div class=\"relative\">\n <img src=\"/nits-assets/images/screenshot_banner.png\" alt=\"screenshot_banner\" align=\"center\">\n <img class=\"absolute top-0 left-0\" src=\"/nits-assets/images/pattern_1.png\" alt=\"banner\" align=\"left\">\n </div>\n</div>\n```\n\n```text\ntailwind-css\n```\n\n```text\ncss\n```\n\n```text\nVue js\n```\n\n```text\nbanner/dark-blue\n```\n\n```text\n<div class=\"bg-white block\">\n <nav-bar></nav-bar>\n <div class=\"hidden md:block w-2/5 top-0 h-auto\">\n <img src=\"/nits-assets/images/body_shape.png\" alt=\"shape\" align=\"left\">\n </div>\n <div class=\"hidden md:block h-auto\">\n <img src=\"/nits-assets/images/body_shape_2.png\" alt=\"shape\" align=\"right\">\n </div>\n <div class=\"block bg-white h-screen\">\n <div class=\"relative\">\n <div class=\"absolute w-full top-0 pl-12 pr-12 pt-40\">\n <slider></slider>\n <div class=\"flex justify-around\">\n <card></card>\n <card></card>\n <card></card>\n <card></card>\n </div>\n </div>\n </div>\n </div>\n <div class=\"block mt-48 p-56\">\n <div class=\"p-2 w-full h-100\"></div>\n </div>\n <feature></feature>\n <preview></preview>\n <about-us></about-us>\n</div>\n```\n\n```text\n<div class=\"block mt-48 p-56\">\n <div class=\"p-2 w-full h-100\"></div>\n</div>\n```\n\n========================================\n\nComments:\n- Is using background images with the content you desire an option? If not, why?\n- If you're able to get your code on JSFiddle or codepen I'll gladly take a look","metadata":{"transformedAt":"2026-08-18T18:33:42.934Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":172,"estimatedTokens":1006}}632{"id":"stack-79509973","source":"stackoverflow","questionId":79509973,"title":"Tailwind CSS not generating standard utility classes however arbitrary classes working fine","tags":["reactjs","tailwind-css","tailwind-css-4"],"text":"Title: Tailwind CSS not generating standard utility classes however arbitrary classes working fine\nTags: reactjs, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI am working on a Vite + React project using Tailwind CSS v4, integrated with the `@tailwindcss/vite` plugin. I am facing an issue where standard Tailwind utility classes (text-white, mt-0, bg-black) are not being generated. However, arbitrary value classes working fine (`text-[#fff], mt-[0]`).\n\n**vite.config.js**\n\n```\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport tailwindcss from '@tailwindcss/vite';\n\nexport default defineConfig({\n plugins: [react(), tailwindcss()],\n // Previously tried with:\n // css: {\n // postcss: {\n // plugins: [\n // tailwindcss(), // Caused TS2769 error: Type Plugin[] is not assignable to type AcceptedPlugin\n // ],\n // },\n // },\n});\n```\n\n**index.css**\n\n```\n/* here google fonts */\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nbody {\n margin: 0;\n padding: 0;\n font-family: \"Inter\", sans-serif;\n}\n```\n\n**main.tsx**\n\n```\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom/client'\nimport App from './App'\nimport './index.css'\n\ncreateRoot(document.getElementById('root')!).render(\n \n \n ,\n)\n```\n\n**package.json**\n\n```\n{\n \"name\": \"...\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc -b && vite build\",\n \"lint\": \"eslint .\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"classnames\": \"^2.5.1\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"react-responsive\": \"^10.0.1\",\n \"swiper\": \"^11.2.5\"\n },\n \"devDependencies\": {\n \"@eslint/js\": \"^9.21.0\",\n \"@tailwindcss/vite\": \"^4.0.14\",\n \"@types/react\": \"^19.0.10\",\n \"@types/react-dom\": \"^19.0.4\",\n \"@vitejs/plugin-react\": \"^4.3.4\",\n \"autoprefixer\": \"^10.4.21\",\n \"eslint\": \"^9.21.0\",\n \"eslint-plugin-react-hooks\": \"^5.1.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.19\",\n \"globals\": \"^15.15.0\",\n \"postcss\": \"^8.5.3\",\n \"tailwindcss\": \"^4.0.14\",\n \"typescript\": \"~5.7.2\",\n \"typescript-eslint\": \"^8.24.1\",\n \"vite\": \"^6.2.0\"\n }\n}\n```\n\nI am not using `postcss.config.js`. Files where I using TailwindCSS exactly fit to the content pattern. I tried literally all, rebuild, rerun, reinstall `node_modules`, adding `safelist` in `tailwind.config.js`. So what could be reason of problem?\n\n========================================\n\nCode:\n```js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport tailwindcss from '@tailwindcss/vite';\n\nexport default defineConfig({\n plugins: [react(), tailwindcss()],\n // Previously tried with:\n // css: {\n // postcss: {\n // plugins: [\n // tailwindcss(), // Caused TS2769 error: Type Plugin<any>[] is not assignable to type AcceptedPlugin\n // ],\n // },\n // },\n});\n```\n\n```css\n/* here google fonts */\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nbody {\n margin: 0;\n padding: 0;\n font-family: \"Inter\", sans-serif;\n}\n```\n\n```js\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom/client'\nimport App from './App'\nimport './index.css'\n\ncreateRoot(document.getElementById('root')!).render(\n <StrictMode>\n <App />\n </StrictMode>,\n)\n```\n\n```json\n{\n \"name\": \"...\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc -b && vite build\",\n \"lint\": \"eslint .\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"classnames\": \"^2.5.1\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"react-responsive\": \"^10.0.1\",\n \"swiper\": \"^11.2.5\"\n },\n \"devDependencies\": {\n \"@eslint/js\": \"^9.21.0\",\n \"@tailwindcss/vite\": \"^4.0.14\",\n \"@types/react\": \"^19.0.10\",\n \"@types/react-dom\": \"^19.0.4\",\n \"@vitejs/plugin-react\": \"^4.3.4\",\n \"autoprefixer\": \"^10.4.21\",\n \"eslint\": \"^9.21.0\",\n \"eslint-plugin-react-hooks\": \"^5.1.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.19\",\n \"globals\": \"^15.15.0\",\n \"postcss\": \"^8.5.3\",\n \"tailwindcss\": \"^4.0.14\",\n \"typescript\": \"~5.7.2\",\n \"typescript-eslint\": \"^8.24.1\",\n \"vite\": \"^6.2.0\"\n }\n}\n```\n\n```text\n@tailwindcss/vite\n```\n\n```text\ntext-[#fff], mt-[0]\n```\n\n```text\npostcss.config.js\n```\n\n```text\nnode_modules\n```\n\n```text\nsafelist\n```\n\n```text\ntailwind.config.js\n```\n\n```css\n/*\n DEPRECATED\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n*/\n\n@import \"tailwindcss\";\n```\n\n```text\n@tailwind\n```\n\n========================================\n\nComments:\n- I slightly improved the formatting of your question, and that’s when something caught my eye: \"in tailwind.config.js\"; starting from v4, tailwind.config.js is no longer required. Instead, a CSS-first configuration has been introduced. However, you still have the option to revert to the legacy JS-based configuration if needed. --- You can read more about it here: New CSS-first configuration option in v4\n- Other related breaking changes: What's changed in v4; and How to install React with TailwindCSS v4 using PostCSS -> with PostCSS or from v4 can use directly Vite integrated `@tailwindcss/vite` plugin.\n- `Caused TS2769 error: Type Plugin[] is not assignable to type AcceptedPlugin` - The error message you received is due to a change in TailwindCSS starting from v4, where it was split into multiple separate packages. Until v3, the CLI and PostCSS engine were bundled into a single package. However, from v4 onwards, they have been separated into: `@tailwindcss/cli` and `@tailwindcss/postcss`. Additionally, a new package, `@tailwindcss/vite`, was introduced. --- Now, developers install one of these three packages based on how they want to integrate TailwindCSS v4 into their project.","metadata":{"transformedAt":"2026-08-18T18:33:42.934Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":233,"estimatedTokens":1428}}633{"id":"stack-70720683","source":"stackoverflow","questionId":70720683,"title":"Prevent image from expanding horizontal flex box","tags":["html","css","flexbox","css-grid","tailwind-css"],"text":"Title: Prevent image from expanding horizontal flex box\nTags: html, css, flexbox, css-grid, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nhttps://i.sstatic.net/zhJ3t.png\n\nI have a horizontal flex box with 3 columns. The black column (1/3rd on the left) is an image, the white column (1/3rd center) is text and the blue column (1/3rd right) is text.\n\nThe issue is that the text columns are by themselves just as high as the black stripe overlaying the white/blue boxes. The problem that happens is, that my image (black col on the left) stretches the text columns to become as big as itself.\n\nI assume the image automatically wants to preserve the aspect ratio and this affects the overall height of the flexbox.\n\nMy goal is: I would like to keep the flexbox as high as the largest text column, but the image column should not grow the flexbox taller. In Tailwind, I've added object-cover and object-center on the image (the idea is that the image fills the gray stripe on the black box, covering it). Basically, the image should have the dimensions of the gray box via object-fit.\n\nI've tried setting the image height to max-content and playing around with all kinds of height values, but I haven't found a decent solution yet. Can anyone help?\n\n```\n\n \n \n \n \n Short Text\n\n \n \n Short Text\n\n \n\n```\n\n========================================\n\nCode:\n```text\n<div class=\"flex items-center h-full\">\n <div class=\"w-1/3 black\">\n <img class=\"max-h-max object-cover object-center\" />\n </div>\n <div class=\"w-1/3 white\">\n <p>Short Text</p>\n </div>\n <div class=\"w-1/3 blue\">\n <p>Short Text</p>\n </div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/\"></script>\n<div class=\"flex\">\n <div class=\"w-1/3 bg-stone-200 relative\">\n <img class=\"absolute translate-x-1/2 right-1/2 h-full\" src=\"https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png\" />\n </div>\n <div class=\"w-1/3 bg-stone-50\">\n <p>Short Text</p>\n </div>\n <div class=\"w-1/3 bg-blue-900\">\n <p>Short Text</p>\n </div>\n</div>\n```\n\n```text\nitems-center\n```\n\n```text\nimg\n```\n\n```text\nabsolute\n```\n\n```text\nimg\n```\n\n```text\nrelative\n```\n\n```text\ntranslate-x-1/2\n```\n\n```text\nright-1/2\n```\n\n```text\nimg\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.934Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":96,"estimatedTokens":562}}634{"id":"stack-70585277","source":"stackoverflow","questionId":70585277,"title":"Next.js Image component Tailwind-css not working","tags":["javascript","reactjs","next.js","tailwind-css","next-images"],"text":"Title: Next.js Image component Tailwind-css not working\nTags: javascript, reactjs, next.js, tailwind-css, next-images\nSource: Stack Overflow\n\nQuestion:\nSo recently I've been trying to convert a react project to next and how I have to use the next/Image component which is kinda broken\n\n```\n\n \n \n \n \n {/* {\n Text goes here, this works fine, this isn't the problem its just part of the parent div :)\n } */}\n \n\n;\n```\n\nfor some reason this gives me this\nhttps://i.sstatic.net/fRGbI.png\n\nwhere for some reason the image gets a small padding between the border\n\nhttps://i.sstatic.net/Kx5KR.png\nhttps://i.sstatic.net/Lulmg.png\n\nI've checked and there is no border this is just nextjs's image component broken. Please be help full I've tried these solutions and none of these worked:\nNext Image not taking class properties\nHow to use Tailwind CSS with Next.js Image\n\n**Thank you :)**\n\n========================================\n\nCode:\n```text\n<div className=\" flex flex-col items-center p-5 sm:justify-center sm:pt-9 sm:flex-row text-justify relative\">\n <div className=\"border-solid border-2 border-black rounded-full basis-[13%] sm:mr-10\">\n <Image\n src={Me}\n alt=\"Profile\"\n width={400}\n height={400}\n className=\"rounded-full\"\n objectFit=\"cover\"\n />\n </div>\n <p className=\"text-sm sm:basis-2/4 m-4\">\n {/* {\n Text goes here, this works fine, this isn't the problem its just part of the parent div :)\n } */}\n </p>\n</div>;\n```\n\n```text\nimport Image from \"next/image\";\n\nfunction ExamplePage() {\n return (\n <div className=\"flex flex-col items-center p-5 sm:justify-center sm:pt-9 sm:flex-row text-justify relative\">\n <div className=\"border-solid border-2 border-black rounded-full basis-[13%] sm:mr-10 min-w-1/5\">\n <Image\n src=\"https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1172&q=80\"\n alt=\"Profile\"\n width={400}\n height={400}\n layout=\"responsive\"\n className=\"rounded-full\"\n objectFit=\"cover\"\n />\n </div>\n <p className=\"text-xs md:text-xl sm:basis-2/4 m-4\">\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, qui magni\n debitis, omnis quo dolorum nihil labore vel, nisi deserunt\n necessitatibus numquam. Optio ex incidunt quis modi deserunt architecto\n ab neque officiis possimus, doloribus odio vero accusantium, magnam\n dolorum natus? Inventore tempora veritatis eaque nesciunt possimus cum\n porro consequuntur veniam! ab neque officiis possimus, doloribus odio\n vero accusantium, magnam dolorum natus? Inventore tempora veritatis\n eaque nesciunt possimus cum porro consequuntur veniam!\n </p>\n </div>\n );\n}\n\nexport default ExamplePage;\n```\n\n```text\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n minWidth: { \"1/5\": \"20%\" },\n\n extend: {},\n },\n plugins: [],\n};\n```\n\n```text\nmodule.exports = {\n reactStrictMode: true,\n images: {\n domains: [\"images.unsplash.com\"],\n },\n};\n```\n\n```text\nlayout=\"responsive\"\n```\n\n```text\nnext.js\n```\n\n```text\nmin-width\n```\n\n```text\nmin-width\n```\n\n```text\nnext.config.js\n```\n\n========================================\n\nComments:\n- Please Provide more code (entire next.js page with imports). What is the image format?\n- This saved me, thank you so much this solution works, approved!\n- @GuilhermeFéria You're Welcome ! Glad I Could Help You ;-)","metadata":{"transformedAt":"2026-08-18T18:33:42.934Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":142,"estimatedTokens":898}}635{"id":"stack-68194737","source":"stackoverflow","questionId":68194737,"title":"Tailwind CSS responsive behavior on nextjs app","tags":["html","css","reactjs","next.js","tailwind-css"],"text":"Title: Tailwind CSS responsive behavior on nextjs app\nTags: html, css, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm new in Tailwind CSS. I build to the user interface of nextjs application by starting \"mobile first\" like everybody. Flex direction, background color are working at mobile size screen. So tailwind css is correctly importing nextjs application. When change the screen size, not change to flex direction or background color of navigation bar.\n\nNavbar code is shared below:\n\n```\nexport default function Home() {\n return (\n \n \n Tailwind CSS Tutorial\n \n \n \n \n\n \n \n \n \n W3Learn\n \n \n HTML\n CSS\n JS\n \n \n \n \n \n )\n}\n```\n\ntailwind configuration is shared below:\n\n```\nmodule.exports = {\n mode: \"jit\",\n purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n darkMode: false,\n theme: {\n extend: {},\n screens: {\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n========================================\n\nTop Answer:\n**Add className='fluid' to your main component layout.jsx**\n\n\r\n\r\n\n```\nconst MainLayout = ({ children }) => {\n return ( \n \n {/* added suppress hydration to get webpack errors to go away */}\n \n \n \n \n \n {children}\n \n \n \n \n \n );\n}\n```\n\n========================================\n\nCode:\n```text\nexport default function Home() {\n return (\n <div>\n <Head>\n <title>Tailwind CSS Tutorial</title>\n <meta name=\"description\" content=\"Generated by create next app\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></meta>\n <link rel=\"icon\" href=\"/favicon.ico\" />\n </Head>\n\n <main>\n <header className=\"bg-gray-700 shadow-md sm:bg-red-900\">\n <nav className=\"flex flex-col items-center sm:flex-row sm:justify-between sm:items-left\">\n <div className=\"w-screen text-center px-5 py-2 text-white border-b sm:border-b-0 sm:w-auto\">\n W3Learn\n </div>\n <div className=\"py-2\">\n <a className=\"px-10 text-white\" href=\"/html-lecture\"> HTML</a>\n <a className=\"px-10 text-white\" href=\"/css-lecture\"> CSS </a>\n <a className=\"px-10 text-white\" href=\"/js-lecture\"> JS </a>\n </div>\n </nav>\n </header> \n </main>\n </div>\n )\n}\n```\n\n```text\nmodule.exports = {\n mode: \"jit\",\n purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n darkMode: false,\n theme: {\n extend: {},\n screens: {\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n'sm': '640px',\n // => @media (min-width: 640px) { ... }\n\n 'md': '768px',\n // => @media (min-width: 768px) { ... }\n\n 'lg': '1024px',\n // => @media (min-width: 1024px) { ... }\n\n 'xl': '1280px',\n // => @media (min-width: 1280px) { ... }\n\n '2xl': '1536px',\n // => @media (min-width: 1536px) { ... }\n```\n\n```html\nconst MainLayout = ({ children }) => {\n return ( \n <html>\n {/* added suppress hydration to get webpack errors to go away */}\n <body suppressHydrationWarning >\n <Navbar />\n <div className='flex flex-col justify-between' >\n \n <main className='fluid' >\n {children}\n </main >\n </div>\n <Footer className=''/>\n </body>\n </html>\n );\n}\n```\n\n========================================\n\nComments:\n- Did you read this section tailwindcss.com/docs/responsive-design#targeting-mobile-scre‌​ens of the docs?","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":177,"estimatedTokens":889}}636{"id":"stack-71129475","source":"stackoverflow","questionId":71129475,"title":"Laravel-mix with browserSync, and tailwindCss causes infinite reloading bug","tags":["tailwind-css","laravel-mix"],"text":"Title: Laravel-mix with browserSync, and tailwindCss causes infinite reloading bug\nTags: tailwind-css, laravel-mix\nSource: Stack Overflow\n\nQuestion:\nIn my latest project, I'm using laravel-mix with the built in browserSync, and I've added tailwindCss as a package.\n\nThis is the `webpack.mix.js` file:\n\n```\nconst mix = require(\"laravel-mix\");\nrequire('mix-html-builder');\n\nmix\n .setResourceRoot(\"../\")\n .setPublicPath(\"public/assets\")\n .browserSync({\n proxy: 'xxx',\n host: 'xxx',\n files: \"public/*\",\n open: false,\n reloadOnRestart: true\n })\n .html({\n htmlRoot: './resources/html/pages/*.html',\n partialRoot: './resources/html/components',\n output: '..'\n })\n .copy(\"resources/images\", \"public/assets/images\")\n .js(\"resources/js/app.js\", \"js\")\n .postCss(\n \"resources/css/app.css\",\n \"css\",\n [\n require(\"postcss-import\"),\n require(\"tailwindcss/nesting\"),\n require(\"tailwindcss\"),\n require(\"autoprefixer\")\n ]\n )\n```\n\nAs soon as I comment out either the line `require(\"tailwindcss\")`, or the `.html({})` block, the watch command `npm run watch` runs nicely, if both of them are on, the mix command will run indefinitely in an endless loop (in the terminal). There are no errors, everyhting runs, it just won't stop running anymore :D\n\nMy `package.json` is as follows:\n\n```\n{\n \"name\": \"xxx\",\n \"version\": \"1.0.0\",\n \"description\": \"## Deployment\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"dev\": \"npm run development\",\n \"development\": \"cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js\",\n \"watch\": \"npm run development -- --watch\",\n \"prod\": \"npm run production\",\n \"production\": \"cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"xxx\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"@typescript-eslint/eslint-plugin\": \"^5.11.0\",\n \"@typescript-eslint/parser\": \"^5.11.0\",\n \"alpinejs\": \"^3.8.1\",\n \"autoprefixer\": \"^10.4.2\",\n \"browser-sync\": \"^2.27.7\",\n \"browser-sync-webpack-plugin\": \"^2.3.0\",\n \"eslint\": \"^8.9.0\",\n \"eslint-plugin-import\": \"^2.25.4\",\n \"eslint-plugin-node\": \"^11.1.0\",\n \"filename-regex\": \"^2.0.1\",\n \"laravel-mix\": \"^6.0.41\",\n \"mix-html-builder\": \"^0.8.0\",\n \"postcss\": \"^8.4.6\",\n \"postcss-import\": \"^14.0.2\",\n \"stylelint\": \"^14.4.0\",\n \"stylelint-config-standard\": \"^25.0.0\",\n \"stylelint-order\": \"^5.0.0\",\n \"tailwindcss\": \"^3.0.19\"\n }\n}\n```\n\nI think I'm probably missing a simple setting somewhere, can someone point me to where this might go wrong?\n\n### The solution to this particular case:\n\nThis is my **new** `tailwind.config.js` file, after @reid-gannah posted their answer. At first my content config pointed to the end of the pipeline, due to how the project was set up initially, initiating the infinite lading bug. After changing filestructure around (and implementing `mix-html-builder`), I never realised Tailwind still read from the generated files instead of source. So, the config below solves my question:\n\n```\nmodule.exports = {\n mode: \"jit\",\n content: [\n './resources/html/pages/**/*.{html,js}',\n './resources/html/components/**/*.{html,js}',\n './resources/html/layouts/**/*.{html,js}',\n ],\n theme: {\n container: {\n },\n extend: {}\n },\n variants: {\n extend: {}\n },\n};\n```\n\n========================================\n\nCode:\n```js\nconst mix = require(\"laravel-mix\");\nrequire('mix-html-builder');\n\nmix\n .setResourceRoot(\"../\")\n .setPublicPath(\"public/assets\")\n .browserSync({\n proxy: 'xxx',\n host: 'xxx',\n files: \"public/*\",\n open: false,\n reloadOnRestart: true\n })\n .html({\n htmlRoot: './resources/html/pages/*.html',\n partialRoot: './resources/html/components',\n output: '..'\n })\n .copy(\"resources/images\", \"public/assets/images\")\n .js(\"resources/js/app.js\", \"js\")\n .postCss(\n \"resources/css/app.css\",\n \"css\",\n [\n require(\"postcss-import\"),\n require(\"tailwindcss/nesting\"),\n require(\"tailwindcss\"),\n require(\"autoprefixer\")\n ]\n )\n```\n\n```js\n{\n \"name\": \"xxx\",\n \"version\": \"1.0.0\",\n \"description\": \"## Deployment\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"dev\": \"npm run development\",\n \"development\": \"cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js\",\n \"watch\": \"npm run development -- --watch\",\n \"prod\": \"npm run production\",\n \"production\": \"cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"xxx\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"@typescript-eslint/eslint-plugin\": \"^5.11.0\",\n \"@typescript-eslint/parser\": \"^5.11.0\",\n \"alpinejs\": \"^3.8.1\",\n \"autoprefixer\": \"^10.4.2\",\n \"browser-sync\": \"^2.27.7\",\n \"browser-sync-webpack-plugin\": \"^2.3.0\",\n \"eslint\": \"^8.9.0\",\n \"eslint-plugin-import\": \"^2.25.4\",\n \"eslint-plugin-node\": \"^11.1.0\",\n \"filename-regex\": \"^2.0.1\",\n \"laravel-mix\": \"^6.0.41\",\n \"mix-html-builder\": \"^0.8.0\",\n \"postcss\": \"^8.4.6\",\n \"postcss-import\": \"^14.0.2\",\n \"stylelint\": \"^14.4.0\",\n \"stylelint-config-standard\": \"^25.0.0\",\n \"stylelint-order\": \"^5.0.0\",\n \"tailwindcss\": \"^3.0.19\"\n }\n}\n```\n\n```js\nmodule.exports = {\n mode: \"jit\",\n content: [\n './resources/html/pages/**/*.{html,js}',\n './resources/html/components/**/*.{html,js}',\n './resources/html/layouts/**/*.{html,js}',\n ],\n theme: {\n container: {\n },\n extend: {}\n },\n variants: {\n extend: {}\n },\n};\n```\n\n```text\nwebpack.mix.js\n```\n\n```text\nrequire(\"tailwindcss\")\n```\n\n```text\n.html({})\n```\n\n```text\nnpm run watch\n```\n\n```text\npackage.json\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmix-html-builder\n```\n\n```text\nmodule.exports = {\n content: [\n './src/**/*.{html,js}',\n './src/pages/**/*.{html,js}',\n './src/components/**/*.{html,js}',\n './src/layouts/**/*.{html,js}',\n './src/index.html',\n ],\n // ...\n}\n```\n\n========================================\n\nComments:\n- Wow, I've never found a question this fresh before. I'm experiencing/troubleshooting this exact same issue. What does your tailwing.config.js file look like? The only thing I've discovered is that messing with the `content` paths/glob patterns seem to affect it. I can have tailwind \"watch\" *.php files in subdirectories, but none in the same directory as the actual tailwind.config.js file.\n- That's great! It wasn't a glob for me, but I did point to the incorrect paths in content config, so your solution did definitely save my day. The generated Tailwind css files kept on triggering the watch. I hadn't figured out it was Tailwind specificly, great find in the docs! I even had the documentation open at the time...\n- @Kablam that's great! So is it working as expected in your build then? Would you mind sharing your tailwind.config.js if so? Curious if you're having to target specific directories/files or if you're able to have it scan more broadly. In my setup, I still get an infinite loop if I have any patterns with a globstar `**` in `content`. I might have an issue elsewhere though...\n- I'm still using globs, the problem for me was that the `content:` pointed to generated files. After specifying the source files the infinite loop didn't occur anymore. I'll add my tailwind.config to the question. If you start a question of your own, or have another place to post your code, I'll gladly look along to see if we can figure it out together!\n- Thanks yeah looking at your edit, it confirms that I also need to restructure my folders/assets a bit. Kind of annoying for me because it's a custom WP theme and doesn't play nice with moving core files around, but I think I'll be able to figure it out. Just weird because I've found other tutorials out there using the same build (Webpack + Tailwind + Wordpress) and they seem to be able to have Tailwind scan more broadly... oh well.\n- Thanks, this saved me a potentially lengthy Google session.","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":262,"estimatedTokens":2093}}637{"id":"stack-71884737","source":"stackoverflow","questionId":71884737,"title":"Why is the first class more important than the latter?","tags":["vue.js","nuxt.js","tailwind-css"],"text":"Title: Why is the first class more important than the latter?\nTags: vue.js, nuxt.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\n```\n\n```\n\nWhy does the above show margin `4 px` instead of margin `8 px`\nBecause the last class should be more important.\n\nI'm having a lot of trouble when writing an \"if\" in Vue.js because if writing normally New classes are always appended to the end.\n\n- NuxtJS 2.15.8\n\n- TailwindCSS 3.0.23\n\n- postcss 8.4.5\n\n========================================\n\nTop Answer:\nAfter some works with tailwind and some experiences with styled-components / styled-systems on ReactJS, you can actually force some classes with a custom breakpoint because breakpoints have more priority.\n\nI added this to my tailwind config; we can keep the same system mobile first oriented and add some more priority to properties:\n\n```\ntheme: {\n screens: {\n _: '0px',\n },\n},\n```\n\nYou can use this to define some higher priority properties:\n\n```\n_:text-blue // like lg:text-blue\n```\n\n========================================\n\nCode:\n```html\n<p class=\"mt-1 mt-2\"></p>\n```\n\n```text\n4 px\n```\n\n```text\n8 px\n```\n\n```html\n<button\n class=\"flex items-center w-auto p-4 text-center ...\"\n :class=\"[\n callToAction.types[color][variant], // here is the important part\n { 'opacity-50 cursor-not-allowed shadow-none': disabled },\n ]\"\n>\n Nice flexible button\n</button>\n```\n\n```text\ncn\n```\n\n```text\ntwMerge\n```\n\n```text\nclsx\n```\n\n```text\ntheme: {\n screens: {\n _: '0px',\n },\n},\n```\n\n```text\n_:text-blue // like lg:text-blue\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n\n<p class=\"pt-2 pt-1 w-40 h-20 bg-red-50 border-2\">pt-2 stronger</p>\n<p class=\"pt-1 pt-2 w-40 h-20 bg-red-50 border-2\">pt-2 stronger</p>\n\n<p class=\"pt-12 pt-1 w-40 h-20 bg-red-50 border-2\">pt-12 stronger</p>\n<p class=\"pt-1 pt-12 w-40 h-20 bg-red-50 border-2\">pt-12 stronger</p>\n\n<p class=\"pt-0.5 pt-2.5 w-40 h-20 bg-red-50 border-2\">pt-2.5 stronger</p>\n<p class=\"pt-2.5 pt-0.5 w-40 h-20 bg-red-50 border-2\">pt-2.5 stronger</p>\n\n<p class=\"pt-[0.5rem] pt-24 w-40 h-20 bg-red-50 border-2\">pt-[0.5rem] stronger</p>\n<p class=\"pt-24 pt-[0.5rem] w-40 h-20 bg-red-50 border-2\">pt-[0.5rem] stronger</p>\n```\n\n```css\n.pt-0\\.5 {\n padding-top: calc(var(--spacing) * .5);\n}\n\n.pt-1 {\n padding-top: calc(var(--spacing) * 1);\n}\n\n.pt-2 {\n padding-top: calc(var(--spacing) * 2);\n}\n\n.pt-2\\.5 {\n padding-top: calc(var(--spacing) * 2.5);\n}\n\n.pt-12 {\n padding-top: calc(var(--spacing) * 12);\n}\n\n.pt-24 {\n padding-top: calc(var(--spacing) * 24);\n}\n\n.pt-\\[0\\.5rem\\] {\n padding-top: .5rem;\n}\n```\n\n```text\npt-{number}\n```\n\n```text\npt-<number>\n```\n\n```text\npt-[custom value]\n```\n\n```text\npt-{number}\n```\n\n```text\npt-{number}\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":157,"estimatedTokens":677}}638{"id":"stack-79520965","source":"stackoverflow","questionId":79520965,"title":"TailwindCSS PostCSS Build Error: Cannot read properties of undefined (reading 'blocklist')","tags":["php","laravel","tailwind-css"],"text":"Title: TailwindCSS PostCSS Build Error: Cannot read properties of undefined (reading 'blocklist')\nTags: php, laravel, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI’m encountering build errors when using TailwindCSS in my Laravel application. The errors occur when running `npm run dev`, and I haven’t been able to find a solution online. Here are the details:\n\n### **Error Message**\n\nThe errors are consistent across multiple files, including `flatpickr.css`, `app.scss`, `home.scss`, and `coolecto-custom.scss`. The key error is:\n\n```\nTypeError: Cannot read properties of undefined (reading 'blocklist')\n at createContext (D:\\DECIZIF\\CRI\\cri-app-v3\\node_modules\\tailwindcss\\lib\\lib\\setupContextUtils.js:1209:76)\n at getContext (D:\\DECIZIF\\CRI\\cri-app-v3\\node_modules\\tailwindcss\\lib\\lib\\setupContextUtils.js:1278:19)\n ...\n```\n\n### **Configuration Files**\n\n### **`webpack.mix.js`**\n\n```\nconst mix = require('laravel-mix');\nconst tailwindcss = require('tailwindcss');\n\nmix.js('resources/js/app.js', 'public/js').vue()\n .sass('resources/scss/app.scss', 'public/css')\n .options({\n processCssUrls: false,\n legacyNodePolyfills: false,\n postCss: [ tailwindcss('./tailwind.config.json') ]\n });\n\nmix.sass('resources/scss/home.scss', 'public/css');\nmix.sass('resources/scss/coolecto-custom.scss', 'public/css');\n\nmodule.exports = {\n output: {\n hashFunction: 'md5',\n },\n};\n```\n\n### **`tailwind.config.js`**\n\n```\nmodule.exports = {\n content: [\n './resources/js/app.js',\n './resources/**/*.vue',\n './resources/views/**/*.php',\n './app/**/*.php',\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n blocklist: [],\n whitelist: [],\n};\n```\n\n### **Context**\n\n- I’m using Laravel with Laravel Mix and TailwindCSS.\n\n- I’ve used the Kompo framework (kompo.io) before without issues, but this project is causing problems.\n\n- The errors started appearing after integrating TailwindCSS into this project.\n\n- I’ve tried searching for similar issues but haven’t found anything matching this exact error.\n\nWhat I’ve Tried\nVerified that TailwindCSS and PostCSS are correctly installed and configured.\n\nEnsured that the tailwind.config.js file is correctly referenced in webpack.mix.js.\n\nChecked for version mismatches between TailwindCSS, PostCSS, and Laravel Mix.\n\n### **Questions**\n\n- What could be causing the `blocklist` property to be undefined in TailwindCSS?\n\n- Are there any known compatibility issues between TailwindCSS, Laravel Mix, and PostCSS that could lead to this error?\n\n- Are there additional debugging steps I can take to diagnose the issue further?\n\nAny pointers or resources to help resolve this issue would be greatly appreciated. Thank you!\n\n========================================\n\nCode:\n```text\nTypeError: Cannot read properties of undefined (reading 'blocklist')\n at createContext (D:\\DECIZIF\\CRI\\cri-app-v3\\node_modules\\tailwindcss\\lib\\lib\\setupContextUtils.js:1209:76)\n at getContext (D:\\DECIZIF\\CRI\\cri-app-v3\\node_modules\\tailwindcss\\lib\\lib\\setupContextUtils.js:1278:19)\n ...\n```\n\n```js\nconst mix = require('laravel-mix');\nconst tailwindcss = require('tailwindcss');\n\nmix.js('resources/js/app.js', 'public/js').vue()\n .sass('resources/scss/app.scss', 'public/css')\n .options({\n processCssUrls: false,\n legacyNodePolyfills: false,\n postCss: [ tailwindcss('./tailwind.config.json') ]\n });\n\nmix.sass('resources/scss/home.scss', 'public/css');\nmix.sass('resources/scss/coolecto-custom.scss', 'public/css');\n\nmodule.exports = {\n output: {\n hashFunction: 'md5',\n },\n};\n```\n\n```js\nmodule.exports = {\n content: [\n './resources/js/app.js',\n './resources/**/*.vue',\n './resources/views/**/*.php',\n './app/**/*.php',\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n blocklist: [],\n whitelist: [],\n};\n```\n\n```text\nnpm run dev\n```\n\n```text\nflatpickr.css\n```\n\n```text\napp.scss\n```\n\n```text\nhome.scss\n```\n\n```text\ncoolecto-custom.scss\n```\n\n```text\nwebpack.mix.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nblocklist\n```\n\n```js\nconst tailwindcss = require('tailwindcss');\n```\n\n```none\nnpm install tailwindcss@^3.2.5\n```\n\n```text\nblocklist\n```\n\n```text\nblocklist\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\nblocklist\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\n@tailwindcss/postcss\n```\n\n========================================\n\nComments:\n- What tailwind version you are using?\n- Tailwind is 4.0.14.\n- @user25669822 It is impossible that you're using v4. It's clearly evident from your configuration file that you're using v3. See more here: stackoverflow.com/a/79520989/15167500\n- I got my tailwind version by doing the command `npm view tailwindcss version` and it gave me 4.0.14. You are right that the config was for version 3+ and it is the version that is usually installed by default. I don't know if running npm update at some point upgraded to tailwind 4+ or if I messed up a command. I have ran the command to install 3.2.5^ and after fixing some issues in my own scss files, it is working properly now. I'll make sure to try and lock down the versions I am using so that I don't end up with a mismatch like that. Thank you for your help!","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":20,"totalLines":214,"estimatedTokens":1296}}639{"id":"stack-69545947","source":"stackoverflow","questionId":69545947,"title":"How to change the default screen background color of all the pages in React JS(Next JS) using tailwind CSS","tags":["javascript","reactjs","next.js","frontend","tailwind-css"],"text":"Title: How to change the default screen background color of all the pages in React JS(Next JS) using tailwind CSS\nTags: javascript, reactjs, next.js, frontend, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to change the default screen background colour of all the pages of the web application.\n\nTechnologies I used:\n\n- React JS\n\n- Next JS\n\n- Tailwind CSS\n\nI want to make the screen background colour of all pages light grey as shown in the image instead of the default white colour.\n\nhttps://i.sstatic.net/arTpI.png\n\nIs there any way to do that all at once, or do we need to add background colour manually to every page?\n\n========================================\n\nTop Answer:\nUse `@layer base` to customise your html, this is the proper method using Tailwind.\n\n```\n@layer base {\n html {\n @apply bg-gray-50;\n }\n}\n```\n\n========================================\n\nCode:\n```text\nfunction MyApp({ Component, pageProps }) {\n return (\n <div className=\"bg-gray-500\">\n <Component {...pageProps}/>\n </div>\n );\n}\n```\n\n```text\n_app.jsx\n```\n\n```text\n_app.tsx\n```\n\n```text\ndiv\n```\n\n```text\nclassName\n```\n\n```text\nhtml {\n width: 100%;\n height: 100%;\n background-color: {color of your choice};\n}\n```\n\n```text\nhtml {\n background-color: #yourcolor\n}\n```\n\n```text\nexport default function RootLayout({\n children\n}: {\n children: React.ReactNode;\n}) {\n return (\n <html lang=\"en\">\n <body className={`${inter.className} bg-gray-50`}>{children}</body>\n </html>\n );\n}\n```\n\n```css\n@layer base {\n html {\n @apply bg-gray-50;\n }\n}\n```\n\n```text\n@layer base\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":102,"estimatedTokens":395}}640{"id":"stack-73757171","source":"stackoverflow","questionId":73757171,"title":"Tailwind align element to bottom of parent","tags":["css","reactjs","flexbox","tailwind-css"],"text":"Title: Tailwind align element to bottom of parent\nTags: css, reactjs, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've been trying to build this UI for almost a day.\nhttps://i.sstatic.net/Ccxr6.png\n\nI'm just stuck with not getting the middle div in the center of the screen and the last ***Copyright*** div align to the bottom of the screen. I'm a mobile dev first, just started out styling on web. This is what I've managed to build so far, ignore rest of the UI, I can do that part. Here's the sandbox for my code as well : https://codesandbox.io/s/tailwind-css-and-react-forked-v9c22d?file=/src/App.js:140-2801\n\n```\n\n \n \n \n \n Admin Dashboard\n \n Enter your email and password to sign in\n \n \n Email\n \n \n \n Password\n \n \n \n \n \n \n Remember me\n \n \n \n Sign In\n \n \n © Example Technologies Pvt. Ltd.\n \n \n \n \n \n```\n\nProblem highlight, as you can see the second div starts as soon as the image ends\nhttps://i.sstatic.net/m7BKP.png\n\nAfter adding your code and when I scroll, so when we add a bottom padding to the ***copyright*** view, it creates a white bg when I open the console, is this the expected behaviour?\nhttps://i.sstatic.net/sEMLr.png\n\n========================================\n\nCode:\n```text\n<div className=\"bg-background-light dark:bg-background-dark h-screen w-full\">\n <div>\n <img\n src=\"https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a\"\n className=\"h-24 w-24 mt-9 ml-9\"\n />\n <div className=\"flex justify-center items-center h-fit\">\n <div className=\"flex flex-col items-start\">\n <div className=\"text-4xl text-black\">Admin Dashboard</div>\n <div className=\"text-login-subtitle-light dark:text-login-subtitle-dark mt-6\">\n Enter your email and password to sign in\n </div>\n <label className=\"dark:text-white text-text-color-primary-light mt-6\">\n Email\n </label>\n <input\n placeholder=\"Email\"\n className=\"w-full rounded font-thin px-5 py-3 mt-4\"\n autoFocus\n type=\"email\"\n required\n />\n <label className=\"dark:text-white text-text-color-primary-light mt-6\">\n Password\n </label>\n <input\n placeholder=\"Password\"\n id=\"password\"\n className=\"w-full rounded font-thin px-5 py-3 mt-4\"\n autoFocus\n type=\"password\"\n required\n />\n <label\n for=\"default-toggle\"\n class=\"inline-flex relative items-center cursor-pointer\"\n >\n <div class=\"w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 mb-5\"></div>\n <input\n type=\"checkbox\"\n value=\"\"\n id=\"red-toggle\"\n class=\"sr-only peer\"\n checked\n />\n <span class=\"ml-3 text-sm font-medium text-text-color-primary-light dark:text-white mb-5\">\n Remember me\n </span>\n </label>\n <button\n className=\"text-white bg-red-900 h-16 rounded-xl w-full text-xl\"\n type=\"submit\"\n >\n Sign In\n </button>\n <div className=\"text-black dark:text-white\">\n © Example Technologies Pvt. Ltd.\n </div>\n </div>\n </div>\n </div>\n </div>\n```\n\n```text\nimport React from \"react\";\nimport \"./styles.css\";\nimport \"./styles/tailwind-pre-build.css\";\n\nexport default function App() {\n return (\n <div className=\"relative flex bg-background-light dark:bg-background-dark h-screen w-full\">\n <img\n src=\"https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a\"\n className=\"absolute h-24 w-24 mt-9 ml-9\"\n />\n <div className=\"m-auto bg-gray-500 rounded-lg p-8\">\n <div className=\"flex justify-center items-center h-fit\">\n <div className=\"flex flex-col items-start\">\n <div className=\"text-4xl text-black\">Admin Dashboard</div>\n <div className=\"text-login-subtitle-light dark:text-login-subtitle-dark mt-6\">\n Enter your email and password to sign in\n </div>\n <label className=\"dark:text-white text-text-color-primary-light mt-6\">\n Email\n </label>\n <input\n placeholder=\"Email\"\n className=\"w-full rounded font-thin px-5 py-3 mt-4\"\n autoFocus\n type=\"email\"\n required\n />\n <label className=\"dark:text-white text-text-color-primary-light mt-6\">\n Password\n </label>\n <input\n placeholder=\"Password\"\n id=\"password\"\n className=\"w-full rounded font-thin px-5 py-3 mt-4\"\n autoFocus\n type=\"password\"\n required\n />\n <label\n for=\"default-toggle\"\n class=\"inline-flex relative items-center cursor-pointer\"\n >\n <div class=\"w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 mb-5\"></div>\n <input\n type=\"checkbox\"\n value=\"\"\n id=\"red-toggle\"\n class=\"sr-only peer\"\n checked\n />\n <span class=\"ml-3 text-sm font-medium text-text-color-primary-light dark:text-white mb-5\">\n Remember me\n </span>\n </label>\n <button\n className=\"text-white bg-red-900 h-16 rounded-xl w-full text-xl\"\n type=\"submit\"\n >\n Sign In\n </button>\n </div>\n </div>\n </div>\n <div className=\"absolute bottom-0 left-0 right-0 text-center text-black dark:text-white\">\n © Example Technologies Pvt. Ltd.\n </div>\n </div>\n );\n}\n```\n\n```text\nabsolute\n```\n\n```text\nbottom-0 left-0 right-0\n```\n\n```text\ntext-center\n```\n\n```text\nflex\n```\n\n```text\nm-auto\n```\n\n```text\ndiv\n```\n\n========================================\n\nComments:\n- middle div centered vertically is it?\n- @PiyushPranjal I've edited my question with the second div starting from where the image ends\n- Your main div has not full height, therefor it's impossible to center the login ctaoniner vertically in the middle of the screen. I have edited your code check this codesandbox.io/s/tailwind-css-and-react-forked-w80vdn?file=/‌​src/…\n- @Engin right, thanks I will compare with mine and check, you can put it in answer and I can accept it.\n- Hi @Engin when we add a bottom padding to the copyright view, it creates a white bg when I open the console, is this the expected behavior?\n- Can you show me a screenshot? @AbhishekAN\n- That's because the copyright section is a child of login section. I separated the sections. So you also have to change background color of copyright section additionally.","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":228,"estimatedTokens":1957}}641{"id":"stack-70845642","source":"stackoverflow","questionId":70845642,"title":"Can't change radio button background color on Tailwind V3","tags":["css","tailwind-css"],"text":"Title: Can't change radio button background color on Tailwind V3\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI need ur guys help how to change BG color of radio button here's my code.\n\n``\nthe output still the same as default radio button. enter image description here\n\n========================================\n\nTop Answer:\nYou have to use `@tailwindcss/forms` - a plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.\n\n- Install the plugin from npm:\n\n```\n# Using npm\nnpm install @tailwindcss/forms\n\n# Using Yarn\nyarn add @tailwindcss/forms\n```\n\n- Add the plugin to your `tailwind.config.js` file:\n\n```\n// tailwind.config.js\nmodule.exports = {\n theme: {\n // ...\n },\n plugins: [\n require('@tailwindcss/forms'),\n // ...\n ],\n}\n```\n\n- Then you can use Tailwind utility classes:\n\n```\n\n```\n\nhttps://play.tailwindcss.com/6oxQ5F0cXT\n\nThe solution described is fully compatible with Tailwind v3.0 - according to official docs:\n\nAll of our first-party plugins have been updated for compatibility with v3.0\n\n========================================\n\nCode:\n```text\n<input type=\"radio\" className=\"form-radio h-6 w-6 checked:bg-white text-green-500 p-3 my-4\" name=\"radio\" value=\"1\" />\n```\n\n```text\ninput[type=\"radio\"]:checked {\n background-color: #your-color\n}\n```\n\n```text\n# Using npm\nnpm install @tailwindcss/forms\n\n# Using Yarn\nyarn add @tailwindcss/forms\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n theme: {\n // ...\n },\n plugins: [\n require('@tailwindcss/forms'),\n // ...\n ],\n}\n```\n\n```html\n<input type=\"radio\" class=\"h-6 w-6 checked:bg-green-500 text-green-500 p-3 my-4\" name=\"radio\" value=\"1\" />\n```\n\n```text\n@tailwindcss/forms\n```\n\n```text\ntailwind.config.js\n```\n\n```html\n<label class=\"inline-flex items-center\">\n <input type=\"radio\" class=\"form-radio text-indigo-600\" name=\"radio-colors\" value=\"1\" checked>\n <span class=\"ml-2\">Option 1</span>\n </label>\n```\n\n```text\n<label class=\"ml-3 mb-1 block\">\n <input type=\"radio\" class=\"checked:bg-emerald-400 checked:hover:bg-emerald-400 checked:active:bg-emerald-400 checked:focus:bg-emerald-400 focus:bg-emerald-400 focus:outline-none focus:ring-1 focus:ring-emerald-400\" name=\"radio\" checked />\n <span>Hello</span>\n</label>\n```\n\n```text\n<input type=\"radio\" className=\"form-radio accent-[#1E7BAE]\" name=\"option\" value=\"male\" />\n```\n\n```text\naccent-[#1E7BAE]\n```\n\n```html\n<fieldset class=\"relative inline-flex items-center me-4\">\n <div\n class=\"\n relative\n h-fit\n flex\n items-center\n justify-center\n shrink-0\n [&:has(input:checked)]:after:bg-rose-700\n [&:has(input:checked)]:after:cursor-pointer\n [&:has(input:checked)]:after:absolute\n [&:has(input:checked)]:after:block\n [&:has(input:checked)]:after:rounded-full\n [&:has(input:checked)]:after:top-0\n [&:has(input:checked)]:after:left-0\n [&:has(input:checked)]:after:mt-[3px]\n [&:has(input:checked)]:after:ml-[3px]\n [&:has(input:checked)]:after:size-2.5\n [&:has(input:checked)]:after:animate-scale-in\n \"\n >\n <input\n type=\"radio\"\n id=\"radio-id\"\n name=\"radio\"\n class=\"\n appearance-none\n size-4\n border-2\n rounded-full\n cursor-pointer\n checked:border-rose-700\n border-neutral-800/30\n disabled:border-neutral-800/10\n \"\n />\n </div>\n\n <label\n for=\"radio-id\"\n class=\"ml-1 cursor-pointer\"\n >\n Teste\n </label>\n</fieldset>\n```\n\n```text\n@tailwindcss/forms\n```\n\n========================================\n\nComments:\n- To change the color of a radio button using tailwind css just use the accent property for example : class=\"accent-red-300\"\n- Thanks a lot buddy ! i was facing this issue, and that fixed it.\n- This did it for me. You covered all the bases lol! It's crazy that it takes so much to change the color of a radio button though. Tailwind should make this much easier.","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":179,"estimatedTokens":988}}642{"id":"stack-73686454","source":"stackoverflow","questionId":73686454,"title":"Owl-carousel is not working after build the project using vite","tags":["javascript","jquery","tailwind-css","owl-carousel","vite"],"text":"Title: Owl-carousel is not working after build the project using vite\nTags: javascript, jquery, tailwind-css, owl-carousel, vite\nSource: Stack Overflow\n\nQuestion:\nI use vite to build this project.\nwhen I use owl-carousel from node_modules it works in development mode but after build, the carousel stops working and gets this error\n\n```\nUncaught TypeError: Cannot read properties of undefined (reading 'fn')\n at index.781bd673.js:4:36786\n at index.781bd673.js:4:37392\n```\n\nso I used it from CDN.\n\n```\n\n // CDN --> working after build \n // import 'https://code.jquery.com/jquery-3.2.1.slim.min.js';\n // import 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js';\n\n // node_modules --> not working after build\n import './node_modules/jquery/dist/jquery.slim.min.js';\n import './node_modules/owl.carousel/dist/owl.carousel.min.js';\n\n // customize owl carousel\n import './src/js/owl-carousel.js';\n\n```\n\nHow to use it from node_modules without that error??\n\n========================================\n\nTop Answer:\nThe below answer from @Asmaa Mahmoud did not work for me. Below is my solution. I hope this will help someone else struggling with the same issue.\n\nvite.config.js file:\n\n```\nimport { defineConfig } from 'vite';\nimport inject from '@rollup/plugin-inject';\nimport htmlPurge from 'vite-plugin-purgecss';\n\nexport default defineConfig({\n plugins: [\n inject({\n $: 'jquery',\n jQuery: 'jquery',\n 'window.jQuery': 'jquery',\n }),\n htmlPurge(),\n ],\n css: {\n devSourcemap: true,\n },\n});\n```\n\napp.js file:\n\n```\nimport './app.scss';\nimport 'owl.carousel/dist/assets/owl.carousel.css';\nimport $ from 'jquery';\nimport 'lazysizes';\nimport 'owl.carousel';\n\n$(function(){\n $('.owl-carousel').owlCarousel({});\n});\n```\n\n========================================\n\nCode:\n```text\nUncaught TypeError: Cannot read properties of undefined (reading 'fn')\n at index.781bd673.js:4:36786\n at index.781bd673.js:4:37392\n```\n\n```text\n<script type=\"module\">\n // CDN --> working after build \n // import 'https://code.jquery.com/jquery-3.2.1.slim.min.js';\n // import 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js';\n\n // node_modules --> not working after build\n import './node_modules/jquery/dist/jquery.slim.min.js';\n import './node_modules/owl.carousel/dist/owl.carousel.min.js';\n\n // customize owl carousel\n import './src/js/owl-carousel.js';\n</script>\n```\n\n```text\n// jquery.js file \n\nimport $ from 'jquery'; // from node_modules\nwindow.jQuery = $;\nexport default $;\n```\n\n```text\n// owl-carousel.js file\n\nimport $ from './jquery.js';\nimport 'owl.carousel'; // from node_modules\n\n$(document).ready(function () {\n $('.owl-carousel').owlCarousel({\n loop: true,\n margin: 20,\n autoplay: true,\n responsive: {\n 0: {\n items: 1,\n },\n 600: {\n items: 2,\n },\n 1000: {\n items: 3,\n },\n },\n });\n});\n```\n\n```text\nimport { defineConfig } from 'vite';\nimport inject from '@rollup/plugin-inject';\nimport htmlPurge from 'vite-plugin-purgecss';\n\nexport default defineConfig({\n plugins: [\n inject({\n $: 'jquery',\n jQuery: 'jquery',\n 'window.jQuery': 'jquery',\n }),\n htmlPurge(),\n ],\n css: {\n devSourcemap: true,\n },\n});\n```\n\n```text\nimport './app.scss';\nimport 'owl.carousel/dist/assets/owl.carousel.css';\nimport $ from 'jquery';\nimport 'lazysizes';\nimport 'owl.carousel';\n\n$(function(){\n $('.owl-carousel').owlCarousel({});\n});\n```\n\n========================================\n\nComments:\n- stackoverflow.com/questions/28070885/…\n- @MuhammadMahfuzurRahman It's not my problem here. It's working in dev mode but stops after the build","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":169,"estimatedTokens":916}}643{"id":"stack-78348868","source":"stackoverflow","questionId":78348868,"title":"Prevent adding color in in Shadcn and React","tags":["reactjs","tailwind-css","shadcnui","radix-ui"],"text":"Title: Prevent adding color in in Shadcn and React\nTags: reactjs, tailwind-css, shadcnui, radix-ui\nSource: Stack Overflow\n\nQuestion:\nI have a problem with shadcn's ``. How do prevent it from showing a color of red (It actually add a `text-destructive` automatically) when a field has error/required.\nI only want the `` to change the color.\n\n```\n (\n \n Project Name\n \n \n \n \n \n )}\n/>\n```\n\n========================================\n\nTop Answer:\nYou could go this route\n\n```\n (\n \n \n Email Address *\n \n \n \n \n \n \n )}\n />\n```\n\n========================================\n\nCode:\n```text\n<FormField\n control={form.control}\n name=\"name\"\n render={({ field }) => (\n <FormItem>\n <FormLabel>Project Name</FormLabel>\n <FormControl>\n <Input placeholder=\"Enter project name\" {...field} />\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n/>\n```\n\n```text\n<FormLabel>\n```\n\n```text\ntext-destructive\n```\n\n```text\n<FormMessage/>\n```\n\n```js\nconst FormLabel = React.forwardRef<\n React.ElementRef<typeof LabelPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n const { formItemId } = useFormField()\n \n return (\n <Label\n ref={ref}\n className={className}\n htmlFor={formItemId}\n {...props}\n />\n )\n})\n```\n\n```text\nFormLabel\n```\n\n```text\nform.jsx\n```\n\n```text\n<FormLabel className=\"!text-current\">\n```\n\n```text\nFormLabel\n```\n\n```text\nshadcn\n```\n\n```text\n!text-current\n```\n\n```text\nFormLabel\n```\n\n```text\nFormLabel\n```\n\n```text\ntext-destructive\n```\n\n```text\n<FormField\n control={form.control}\n name=\"name\"\n render={({ field }) => (\n <FormItem>\n <FormLabel style={{ color: 'inherit' }}>Project Name</FormLabel>\n <FormControl>\n <Input placeholder=\"Enter project name\" {...field} />\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n/>\n```\n\n```text\n<FormField\n control={form.control}\n name='email'\n render={({ field }) => (\n <FormItem>\n <FormLabel className='text-[0.8125rem] text-black dark:text-white data-[error=true]:text-black'>\n Email Address *\n </FormLabel>\n <FormControl>\n <Input\n placeholder='test@gmail.com'\n {...field}\n className='h-[2.875rem]'\n />\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n />\n```\n\n========================================\n\nComments:\n- It's weird that they added the red color on the ``. They already have `` for it. It looks bad UI wise if both `` and `` are red.","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":168,"estimatedTokens":698}}644{"id":"stack-68917191","source":"stackoverflow","questionId":68917191,"title":"Is there a way to stop tailwind from overriding markdown default spacing?","tags":["html","css","markdown","tailwind-css","eleventy"],"text":"Title: Is there a way to stop tailwind from overriding markdown default spacing?\nTags: html, css, markdown, tailwind-css, eleventy\nSource: Stack Overflow\n\nQuestion:\nI'm writing a blog using eleventy (with nunjucks) and tailwind.\n\nWhenever I write a post using markdown and disabling tailwind, everything is fine. but when I enable tailwind, the line break (2-space and enter at end of line) stops working, so everything looks like one big paragraph. In other words:\n\nwithout tailwind, this paragraph (in markdown)\n\n```\nHello \n\nWorld\n```\n\nlooks like this\n\nHello \n\n \n\nWorld\n\n**with** tailwind, it looks like\n\nHello \nWorld\n\nHow can I do to write markdown without tailwind overriding the default markdown spacing?\n\n========================================\n\nCode:\n```text\nHello \n\nWorld\n```\n\n```text\nprose\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":44,"estimatedTokens":201}}645{"id":"stack-65844790","source":"stackoverflow","questionId":65844790,"title":"dynamic class binding in nuxtjs/vuejs with tailwind classes","tags":["vue.js","vue-component","tailwind-css","nuxt.js"],"text":"Title: dynamic class binding in nuxtjs/vuejs with tailwind classes\nTags: vue.js, vue-component, tailwind-css, nuxt.js\nSource: Stack Overflow\n\nQuestion:\nI am assigning css classes according to some timer to a div.\n\ns0 can be 0 - 5\n\nthis assignment (as below) works fine but it feels like it is a lot of overhead in both writing and performance. Is there another way to assign css classes dynamically in nuxt?\n\ne.g. writing `class=\"-mt-{s0*8}\"` directly on the template? Why is there a need for a boolean to return? Am I missing something?\n\n```\n \n \n\n...\n\n ...\n methods: {\n oct(o, p) {\n return o*8 == p\n }\n },\n ...\n```\n\n========================================\n\nCode:\n```text\n<template> \n <div class=\"secs-0\" :class='{\"-mt-8\": oct(s0, 8),\n \"-mt-16\": oct(s0, 16),\n \"-mt-24\": oct(s0, 24),\n \"-mt-32\": oct(s0, 32),\n \"-mt-40\": oct(s0, 40)}'>\n\n...\n\n\n\n<script>\n ...\n methods: {\n oct(o, p) {\n return o*8 == p\n }\n },\n ...\n```\n\n```text\nclass=\"-mt-{s0*8}\"\n```\n\n```text\n<template> \n <div class=\"secs-0\" :class=\"['-mt-'+h0*8]\">\n```\n\n========================================\n\nComments:\n- You'll probably find this syntax handy in your case: `:class=\"['-mt-' + s0 * 8]\"`\n- Here's a tiny toy.","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":67,"estimatedTokens":341}}646{"id":"stack-68032254","source":"stackoverflow","questionId":68032254,"title":"How to stop Tailwind CSS from purging the classes in local development environment?","tags":["vue.js","tailwind-css","vite"],"text":"Title: How to stop Tailwind CSS from purging the classes in local development environment?\nTags: vue.js, tailwind-css, vite\nSource: Stack Overflow\n\nQuestion:\nI am `vite.js` build tool, `vue.js` and `tailwindcss: ^2.1.4`\n\nEverything was working normal before but now I am not sure what I did, purge is not working as expected. Tailwind class started purging even in my development environment. It was suppose to purge only when I build project for production.\n\nSay that I applied `mb-10 pt-10` to div, to see this in effect, I need to do one of two things:\n\n- Restart vite.js, Or\n\n- In css file define: `.cust-class { @apply mb-10 pt-10 }` then `mb-10 pt-10` classes will work (together or individually)\n\nHere is my `tailwind.config.js`\n\n```\nmodule.exports = {\n purge: ['./index.html', './src/**/*.{vue,js}'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n colors: {\n transparent: 'transparent',\n current: 'currentColor',\n black: '#000',\n white: '#fff',\n },\n extend: {},\n },\n variants: {\n extend: {\n backgroundColor: ['active'],\n },\n },\n plugins: [],\n};\n```\n\nI never had issue with same configuration in other projects.\n\nThanks for your help.\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n purge: ['./index.html', './src/**/*.{vue,js}'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n colors: {\n transparent: 'transparent',\n current: 'currentColor',\n black: '#000',\n white: '#fff',\n },\n extend: {},\n },\n variants: {\n extend: {\n backgroundColor: ['active'],\n },\n },\n plugins: [],\n};\n```\n\n```text\nvite.js\n```\n\n```text\nvue.js\n```\n\n```text\ntailwindcss: ^2.1.4\n```\n\n```text\nmb-10 pt-10\n```\n\n```text\n.cust-class { @apply mb-10 pt-10 }\n```\n\n```text\nmb-10 pt-10\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nNODE_ENV=production\n```\n\n```text\nNODE_ENV=development\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":103,"estimatedTokens":462}}647{"id":"stack-68978743","source":"stackoverflow","questionId":68978743,"title":"TailwindCSS Active Link Text Color Not Changing","tags":["javascript","html","css","next.js","tailwind-css"],"text":"Title: TailwindCSS Active Link Text Color Not Changing\nTags: javascript, html, css, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using NextJS and Tailwind css to desig a top navigation bar. I want the text color to change for active link. Below is my code:\n\n\r\n\r\n\n```\nconst Header = () => {\n return(\n \n \n \n \n \n \n \n Home\n \n \n Join\n \n \n Login\n \n \n \n \n )\n\n}\n```\n\n\r\n\r\n\r\n\nI have also added the following in my tailwind.config.css:\n\n\r\n\r\n\n```\nmodule.exports = {\n #\n variants: {\n extend: {\n textColor: ['active'],\n },\n \n}\n```\n\n\r\n\r\n\r\n\nDespite that the Text color doesn't change for active link.\n\nCan you please guide what I am doing wrong.\n\n========================================\n\nTop Answer:\nWhen using NavLink it's add class active to link but not active state in tailwindcss\n\nThe simplest way is to use custom variant like this\n\n```\n\n```\n\nThis way is both pure css and takes advantage of the power of tailwindcss. Furthermore, avoid using state when it is not necessary to avoid the rendering problem\n\n========================================\n\nCode:\n```js\nconst Header = () => {\n return(\n <header>\n <nav className=\"sd:max-w-6xl mx-auto\">\n <ul className=\"flex py-2\">\n <li className=\"mr-auto ml-4\">\n <Link href=\"/\"><a><Image width={80} height={80} src=\"/images/brand-logo.png\" alt=\"ECT Logo\"/></a></Link>\n </li>\n <li className=\"mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600\">\n <Link href=\"/\"><a>Home</a></Link>\n </li>\n <li className=\"mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600\">\n <Link href=\"/user/signup\"><a>Join</a></Link>\n </li>\n <li className=\"mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600\">\n <Link href=\"/user/login\"><a>Login</a></Link>\n </li> \n </ul>\n </nav>\n </header>\n )\n\n}\n```\n\n```js\nmodule.exports = {\n #\n variants: {\n extend: {\n textColor: ['active'],\n },\n \n}\n```\n\n```js\nimport Link from 'next/link';\nimport { useRouter } from 'next/router';\n\nexport const Header = () => {\n const router = useRouter();\n\n return (\n <header>\n <Link href=\"/\">\n <a className={router.pathname === \"/\" ? \"active\" : \"\"}>\n Home\n </a>\n </Link>\n </header>\n )\n}\n```\n\n```text\n'use client';\n \nimport { usePathname } from 'next/navigation';\n \nexport const Header = () => {\n const pathname = usePathname();\n\n return (\n <header>\n <Link href=\"/\">\n <a className={pathname === \"/\" ? \"active\" : \"\"}>\n Home\n </a>\n </Link>\n </header>\n );\n};\n```\n\n```text\nimport { usePathname } from \"next/navigation\";\n\nconst NAV_ITEMS = [\n { href: \"/\", label: \"Home\" },\n { href: \"/about\", label: \"About\" },\n];\n\nexport const Nav = () => {\n const pathname = usePathname();\n\n return (\n <nav>\n {NAV_ITEMS.map(({ href, label }) => {\n const isActive = pathname === href;\n\n return (\n <Link\n key={href}\n href={href}\n className={`${isActive ? \"text-blue-500\" : \"text-black\"} text-sm`}\n >\n {label}\n </Link>\n );\n })}\n </nav>\n );\n};\n```\n\n```text\n<Link\n key={href}\n href={href}\n className={classnames(\"text-sm\", {\n \"text-blue-500\": isActive,\n \"text-black\": !isActive,\n })}\n>\n {label}\n</Link>;\n```\n\n```js\n<Link href=\"/user/signup\">\n <a className={`mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-xl ${router.pathname == \"/user/signup\" ? \"text-indigo-600\" : \"text-brand-darkblue\"}`}>\n Home\n </a>\n</Link>\n```\n\n```text\nactive\n```\n\n```text\nnav\n```\n\n```text\nhref\n```\n\n```text\n<Link>\n```\n\n```text\nclassName\n```\n\n```text\n<NavLink to={`/${link.name}`} className={ ({isActive})=> (\" capitalize my-2 flex flex-col \") + (isActive?ActiveLink:NormalLink) }>\n {link.name}\n </NavLink>\n```\n\n```text\n//ActiveLink.js\n import { useRouter } from 'next/router';\n import Link from 'next/link';\n import PropTypes from 'prop-types';\n import { useTheme } from 'next-themes';\n \n \n const ActiveLink = ({ href, children, ...rest }) => {\n const router = useRouter();\n const { theme, systemTheme } = useTheme();\n const useLoaded = () => {\n const [loaded, setLoaded] = useState(false);\n useEffect(() => setLoaded(true), []);\n return loaded;\n };\n const mounted = useLoaded();\n \n const isActive = router.asPath === href;\n const currentTheme =\n mounted && theme !== undefined && theme === 'system' ? systemTheme : theme;\n \n const activeLinkBgColor =\n currentTheme === 'dark'\n ? 'bg-gray-700 text-white'\n : 'bg-blue-600 text-white';\n \n const themeBgHover =\n currentTheme === 'dark'\n ? 'hover:bg-gray-700 hover:text-white'\n : 'hover:bg-blue-600 hover:text-white ';\n \n const activeLinkAndNotActiveColor = isActive\n ? activeLinkBgColor\n : `text-gray-300 ${themeBgHover}`;\n \n const className = `${activeLinkAndNotActiveColor} px-3 py-2 rounded-md text-sm font-medium`;\n \n return (\n <Link href={href} passHref {...rest}>\n <a className={className} aria-current={isActive ? 'page' : undefined}>\n {children}\n </a>\n </Link>\n );\n };\n \n ActiveLink.propTypes = {\n href: PropTypes.string.isRequired,\n }; \n \n \n export default ActiveLink;\n\n// How to use it\n <ActiveLink href='/about'> About </ActiveLink>\n```\n\n```text\n<NavLink to={``} className={'[&.active]:text-indigo-500}>\n</NavLink>\n```\n\n```js\n// tailwind.config.js\nconst plugin = require('tailwindcss/plugin');\n\n\nmodule.exports = {\n // ...\n plugins: [\n // ... some plugins,\n plugin(function({ addVariant }) {\n addVariant('active', ['&:active', '&.router-link-active'])\n })\n ],\n}\n```\n\n```js\n<template>\n <NuxtLink\n class=\"active:text-purple-500\"\n >\n <slot></slot>\n </NuxtLink>\n</template>\n```\n\n```text\ntailwindcss/plugin\n```\n\n```text\nactive:text-purple-500\n```\n\n========================================\n\nComments:\n- Thank you. It solved and problem and also clarified my concepts. A few points could be useful for others who are in similar situation. In the code, it should be const router = useRouter(); // Not userRouter Also, I put the class element in the tag it also worked. Thank you once again.\n- perfect solution, worked for me as well, just want to add that if using the App Router instead of the Pages Router, you wanna import usePathname from next/navigation and not router from next/router, otherwise you'll get NextRouter not mounted errors.\n- @xXnikosXx: Thanks, just updated my answer to include info about the app router.\n- This was what i have been looking for for a while, many thanks! @ptts\n- Next.js provides a built-in router and `Link` component, it doesn't use `react-router-dom`.","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":339,"estimatedTokens":1883}}648{"id":"stack-76700293","source":"stackoverflow","questionId":76700293,"title":"is it efficent to use spacer in flexbox","tags":["html","css","tailwind-css"],"text":"Title: is it efficent to use spacer in flexbox\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have 4 div's and i want two of these left of the container and other two on the right.\n\ni manage to do it with like this do you think is that a good aproach in tailwind-css or in general?\n\n\r\n\r\n\n```\ndiv.flex {\n background-color: #eee;\n outline: 1px solid #999;\n}\n\ndiv.flex > * {\n background-color: #ccc;\n outline: 1px solid #333;\n}\n```\n\n\r\n\n```\n\n \n \n \n \n \n\n```\n\n========================================\n\nTop Answer:\n(Disclaimer: I am not a Tailwind user, so I don't know if using spacer elements is *idiomatic* in Tailwind or not - but if this were my own project I'd avoid them: simpler HTML with fewer moving-parts is more maintainable, imo)\n\nYou don't need any placeholder elements in your HTML - you can use CSS's flexbox's built-in support for customizing element location and spacing using `margin: auto`, like so:\n\n\r\n\r\n\n```\ndiv.flex {\n background-color: #eee;\n outline: 1px solid #999;\n}\n\ndiv.flex > * {\n background-color: #ccc;\n outline: 1px solid #333;\n}\n\ndiv.flex > *:nth-child(2) {\n margin-right: auto;\n}\ndiv.flex > *:nth-child(3) {\n margin-left: auto;\n}\n```\n\n\r\n\n```\n\n \n \n \n \n\n```\n\n\r\n\r\n\r\n\nAn alternative approach is to use two child flex containers, with the grandparent flex container having `justify-content: space-between;`:\n\nAlso, instead of using explicit margins via `.ml-4` and `.mr-4` (which set `margin-left/right: 1rem;` respectively) consider just using `gap: 1rem;`:\n\n\r\n\r\n\n```\ndiv#grandparent {\n background-color: #eee;\n outline: 1px solid #999;\n\n justify-content: space-between;\n padding: 1rem;\n}\ndiv#grandparent > div.flex {\n background-color: #ddd;\n\n flex-shrink: 1;\n gap: 1rem;\n}\ndiv#grandparent > div.flex > * {\n background-color: #ccc;\n outline: 1px solid #333;\n}\n```\n\n\r\n\n```\n\n \n \n \n \n \n \n \n \n\n```\n\n========================================\n\nCode:\n```css\ndiv.flex {\n background-color: #eee;\n outline: 1px solid #999;\n}\n\ndiv.flex > * {\n background-color: #ccc;\n outline: 1px solid #333;\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.3.2\"></script>\n\n<div class=\"sticky w-full h-16 gap-2 flex items-center\">\n <div class=\"ml-4 w-8 h-8\"></div>\n <div class=\"w-8 h-8\"></div>\n <div class=\"grow\"></div>\n <div class=\"w-8 h-8\"></div>\n <div class=\"mr-4 w-8 h-8\"></div>\n</div>\n```\n\n```css\ndiv.flex {\n background-color: #eee;\n outline: 1px solid #999;\n}\n\ndiv.flex > * {\n background-color: #ccc;\n outline: 1px solid #333;\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.3.2\"></script>\n\n<div class=\"sticky w-full h-16 gap-2 flex items-center\">\n <div class=\"ml-4 w-8 h-8\"></div>\n <div class=\"w-8 h-8\"></div>\n <div class=\"w-8 h-8 ml-auto\"></div> \n <div class=\"mr-4 w-8 h-8\"></div>\n</div>\n```\n\n```text\nml-auto\n```\n\n```text\ngap\n```\n\n```css\ndiv.flex {\n background-color: #eee;\n outline: 1px solid #999;\n}\n\ndiv.flex > * {\n background-color: #ccc;\n outline: 1px solid #333;\n}\n\ndiv.flex > *:nth-child(2) {\n margin-right: auto;\n}\ndiv.flex > *:nth-child(3) {\n margin-left: auto;\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.3.2\"></script>\n\n<div class=\"sticky w-full h-16 gap-2 flex items-center\">\n <div class=\"ml-4 w-8 h-8\"></div>\n <div class=\"w-8 h-8\"></div>\n <div class=\"w-8 h-8\"></div>\n <div class=\"mr-4 w-8 h-8\"></div>\n</div>\n```\n\n```css\ndiv#grandparent {\n background-color: #eee;\n outline: 1px solid #999;\n\n justify-content: space-between;\n padding: 1rem;\n}\ndiv#grandparent > div.flex {\n background-color: #ddd;\n\n flex-shrink: 1;\n gap: 1rem;\n}\ndiv#grandparent > div.flex > * {\n background-color: #ccc;\n outline: 1px solid #333;\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.3.2\"></script>\n\n<div class=\"sticky w-full h-16 gap-2 flex items-center\" id=\"grandparent\">\n <div class=\"flex\">\n <div class=\"w-8 h-8\"></div>\n <div class=\"w-8 h-8\"></div>\n </div>\n <div class=\"flex\">\n <div class=\"w-8 h-8\"></div>\n <div class=\"w-8 h-8\"></div>\n </div>\n</div>\n```\n\n```text\nmargin: auto\n```\n\n```text\njustify-content: space-between;\n```\n\n```text\n.ml-4\n```\n\n```text\n.mr-4\n```\n\n```text\nmargin-left/right: 1rem;\n```\n\n```text\ngap: 1rem;\n```\n\n========================================\n\nComments:\n- Considering that CSS flex-box does not normally need spacers (because `margin: auto;` and `justify-*` properties achieve the same effect) **why** do you say it's \"good practice\"? .\n- That looks like perfect and cleanest solution thank youu\n- Yeah this approach is very good thanks. Also ml-4 and mr-4 means 1rem in tailwind css its not fix value or gap-2 h-16 these all rem but px but 2 flex div's with space-between is great idea.","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":275,"estimatedTokens":1180}}649{"id":"stack-70474176","source":"stackoverflow","questionId":70474176,"title":"tailwind: how to use @apply for custom class in nuxt2?","tags":["css","nuxt.js","tailwind-css"],"text":"Title: tailwind: how to use @apply for custom class in nuxt2?\nTags: css, nuxt.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to use `@apply` on my custom class in Nuxt.js 2\n\n**nuxt.config.js**\n\n```\nexport default {\n buildModules: [\n '@nuxtjs/tailwindcss',\n ],\n tailwindcss: {\n cssPath: '~/assets/app.css',\n exposeConfig: true\n }\n}\n```\n\n**assets/app.css**\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer utilities {\n .btn {\n @apply border-2 p-2 font-bold;\n }\n}\n```\n\nin any vue-single-file or any other scss file\n\n```\n\n .btn-lg {\n @apply btn;\n }\n\n```\n\nhttps://i.sstatic.net/P6XIO.png\n\nThe `btn` class does not exist. If you're sure that `btn` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree\n\n**So, how to make my custom styles be seen by the Tailwind CSS before processing to make my custom classes work in `@apply`?**\n\nI've tried the solutions in the following questions and document\n\n- adding-custom-utilities\n\n- not able to use custom classes in @apply in scss file tailwind nextjs project?\n\nBut none of them work\n\nI am using:\n\n- Tailwindcss **2.2.19** via @nuxtjs/tailwindcss\n\n- Nuxt.js 2.15.8\n\nThanks a lot for any replies!\n\n========================================\n\nCode:\n```js\nexport default {\n buildModules: [\n '@nuxtjs/tailwindcss',\n ],\n tailwindcss: {\n cssPath: '~/assets/app.css',\n exposeConfig: true\n }\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer utilities {\n .btn {\n @apply border-2 p-2 font-bold;\n }\n}\n```\n\n```js\n<style lang=\"scss\">\n .btn-lg {\n @apply btn;\n }\n</style>\n```\n\n```text\n@apply\n```\n\n```text\nbtn\n```\n\n```text\nbtn\n```\n\n```text\n@import\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```js\nmodule.exports = {\n mode: 'jit'\n}\n```\n\n```js\nconst plugin = require('tailwindcss/plugin')\nconst fs = require('fs')\nmodule.exports = {\n // ... purge, theme, variants, ...\n plugins: [\n plugin(function({ addUtilities, postcss }) {\n const css = fs.readFileSync('./your-custom-style-file-path', 'utf-8')\n addUtilities(postcss.parse(css).nodes)\n }),\n ],\n}\n```\n\n```js\nvite: {\n plugins: [\n {\n name: 'watch-external', // https://stackoverflow.com/questions/63373804/rollup-watch-include-directory/63548394#63548394\n async buildStart(){\n const files = await fg(['assets/**/*']);\n for(let file of files){\n this.addWatchFile(file);\n }\n }\n }\n ]\n}\n```\n\n```text\nmode: \"jit\"\n```\n\n```text\ntailwindcss\n```\n\n```text\n@nuxtjs/tailwindcss\n```\n\n```text\nplugin()\n```\n\n```text\ntailwind.config.css\n```\n\n```text\nnuxt.config.js\n```\n\n```text\nnuxt-vite\n```\n\n========================================\n\nComments:\n- Fine, it seems to be a bug in nuxtjs/tailwindcss: Custom utility: @apply can only be used for classes in the same CSS tree., just add a `mode:\"jit\"` can solve this problem\n- Post this as an answer!\n- I am facing similar issue even after using the `mode: jit`. I have posted my question here: stackoverflow.com/q/78792351/7584240 Can you please check and provide some solution?\n- With tailwindcss 3, it comes with a standalone CLI - tailwindcss.com/blog/standalone-cli - can this be used instead of including tailwindcss in node ?\n- I am facing similar issue even after using the `mode: jit`. I have posted my question here: stackoverflow.com/q/78792351/7584240 Can you please check and provide some solution?","metadata":{"transformedAt":"2026-08-18T18:33:42.935Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":19,"totalLines":198,"estimatedTokens":900}}650{"id":"stack-69639054","source":"stackoverflow","questionId":69639054,"title":"Correct way to do Tailwind grids?","tags":["html","css","css-grid","tailwind-css"],"text":"Title: Correct way to do Tailwind grids?\nTags: html, css, css-grid, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am just getting started using Tailwind and I am a bit confused on how to use grids/rows and columns correctly. Here are the different methods I see being used...\n\nMethod 1:\n\n```\n\n \n \n \n \n \n \n\n```\n\nMethod 2:\n\n```\n\n \n \n \n \n \n \n\n```\n\nMethod 3:\n\n```\n\n \n \n \n \n \n \n\n```\n\nCan someone explain to me the difference between these 3 methods and which one is the correct one to use for what application?\n\n========================================\n\nCode:\n```text\n<div class=\"flex flex-wrap -mx-1\">\n <div class=\"my-1 px-1 w-1/2\">\n <!-- Column Content -->\n </div>\n <div class=\"my-1 px-1 w-1/2\">\n <!-- Column Content -->\n </div>\n</div>\n```\n\n```text\n<div class=\"grid grid-cols-2 gap-1\">\n <div>\n <!-- Column Content -->\n </div>\n <div>\n <!-- Column Content -->\n </div>\n</div>\n```\n\n```text\n<div class=\"grid grid-flow-col gap-1\">\n <div class=\"col-span-1\">\n <!-- Column Content -->\n </div>\n <div class=\"col-span-1\">\n <!-- Column Content -->\n </div>\n</div>\n```\n\n```css\nmargin-left: -0.25rem;\nmargin-right: -0.25rem;\n```\n\n```css\nmargin-top: 0.25rem;\nmargin-bottom: 0.25rem;\n```\n\n```css\npadding-left: 0.25rem;\npadding-right: 0.25rem;\n```\n\n```css\nwidth: 50%;\n```\n\n```css\ngrid-template-columns: repeat(2, minmax(0, 1fr));\n```\n\n```css\ngap: 0.25rem;\n```\n\n```css\ngrid-column: span 1 / span 1;\n```\n\n```text\nflex\n```\n\n```text\nflex-wrap\n```\n\n```text\n-mx-1\n```\n\n```text\nmy-1\n```\n\n```text\npx-1\n```\n\n```text\nw-1/2\n```\n\n```text\ngrid\n```\n\n```text\ngrid-cols-2\n```\n\n```text\ngap-1\n```\n\n```text\ngrid-flow-col\n```\n\n```text\ncol-span-1\n```\n\n========================================\n\nComments:\n- Welcome to Stack Oveflow! This question will get a bunch of opinions - since there is no \"correct\" use. The main difference is the first example is using the `flexbox` model and the second and third are using CSS Grid. For all the child classes, you can look at the Tailwind documentation to understand what those do.","metadata":{"transformedAt":"2026-08-18T18:33:42.936Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":21,"totalLines":163,"estimatedTokens":504}}651{"id":"stack-66493322","source":"stackoverflow","questionId":66493322,"title":"Can't install fonts with Nuxt/Tailwind","tags":["vue.js","nuxt.js","tailwind-css"],"text":"Title: Can't install fonts with Nuxt/Tailwind\nTags: vue.js, nuxt.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI applied this answer exactly but my custom font class still doesn't work:\n\n`tailwind.config.js`:\n\n```\nmodule.exports = {\n theme: {\n fontFamily: {\n \"intro-regular\": \"intro-regular\"\n },\n extend: {\n fontSize: {\n \"10\": \"10px\",\n \"11\": \"11px\"\n }\n }\n }\n}\n```\n\nIn `assets/scss/fonts.scss`:\n\n```\n@font-face {\n font-family: 'intro-regular';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url('../fonts/intro/Intro-Regular.otf') format('opentype');\n}\n```\n\nThis should work, but when I try `@apply intro-regular` anywhere in my app I get this error:\n\nThe `intro-black` class does not exist\n\nAny suggestion?\n\n(also I don't even see the font being loaded in DevTools' network tab: regardless of Tailwind I would think that the font should at least load but it doesn't)\n\nEDIT: more info on my setup\n\nImport of my `main.scss` in `nuxt.config.js`:\n\n```\ncss: [\n {\n src: '~/assets/scss/main.scss',\n lang: 'scss'\n }\n],\n```\n\nAnd in `main.scss`:\n\n```\n@import 'fonts';\n```\n\nTo install Nuxt/Tailwind I followed the docs to the letter. But is sometimes the case with `Nuxt.js`, things didn't turn out as they were supposed to and `Nuxt` did not create any `tailwind.css` file in the `/assets` folder.\n\n========================================\n\nTop Answer:\n`src: url('../fonts/intro/Intro-Regular.otf')`\n\nShould be:\n\n`src: url('~/assets/fonts/intro/Intro-Regular.otf')`\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n theme: {\n fontFamily: {\n \"intro-regular\": \"intro-regular\"\n },\n extend: {\n fontSize: {\n \"10\": \"10px\",\n \"11\": \"11px\"\n }\n }\n }\n}\n```\n\n```css\n@font-face {\n font-family: 'intro-regular';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url('../fonts/intro/Intro-Regular.otf') format('opentype');\n}\n```\n\n```text\ncss: [\n {\n src: '~/assets/scss/main.scss',\n lang: 'scss'\n }\n],\n```\n\n```text\n@import 'fonts';\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nassets/scss/fonts.scss\n```\n\n```text\n@apply intro-regular\n```\n\n```text\nintro-black\n```\n\n```text\nmain.scss\n```\n\n```text\nnuxt.config.js\n```\n\n```text\nmain.scss\n```\n\n```text\nNuxt.js\n```\n\n```text\nNuxt\n```\n\n```text\ntailwind.css\n```\n\n```text\n/assets\n```\n\n```css\n/* stylelint-disable scss/at-rule-no-unknown */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n/* stylelint-enable */\n```\n\n```js\nbuildModules: [\n [\n '@nuxtjs/tailwindcss',\n {\n cssPath: '~/assets/scss/tailwind.scss',\n },\n ],\n]\n```\n\n```text\n@apply font-intro-regular\n```\n\n```text\nfont\n```\n\n```text\n~/assets/scss/tailwind.scss\n```\n\n```text\n@import './fonts';\n```\n\n```text\nnuxt.config.js\n```\n\n```text\nsrc: url('../fonts/intro/Intro-Regular.otf')\n```\n\n```text\nsrc: url('~/assets/fonts/intro/Intro-Regular.otf')\n```\n\n```js\nmodule.exports = {\n theme: {\n fontFamily: {\n intro: (\"intro-regular\": \"intro-regular\")\n },\n extend: {\n fontSize: {\n \"10\": \"10px\",\n \"11\": \"11px\"\n }\n }\n }\n}\n```\n\n========================================\n\nComments:\n- Thanks, that's what I had initially. I changed at some point during my struggle. But it does not solve my problem. Font still won't load and same error message...\n- You mention you’ve imported the font in assets/scss/fonts.scss, but it isn’t clear how you’ve imported that file into your main css. Can you ?\n- How have you implemented tailwind with your nuxt app? Typically you would have a tailwind.css which imports the base, utility classes etc. That’s where you’d import your fonts.scss. Can you update again with more detail about how you’ve implemented tailwind into your app?\n- Thanks! Adding `font-` before `intro-regular` in my `@apply` did the trick :) I didn't know we should put `font-` before the font name though, and even when knowing that I can't find it clearly explained in the docs! (SO wants me to wait 20h before I can award bounty)\n- Usually, when you do have a key nested into a object, you need some kind of prefix for it (like `opacity`, `borderRadius` or `lineHeight`). It is also useful to know when you want to add your own keys. For the example, go to this page: v1.tailwindcss.com/docs/font-family#font-families There, you will see the default settings for `sans, serif, mono` and you can see those in action at the top of the page with their default behavior. `variants` are tricky in Tailwind tho ! (v1.tailwindcss.com/docs/configuring-variants) Alright for the bounty, waiting patiently. :)\n- Please do more effort to your answer, so everyone can understand it.","metadata":{"transformedAt":"2026-08-18T18:33:42.936Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":25,"totalLines":233,"estimatedTokens":1156}}652{"id":"stack-69414890","source":"stackoverflow","questionId":69414890,"title":"Tailwind CSS: Referencing to custom color in tailwind.config.js","tags":["javascript","tailwind-css","tailwind-in-js","module-export"],"text":"Title: Tailwind CSS: Referencing to custom color in tailwind.config.js\nTags: javascript, tailwind-css, tailwind-in-js, module-export\nSource: Stack Overflow\n\nQuestion:\nIn order to streamline my theming I'd like to reference to a custom color I defined and then pass it through a function to get a lighter or darker variant.\n\nI extend the default color theme using the following (partial) code:\n\n```\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n primary: {\n DEFAULT: '#325889',\n light: '#5aacbb',\n lighter: '#5ebebf',\n },\n },\n },\n },\n}\n```\n\nNow my goal is to somehow reference the `colors.primary` in another custom color variant to pass it into a custom function, something like this:\n\n```\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n primary: {\n DEFAULT: '#325889',\n light: '#5aacbb',\n lighter: '#5ebebf',\n },\n gradient: {\n '0\\/3': this.theme.extend.colors.primary,\n '1\\/3': getGradientStop(this.theme.extend.colors.primary, this.theme.extend.colors.primary.lighter, 33.333),\n '2\\/3': getGradientStop(this.theme.extend.colors.primary, this.theme.extend.colors.primary.lighter, 66.666),\n '3\\/3': this.theme.extend.colors.primary.lighter,\n }\n },\n },\n },\n}\n```\n\nHowever, I can't seem to reference the primary color in any way. I tried `this.colors.primary`, `this.theme.extend.colors.primary` but can't seem to get it up and running.\n\nAny clues on how to do this would be greatly appreciated.\n\nCheers!\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n primary: {\n DEFAULT: '#325889',\n light: '#5aacbb',\n lighter: '#5ebebf',\n },\n },\n },\n },\n}\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n primary: {\n DEFAULT: '#325889',\n light: '#5aacbb',\n lighter: '#5ebebf',\n },\n gradient: {\n '0\\/3': this.theme.extend.colors.primary,\n '1\\/3': getGradientStop(this.theme.extend.colors.primary, this.theme.extend.colors.primary.lighter, 33.333),\n '2\\/3': getGradientStop(this.theme.extend.colors.primary, this.theme.extend.colors.primary.lighter, 66.666),\n '3\\/3': this.theme.extend.colors.primary.lighter,\n }\n },\n },\n },\n}\n```\n\n```text\ncolors.primary\n```\n\n```text\nthis.colors.primary\n```\n\n```text\nthis.theme.extend.colors.primary\n```\n\n```text\nconst primary = '#325889';\nconst primaryLight = '#5aacbb';\nconst primaryLighter = '#5ebebf';\n\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n primary: {\n DEFAULT: primary,\n light: primaryLight,\n lighter: primaryLighter,\n },\n gradient: {\n '0\\/3': primary,\n '1\\/3': getGradientStop(primary, primaryLighter, 33.333),\n '2\\/3': getGradientStop(primary, primaryLighter, 66.666),\n '3\\/3': primaryLighter,\n }\n },\n },\n },\n};\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.936Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":133,"estimatedTokens":810}}653{"id":"stack-68064021","source":"stackoverflow","questionId":68064021,"title":"Tailwind CSS does not work with React App","tags":["javascript","node.js","reactjs","node-modules","tailwind-css"],"text":"Title: Tailwind CSS does not work with React App\nTags: javascript, node.js, reactjs, node-modules, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to add tailwind css with react app. I followed the tailwind documentation,how to set up tailwind with react.\n\nI tried with tailwind latest version.I checked Nodejs and npm are installed perfectly.\n\nBut when i run the `npm run start` it always get an error. I can't fix the problem.\n\nhttps://i.sstatic.net/5OJQj.png\n\npackage.json\n\n```\n{\n \"name\": \"tailwind-css\",\n \"version\": \"0.1.0\",\n \"homepage\": \"\",\n \"private\": true,\n \"dependencies\": {\n \"@craco/craco\": \"^6.1.2\",\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.5.0\",\n \"@testing-library/user-event\": \"^7.2.1\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-router-dom\": \"^5.2.0\",\n \"react-scripts\": \"^4.0.3\"\n },\n \"scripts\": {\n \"start\": \"craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"engines\": {\n \"npm\": \"6.14.6\",\n \"node\": \"12.18.4\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^9.8.6\",\n \"postcss\": \"^7.0.36\",\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.2.2\"\n }\n}\n```\n\nPlease anyone help.\n\n========================================\n\nTop Answer:\nJust update your react-script from v4 to lastest 5 version by: npm install react-scripts@latest.\nIf you will stay with version 4 you have to use craco\n\nThat was helpful for me\n\n========================================\n\nCode:\n```text\n{\n \"name\": \"tailwind-css\",\n \"version\": \"0.1.0\",\n \"homepage\": \"\",\n \"private\": true,\n \"dependencies\": {\n \"@craco/craco\": \"^6.1.2\",\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.5.0\",\n \"@testing-library/user-event\": \"^7.2.1\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-router-dom\": \"^5.2.0\",\n \"react-scripts\": \"^4.0.3\"\n },\n \"scripts\": {\n \"start\": \"craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"engines\": {\n \"npm\": \"6.14.6\",\n \"node\": \"12.18.4\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^9.8.6\",\n \"postcss\": \"^7.0.36\",\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.2.2\"\n }\n}\n```\n\n```text\nnpm run start\n```\n\n```text\n\"scripts\": {\n \"start\": \"craco start && postcss src/css/app.css -o public/app.css\", <--- need to inser postcss script as your css reference path.\n \"build\": \"craco build\",\n```\n\n```text\nmodule.exports = {\n style: {\n postcss: {\n plugins: [require(\"tailwindcss\"), require(\"autoprefixer\")],\n },\n },\n};\n```\n\n```text\npackage.json\n```\n\n```text\ncraco.config.js\n```\n\n```text\nmodule.exports = \n\n {\n content: [\n \"./index.html\",\n \"./src/**/*.{js,ts,jsx,tsx}\"\n ].\n ..///\n }\n```\n\n```text\n<script src=\"https://cdn.tailwindcss.com\"></script>\n```\n\n========================================\n\nComments:\n- Have you tried reinstalling `node_modules` yet?\n- this is not tailwind error\n- Sorry everyone, This error was in react scripts modules.Now working fine.Thanks all.\n- @MijanurRahman Can you pls clarify how exactly you fixed this?\n- @GeniusHawlah You need `react-scripts` v5.0.0 or greater for tailwind to work.\n- @MijanurRahman Next time, if you find a solution, you should add an answer to your question to help others who are facing the same issue.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- This fixed it for me. I updated my node and did a force update for npm vulnerabilities. Thank you!","metadata":{"transformedAt":"2026-08-18T18:33:42.936Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":181,"estimatedTokens":1056}}654{"id":"stack-72870385","source":"stackoverflow","questionId":72870385,"title":"Use Tailwind Css to maintain a perfect Circle a cross every screen size","tags":["css","geometry","tailwind-css","radial-gradients"],"text":"Title: Use Tailwind Css to maintain a perfect Circle a cross every screen size\nTags: css, geometry, tailwind-css, radial-gradients\nSource: Stack Overflow\n\nQuestion:\nI want to use Tailwind Css to maintain a perfect circle for my icon avatars shown below for both large and small screens.\n\nI do know that I can use a gradient-radial like this:\n\n```\n.avatar{\n background: radial-gradient(circle closest-side, \n yellow calc(100% - 2px),#db0100 calc(100% - 1px) 99%,transparent 100%);\n color: #db0100;\n}\n```\n\nBut I scrictly want to use Tailwind. Is it possible? Thanks.\n\nhttps://i.sstatic.net/Q7c6o.png\n\n========================================\n\nTop Answer:\nA background gradient won't actually have any effect on the size or shape of an element.\n\nIn order to maintain a perfect circle you first need to make an element a square and then use something like border radius to round the corners.\n\nThe most recent version of Tailwind CSS has a class to utilize the \"aspect-ratio\" property.\n\n(More on that here: https://tailwindcss.com/docs/aspect-ratio )\n\nYour HTML might look something like this:\n\n```\n\n```\n\n\"aspect-square\" will make the element always be a square.\n\"rounded-full\" will use border-radius to make the square a circle.\n\nBoth of these classes are available in Tailwind CSS.\n\nIf you haven't already, your icon avatars may need a defined height or width to make sure they match each other in size.\n\n========================================\n\nCode:\n```css\n.avatar{\n background: radial-gradient(circle closest-side, \n yellow calc(100% - 2px),#db0100 calc(100% - 1px) 99%,transparent 100%);\n color: #db0100;\n}\n```\n\n```text\n<div class=\"w-11 h-11 shrink-0 grow-0 rounded-full bg-green-300 text-green-700\">Content</div>\n```\n\n```text\nrounded-full\n```\n\n```text\ngrow-0\n```\n\n```text\nshrink-0\n```\n\n```text\n<div class=\"avatar aspect-square rounded-full\"></div>\n```\n\n========================================\n\nComments:\n- Interesting stuff! I will try one with this solution and see whether it fits my use case\n- Interesting but wont work...","metadata":{"transformedAt":"2026-08-18T18:33:42.936Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":81,"estimatedTokens":509}}655{"id":"stack-77633275","source":"stackoverflow","questionId":77633275,"title":"Using a Tooltip component within Top Sticky thead > th's and Left Sticky tbody> td's","tags":["css","tailwind-css","react-table","tanstack","radix-ui"],"text":"Title: Using a Tooltip component within Top Sticky thead > th's and Left Sticky tbody> td's\nTags: css, tailwind-css, react-table, tanstack, radix-ui\nSource: Stack Overflow\n\nQuestion:\nI have a table using `@tanstack/react-table` and styled with ShadCN Table Component with a few adjustments for the sticky functionality and ShadCN Tooltip Component\n\nI have all of the `Thead` (`th`) components within a `TableHeader`(`thead`) sticky to the top. So when a user scrolls a table vertically, the `Thead`(`th`) sticks to the top.\n\nI have the first columns `TableCell`'s (`td`) sticky to the left. So when a user scrolls the table horizontally, that column's data sticks to the left.\n\nThe problem is, that to make this work, I need to add a `z-index`'s across various elements, so Tooltips either get stuck behind `Thead`'s or other `TableCell`'s. So, not really sure how to have both the sticky `Thead` & `TableCell` along with `Tooltips`'s\n\nHere is a StackBlitz Environment to recreate the issue if you want to play around with it?\n\n### Tanstack Column\n\n```\nconst Header: React.FC = ({ title }) => (\n \n {title}\n \n);\n\n//////\n{\n accessorFn: (row) => `${row.firstName} ${row.lastName}`,\n id: 'fullName',\n header: () => ,\n cell: (info) => {\n return (\n \n \n \n \n {info.getValue()}\n \n \n This\n\n Is\n\n A\n\n Tooltip\n\n Test\n\n \n \n \n \n );\n },\n footer: (props) => props.column.id,\n meta: {\n sticky: true,\n stickyLeft: true,\n },\n},\n```\n\n### table.tsx\n\n```\nimport { cn } from '@/lib/utils';\nimport { type ColumnMeta } from '@tanstack/react-table';\nimport * as React from 'react';\n\nexport interface TableProps extends React.HTMLAttributes {\n tableClassName?: string;\n}\n\nconst Table = React.forwardRef(({ className, tableClassName, ...props }, ref) => (\n \n \n \n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef>(({ className, ...props }, ref) => (\n \n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef>(({ className, ...props }, ref) => (\n \n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef>(({ className, ...props }, ref) => (\n \n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps extends React.HTMLAttributes {\n isLoading?: boolean;\n noHover?: boolean;\n}\n\nconst TableRow = React.forwardRef(({ className, isLoading, noHover, ...props }, ref) => (\n *]:data-[state=selected]:bg-muted', !noHover && !isLoading && '[&>*]:hover:bg-muted', className)}\n {...props}\n />\n));\nTableRow.displayName = 'TableRow';\n\nexport interface TableHeadProps extends React.ThHTMLAttributes, ColumnMeta {\n isLoading?: boolean;\n last?: boolean;\n}\n\nconst TableHead = React.forwardRef>(\n ({ className, sticky, stickyLeft, stickyRight, isLoading, last, ...props }, ref) => {\n return (\n [role=checkbox]]:translate-y-[2px] relative',\n sticky && 'sticky -top-[1px] z-[7] bg-background',\n stickyLeft && 'sticky -left-[1px] z-[9] bg-background',\n stickyRight && 'sticky -right-[1px] z-[9] bg-background',\n stickyRight && last && 'z-[8]',\n isLoading && 'min-w-[100px]',\n className,\n )}\n {...props}\n />\n );\n },\n);\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps extends React.TdHTMLAttributes, ColumnMeta {}\n\nconst TableCell = React.forwardRef>(({ className, sticky, stickyLeft, stickyRight, ...props }, ref) => (\n [role=checkbox]]:translate-y-[2px] relative',\n sticky && 'sticky -right-[1px] z-[5] bg-background',\n stickyLeft && 'sticky -left-[1px] z-[6] bg-background',\n stickyRight && 'sticky -right-[1px] z-[5] bg-background',\n className,\n )}\n {...props}\n />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef>(({ className, ...props }, ref) => (\n \n));\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n```\n\nAny help would be greatly appreciated!\n\n========================================\n\nTop Answer:\nYou could look at increasing the `z-index` of the cell when it is hovered, since this is presumably when the tooltip shows:\n\n```\n\n```\n\n```\nconst TableCell = React.forwardRef>(({ …, hasTooltip, … }, ref) => (\n \n));\n```\n\nThough you will still get some janky behavior such as when the cell being hovered is partially behind a different cell that should be on top:\n\nhttps://i.sstatic.net/pQ8H6.png\n\nSee a Stackblitz fork of this solution\n\nOtherwise, you could consider using Portals to render the tooltip element outside the table such that it would be easier to organize elements in the z-stack, though I'm not sure how compatible the Shadcn/Radix Tooltip component would be with this approach.\n\n========================================\n\nCode:\n```js\nconst Header: React.FC<{ title: string }> = ({ title }) => (\n <div className=\"font-bold min-w-[300px] bg-slate-300 h-16 flex justify-center items-center\">\n {title}\n </div>\n);\n\n//////\n{\n accessorFn: (row) => `${row.firstName} ${row.lastName}`,\n id: 'fullName',\n header: () => <Header title=\"Name\" />,\n cell: (info) => {\n return (\n <div className=\"font-bold min-w-[300px]\">\n <TooltipProvider>\n <Tooltip defaultOpen={info.row.index === 0}>\n <TooltipTrigger asChild>\n <span>{info.getValue()}</span>\n </TooltipTrigger>\n <TooltipContent className=\"max-w-[200px] w-full min-w-[150px]\">\n <p>This</p>\n <p>Is</p>\n <p>A</p>\n <p>Tooltip</p>\n <p>Test</p>\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n </div>\n );\n },\n footer: (props) => props.column.id,\n meta: {\n sticky: true,\n stickyLeft: true,\n },\n},\n```\n\n```js\nimport { cn } from '@/lib/utils';\nimport { type ColumnMeta } from '@tanstack/react-table';\nimport * as React from 'react';\n\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n tableClassName?: string;\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(({ className, tableClassName, ...props }, ref) => (\n <div className={cn('w-full overflow-x-auto data-table-container border rounded-md', className)}>\n <table ref={ref} className={cn('w-full caption-bottom text-sm relative data-table', tableClassName)} {...props} />\n </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (\n <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (\n <tbody ref={ref} className={cn(className)} {...props} />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (\n <tfoot ref={ref} className={cn('bg-primary font-medium text-primary-foreground', className)} {...props} />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n isLoading?: boolean;\n noHover?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(({ className, isLoading, noHover, ...props }, ref) => (\n <tr\n ref={ref}\n className={cn('transition-colors', !isLoading && '[&>*]:data-[state=selected]:bg-muted', !noHover && !isLoading && '[&>*]:hover:bg-muted', className)}\n {...props}\n />\n));\nTableRow.displayName = 'TableRow';\n\nexport interface TableHeadProps<TData, TValue> extends React.ThHTMLAttributes<HTMLTableCellElement>, ColumnMeta<TData, TValue> {\n isLoading?: boolean;\n last?: boolean;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps<any, any>>(\n ({ className, sticky, stickyLeft, stickyRight, isLoading, last, ...props }, ref) => {\n return (\n <th\n ref={ref}\n className={cn(\n 'h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] relative',\n sticky && 'sticky -top-[1px] z-[7] bg-background',\n stickyLeft && 'sticky -left-[1px] z-[9] bg-background',\n stickyRight && 'sticky -right-[1px] z-[9] bg-background',\n stickyRight && last && 'z-[8]',\n isLoading && 'min-w-[100px]',\n className,\n )}\n {...props}\n />\n );\n },\n);\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps<TData, TValue> extends React.TdHTMLAttributes<HTMLTableCellElement>, ColumnMeta<TData, TValue> {}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps<any, any>>(({ className, sticky, stickyLeft, stickyRight, ...props }, ref) => (\n <td\n ref={ref}\n className={cn(\n 'table-cell px-4 py-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] relative',\n sticky && 'sticky -right-[1px] z-[5] bg-background',\n stickyLeft && 'sticky -left-[1px] z-[6] bg-background',\n stickyRight && 'sticky -right-[1px] z-[5] bg-background',\n className,\n )}\n {...props}\n />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(({ className, ...props }, ref) => (\n <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n```\n\n```text\n@tanstack/react-table\n```\n\n```text\nThead\n```\n\n```text\nth\n```\n\n```text\nTableHeader\n```\n\n```text\nthead\n```\n\n```text\nThead\n```\n\n```text\nth\n```\n\n```text\nTableCell\n```\n\n```text\ntd\n```\n\n```text\nz-index\n```\n\n```text\nThead\n```\n\n```text\nTableCell\n```\n\n```text\nThead\n```\n\n```text\nTableCell\n```\n\n```text\nTooltips\n```\n\n```js\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\n\n<TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n {...props}\n />\n</TooltipPrimitive.Portal>\n```\n\n```text\nContent\n```\n\n```text\nPortal\n```\n\n```text\n<TableCell\n …\n hasTooltip={cell.getContext().column.columnDef.id === 'fullName'}\n>\n```\n\n```text\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps<any, any>>(({ …, hasTooltip, … }, ref) => (\n <td\n ref={ref}\n className={cn(\n …\n hasTooltip && 'hover:z-10',\n …\n )}\n {...props}\n />\n));\n```\n\n```text\nz-index\n```\n\n========================================\n\nComments:\n- Yes, think this might be the best approah for now. I had initially played with something similar, but as you raised, it can overlap when the cell is patially behind the header, but I think I can live with that. Thanks!\n- Wow, I'd love an explanation of why this works. I've run into this issue many times nesting tooltips within collapsible resizable sidebars.","metadata":{"transformedAt":"2026-08-18T18:33:42.936Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":23,"totalLines":426,"estimatedTokens":2737}}656{"id":"stack-72695254","source":"stackoverflow","questionId":72695254,"title":"Tailwind pseudo-element after inserting content image","tags":["css","tailwind-css"],"text":"Title: Tailwind pseudo-element after inserting content image\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI wanna ask something about pseudo-element using tailwind, so before going through into my main problem I wanna show my code using `CSS`\n\n```\n.text-location {\n display: flex;\n gap: 1.625rem;\n}\n\n.text-location::after {\n content: url('image/arrow-down-icon.svg'); and the result is like this:\n\nhttps://i.sstatic.net/QntyY.png\n\nit's working and nothing something wrong when I used in `CSS`, but when I'm going through using `tailwind` the `content` is not showing anything, any wrong with my code? Or I must do something different what I have been made? I hope anyone can help and tell me where I made the mistake...Thank you before and have a nice day, bellow my code:\n\n```\nLocation\n```\n\nAnd the result:\n\nhttps://i.sstatic.net/lvcBK.png\n\n========================================\n\nTop Answer:\nYou can define your content in the **tailwind.config.js**\n\n```\ntheme: {\n extend: {\n content: {\n 'arrowDownIcon': 'url(\"../src/arrow-down-icon.svg\")',\n 'arrowUpIcon': 'url(\"../src/arrow-up-icon.svg\")',\n },\n fontSize: {\n...\n```\n\nYou can render it using the following className. Make sure to include an **inline-block** and **width**.\n\n```\nLearn More\n```\n\nYou can also apply a hover state like this **hover:after:content-arrowUpIcon**\n\n```\nLearn More\n```\n\n========================================\n\nCode:\n```text\n.text-location {\n display: flex;\n gap: 1.625rem;\n}\n\n.text-location::after {\n content: url('image/arrow-down-icon.svg'); <= example image\n display: inline-block;\n width: 100%;\n height: 100%;\n}\n```\n\n```text\n<label class=\"font-poppins text-sm font-light leading-[0.875rem] text-[#969696] flex gap-[1.625rem] after:content-[url('image/arrow-down-icon.svg')] after:inline-block after:h-full after:w-full\">Location</label>\n```\n\n```text\nCSS\n```\n\n```text\nCSS\n```\n\n```text\ntailwind\n```\n\n```text\ncontent\n```\n\n```text\nitem-center\n```\n\n```text\ntext-black\n```\n\n```text\npopins\n```\n\n```text\ntheme: {\n extend: {\n content: {\n 'arrowDownIcon': 'url(\"../src/arrow-down-icon.svg\")',\n 'arrowUpIcon': 'url(\"../src/arrow-up-icon.svg\")',\n },\n fontSize: {\n...\n```\n\n```text\n<label className=\"after:content-arrowDownIcon after:inline-block after:w-8\">Learn More</label>\n```\n\n```text\n<label className=\"hover:after:content-arrowUpIcon after:content-arrowDownIcon after:content-arrowBlack after:inline-block after:w-8\">Learn More</label>\n```\n\n```text\nafter:content-[url('your_image.png')]\nbefore:content-[url('your_image.png')]\n```\n\n========================================\n\nComments:\n- thank you for answer my question, but sir my own image still didn't show on my webpage, I already check if the path of my image is wrong but is not, any else suggest sir?\n- Instead of image you can use icon like font-awesome\n- okei sir thanks for all, I already done with my problem, once more thank you\n- Glad I am able to help you\n- Could you provide a link to where this is documented in more detail? The Tailwind docs (tailwindcss.com/docs/content#customizing-your-theme) only describe the config file, not how to actually use the classes. And for some reason I can't get it to work, here's an example (the first p tag contains the after:content-test) play.tailwindcss.com/bAuEk88sIH\n- @Lesik2008 there is something wrong with your setup, you can also test it using inline TailwindCSS using `after:content-['test']` in your `Description`","metadata":{"transformedAt":"2026-08-18T18:33:42.936Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":138,"estimatedTokens":864}}657{"id":"stack-79626704","source":"stackoverflow","questionId":79626704,"title":"How to configure @tailwindcss/typography plugin from TailwindCSS v4","tags":["tailwind-css","typography","tailwind-css-4","next.js15"],"text":"Title: How to configure @tailwindcss/typography plugin from TailwindCSS v4\nTags: tailwind-css, typography, tailwind-css-4, next.js15\nSource: Stack Overflow\n\nQuestion:\nI am using Next.js 15. I want to render markdown and use prose from TailwindCSS Typography plugin. I have installed the plugin but it tells me to configure `tailwind.config.ts` which is missing from the Next.js 15 template (with TailwindCSS). How to solve this problem?\n\n========================================\n\nTop Answer:\n### Update (configure without `tailwind.config.js`)\n\nI just based it on an answer written by someone else. I quickly put together a v4 reproduction in the Play environment without a config file by new `@utility` directive:\n\n- Tailwind Play Reproduction\n\n```\n@import \"tailwindcss\";\n@plugin \"@tailwindcss/typography\";\n\n@utility prose-pink {\n @apply prose;\n & > * {\n --tw-prose-body: var(--color-pink-800);\n --tw-prose-headings: var(--color-pink-900);\n }\n}\n```\n\nWith this, I produce exactly the same result that the documentation recommends using a config file for:\n\n- Adding custom color theme for Typography\n\n### Plugin\n\nStarting from TailwindCSS v4, a CSS-first configuration approach is preferred. Therefore, all plugins should be integrated with TailwindCSS using the `@plugin` directive. Following the Typography documentation:\n\n- New CSS-first configuration option in v4 - StackOverflow\n\n- `@plugin` directive - TailwindCSS v4 Docs\n\n- Typography Installation - GitHub Readme\n\n```\nnpm install -D @tailwindcss/typography\n```\n\n```\n@import \"tailwindcss\";\n@plugin \"@tailwindcss/typography\";\n```\n\n### Configuration\n\nIn CSS-first mode, you have the option to change the default prose class name when declaring the plugin:\n\n```\n@import \"tailwindcss\";\n@plugin \"@tailwindcss/typography\" {\n className: wysiwyg; /* changed from prose to wysiwyg */\n}\n```\n\nIn TailwindCSS v3, however, the legacy JavaScript-based configuration (`tailwind.config.js`) allowed for custom configuration as well.\n\nYou can still do this using the `@config` directive.\n\n- `@config` directive - TailwindCSS v4 Docs\n\n- Adding custom color themes to Typography - GitHub Readme\n\n- Customizing the CSS to Typography - GitHub Readme\n\n```\n@import \"tailwindcss\";\n@plugin \"@tailwindcss/typography\";\n@config \"./relative/path/to/tailwind.config.js\";\n```\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n theme: {\n extend: {\n typography: () => ({\n // ...\n }),\n },\n },\n}\n```\n\nContrary to the documentation, by completely omitting the JavaScript-based configuration, you still have the option to customize the prose utility like this:\n\n- Typography upgrade to TailwindCSS v4 - @ErwannRousseau's code snippet - GitHub\n\n```\n@import \"tailwindcss\";\n@plugin \"@tailwindcss/typography\";\n\n@utility prose {\n --tw-prose-body: var(--color-primary);\n --tw-prose-headings: var(--color-primary);\n --tw-prose-bold: var(--color-primary);\n --tw-prose-quote-borders: var(--color-slate-300);\n --tw-prose-quotes: var(--color-muted-foreground);\n --tw-prose-code: var(--color-primary);\n\n code {\n &::before,\n &::after {\n display: none;\n }\n text-wrap: nowrap;\n }\n\n blockquote {\n font-weight: 400;\n }\n}\n```\n\n========================================\n\nCode:\n```text\ntailwind.config.ts\n```\n\n```bash\nnpm install -D @tailwindcss/typography\n```\n\n```css\n@import \"tailwindcss\";\n@plugin '@tailwindcss/typography';\n```\n\n```text\nglobal.css\n```\n\n```css\n@import \"tailwindcss\";\n@plugin \"@tailwindcss/typography\";\n\n@utility prose-pink {\n @apply prose;\n & > * {\n --tw-prose-body: var(--color-pink-800);\n --tw-prose-headings: var(--color-pink-900);\n }\n}\n```\n\n```none\nnpm install -D @tailwindcss/typography\n```\n\n```css\n@import \"tailwindcss\";\n@plugin \"@tailwindcss/typography\";\n```\n\n```css\n@import \"tailwindcss\";\n@plugin \"@tailwindcss/typography\" {\n className: wysiwyg; /* changed from prose to wysiwyg */\n}\n```\n\n```css\n@import \"tailwindcss\";\n@plugin \"@tailwindcss/typography\";\n@config \"./relative/path/to/tailwind.config.js\";\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n theme: {\n extend: {\n typography: () => ({\n // ...\n }),\n },\n },\n}\n```\n\n```css\n@import \"tailwindcss\";\n@plugin \"@tailwindcss/typography\";\n\n@utility prose {\n --tw-prose-body: var(--color-primary);\n --tw-prose-headings: var(--color-primary);\n --tw-prose-bold: var(--color-primary);\n --tw-prose-quote-borders: var(--color-slate-300);\n --tw-prose-quotes: var(--color-muted-foreground);\n --tw-prose-code: var(--color-primary);\n\n code {\n &::before,\n &::after {\n display: none;\n }\n text-wrap: nowrap;\n }\n\n blockquote {\n font-weight: 400;\n }\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@utility\n```\n\n```text\n@plugin\n```\n\n```text\n@plugin\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@config\n```\n\n```text\n@config\n```\n\n========================================\n\nComments:\n- The problem is solved after adding @plugin '@tailwindcss/typography': to global.css. Thanks","metadata":{"transformedAt":"2026-08-18T18:33:42.936Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":18,"totalLines":248,"estimatedTokens":1235}}658{"id":"stack-71073085","source":"stackoverflow","questionId":71073085,"title":"Make div align to bottom of column in card tailwind css","tags":["javascript","css","next.js","multiple-columns","tailwind-css"],"text":"Title: Make div align to bottom of column in card tailwind css\nTags: javascript, css, next.js, multiple-columns, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nAs the title states, I am trying to get a div within a parent div to align across columns using Tailwind CSS. However, they are not aligning due to different image sizes uploaded to each column. I do not want to resize the images. I have circled in red the divs I want aligning at the bottom. Github Repo\n\nI have tried the different settings referenced herehttps://i.sstatic.net/1OXqI.jpg\n\nThe specific child div that I would like aligned is from ``\n\nI was wondering if anyone could assist?\n\n```\nreturn (\n\n \n \n {\n nfts.map((nft, i) => (\n \n \n \n {nft.name}\n\n \n {nft.description}\n\n \n \n \n {nft.price} Matic\n\n buyNft(nft)}>Buy\n \n \n ))\n }\n \n \n\n```\n\n)\n}\n\n========================================\n\nTop Answer:\nI am using tailwind CSS with react. It might help you.\n\nFirst Code:\nFirstly iterating to the fetch data from the useEffect section with tailwind CSS grid concepts. I am using 3 cols for large devices, 2 cols for medium devices, and 1 col for small devices.\n\n\r\n\r\n\n```\nimport React, { useEffect, useState } from 'react';\nimport SellingCard from '../SellingCard/SellingCard';\n\nconst BestSelling = () => {\n const [products, setProducts] = useState([]);\n useEffect(() => {\n fetch('data.json')\n .then((res) => res.json())\n .then((data) => setProducts(data));\n }, []);\n return (\n \n \n CHECK IT OUT\n \n \n Best Sellers\n \n\n \n {products.slice(0, 6).map((product) => (\n \n ))}\n \n \n );\n};\n\nexport default BestSelling;\n```\n\n\r\n\r\n\r\n\nSecond Code:\nI just give a fixed height [\"*style={{ height: '500px' }}*\"] of the card and make the display property \"*relative*\" of the card main div. Then I added display \"*absolute*\" and \"*bottom-0*\" for the div a which I just want to fix at the bottom of the card.\n\n\r\n\r\n\n```\nimport React from 'react';\n\nconst SellingCard = (props) => {\n const { img, name, price, quantity, sup_name, des } = props.product;\n return (\n <>\n \n \n \n \n Suplier: {sup_name}\n \n \n {name}\n \n \n {des.slice(0, 150)}\n \n\n \n \n Price: {price}\n\n Items Left: {quantity}\n\n \n \n Update This Product\n \n \n \n \n \n );\n};\n\nexport default SellingCard;\n```\n\n========================================\n\nCode:\n```text\nreturn (\n<div className=\"flex justify-end\">\n <div className=\"px-4\" style={{ maxWidth: '1600px' }}>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4\">\n {\n nfts.map((nft, i) => (\n <div key={i} className=\"border shadow rounded-xl overflow-hidden\">\n <img src={nft.image} />\n <div className=\"p-4\">\n <p style={{ height: '64px' }} className=\"text-2xl font-semibold\">{nft.name}</p>\n <div style={{ height: '70px', overflow: 'hidden' }}>\n <p className=\"text-gray-400\">{nft.description}</p>\n </div>\n </div>\n <div className=\"p-4 bg-black\">\n <p className=\"text-2xl mb-4 font-bold text-white\">{nft.price} Matic</p>\n <button className=\"w-full bg-pink-500 text-white font-bold py-2 px-12 rounded\"\n onClick={() => buyNft(nft)}>Buy</button>\n </div>\n </div>\n ))\n }\n </div>\n </div>\n</div>\n```\n\n```text\n<div className=\"p-4 bg-black\">\n```\n\n```js\n<div className=\"flex flex-1 flex-col justify-between\">\n <div>//must wrap content to be aligned to top\n <img src={image} />\n <p>{nft.name}<p>\n <p>{description}</p>\n </div>\n <div>//must wrap content to be aligned to bottom\n <p>{price} Matic</p>\n <button>Buy</button>\n </div>\n</div>\n```\n\n```js\n<div className=\"flex flex-1 flex-col justify-between\">\n <img src={image} /> // aligned top\n <div>// aligned bottom\n <p>{name}<p>\n <p>{description}</p>\n <p>{price} Matic</p>\n <button>Buy</button>\n </div>\n</div>\n```\n\n```text\nflexbox\n```\n\n```text\nflex\n```\n\n```text\nflex-col\n```\n\n```text\njustify-between\n```\n\n```text\nflex-col\n```\n\n```text\nflex-1\n```\n\n```js\nimport React, { useEffect, useState } from 'react';\nimport SellingCard from '../SellingCard/SellingCard';\n\nconst BestSelling = () => {\n const [products, setProducts] = useState([]);\n useEffect(() => {\n fetch('data.json')\n .then((res) => res.json())\n .then((data) => setProducts(data));\n }, []);\n return (\n <div\n style={{ maxWidth: '1300px' }}\n className=\"my-10 md:my-20 mx-auto container px-4\"\n >\n <h4 className=\"text-center text-lg font-normal text-red-500 my-2\">\n CHECK IT OUT\n </h4>\n <h1 className=\"text-center text-4xl md:text-5xl font-mono tracking-wide font-bold\">\n Best Sellers\n </h1>\n\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n {products.slice(0, 6).map((product) => (\n <SellingCard key={product.id} product={product} />\n ))}\n </div>\n </div>\n );\n};\n\nexport default BestSelling;\n```\n\n```js\nimport React from 'react';\n\nconst SellingCard = (props) => {\n const { img, name, price, quantity, sup_name, des } = props.product;\n return (\n <>\n <div>\n <div\n style={{ height: '500px' }}\n className=\"rounded relative shadow-sm\"\n >\n <img\n className=\"h-60 rounded w-full object-cover object-center mb-6\"\n src=\"https://dummyimage.com/722x402\"\n alt=\"content\"\n />\n <h3 className=\"tracking-widest text-red-500 text-xs font-medium title-font\">\n Suplier: {sup_name}\n </h3>\n <h2 className=\"text-lg text-gray-900 font-medium title-font mb-4\">\n {name}\n </h2>\n <p className=\"leading-relaxed text-base mb-2 flex-1\">\n {des.slice(0, 150)}\n </p>\n <div className=\"absolute bottom-0 w-full\">\n <div className=\"flex justify-between items-center relative bottom-0 text-red-600 text-lg font-bold mb-2\">\n <p>Price: {price}</p>\n <p>Items Left: {quantity}</p>\n </div>\n <button className=\"w-full text-center bg-blue-600 py-2 rounded text-white font-bold hover:bg-blue-800\">\n Update This Product\n </button>\n </div>\n </div>\n </div>\n </>\n );\n};\n\nexport default SellingCard;\n```\n\n========================================\n\nComments:\n- Try to set fixed `min-height` to a root div of an every card and use `content-between`\n- Because of the fixed height there will be the same vertical padding for all cards. `content-between` will position the elements inside each card at the vertical edges\n- This is what I have been looking for. Thanks Sean!\n- Thanks so much for this answer (and for the question, Shane). I spent way too much time trying to figure this out, and the Tailwind docs weren't helpful enough.\n- A lot has changed since this post. ChatGPT is your friend. Try something like `Using Tailwind CSS and React, create a fat arrow function component named ProductCard. This component should display a card with an image at the top, followed by content that includes a name, description, price, and a buy button. Ensure the content is consistently positioned at the top and bottom across all cards.` Ask for explanations after responses. Iterate on feedback, like `add padding to card details`. Finally, request a prompt for the same output to help you mentally optimize future request.","metadata":{"transformedAt":"2026-08-18T18:33:42.936Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":311,"estimatedTokens":1948}}659{"id":"stack-75920181","source":"stackoverflow","questionId":75920181,"title":"How to implement :selected state with TailwindCSS","tags":["html","css","tailwind-css","alpine.js"],"text":"Title: How to implement :selected state with TailwindCSS\nTags: html, css, tailwind-css, alpine.js\nSource: Stack Overflow\n\nQuestion:\nI read the documentation but I don't find anything about the `:selected` state in Tailwind CSS. Is there a way to achieve this with Tailwind or it can be only done with JavaScript?\n\nI simplified the problem as much as possible, If the radio button is checked I want to change the parent div's color\n\n```\n\n \n \n Default radio\n \n \n \n Checked state\n \n```\n\nIf I use the `active` state I reach my goal, but only for a few seconds. I also can`t find other way to achieve this in AlpineJS.\n\nAny help would be appreciated!\n\n========================================\n\nTop Answer:\nTailwind CSS does not implement the `:has()` pseudo-selector yet (it's not supported in Firefox). You can still use it in your CSS file though. For example:\n\n```\n@tailwind base;\n@tailwind components;\n\n@layer components {\n div:has(input:checked) {\n @apply bg-red-500;\n }\n}\n\n@tailwind utilities;\n```\n\nYou can see a working version of this here: https://play.tailwindcss.com/VHMr7KnWjN\n\n========================================\n\nCode:\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n <div class=\"flex items-center mb-4 focus:bg-blue-100\">\n <input id=\"default-radio-1\" type=\"radio\" value=\"\" selected name=\"default-radio\" class=\"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600\">\n <label for=\"default-radio-1\" class=\"ml-2 text-sm font-medium text-gray-900 dark:text-gray-300\">Default radio</label>\n </div>\n <div class=\"flex items-center mb-4 active:bg-blue-100\">\n <input checked id=\"default-radio-2\" type=\"radio\" value=\"\" name=\"default-radio\" class=\"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600\">\n <label for=\"default-radio-2\" class=\"ml-2 text-sm font-medium text-gray-900 dark:text-gray-300\">Checked state</label>\n </div>\n```\n\n```text\n:selected\n```\n\n```text\nactive\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<div class=\"flex items-center mb-4 focus:bg-blue-100\">\n <input id=\"default-radio-1\" type=\"radio\" value=\"\" selected name=\"default-radio\" class=\"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 peer\">\n <label for=\"default-radio-1\" class=\"ml-2 text-sm font-medium text-gray-900 dark:text-gray-300 peer-checked:bg-red-300 peer-checked:text-white\">Default radio</label>\n</div>\n<div class=\"flex items-center mb-4 active:bg-blue-100\">\n <input checked id=\"default-radio-2\" type=\"radio\" value=\"\" name=\"default-radio\" class=\"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600\">\n <label for=\"default-radio-2\" class=\"ml-2 text-sm font-medium text-gray-900 dark:text-gray-300\">Checked state</label>\n</div>\n```\n\n```text\npeer\n```\n\n```text\npeer-checked:\n```\n\n```css\n@tailwind base;\n@tailwind components;\n\n@layer components {\n div:has(input:checked) {\n @apply bg-red-500;\n }\n}\n\n@tailwind utilities;\n```\n\n```text\n:has()\n```\n\n========================================\n\nComments:\n- So far, the answers are assuming you are referring to the \"checked\" state, since your code uses radio buttons. The \"selected\" state/attribute is used in a dropdown's `` elements.\n- Not exactly what i want, but I can solve the problem with it, Thanks!","metadata":{"transformedAt":"2026-08-18T18:33:42.936Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":111,"estimatedTokens":924}}660{"id":"stack-73395032","source":"stackoverflow","questionId":73395032,"title":"Aspect-ratio elements overflow container","tags":["vue.js","nuxt.js","tailwind-css","aspect-ratio"],"text":"Title: Aspect-ratio elements overflow container\nTags: vue.js, nuxt.js, tailwind-css, aspect-ratio\nSource: Stack Overflow\n\nQuestion:\nI want to contain two `16:9` video elements vertically within a wrapper. I want that the elements respect the bounds of the wrapper and resize responsively to the window while maintaining their aspect ratio. When I have more than one element, it overflows the wrapper. In version 3 of TailwindCSS, the new aspect ratio classes work fine. I am using the `@tailwindcss/aspect-ratio@0.4.0` tailwind plugin.\n\nhttps://codesandbox.io/s/aspect-ratio-tailwind-error-slbobj?file=/pages/index.vue\n\n```\n\n \n \n \n \n top bar\n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n bottom bar\n \n \n \n \n```\n\nhttps://i.sstatic.net/ufQdT.png\n\nWhat I want is:\n\nhttps://i.sstatic.net/kxYKQ.jpg\n\npackage\nversion\n\ntailwindcss\n2.2.15\n\n@tailwindcss/aspect-ratio\n0.4.0\n\n========================================\n\nCode:\n```html\n<div class=\"flex flex-col min-h-screen\">\n <main class=\"flex-1 flex bg-gray-900 max-h-screen text-white\">\n <div class=\"flex-1 flex flex-col min-h-0 max-h-full\">\n <!-- header -->\n <div class=\"flex-shink-0 flex items-center justify-between p-6\">\n top bar\n </div>\n\n <!-- content -->\n <div class=\"flex-1 w-full max-w-[1200px] min-h-0 max-h-full mx-auto p-6 bg-green-500\">\n <!-- video 1 -->\n <div class=\"aspect-w-16 aspect-h-9\">\n <div class=\"w-full h-full bg-yellow-500\"></div>\n </div>\n <!-- video 2 -->\n <div class=\"aspect-w-16 aspect-h-9\">\n <div class=\"w-full h-full bg-red-500\"></div>\n </div>\n </div>\n\n <!-- footer -->\n <div class=\"flex-shink-0 flex items-center justify-between p-6\">\n bottom bar\n </div>\n </div>\n </main>\n </div>\n```\n\n```text\n16:9\n```\n\n```text\n@tailwindcss/aspect-ratio@0.4.0\n```\n\n```html\n<script src=\"https://unpkg.com/tailwindcss-jit-cdn\"></script>\n\n<div class=\"flex flex-col min-h-screen\">\n <main class=\"flex-1 flex bg-gray-900 max-h-screen text-white\">\n <div class=\"flex-1 flex flex-col min-h-0 max-h-full\">\n <!-- header -->\n <div class=\"flex-shink-0 flex items-center justify-between p-6\">top bar</div>\n\n <!-- content -->\n <div class=\"flex-1 w-full max-w-[calc(100vh-300px)] min-h-0 max-h-full mx-auto p-6 bg-green-500\">\n <!-- video 1 -->\n <div class=\"aspect-w-16 aspect-h-9\">\n <div class=\"w-full h-full bg-yellow-500\"></div>\n </div>\n <!-- video 2 -->\n <div class=\"aspect-w-16 aspect-h-9\">\n <div class=\"w-full h-full bg-red-500\"></div>\n </div>\n </div>\n\n <!-- footer -->\n <div class=\"flex-shink-0 flex items-center justify-between p-6\">bottom bar</div>\n </div>\n </main>\n</div>\n```\n\n```text\nmax-w-[1200px]\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.936Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":126,"estimatedTokens":703}}661{"id":"stack-77819999","source":"stackoverflow","questionId":77819999,"title":"@apply is not supported within nested at-rules like @mixin","tags":["sass","tailwind-css","postcss"],"text":"Title: @apply is not supported within nested at-rules like @mixin\nTags: sass, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI'm trying to apply Tailwind classes to `@mixin` which is `@include` in a CSS selector as follows:\n\n```\n@mixin card ($shadowColor) {\n @apply p-4 m-4 shadow-xl $shadowColor;\n border-radius: 4px;\n border: 1px solid black;\n}\n\n#works {\n @apply text-center;\n\n & #works-list {\n @apply grid sm:grid-cols-1 md:lg:grid-cols-4 md:lg:gap-4;\n\n & article {\n @include card ('shadow-green-600');\n @include font-anironc;\n\n @apply flex items-center justify-center;\n }\n }\n}\n```\n\nHowever, I have the following error:\n\n```\nCssSyntaxError ... @apply is not supported within nested at-rules like @mixin.\n```\n\nI checked upon the Tailwind documentation and this GitHub Issue but I could not make it work nor I am sure of how to un-nest these rules.\n\nHere my postcss.config.js file:\n\n```\nmodule.exports = {\n parser: \"postcss-scss\",\n plugins: {\n \"postcss-import\": {},\n \"tailwindcss/nesting\": \"postcss-nesting\",\n tailwindcss: {},\n autoprefixer: {},\n \"@csstools/postcss-sass\": \"./src/css/style.scss\",\n },\n};\n```\n\nHow may I make it work ?\n\nI'll give you a bit more context, it's an educational project in which we have to mix PostCSS and Tailwind even if it's not recommended.\n\nFeel free to ask me further information.\n\n========================================\n\nTop Answer:\nI got the same error `@apply is not supported within nested at-rules like @media. You can fix this by un-nesting @media.` when attempting to do this:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n .section-padding {\n @apply p-6;\n \n @media screen(sm) {\n @apply p-12;\n }\n }\n}\n```\n\nUn-nesting refers to this:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n @media screen(sm) {\n @apply p-12;\n \n .section-padding {\n @apply p-6;\n }\n }\n}\n```\n\nand it should fix the error.\n\n========================================\n\nCode:\n```scss\n@mixin card ($shadowColor) {\n @apply p-4 m-4 shadow-xl $shadowColor;\n border-radius: 4px;\n border: 1px solid black;\n}\n\n#works {\n @apply text-center;\n\n & #works-list {\n @apply grid sm:grid-cols-1 md:lg:grid-cols-4 md:lg:gap-4;\n\n & article {\n @include card ('shadow-green-600');\n @include font-anironc;\n\n @apply flex items-center justify-center;\n }\n }\n}\n```\n\n```text\nCssSyntaxError ... @apply is not supported within nested at-rules like @mixin.\n```\n\n```js\nmodule.exports = {\n parser: \"postcss-scss\",\n plugins: {\n \"postcss-import\": {},\n \"tailwindcss/nesting\": \"postcss-nesting\",\n tailwindcss: {},\n autoprefixer: {},\n \"@csstools/postcss-sass\": \"./src/css/style.scss\",\n },\n};\n```\n\n```text\n@mixin\n```\n\n```text\n@include\n```\n\n```js\nplugins: {\n \"@csstools/postcss-sass\": \"./src/css/style.scss\",\n \"postcss-import\": {},\n \"tailwindcss/nesting\": \"postcss-nesting\",\n tailwindcss: {},\n autoprefixer: {},\n},\n```\n\n```js\nplugins: {\n \"postcss-import\": {},\n \"@csstools/postcss-sass\": \"./src/css/style.scss\",\n \"tailwindcss/nesting\": \"postcss-nesting\",\n tailwindcss: {},\n autoprefixer: {},\n},\n```\n\n```text\n@csstools/postcss-sass\n```\n\n```text\npostcss-import\n```\n\n```text\n@import\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n .section-padding {\n @apply p-6;\n \n @media screen(sm) {\n @apply p-12;\n }\n }\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n @media screen(sm) {\n @apply p-12;\n \n .section-padding {\n @apply p-6;\n }\n }\n}\n```\n\n```text\n@apply is not supported within nested at-rules like @media. You can fix this by un-nesting @media.\n```\n\n========================================\n\nComments:\n- Yes you are rigth, I confused both. I reorganized the order and it works fine now, thanks !","metadata":{"transformedAt":"2026-08-18T18:33:42.936Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":223,"estimatedTokens":982}}662{"id":"stack-72085236","source":"stackoverflow","questionId":72085236,"title":"How to render the item horizontally (Masonry Layout )?","tags":["javascript","css","vuejs3","tailwind-css","masonry"],"text":"Title: How to render the item horizontally (Masonry Layout )?\nTags: javascript, css, vuejs3, tailwind-css, masonry\nSource: Stack Overflow\n\nQuestion:\nI would like to render the items horizontally while the page load, refer to following images\n\n```\n\n \n \n \n\n```\n\n**`Currently`**\n\nhttps://i.sstatic.net/ynfV7.png\n\n**`Expected`**\n\nhttps://i.sstatic.net/a2LLJ.png\n\nSomething like this,\n\nhttps://reactjsexample.com/rendering-columns-from-a-list-of-children-with-horizontal-ordering/\n\nI am looking for a Js, Vue, or CSS solution.\n\n========================================\n\nTop Answer:\nI would advise that you use tailwind class utility of grid to create a grid container:\nhttps://tailwindcss.com/docs/display#:~:text=Use%20grid%20to%20create%20a%20grid%20container.\n\nhttps://i.sstatic.net/RgenV.png\n\n========================================\n\nCode:\n```text\n<section\n tabindex=\"-1\"\n class=\"relative mx-8 mt-10 mb-20 max-w-7xl focus:outline-none sm:mx-16 md:mx-20 lg:mx-24 xl:mx-auto\"\n >\n <ul\n class=\"h-full w-full list-none columns-1 gap-4 space-y-12 overflow-hidden pb-32 md:columns-2 lg:columns-3 lg:gap-8 xl:columns-4\"\n >\n <ExploreCard\n v-for=\"(post, index) in posts.data\"\n :key=\"index\"\n :post=\"post\"\n :canLike=\"this.canLike\"\n />\n </ul> \n</section>\n```\n\n```text\nCurrently\n```\n\n```text\nExpected\n```\n\n```text\n<masonry\n :cols=\"{ default: 4, 1024: 3, 768: 2, 640: 1 }\"\n :gutter=\"{ default: 40, 1024: 30, 768: 20 }\"\n >\n <div v-for=\"(post, index) in posts.data\" :key=\"index\" class=\"mb-10\">\n <ExploreCard\n v-for=\"(post, index) in posts.data\"\n :key=\"index\"\n :post=\"post\"\n :canLike=\"this.canLike\"\n />\n </div>\n</masonry>\n```\n\n```text\nul {\n margin-left: .25em;\n padding-left: 0;\n list-style: none;\n}\nli {\n margin-left: 0;\n padding-left: 0;\n display: inline-block;\n width: 30%;\n vertical-align: top;\n}\n\n<ul>\n <li>item 1</li>\n <li>item 2</li>\n <li>item 3</li>\n <li>item 4</li>\n <li>item 5</li>\n <li>item 6</li>\n <li>item 7</li>\n <li>item 8</li>\n <li>item 9</li>\n</ul>\n```\n\n```text\nul {\n margin-left: .25em;\n padding-left: 0;\n list-style: none;\n display: flex;\n flex-wrap: wrap;\n}\nli {\n margin-left: 0;\n padding-left: 0;\n width: 33.3%;\n}\n\n<ul>\n <li>item 1</li>\n <li>item 2</li>\n <li>item 3</li>\n <li>item 4</li>\n <li>item 5</li>\n <li>item 6</li>\n <li>item 7</li>\n <li>item 8</li>\n <li>item 9</li>\n</ul>\n```\n\n========================================\n\nComments:\n- the reproducible example and complete code with what you've done so far.\n- can you explain in more detail with codes?\n- @Lee Taylor, but every post has different height ?\n- @ChaiFuuWong I didn't post the answer. I just improved it.","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":143,"estimatedTokens":733}}663{"id":"stack-69972645","source":"stackoverflow","questionId":69972645,"title":"Hover not working in hyperlinks using tailwind css","tags":["reactjs","tailwind-css"],"text":"Title: Hover not working in hyperlinks using tailwind css\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI tried to change the color of the list created below while hovering but it doesnot do what it is supposed to do . I can't figure out what i am missing here.\n\n```\n\n \n abcd\n \n\n```\n\n========================================\n\nTop Answer:\nYour problem is already solved, but it seems that searches for similar problems are redirected here, so I'll give a second solution in case this isn't the case in particular.\n\nIf you are using Tailwind **regardless of the environment where you use** it as an example with some **framework** or if it is through **CDN**, you must be specific with the path of your files in `tailwind.config` in the content object\n\nexample:\n\n```\n// tailwind.config.js\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n========================================\n\nCode:\n```text\n<ul className=\"ul\">\n <li>\n <a className=\"hover:text-white bg-purple border-white rounded-sm\" href=\"#\">abcd</a>\n </li>\n</ul>\n```\n\n```html\n<head>\n <link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\" />\n</head>\n\n<body class=\"h-full\">\n <div class=\"flex items-center justify-center h-screen\">\n <ul>\n <li>\n <a class=\"hover:text-white hover:bg-purple-600 hover:border-gray-300 border-2 rounded-sm p-3\" href=\"#\">It Works!</a>\n </li>\n </ul>\n </div>\n</body>\n```\n\n```text\nhover:\n```\n\n```text\ntailwindcss\n```\n\n```text\nreact.js\n```\n\n```text\nclassName\n```\n\n```text\nclass\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\ntailwind.config\n```\n\n========================================\n\nComments:\n- So, I should give hover prefix to every property I need to have hover effect.\n- @sumitkhatrii exactly ;-) Good Luck and best regards!\n- this fixed the issue for me, we started migrating to ts and where updating components to tsx, only classes used before on the project where working adding tsx to the content fixed it","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":109,"estimatedTokens":560}}664{"id":"stack-73791078","source":"stackoverflow","questionId":73791078,"title":"Tailwind CSS set image to take 2/3 of width on desktop","tags":["css","flexbox","tailwind-css"],"text":"Title: Tailwind CSS set image to take 2/3 of width on desktop\nTags: css, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am quite new to Tailwind CSS and I am trying to set two images inside a banner with first image to take 1/3 of width and second image to take 2/3 of width when this image is viewed on desktop screen. In mobile I need the images to be shown in full width so user can scroll right and left to each image.\nRight now my code works fine on desktop but on mobile it shows images in the same arrangement i.e. as 1/3 and 2/3 of screen width, which is not what I want. I have tried targeting md:w-1/3 and 2/3 respectively but it seems to mess up everything.\nI also tried using md:grid md:grid-cols-3 in the inner div element and then set the second picture as md:col-span-2 but it did not work.\n\nI would appreciate any guidance on what is wrong with my code. Thank you a lot in advance.\n\n```\n\n \n \n \n \n \n \n \n \n\n```\n\n========================================\n\nTop Answer:\nSo I figured out the issue next morning, I targeted w-1/3 for md sized screens and set min-width too. Final code looks like:\n\n```\n\n \n \n \n \n \n \n \n \n\n```\n\nAnother thing causing the problem was my browser not responding to CSS updates immediately but only after localhost restart so please make sure that your updates to CSS are rendered properly. Thanks to Zemame Youcef Oualid for the advice.\n\n========================================\n\nCode:\n```text\n<div class=\"images-wrapper\">\n <div class=\"flex bg-white md:bg-transparent h-full overflow-x-auto md:overflow-x-hidden without-scrollbar gap-1 md:gap-1.5 flex-nowrap h-full w-full flex-grow md:flex-grow-0 flex-shrink-0 md:flex-shrink\">\n <a class=\"w-1/3\" href=\"javascript:;\">\n <img class=\"object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tl-[40px]\" src=\"http://...\">\n </a>\n <a class=\"w-2/3\" href=\"javascript:;\">\n <img class=\"object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tr-[40px]\" src=\"http://...\">\n </a>\n </div>\n</div>\n```\n\n```text\nclass=\"w-full md:w-1/3 lg...\"\n```\n\n```text\nclass=\"w-full md:w-2/3 lg...\"\n```\n\n```text\n<div class=\"images-wrapper\">\n <div class=\"flex bg-white md:bg-transparent h-full overflow-x-auto md:overflow-x-hidden without-scrollbar gap-1 md:gap-1.5 flex-nowrap h-full w-full flex-grow md:flex-grow-0 flex-shrink-0 md:flex-shrink\">\n <a class=\"w-full md:w-1/3 min-w-full md:min-w-0\" href=\"javascript:;\">\n <img class=\"object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tl-[40px]\" src=\"http://...\">\n </a>\n <a class=\"w-full md:w-2/3 min-w-full md:min-w-0\" href=\"javascript:;\">\n <img class=\"object-cover aspect-video object-center min-h-[250px] md:min-h-[227px] max-h-[250px] md:min-h-[227px] md:max-h-[227px] w-full h-full md:rounded-tr-[40px]\" src=\"http://...\">\n </a>\n </div>\n</div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":80,"estimatedTokens":770}}665{"id":"stack-71227760","source":"stackoverflow","questionId":71227760,"title":"Make tailwind favor rgba() instead of rgb(/var(--tw-text-opacity))","tags":["tailwind-css"],"text":"Title: Make tailwind favor rgba() instead of rgb(/var(--tw-text-opacity))\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nMy iOS device is older, so in Safari some colors are not showing. I don't know why, but I'm guessing it's due to how tailwind is setting text-color or background-color to use `rgb` but with a `/opacity-value` for instance:\n\nUsing `class=\"text-blue-600\"` creates this CSS to be applied:\n\n```\n.text-blue-600 {\n --tw-text-opacity: 1 !important;\n color: rgb(37 99 235/var(--tw-text-opacity)) !important;\n}\n```\n\nhttps://i.sstatic.net/x4iRB.png\n\nOr doing `class=\"bg-gray-200\"` causes this CSS to be applied:\n\n```\n.bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235/var(--tw-bg-opacity));\n}\n```\n\nhttps://i.sstatic.net/JEZvF.png\n\nI wanted to test if this is what's breaking the CSS on old Safari on iOS 10. Is there a way to tell tailwind to use `rgba` which I think should be supported.\n\n========================================\n\nTop Answer:\nYou can use postcss and postcss-preset-env plugin, Its will convert rgb to rgba by default\n\n========================================\n\nCode:\n```text\n.text-blue-600 {\n --tw-text-opacity: 1 !important;\n color: rgb(37 99 235/var(--tw-text-opacity)) !important;\n}\n```\n\n```text\n.bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235/var(--tw-bg-opacity));\n}\n```\n\n```text\nrgb\n```\n\n```text\n/opacity-value\n```\n\n```text\nclass=\"text-blue-600\"\n```\n\n```text\nclass=\"bg-gray-200\"\n```\n\n```text\nrgba\n```\n\n```js\n// tailwind.config.js\n module.exports = {\n corePlugins: {\n // ...\n\n backgroundOpacity: false,\n }\n }\n```\n\n```js\n// tailwind.config.js\n module.exports = {\n corePlugins: {\n // ...\n backdropOpacity: false,\n backgroundOpacity: false,\n borderOpacity: false,\n divideOpacity: false,\n ringOpacity: false,\n textOpacity: false\n }\n }\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- Thank you! I also heard it's possible to use postcss to do accomplish this without losing the opacity feature? But I can't figure that out\n- I tried using github.com/dmarchena/postcss-color-rgb but it didn't seem to work. I think it doesn't catch the syntax tailwind is using because of the css variables. You could try updating the plugin and seeing if you can get it to work. 😅\n- Thanks I also tried the same one but had no luck :( Really appreciate your efforts!\n- Thanks! The github repo for this says its archived, is there a maintained version of it? github.com/csstools/postcss-preset-env\n- @Noitidart I find maintained version in here github.com/csstools/postcss-plugins/tree/main/plugin-packs/…","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":111,"estimatedTokens":673}}666{"id":"stack-75635346","source":"stackoverflow","questionId":75635346,"title":"How to do a reactjs horizontal scroll webpage","tags":["reactjs","tailwind-css","vite"],"text":"Title: How to do a reactjs horizontal scroll webpage\nTags: reactjs, tailwind-css, vite\nSource: Stack Overflow\n\nQuestion:\nI’m building a React.js Webpage, built with Vite and using Tailwind.\nI want the page to scroll horizontal. I’ve tried some react libraries like `npm react-horizontal-scroll` and others but nothing works and I don't know how to do it.\n\nI want the page to scrolls everything horizontal with the mouse wheel and with a scrolling bar, except the header and the footer that will be static.\n\n========================================\n\nTop Answer:\nYou can make custom hook for site components needs horizontal scroll. Use useRef hook (or createRef in class-based components):\n\n```\nconst useHorizontalScroll = () => {\n const scrollRef = useRef();\n\n const onWheel = (e) => {\n if (e.deltaY === 0) return;\n e.preventDefault();\n scrollRef.current.scrollTo({\n left: scrollRef.current.scrollLeft + e.deltaY,\n behavior: 'smooth',\n });\n };\n\n useEffect(() => {\n // Store the ref value to unsubscribe from event during componentWillUnmount\n let refValueHolder = null;\n if (scrollRef) {\n refValueHolder = scrollRef.current;\n refValueHolder.addEventListener('wheel', onWheel);\n }\n return () => {\n refValueHolder.removeEventListener('wheel', onWheel);\n };\n }, []);\n\n return scrollRef;\n};\n```\n\n...and add it in the app:\n\n```\nconst App:FC = () => {\n const scrollRef = useHorizontalScroll();\n ...\n return (\n \n \n ...\n \n \n );\n};\n```\n\n========================================\n\nCode:\n```text\nnpm react-horizontal-scroll\n```\n\n```text\n.container {\n display: flex;\n flex-wrap: nowrap;\n overflow-x: scroll;\n}\n```\n\n```text\n.item {\n width: 100vw;\n}\n```\n\n```text\nimport React from 'react';\n\nfunction App() {\n const handleScroll = (event) => {\n const container = event.target;\n const scrollAmount = event.deltaY;\n container.scrollTo({\n top: 0,\n left: container.scrollLeft + scrollAmount,\n behavior: 'smooth'\n });\n };\n\n return (\n <div>\n <header>\n {/* Header content */}\n </header>\n <div className=\"container\" onWheel={handleScroll}>\n <div className=\"item\">\n {/* Item content */}\n </div>\n <div className=\"item\">\n {/* Item content */}\n </div>\n <div className=\"item\">\n {/* Item content */}\n </div>\n </div>\n <footer>\n {/* Footer content */}\n </footer>\n </div>\n );\n}\n```\n\n```text\n.container::-webkit-scrollbar {\n height: 8px;\n}\n\n.container::-webkit-scrollbar-thumb {\n background-color: gray;\n border-radius: 10px;\n}\n\n.container::-webkit-scrollbar-track {\n background-color: white;\n border-radius: 10px;\n}\n```\n\n```text\nconst useHorizontalScroll = () => {\n const scrollRef = useRef();\n\n const onWheel = (e) => {\n if (e.deltaY === 0) return;\n e.preventDefault();\n scrollRef.current.scrollTo({\n left: scrollRef.current.scrollLeft + e.deltaY,\n behavior: 'smooth',\n });\n };\n\n useEffect(() => {\n // Store the ref value to unsubscribe from event during componentWillUnmount\n let refValueHolder = null;\n if (scrollRef) {\n refValueHolder = scrollRef.current;\n refValueHolder.addEventListener('wheel', onWheel);\n }\n return () => {\n refValueHolder.removeEventListener('wheel', onWheel);\n };\n }, []);\n\n return scrollRef;\n};\n```\n\n```text\nconst App:FC = () => {\n const scrollRef = useHorizontalScroll();\n ...\n return (\n <Header />\n <Body ref={scrollRef}>\n ...\n </Body>\n <Footer />\n );\n};\n```\n\n========================================\n\nComments:\n- Hi! Thanks for the answer, everything is working except the function to scroll with the mouse, i'm trying to rewrite the function and lets see if this works.\n- event.target.parentElement for this case but this solution still make vertical scroll.","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":183,"estimatedTokens":948}}667{"id":"stack-73994025","source":"stackoverflow","questionId":73994025,"title":"I can't get daisyui's theme to propagate in a next.js app","tags":["css","reactjs","next.js","tailwind-css","daisyui"],"text":"Title: I can't get daisyui's theme to propagate in a next.js app\nTags: css, reactjs, next.js, tailwind-css, daisyui\nSource: Stack Overflow\n\nQuestion:\nI am trying to use a theme from \"Daisyui\" which is a tailwind based css component library https://daisyui.com/. I have a next.js app where the entry point is `pages/_app.tsx`. From looking at examples and reading the website's documentation, it looks like the theme is passed on from the highest component to all of the inwards components.\n\nYou add `daisyui` to the `tailwind.config.js` file, Like this:\n\nhttps://i.sstatic.net/iTwKb.png\n\nI made my `tailwind.config.js` file look like this:\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n //...\n content: ['./pages/**/*.{js,ts,jsx,tsx}'],\n plugins: [require(\"daisyui\")],\n daisyui: {\n themes: true\n }\n }\n```\n\n`true` means that all the themes are included.\n\nI added the theme \"synthwave\" to the highest level component of the next.js app which is a div tag wrapping around `Component`:\n\n```\nimport '../styles/globals.css'\nimport type { AppProps } from 'next/app'\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n return (\n \n \n \n )\n}\n\nexport default MyApp\n```\n\nI also made a postcss.config.js file\n\n```\nmodule.exports = {\n plugins: ['tailwindcss', 'autoprefixer'],\n };\n```\n\nAnd I imported\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nat the top of globals.css.\n\nThis fails because the resulting webpage is just plain white.\n\nhttps://i.sstatic.net/vA6Y3.jpg\n\nBut what's weird is when I change `daisyui: { themes: true }` in `tailwind.config.js` to `daisyui: { themes: [\"synthwave\"] }`. The webpage IS correctly themed with daisyui's synthwave:\n\nhttps://i.sstatic.net/bknAu.jpg\n\nI'm assuming that this only works because it's overriding ALL styles on every page and I don't want that. I want to be able to declare different themes on any page if I want to. So how do I correctly set the theme for the entire app in a way that I can override it on individual pages if I want?\n\n========================================\n\nTop Answer:\nExperienced the same issue but this worked\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx,mdx}',\n './components/**/*.{js,ts,jsx,tsx,mdx}',\n './app/**/*.{js,ts,jsx,tsx,mdx}',\n ],\n theme: {\n extend: {\n },\n },\n daisyui: {\n themes: true,\n },\n plugins: [require(\"daisyui\")],\n}\nexport default function RootLayout({ children }) {\n return (\n \n {children}\n \n )\n}\n```\n\n========================================\n\nCode:\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n //...\n content: ['./pages/**/*.{js,ts,jsx,tsx}'],\n plugins: [require(\"daisyui\")],\n daisyui: {\n themes: true\n }\n }\n```\n\n```text\nimport '../styles/globals.css'\nimport type { AppProps } from 'next/app'\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n return (\n <div theme-data=\"synthwave\">\n <Component {...pageProps} />\n </div>\n )\n}\n\nexport default MyApp\n```\n\n```text\nmodule.exports = {\n plugins: ['tailwindcss', 'autoprefixer'],\n };\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\npages/_app.tsx\n```\n\n```text\ndaisyui\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntrue\n```\n\n```text\nComponent\n```\n\n```text\ndaisyui: { themes: true }\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ndaisyui: { themes: [\"synthwave\"] }\n```\n\n```text\nimport { Html, Head, Main, NextScript } from 'next/document'\n\nexport default function Document() {\n return (\n <Html data-theme=\"synthwave\">\n <Head />\n <body>\n <Main />\n <NextScript />\n </body>\n </Html>\n )\n}\n```\n\n```text\n_document.js\n```\n\n```text\n_document.js\n```\n\n```text\npages\n```\n\n```text\n<Html data-theme=\"synthwave\">\n```\n\n```text\nindex.tsx\n```\n\n```text\ndaisyui\n```\n\n```text\nsynthwave\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx,mdx}',\n './components/**/*.{js,ts,jsx,tsx,mdx}',\n './app/**/*.{js,ts,jsx,tsx,mdx}',\n ],\n theme: {\n extend: {\n },\n },\n daisyui: {\n themes: true,\n },\n plugins: [require(\"daisyui\")],\n}\nexport default function RootLayout({ children }) {\n return (\n <html lang=\"en\" data-theme={'aqua'}>\n <body className={inter.className}>{children}</body>\n </html>\n )\n}\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":22,"totalLines":250,"estimatedTokens":1094}}668{"id":"stack-71746273","source":"stackoverflow","questionId":71746273,"title":"TailwindCSS: is it possible to remove a box-shadow on print?","tags":["css","reactjs","tailwind-css","styling"],"text":"Title: TailwindCSS: is it possible to remove a box-shadow on print?\nTags: css, reactjs, tailwind-css, styling\nSource: Stack Overflow\n\nQuestion:\nI have a `div` with a classes that look like this `className={`${cardSelected && 'shadow-factors'} bg-white rounded-md cursor-pointer`}`\n\nRight now I'm setting up a print version of the page and I was wondering if it is possible to somehow remove this shadow-factors / box-shadow for the printed version with TailwindCSS toolset?\n\n========================================\n\nTop Answer:\nYes Tailwind has a modifier `print`, you may look here\n\nFor example - shadow will disappear when printing\n\n```\n\n Hello World\n\n```\n\n========================================\n\nCode:\n```text\ndiv\n```\n\n```text\nclassName={`${cardSelected && 'shadow-factors'} bg-white rounded-md cursor-pointer`}\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n theme: {\n extend: {\n screens: {\n 'print': {'raw': 'print'},\n // => @media print { ... }\n }\n }\n }\n}\n```\n\n```text\nprint:\n```\n\n```text\nprint:shadow-none\n```\n\n```text\n<div class=\"shadow-lg print:shadow-none\">\n Hello World\n</div>\n```\n\n```text\nprint\n```\n\n========================================\n\nComments:\n- Yes you can do this with a media query, @media print {your print rules here}. For a more complete answer please post a complete code example to your question. developer.mozilla.org/en-US/docs/Web/CSS/@media\n- The solution is good for both v2 and v3+. Keep in mind that for TailwindCSS v2, you have to enable print first: v2.tailwindcss.com/docs/breakpoints#styling-for-print\n- @CornelRaiu actually I use ^4.0.0 and adding this to tailwind config has worked for me and now it is picking up print:shadow-none","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":71,"estimatedTokens":429}}669{"id":"stack-68633173","source":"stackoverflow","questionId":68633173,"title":"CSS background not visible when content scrolls past viewport","tags":["html","css","flexbox","background-color","tailwind-css"],"text":"Title: CSS background not visible when content scrolls past viewport\nTags: html, css, flexbox, background-color, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to create a css background that is 100% height at all times regardless of content height, and when the content is long enough to create a scrollbar, the background color remains as you scroll.\n\nNo matter what combination of min-height & height I try I can't seem to get this to work properly.\n\nWhen I use Tailwind's `h-screen` class it fills to the bottom of the page when the content is smaller than the viewport, but when there's a scrollbar the background disappears on the scrolled section.\n\nI've tried various combations of `h-full` and `min-height: 100%`, on parent divs/body/html, but nothing seems to work.\n\nHere's a working example:\n\nhttps://jsfiddle.net/t30wo6uk/3/\n\nHere's screenshots of the two problems demonstrated:\n\n`h-screen` works when there's no scrollbar, but once there's a scroll it cuts off:\n\nhttps://i.sstatic.net/kgoB1.png\n\nIf I remove `h-screen` or try combinations of `height: 100%` I get the inverse problem where it sticks when scrolling, but if the content is too small for the viewport the background color doesn't take up the full height of the page.\n\nhttps://i.sstatic.net/3K3Gr.png\n\nIn my real app, I have a navigation header, then this content section that I want to take up the full height, and then a sticky footer at the bottom. The sticky footer is why I have those additional divs around my content div.\n\n========================================\n\nTop Answer:\nI recently had the same issue while applying Tailwind myself. For anyone still looking for an answer, `min-h-full` seemed to have worked great.\n\n========================================\n\nCode:\n```text\nh-screen\n```\n\n```text\nh-full\n```\n\n```text\nmin-height: 100%\n```\n\n```text\nh-screen\n```\n\n```text\nh-screen\n```\n\n```text\nheight: 100%\n```\n\n```text\n<body class=\"min-h-screen bg-gray-50\">\n{... content ...}\n</body>\n```\n\n```text\nmin-h-screen\n```\n\n```text\nmin-h-screen\n```\n\n```text\nmin-h-full\n```\n\n========================================\n\nComments:\n- I'm trying to avoid adding the background-color to the body because in my app I have different layouts that load depending on which page is loaded, and the layouts are nested underneath the body so don't have the ability to change the body class. Are you aware of a way to do it without adjusting the body?\n- you trying a SPA approach? Then you need to include the `min-h-screen` class aswell as the `bg-` class to the element that will contain all content. Alternatively you have to use JS to add/remove classes.","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":84,"estimatedTokens":657}}670{"id":"stack-68161727","source":"stackoverflow","questionId":68161727,"title":"Convert Tailwind CSS classes to CSS inline style","tags":["css","reactjs","react-native","tailwind-css"],"text":"Title: Convert Tailwind CSS classes to CSS inline style\nTags: css, reactjs, react-native, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm struggling with the conversion from a React app to a react-native app. In this React app I used Tailwind CSS to stylize components thus I need to convert Tailwind CSS classes to inline CSS so that I can convert it to react native stylesheet using a tool online.\n\nIs there a way or tool to get CSS from Tailwind CSS code?\n\ne.g. `w-full h-full bg-black` after conversion should be (vanilla CSS) `{ width: 100%; height: 100%; background-color: black; }`.\n\n========================================\n\nTop Answer:\nThis is a very specific scenario that has a very specific solution.\n\nIn a more general case (that you really want to extract the vanilla css of any HTML file using tailwindcss), there is a quick tutorial for that.\n\nExtracting TailwindCSS from HTML\n\n========================================\n\nCode:\n```text\nw-full h-full bg-black\n```\n\n```text\n{ width: 100%; height: 100%; background-color: black; }\n```\n\n```text\nTailwind-rn\n```\n\n```text\ntailwind()\n```\n\n========================================\n\nComments:\n- This is not a question. What are you asking?\n- I mean, is there a tool for this?\n- Have you perhaps tried a package like this, which allows tailwind in RN: github.com/vadimdemedes/tailwind-rn ?","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":45,"estimatedTokens":337}}671{"id":"stack-71633327","source":"stackoverflow","questionId":71633327,"title":"Referencing TailwindCSS config from JavaScript in SvelteKit","tags":["javascript","tailwind-css","vite","sveltekit"],"text":"Title: Referencing TailwindCSS config from JavaScript in SvelteKit\nTags: javascript, tailwind-css, vite, sveltekit\nSource: Stack Overflow\n\nQuestion:\nI'm using SvelteKit, which uses Vite and the setup instructions calls for CommonJS config files:\nhttps://tailwindcss.com/docs/guides/sveltekit\n\nHowever, the guide for referencing the configuration in JavaScript requires ESM.\nhttps://tailwindcss.com/docs/configuration#referencing-in-java-script\n\nAttempting to change the `tailwind.config.cjs` to ESM doesn't work (I get errors from other libraries trying to `require()` it as CJS).\n\nDoes anyone know how I can either get a working ESM `tailwind.config.js` in SvelteKit or a different better method to reference the tailwind config?\n\n========================================\n\nTop Answer:\nSince tailwind v3.3 you can write your config file using ESM or Typescript.\n\n```\nnpx tailwindcss init --esm\n```\n\n```\nnpx tailwindcss init --ts\n```\n\nI converted my config into ts, then I did\n\n```\nimport tailwindConfig from '../../tailwind.config'; // Change path accordingly\nimport resolveConfig from 'tailwindcss/resolveConfig'\nconst fullConfig = resolveConfig(tailwindConfig)\n```\n\nSource example from the docs\n\n========================================\n\nCode:\n```text\ntailwind.config.cjs\n```\n\n```text\nrequire()\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n.json\n```\n\n```text\njson\n```\n\n```text\nnpx tailwindcss init --esm\n```\n\n```text\nnpx tailwindcss init --ts\n```\n\n```text\nimport tailwindConfig from '../../tailwind.config'; // Change path accordingly\nimport resolveConfig from 'tailwindcss/resolveConfig'\nconst fullConfig = resolveConfig(tailwindConfig)\n```\n\n========================================\n\nComments:\n- I'm wanting the same. the maintainer of `svelte-add` will be implementing it soon hopefully. i think cjs was used because of postcss not handling esm..but they recently added it github.com/svelte-add/svelte-add/issues/209","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":79,"estimatedTokens":480}}672{"id":"stack-70470809","source":"stackoverflow","questionId":70470809,"title":"Tailwind CSS: The `outline` class does not exist. Yet this is not a custom style, but a framework class","tags":["css","tailwind-css","postcss"],"text":"Title: Tailwind CSS: The `outline` class does not exist. Yet this is not a custom style, but a framework class\nTags: css, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nIn a new project I get the strange behavior where everything works as intended, except for Outline and related: https://tailwindcss.com/docs/outline-style\n\nThe error received:\n\nThe `outline` class does not exist. If you're sure that `outline`\nexists, make sure that any `@import` statements are being properly\nprocessed before Tailwind CSS sees your CSS, as `@apply` can only be\nused for classes in the same CSS tree.\n\nThis is in an `@apply` for a component eg:\n\n```\n.button {\n @apply bg-primary hover:bg-secondary;\n }\n\n .primary {\n @apply border-2 md:border-none border-primary md:border-transparent;\n }\n```\n\nYet this does not work:\n\n```\n.outline {\n @apply outline outline-2 outline-offset-2 focus:outline-yellow-500;\n }\n```\n\nTo ensure this is in the same import tree, these are applied in the index.css as part of the components layer:\n\n```\n@layer components {\n ...\n }\n```\n\nAny insights into this will be highly appreciated, as none of the references (tailwind documentation, nor their repo bugs, addresses this issue in a workable manner, each example found points to user error. Which may just be the case here, but I am yet to find the issue.\n\n========================================\n\nCode:\n```text\n.button {\n @apply bg-primary hover:bg-secondary;\n }\n\n .primary {\n @apply border-2 md:border-none border-primary md:border-transparent;\n }\n```\n\n```text\n.outline {\n @apply outline outline-2 outline-offset-2 focus:outline-yellow-500;\n }\n```\n\n```text\n@layer components {\n ...\n }\n```\n\n```text\noutline\n```\n\n```text\noutline\n```\n\n```text\n@import\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```text\noutline\n```\n\n```text\n<css input>\n```\n\n```text\n@apply outline\n```\n\n```text\n.custom-outline\n```\n\n========================================\n\nComments:\n- Thank you sir, that oversight on my part seems to be the issue. Truly appreciate the feedback and the solution!","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":109,"estimatedTokens":519}}673{"id":"stack-70824816","source":"stackoverflow","questionId":70824816,"title":"Center-align one element and right align second element- Tailwind CSS","tags":["html","css","tailwind-css"],"text":"Title: Center-align one element and right align second element- Tailwind CSS\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have attached a rough idea of what I am trying to achieve, the dotted line represents the center of the container.\nI am trying to center align one div element, then right align a second div within the same row, while both elements are centered horizontally.\nhttps://i.sstatic.net/ZqhML.png\n\n========================================\n\nTop Answer:\nFor me the trick was `justify-between`. Makes it so the way the flexbox grows, the free space is distributed in between the elements.\n\nHere's a snippet:\n\n```\n\n \n \n \n\n### Sign In\n\n Dashboard / Sign In\n\n \n\n```\n\n========================================\n\nCode:\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"flex items-center justify-center border border-dashed\">\n <div class=\"flex-1\"></div>\n <div class=\"w-32 h-32 bg-red-500\"></div>\n <div class=\"flex-1\">\n <div class=\"w-20 h-20 bg-green-500 ml-auto\"></div>\n </div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"grid grid-cols-[minmax(0,1fr),auto,minmax(0,1fr)] items-center border border-dashed\">\n <div></div>\n <div class=\"w-32 h-32 bg-red-500\"></div>\n <div class=\"w-20 h-20 bg-green-500 ml-auto\"></div>\n</div>\n```\n\n```html\n<div class=\"flex flex-col content-center justify-center mt-16 mx-auto max-w-xl\">\n <!-- Top level info -->\n <div class=\"flex justify-between w-full\">\n <h3 class=\"h3\">Sign In</h3>\n <p class=\"p\">Dashboard / Sign In</p>\n </div>\n</div>\n```\n\n```text\njustify-between\n```\n\n========================================\n\nComments:\n- Could you include what you've tried so far?\n- This is exactly what I needed. Thank you!","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":74,"estimatedTokens":441}}674{"id":"stack-78498980","source":"stackoverflow","questionId":78498980,"title":"How to create striped background using tailwind?","tags":["tailwind-css"],"text":"Title: How to create striped background using tailwind?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow do you translate:\n\n```\nbackground: repeating-linear-gradient(\n to bottom,\n #039BE5 0px,\n #039BE5 20px,\n #90CAF9 20px,\n #90CAF9 40px\n );\n```\n\nto tailwind?\n\n========================================\n\nCode:\n```text\nbackground: repeating-linear-gradient(\n to bottom,\n #039BE5 0px,\n #039BE5 20px,\n #90CAF9 20px,\n #90CAF9 40px\n );\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.4.3\"></script>\n\n<style type=\"text/tailwindcss\">\n@layer utilities {\n .foo {\n background: repeating-linear-gradient(\n to bottom,\n #039BE5 0px,\n #039BE5 20px,\n #90CAF9 20px,\n #90CAF9 40px\n );\n }\n}\n</style>\n\n<div class=\"h-80 foo\"></div>\n```\n\n```js\ntailwind.config = {\n theme: {\n extend: {\n backgroundImage: {\n foo: 'repeating-linear-gradient(to bottom, #039BE5 0px, #039BE5 20px, #90CAF9 20px, #90CAF9 40px)',\n },\n },\n },\n};\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.4.3\"></script>\n\n<div class=\"h-80 bg-foo\"></div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.4.3\"></script>\n\n<div class=\"h-80 bg-[repeating-linear-gradient(to_bottom,#039BE5_0px,#039BE5_20px,#90CAF9_20px,#90CAF9_40px)]\"></div>\n```\n\n```js\ntailwind.config = {\n theme: {\n extend: {\n backgroundImage: {\n foo: 'repeating-linear-gradient(to bottom,var(--tw-gradient-stops))',\n },\n },\n },\n};\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.4.3\"></script>\n\n<div class=\"h-80 bg-foo from-[#039BE5] from-[length:0_20px] to-[#90CAF9] to-[length:20px_40px]\"></div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.4.3\"></script>\n\n<div class=\"h-80 bg-[repeating-linear-gradient(to_bottom,var(--tw-gradient-stops))] from-[#039BE5] from-[length:0_20px] to-[#90CAF9] to-[length:20px_40px]\"></div>\n```\n\n```js\ntailwind.config = {\n plugins: [\n tailwind.plugin(({ addUtilities }) => {\n addUtilities({\n '.foo': {\n backgroundImage: 'repeating-linear-gradient(to bottom, #039BE5 0px, #039BE5 20px, #90CAF9 20px, #90CAF9 40px)',\n },\n });\n }),\n ],\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.4.3\"></script>\n\n<div class=\"h-80 foo\"></div>\n```\n\n```text\nbackgroundImage\n```\n\n```text\nbackgroundImage\n```\n\n```text\nbackgroundImage\n```\n\n```text\nbackgroundImage\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":135,"estimatedTokens":595}}675{"id":"stack-68723590","source":"stackoverflow","questionId":68723590,"title":"How to set an element to show on medium screen and below in Tailwind?","tags":["responsive-design","tailwind-css"],"text":"Title: How to set an element to show on medium screen and below in Tailwind?\nTags: responsive-design, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a div with a class of `hidden md:block` housing this element from heroicon:\n``.\n\nCurrently, the div element only show when the screen size is at `md`, but I want to show at `md` **and** below, how exactly do I do that?\n\n========================================\n\nTop Answer:\nI believe you are doing it in reverse.\n\nBasically =>\nhttps://tailwindcss.com/docs/responsive-design\n\nWhere this approach surprises people most often is that to style\nsomething for mobile, you need to use the unprefixed version of a\nutility, not the sm: prefixed version. Don’t think of sm: as meaning\n“on small screens”, think of it as “at the small breakpoint“.\n\nSo you would have to do `class=\"block lg:hidden\"` in your classes for it to work as you are describing :)\n\n========================================\n\nCode:\n```text\nhidden md:block\n```\n\n```text\n<MenuIcon class=\"ml-1 mr-2 h-5 w-5 text-gray-500\"/>\n```\n\n```text\nmd\n```\n\n```text\nmd\n```\n\n```html\n<div class=\"hidden md:block 2xl:hidden\">Hello</div>\n```\n\n```text\nclass=\"lg:hidden\"\n```\n\n```text\nblock\n```\n\n```text\nlg\n```\n\n```text\nhidden\n```\n\n```text\nmd\n```\n\n```text\nxl\n```\n\n```text\nblock\n```\n\n```text\nhidden\n```\n\n```text\nclass=\"block lg:hidden\"\n```\n\n========================================\n\nComments:\n- Yea, I was just wondering when I was looking through the docs. So I can't manually reverse the order then?\n- Only if you redefine breakpoints in config and I would not recommend it since TW is designed around mobile first approach ;) gist.github.com/heytulsiprasad/e8bae1eba7b90ef66b8b1b1ae0861‌​d96","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":89,"estimatedTokens":425}}676{"id":"stack-73150351","source":"stackoverflow","questionId":73150351,"title":"How can I have dynamic 'primary' classes in TailwindCSS?","tags":["javascript","css","tailwind-css"],"text":"Title: How can I have dynamic 'primary' classes in TailwindCSS?\nTags: javascript, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI need to have a dynamic theme for my website that comes from a database, possible values are `theme-1`, `theme-2` etc. and I want each one to change the color palette of the site, i.e the `primary` tailwind color being `green` for `theme-1` but `blue` for `theme-2`.\n\nI have tried using https://github.com/upupming/tailwindcss-themeable but it is such an overkill as it regenerates all the colors and has a very cumbersome and long prefix before each class. I want to define the 'theme-1' class at the `body` level and do something along the lines of this pseudo code\n\n```\n.theme-2 {\n /* primary-500 is now color: blue */\n}\n```\n\nI am using Tailwind v2 due to dependency constraints.\n\n========================================\n\nTop Answer:\nYou might use tw-colors, a slim plugin that makes it really easy to configure multiple color themes.\n\n*tailwind.config.js*\n\n```\nconst { createThemes } = require('tw-colors');\n\n module.exports = {\n content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],\n plugins: [\n createThemes({\n halloween: { \n 'primary': 'orange',\n 'secondary': 'yellow',\n },\n summer: { \n 'primary': 'pink',\n 'secondary': 'red',\n },\n winter: { \n 'primary': 'blue',\n 'secondary': 'green',\n },\n party: { \n 'primary': 'steelblue',\n 'secondary': 'darkblue',\n },\n })\n ],\n };\n```\n\nuse themes like this with class:\n\n```\n\n ...\n\n```\n\nOr with data attributes:\n\n```\n\n ...\n\n```\n\nThemes can be switched dynamically with some toggle button or whatever you prefer\n\nDisclaimer: I am the author of this package\n\n========================================\n\nCode:\n```text\n.theme-2 {\n /* primary-500 is now color: blue */\n}\n```\n\n```text\ntheme-1\n```\n\n```text\ntheme-2\n```\n\n```text\nprimary\n```\n\n```text\ngreen\n```\n\n```text\ntheme-1\n```\n\n```text\nblue\n```\n\n```text\ntheme-2\n```\n\n```text\nbody\n```\n\n```text\n:root .theme-1 {\n --tw-text-opacity: 1;\n --color-primary-50: 235,242,254;\n --color-primary-100: 215,230,253;\n --color-primary-200: 176,205,251;\n --color-primary-300: 137,180,250;\n --color-primary-400: 98,155,248;\n --color-primary-500: 59,130,246;\n --color-primary-600: 11,97,238;\n --color-primary-700: 8,75,184;\n --color-primary-800: 6,53,131;\n --color-primary-900: 4,31,77;\n }\n```\n\n```text\ncolors: {\n ...\n primary: {\n 50: 'rgba(var(--color-primary-50), var(--tw-text-opacity))',\n 100:'rgba(var(--color-primary-100), var(--tw-text-opacity))',\n 200:'rgba(var(--color-primary-200), var(--tw-text-opacity))',\n 300:'rgba(var(--color-primary-300), var(--tw-text-opacity))',\n 400:'rgba(var(--color-primary-400), var(--tw-text-opacity))',\n 500:'rgba(var(--color-primary-500), var(--tw-text-opacity))',\n 600:'rgba(var(--color-primary-600), var(--tw-text-opacity))',\n 700:'rgba(var(--color-primary-700), var(--tw-text-opacity))',\n 800:'rgba(var(--color-primary-800), var(--tw-text-opacity))',\n 900:'rgba(var(--color-primary-900), var(--tw-text-opacity))'\n }\n\n...\n```\n\n```js\nconst { createThemes } = require('tw-colors');\n\n module.exports = {\n content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],\n plugins: [\n createThemes({\n halloween: { \n 'primary': 'orange',\n 'secondary': 'yellow',\n },\n summer: { \n 'primary': 'pink',\n 'secondary': 'red',\n },\n winter: { \n 'primary': 'blue',\n 'secondary': 'green',\n },\n party: { \n 'primary': 'steelblue',\n 'secondary': 'darkblue',\n },\n })\n ],\n };\n```\n\n```html\n<html class='theme-halloween'>\n ...\n</html>\n```\n\n```html\n<html data-theme='halloween'>\n ...\n</html>\n```\n\n========================================\n\nComments:\n- How much colors do you have in a single palette? Maybe, using CSS variables is solution here, but it depends\n- I'll generate a few palettes using tailwindshades.com. The important thing for me is to be able to reuse primary as a class name and have tailwind classes like bg-primary-500 and text-primary-500 automatically switch, as there will be a lot of HTML generated with Vue\n- Having a look at tailwindcss.com/docs/… thanks to your suggestion. However it seems this is only a solution for multiple classes, and not dynamically overwriting 'primary' as I'm hoping\n- You may create custom components fro every theme, but not entirely sure it is a good idea. Like DO NOT create pallete named `primary`, but a bunch of others. And define components in CSS like `.theme-1 .text-primary-500 {@apply text-theme1-500}, .theme-2 .text-primary-500 {@apply text-theme2-500}` and so on. Another solution is to write custom variant for every theme maybe. Use it like `theme1:text-green-500 theme2:text-blue-500` but again it hard to maintain for a big amount of themes\n- You can also keep all CSS configuration co-located in a single tailwind config file by defining themes in custom plugins","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":196,"estimatedTokens":1298}}677{"id":"stack-70138478","source":"stackoverflow","questionId":70138478,"title":"How to remove background-color in tailwindcss?","tags":["css","tailwind-css"],"text":"Title: How to remove background-color in tailwindcss?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm wondering how can I remove background color from an existing `div` for a specific `xl` screen size? I want something like this `background-color:unset`, is this possible with `tailwind.css`?\n\n\r\n\r\n\n```\n\n```\n\n========================================\n\nCode:\n```html\n<div class=\"fixed bottom-0 bg-baseorange p-4 left-0 w-full z-10 xl: bg-none xl:absolute lg:absolute xl:bottom-22 xl:right-20 lg:bottom-22 lg:right-20\">\n</div>\n```\n\n```text\ndiv\n```\n\n```text\nxl\n```\n\n```text\nbackground-color:unset\n```\n\n```text\ntailwind.css\n```\n\n```text\nxl:bg-transparent\n```\n\n```text\nbg-transparent\n```\n\n```text\nbackground-color: transparent;\n```\n\n========================================\n\nComments:\n- This is the correct answer!","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":54,"estimatedTokens":206}}678{"id":"stack-67374040","source":"stackoverflow","questionId":67374040,"title":"How to properly overflow a dropdown in tailwind?","tags":["html","css","tailwind-css"],"text":"Title: How to properly overflow a dropdown in tailwind?\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to make the dropdown on the right overflow so that it is completely visible. I do not want to make the table bigger, I want the dropdown to be bigger than the table. I tried multiple different things with overflow and absolute/relative positioning but failed. What classes do I need to change to make it work? I appreciate any inputs!\n\nTailwind playground for testing: https://play.tailwindcss.com/0iiSxy59aP\n\nCheers\n\n========================================\n\nTop Answer:\nThe accepted answer solves the problem. But there are cases when we actually need an overflow.\n\nIn such a scenario, we need to remove the current `relative-absolute` approach and can make use of this library\n\n**Setup useFloating Hook**\n\n```\nimport { useFloating, shift } from \"@floating-ui/react-dom\";\n \nconst { x, y, reference, floating, strategy } = useFloating({\n placement: \"bottom-start\",\n middleware: [shift()],\n });\n```\n\n**add `reference` ref in the button which triggers dropdown**\n\n```\n Options \n```\n\n**add `floating` ref in the div which was previously made absolute**\n\n```\n \n```\n\n========================================\n\nCode:\n```text\nimport { useFloating, shift } from \"@floating-ui/react-dom\";\n \nconst { x, y, reference, floating, strategy } = useFloating({\n placement: \"bottom-start\",\n middleware: [shift()],\n });\n```\n\n```text\n<button ref={reference} type=\"button\"\"> Options </button>\n```\n\n```text\n<div ref={floating}\n style={{\n position: strategy,\n top: y ?? \"\",\n left: x ?? \"\",\n }}> </div>\n```\n\n```text\nrelative-absolute\n```\n\n```text\nreference\n```\n\n```text\nfloating\n```\n\n========================================\n\nComments:\n- Have you tried removing `overflow-hidden` from the 4th div and setting a height to it (e.g., `h-screen`)?\n- it does, but it messes with border styles :/","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":83,"estimatedTokens":490}}679{"id":"stack-74154735","source":"stackoverflow","questionId":74154735,"title":"Why is the first element of my tailwindcss grid slightly misaligned?","tags":["html","css","tailwind-css"],"text":"Title: Why is the first element of my tailwindcss grid slightly misaligned?\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using Tailwind CSS to make a grid. In the parent div, I'm using the classes `space-x-1` and `space-y-1` to automatically align the child divs.\n\nThis works well except the first element is slightly misaligned. The first element has a computed margin of 0, while every other element has a computed margin of 4px. When I remove the `space-x-1` and `space-y-1` from the parent div, the child divs have the same margins.\n\n\r\n\r\n\n```\n\n wood 1\n ore 2\n wood 3\n sheep 4\n wheat 5\n brick 6\n desert 7\n brick 8\n ore 9\n wood 10\n sheep 11\n wheat 12\n brick 13\n wood 14\n ore 15\n wheat 16\n sheep 17\n wheat 18\n brick 19\n\n```\n\n========================================\n\nTop Answer:\nIf you use grid, i will sugest to use `gap-x-1` and `gap-y-1`.\n\nAnd if you want margin top right left and bottom, you can use `mt-1 ml-1 mr-1 mb-1`\n\n\r\n\r\n\n```\n\n wood 1\n ore 2\n wood 3\n sheep 4\n wheat 5\n brick 6\n desert 7\n brick 8\n ore 9\n wood 10\n sheep 11\n wheat 12\n brick 13\n wood 14\n ore 15\n wheat 16\n sheep 17\n wheat 18\n brick 19\n\n```\n\n========================================\n\nCode:\n```html\n<!-- Tailwind 3 -->\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n\n<!-- Body -->\n<div class=\"grid grid-cols-5 space-x-1 space-y-1\">\n <div class=\"text-white text-center p-2 bg-green-700\">wood 1</div>\n <div class=\"text-white text-center p-2 bg-gray-700\">ore 2</div>\n <div class=\"text-white text-center p-2 bg-green-700\">wood 3</div>\n <div class=\"text-white text-center p-2 bg-purple-800\">sheep 4</div>\n <div class=\"text-white text-center p-2 bg-yellow-500\">wheat 5</div>\n <div class=\"text-white text-center p-2 bg-yellow-900\">brick 6</div>\n <div class=\"text-white text-center p-2 bg-pink-700\">desert 7</div>\n <div class=\"text-white text-center p-2 bg-yellow-900\">brick 8</div>\n <div class=\"text-white text-center p-2 bg-gray-700\">ore 9</div>\n <div class=\"text-white text-center p-2 bg-green-700\">wood 10</div>\n <div class=\"text-white text-center p-2 bg-purple-800\">sheep 11</div>\n <div class=\"text-white text-center p-2 bg-yellow-500\">wheat 12</div>\n <div class=\"text-white text-center p-2 bg-yellow-900\">brick 13</div>\n <div class=\"text-white text-center p-2 bg-green-700\">wood 14</div>\n <div class=\"text-white text-center p-2 bg-gray-700\">ore 15</div>\n <div class=\"text-white text-center p-2 bg-yellow-500\">wheat 16</div>\n <div class=\"text-white text-center p-2 bg-purple-800\">sheep 17</div>\n <div class=\"text-white text-center p-2 bg-yellow-500\">wheat 18</div>\n <div class=\"text-white text-center p-2 bg-yellow-900\">brick 19</div>\n</div>\n```\n\n```text\nspace-x-1\n```\n\n```text\nspace-y-1\n```\n\n```text\nspace-x-1\n```\n\n```text\nspace-y-1\n```\n\n```text\nspace-x-1\n```\n\n```text\nspace-y-1\n```\n\n```text\ngap-1\n```\n\n```text\ngap-x-1\n```\n\n```text\ngap-y-1\n```\n\n```text\nspace-\n```\n\n```html\n<!-- Tailwind 3 -->\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n\n<!-- Body -->\n<div class=\"grid grid-cols-5 gap-x-1 gap-y-1 mt-1 ml-1 mr-1 mb-1\">\n <div class=\"text-white text-center p-2 bg-green-700\">wood 1</div>\n <div class=\"text-white text-center p-2 bg-gray-700\">ore 2</div>\n <div class=\"text-white text-center p-2 bg-green-700\">wood 3</div>\n <div class=\"text-white text-center p-2 bg-purple-800\">sheep 4</div>\n <div class=\"text-white text-center p-2 bg-yellow-500\">wheat 5</div>\n <div class=\"text-white text-center p-2 bg-yellow-900\">brick 6</div>\n <div class=\"text-white text-center p-2 bg-pink-700\">desert 7</div>\n <div class=\"text-white text-center p-2 bg-yellow-900\">brick 8</div>\n <div class=\"text-white text-center p-2 bg-gray-700\">ore 9</div>\n <div class=\"text-white text-center p-2 bg-green-700\">wood 10</div>\n <div class=\"text-white text-center p-2 bg-purple-800\">sheep 11</div>\n <div class=\"text-white text-center p-2 bg-yellow-500\">wheat 12</div>\n <div class=\"text-white text-center p-2 bg-yellow-900\">brick 13</div>\n <div class=\"text-white text-center p-2 bg-green-700\">wood 14</div>\n <div class=\"text-white text-center p-2 bg-gray-700\">ore 15</div>\n <div class=\"text-white text-center p-2 bg-yellow-500\">wheat 16</div>\n <div class=\"text-white text-center p-2 bg-purple-800\">sheep 17</div>\n <div class=\"text-white text-center p-2 bg-yellow-500\">wheat 18</div>\n <div class=\"text-white text-center p-2 bg-yellow-900\">brick 19</div>\n</div>\n```\n\n```text\ngap-x-1\n```\n\n```text\ngap-y-1\n```\n\n```text\nmt-1 ml-1 mr-1 mb-1\n```\n\n========================================\n\nComments:\n- Thank you this was driving me crazy!","metadata":{"transformedAt":"2026-08-18T18:33:42.937Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":187,"estimatedTokens":1136}}680{"id":"stack-72341549","source":"stackoverflow","questionId":72341549,"title":"sh: 1: tailwindcss: Permission denied // error on build process Tailwindcss CLI","tags":["node.js","linux","ubuntu","tailwind-css"],"text":"Title: sh: 1: tailwindcss: Permission denied // error on build process Tailwindcss CLI\nTags: node.js, linux, ubuntu, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have installed nodejs version: `v18.2.0`,\n\nand while i am trying to build my css with tailwind, and with the build command:\n\n```\nnpx tailwindcss -i ./src/input.css -o ./public/css/output.css --watch\n```\n\ni just get the error:\n\n```\nsh: 1: tailwindcss: Permission denied The terminal process \"/usr/bin/bash '-c', 'npx tailwindcss -i ./src/input.css -o ./public/css/output.css --watch'\" terminated with exit code: 126.\n```\n\n30.5.2022 **Update**:\n\nI have now installed nodejs and npm correctly.\n\nMy Versions are:\n\n```\njonas@jonas-ubuntu ~> node -v\n\nv18.2.0 \n\njonas@jonas-ubuntu ~> npm -v\n\n8.11.0\n```\n\nIf i now try to run to run the command:\n\n```\nnpx tailwindcss -i ./src/input.css -o ./public/css/output.css --watch\n```\n\nIt gives me this output:\n\n```\nsh: 1: tailwindcss: Permission denied\n```\n\nA look at my user permissions with: `ls -la`\n\n```\njonas@jonas-ubuntu ~/D/G/WOWA-BAU-NEU (main)> ls -la\ninsgesamt 100\ndrwxrwxr-x 8 jonas jonas 4096 Mai 23 21:47 ./\ndrwxrwxr-x 3 jonas jonas 4096 Mai 25 22:53 ../\n-rw-rw-r-- 1 jonas jonas 11701 Mai 23 21:47 build.css\n-rw-rw-r-- 1 jonas jonas 0 Mai 23 21:47 file\ndrwxrwxr-x 8 jonas jonas 4096 Mai 30 13:51 .git/\ndrwxrwxr-x 59 jonas jonas 4096 Mai 23 21:47 node_modules/\ndrwxrwxr-x 2 jonas jonas 4096 Mai 23 21:47 old/\n-rw-rw-r-- 1 jonas jonas 60 Mai 23 21:47 package.json\n-rw-rw-r-- 1 jonas jonas 45723 Mai 23 21:47 package-lock.json\ndrwxrwxr-x 5 jonas jonas 4096 Mai 30 13:51 public/\ndrwxrwxr-x 2 jonas jonas 4096 Mai 23 21:47 src/\n-rw-rw-r-- 1 jonas jonas 108 Mai 23 21:47 tailwind.config.js\ndrwxrwxr-x 2 jonas jonas 4096 Mai 23 21:47 .vscode/\n```\n\nthey look correct to write and read.\n\nWhat I didn't really understand was:\n\nIf these are all OK, I would recommend looking at your user permissions globally (i.e. make sure you are in the wheel group, which can be done via: usermod -a -G wheel username).\n\n========================================\n\nTop Answer:\nHad a similiar permission problem when i was running the init command.\nin my case , the soln was to :\n\ndelete `node_modules/tailwindscss`\n\ndelete all files named tailwindcss inside `node_modules/.bin/tailwindscss`\n\ndelete `tailwind.config.js` in the main folder.\n\nand `run npm install -D tailwindcss postcss autoprefixer` &\n`npx tailwindcss init` commands again\n\n========================================\n\nCode:\n```text\nnpx tailwindcss -i ./src/input.css -o ./public/css/output.css --watch\n```\n\n```text\nsh: 1: tailwindcss: Permission denied The terminal process \"/usr/bin/bash '-c', 'npx tailwindcss -i ./src/input.css -o ./public/css/output.css --watch'\" terminated with exit code: 126.\n```\n\n```text\njonas@jonas-ubuntu ~> node -v\n\nv18.2.0 \n\njonas@jonas-ubuntu ~> npm -v\n\n8.11.0\n```\n\n```text\nnpx tailwindcss -i ./src/input.css -o ./public/css/output.css --watch\n```\n\n```text\nsh: 1: tailwindcss: Permission denied\n```\n\n```text\njonas@jonas-ubuntu ~/D/G/WOWA-BAU-NEU (main)> ls -la\ninsgesamt 100\ndrwxrwxr-x 8 jonas jonas 4096 Mai 23 21:47 ./\ndrwxrwxr-x 3 jonas jonas 4096 Mai 25 22:53 ../\n-rw-rw-r-- 1 jonas jonas 11701 Mai 23 21:47 build.css\n-rw-rw-r-- 1 jonas jonas 0 Mai 23 21:47 file\ndrwxrwxr-x 8 jonas jonas 4096 Mai 30 13:51 .git/\ndrwxrwxr-x 59 jonas jonas 4096 Mai 23 21:47 node_modules/\ndrwxrwxr-x 2 jonas jonas 4096 Mai 23 21:47 old/\n-rw-rw-r-- 1 jonas jonas 60 Mai 23 21:47 package.json\n-rw-rw-r-- 1 jonas jonas 45723 Mai 23 21:47 package-lock.json\ndrwxrwxr-x 5 jonas jonas 4096 Mai 30 13:51 public/\ndrwxrwxr-x 2 jonas jonas 4096 Mai 23 21:47 src/\n-rw-rw-r-- 1 jonas jonas 108 Mai 23 21:47 tailwind.config.js\ndrwxrwxr-x 2 jonas jonas 4096 Mai 23 21:47 .vscode/\n```\n\n```text\nv18.2.0\n```\n\n```text\nls -la\n```\n\n```text\nnpm rebuild\n```\n\n```text\nsudo apt-get remove nodejs\nnpm uninstall -g npx\nsudo apt-get remove npm\n```\n\n```text\nsudo apt-get install nodejs\nsudo apt-get install npm\nnpm install -g npx\n```\n\n```text\nsudo\n```\n\n```text\nnpm\n```\n\n```text\nnpx\n```\n\n```text\nls -la\n```\n\n```text\nr\n```\n\n```text\nw\n```\n\n```text\nx\n```\n\n```text\nwheel\n```\n\n```text\nusermod -a -G wheel username\n```\n\n```text\nsudo chown -R www-data:www-data /path/to/project/\n```\n\n```text\nsudo chmod -R 755 /path/to/project/\n```\n\n```text\nls -lah\n```\n\n```text\nwww-data\n```\n\n```bash\n$ chmod 755 tailwind.config.js && chown www-data:www-data tailwind.config.js\n```\n\n```text\nnode_modules\n```\n\n```text\n/var/www/website.com/your_node_directory/node_modules\n```\n\n```text\nyour_node_directory\n```\n\n```text\nnpx tailwindcss -i /your/input/file/path.css -o /your/output/file/path.css\n```\n\n```text\nnode_modules/tailwindscss\n```\n\n```text\nnode_modules/.bin/tailwindscss\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nrun npm install -D tailwindcss postcss autoprefixer\n```\n\n```text\nnpx tailwindcss init\n```\n\n========================================\n\nComments:\n- you need to check and update the permissions the current user has for node\n- I have now installed nodejs and npm correctly, but the problem is still there. I also tried a different shell (Fish) but this did not work. I think my problem is the user permission, but i dont know where. If you can see the Problem in my updated question, please let me know.","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":34,"totalLines":256,"estimatedTokens":1315}}681{"id":"stack-70539607","source":"stackoverflow","questionId":70539607,"title":"How to make scrollable sidebar fixed in TailwindCSS","tags":["html","css","sass","tailwind-css","sidebar"],"text":"Title: How to make scrollable sidebar fixed in TailwindCSS\nTags: html, css, sass, tailwind-css, sidebar\nSource: Stack Overflow\n\nQuestion:\nI came across the BetterDev sidebar in which, if we add content to it, the sidebar also scrolls. Is there a way to make that sidebar fixed and not scrollable? I tried sticky, corrected with top-0 and left-0, but it didn't work.\n\n- Image when content is not there\n\n- Image when content is there\n\n```\n\n \n \n \n \n Better Dev\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Better Dev\n \n \n \n \n \n Home\n \n \n About\n \n \n Features\n \n \n Pricing\n \n \n \n \n \n \n content goes here\n \n \n \n```\n\nHow do I make the the navbar fixed after medium breakpoint and make the content scrollable when a lot content is added?\n\nCodepen Link\n\n========================================\n\nCode:\n```html\n<div class=\"relative min-h-screen md:flex\">\n \n <!-- mobile menu bar -->\n <div class=\"bg-gray-800 text-gray-100 flex justify-between md:hidden\">\n <!-- logo -->\n <a href=\"#\" class=\"block p-4 text-white font-bold\">Better Dev</a>\n \n <!-- mobile menu button -->\n <button class=\"mobile-menu-button p-4 focus:outline-none focus:bg-gray-700\">\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" />\n </svg>\n </button>\n </div>\n \n <!-- sidebar -->\n <div class=\"sidebar bg-blue-800 text-blue-100 w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out\">\n \n <!-- logo -->\n <a href=\"#\" class=\"text-white flex items-center space-x-2 px-4\">\n <svg class=\"w-8 h-8\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z\" />\n </svg>\n <span class=\"text-2xl font-extrabold\">Better Dev</span>\n </a>\n \n <!-- nav -->\n <nav>\n <a href=\"#\" class=\"block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white\">\n Home\n </a>\n <a href=\"\" class=\"block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white\">\n About\n </a>\n <a href=\"\" class=\"block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white\">\n Features\n </a>\n <a href=\"\" class=\"block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white\">\n Pricing\n </a>\n </nav>\n </div>\n \n <!-- content -->\n <div class=\"flex-1 p-10 text-2xl font-bold\">\n content goes here\n </div>\n \n </div>\n```\n\n```html\n<div class=\"relative md:flex h-screen overflow-hidden\">\n```\n\n```html\n<div class=\"flex-1 p-10 text-2xl font-bold h-screen overflow-y-auto\">\n```\n\n```text\noverflow-y-auto\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":133,"estimatedTokens":873}}682{"id":"stack-67164117","source":"stackoverflow","questionId":67164117,"title":"Tailwind CSS list with Static header and footer with Scrollable Area in middle","tags":["css","layout","height","tailwind-css"],"text":"Title: Tailwind CSS list with Static header and footer with Scrollable Area in middle\nTags: css, layout, height, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to create a dashboard layout that is a 3 column using Tailwind CSS.\n\nI have - Header on the top, List in middle, and Button at the bottom position. I want the entire component's height not greater than the screen height. In other words, my columns should have a max height of screen height.\n\nComing to each column, I want a list to be scrollable between header and footer still maintaining that the combined height of the header, footer, and the list should not exceed the screen height.\n\nI am trying to do that using Tailwind CSS but I will be okay if someone can redirect me using regular css as well.\n\n========================================\n\nCode:\n```text\n<div class=\"h-screen flex flex-col\">\n <header class=\"flex h-10 bg-gray-200\">Header</header>\n\n <div class=\"flex flex-1 bg-gray-100 overflow-auto\">\n Long Content\n </div>\n\n <footer class=\"flex h-10 bg-gray-200\">Footer</footer>\n</div>\n```\n\n```text\nh-screen\n```\n\n```text\nflex flex-1\n```\n\n========================================\n\nComments:\n- Thank you, but Here on the header and footer part, we are assigning a static height? will it work without that? My bad, it works! Thank you :0","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":40,"estimatedTokens":330}}683{"id":"stack-67827277","source":"stackoverflow","questionId":67827277,"title":"Unable to build Nuxt due to a problem with PostCSS when using Bulma and Buefy (nuxt-buefy)","tags":["nuxt.js","tailwind-css","bulma","postcss","buefy"],"text":"Title: Unable to build Nuxt due to a problem with PostCSS when using Bulma and Buefy (nuxt-buefy)\nTags: nuxt.js, tailwind-css, bulma, postcss, buefy\nSource: Stack Overflow\n\nQuestion:\nUsing the following config, everything was working fine via `npm run dev`, but when we did `npm run build`, there was an error:\n\nERROR in ./assets/scss/main.scss (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./assets/scss/main.scss) Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js): ParserError: Syntax Error at line: 1, column 23\n\n**nuxt.config.js**\n\n```\nexport default {\n // Global page headers: https://go.nuxtjs.dev/config-head\n head: {\n title: 'app-name',\n htmlAttrs: {\n lang: 'en'\n },\n meta: [\n { charset: 'utf-8' },\n { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n { hid: 'description', name: 'description', content: '' }\n ],\n link: [\n { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },\n { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/open-sans-all/css/open-sans.min.css' },\n ]\n },\n\n // Global CSS: https://go.nuxtjs.dev/config-css\n css: [\n '@/assets/scss/main.scss',\n ],\n\n // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins\n plugins: [\n { src: '~/plugins/vee-validate.js', ssr: true },\n ],\n\n // Auto import components: https://go.nuxtjs.dev/config-components\n components: true,\n\n // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules\n buildModules: [\n // https://go.nuxtjs.dev/tailwindcss\n '@nuxtjs/tailwindcss',\n ],\n\n // Modules: https://go.nuxtjs.dev/config-modules\n modules: [\n ['nuxt-buefy', { css: false }]\n ],\n\n // Build Configuration: https://go.nuxtjs.dev/config-build\n build: {\n transpile: ['vee-validate'],\n }\n}\n```\n\n**assets/scss/main.scss**\n\n```\n// bulma/buefy overrides\n$family-sans-serif: \"Open Sans\", \"Arial\", sans-serif !important;\n\n$input-border-color: white;\n$input-shadow: none;\n$input-radius: 0px;\n\n// Import bulma styles\n@import \"~bulma\";\n\n// Import buefy styles\n@import \"~buefy/src/scss/buefy\";\n```\n\n**package.json**\n\n```\n\"dependencies\": {\n \"core-js\": \"^3.9.1\",\n \"nuxt\": \"^2.15.3\",\n \"nuxt-buefy\": \"^0.4.7\",\n \"vee-validate\": \"^3.4.7\",\n \"vue-clickaway\": \"^2.2.2\"\n },\n \"devDependencies\": {\n \"@nuxtjs/tailwindcss\": \"^4.0.1\",\n \"fibers\": \"^5.0.0\",\n \"postcss\": \"^8.2.8\",\n \"sass\": \"^1.34.0\",\n \"sass-loader\": \"^10.2.0\"\n }\n```\n\nWe traced the build error to `@import \"~buefy/src/scss/buefy\";` in **main.scss**. The project build successfully with that commented out.\n\nFurther analysis lead to this code in `node_modules/buefy/buefy.css`:\n\n```\n.columns.is-variable {\n --columnGap: 0.75rem;\n margin-left: calc(-1 * var(--columnGap));\n margin-right: calc(-1 * var(--columnGap));\n}\n```\n\nCommenting out that code allowed the build to succeed.\n\nAlso changing it from multiplying `-1` to `1` allowed it to succeed.\n\n========================================\n\nCode:\n```text\nexport default {\n // Global page headers: https://go.nuxtjs.dev/config-head\n head: {\n title: 'app-name',\n htmlAttrs: {\n lang: 'en'\n },\n meta: [\n { charset: 'utf-8' },\n { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n { hid: 'description', name: 'description', content: '' }\n ],\n link: [\n { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },\n { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/open-sans-all/css/open-sans.min.css' },\n ]\n },\n\n // Global CSS: https://go.nuxtjs.dev/config-css\n css: [\n '@/assets/scss/main.scss',\n ],\n\n // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins\n plugins: [\n { src: '~/plugins/vee-validate.js', ssr: true },\n ],\n\n // Auto import components: https://go.nuxtjs.dev/config-components\n components: true,\n\n // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules\n buildModules: [\n // https://go.nuxtjs.dev/tailwindcss\n '@nuxtjs/tailwindcss',\n ],\n\n // Modules: https://go.nuxtjs.dev/config-modules\n modules: [\n ['nuxt-buefy', { css: false }]\n ],\n\n // Build Configuration: https://go.nuxtjs.dev/config-build\n build: {\n transpile: ['vee-validate'],\n }\n}\n```\n\n```text\n// bulma/buefy overrides\n$family-sans-serif: \"Open Sans\", \"Arial\", sans-serif !important;\n\n$input-border-color: white;\n$input-shadow: none;\n$input-radius: 0px;\n\n// Import bulma styles\n@import \"~bulma\";\n\n// Import buefy styles\n@import \"~buefy/src/scss/buefy\";\n```\n\n```text\n\"dependencies\": {\n \"core-js\": \"^3.9.1\",\n \"nuxt\": \"^2.15.3\",\n \"nuxt-buefy\": \"^0.4.7\",\n \"vee-validate\": \"^3.4.7\",\n \"vue-clickaway\": \"^2.2.2\"\n },\n \"devDependencies\": {\n \"@nuxtjs/tailwindcss\": \"^4.0.1\",\n \"fibers\": \"^5.0.0\",\n \"postcss\": \"^8.2.8\",\n \"sass\": \"^1.34.0\",\n \"sass-loader\": \"^10.2.0\"\n }\n```\n\n```text\n.columns.is-variable {\n --columnGap: 0.75rem;\n margin-left: calc(-1 * var(--columnGap));\n margin-right: calc(-1 * var(--columnGap));\n}\n```\n\n```text\nnpm run dev\n```\n\n```text\nnpm run build\n```\n\n```text\n@import \"~buefy/src/scss/buefy\";\n```\n\n```text\nnode_modules/buefy/buefy.css\n```\n\n```text\n-1\n```\n\n```text\n1\n```\n\n```text\nbuild: {\n transpile: ['vee-validate'],\n postcss: {\n plugins: {\n \"postcss-custom-properties\": false\n },\n },\n }\n```\n\n```text\n// bulma/buefy overrides\n$family-sans-serif: \"Open Sans\", \"Arial\", sans-serif !important;\n\n$input-border-color: white;\n$input-shadow: none;\n$input-radius: 0px;\n\n$variable-columns: false;\n\n// Import bulma styles\n@import \"~bulma\";\n\n// Import buefy styles\n@import \"~buefy/src/scss/buefy\";\n```\n\n```text\nnuxt.config.js\n```\n\n```text\nmain.scss\n```\n\n========================================\n\nComments:\n- I spent an hour trying to figure this out. This should be marked as the correct answer!\n- I spent nearly 2 hours, this guided me in the right direction but I also needed to disable it in preset-env: ``` build: { postcss: { plugins: { \"postcss-custom-properties\": false, 'postcss-preset-env': { features: { 'custom-properties': false } } } } }```","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":271,"estimatedTokens":1552}}684{"id":"stack-56478918","source":"stackoverflow","questionId":56478918,"title":"Hide input field file behind image","tags":["html","css","tailwind-css"],"text":"Title: Hide input field file behind image\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to put an `file input` field behind an avatar. When the avatar is clicked the user should be able to select an image. It's working great, but how do I hide the input field (please see snippet). When I add `visible: hidden` it goes away but obviously it's not clickable anymore. \n\nHow could I fix this? I'm using TailwindCss:\n\n\r\n\r\n\n```\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n\n```\n\n\r\n\r\n\r\n\nThanks!\n\n========================================\n\nTop Answer:\nYou can do like that, this is not official way to doing that but in such condition you can use this heck\n\n\r\n\r\n\n```\ninput[type='file'] {\r\n opacity: 0;\r\n}\n```\n\n\r\n\n```\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n\n```\n\n========================================\n\nCode:\n```html\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n\n<div class=\"flex items-center cursor-pointer justify-center relative w-16 h-16 rounded-full border-2 border-brand-100\">\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" id=\"Capa_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\" style=\"enable-background:new 0 0 32 32;\" xml:space=\"preserve\" width=\"50px\" height=\"50px\"><g><g><g><path d=\"M28,6h-4l-4-4h-8.001L8,6H4c0,0-4,0-4,4v12c0,4,4,4,4,4s5.662,0,11.518,0 c1.614,2.411,4.361,3.999,7.482,4c3.875-0.002,7.167-2.454,8.436-5.889C31.995,23.076,32,22,32,22s0-8,0-12S28,6,28,6z M14.033,21.66C11.686,20.848,10,18.626,10,16c0-3.312,2.684-6,6-6c1.914,0,3.607,0.908,4.706,2.306 C16.848,13.321,14,16.822,14,21C14,21.223,14.018,21.441,14.033,21.66z M23,27.883c-3.801-0.009-6.876-3.084-6.885-6.883 c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885C29.874,24.799,26.799,27.874,23,27.883z\" data-original=\"#010002\" class=\"active-path\" data-old_color=\"##565A5\" fill=\"#565A5C\"/><polygon points=\"24.002,16 22,16 22,20 18,20 18,22 22,22 22,26 24.002,26 24.002,22 28,22 28,20 24.002,20 \" data-original=\"#010002\" class=\"active-path\" data-old_color=\"##565A5\" fill=\"#565A5C\"/></g></g></g> </svg>\n </div>\n\n <input id=\"file\"\n class=\"absolute w-full h-full\"\n ref=\"file\"\n type=\"file\"\n accept=\"image/*\"/>\n</div>\n```\n\n```text\nfile input\n```\n\n```text\nvisible: hidden\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n\n<div class=\"flex items-center cursor-pointer justify-center relative w-16 h-16 rounded-full border-2 border-brand-100\">\n<label for=\"file\">\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" id=\"Capa_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\" style=\"enable-background:new 0 0 32 32;\" xml:space=\"preserve\" width=\"50px\" height=\"50px\"><g><g><g><path d=\"M28,6h-4l-4-4h-8.001L8,6H4c0,0-4,0-4,4v12c0,4,4,4,4,4s5.662,0,11.518,0 c1.614,2.411,4.361,3.999,7.482,4c3.875-0.002,7.167-2.454,8.436-5.889C31.995,23.076,32,22,32,22s0-8,0-12S28,6,28,6z M14.033,21.66C11.686,20.848,10,18.626,10,16c0-3.312,2.684-6,6-6c1.914,0,3.607,0.908,4.706,2.306 C16.848,13.321,14,16.822,14,21C14,21.223,14.018,21.441,14.033,21.66z M23,27.883c-3.801-0.009-6.876-3.084-6.885-6.883 c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885C29.874,24.799,26.799,27.874,23,27.883z\" data-original=\"#010002\" class=\"active-path\" data-old_color=\"##565A5\" fill=\"#565A5C\"/><polygon points=\"24.002,16 22,16 22,20 18,20 18,22 22,22 22,26 24.002,26 24.002,22 28,22 28,20 24.002,20 \" data-original=\"#010002\" class=\"active-path\" data-old_color=\"##565A5\" fill=\"#565A5C\"/></g></g></g> </svg>\n </div>\n</label>\n\n <input id=\"file\"\n class=\"absolute w-full h-full\"\n ref=\"file\"\n type=\"file\"\n accept=\"image/*\" style=\" visibility: hidden;\"/>\n</div>\n```\n\n```css\ninput[type='file'] {\n opacity: 0;\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n\n<div class=\"flex items-center cursor-pointer justify-center relative w-16 h-16 rounded-full border-2 border-brand-100\">\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" id=\"Capa_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\" style=\"enable-background:new 0 0 32 32;\" xml:space=\"preserve\" width=\"50px\" height=\"50px\"><g><g><g><path d=\"M28,6h-4l-4-4h-8.001L8,6H4c0,0-4,0-4,4v12c0,4,4,4,4,4s5.662,0,11.518,0 c1.614,2.411,4.361,3.999,7.482,4c3.875-0.002,7.167-2.454,8.436-5.889C31.995,23.076,32,22,32,22s0-8,0-12S28,6,28,6z M14.033,21.66C11.686,20.848,10,18.626,10,16c0-3.312,2.684-6,6-6c1.914,0,3.607,0.908,4.706,2.306 C16.848,13.321,14,16.822,14,21C14,21.223,14.018,21.441,14.033,21.66z M23,27.883c-3.801-0.009-6.876-3.084-6.885-6.883 c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885C29.874,24.799,26.799,27.874,23,27.883z\" data-original=\"#010002\" class=\"active-path\" data-old_color=\"##565A5\" fill=\"#565A5C\"/><polygon points=\"24.002,16 22,16 22,20 18,20 18,22 22,22 22,26 24.002,26 24.002,22 28,22 28,20 24.002,20 \" data-original=\"#010002\" class=\"active-path\" data-old_color=\"##565A5\" fill=\"#565A5C\"/></g></g></g> </svg>\n </div>\n\n <input id=\"file\"\n class=\"absolute w-full h-full\"\n ref=\"file\"\n type=\"file\"\n accept=\"image/*\"/>\n</div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":129,"estimatedTokens":1314}}685{"id":"stack-79502552","source":"stackoverflow","questionId":79502552,"title":"Unknown word \"use strict\" error by upgrading TailwindCSS from v3 to v4","tags":["reactjs","tailwind-css","vite"],"text":"Title: Unknown word \"use strict\" error by upgrading TailwindCSS from v3 to v4\nTags: reactjs, tailwind-css, vite\nSource: Stack Overflow\n\nQuestion:\nI was running Tailwind 3.4.17 in my Vite React app, but I wanted to upgrade it, so I ran 'npx @tailwindcss/upgrade' following this guide and expecting an easy migration.\n\nI now get this error from the Vite server when trying to run the app:\n\n```\n10:15:37 PM [vite] Internal server error: [postcss] postcss-import: /Users/oliver/Documents/code/news-planner/client/node_modules/tailwindcss/lib/index.js:1:1: Unknown word \"use strict\"\n Plugin: vite:css\n File: /Users/oliver/Documents/code/news-planner/client/node_modules/tailwindcss/lib/index.js:1:0\n 1 | \"use strict\";\n | ^\n 2 | module.exports = require(\"./plugin\");\n 3 | \n at Input.error (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/input.js:113:16)\n at Parser.unknownWord (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/parser.js:595:22)\n at Parser.other (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/parser.js:437:12)\n at Parser.parse (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/parser.js:472:16)\n at parse (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/parse.js:11:12)\n at get root [as root] (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/no-work-result.js:43:14)\n at Result.get [as root] (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/no-work-result.js:77:21)\n at loadImportContent (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-BGGf7Pd3.js:696:33)\n at async Promise.all (index 0)\n at async resolveImportId (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-BGGf7Pd3.js:629:27)\n at async parseStyles$1 (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-BGGf7Pd3.js:537:5)\n at async Object.Once (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-BGGf7Pd3.js:794:22)\n at async LazyResult.runAsync (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/lazy-result.js:293:11)\n at async compileCSS (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:48587:21)\n at async TransformPluginContext.transform (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:47842:11)\n at async EnvironmentPluginContainer.transform (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:47219:18)\n at async loadAndTransform (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:41030:27)\n at async viteTransformMiddleware (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:42474:24)\n```\n\nI committed and pushed the project to GitHub right before running the upgrade. I would like to know how to get my app working again.\n\nI tried running git checkout to the latest commit, uninstalling the new version of Tailwind and reinstalling the old. I still get the same error.\n\nI'm running macOS 15.1\n\n========================================\n\nCode:\n```text\n10:15:37 PM [vite] Internal server error: [postcss] postcss-import: /Users/oliver/Documents/code/news-planner/client/node_modules/tailwindcss/lib/index.js:1:1: Unknown word \"use strict\"\n Plugin: vite:css\n File: /Users/oliver/Documents/code/news-planner/client/node_modules/tailwindcss/lib/index.js:1:0\n 1 | \"use strict\";\n | ^\n 2 | module.exports = require(\"./plugin\");\n 3 | \n at Input.error (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/input.js:113:16)\n at Parser.unknownWord (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/parser.js:595:22)\n at Parser.other (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/parser.js:437:12)\n at Parser.parse (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/parser.js:472:16)\n at parse (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/parse.js:11:12)\n at get root [as root] (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/no-work-result.js:43:14)\n at Result.get [as root] (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/no-work-result.js:77:21)\n at loadImportContent (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-BGGf7Pd3.js:696:33)\n at async Promise.all (index 0)\n at async resolveImportId (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-BGGf7Pd3.js:629:27)\n at async parseStyles$1 (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-BGGf7Pd3.js:537:5)\n at async Object.Once (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-BGGf7Pd3.js:794:22)\n at async LazyResult.runAsync (/Users/oliver/Documents/code/news-planner/client/node_modules/postcss/lib/lazy-result.js:293:11)\n at async compileCSS (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:48587:21)\n at async TransformPluginContext.transform (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:47842:11)\n at async EnvironmentPluginContainer.transform (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:47219:18)\n at async loadAndTransform (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:41030:27)\n at async viteTransformMiddleware (file:///Users/oliver/Documents/code/news-planner/client/node_modules/vite/dist/node/chunks/dep-0AosnpPU.js:42474:24)\n```\n\n```none\nnpm uninstall postcss-import autoprefixer\n```\n\n```none\nnpm install tailwindcss @tailwindcss/postcss postcss\n```\n\n```js\nexport default {\n plugins: {\n \"@tailwindcss/postcss\": {},\n }\n}\n```\n\n```none\nnpm install tailwindcss @tailwindcss/vite\n```\n\n```js\nimport { defineConfig } from 'vite'\nimport tailwindcss from '@tailwindcss/vite'\nexport default defineConfig({\n plugins: [\n tailwindcss(),\n ],\n})\n```\n\n```text\n@tailwindcss/postcss\n```\n\n```text\n@tailwindcss/cli\n```\n\n```text\ntailwindcss\n```\n\n```text\npostcss\n```\n\n```text\n@tailwindcss/postcss\n```\n\n```text\n@tailwindcss/vite\n```\n\n```text\ninit\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@tailwind\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n========================================\n\nComments:\n- You can actually reset your git head and make it point to the previous commit. if you would like to get the app working again. then push the local changes to the remote repository.\n- Starting with v4, the tailwind.config.js file is no longer needed, therefore the init process for generating it is no longer necessary either. As a result the CLI was separated into its own package, now named `@tailwindcss/cli`, which only needs to be installed by those who want to use the Tailwind CLI Source","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":16,"totalLines":149,"estimatedTokens":1854}}686{"id":"stack-71580328","source":"stackoverflow","questionId":71580328,"title":"Minimum Margin in Tailwind","tags":["javascript","html","css","reactjs","tailwind-css"],"text":"Title: Minimum Margin in Tailwind\nTags: javascript, html, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIs there a way to do a minimum margin in tailwind similar to w-min, I can't find it in the docs. I am looking for the margin to be 1/5 of the screen but a minimum of 12 (units).\n\n========================================\n\nCode:\n```css\n.mx-\\[max\\(20vw\\2c 12px\\)\\] {\n margin-left: max(20vw,12px);\n margin-right: max(20vw,12px);\n}\n```\n\n```text\nmax()\n```\n\n```text\n1/5\n```\n\n```text\n20vw\n```\n\n```text\n20vh\n```\n\n```text\n12px\n```\n\n```text\nmx-[max(20vw,12px)]\n```\n\n```text\n20vw\n```\n\n```text\n12px\n```\n\n```text\n12px\n```\n\n```text\nm-*\n```\n\n```text\nmy-*\n```\n\n```text\nm[lrtb]-*\n```\n\n========================================\n\nComments:\n- `m-12` in tailwind means 48px, clean answer btw! +1\n- whoa, I did not know this was possible, if you don't mind could you link docs to this rule type stuff so I can read more?\n- Radical stuff it sure it @MichaelThomas : ). the link in the answer use arbitrary values for more info. Just be aware of not using spaces in between because \"spaces\" are significant in CSS. In my example, there is no space next to the comma in `mx-[max(20vw,12px)]`.\n- ty @Dhaifallah for the info on `m-12` and the compliment!\n- Thank you for the awesome response, it really helped out!\n- Unsure how your CSS is structured, @Qwerty, what I can suggest is a minum height using arbitrary value tailwindcss.com/docs/min-height#arbitrary-values","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":74,"estimatedTokens":365}}687{"id":"stack-66218085","source":"stackoverflow","questionId":66218085,"title":"Colors not working on TailwindCSS on Rails","tags":["ruby-on-rails","tailwind-css"],"text":"Title: Colors not working on TailwindCSS on Rails\nTags: ruby-on-rails, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI created a brand new project using Rails 6.2.1 and I added tailwindcss-rails. Some of it works, but colors for example seem not to be working. The snippet from https://play.tailwindcss.com/ looks like this when I embed it on my project:\n\nhttps://i.sstatic.net/2OYvF.png\n\nAll my source code is here https://github.com/pupeno/imok\n\nAny ideas what's going on here?\n\nThank you.\n\n========================================\n\nCode:\n```js\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n 'light-blue': colors.lightBlue,\n cyan: colors.cyan,\n },\n },\n },\n variants: {},\n plugins: [],\n}\n```\n\n```text\ncyan\n```\n\n```text\nlight-blue\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- I don't remember having to do this when I used TailwindCSS before and there's a default theme that provides colors (github.com/tailwindlabs/tailwindcss/blob/master/stubs/…), why aren't the colors from the default theme working?\n- @pupeno The colors `cyan` and `lightBlue` which are used in the TailwindCSS playground don't come with the default theme. Just updated my answer.","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":52,"estimatedTokens":323}}688{"id":"stack-67081460","source":"stackoverflow","questionId":67081460,"title":"How can I align image horizontally in tailwind-css","tags":["html","alignment","tailwind-css"],"text":"Title: How can I align image horizontally in tailwind-css\nTags: html, alignment, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm having difficulty in aligning an image to right-side inside a child div of a grid with tailwind-css. I have tried `float-right`, `right-0`, etc but none of them worked.\n\n\r\n\r\n\n```\n.next-visit {\n background-color: #7645c1;\n margin: 5px 1px;\n border-radius: 15px;\n padding: 10px;\n color: #fff;\n}\n```\n\n\r\n\n```\n\n \n\n \n \n Next visit\n 19 Oct 2021\n\n \n \n \n \n \n \n```\n\n\r\n\r\n\r\n\nExpected result\n\nhttps://i.sstatic.net/K55FT.png\n\n========================================\n\nTop Answer:\nUsually you want to pick between either `float`, `grid` or `flex` and stick with it. In your case I would probably just use `flex` like this:\n\nNote the `ml-auto` which is `margin-left: auto` which makes the image move over to the right.\n\n\r\n\r\n\n```\n.next-visit {\n background-color: #7645c1;\n margin: 5px 1px;\n border-radius: 15px;\n padding: 10px;\n color: #fff;\n}\n```\n\n\r\n\n```\n\n \n\n \n \n Next visit\n 19 Oct 2021\n\n \n\n \n \n \n \n \n```\n\n========================================\n\nCode:\n```css\n.next-visit {\n background-color: #7645c1;\n margin: 5px 1px;\n border-radius: 15px;\n padding: 10px;\n color: #fff;\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n <div class=\"next-visit\">\n\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <span class=\"text-sm\">Next visit</span>\n <p class=\"text-lg font-semibold\">19 Oct 2021</p>\n </div>\n <div class=\"w-12\">\n <img src=\"https://placeimg.com/640/480/any\" class=\"float-right\">\n </div>\n </div>\n </div>\n```\n\n```text\nfloat-right\n```\n\n```text\nright-0\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n<div class=\"flex items-center justify-center min-h-screen\">\n <div class=\"flex items-center justify-between h-24 text-white bg-purple-600 rounded-lg shadow-md\">\n <div class=\"flex flex-col px-4\">\n <span class=\"text-xs text-purple-300\">Next visit</span>\n <p class=\"text-2xl font-semibold uppercase\">19 Oct 2021</p>\n </div>\n <img class=\"h-full py-2 pr-4 ml-8\" src=\"https://placeimg.com/640/480/any\"></img>\n </div>\n</div>\n```\n\n```css\n.next-visit {\n background-color: #7645c1;\n margin: 5px 1px;\n border-radius: 15px;\n padding: 10px;\n color: #fff;\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n <div class=\"next-visit\">\n\n <div class=\"flex\">\n <div>\n <span class=\"text-sm\">Next visit</span>\n <p class=\"text-lg font-semibold\">19 Oct 2021</p>\n </div>\n\n <div class=\"ml-auto w-12\">\n <img src=\"https://placeimg.com/640/480/any\" class=\"float-right\">\n </div>\n </div>\n </div>\n```\n\n```text\nfloat\n```\n\n```text\ngrid\n```\n\n```text\nflex\n```\n\n```text\nflex\n```\n\n```text\nml-auto\n```\n\n```text\nmargin-left: auto\n```\n\n```css\n.next-visit {\n background-color: #7645c1;\n margin: 5px 1px;\n border-radius: 15px;\n padding: 10px;\n color: #fff;\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n<div class=\"next-visit\">\n <div class=\"h-20\">\n <div class=\"float-left\">\n <span class=\"text-sm\">Next visit</span>\n <p class=\"text-lg font-semibold\">19 Oct 2021</p>\n </div>\n <img src=\"https://placeimg.com/640/480/any\" class=\"float-right h-full\">\n </div>\n</div>\n```\n\n```text\nw-12\n```\n\n```text\nw-full\n```\n\n```text\nfloat-right\n```\n\n```text\nfloat-right\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":230,"estimatedTokens":890}}689{"id":"stack-70715747","source":"stackoverflow","questionId":70715747,"title":"div sticky header not working in TailwindCSS","tags":["css","reactjs","tailwind-css"],"text":"Title: div sticky header not working in TailwindCSS\nTags: css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to create a sticky header with TailwindCSS but can't seem to make it work.\n\nI've read the docs and seems that i only need to add `sticky top-0` to my div to make it sticky, but it doesn't work.\n\nI've tried to clean up my code as best as I could for the sake of readability, but if you are intrested in the entire code you can find it here.\n\n```\nimport { Logo, ToolbarButton, IconLink, Countdown } from \"@lib/atoms\";\nimport { faWhatsapp, faFacebook } from \"@fortawesome/free-brands-svg-icons\";\nimport {\n faHandHoldingHeart,\n faHeadphonesAlt,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport const Toolbar = () => {\n\n return (\n \n\n \n \n \n \n \n \n \n \n \n \n {/* I want this div to be sticky */}\n \n \n \n \n Inicio\n Videos\n Colaboradores\n \n \n \n \n Reproducir\n \n \n \n \n \n\n \n );\n};\n```\n\nThe above code renders the following component:\n\nhttps://i.sstatic.net/OSAN9.png\n\nAlso, you can find a deployed version of my app here.\n\nI'd like to achieve something like this with my header component.\n\nAny help is much appreciated.\n\n========================================\n\nCode:\n```text\nimport { Logo, ToolbarButton, IconLink, Countdown } from \"@lib/atoms\";\nimport { faWhatsapp, faFacebook } from \"@fortawesome/free-brands-svg-icons\";\nimport {\n faHandHoldingHeart,\n faHeadphonesAlt,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport const Toolbar = () => {\n\n return (\n <div className=\"flex flex-col drop-shadow-2xl\">\n\n <div className=\"h-16 flex items-center justify-center bg-rs-secondary\">\n <div className=\"container flex justify-between\">\n <div className=\"flex gap-4 items-center\">\n <IconLink\n icon={faFacebook}\n href=\"https://www.facebook.com/estereo.sulamita\"\n />\n <IconLink icon={faWhatsapp} href=\"https://wa.link/logvtp\" />\n </div>\n <Countdown />\n </div>\n </div>\n \n {/* I want this div to be sticky */}\n <div className=\"sticky top-0 h-20 flex justify-center bg-white\">\n <div className=\"container flex items-center h-full justify-between\">\n <Logo />\n <div className=\"flex\">\n <ToolbarButton>Inicio</ToolbarButton>\n <ToolbarButton>Videos</ToolbarButton>\n <ToolbarButton>Colaboradores</ToolbarButton>\n <ToolbarButton\n className=\"group\"\n hoverBackgroundColor=\"hover:bg-black\"\n primary={true}\n >\n <FontAwesomeIcon\n icon={faHandHoldingHeart}\n className=\"group-hover:text-white w-4\"\n />\n </ToolbarButton>\n <ToolbarButton\n backgroundColor=\"bg-rs-primary\"\n hoverBackgroundColor=\"hover:bg-black\"\n textColor=\"text-white\"\n primary={true}\n >\n Reproducir\n <FontAwesomeIcon icon={faHeadphonesAlt} className=\"w-4 ml-3\" />\n </ToolbarButton>\n </div>\n </div>\n </div>\n\n </div>\n );\n};\n```\n\n```text\nsticky top-0\n```\n\n```text\nsticky\n```\n\n```text\n__next\n```\n\n```text\n<div className=\"flex flex-col drop-shadow-2xl\">\n```\n\n```text\nReact.Fragment\n```\n\n========================================\n\nComments:\n- Thank you, worked great! How did you knew that was the problem? It isn't stated in the docs.\n- Tailwind `sticky` class is just css `position: sticky`. If you know css then you already know tailwind. More info about `position` here: developer.mozilla.org/en-US/docs/Web/CSS/position","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":160,"estimatedTokens":940}}690{"id":"stack-72276694","source":"stackoverflow","questionId":72276694,"title":"How to make an svg image as a background image with react and Tailwind css?","tags":["reactjs","svg","responsive-design","background-image","tailwind-css"],"text":"Title: How to make an svg image as a background image with react and Tailwind css?\nTags: reactjs, svg, responsive-design, background-image, tailwind-css\nSource: Stack Overflow\n\nQuestion:\ni am implementing a reponsive website with react and tailwind , i have an SVG image which i want to make it as a background image for a main tag but it doesn't work . I followed the tailwind docs and added this code to my taliwind.config.js\n\n```\ntheme: {\n extend: {\n backgroundImage: {\n 'hero-pattern': \"url('/public/background.svg)\"\n }\n }\n }\n```\n\nand using bg-hero-pattern does not display anything .\nI tried another option which is the style attribute in my tag it displays the image but it does not cover all the parent tag although i am using bg-cover and bg-no-repeat\nthis is my code :\n\n```\n\n \n {/* Content */}\n \n \n \n \n \n {/* */}\n \n \n```\n\ncan anyone help me please ?\n\n========================================\n\nTop Answer:\nThe simplest and best solution could be using an arbitrary value. You can do something like this\n\n\r\n\r\n\n```\n\n```\n\n\r\n\r\n\r\n\nYou can find more details about arbitrary values over here and you require tailwind version 3+ to use it.\n\n========================================\n\nCode:\n```text\ntheme: {\n extend: {\n backgroundImage: {\n 'hero-pattern': \"url('/public/background.svg)\"\n }\n }\n }\n```\n\n```text\n<main className=\"w-screen h-screen \">\n <div className=\"h-screen w-screen bg-no-repeat bg-cover\" \n style={{ backgroundImage: `url(${background})` }}>\n {/* Content */}\n \n <div className=\"px-4 py-6 sm:px-0\">\n <div className=\"border-4 border-dashed border-gray-200 rounded-lg h-96\"> \n </div>\n </div>\n {/* <!-- /End content --> */}\n </div>\n </main>\n```\n\n```text\ntheme: {\n extend: {\n backgroundImage:\n {\n 'hero_pattern': \"url('/public/background.svg)\"\n }\n }\n }\n```\n\n```text\n<div class=\"bg-hero_pattern\">\n ...\n ...\n</div>\n```\n\n```text\ntailwind.config.js\n```\n\n```html\n<div class=\"grid h-64 bg-gray-400 p-5\">\n <img src=\"/img/logo.svg\" class=\"col-start-1 row-start-1 self-center opacity-25\" alt=\"Tailwind Play\" />\n <div class=\"col-start-1 row-start-1\">\n <h1 class=\"text-2xl font-bold\">This is my heading</h1>\n </div>\n</div>\n```\n\n```text\ngrid\n```\n\n```text\nimg\n```\n\n```text\ndiv\n```\n\n```html\n<div className=\"bg-[url('../images/background-image.svg')]\">\n```\n\n========================================\n\nComments:\n- You have a stray ' in the example:`url('/public/background.svg)` -> `url(/public/background.svg)`\n- The problem that the image never fit or cover the parent div even with bg-cover\n- What is happening instead? Are you able to the svg image? If the svg has width and height inside the code then it will be a fixed size, like this play.tailwindcss.com/NSy0RGFr3v. But in the original example it has no width and height so essentially it is acting like `object-contain` and filling the space\n- The problem that the image never fit or cover the parent div even with bg-cover\n- You will find solution for this over here stackoverflow.com/questions/8200204/fit-background-image-to-‌​div\n- yes i did that but the image never fit all the parent div ther is always left space\n- Try to check whether the image is of complete resolution of 1920*1080 for laptop screen\n- so if it is not of complete resolution couldn't it be displayed even it becomes blurry ?\n- Here Resolution, i mean size of image If it's not proper size then it may not cover full div\n- thank you sir the problem was with the resolution i tried a bigger image and it worked\n- Happy to help you buddy","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":144,"estimatedTokens":920}}691{"id":"stack-70914182","source":"stackoverflow","questionId":70914182,"title":"How to generate font-size unit as em instead of rem in windicss?","tags":["css","tailwind-css","windicss"],"text":"Title: How to generate font-size unit as em instead of rem in windicss?\nTags: css, tailwind-css, windicss\nSource: Stack Overflow\n\nQuestion:\nUsing windicss with vuejs project, I found that its generating font-sizes as rem unit. e.g.\n\n```\nTest\n```\n\ngenerating css as\n\n```\n.text-sm {\n font-size: .875rem;\n line-height: 1.25rem;\n}\n```\n\nIs there any way to generate sizes as em? so `font-size: .875em`\n\n========================================\n\nTop Answer:\nIf it can help, you can override default values of `fontSize` and `spacing` in the file `tailwind.config.js`.\n\nAs other classes are based on `spacing` variable, they will also be updated :\n\n\r\n\r\n\n```\nextend: {\n fontSize: {\n xs: '0.75em' /* 12px */,\n sm: '0.875em' /* 14px */,\n md: '1em' /* 16px */,\n lg: '1.125em' /* 18px */,\n xl: '1.25em' /* 20px */,\n '2xl': '1.5em' /* 24px */,\n '3xl': '1.875em' /* 30px */,\n '4xl': '2.25em' /* 36px */,\n '5xl': '2.625em' /* 42px */,\n '6xl': '3em' /* 48px */,\n },\n spacing: {\n 0: '0em',\n 1: '0.25em',\n 2: '0.5em',\n 3: '0.75em',\n 4: '1em',\n 5: '1.25em',\n 6: '1.5em',\n 7: '1.75em',\n 8: '2em',\n 9: '2.25em',\n 10: '2.5em',\n 11: '2.75em',\n 12: '3em',\n 14: '3.5em',\n 16: '4em',\n 20: '5em',\n 24: '6em',\n 28: '7em',\n 32: '8em',\n 36: '9em',\n 40: '10em',\n 44: '11em',\n 48: '12em',\n 52: '13em',\n 56: '14em',\n 60: '15em',\n 64: '16em',\n 72: '18em',\n 80: '20em',\n 96: '24em',\n },\n }\n```\n\n========================================\n\nCode:\n```text\n<div class=\"text-sm\">Test</div>\n```\n\n```text\n.text-sm {\n font-size: .875rem;\n line-height: 1.25rem;\n}\n```\n\n```text\nfont-size: .875em\n```\n\n```css\nem:text-sm\n```\n\n```css\n.em\\:text-sm {\n font-size: 0.875em;\n line-height: 1.25em;\n}\n```\n\n```js\nconst colors = require('tailwindcss/colors')\n\n/// https://github.com/tailwindlabs/tailwindcss/discussions/3105\n\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n 'light-blue': colors.lightBlue,\n cyan: colors.cyan,\n },\n },\n },\n variants: {\n fontSize: ({ after }) => after(['em']),\n },\n plugins: [\n require('tailwindcss/plugin')(function({ addVariant }) {\n addVariant('em', ({ container }) => {\n container.walkRules(rule => {\n rule.selector = `.em\\\\:${rule.selector.slice(1)}`;\n rule.walkDecls((decl) => {\n decl.value = decl.value.replace('rem', 'em');\n });\n })\n })\n }),\n ],\n}\n```\n\n```text\nem\n```\n\n```text\nrem\n```\n\n```text\nem\n```\n\n```js\nextend: {\n fontSize: {\n xs: '0.75em' /* 12px */,\n sm: '0.875em' /* 14px */,\n md: '1em' /* 16px */,\n lg: '1.125em' /* 18px */,\n xl: '1.25em' /* 20px */,\n '2xl': '1.5em' /* 24px */,\n '3xl': '1.875em' /* 30px */,\n '4xl': '2.25em' /* 36px */,\n '5xl': '2.625em' /* 42px */,\n '6xl': '3em' /* 48px */,\n },\n spacing: {\n 0: '0em',\n 1: '0.25em',\n 2: '0.5em',\n 3: '0.75em',\n 4: '1em',\n 5: '1.25em',\n 6: '1.5em',\n 7: '1.75em',\n 8: '2em',\n 9: '2.25em',\n 10: '2.5em',\n 11: '2.75em',\n 12: '3em',\n 14: '3.5em',\n 16: '4em',\n 20: '5em',\n 24: '6em',\n 28: '7em',\n 32: '8em',\n 36: '9em',\n 40: '10em',\n 44: '11em',\n 48: '12em',\n 52: '13em',\n 56: '14em',\n 60: '15em',\n 64: '16em',\n 72: '18em',\n 80: '20em',\n 96: '24em',\n },\n }\n```\n\n```text\nfontSize\n```\n\n```text\nspacing\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nspacing\n```\n\n========================================\n\nComments:\n- I usually set the margin, padding, radius, etc. based on the font size. So it's better to use `em` especially if the page is responsive and there are multiple elements. Otherwise one needs to adjust the margin, padding, etc. individually on each element. This is so annoying. With this, one can control the children's size by the parent's font size. It's very handy.","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":223,"estimatedTokens":940}}692{"id":"stack-60471976","source":"stackoverflow","questionId":60471976,"title":"Bind multiple classes to a single variable","tags":["vue.js","tailwind-css"],"text":"Title: Bind multiple classes to a single variable\nTags: vue.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWhile using Tailwind with utility-first approach to css, I often find the need to bind multiple classes to a single variable.\n\nFor instance, to style an input form, I need to add `border-red`, `color-red`, etc if there is an error.\n\nIs there a nice and elegant way to express this in Vue instead of writing `v-bind:class=\"{ 'border-red': error, 'text-red': error }`?\n\n========================================\n\nTop Answer:\nAnother easy solution:\n\n```\n:class=\"error && 'border-red text-red'\"\n```\n\nor for if, else\n\n```\n:class=\"error ? 'border-red text-red' : 'border-green'\"\n```\n\nYou also can concatenate strings to classnames:\n\n```\n:class=\"'border-'+borderColor\"\n```\n\n========================================\n\nCode:\n```text\nborder-red\n```\n\n```text\ncolor-red\n```\n\n```text\nv-bind:class=\"{ 'border-red': error, 'text-red': error }\n```\n\n```text\n:class=\"{ 'border-red text-red': error }\"\n```\n\n```text\n:class=\"error && 'border-red text-red'\"\n```\n\n```text\n:class=\"error ? 'border-red text-red' : 'border-green'\"\n```\n\n```text\n:class=\"'border-'+borderColor\"\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":62,"estimatedTokens":291}}693{"id":"stack-70211161","source":"stackoverflow","questionId":70211161,"title":"hidden any element in mobile view and show in medium view tailwindcss","tags":["tailwind-css"],"text":"Title: hidden any element in mobile view and show in medium view tailwindcss\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI need to hide a element in the mobile view and show to the same element in medium view.\n\nI tried this,\n\n```\nHello\n\n```\n\nBut doesn't seem to work\n\n========================================\n\nTop Answer:\nBy default, Tailwind uses a **mobile-first** breakpoint system, similar to what you might be used to in other frameworks like Bootstrap.\n\n```\n// case 1\n\n// case 2\n\n```\n\nDetails:\nhttps://tailwindcss.com/docs/responsive-design#working-mobile-first\n\n========================================\n\nCode:\n```text\n<p classname=\"hidden md:visible\">Hello</p>\n```\n\n```html\n<p class=\"hidden md:block\">Text to hide on small screens</p>\n```\n\n```html\n<p class=\"invisible md:visible\">Text to hide on small screns</p>\n```\n\n```text\nmd:block\n```\n\n```text\nmd:visible\n```\n\n```text\nvisible\n```\n\n```text\ninvisible\n```\n\n```text\nhidden\n```\n\n```text\n// case 1\n<div class=\"hidden md:block\"></div>\n\n// case 2\n<div class=\"invisible md:visible\"></div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":73,"estimatedTokens":264}}694{"id":"stack-61932564","source":"stackoverflow","questionId":61932564,"title":"Dropup in TailwindCSS / AlpineJS","tags":["javascript","css","tailwind-css","alpine.js"],"text":"Title: Dropup in TailwindCSS / AlpineJS\nTags: javascript, css, tailwind-css, alpine.js\nSource: Stack Overflow\n\nQuestion:\nDoes anyone know how to build a 'dropup' in TailwindCSS /AlpineJS? I know how to build a dropdown but can't manage to make a dropup. \n\nMy dropdown:\n\n```\n\n \n \n \n \n \n \n \n \n \n John Doe\n \n\n \n View profile\n \n\n \n \n \n \n \n Your Profile\n Settings\n Sign out\n \n \n \n\n \n \n \n```\n\nhttps://jsfiddle.net/s4m6vea7/\n\nThanks!\n\n========================================\n\nCode:\n```text\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\">\n<script src=\"https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js\" defer></script>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\" />\n<meta charset=\"utf-8\" />\n\n <div class=\"flex-shrink-0 flex border-t border-gray-200 p-4\">\n <a href=\"#\" class=\"flex-shrink-0 group block\">\n <div class=\"flex items-center\">\n <div @click.away=\"open = false\" class=\"relative\" x-data=\"{ open: false }\">\n <div>\n <button @click=\"open = !open\" class=\"max-w-xs flex items-center text-sm rounded-full text-white focus:outline-none focus:shadow-solid transition ease-in-out duration-150\">\n <img class=\"inline-block h-8 w-8 rounded-full\" src=\"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\" alt=\"\">\n <div class=\"ml-3\">\n <p class=\"text-sm leading-5 font-medium text-gray-700 group-hover:text-gray-900\">\n John Doe\n </p>\n <p class=\"text-xs text-left leading-4 font-medium text-gray-500 group-hover:text-gray-700 transition ease-in-out duration-150\">\n View profile\n </p>\n </div> \n </button>\n </div>\n <div x-show=\"open\" x-transition:enter=\"transition ease-out duration-100\" x-transition:enter-start=\"transform opacity-0 scale-95\" x-transition:enter-end=\"transform opacity-100 scale-100\" x-transition:leave=\"transition ease-in duration-75\" x-transition:leave-start=\"transform opacity-100 scale-100\" x-transition:leave-end=\"transform opacity-0 scale-95\" class=\"origin-top-right absolute left-0 mt-2 -mr-1 w-48 rounded-md shadow-lg\">\n <div class=\"py-1 rounded-md bg-white shadow-xs relative\">\n <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150\">Your Profile</a>\n <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150\">Settings</a>\n <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150\">Sign out</a>\n </div>\n </div>\n </div>\n\n </div>\n </a>\n </div>\n```\n\n```text\nbottom-0\n```\n\n```text\nmb-12\n```\n\n```text\nbottom-0\n```\n\n========================================\n\nComments:\n- Just to avoid any confusion, could you define what you mean by \"dropup\", perhaps with an illustration or something.\n- Thanks for you reaction! Normally a dropdown is going down. I want the opposite: i.ytimg.com/vi/9u7Jk9dE8do/maxresdefault.jpg\n- This is awesome! Thank you Jacob for you help. Really appreciate it!","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":106,"estimatedTokens":876}}695{"id":"stack-48654765","source":"stackoverflow","questionId":48654765,"title":"Add TailwindCSS to Phoenix with Brunch","tags":["sass","elixir","phoenix-framework","brunch","tailwind-css"],"text":"Title: Add TailwindCSS to Phoenix with Brunch\nTags: sass, elixir, phoenix-framework, brunch, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm having trouble figuring out how to add npm packages which are not specifically built to be used with brunch to my elixir/phoenix project.\n\nOne thing I don't want to do is manually copy files from `node_modules/` to `vendor/`.\n\nIf anyone knows how to properly configure Brunch to use Tailwind in a Phoenix app, any help would be greatly appreciated.\n\n========================================\n\nTop Answer:\nFor Phoenix 1.4 I've made a blog post about how you can setup it. https://equimper.com/blog/how-to-setup-tailwindcss-in-phoenix-1.4 This is using webpack and postcss\n\nCreate project `mix phx.new myproject`\n\nGo in your assets `cd assets`\n\nAdd tailwind dependencies `yarn add -D tailwindcss`\n\nInit tailwind theme `./node_modules/.bin/tailwind init`\n\nAdd postcss dep `yarn add -D postcss-loader`\n\nCreate a file in `/assets` call `postcss-config.js` and add this code\n\n```\nmodule.exports = {\n plugins: [require('tailwindcss')('./tailwind.js'), require('autoprefixer')],\n}\n```\n\nInside your webpack config change\n\n```\nuse: [MiniCssExtractPlugin.loader, 'css-loader']\n```\n\nfor\n\n```\nuse: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']\n```\n\nFinally add those tailwind stuff in your app.css file\n\n```\n@tailwind preflight;\n@tailwind components;\n@tailwind utilities;\n```\n\n========================================\n\nCode:\n```text\nnode_modules/\n```\n\n```text\nvendor/\n```\n\n```bash\n$ npm install postcss-brunch tailwindcss --save-dev\n```\n\n```bash\n$ ./node_modules/.bin/tailwindcss init\n```\n\n```js\n// Configure your plugins\nplugins: {\n babel: {\n // Do not use ES6 compiler in vendor code\n ignore: [/vendor/]\n },\n postcss: {\n processors: [\n require('tailwindcss')('./tailwind.js')\n ]\n }\n},\n```\n\n```css\n@tailwind preflight;\n@tailwind utilities;\n```\n\n```js\nmodule.exports = {\n plugins: [require('tailwindcss')('./tailwind.js'), require('autoprefixer')],\n}\n```\n\n```js\nuse: [MiniCssExtractPlugin.loader, 'css-loader']\n```\n\n```js\nuse: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']\n```\n\n```css\n@tailwind preflight;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nmix phx.new myproject\n```\n\n```text\ncd assets\n```\n\n```text\nyarn add -D tailwindcss\n```\n\n```text\n./node_modules/.bin/tailwind init\n```\n\n```text\nyarn add -D postcss-loader\n```\n\n```text\n/assets\n```\n\n```text\npostcss-config.js\n```\n\n========================================\n\nComments:\n- mix phx.new defaults to using brunch. This is the simplest set of instructions.\n- While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review\n- Thank you @Dherik I just upload the essential part :) Thank you for the review","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":147,"estimatedTokens":735}}696{"id":"stack-79675495","source":"stackoverflow","questionId":79675495,"title":"Invalid PostCSS Plugin found using TailwindCSS 4 and Vitest","tags":["next.js","tailwind-css","vitest","tailwind-css-4"],"text":"Title: Invalid PostCSS Plugin found using TailwindCSS 4 and Vitest\nTags: next.js, tailwind-css, vitest, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI have a Next.js app that is running without any errors. However, I am using Vitest for my testing framework and when running a specific test (layout.test.tsx) it produces this error:\n\n```\nFAIL src/app/__tests__/layout.test.tsx [ src/app/__tests__/layout.test.tsx ]\nFailed to load PostCSS config: Failed to load PostCSS config (searchPath: /Users/joe/my-app): [TypeError] Invalid PostCSS Plugin found at: plugins[0]\n\n(@/Users/joe/my-app/postcss.config.mjs)\nTypeError: Invalid PostCSS Plugin found at: plugins[0]\n\n(@/Users/joe/my-app/postcss.config.mjs)\n at file:///Users/joe/my-app/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:11827:15\n at Array.forEach ()\n at plugins (file:///Users/joe/my-app/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:11809:10)\n at processResult (file:///Users/joe/my-app/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:11876:20)\n Plugin: vite:css\n File: /Users/joe/my-app/src/app/globals.css\n```\n\nI have no idea what is causing this error and have search all over the internet and followed various suggestions.\nHere are some of the key files of the project:\n\n**postcss.config.mjs**\n\n```\nconst config = {\n plugins: [\"@tailwindcss/postcss\"],\n};\n\nexport default config;\n```\n\n**vitest.config.mjs**\n\n```\nimport { defineConfig } from \"vitest/config\";\nimport react from \"@vitejs/plugin-react\";\nimport tsconfigPaths from \"vite-tsconfig-paths\";\n\nexport default defineConfig({\n plugins: [tsconfigPaths(), react()],\n test: {\n environment: \"jsdom\",\n globals: true,\n setupFiles: \"./vitest.setup.mjs\",\n },\n});\n```\n\n**global.css**\n\n```\n@import \"tailwindcss\";\n\n:root {\n --background: #ffffff;\n --foreground: #171717;\n}\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --font-sans: var(--font-geist-sans);\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --background: #0a0a0a;\n --foreground: #ededed;\n }\n}\n\nbody {\n background: var(--background);\n color: var(--foreground);\n font-family: Arial, Helvetica, sans-serif;\n}\n```\n\n**layout.tsx**\n\n```\nimport type { Metadata } from \"next\";\nimport { Geist } from \"next/font/google\";\nimport \"./globals.css\";\n\nconst geistSans = Geist({\n variable: \"--font-geist-sans\",\n subsets: [\"latin\"],\n});\n\nexport const metadata: Metadata = {\n title: \"Create Next App\",\n description: \"Generated by create next app\",\n};\n\nexport default function RootLayout({\n children,\n}: Readonly) {\n return (\n \n {children}\n \n );\n}\n```\n\n**layout.test.tsx**\n\n```\nimport { render, screen } from \"@testing-library/react\";\nimport RootLayout from \"../layout\";\n\ndescribe(\"\", () => {\n describe(\"WHEN the component is rendered\", () => {\n beforeEach(() => {\n render(\n \n Some content\n ,\n );\n });\n\n test(\"THEN the child component is displayed\", () => {\n const content = screen.getByText(\"Some content\");\n expect(content).toBeVisible();\n });\n });\n});\n```\n\n========================================\n\nCode:\n```text\nFAIL src/app/__tests__/layout.test.tsx [ src/app/__tests__/layout.test.tsx ]\nFailed to load PostCSS config: Failed to load PostCSS config (searchPath: /Users/joe/my-app): [TypeError] Invalid PostCSS Plugin found at: plugins[0]\n\n(@/Users/joe/my-app/postcss.config.mjs)\nTypeError: Invalid PostCSS Plugin found at: plugins[0]\n\n(@/Users/joe/my-app/postcss.config.mjs)\n at file:///Users/joe/my-app/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:11827:15\n at Array.forEach (<anonymous>)\n at plugins (file:///Users/joe/my-app/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:11809:10)\n at processResult (file:///Users/joe/my-app/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:11876:20)\n Plugin: vite:css\n File: /Users/joe/my-app/src/app/globals.css\n```\n\n```js\nconst config = {\n plugins: [\"@tailwindcss/postcss\"],\n};\n\nexport default config;\n```\n\n```js\nimport { defineConfig } from \"vitest/config\";\nimport react from \"@vitejs/plugin-react\";\nimport tsconfigPaths from \"vite-tsconfig-paths\";\n\nexport default defineConfig({\n plugins: [tsconfigPaths(), react()],\n test: {\n environment: \"jsdom\",\n globals: true,\n setupFiles: \"./vitest.setup.mjs\",\n },\n});\n```\n\n```css\n@import \"tailwindcss\";\n\n:root {\n --background: #ffffff;\n --foreground: #171717;\n}\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --font-sans: var(--font-geist-sans);\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --background: #0a0a0a;\n --foreground: #ededed;\n }\n}\n\nbody {\n background: var(--background);\n color: var(--foreground);\n font-family: Arial, Helvetica, sans-serif;\n}\n```\n\n```js\nimport type { Metadata } from \"next\";\nimport { Geist } from \"next/font/google\";\nimport \"./globals.css\";\n\nconst geistSans = Geist({\n variable: \"--font-geist-sans\",\n subsets: [\"latin\"],\n});\n\nexport const metadata: Metadata = {\n title: \"Create Next App\",\n description: \"Generated by create next app\",\n};\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode;\n}>) {\n return (\n <html lang=\"en\">\n <body className={`${geistSans.variable} antialiased`}>{children}</body>\n </html>\n );\n}\n```\n\n```js\nimport { render, screen } from \"@testing-library/react\";\nimport RootLayout from \"../layout\";\n\ndescribe(\"<RootLayout />\", () => {\n describe(\"WHEN the component is rendered\", () => {\n beforeEach(() => {\n render(\n <RootLayout>\n <div>Some content</div>\n </RootLayout>,\n );\n });\n\n test(\"THEN the child component is displayed\", () => {\n const content = screen.getByText(\"Some content\");\n expect(content).toBeVisible();\n });\n });\n});\n```\n\n```js\nimport tailwind from \"@tailwindcss/postcss\";\n\nconst config = {\n plugins: [\n tailwind(),\n ],\n};\n\nexport default config;\n```\n\n```js\nconst config = {\n plugins: {\n \"@tailwindcss/postcss\": {},\n },\n};\n\nexport default config;\n```\n\n```json\n{\n \"postcss\": {\n \"plugins\": {\n \"@tailwindcss/postcss\": {}\n }\n }\n}\n```\n\n```text\napp-tw-empty/js\n```\n\n```text\napp-tw-empty/ts\n```\n\n```text\napp-tw/js\n```\n\n```text\napp-tw/ts\n```\n\n```text\napp-tw/js\n```\n\n```text\napp-tw/ts\n```\n\n```text\n.mjs\n```\n\n```text\nmodule\n```\n\n```text\npackage.json\n```\n\n```text\npostcss.config.mjs\n```\n\n```text\npackage.json\n```\n\n========================================\n\nComments:\n- * PR #80798 - Fix remaining PostCSS config issues (-up to #77376)\n- I changed the `postcss.config.mjs` file to the above, but now this error is thrown: FAIL src/app/__tests__/layout.test.tsx [ src/app/__tests__/layout.test.tsx ] TypeError: (0 , Geist) is not a function ❯ src/app/layout.tsx:5:19 3| import \"./globals.css\"; 4| 5| const geistSans = Geist({ | ^ 6| variable: \"--font-geist-sans\", 7| subsets: [\"latin\"], ❯ src/app/__tests__/layout.test.tsx:2:1\n- Okay, that's a good sign, it means moved past the original issue. I see a question related to the new error message: stackoverflow.com/a/76933183/15167500 and github.com/vercel/next.js/discussions/75610 (Sorry about the links, I'm usually more thorough. If I have time tomorrow, I'll take another look.)\n- Ah great - thanks so much, Mocking the next/fonts/google module solved this.","metadata":{"transformedAt":"2026-08-18T18:33:42.938Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":20,"totalLines":338,"estimatedTokens":1805}}697{"id":"stack-68252085","source":"stackoverflow","questionId":68252085,"title":"Set min-width using tailwind spacing units without global config?","tags":["tailwind-css"],"text":"Title: Set min-width using tailwind spacing units without global config?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIs there a way to apply spacified spacing units from `tailwind.config.js` to e.g. `min-width` other than by global config? That's as far I can see the only way but would mean to duplicate all (necessary) spacing units which is from my pov a potential error source as each relevant space must get duplicated then.\n\n```\n// Dummy code explaining what I want to achieve\n.myButton{\n @apply bg-red-100 w-auto;\n \n min-width: @apply w-11 // Not working just for theoretical explanation \n \n}\n```\n\n========================================\n\nTop Answer:\n`min-w-[theme('spacing[11]')]` also works, tested in Tailwind v3.\n\n========================================\n\nCode:\n```css\n// Dummy code explaining what I want to achieve\n.myButton{\n @apply bg-red-100 w-auto;\n \n min-width: @apply w-11 // Not working just for theoretical explanation \n \n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmin-width\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n minWidth: {\n 11: '2.75rem'\n }\n }\n }\n}\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n minWidth: theme => ({\n 11: theme('spacing[11]')\n })\n }\n }\n}\n```\n\n```text\n.myButton{\n @apply bg-red-100 w-auto;\n min-width: theme('spacing[11]'); // 2.75rem\n}\n```\n\n```text\nmodule.exports = {\n mode: 'jit'\n}\n```\n\n```text\n<button class=\"myButton min-w-[2.75rem]\">My Button</button>\n<button class=\"myButton min-w-[197px]\">My Button</button>\n```\n\n```text\n.min-w-\\[2\\.75rem\\] {\n min-width: 2.75rem;\n}\n.min-w-\\[197px\\] {\n min-width: 197px;\n}\n```\n\n```text\nmin-w-11\n```\n\n```text\nmin-width: 2.75rem\n```\n\n```text\n11\n```\n\n```text\n197px\n```\n\n```text\nmin-w-11\n```\n\n```text\nmin-width: 197px;\n```\n\n```text\ntheme()\n```\n\n```text\ntheme()\n```\n\n```text\nmin-w-[theme('spacing[11]')]\n```\n\n========================================\n\nComments:\n- Thanks a lot @Ihar Aliakseyenka `min-width: theme('spacing[11]');`was exactly what I was looking for. Just figured out also `min-width: theme('spacing.11');` is working\n- True but I feel little bit safer as it will not work with dotted values like `theme('spacing.2.5')`. Like it more universal","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":18,"totalLines":135,"estimatedTokens":560}}698{"id":"stack-75169839","source":"stackoverflow","questionId":75169839,"title":"Progressively Replacing bulma with tailwind","tags":["css","tailwind-css"],"text":"Title: Progressively Replacing bulma with tailwind\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have web projects using Bulma that I want to migrate to Tailwind. My understanding of CSS frameworks isn't deep, but the first strategy I thought of is to introduce tailwind without removing bulma and incrementally replace various components. Once everything is replaced, I can remove bulma. Is that a viable strategy? Are there any gotchas I need to be aware of?\n\n========================================\n\nCode:\n```text\nblock\n```\n\n```text\nmargin\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":17,"estimatedTokens":141}}699{"id":"stack-79272234","source":"stackoverflow","questionId":79272234,"title":"error in react app vercel deployment. plugins: [require(\"tailwindcss-animate\")] ERROR: ReferenceError: require is not defined","tags":["reactjs","deployment","tailwind-css","vercel","shadcnui"],"text":"Title: error in react app vercel deployment. plugins: [require(\"tailwindcss-animate\")] ERROR: ReferenceError: require is not defined\nTags: reactjs, deployment, tailwind-css, vercel, shadcnui\nSource: Stack Overflow\n\nQuestion:\ni am getting error in tailwind.config.json file in deployment on vercel but it work well in local.\n\ntailwind.config.json\n\n```\nexport default {\n // ...\n plugins: [require(\"tailwindcss-animate\")],\n```\n\nif i comment this line and try to deploy this work properly but animation not work.\n\non vercel i am getting following error:\n\n```\nReferenceError: require is not defined\n at file:///vercel/path0/client/tailwind.config.js:56:12\n at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)\n at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)\n at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)\n at Module._compile (node:internal/modules/cjs/loader:1547:5)\n at Object..js (node:internal/modules/cjs/loader:1677:16)\n at Module.load (node:internal/modules/cjs/loader:1318:32)\n at Function._load (node:internal/modules/cjs/loader:1128:12)\n at TracingChannel.traceSync (node:diagnostics_channel:322:14)\n at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)\n```\n\ni am usign vite + react + TS.\n\ni have tailwindcss-animate dependency in package.json file.\n\n========================================\n\nCode:\n```text\nexport default {\n // ...\n plugins: [require(\"tailwindcss-animate\")],\n```\n\n```text\nReferenceError: require is not defined\n at file:///vercel/path0/client/tailwind.config.js:56:12\n at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)\n at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)\n at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)\n at Module._compile (node:internal/modules/cjs/loader:1547:5)\n at Object..js (node:internal/modules/cjs/loader:1677:16)\n at Module.load (node:internal/modules/cjs/loader:1318:32)\n at Function._load (node:internal/modules/cjs/loader:1128:12)\n at TracingChannel.traceSync (node:diagnostics_channel:322:14)\n at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)\n```\n\n```text\nimport * as tailwindAnimate from \"tailwindcss-animate\"\n\nexport default {\n // ...\n plugins: [tailwindAnimate],\n```\n\n```text\nimport\n```\n\n========================================\n\nComments:\n- Wonderful... Great to know in the era of AI still people consider stackoverflow. the legacy of developers :)\n- was the same problem for auto generated site from Bolt AI service, thanks it helped.","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":77,"estimatedTokens":645}}700{"id":"stack-76288042","source":"stackoverflow","questionId":76288042,"title":"How can I add more than 3 stops for Tailwind gradient","tags":["tailwind-css"],"text":"Title: How can I add more than 3 stops for Tailwind gradient\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThere are three gradient stops- **from-***, **via-*** and **to-*** are available as Tailwind utilities. I need 1 more gradient stop like **via2-*** which will support Tailwind's color and percentage. Is it a good idea when I need a gradient color with four stops?\n\n========================================\n\nTop Answer:\narbitrary value class:\n\n```\n\n```\n\n========================================\n\nCode:\n```js\ntailwind.config = {\n theme: {\n extend: {\n backgroundImage: ({ theme }) => ({\n foo: `linear-gradient(${theme('colors.blue.500')},${theme('colors.green.500')},${theme('colors.red.500')},${theme('colors.yellow.500')})`,\n }),\n },\n },\n};\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"bg-foo h-40 w-40\">\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"bg-[linear-gradient(theme(colors.blue.500),theme(colors.green.500),theme(colors.red.500),theme(colors.yellow.500))] h-40 w-40\">\n```\n\n```text\nvia2-\n```\n\n```text\nfrom-\n```\n\n```text\nvia-\n```\n\n```text\nto-\n```\n\n```html\n<div class=\"bg-[linear-gradient(266deg,rgba(175,170,195,1)0%,rgba(175,170,195,0)22%,rgba(175,170,195,0)78%,rgba(175,170,195,1)100%)]\"></div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":62,"estimatedTokens":328}}701{"id":"stack-77813026","source":"stackoverflow","questionId":77813026,"title":"How to properly style shadcn/ui library Button component?","tags":["reactjs","typescript","next.js","tailwind-css","shadcnui"],"text":"Title: How to properly style shadcn/ui library Button component?\nTags: reactjs, typescript, next.js, tailwind-css, shadcnui\nSource: Stack Overflow\n\nQuestion:\nI'm working on project using shadcn/ui library. How do I customize it properly for my needs? Let's say, I need `extra large red rounded Button` in my project for CTA. What are the best practice?\n\nHere is the shadcn/ui `` component:\n\n```\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300\",\n {\n variants: {\n variant: {\n default: \"bg-zinc-900 text-zinc-50 hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90\",\n destructive:\n \"bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90\",\n outline:\n \"border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50\",\n secondary:\n \"bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80\",\n ghost: \"hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50\",\n link: \"text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n \n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n```\n\n- Do I need to write a new component on top of this, like that?\n\n```\nimport React from 'react';\nimport { Button } from '@/components/ui/shadcn/button';\n\ntype StyledButtonProps = React.ComponentProps\n\nfunction StyledButton({...props }: StyledButtonProps) {\n return (\n \n {props.children}\n \n );\n}\n\nexport default StyledButton;\n```\n\n- Or I can just add new variant and size in already existed component?\n\n- Or there is some other way to do that?\n\nI've tried:\n\n- to add new variant and size in already existed component.\n\n- And create a new component on top of shadcn/ui component.\n\n========================================\n\nCode:\n```text\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300\",\n {\n variants: {\n variant: {\n default: \"bg-zinc-900 text-zinc-50 hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90\",\n destructive:\n \"bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90\",\n outline:\n \"border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50\",\n secondary:\n \"bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80\",\n ghost: \"hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50\",\n link: \"text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n```\n\n```text\nimport React from 'react';\nimport { Button } from '@/components/ui/shadcn/button';\n\ntype StyledButtonProps = React.ComponentProps<typeof Button>\n\nfunction StyledButton({...props }: StyledButtonProps) {\n return (\n <Button {...props} className='bg-red-500'>\n {props.children}\n </Button>\n );\n}\n\nexport default StyledButton;\n```\n\n```text\nextra large red rounded Button\n```\n\n```text\n<Button>\n```\n\n```js\nconst buttonVariants = cva(\n \"…\",\n {\n variants: {\n // …\n size: {\n // …\n xl: 'h-14 rounded-2xl p-10' // Adjust classes to taste\n },\n },\n // …\n }\n)\n```\n\n```text\n<Button variant=\"destructive\" size=\"xl\">\n```\n\n```text\ndestructive\n```\n\n```text\nvariant\n```\n\n```text\nxl\n```\n\n```text\nsize\n```\n\n```text\ncva()\n```\n\n========================================\n\nComments:\n- So, it is good practice to just add or change variants inside shadcn component? What about Radix components for example or let's say Mantine, is this approach applied to them as well?\n- It is good practice to just add or change variants inside the shadcn component. This approach does not apply to Radix or Mantine.","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":225,"estimatedTokens":1540}}702{"id":"stack-76729480","source":"stackoverflow","questionId":76729480,"title":"Django : Tailwind styling not applied to template variables with widget attributes","tags":["css","django","tailwind-css","daisyui"],"text":"Title: Django : Tailwind styling not applied to template variables with widget attributes\nTags: css, django, tailwind-css, daisyui\nSource: Stack Overflow\n\nQuestion:\nI'm trying to apply daisyUI styling in my django web-app project, and I'm note sure to understand what's happening with the styling : in my case, I try to add some daisyUI styling to an input text field generated dynamically by a django form :\n\n```\n#forms.py\n\nclass ProductForm(forms.ModelForm):\n class Meta:\n model = Product\n fields = '__all__'\n widgets = {\n 'title': forms.TextInput(attrs={'class': 'form-control input input-primary w-full max-w-xs', 'placeholder':'Title'}),\n 'description': forms.Textarea(attrs={'class': 'textarea textarea-primary w-full'})\n }\n...\n```\n\nregarding this daisyUI docs page, **I should have a rounded bordered input field** (same idea with textarea).\n\nAdding `{{form.title}}` inside a form tag in my template, Here is what it looks like :\nwhat I get vs. what I want.\n\nThe styling seems to be overridden somewhere but I'm unable to determine where that comes from...\n\nI got the screenshot of \"what I want\" using my lines of code with this tailwind-play tool\n\nMore informations that could be useful :\n\n- Locally on my computer, I installed django-browser-reload.\n\n- My tailwind.config.js file looks like this :\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"../**/templates/**/*.html\"],\n theme: {\n extend: {},\n },\n daisyui: {\n themes: ['light', 'dark'],\n },\n plugins: [require(\"@tailwindcss/typography\"), require(\"daisyui\")],\n}\n```\n\nI did try to rerun `npm run tailwind-watch`, refresh the web page using `cmd+shift+R` and rerun 'python manage.py runserver` every time I made some changes to see if the styling would be applied correctly\n\nI also try to use this pre-created django project (which is a nice initiative btw !) and edit the template, adding a form, and the same styling issue appear..\n\nWhen looking for some similar issues (like this one) their styling problems seem to have their origin in the use of **tailwind form plugin. But in my case I'm not using it..!**\n\nAny idea where this problem may come from ?\n\n(I hope my explanations were clear enough as I don't have a developer background and my \"most used\" programming language is python so far)\n\nThank you in advance for your kind answers and your help 🙏\n\n========================================\n\nTop Answer:\nAfter making a few tests, I realized that the issue comes from the fact that when running Django, somehow **the class attributes associated with my form fields** (and supposed to be tailwind styling classes) **don't end up in the final output css file** built when running `npm tailwind-watch`..\n\nSo I guess that since those particular class attributes are rendered dynamically by Django -> they don't end up being \"watched\" by the tailwind compiler, and the associated style is not saved in the output css file.\n\nAnyways, all of these explanations are maybe a bit confusing because I'm not confortable with all the concepts involved here and I'm saying what I believe I understood. *If anyone has a better understanding, having faced the same issue, please contribute by answering/commenting with some informations.* 🙏✌️\n\n### Finally, here is the trick I used to get my styling to be saved in the tailwind css output :\n\n**I added a hidden `` tag with the same attributes classes in the widget elements directly in the template.**\n\n```\n\n```\n\nI will edit the title of my initial question to make it clearer since my problem has not really anything to do with DaisyUI\n\n========================================\n\nCode:\n```py\n#forms.py\n\nclass ProductForm(forms.ModelForm):\n class Meta:\n model = Product\n fields = '__all__'\n widgets = {\n 'title': forms.TextInput(attrs={'class': 'form-control input input-primary w-full max-w-xs', 'placeholder':'Title'}),\n 'description': forms.Textarea(attrs={'class': 'textarea textarea-primary w-full'})\n }\n...\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"../**/templates/**/*.html\"],\n theme: {\n extend: {},\n },\n daisyui: {\n themes: ['light', 'dark'],\n },\n plugins: [require(\"@tailwindcss/typography\"), require(\"daisyui\")],\n}\n```\n\n```text\n{{form.title}}\n```\n\n```text\nnpm run tailwind-watch\n```\n\n```text\ncmd+shift+R\n```\n\n```text\nmodule.exports = {\n content: [\n '../templates/**/*.html',\n ],\n theme: {},\n plugins: [\n require('@tailwindcss/forms'),\n require('@tailwindcss/typography'),\n require('@tailwindcss/line-clamp'),\n require('@tailwindcss/aspect-ratio'),\n require('daisyui'),\n ],\n daisyui: {},\n safelist: [\n 'alert-info',\n 'alert-success',\n 'alert-warning',\n 'alert-error',\n ],\n}\n```\n\n```text\n<div class=\"hidden form-control input input-primary w-full max-w-xs\"></div>\n```\n\n```text\nnpm tailwind-watch\n```\n\n```text\n<div>\n```\n\n========================================\n\nComments:\n- Thank you for your response, it's clearly a better way to address the described issue =)","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":163,"estimatedTokens":1263}}703{"id":"stack-79386725","source":"stackoverflow","questionId":79386725,"title":"How `@variant dark` can be combined with `@theme` in a CSS-first configuration to override dark mode colors","tags":["css","tailwind-css","tailwind-css-4"],"text":"Title: How `@variant dark` can be combined with `@theme` in a CSS-first configuration to override dark mode colors\nTags: css, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nTailwindCSS v4 has changed significantly the light/dark theme design due to the removal of `tailwind.config.js` file.\nIn TailwindCSS v3 this is how I changed the custom CSS properties depending on the theme:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 4%;\n --foreground: 0 0% 98%;\n }\n .dark {\n --background: 0 0% 98%;\n --foreground: 0 0% 4%;\n }\n}\n```\n\nHowever, in TailwindCSS v4, the `@theme`, `@variant` and `@custom-variant` keywords have been introduced.\nI have read the docs and tried to use them for getting the same result, for example: **(This does NOT work)**\n\n```\n@import \"tailwindcss\";\n@import \"@fontsource-variable/montserrat\";\n\n@theme {\n --color-foreground: 0 0% 8%;\n --color-background: 0 0% 98%;\n}\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@variant dark {\n @theme {\n --color-foreground: 0 0% 98%;\n --color-background: 0 0% 3.9%;\n }\n}\n```\n\nWhich is the correct way of doing this in TailwindCSS v4?\n\nAdding custom variants docs\n\n========================================\n\nTop Answer:\nFirst of all, `@theme` is only needed once globally. After that, `@theme` provides global CSS variables that you can override:\n\n**input.css** (WARNING: this is still invalid CSS, but the explanation of the example continues)\n\n```\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-foreground: 0 0% 8%;\n --color-background: 0 0% 98%;\n}\n\n@variant dark {\n --color-foreground: 0 0% 98%;\n --color-background: 0 0% 3.9%;\n}\n```\n\nA CSS selector replaces `@variant dark`; in our case, the compiled CSS looks like this:\n\n**Generated CSS**\n\n```\n:root, :host {\n --color-foreground: 0 0% 8%;\n --color-background: 0 0% 98%;\n}\n\n&:where(.dark, .dark *) {\n --color-foreground: 0 0% 98%;\n --color-background: 0 0% 3.9%;\n}\n```\n\nIt's clear that the CSS selector is invalid because the `&` requires a parent declaration, for example like this:\n\n**input.css** (Valid, usable example)\n\n```\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-foreground: 0 0% 8%;\n --color-background: 0 0% 98%;\n}\n\n:root, :host {\n @variant dark {\n --color-foreground: 0 0% 98%;\n --color-background: 0 0% 3.9%;\n }\n}\n```\n\n**Generated CSS**\n\n```\n:root, :host {\n --color-foreground: 0 0% 8%;\n --color-background: 0 0% 98%;\n\n &:where(.dark, .dark *) {\n --color-foreground: 0 0% 98%;\n --color-background: 0 0% 3.9%;\n }\n}\n```\n\nReferences:\n\n- How to override theme variables in TailwindCSS v4 - `@theme` vs `@layer theme` vs `:root`\n\n- When should I use `*` and when should I use `:root, :host` as the parent selector?\n\n- Should I use `@theme` or `@theme inline`?\n\n- How can I safely introduce the use of `light-dark()` without increasing the minimum browser version requirement?\n\n### Example for more themes\n\n- How to use custom color themes (e.g. dark or more) in TailwindCSS v4\n\nIt's always necessary to declare the colors in `@theme`, and then you can override them with CSS using the appropriate selectors for a specific theme.\n\nFor a more consistent declaration, I always recommend using `@layer theme`, but it's not mandatory. However, in that case, unlayered CSS will always have higher specificity than any layer.\n\n```\nlet currentTheme;\nconst body = document.body;\n\nfunction setLightTheme() {\n body.setAttribute('data-theme', 'light'); // not declared in style thats default\n currentTheme = 'light';\n}\n\nfunction setDarkTheme() {\n body.setAttribute('data-theme', 'dark');\n currentTheme = 'dark';\n}\n\nfunction setCoffeeTheme() {\n body.setAttribute('data-theme', 'coffee');\n currentTheme = 'coffee';\n}\n\nfunction toggleTheme() {\n if (currentTheme === 'light') {\n setDarkTheme(); // Switch to dark theme\n } else if (currentTheme === 'dark') {\n setCoffeeTheme(); // Switch to coffee theme\n } else {\n setLightTheme(); // Switch to light theme\n }\n}\n\n// This way, we can set themes based on custom parameters. For example, you can take into account the browser's preferred light/dark mode, the favorite theme saved by a logged-in user, etc.\nsetLightTheme(); // Set light theme first time\n```\n\n```\n\n@theme {\n --color-foreground: hsl(0 0% 8%);\n --color-background: hsl(0 0% 98%);\n}\n@layer theme {\n [data-theme='dark'] {\n --color-foreground: hsl(0 0% 98%);\n --color-background: hsl(0 0% 3.9%);\n }\n [data-theme='coffee'] {\n --color-foreground: hsl(30 50% 60%);\n --color-background: hsl(30 30% 20%);\n }\n}\n\n \n Toggle light/dark/coffee mode\n \n \n This is a themed paragraph. The theme changes dynamically.\n \n\n```\n\nAnd with `@variant` instead of CSS selectors:\n\n```\nlet currentTheme;\nconst body = document.body;\n\nfunction setLightTheme() {\n body.setAttribute('data-theme', 'light'); // not declared in style thats default\n currentTheme = 'light';\n}\n\nfunction setDarkTheme() {\n body.setAttribute('data-theme', 'dark');\n currentTheme = 'dark';\n}\n\nfunction setCoffeeTheme() {\n body.setAttribute('data-theme', 'coffee');\n currentTheme = 'coffee';\n}\n\nfunction toggleTheme() {\n if (currentTheme === 'light') {\n setDarkTheme(); // Switch to dark theme\n } else if (currentTheme === 'dark') {\n setCoffeeTheme(); // Switch to coffee theme\n } else {\n setLightTheme(); // Switch to light theme\n }\n}\n\n// This way, we can set themes based on custom parameters. For example, you can take into account the browser's preferred light/dark mode, the favorite theme saved by a logged-in user, etc.\nsetLightTheme(); // Set light theme first time\n```\n\n```\n\n@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));\n@custom-variant coffee (&:where([data-theme=coffee], [data-theme=coffee] *));\n\n@theme {\n --color-foreground: hsl(0 0% 8%);\n --color-background: hsl(0 0% 98%);\n}\n@layer theme {\n * {\n @variant dark {\n --color-foreground: hsl(0 0% 98%);\n --color-background: hsl(0 0% 3.9%);\n }\n @variant coffee {\n --color-foreground: hsl(30 50% 60%);\n --color-background: hsl(30 30% 20%);\n }\n }\n}\n\n \n Toggle light/dark/coffee mode\n \n \n This is a themed paragraph. The theme changes dynamically.\n \n\n```\n\n========================================\n\nCode:\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 4%;\n --foreground: 0 0% 98%;\n }\n .dark {\n --background: 0 0% 98%;\n --foreground: 0 0% 4%;\n }\n}\n```\n\n```css\n@import \"tailwindcss\";\n@import \"@fontsource-variable/montserrat\";\n\n@theme {\n --color-foreground: 0 0% 8%;\n --color-background: 0 0% 98%;\n}\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@variant dark {\n @theme {\n --color-foreground: 0 0% 98%;\n --color-background: 0 0% 3.9%;\n }\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@theme\n```\n\n```text\n@variant\n```\n\n```text\n@custom-variant\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n --color-foreground: var(--theme-color-foreground);\n --color-background: var(--theme-color-background);\n}\n\n@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));\n\n@layer base {\n [data-theme=\"light\"] {\n --theme-color-foreground: hsl(0 0% 8%);\n --theme-color-background: hsl(0 0% 98%);\n }\n\n [data-theme=\"dark\"] {\n --theme-color-foreground: hsl(0 0% 98%);\n --theme-color-background: hsl(0 0% 3.9%);\n }\n}\n```\n\n```text\ndata-theme\n```\n\n```css\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-foreground: 0 0% 8%;\n --color-background: 0 0% 98%;\n}\n\n@variant dark {\n --color-foreground: 0 0% 98%;\n --color-background: 0 0% 3.9%;\n}\n```\n\n```css\n:root, :host {\n --color-foreground: 0 0% 8%;\n --color-background: 0 0% 98%;\n}\n\n&:where(.dark, .dark *) {\n --color-foreground: 0 0% 98%;\n --color-background: 0 0% 3.9%;\n}\n```\n\n```css\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-foreground: 0 0% 8%;\n --color-background: 0 0% 98%;\n}\n\n:root, :host {\n @variant dark {\n --color-foreground: 0 0% 98%;\n --color-background: 0 0% 3.9%;\n }\n}\n```\n\n```css\n:root, :host {\n --color-foreground: 0 0% 8%;\n --color-background: 0 0% 98%;\n\n &:where(.dark, .dark *) {\n --color-foreground: 0 0% 98%;\n --color-background: 0 0% 3.9%;\n }\n}\n```\n\n```js\nlet currentTheme;\nconst body = document.body;\n\nfunction setLightTheme() {\n body.setAttribute('data-theme', 'light'); // not declared in style thats default\n currentTheme = 'light';\n}\n\nfunction setDarkTheme() {\n body.setAttribute('data-theme', 'dark');\n currentTheme = 'dark';\n}\n\nfunction setCoffeeTheme() {\n body.setAttribute('data-theme', 'coffee');\n currentTheme = 'coffee';\n}\n\nfunction toggleTheme() {\n if (currentTheme === 'light') {\n setDarkTheme(); // Switch to dark theme\n } else if (currentTheme === 'dark') {\n setCoffeeTheme(); // Switch to coffee theme\n } else {\n setLightTheme(); // Switch to light theme\n }\n}\n\n// This way, we can set themes based on custom parameters. For example, you can take into account the browser's preferred light/dark mode, the favorite theme saved by a logged-in user, etc.\nsetLightTheme(); // Set light theme first time\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n\n<style type=\"text/tailwindcss\" id=\"theme-style\">\n@theme {\n --color-foreground: hsl(0 0% 8%);\n --color-background: hsl(0 0% 98%);\n}\n@layer theme {\n [data-theme='dark'] {\n --color-foreground: hsl(0 0% 98%);\n --color-background: hsl(0 0% 3.9%);\n }\n [data-theme='coffee'] {\n --color-foreground: hsl(30 50% 60%);\n --color-background: hsl(30 30% 20%);\n }\n}\n</style>\n\n<div class=\"flex flex-col gap-4 m-4\">\n <button\n class=\"px-4 py-2 rounded-lg border bg-background text-foreground cursor-pointer\"\n onclick=\"toggleTheme()\"\n >\n Toggle light/dark/coffee mode\n </button>\n <p class=\"bg-background text-foreground p-4 rounded-lg\">\n This is a themed paragraph. The theme changes dynamically.\n </p>\n</div>\n```\n\n```js\nlet currentTheme;\nconst body = document.body;\n\nfunction setLightTheme() {\n body.setAttribute('data-theme', 'light'); // not declared in style thats default\n currentTheme = 'light';\n}\n\nfunction setDarkTheme() {\n body.setAttribute('data-theme', 'dark');\n currentTheme = 'dark';\n}\n\nfunction setCoffeeTheme() {\n body.setAttribute('data-theme', 'coffee');\n currentTheme = 'coffee';\n}\n\nfunction toggleTheme() {\n if (currentTheme === 'light') {\n setDarkTheme(); // Switch to dark theme\n } else if (currentTheme === 'dark') {\n setCoffeeTheme(); // Switch to coffee theme\n } else {\n setLightTheme(); // Switch to light theme\n }\n}\n\n// This way, we can set themes based on custom parameters. For example, you can take into account the browser's preferred light/dark mode, the favorite theme saved by a logged-in user, etc.\nsetLightTheme(); // Set light theme first time\n```\n\n```html\n<script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script>\n\n<style type=\"text/tailwindcss\" id=\"theme-style\">\n@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));\n@custom-variant coffee (&:where([data-theme=coffee], [data-theme=coffee] *));\n\n@theme {\n --color-foreground: hsl(0 0% 8%);\n --color-background: hsl(0 0% 98%);\n}\n@layer theme {\n * {\n @variant dark {\n --color-foreground: hsl(0 0% 98%);\n --color-background: hsl(0 0% 3.9%);\n }\n @variant coffee {\n --color-foreground: hsl(30 50% 60%);\n --color-background: hsl(30 30% 20%);\n }\n }\n}\n</style>\n\n<div class=\"flex flex-col gap-4 m-4\">\n <button\n class=\"px-4 py-2 rounded-lg border bg-background text-foreground cursor-pointer\"\n onclick=\"toggleTheme()\"\n >\n Toggle light/dark/coffee mode\n </button>\n <p class=\"bg-background text-foreground p-4 rounded-lg\">\n This is a themed paragraph. The theme changes dynamically.\n </p>\n</div>\n```\n\n```text\n@theme\n```\n\n```text\n@theme\n```\n\n```text\n@variant dark\n```\n\n```text\n&\n```\n\n```text\n@theme\n```\n\n```text\n@layer theme\n```\n\n```text\n:root\n```\n\n```text\n*\n```\n\n```text\n:root, :host\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n```text\nlight-dark()\n```\n\n```text\n@theme\n```\n\n```text\n@layer theme\n```\n\n```text\n@variant\n```\n\n```text\n@theme\n```\n\n```text\n@variant\n```\n\n```text\ndark\n```\n\n```text\ndark\n```\n\n```text\ndark\n```\n\n```text\n.dark\n```\n\n```text\n@import \"tailwindcss\";\n\n:root {\n --background: hsl(276 10% 95%);\n --foreground: hsl(276 5% 10%);\n --primary: hsl(276 100% 50%);\n --primary-foreground: hsl(0 0% 100%);\n --secondary: hsl(276 10% 70%);\n --secondary-foreground: hsl(0 0% 0%);\n --muted: hsl(238 10% 85%);\n --muted-foreground: hsl(276 5% 40%);\n --destructive: hsl(0 50% 50%);\n --destructive-foreground: hsl(276 5% 90%);\n --border: hsl(276 20% 55%);\n --input: hsl(276 20% 50%);\n --ring: hsl(276 100% 50%);\n}\n\n.dark {\n --background: hsl(276 10% 10%);\n --foreground: hsl(276 5% 90%);\n --primary: hsl(276 100% 50%);\n --primary-foreground: hsl(0 0% 100%);\n --secondary: hsl(276 10% 20%);\n --secondary-foreground: hsl(0 0% 100%);\n --muted: hsl(238 10% 25%);\n --muted-foreground: hsl(276 5% 60%);\n --destructive: hsl(0 50% 50%);\n --destructive-foreground: hsl(276 5% 90%);\n --border: hsl(276 20% 50%);\n --input: hsl(276 20% 50%);\n --ring: hsl(276 100% 50%);\n}\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-destructive: var(--destructive);\n --color-destructive-foreground: var(--destructive-foreground);\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n}\n```\n\n========================================\n\nComments:\n- Related: How to use custom color themes (e.g. dark or more) in TailwindCSS v4","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":38,"totalLines":678,"estimatedTokens":3452}}704{"id":"stack-78037672","source":"stackoverflow","questionId":78037672,"title":"Using :has in Tailwind with adjacent sibling selectors","tags":["css","reactjs","tailwind-css"],"text":"Title: Using :has in Tailwind with adjacent sibling selectors\nTags: css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have the following `CSS`, which works as intended.\n\n```\n[data-type='transfer']:has(+ [data-type^='sale_']) {\n opacity: 0.25;\n}\n```\n\nIt looks at data attributes and will hide elements with `data-type=\"transfer` if they are adjacent to elements containing data attributes starting with \"sale_\". For clarity, I reduced the opacity instead of hiding the element, to make things as clear as possible what I'm doing.\n\nHere it is in a quick demo:\n\n\r\n\r\n\n```\n[data-type='transfer']:has(+ [data-type^='sale_']) {\n opacity: 0.25;\n}\n```\n\n\r\n\n```\n\n \n- a transfer\n \n- a buyer sale \n \n- a transfer\n \n- a seller sale \n\n```\n\n\r\n\r\n\r\n\nHow can I convert the working CSS above into Tailwind code now that `:has` is supported? I tried something like this, but it's not working:\n\n```\n\n- ...\n```\n\n========================================\n\nTop Answer:\nI ended up asking the creator of Tailwind how to do this and this is the answer he gave me. I was missing that first `+` inside the initial left bracket and this is the best answer.\n\n```\n\n \n- a transfer\n \n- a buyer sale \n \n- a transfer\n \n- a seller sale \n\n```\n\nPlayground demo\n\n========================================\n\nCode:\n```css\n[data-type='transfer']:has(+ [data-type^='sale_']) {\n opacity: 0.25;\n}\n```\n\n```css\n[data-type='transfer']:has(+ [data-type^='sale_']) {\n opacity: 0.25;\n}\n```\n\n```html\n<ul>\n <li data-type=\"transfer\">a transfer</li>\n <li data-type=\"sale_buyer\">a buyer sale</li> \n <li data-type=\"transfer\">a transfer</li>\n <li data-type=\"sale_seller\">a seller sale</li> \n</ul>\n```\n\n```js\n<li className='has-[[data-type=\"transfer\"] + [data-type^=\"sale_\"]]:hidden'>...</li>\n```\n\n```text\nCSS\n```\n\n```text\ndata-type=\"transfer\n```\n\n```text\n:has\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<ul class=\"[&>[data-type='c']:has(+[data-type='c1'])]:text-red-500\">\n <li data-type=\"a\">a transfer</li>\n <li data-type=\"b\">a buyer sale</li> \n <li data-type=\"c\">a transfer</li>\n <li data-type=\"c1\">a seller sale</li> \n</ul>\n```\n\n```text\n:has\n```\n\n```text\n[data-type='c']\n```\n\n```text\n[data-type='c1']\n```\n\n```text\nopacity-25 peer peer-[[data-type=transfer]]:data-[type^=sale\\_]:opacity-100\n```\n\n```text\n.opacity-25{\n opacity: 0.25\n}\n\n.peer[data-type=transfer] ~ .peer-\\[\\[data-type\\=transfer\\]\\]\\:data-\\[type\\^\\=sale\\\\_\\]\\:opacity-100[data-type^=sale_]{\n opacity: 1\n}\n```\n\n```text\npeer-\n```\n\n```text\n:has\n```\n\n```text\n[data-type='transfer'] + [data-type^='sale_']\n```\n\n```text\nsale\\_\n```\n\n```text\nsale_\n```\n\n```text\n~\n```\n\n```text\n+\n```\n\n```js\n<ul>\n <li class=\"has-[+[data-type^='sale\\_']]:data-[type='transfer']:opacity-25\" data-type=\"transfer\">a transfer</li>\n <li class=\"has-[+[data-type^='sale\\_']]:data-[type='transfer']:opacity-25\" data-type=\"sale_buyer\">a buyer sale</li> \n <li class=\"has-[+[data-type^='sale\\_']]:data-[type='transfer']:opacity-25\" data-type=\"transfer\">a transfer</li>\n <li class=\"has-[+[data-type^='sale\\_']]:data-[type='transfer']:opacity-25\" data-type=\"sale_seller\">a seller sale</li> \n</ul>\n```\n\n```text\n+\n```\n\n========================================\n\nComments:\n- Related: How to access all the direct children of a div in Tailwind CSS?\n- I also tested this in Tailwind v3.4.17 and it works there as well. This makes sense because `:has` has been around for quite a while and, although I like the answer, I feel it's a little misleading regarding the version of Tailwind required for this solution to work.\n- I will edit and remove the `v4` wordings, thanks for letting me know","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":22,"totalLines":196,"estimatedTokens":909}}705{"id":"stack-70970397","source":"stackoverflow","questionId":70970397,"title":"Slow button response time with Capacitor x Svelte on Ios","tags":["ionic-framework","tailwind-css","svelte","capacitor","vite"],"text":"Title: Slow button response time with Capacitor x Svelte on Ios\nTags: ionic-framework, tailwind-css, svelte, capacitor, vite\nSource: Stack Overflow\n\nQuestion:\nI try to create a starter app with Capacitor and Svelte. Everything works fine except one thing, when I use native html anchor ( with svelte-routing) for navigate the there is a slow respond time to user interaction, maybe 400ms before app react on my Iphone 13 pro (real device) Ios 15. Same issue for native html buttons across my starter.\n\ncan you tell me if i did something wrong please ?\n\nthe starter repos -> https://github.com/flameapp-io/svelte-capacitor-tailwind-starter\n\nMy navigation component :\n\n```\n\n import ThemeSwitch from '$lib/ThemeSwitch.svelte';\n import { Link } from 'svelte-routing';\n\n type NavLink = {\n name: string;\n url: string;\n };\n\n const navLinks: Array = [\n {\n name: 'Home',\n url: '/'\n },\n {\n name: 'Example',\n url: 'example'\n }\n ];\n\n {#each navLinks as link}\n {link.name}\n {/each}\n\n \n\n```\n\n========================================\n\nCode:\n```js\n<script lang=\"ts\">\n import ThemeSwitch from '$lib/ThemeSwitch.svelte';\n import { Link } from 'svelte-routing';\n\n type NavLink = {\n name: string;\n url: string;\n };\n\n const navLinks: Array<NavLink> = [\n {\n name: 'Home',\n url: '/'\n },\n {\n name: 'Example',\n url: 'example'\n }\n ];\n</script>\n\n<nav class=\"flex items-center\">\n {#each navLinks as link}\n <Link to={link.url} class=\"mx-5\">{link.name}</Link>\n {/each}\n\n <ThemeSwitch />\n</nav>\n```\n\n```html\n<meta name=\"viewport\" content=\"viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"/>\n```\n\n```html\n<meta name=\"viewport\" content=\"viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"/>\n```\n\n========================================\n\nComments:\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":88,"estimatedTokens":561}}706{"id":"stack-71424562","source":"stackoverflow","questionId":71424562,"title":"Some classes such as rotate and scale (the known two) stopped working after upgrading from TailwindCSS 2 to 3","tags":["next.js","tailwind-css","tailwind-in-js","tailwind-css-3"],"text":"Title: Some classes such as rotate and scale (the known two) stopped working after upgrading from TailwindCSS 2 to 3\nTags: next.js, tailwind-css, tailwind-in-js, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI was trying to use the newly introduced `arbitrary value` in TailwindCSS yesterday and it occured to me that I needed to upgrade from v2 to the latest version. I religiously followed the upgrade guide and everything seemed working until I realized the `scale` and `rotate` in my site have stopped working. I battled it over the night with no luck.\n\nI have another NextJS project that originally uses TailwindCSS v3, I tried `scale` and `rotate` on it and it worked fine. The version is a bit lower (v3.x.4) compared to the current version (v3.x.23), so I downgraded to that exact version, yet the scaling and rotating wouldn't work.\n\nI'm currently frustrated as I don't know what I didn't do or what I did wrongly. Can someone please rescue?\n\n========================================\n\nTop Answer:\nIn case Google leads you here, be aware that a `` will not rotate, but a `` will.\n\nWorks: `Sideways text`\n\nFails: `Sideways text`\n\n========================================\n\nCode:\n```text\narbitrary value\n```\n\n```text\nscale\n```\n\n```text\nrotate\n```\n\n```text\nscale\n```\n\n```text\nrotate\n```\n\n```js\ncorePlugins: {\n preflight: false,\n},\n```\n\n```text\n@tailwind base\n```\n\n```text\nglobals.css\n```\n\n```text\n@tailwind base\n```\n\n```text\nscale\n```\n\n```text\nrotate\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n<span>\n```\n\n```text\n<div>\n```\n\n```text\n<div class=\"transform rotate-90\">Sideways text</div>\n```\n\n```text\n<span class=\"transform rotate-90\">Sideways text</span>\n```\n\n========================================\n\nComments:\n- As a note, this seems to be covered in the upgrade notes, though I missed it too.","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":93,"estimatedTokens":451}}707{"id":"stack-71152367","source":"stackoverflow","questionId":71152367,"title":"How to make a redirect to external URLs when visiting URLs in my webapp + Using Rails 7?","tags":["ruby-on-rails","rubygems","tailwind-css"],"text":"Title: How to make a redirect to external URLs when visiting URLs in my webapp + Using Rails 7?\nTags: ruby-on-rails, rubygems, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am learning RoR by building a job board. So, I am trying to redirect to an external URL when someone visits the show page of my Rails job. I am trying to do below logic,\n\n```\nClick on show page link -> Check if Description available \n\n -> Yes (Then go to show page)\n -> No (Then go to show page URL which then \n automatically redirects to corresponding \n External URL associated with the post)\n```\n\n========================================\n\nCode:\n```text\nClick on show page link -> Check if Description available \n\n -> Yes (Then go to show page)\n -> No (Then go to show page URL which then \n automatically redirects to corresponding \n External URL associated with the post)\n```\n\n```text\nredirect_to 'https://stackoverflow.com', allow_other_host: true\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":31,"estimatedTokens":237}}708{"id":"stack-70734086","source":"stackoverflow","questionId":70734086,"title":"Tailwind transition delay arbitrary value only working for specific values","tags":["javascript","reactjs","css-transitions","tailwind-css","arbitrary-values"],"text":"Title: Tailwind transition delay arbitrary value only working for specific values\nTags: javascript, reactjs, css-transitions, tailwind-css, arbitrary-values\nSource: Stack Overflow\n\nQuestion:\nI am getting really inconsistent behavior with tailwinds arbitrary value functionality, specifically in relation to the transition delay property. When I use any random value directly within the arbitrary value it has worked for every value I have tested so far (random positive integers). Ex...\n\n```\n\n- {some text}\n```\n\nBut if I were to use a variable, the class will only occasionally have any effect depending on the value, seemingly randomly. Ex...\n\n```\nconst delay = \"250ms\";\nreturn \n- \n```\n\nThis segment above will produce a valid class but the segment below will have no effect and will not produce a valid class\n\n```\nconst delay = \"500ms\";\nreturn \n- \n```\n\nI am not sure if this is something that I am doing wrong or is some weird quirk in tailwind. I am open to any and all suggestions. If it makes a difference I am using typescript in conjunction with react.\nI am using tailwindcss version 3.0.11 and postcss version 8.4.5\nThese are my tailwind.config.js and my postcss.config.js files\n\n```\nmodule.exports = {\n content: [\"./src/**/*.{js,jsx,ts,tsx}\",],\n theme: {\n extend: {\n screens: {\n '3xl': '1920px',\n 'xsm': '428px',\n '2xsm': '360'\n },\n fontFamily: {\n title: ['Patrick Hand'],\n body: ['Balsamiq Sans']\n },\n transitionProperty: {\n 'opacity': 'opacity',\n },\n },\n },\n plugins: [],\n}\n```\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n========================================\n\nCode:\n```text\n<li className=\"delay-[2455]\">{some text}</li>\n```\n\n```text\nconst delay = \"250ms\";\nreturn <li className={`delay-[${delay}]}`></li>\n```\n\n```text\nconst delay = \"500ms\";\nreturn <li className={`delay-[${delay}]}`></li>\n```\n\n```text\nmodule.exports = {\n content: [\"./src/**/*.{js,jsx,ts,tsx}\",],\n theme: {\n extend: {\n screens: {\n '3xl': '1920px',\n 'xsm': '428px',\n '2xsm': '360'\n },\n fontFamily: {\n title: ['Patrick Hand'],\n body: ['Balsamiq Sans']\n },\n transitionProperty: {\n 'opacity': 'opacity',\n },\n },\n },\n plugins: [],\n}\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```text\nfunction getClassByDelay(delay) {\n return {\n 250: 'delay-250',\n 500: 'delay-500',\n 750: 'delay-750',\n }[delay]\n}\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n content: [\n // ...\n ],\n safelist: [\n 'delay-250',\n 'delay-500',\n 'delay-750',\n // etc.\n ]\n // ...\n}\n```\n\n```text\n<li className={getClassByDelay(delay)}></li>\n```\n\n```text\nsafelist\n```\n\n```text\nsafelist\n```\n\n========================================\n\nComments:\n- thank you, this works perfectly","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":155,"estimatedTokens":707}}709{"id":"stack-73623088","source":"stackoverflow","questionId":73623088,"title":"TailwindCSS - is there a way to not write multiple times the same prefix? like `hover:` for example","tags":["html","css","tailwind-css"],"text":"Title: TailwindCSS - is there a way to not write multiple times the same prefix? like `hover:` for example\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\n**The problem:**\n\n```\nclass=\"hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-400 hover:text-white\"\n```\n\nhere you see, there is the same prefix repetition.\n\n**hover:**foo **hover:**bar **hover:**hello **hover:**world **hover:**something **hover:**another\n\nI want to know if is there a way to not write multiple times the `hover:` prefix?\n\n**The idea:**\n\nis do something like:\n\n`hover:(class class class class class)`\n\nwith brackets or something like that, so all the classes inside the `()` will be like one class and automatically added to the `hover:`\n\nI think this idea there is in tailwind but I don't know the syntax for that.\n\nif is possible this solution needs to work also with all the other prefixes\n\nhttps://i.sstatic.net/JP3GW.png\n\n**simple example demo:**\n\n\r\n\r\n\n```\n// not important, only for deleting the console.warn() \nconsole.clear();\n```\n\n\r\n\n```\n\n \n hello world\n \n\n```\n\n\r\n\r\n\r\n\nI saw all the docs, that is not talking about this concept: https://tailwindcss.com/docs/hover-focus-and-other-states#hover-focus-and-active\n\nif there is someone experienced in this thing, it will be helpful!\n\n========================================\n\nTop Answer:\nYou can just create a new class in a `` block in your page or template. And then use `@apply` to use the needed tailwind classes. Like:\n\n```\n\n.mybutton {\n @apply m-auto p-4 rounded-md bg-blue-200 transition\n}\n\n.mybutton:hover {\n @apply bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-400 text-white\n}\n\n```\n\nNow, if you set the `mybutton` class on the button, the hover will also work.\n\nYou can also add these classes to the main css file of your project. This is not the preferred way of tailwind, though. See Tailwind documentation.\n\n========================================\n\nCode:\n```html\nclass=\"hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-400 hover:text-white\"\n```\n\n```js\n// not important, only for deleting the console.warn() \nconsole.clear();\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<body class=\"flex h-screen\">\n <button class=\"m-auto p-4 rounded-md bg-blue-200 transition hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-400 hover:text-white\">\n hello world\n </button>\n</body>\n```\n\n```text\nhover:\n```\n\n```text\nhover:(class class class class class)\n```\n\n```text\n()\n```\n\n```text\nhover:\n```\n\n```html\n<div class=\"hover:(bg-gray-400 font-medium) bg-white font-light\"/>\n```\n\n```js\ntwHover();\n\nfunction twHover() {\n // get only the elements that have the hover attribute\n let hoverEls = document.querySelectorAll(\"[data-hover]\");\n\n // loop through the elements that have the hover attribute\n hoverEls.forEach((el) => {\n // we get the string inside the attribute\n // and then make it into a array\n let twHoverClasses = `${el.dataset.hover}`.split(\" \");\n\n // loop through the classes inside the element's attributes\n twHoverClasses.forEach((className) => {\n // add the class for you `hover:className`\n el.classList.add(`hover:${className}`);\n });\n });\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<body class=\"flex h-screen\">\n <!-- original -->\n <button class=\"m-auto p-4 rounded-md bg-blue-200 transition hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-40 hover:text-white\">original</button>\n <!-- with script -->\n <button data-hover=\"bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-40 text-white\" class=\"m-auto p-4 rounded-md bg-blue-200 transition\">with script</button>\n</body>\n```\n\n```js\n// this can be any preudo class that tailwind can have\ntwPseudo(\"focus\");\n// if there is nothing as parameter, we use hover\ntwPseudo();\n\nfunction twPseudo(pseudo = \"hover\") {\n // get only the elements that have the hover attribute\n let hoverEls = document.querySelectorAll(`[data-${pseudo}]`);\n\n // loop through the elements that have the hover attribute\n hoverEls.forEach((el) => {\n // we get the string inside the attribute\n // and then make it into a array\n let twHoverClasses = `${el.dataset[pseudo]}`.split(\" \");\n\n // loop through the classes inside the element's attributes\n twHoverClasses.forEach((className) => {\n // add the class for you `hover:className`\n el.classList.add(`${pseudo}:${className}`);\n });\n });\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<body class=\"grid grid-cols-2 place-items-center h-screen\">\n <!-- original -->\n <div>\n <h2 class=\"text-3xl font-bold text-blue-500 mb-4\">original</h2>\n\n <!-- hover -->\n <button class=\"m-auto p-4 rounded-md bg-blue-200 transition hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-40 hover:text-white\">hover</button>\n\n <!-- focus -->\n <button class=\"m-auto p-4 rounded-md bg-blue-200 transition focus:bg-blue-400 focus:-translate-y-2 focus:-translate-x-2 focus:scale-110 focus:shadow-2xl focus:shadow-blue-40 focus:text-white\">focus</button>\n </div>\n\n <!-- with script -->\n <div>\n <h2 class=\"text-3xl font-bold text-blue-500 mb-4\">with script</h2>\n\n <!-- hover -->\n <button data-hover=\"bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-40 text-white\" class=\"m-auto p-4 rounded-md bg-blue-200 transition\">hover</button>\n\n <!-- focus -->\n <button data-focus=\"bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-40 text-white\" class=\"m-auto p-4 rounded-md bg-blue-200 transition\">focus</button>\n </div>\n</body>\n```\n\n```js\n// just call it at the end of the page\ntwPseudo();\n```\n\n```text\nwindiCSS\n```\n\n```text\n:focus\n```\n\n```text\n:lg\n```\n\n```text\n:sm\n```\n\n```text\nDomContentLoaded\n```\n\n```text\nfocus, sm, lg, xl, 2xl\n```\n\n```text\nhover\n```\n\n```text\n<style>\n.mybutton {\n @apply m-auto p-4 rounded-md bg-blue-200 transition\n}\n\n.mybutton:hover {\n @apply bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-400 text-white\n}\n</style>\n```\n\n```text\n<style>\n```\n\n```text\n@apply\n```\n\n```text\nmybutton\n```\n\n```js\nconst pseudoJoin = (selector, str) => {\n return selector+\":\"+str.split(\" \").join(\" \"+selector+\":\")\n}\n```\n\n```text\n<div className=`${pseudoJoin('hover','classes you want on hover')} some more classes`>Hello World!</div>\n```\n\n```text\n<div className={ classnames(\n pseudoJoin('hover', 'classes you want on hover'),\n \"Other classes here\"\n)}>Hello World!</div>\n```\n\n```text\nclassnames\n```\n\n========================================\n\nComments:\n- afaik those are just classes that happens to have an identifier containing the corresponding pseudoselector. Actually it's not possible to use the real pseudo selectors in inline styling but only on css rulesets. So that's just a \"trick\" and also reading the tailwind docs there's no mention on grouping them and the examples also show the repetition\n- @diegod ok, yeah I saw all docs, it not talk about this concept at all. I think is impossible\n- yes I just tried to be as more comprehensive. The class attribute just can contain a list of classes determining to which class a given element belongs to .. and the real pseudo-selectors belongs to the rulesets addressing those classes. I previously talked about inline styling in a wrong way since defining classes for an element is not that. This further comment was pretty superfluos I just meant to be more exact. The question was legit but unfortunately the closest thing coming to my mind is crafting a js strategy that assigns the real tw classes using a grouping method\n- I'm glad someone took the effort of writing the (good and successful) js strategy I suggested... at the same time I feel like I'm not sure that was the only way to achieve the same result because I'm actually no expert of tailwind and all of its possibilities. At some point I felt like I was not perfectly sure I was giving the right expertise to something I'm not perfectly aknowledged about and basing my comments on assumptions that maybe ignored some further truths I ignored. Just for the sake of records\n- your code surely correctly implements what I was suggesting and thanks for spending your time to get to such solution. At some point I was just having doubts I was not telling the whole truth since I'm not expert of tailwind and its framework, directives and composition strategy. By the way your solution surely gets there somehow. Of course as long as the classes get applied on document loads.\n- I think this would not work actually using npm package. Tailwind looking for a full class names to compile them in CSS file. `hover:${className}` is not correct Tailwind class. I believe your example is working just because you have original button example with correct `hover:classes` - if you remove \"original\" button, styles would not be applied\n- Really great answer. I still highly recommend a CSS-only solution for performance reason (blocking the main thread can be quite annoying with DOMContentLoaded).\n- I know the apply trick, but don't want to use it for the reasons on official docs: tailwindcss.com/docs/reusing-styles at the end of the page\n- @stackdeveloper you are correct, you commented while I was editing my answer to add that. But I also think that adding javascript to handle it is not preferable. With tailwind, you just have the hassle of a lot of classes, but the value it adds weights much higher I think.\n- the problem is that I need to create an external CSS file every time, and also a new class name for every button. yeah cool idea, but the wrong thing is create a different file. I want to write everything on the same component\n- is there a way to do ``? with apply logic but only in the same component, in a tailwind, if yes I will upvote because using javascript can slow the website and you are right (but for now seems the easiest one because I only need to copy the script and call it and that it)?\n- thanks. now I am using a js framework called svelte, and your way seems the better one in that case.\n- You probably don't want to do this. The tailwind JIT will discard classes that it can't find in the source (unless you add an extremely permissive set of safelist regexes, which the docs call \"a last resort\").","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":28,"totalLines":302,"estimatedTokens":2638}}710{"id":"stack-73597877","source":"stackoverflow","questionId":73597877,"title":"Tailwind Infinite Horizontal Scroll Through Items","tags":["scroll","tailwind-css","infinite"],"text":"Title: Tailwind Infinite Horizontal Scroll Through Items\nTags: scroll, tailwind-css, infinite\nSource: Stack Overflow\n\nQuestion:\nI am new to tailwind, so I apologize for this question ahead of time. I am trying to convert existing CSS animations into tailwind. Specifically, how can I create an infinite scroll through a list of items using tailwind? I found this youtube video which accomplishes the exact behavior I would like. If possible how can this be implemented using Tailwind. I tried to search for something along the lines of \"infinite scroll\" or \"carousel\" but I couldn't find any other examples except for this video.\n\n========================================\n\nCode:\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {\n keyframes: {\n marquee: {\n '0%': { transform: 'translateX(0%)' },\n '100%': { transform: 'translateX(-100%)' },\n },\n marquee2: {\n '0%': { transform: 'translateX(100%)' },\n '100%': { transform: 'translateX(0%)' },\n },\n },\n animation : {\n 'spin-slow-30': 'spin 30s linear infinite',\n 'spin-slow-25': 'spin 25s linear infinite',\n 'spin-slow-10': 'spin 10s linear infinite',\n 'marquee-infinite' : 'marquee 25s linear infinite',\n },\n },\n },\n plugins: [],\n}\n```\n\n```js\nimport React from 'react'\n\nimport item1 from '../assets/carousel/1.png'\nimport item2 from '../assets/carousel/2.png'\nimport item3 from '../assets/carousel/3.png'\nimport item4 from '../assets/carousel/4.png'\nimport item5 from '../assets/carousel/5.png'\n\nconst ScrollCarousel = () => {\n return (\n <>\n <div className='mb-96'>\n <div className=\"relative w-full p-16 overflowx-hidden\">\n <div className=\"flex absolute left-0 animate-marquee-infinite\">\n <div className='flex w-96 justify-around'>\n <img src={item1} alt=\"\" />\n <img src={item2} alt=\"\" />\n <img src={item3} alt=\"\" />\n <img src={item4} alt=\"\" />\n <img src={item5} alt=\"\" />\n <img src={item1} alt=\"\" />\n <img src={item2} alt=\"\" />\n <img src={item3} alt=\"\" />\n <img src={item4} alt=\"\" />\n <img src={item5} alt=\"\" />\n <img src={item1} alt=\"\" />\n <img src={item2} alt=\"\" />\n <img src={item3} alt=\"\" />\n <img src={item4} alt=\"\" />\n <img src={item5} alt=\"\" />\n </div>\n <div className='flex w-96 justify-around'>\n <img src={item1} alt=\"\" />\n <img src={item2} alt=\"\" />\n <img src={item3} alt=\"\" />\n <img src={item4} alt=\"\" />\n <img src={item5} alt=\"\" />\n <img src={item1} alt=\"\" />\n <img src={item2} alt=\"\" />\n <img src={item3} alt=\"\" />\n <img src={item4} alt=\"\" />\n <img src={item5} alt=\"\" />\n <img src={item1} alt=\"\" />\n <img src={item2} alt=\"\" />\n <img src={item3} alt=\"\" />\n <img src={item4} alt=\"\" />\n <img src={item5} alt=\"\" />\n </div>\n </div>\n </div>\n </div>\n </>\n )\n}\n\nexport default ScrollCarousel\n```\n\n========================================\n\nComments:\n- Please add the code of your existing CSS animation and what you have tried so far with tailwind.","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":103,"estimatedTokens":963}}711{"id":"stack-71323196","source":"stackoverflow","questionId":71323196,"title":"Tailwind CSS grid using JIT and arbitrary grid-template-areas style","tags":["css","css-grid","tailwind-css","jit"],"text":"Title: Tailwind CSS grid using JIT and arbitrary grid-template-areas style\nTags: css, css-grid, tailwind-css, jit\nSource: Stack Overflow\n\nQuestion:\nBased on the documentation, Tailwind `JIT` (Just In Time) mode allows to add arbitrary styles.\n\nI can't make it work for the CSS grid's `grid-template-areas` property. In this simple example, I just want the sider on the left, the main content on the right.\n\n*Note that I have more complex goals, I know I don't need CSS Grid for such a simple layout.*\n\n- JIT mode works as using an arbitrary padding such as `px-[23px]` works.\n\n- The issue lies here: `[grid-template-areas:'sider content']`, as if you go to the CSS tab there is the same property that works if uncommented.\n\nHere's a playground:\n\n```\n\n SIDER\n MAIN\n\n```\n\n========================================\n\nCode:\n```html\n<div class=\"grid [grid-template-areas:'sider content']\">\n <sider class=\"[grid-area:sider]\">SIDER</sider>\n <main class=\"[grid-area:content]\">MAIN</main>\n</div>\n```\n\n```text\nJIT\n```\n\n```text\ngrid-template-areas\n```\n\n```text\npx-[23px]\n```\n\n```text\n[grid-template-areas:'sider content']\n```\n\n```text\n[grid-template-areas:'sider_content']\n```\n\n```text\n.\\[grid-template-areas\\:\\'sider_content\\'\\] {\n grid-template-areas: 'sider content';\n}\n```\n\n```text\n[grid-template-areas:'sider content']\n```\n\n```text\n[grid-template-areas:'sider\n```\n\n```text\ncontent']\n```\n\n========================================\n\nComments:\n- Thank you! I completely missed the part about handling white spaces.","metadata":{"transformedAt":"2026-08-18T18:33:42.939Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":76,"estimatedTokens":377}}712{"id":"stack-71456411","source":"stackoverflow","questionId":71456411,"title":"How to stop TailwindCSS from deleting unused styles","tags":["laravel","tailwind-css","production","tailwind-css-3"],"text":"Title: How to stop TailwindCSS from deleting unused styles\nTags: laravel, tailwind-css, production, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nOkay, so I'm about to put my Laravel project in production. I tested everything on local host and it works perfectly using Tailwind 3. Yet, when I ran some PHP artisan commands to clear all cache and etc., `migrate:fresh` my database, and then ran `npm run dev`, I noticed that Tailwind removed the styles that I used in seeding blogs (I use seed to seed fake blog posts and view how they will look like).\n\nFor example I'm using the Typography Tailwind plugin with the utility-class `prose` and so on. When I ran `migrate:fresh` and the fake blog post deleted from database, then cleared Laravel cache, and ran `npm run dev`, I noticed that all the `prose` styles are being removed from `app.css`. Of course I don't want that because this should be applied on each and every blog post that I will submit in production.\n\nSo how can I stop Tailwind from deleting these styles? I currently have all that I need and I don't want anything else removed.\n\n**webpack.mix**\n\n```\nconst mix = require(\"laravel-mix\");\n\n/*\n |--------------------------------------------------------------------------\n | Mix Asset Management\n |--------------------------------------------------------------------------\n |\n | Mix provides a clean, fluent API for defining some Webpack build steps\n | for your Laravel applications. By default, we are compiling the CSS\n | file for the application as well as bundling up all the JS files.\n |\n */\n\nmix.js(\"resources/js/app.js\", \"public/js\")\n .vue()\n .postCss(\"resources/css/app.css\", \"public/css\", [\n require(\"postcss-import\"),\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ]);\n```\n\n**tailwind.config.js**\n\n```\nconst defaultTheme = require(\"tailwindcss/defaultTheme\");\n\nmodule.exports = {\n darkMode: \"class\",\n content: [\n \"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php\",\n \"./storage/framework/views/*.php\",\n \"./resources/views/*.blade.php\",\n \"./resources/views/components/*.blade.php\",\n \"./resources/views/auth/*.blade.php\",\n \"./resources/views/layouts/*.blade.php\",\n \"./resources/js/components/categories/*.vue\",\n \"./resources/js/components/**/*.vue\",\n ],\n\n theme: {\n screens: {\n xs: \"364px\",\n sm: \"430px\",\n sd: \"644px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1155px\",\n \"2xl\": \"1280px\",\n },\n extend: {\n fontFamily: {\n sans: [\"Nunito\", ...defaultTheme.fontFamily.sans],\n },\n typography: ({ theme }) => ({\n white: {\n css: {\n \"--tw-prose-body\": theme(\"colors.white\"),\n \"--tw-prose-headings\": theme(\"colors.blue[400]\"),\n \"--tw-prose-lead\": theme(\"colors.purple[700]\"),\n \"--tw-prose-links\": theme(\"colors.blue[800]\"),\n \"--tw-prose-bold\": theme(\"colors.blue[800]\"),\n \"--tw-prose-counters\": theme(\"colors.blue[900]\"),\n \"--tw-prose-bullets\": theme(\"colors.blue[900]\"),\n \"--tw-prose-hr\": theme(\"colors.blue[800]\"),\n \"--tw-prose-quotes\": theme(\"colors.blue[800]\"),\n \"--tw-prose-quote-borders\": theme(\"colors.blue[800]\"),\n \"--tw-prose-captions\": theme(\"colors.blue[800]\"),\n \"--tw-prose-code\": theme(\"colors.blue[800]\"),\n \"--tw-prose-pre-code\": theme(\"colors.blue[200]\"),\n \"--tw-prose-pre-bg\": theme(\"colors.gray[900]\"),\n \"--tw-prose-th-borders\": theme(\"colors.blue[300]\"),\n \"--tw-prose-td-borders\": theme(\"colors.blue[200]\"),\n },\n },\n black: {\n css: {\n \"--tw-prose-body\": theme(\"colors.black\"),\n },\n },\n }),\n },\n },\n\n plugins: [\n require(\"@tailwindcss/forms\"),\n require(\"@tailwindcss/typography\"),\n ],\n};\n```\n\n========================================\n\nTop Answer:\nHow to stop TailwindCSS from deleting unused styles\n\nIn my answer, I would like to highlight the core message of the question: this approach does not make sense. Tailwind CSS does not remove unused styles; instead, it does not generate them in the first place. Tailwind CSS works by detecting the class names used in the source code, then integrating the detected class names into the generated CSS, and finally shipping that CSS to production. To extend this list with classes that are NOT present in the source code, the *safelist* feature is available, as EdLucas mentioned.\n\nSo, if a class is present directly in the source code but still does not end up in the generated CSS, then the source needs to be declared correctly (v4: `@source` and `@source not`; v3: `content`). If it does not appear in the source code at all, but you still want its CSS to be generated, then it must be added via the safelist (v4: `@source inline`; v3: `safelist`).\n\n### TailwindCSS v4\n\nSource detection is automatic but can be manipulated.\n\n- What's breaking changes from v4?\n\n- Automatic Source Detection from TailwindCSS v4 (instead of `content` property)\n\n- Adding an external source or a package from within node_modules for detection\n\nI wrote about how the safelist works in more detail here:\n\n- How is it possible to specify a safelist in TailwindCSS v4? Is it possible to list patterns and variants instead of full class names?\n\n- Generating TailwindCSS JS-based safelist with function?\n\n- \"`@source` paths must be quoted\" is the error message I get when I try to use `@source inline` safelist\n\n### TailwindCSS v3\n\nFor source detection, the content property must be manually customized.\n\n- https://v3.tailwindcss.com/docs/content-configuration\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}',\n ],\n // ...\n}\n```\n\nThe safelist functionality was mentioned by EdLucas.\n\n========================================\n\nCode:\n```js\nconst mix = require(\"laravel-mix\");\n\n/*\n |--------------------------------------------------------------------------\n | Mix Asset Management\n |--------------------------------------------------------------------------\n |\n | Mix provides a clean, fluent API for defining some Webpack build steps\n | for your Laravel applications. By default, we are compiling the CSS\n | file for the application as well as bundling up all the JS files.\n |\n */\n\nmix.js(\"resources/js/app.js\", \"public/js\")\n .vue()\n .postCss(\"resources/css/app.css\", \"public/css\", [\n require(\"postcss-import\"),\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ]);\n```\n\n```js\nconst defaultTheme = require(\"tailwindcss/defaultTheme\");\n\nmodule.exports = {\n darkMode: \"class\",\n content: [\n \"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php\",\n \"./storage/framework/views/*.php\",\n \"./resources/views/*.blade.php\",\n \"./resources/views/components/*.blade.php\",\n \"./resources/views/auth/*.blade.php\",\n \"./resources/views/layouts/*.blade.php\",\n \"./resources/js/components/categories/*.vue\",\n \"./resources/js/components/**/*.vue\",\n ],\n\n theme: {\n screens: {\n xs: \"364px\",\n sm: \"430px\",\n sd: \"644px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1155px\",\n \"2xl\": \"1280px\",\n },\n extend: {\n fontFamily: {\n sans: [\"Nunito\", ...defaultTheme.fontFamily.sans],\n },\n typography: ({ theme }) => ({\n white: {\n css: {\n \"--tw-prose-body\": theme(\"colors.white\"),\n \"--tw-prose-headings\": theme(\"colors.blue[400]\"),\n \"--tw-prose-lead\": theme(\"colors.purple[700]\"),\n \"--tw-prose-links\": theme(\"colors.blue[800]\"),\n \"--tw-prose-bold\": theme(\"colors.blue[800]\"),\n \"--tw-prose-counters\": theme(\"colors.blue[900]\"),\n \"--tw-prose-bullets\": theme(\"colors.blue[900]\"),\n \"--tw-prose-hr\": theme(\"colors.blue[800]\"),\n \"--tw-prose-quotes\": theme(\"colors.blue[800]\"),\n \"--tw-prose-quote-borders\": theme(\"colors.blue[800]\"),\n \"--tw-prose-captions\": theme(\"colors.blue[800]\"),\n \"--tw-prose-code\": theme(\"colors.blue[800]\"),\n \"--tw-prose-pre-code\": theme(\"colors.blue[200]\"),\n \"--tw-prose-pre-bg\": theme(\"colors.gray[900]\"),\n \"--tw-prose-th-borders\": theme(\"colors.blue[300]\"),\n \"--tw-prose-td-borders\": theme(\"colors.blue[200]\"),\n },\n },\n black: {\n css: {\n \"--tw-prose-body\": theme(\"colors.black\"),\n },\n },\n }),\n },\n },\n\n plugins: [\n require(\"@tailwindcss/forms\"),\n require(\"@tailwindcss/typography\"),\n ],\n};\n```\n\n```text\nmigrate:fresh\n```\n\n```text\nnpm run dev\n```\n\n```text\nprose\n```\n\n```text\nmigrate:fresh\n```\n\n```text\nnpm run dev\n```\n\n```text\nprose\n```\n\n```text\napp.css\n```\n\n```js\nmodule.exports = {\n safelist: [\n 'prose',\n 'prose-xl',\n ], \n // ...\n}\n```\n\n```text\ncontent\n```\n\n```text\ntailwind.config.js\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './pages/**/*.{html,js}',\n './components/**/*.{html,js}',\n ],\n // ...\n}\n```\n\n```text\n@source\n```\n\n```text\n@source not\n```\n\n```text\ncontent\n```\n\n```text\n@source inline\n```\n\n```text\nsafelist\n```\n\n```text\ncontent\n```\n\n```text\n@source\n```\n\n```text\n@source inline\n```\n\n========================================\n\nComments:\n- It sounds like you don't have NPM running on production and it's not being transfered by Git? How did you setup Tailwind in your Mix?\n- I didn't deploy my website yet. I'm afraid that in production it will remove the styles like it happens when i run npm run dev on localserver. And I updated the question with laravel mix setup. Do i need to add something about Typography plugin in it?\n- As you can see in tailwind.config.js I'm adding forms and typography plugins from tailwind. do i need to do something in webpack.mix in regards of those plugins?\n- @N.Hamelink My last github commit included everything i needed in my project and tested on local server. Then i cleared all cache and deleted everything in database and ran npm run dev and here i noticed that it deletes unused styles such as Tailwind typography plugin (prose) styles which were used in one of the testing blog posts i created which i deleted from database as explained. so I'm afraid that this might happen when i deploy the website. I hope I made my issue clearer","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":340,"estimatedTokens":2620}}713{"id":"stack-70376871","source":"stackoverflow","questionId":70376871,"title":"Style all items in with Tailwind CSS","tags":["html","css","tailwind-css"],"text":"Title: Style all items in with Tailwind CSS\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a navbar that has 5 li elements inside ul element. I want to style all the li items with Tailwind CSS. Do I have to add class names to all 5 elements or is there a way I can point all li elements in ul's class.\nI want this functionality with tailwind.css\n\n\r\n\r\n\n```\n.nav-links li {\n margin-right: 52px;\n}\n```\n\n\r\n\n```\n\n \n \n Home\n \n \n Products\n \n \n Solutions\n \n \n About\n \n \n Contact us\n \n \n\n```\n\n========================================\n\nTop Answer:\nYou can add a class to the `` tag which will style all the `` tags\n\nCheck list style type for tailwind here\n\n========================================\n\nCode:\n```css\n.nav-links li {\n margin-right: 52px;\n}\n```\n\n```html\n<div class=\"nav-links\">\n <ul class=\"inline-flex mr-14 mt-10 uppercase text-base \n font-roboto font-semibold text-black cursor-pointer\">\n <li>\n <router-link to=\"/\">Home</router-link>\n </li>\n <li>\n <router-link to=\"\">Products</router-link>\n </li>\n <li>\n <router-link to=\"/solutions\">Solutions</router-link>\n </li>\n <li>\n <router-link to=\"/about\">About</router-link>\n </li>\n <li>\n <router-link to=\"/contact\">Contact us</router-link>\n </li>\n </ul>\n</div>\n```\n\n```text\nspace-x-6\n```\n\n```text\nul\n```\n\n```text\nli\n```\n\n```text\n<ul>\n```\n\n```text\n<li>\n```\n\n```css\n.listItem {\n color:blue;\n font-weight:600;\n}\n```\n\n```html\n<div class=\"nav-links\">\n <ul class=\"inline-flex mr-14 mt-10 uppercase text-base \n font-roboto font-semibold text-black cursor-pointer\">\n <li class=\"listItem\">\n <router-link to=\"/\">Home</router-link>\n </li>\n <li class=\"listItem\">\n <router-link to=\"\">Products</router-link>\n </li>\n <li class=\"listItem\">\n <router-link to=\"/solutions\">Solutions</router-link>\n </li>\n <li class=\"listItem\">\n <router-link to=\"/about\">About</router-link>\n </li>\n <li class=\"listItem\">\n <router-link to=\"/contact\">Contact us</router-link>\n </li>\n </ul>\n</div>\n```\n\n```text\nlistItem\n```\n\n========================================\n\nComments:\n- This worked. But I needed space-x-16 for ~52px's.","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":138,"estimatedTokens":554}}714{"id":"stack-70244197","source":"stackoverflow","questionId":70244197,"title":"how to darken the image on hover in tailwind","tags":["hover","background-image","tailwind-css"],"text":"Title: how to darken the image on hover in tailwind\nTags: hover, background-image, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am new to tailwind and I am trying to make the image darker on hover.\nHere is my config.js\n\n```\ntheme: {\nextend:{\nbackgroundImage: (theme) => ({\n video: \"url('./bg-img.jpg')\",\n})\n}\n},\n\nvariants: {\nboxShadow:[\"responsive\", \"hover\", \"focus\"]\n}\n```\n\nand here is my code:\n\n```\n\n video\n\n```\n\n========================================\n\nTop Answer:\nThere are several options for you to accomplish what you want.\nUsing:\n\n- filter\n\n- backdrop-filter.\n\nI'm sharing with you the filter example.\n\n```\n\n \n \n \n\n```\n\nhttps://codepen.io/victoryoalli/pen/mdBVjbb\n\n========================================\n\nCode:\n```text\ntheme: {\nextend:{\nbackgroundImage: (theme) => ({\n video: \"url('./bg-img.jpg')\",\n})\n}\n},\n\nvariants: {\nboxShadow:[\"responsive\", \"hover\", \"focus\"]\n}\n```\n\n```text\n<div className=\" h-80 my-4 w-64 rounded-md p-4 bg-video bg-cover bg-center shadow-lg cursor-pointer group hover:bg-black transition-all duration-1000\">\n<h1 className=\"uppercase text-2xl text-golden font-black group-hover:text-secondary transition-all duration-500\">\n video\n</h1>\n</div>\n```\n\n```html\n<div class=\"h-80 my-4 w-64 rounded-md bg-video bg-cover bg-center shadow-lg cursor-pointer\">\n <div class=\"bg-black bg-opacity-0 p-4 w-full h-full hover:bg-opacity-50 transition-all duration-1000\">\n <h1 class=\"uppercase text-2xl text-golden font-black group-hover:text-secondary transition-all duration-500\">video</h1>\n </div>\n</div>\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n theme: {\n extend: {\n backgroundImage: {\n video: \"url('./bg-img.jpg')\", },\n },\n },\n variants: {\n extend: {\n backgroundImage: ['hover'],\n }\n },\n}\n```\n\n```html\n<div class=\"min-h-screen flex items-center justify-center bg-royalblue\">\n <div class=\"filter hover:grayscale hover:contrast-200\">\n <img src=\"https://loremflickr.com/cache/resized/65535_51423949778_4bccb1beec_c_500_500_nofilter.jpg\" alt=\"\">\n </div>\n</div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":109,"estimatedTokens":512}}715{"id":"stack-68320264","source":"stackoverflow","questionId":68320264,"title":"Border color doesn't work in Tailwind CSS","tags":["reactjs","tailwind-css","storybook"],"text":"Title: Border color doesn't work in Tailwind CSS\nTags: reactjs, tailwind-css, storybook\nSource: Stack Overflow\n\nQuestion:\nI need to write some button component in Storybook with Tailwind CSS (and I'm completely new for both Storybook and Tailwind). I need to change the border color of some button to gray-800. I have both `border` and `border-gray-800` classes but still get the `rgb(0,0,0)` in the computed styles for the element.\n\nThis is a full className of the button: `\"inline-flex justify-between items-center h-10 w-max p-1 pl-4 border border-gray-800 rounded-full\"`. Any other styles are applyed perfectly. What can be the problem?\n\nMaybe I have first to enable this color someway in the tailwind config or something like this?\n\nThanks!\n\nUpdate: I also noticed that the right color is also not applied to the text when I use \"text-gray-800\".\n\nBy the way, the editor also doesn't show the contents of this class on hover.\n\n========================================\n\nCode:\n```text\nborder\n```\n\n```text\nborder-gray-800\n```\n\n```text\nrgb(0,0,0)\n```\n\n```text\n\"inline-flex justify-between items-center h-10 w-max p-1 pl-4 border border-gray-800 rounded-full\"\n```\n\n```text\nmodule.exports = { \n purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], \n darkMode: false, // or 'media' or 'class', \n theme: {\n extend: {\n colors: { 'rhombus-green': { DEFAULT: '#24D5D6', dark: '#00A1A7' } }, \n },\n }, \n}\n```\n\n```text\ntheme.colors\n```\n\n========================================\n\nComments:\n- did you inspect it in your browser inspector? is it possibly being overridden?\n- In the inspector I see all these classes like .inline-flex, .justify-between, .h-10, etc. But the .border-gray-800 doesn't appear there although it exists in tailwind as you can see on this page: tailwind.build/classes/border-color/border-gray-800\n- Please show us your `tailwind.config.js` as you may override default colors\n- module.exports = { purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], darkMode: false, // or 'media' or 'class', theme: { colors: { 'rhombus-green': { DEFAULT: '#24D5D6', dark: '#00A1A7' }, }, }, } sorry, I don't know how to make this code formatted here\n- OK, after I removed `colors {...}` from the config, I see the tailwind colors do work. So the question now how do I need to config my custom colors without breaking the default styles.","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":60,"estimatedTokens":592}}716{"id":"stack-70352249","source":"stackoverflow","questionId":70352249,"title":"How to bundle tailwind css inside a Vue Component Package","tags":["vue.js","vue-component","npm-install","tailwind-css","npm-publish"],"text":"Title: How to bundle tailwind css inside a Vue Component Package\nTags: vue.js, vue-component, npm-install, tailwind-css, npm-publish\nSource: Stack Overflow\n\nQuestion:\nIn one of my projects, I build a nice vue3 component that could be useful to several other projects. So I decided to publish it as an NPM package and it with everyone.\n\nI wrote the isolate component, build it and publish BUT I use Tailwind css to make the style.\nWhen I publish and install the component everything is working BUT without the beauty of the css part.\n\nI tried several configurations and alternative tools to generate the package that automatically add the tailwind as an inner dependency to my package.\n\nDoes someone have experience with this? how can build/bundle my component by adding the tailwind CSS instructions into it?\n\n========================================\n\nTop Answer:\nIt's a bit difficult for someone to answer your question as you've not really shared the source code, but thankfully (and a bit incorrectly), you've published the `src` directory to npm.\n\nThe core issue here is that when you're building a component library, you are running `npm run build:npm` which translates to `vue-cli-service build --target lib --name getjvNumPad src/index.js`.\n\nThe `index.js` reads as follows:\n\n```\nimport component from './components/numeric-pad.vue'\n\n// Declare install function executed by Vue.use()\nexport function install (Vue) {\n if (install.installed) return\n install.installed = true\n Vue.component('getjv-num-pad', component)\n}\n\n// Create module definition for Vue.use()\nconst plugin = {\n install\n}\n\n// Auto-install when vue is found (eg. in browser via tag)\nlet GlobalVue = null\nif (typeof window !== 'undefined') {\n GlobalVue = window.Vue\n} else if (typeof global !== 'undefined') {\n GlobalVue = global.Vue\n}\nif (GlobalVue) {\n GlobalVue.use(plugin)\n}\n\n// To allow use as module (npm/webpack/etc.) export component\nexport default component\n```\n\nThere is no mention of importing any CSS, hence no CSS included in the built version.\n\nThe simplest solution would be to include the `index.css` import in your `index.js` or the `src/components/numeric-pad.vue` file under the `` section.\n\nLastly, I'm a bit rusty on how components are built, but you might find that Vue outputs the CSS as a separate file. In that case, you would also need to update your `package.json` to include an `exports` field.\n\n========================================\n\nCode:\n```text\n// tailwind.config.js\nmodule.exports = [\n //...\n content: [\n \"./index.html\",\n \"./src/**/*.{vue,js,ts,jsx,tsx}\",\n \"./node_modules/package-name/**/*.{vue,js,ts,jsx,tsx}\" // Add this line\n // Replace \"package-name\" with the name of the dependency package\n ],\n //...\n]\n```\n\n```text\n// tailwind.config.js\nmodule.exports = [\n //...\n purge: {\n //...\n content: [\n \"./index.html\",\n \"./src/**/*.{vue,js,ts,jsx,tsx}\",\n \"./node_modules/package-name/**/*.{vue,js,ts,jsx,tsx}\" // Add this line\n // Replace \"package-name\" with the name of the dependency package\n ],\n //...\n //...\n }\n]\n```\n\n```js\nimport component from './components/numeric-pad.vue'\n\n// Declare install function executed by Vue.use()\nexport function install (Vue) {\n if (install.installed) return\n install.installed = true\n Vue.component('getjv-num-pad', component)\n}\n\n// Create module definition for Vue.use()\nconst plugin = {\n install\n}\n\n// Auto-install when vue is found (eg. in browser via <script> tag)\nlet GlobalVue = null\nif (typeof window !== 'undefined') {\n GlobalVue = window.Vue\n} else if (typeof global !== 'undefined') {\n GlobalVue = global.Vue\n}\nif (GlobalVue) {\n GlobalVue.use(plugin)\n}\n\n// To allow use as module (npm/webpack/etc.) export component\nexport default component\n```\n\n```text\nsrc\n```\n\n```text\nnpm run build:npm\n```\n\n```text\nvue-cli-service build --target lib --name getjvNumPad src/index.js\n```\n\n```text\nindex.js\n```\n\n```text\nindex.css\n```\n\n```text\nindex.js\n```\n\n```text\nsrc/components/numeric-pad.vue\n```\n\n```text\n<style>\n```\n\n```text\npackage.json\n```\n\n```text\nexports\n```\n\n========================================\n\nComments:\n- I have the same question. did you fix it?\n- I did fix it and here's how\n- Hi @Guru thanks for looking into this. From my perceptive I wanted to know how tailwind is included when using defineCustomElement vuejs.org/guide/extras/…\n- @TheoKouzelis You need not add tailwind separately for each component even if using defineCustomElement\n- @TheoKouzelis you just need to specify relevant vue/js/html files as watch location for the tailwind engine. This can be done using content property of tailwind.config.js","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":172,"estimatedTokens":1178}}717{"id":"stack-69599949","source":"stackoverflow","questionId":69599949,"title":"Using Tailwind dark variant with custom classes","tags":["tailwind-css"],"text":"Title: Using Tailwind dark variant with custom classes\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nDoes tailwind allow the `dark` variant to work with custom classes?\n\nConsider this simple working example:\n\n```\n\n Hello, world\n\n```\n\nThe above will apply a black background to the element, but if try to use a custom class, then it won't:\n\n```\n.card-background {\n @apply bg-black;\n}\n```\n\n```\n\n Hello, world\n\n```\n\n========================================\n\nTop Answer:\nThere is a problem with `cssModules`, and especially with `css-loader`.\n\nSolution described here\nhttps://github.com/tailwindlabs/tailwindcss/issues/3258#issuecomment-753584532\n\n========================================\n\nCode:\n```html\n<div class=\"bg-white dark:bg-black\">\n Hello, world\n</div>\n```\n\n```css\n.card-background {\n @apply bg-black;\n}\n```\n\n```html\n<div class=\"bg-white dark:card-background\">\n Hello, world\n</div>\n```\n\n```text\ndark\n```\n\n```text\n.dark {\n .dark\\:card-background {\n @apply bg-black;\n }\n }\n```\n\n```text\ncssModules\n```\n\n```text\ncss-loader\n```\n\n========================================\n\nComments:\n- meta.stackexchange.com/a/8259/997587","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":82,"estimatedTokens":286}}718{"id":"stack-69202089","source":"stackoverflow","questionId":69202089,"title":"tailwind css margin class not applying margin to component, react","tags":["reactjs","tailwind-css"],"text":"Title: tailwind css margin class not applying margin to component, react\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWhy I am not getting a margin if I add a class of `my-30 mr-auto ml-auto` to component:\n\n\r\n\r\n\n```\nimport React from \"react\";\n\nimport SignIn from \"../../components/sign-in/sign-in.component\";\nimport SignUp from \"../../components/sign-up/sign-up.component\";\n\nconst SignInAndSignUpPage = () => (\n \n \n \n \n);\n\nexport default SignInAndSignUpPage;\n```\n\n\r\n\r\n\r\n\nThe result is :\n\nhttps://i.sstatic.net/DCUEr.png\n\nbut the expected result is:\nhttps://i.sstatic.net/rMyYE.png\n\nHow can I achieve the expected result using tailwind classes\n\n**note: I have installed the tailwind css library using npm and other classes work fine but this class is not working**\n\n========================================\n\nTop Answer:\nIf the class is not applied in your HTML element at all.\n\nIt could be an issue with your `tailwind.config.js`.\n\nMake sure the file you are working on is referenced in the `content` array.\n\n```\nmodule.exports = {\n content: [\n './directory/of_the_files/**/*.{js,ts,jsx,tsx,mdx}'\n ]\n}\n```\n\nIt was applying some tailwind classes but not the margin for me.\n\nPS: I suggest using `mx-auto` class, instead of `ml-auto mr-auto` for readability purpose.\n\n========================================\n\nCode:\n```js\nimport React from \"react\";\n\nimport SignIn from \"../../components/sign-in/sign-in.component\";\nimport SignUp from \"../../components/sign-up/sign-up.component\";\n\nconst SignInAndSignUpPage = () => (\n <div className=\"flex justify-center my-30 mr-auto ml-auto\">\n <SignIn />\n <SignUp />\n </div>\n);\n\nexport default SignInAndSignUpPage;\n```\n\n```text\nmy-30 mr-auto ml-auto\n```\n\n```text\nconst SignInAndSignUpPage = () => (\n <div className=\"flex justify-center my-30\">\n <div className=\"mr-4\">\n <SignIn />\n </div> \n <div className=\"ml-4\">\n <SignUp />\n </div>\n </div>\n);\n```\n\n```text\nconst SignInAndSignUpPage = () => (\n <div className=\"grid grid-cols-2 space-x-2\">\n <SignIn />\n <SignUp />\n </div>\n);\n```\n\n```text\n<SignIn />\n```\n\n```text\n<SignUp />\n```\n\n```text\nmodule.exports = {\n content: [\n './directory/of_the_files/**/*.{js,ts,jsx,tsx,mdx}'\n ]\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ncontent\n```\n\n```text\nmx-auto\n```\n\n```text\nml-auto mr-auto\n```\n\n========================================\n\nComments:\n- Because you are not using `grid`, you need to add margin inside the `` or `` component directly","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":143,"estimatedTokens":635}}719{"id":"stack-79425012","source":"stackoverflow","questionId":79425012,"title":"How to override TailwindCSS v4 default design using React and Vite","tags":["reactjs","tailwind-css","vite","tailwind-css-4"],"text":"Title: How to override TailwindCSS v4 default design using React and Vite\nTags: reactjs, tailwind-css, vite, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI have just installed my react project with Vite and TaiwindCSS v4 (latest version), but I don't find the `tailwind.config.js`.\n\nDoes anyone has an idea how to to override TailwindCSS v4 default design please? If I have to add `tailwind.config.js`, have you any idea how to configure it in the project? Thanks.\n\n========================================\n\nCode:\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n --color-primary: red;\n}\n```\n\n```html\n<div class=\"text-primary\">I will be red</div>\n```\n\n```css\n/* Path relative to this CSS file. */\n@config \"../../tailwindcss.config.js\";\n```\n\n```text\n@theme\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@config\n```\n\n========================================\n\nComments:\n- Maybe related: How to setting Tailwind CSS v4 global class?\n- many thanks man.\n- @Wongin did you mean to use `text-primary` instead of `text-red`?\n- Fruedian slip, fixed. Thanks.","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":56,"estimatedTokens":277}}720{"id":"stack-63259023","source":"stackoverflow","questionId":63259023,"title":"Using tailwindcss with React, size not decreased after purging","tags":["reactjs","tailwind-css"],"text":"Title: Using tailwindcss with React, size not decreased after purging\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm tried to set up tailwind with ejected create-react-app. I'm successful to make it works but failed to purge the size. here is my setup\n\n**./src/assets/styles/tailwind.css**\n\n```\n@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;\n```\n\n**postcss.config.js**\n\n```\nmodule.exports = {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer')\n ],\n};\n```\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\n purge: [\"./src/**/*.js\"],\n theme: {\n extend: {}\n },\n variants: {},\n plugins: []\n};\n```\n\n**package.json**\n\n```\n\"scripts\": {\n \"start\": \"node scripts/start.js && postcss src/assets/styles/tailwind.css -o src/assets/styles/main.css -w\",\n \"build\": \"node scripts/build.js && postcss src/assets/styles/tailwind.css -o src/assets/styles/main.css\"\n}\n```\n\n**index.js**\n\n```\nimport \"./assets/styles/main.css\";\n// ...\n```\n\nI tried to create a component like this and its work\n\n```\nhai\n```\n\nbut when I build, even I have given a path to purge at the config, the size not decreasing. It constant 143kb whether I add the purge path or not. i also have tried manual purge like this at `postcss.config.js` but no work\n\n```\n// postcss.config.js\nconst purgecss = require(\"@fullhuman/postcss-purgecss\")({\n // Specify the paths to all of the template files in your project\n content: [\n \"./src/**/*.js\"\n // etc.\n ],\n\n // This is the function used to extract class names from your templates\n defaultExtractor: (content) => {\n // Capture as liberally as possible, including things like `h-(screen-1.5)`\n const broadMatches = content.match(/[^<>\"'`\\s]*[^<>\"'`\\s:]/g) || [];\n\n // Capture classes within other delimiters like .block(class=\"w-1/2\") in Pug\n const innerMatches = content.match(/[^<>\"'`\\s.()]*[^<>\"'`\\s.():]/g) || [];\n\n return broadMatches.concat(innerMatches);\n }\n});\n\nmodule.exports = {\n plugins: [\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ...(process.env.NODE_ENV === \"production\" ? [purgecss] : [])\n ]\n};\n```\n\nwhats wrong with my setup?\n\n========================================\n\nTop Answer:\nI also have the same problem. This helped me:\n\nhttps://tailwindcss.com/docs/optimizing-for-production#enabling-manually\n\nI have to manually add this code in my tailwind.config.js file:\n\n```\n// tailwind.config.js\nmodule.exports = {\n purge: {\n enabled: true,\n content: ['./src/**/*.html'],\n },\n // ...\n}\n```\n\nI hope it will be helpful.\n\n========================================\n\nCode:\n```css\n@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;\n```\n\n```js\nmodule.exports = {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer')\n ],\n};\n```\n\n```js\nmodule.exports = {\n purge: [\"./src/**/*.js\"],\n theme: {\n extend: {}\n },\n variants: {},\n plugins: []\n};\n```\n\n```text\n\"scripts\": {\n \"start\": \"node scripts/start.js && postcss src/assets/styles/tailwind.css -o src/assets/styles/main.css -w\",\n \"build\": \"node scripts/build.js && postcss src/assets/styles/tailwind.css -o src/assets/styles/main.css\"\n}\n```\n\n```js\nimport \"./assets/styles/main.css\";\n// ...\n```\n\n```text\n<div className=\"w-64 h-64 bg-red-200\">hai</div>\n```\n\n```js\n// postcss.config.js\nconst purgecss = require(\"@fullhuman/postcss-purgecss\")({\n // Specify the paths to all of the template files in your project\n content: [\n \"./src/**/*.js\"\n // etc.\n ],\n\n // This is the function used to extract class names from your templates\n defaultExtractor: (content) => {\n // Capture as liberally as possible, including things like `h-(screen-1.5)`\n const broadMatches = content.match(/[^<>\"'`\\s]*[^<>\"'`\\s:]/g) || [];\n\n // Capture classes within other delimiters like .block(class=\"w-1/2\") in Pug\n const innerMatches = content.match(/[^<>\"'`\\s.()]*[^<>\"'`\\s.():]/g) || [];\n\n return broadMatches.concat(innerMatches);\n }\n});\n\nmodule.exports = {\n plugins: [\n require(\"tailwindcss\"),\n require(\"autoprefixer\"),\n ...(process.env.NODE_ENV === \"production\" ? [purgecss] : [])\n ]\n};\n```\n\n```text\npostcss.config.js\n```\n\n```text\n// postcss.config.js\nmodule.exports = {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer')\n ]\n}\n```\n\n```text\n//tailwind.config.js\nmodule.exports = {\n purge: [\n './src/**/*.js'\n ],\n theme: {\n extend: {},\n },\n variants: {},\n plugins: [],\n}\n```\n\n```text\n// package.json\n \"scripts\": {\n \"start\": \"npm run build:css && react-scripts start\",\n \"build\": \"NODE_ENV=production npm run build:css && react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\",\n \"build:css\": \"postcss tailwind.css -o src/main.css\"\n },\n```\n\n```text\nNODE_ENV=production\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n purge: {\n enabled: true,\n content: ['./src/**/*.html'],\n },\n // ...\n}\n```\n\n========================================\n\nComments:\n- yes, i didnt put the NODE_ENV production. it works now","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":254,"estimatedTokens":1241}}721{"id":"stack-70384110","source":"stackoverflow","questionId":70384110,"title":"TailwindCSS 3 + Symfony / webpack Encore Not Styling?","tags":["symfony","webpack","tailwind-css","postcss","webpack-encore"],"text":"Title: TailwindCSS 3 + Symfony / webpack Encore Not Styling?\nTags: symfony, webpack, tailwind-css, postcss, webpack-encore\nSource: Stack Overflow\n\nQuestion:\nI updated to TailwindCSS 3 in a symfony 6 app. When I compile the stylesheets there are no errors (it compiles successfully) but none of the tailwind class styles work. I notice the imports for tailwind don't seem to be translating from the @tailwindcss calls (they are just included as-is in the browser). Maybe a postCSS issue?\n\n`webpack.config.js`:\n\n```\nconst Encore = require('@symfony/webpack-encore');\nconst path = require('path');\n\n// Manually configure the runtime environment if not already configured yet by the \"encore\" command.\n// It's useful when you use tools that rely on webpack.config.js file.\nif (!Encore.isRuntimeEnvironmentConfigured()) {\n Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');\n}\n\nEncore\n // directory where compiled assets will be stored\n .setOutputPath('public/build/')\n // public path used by the web server to access the output path\n .setPublicPath('/build')\n // only needed for CDN's or sub-directory deploy\n //.setManifestKeyPrefix('build/')\n\n .copyFiles([\n {\n from: './assets/images',\n to: 'images/[path][name].[ext]',\n }\n ])\n\n /*\n * ENTRY CONFIG\n *\n * Each entry will result in one JavaScript file (e.g. app.js)\n * and one CSS file (e.g. app.css) if your JavaScript imports CSS.\n */\n\n .addEntry('main', './assets/main.js')\n\n .addEntry('admin', './assets/admin.js')\n\n // When enabled, Webpack \"splits\" your files into smaller pieces for greater optimization.\n .splitEntryChunks()\n\n // will require an extra script tag for runtime.js\n // but, you probably want this, unless you're building a single-page app\n .enableSingleRuntimeChunk()\n\n /*\n * FEATURE CONFIG\n *\n * Enable & configure other features below. For a full\n * list of features, see:\n * https://symfony.com/doc/current/frontend.html#adding-more-features\n */\n .cleanupOutputBeforeBuild()\n .enableBuildNotifications()\n .enableSourceMaps(!Encore.isProduction())\n // enables hashed filenames (e.g. app.abc123.css)\n .enableVersioning(Encore.isProduction())\n\n .configureBabel((config) => {\n config.plugins.push('@babel/plugin-proposal-class-properties');\n })\n\n // enables @babel/preset-env polyfills\n .configureBabelPresetEnv((config) => {\n config.useBuiltIns = 'usage';\n config.corejs = 3;\n })\n\n // enables Sass/SCSS support\n .enableSassLoader()\n\n // Enable PostCSS loader\n .enablePostCssLoader((options) => {\n options.postcssOptions = {\n // the directory where the postcss.config.js file is stored\n config: './postcss.config.js',\n };\n })\n\n .splitEntryChunks()\n;\n\nmodule.exports = Encore.getWebpackConfig();\n```\n\n`postcss.config.js`:\n\n```\nlet tailwindcss = require('tailwindcss');\n\nmodule.exports = {\n plugins: [\n tailwindcss('./tailwind.config.js'),\n require('postcss-import'),\n require('autoprefixer')\n ]\n}\n```\n\n`tailwind.config.js`:\n\n```\nmodule.exports = {\n darkMode: 'media'\n}\n```\n\n`main.css` (imported via `main.js`):\n\n```\n@import '~tailwindcss/base';\n@import '~tailwindcss/components';\n@import '~tailwindcss/utilities';\n\n/* Rest of custom content... */\n```\n\nI added `console.log()`s to the various config files and they all show as being loaded/accessed.\n\n========================================\n\nCode:\n```js\nconst Encore = require('@symfony/webpack-encore');\nconst path = require('path');\n\n// Manually configure the runtime environment if not already configured yet by the \"encore\" command.\n// It's useful when you use tools that rely on webpack.config.js file.\nif (!Encore.isRuntimeEnvironmentConfigured()) {\n Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');\n}\n\nEncore\n // directory where compiled assets will be stored\n .setOutputPath('public/build/')\n // public path used by the web server to access the output path\n .setPublicPath('/build')\n // only needed for CDN's or sub-directory deploy\n //.setManifestKeyPrefix('build/')\n\n .copyFiles([\n {\n from: './assets/images',\n to: 'images/[path][name].[ext]',\n }\n ])\n\n /*\n * ENTRY CONFIG\n *\n * Each entry will result in one JavaScript file (e.g. app.js)\n * and one CSS file (e.g. app.css) if your JavaScript imports CSS.\n */\n\n .addEntry('main', './assets/main.js')\n\n .addEntry('admin', './assets/admin.js')\n\n // When enabled, Webpack \"splits\" your files into smaller pieces for greater optimization.\n .splitEntryChunks()\n\n // will require an extra script tag for runtime.js\n // but, you probably want this, unless you're building a single-page app\n .enableSingleRuntimeChunk()\n\n /*\n * FEATURE CONFIG\n *\n * Enable & configure other features below. For a full\n * list of features, see:\n * https://symfony.com/doc/current/frontend.html#adding-more-features\n */\n .cleanupOutputBeforeBuild()\n .enableBuildNotifications()\n .enableSourceMaps(!Encore.isProduction())\n // enables hashed filenames (e.g. app.abc123.css)\n .enableVersioning(Encore.isProduction())\n\n .configureBabel((config) => {\n config.plugins.push('@babel/plugin-proposal-class-properties');\n })\n\n // enables @babel/preset-env polyfills\n .configureBabelPresetEnv((config) => {\n config.useBuiltIns = 'usage';\n config.corejs = 3;\n })\n\n // enables Sass/SCSS support\n .enableSassLoader()\n\n // Enable PostCSS loader\n .enablePostCssLoader((options) => {\n options.postcssOptions = {\n // the directory where the postcss.config.js file is stored\n config: './postcss.config.js',\n };\n })\n\n .splitEntryChunks()\n;\n\nmodule.exports = Encore.getWebpackConfig();\n```\n\n```js\nlet tailwindcss = require('tailwindcss');\n\nmodule.exports = {\n plugins: [\n tailwindcss('./tailwind.config.js'),\n require('postcss-import'),\n require('autoprefixer')\n ]\n}\n```\n\n```js\nmodule.exports = {\n darkMode: 'media'\n}\n```\n\n```css\n@import '~tailwindcss/base';\n@import '~tailwindcss/components';\n@import '~tailwindcss/utilities';\n\n/* Rest of custom content... */\n```\n\n```text\nwebpack.config.js\n```\n\n```text\npostcss.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nmain.css\n```\n\n```text\nmain.js\n```\n\n```text\nconsole.log()\n```\n\n```text\nconst defaultTheme = require('tailwindcss/defaultTheme');\nmodule.exports = {\n content: [\n \"./assets/**/*.{vue,js,ts,jsx,tsx}\",\n \"./templates/**/*.{html,twig}\",\n ],\n theme: {\n extend: {\n fontFamily: {\n sans: ['Inter var', ...defaultTheme.fontFamily.sans],\n },\n }\n },\n plugins: [],\n}\n```\n\n========================================\n\nComments:\n- Thanks, I was going to try that next. I'm guessing it is needed with 3's enabling of JIT.","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":284,"estimatedTokens":1692}}722{"id":"stack-68033134","source":"stackoverflow","questionId":68033134,"title":"Tailwind jit compiler error when running \"npm run dev\"","tags":["jit","tailwind-css","laravel-mix"],"text":"Title: Tailwind jit compiler error when running \"npm run dev\"\nTags: jit, tailwind-css, laravel-mix\nSource: Stack Overflow\n\nQuestion:\nI'm trying to run \"npm run dev,\" but it gives me an error in the end.\nI'm using Laravel Mix and Tailwind CSS.\n\n**Versions**\n\n- laravel-mix: **6.0.22**\n\n- tailwind-css: **^2.0.4**\n\n- @tailwindcss/jit: **^0.1.18**,\n\n**resources/css/app.css**\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n**webpack.mix.js**\n\n```\nmix.js('resources/js/app.js', 'public/js')\n .vue()\n .postCss(\"resources/css/app.css\", \"public/css\", [\n require('@tailwindcss/jit'),\n ])\n```\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\n purge: ['./resources/**/*.{js,vue,blade.php,css}'],\n darkMode: 'class', // or 'media' or 'class'\n theme: {\n extend: {\n }\n },\n variants: {\n extend: {},\n },\n plugins: [\n ],\n}\n```\n\nERROR in ./resources/css/app.css Module build failed (from\n./node_modules/mini-css-extract-plugin/dist/loader.js):\nModuleBuildError: Module build failed (from\n./node_modules/postcss-loader/dist/cjs.js): TypeError: Cannot read\nproperty 'theme' of undefined\nat _default (/var/www/work/node_modules/tailwindcss/lib/lib/substituteScreenAtRules.js:16:5)\nat /var/www/work/node_modules/@tailwindcss/jit/src/index.js:50:11\nat LazyResult.runOnRoot (/var/www/work/node_modules/postcss/lib/lazy-result.js:339:16)\nat LazyResult.runAsync (/var/www/work/node_modules/postcss/lib/lazy-result.js:391:26)\nat async Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:87:14)\nat processResult (/var/www/work/node_modules/webpack/lib/NormalModule.js:701:19)\nat /var/www/work/node_modules/webpack/lib/NormalModule.js:807:5\nat /var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:399:11\nat /var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:251:18\nat context.callback (/var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:124:13)\nat Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:96:7)\n\n1 ERROR in child compilations (Use 'stats.children: true' resp.\n'--stats-children' for more details) webpack compiled with 2 errors\n\n========================================\n\nCode:\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\nmix.js('resources/js/app.js', 'public/js')\n .vue()\n .postCss(\"resources/css/app.css\", \"public/css\", [\n require('@tailwindcss/jit'),\n ])\n```\n\n```js\nmodule.exports = {\n purge: ['./resources/**/*.{js,vue,blade.php,css}'],\n darkMode: 'class', // or 'media' or 'class'\n theme: {\n extend: {\n }\n },\n variants: {\n extend: {},\n },\n plugins: [\n ],\n}\n```\n\n```text\nmodule.exports = {\n mode: 'jit',\n purge: ['./resources/**/*.{js,vue,blade.php,css}'],\n theme: {\n extend: {}\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nnpm install -D laravel-mix@latest tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\n```text\nmix.js('resources/js/app.js', 'public/js')\n .postCss(\"resources/css/app.css\", \"public/css\", [\n require('tailwindcss'),\n ])\n```\n\n========================================\n\nComments:\n- Thanks a lot. Can I ask if tailwind css **2.0.4** versions doesn't support **@tailwindcss/jit** now? Because awhile ago, I didn't get such an error. I got this error after upgrading tailwindcss to 2.2 and although I tried to downgrade the tailwindcss to 2.0.4, I still got that error.\n- @ZawLinTun I'm not sure, TBH. But without Tailwind 2.1+, you'd be missing out on a lot of new features anyway. I try and keep Tailwind updated to the latest to take advantage of them.","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":135,"estimatedTokens":897}}723{"id":"stack-68117181","source":"stackoverflow","questionId":68117181,"title":"How can I center an image inside a table using Tailwind CSS?","tags":["css","tailwind-css"],"text":"Title: How can I center an image inside a table using Tailwind CSS?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've been trying for hours to center the image in this table, but I cannot make it work. The image is in the middle of this code. I hope this is a workable example.\n\n```\n\n \n @foreach($posts as $post)\n \n Title\n Image\n Status\n Action\n \n \n \n \n \n title\n {{ $post->title }}\n \n \n Image\n image ) }}\" />\n \n \n Status\n @if($post->active )\n active\n @else\n Not active\n @endif\n \n \n \n Actions\n id }})\" class=\"bg-green-500\">Edit\n id}})\" class=\"bg-red-700\">Delete \n \n \n @endforeach\n \n\n```\n\n========================================\n\nTop Answer:\nyou can add the \"flex-auto\" class.\nif you want any things show\n\n========================================\n\nCode:\n```text\n<table class=\"container mx-auto mt-2\">\n <thead>\n @foreach($posts as $post)\n <tr>\n <th class=\"p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell\">Title</th>\n <th class=\"p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell\">Image</th>\n <th class=\"p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell\">Status</th>\n <th class=\"p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell\">Action</th>\n </tr>\n </thead>\n <tbody>\n <tr class=\"bg-white lg:hover:bg-gray-100 flex lg:table-row flex-row lg:flex-row flex-wrap lg:flex-no-wrap mb-10 lg:mb-0\">\n <td class=\"w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static\">\n <span class=\"lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase\">title</span>\n {{ $post->title }}\n </td>\n <td class=\"w-full lg:w-auto p-3 text-gray-800 border border-b text-center block lg:table-cell relative lg:static\">\n <span class=\"lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase\">Image</span>\n <img class=\" text-center block w-8 h-8 rounded-full \" src=\"{{ asset('storage/photos/'. $post->image ) }}\" />\n </td>\n <td class=\"w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static\">\n <span class=\"lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase\">Status</span>\n @if($post->active )\n active\n @else\n Not active\n @endif\n \n </td>\n <td class=\"w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static\">\n <span class=\"lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase\">Actions</span>\n <x-jet-button wire:click=\"showEditPostModal({{ $post->id }})\" class=\"bg-green-500\">Edit</x-jet-button>\n <x-jet-button wire:click=\"deletePost({{ $post->id}})\" class=\"bg-red-700\">Delete</x-jet-button> \n </td>\n </tr>\n @endforeach\n </tbody>\n</table>\n```\n\n```text\nmargin: 0 auto\n```\n\n```text\nmx-auto\n```\n\n```text\nblock\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":109,"estimatedTokens":831}}724{"id":"stack-61843338","source":"stackoverflow","questionId":61843338,"title":"Why does using Tailwind with Create React App using npm-run-all cause an inital blank white screen?","tags":["reactjs","create-react-app","postcss","tailwind-css"],"text":"Title: Why does using Tailwind with Create React App using npm-run-all cause an inital blank white screen?\nTags: reactjs, create-react-app, postcss, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to incorporate tailwind into my react app. So I followed the steps outlined here https://daveceddia.com/tailwind-create-react-app/\n\nWhen I start my application (freshly created demo app), it loads a blank white screen. After refreshing the page, everything works fine. I'm confused on why the initial screen is a blank page. Any help or explanation would be appreciated.\n\nNow, if I build my tailwindcss without watching, then the react app loads with the correct css however hot-reload doesn't work for the tailwindcss and I'm not watching it for changes, so the generated css doesn't change.\n\nIf I use npm-run-all to run the react app and the postcss watch script, I get the blank white screen initially as described above. \n\nIf I use npm-run-all to run the react app and the postcss watch scrip AND don't include the tailwind.generated.css file, my react app runs and loads fine but I don't have tailwind css anymore.\n\nSeems that it only does this when I include the tailwind utilities\n`@tailwind utilities;`\n\n========================================\n\nCode:\n```text\n@tailwind utilities;\n```\n\n```text\n\"start\": \"yarn watch:css & sleep 5 && react-scripts start\"\n```\n\n========================================\n\nComments:\n- Works for me, you're a god.","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":33,"estimatedTokens":364}}725{"id":"stack-65715862","source":"stackoverflow","questionId":65715862,"title":"Image is squeezed in flex","tags":["css","tailwind-css"],"text":"Title: Image is squeezed in flex\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThe first Image is squeezed in a flex layout, I'm assuming this must be due to the long paragraph in the right column, but not sure what's causing it.\n\nHow to fix this so that image is not squeezed and the right column should grow to take remaining space?\n\n\r\n\r\n\n```\n\n \n \n \n \n Duncan Smith\n apwijd pawid jpawid jpwai jdpwai jdpawi jdpaw idjpwa idjapwi jdpawi jdpiaw jdpawi jdpawi jdpawi jdpawi jdpawi jdpaiw jdpaiw jdpiawj dpiawj dpia wjdpiaw jdpia wjpdij awdpi\n\n \n\n```\n\n========================================\n\nTop Answer:\nI've updated your code a little. The main problem was that you've put the `flex-shrink-0` in the wrong place.\n\n```\n\n \n \n \n \n Duncan Smith\n apwijd pawid jpawid jpwai jdpwai jdpawi jdpaw idjpwa idjapwi jdpawi jdpiaw jdpawi jdpawi jdpawi jdpawi jdpawi jdpaiw jdpaiw jdpiawj dpiawj dpia wjdpiaw jdpia wjpdij awdpi\n\n \n\n```\n\n========================================\n\nCode:\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n<div class=\"flex p-4\">\n <div class=\"border\">\n <img class=\"w-8 h-8 rounded-full\" src=\"https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\" alt=\"\" />\n </div>\n <div class=\"flex-col\">\n <div class=\"font-medium cursor-pointer hover:underline\">Duncan Smith</div>\n <p class=\"flex-shrink-0 border-gray-300\">apwijd pawid jpawid jpwai jdpwai jdpawi jdpaw idjpwa idjapwi jdpawi jdpiaw jdpawi jdpawi jdpawi jdpawi jdpawi jdpaiw jdpaiw jdpiawj dpiawj dpia wjdpiaw jdpia wjpdij awdpi</p>\n </div>\n</div>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n<div class=\"flex p-4\">\n <img class=\"w-8 h-8 border flex-shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\">\n <div class=\"flex-col\">\n <div class=\"font-medium cursor-pointer hover:underline\">Duncan Smith</div>\n <p class=\"flex-shrink-0 border-gray-300\">apwijd pawid jpawid jpwai jdpwai jdpawi jdpaw idjpwa idjapwi jdpawi jdpiaw jdpawi jdpawi jdpawi jdpawi jdpawi jdpaiw jdpaiw jdpiawj dpiawj dpia wjdpiaw jdpia wjpdij awdpi</p>\n </div>\n</div>\n```\n\n```text\nflex-shrink-0\n```\n\n```text\n<div class=\"flex p-4 space-x-2\">\n <div class=\"border flex-shrink-0\">\n <img class=\"w-8 h-8 rounded-full\" src=\"https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\" alt=\"\" />\n </div>\n <div>\n <div class=\"font-medium cursor-pointer hover:underline\">Duncan Smith</div>\n <p class=\"border-gray-300\">apwijd pawid jpawid jpwai jdpwai jdpawi jdpaw idjpwa idjapwi jdpawi jdpiaw jdpawi jdpawi jdpawi jdpawi jdpawi jdpaiw jdpaiw jdpiawj dpiawj dpia wjdpiaw jdpia wjpdij awdpi</p>\n </div>\n</div>\n```\n\n```text\nflex-shrink-0\n```\n\n========================================\n\nComments:\n- Show CSS for `rounded-full`. Most likely \"squeeze\" comes from image dimensions set to be non-proportional (e.g. `width: 50%; height: 345px`","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":94,"estimatedTokens":805}}726{"id":"stack-58729573","source":"stackoverflow","questionId":58729573,"title":"Tailwind CSS truncate after filling a space","tags":["css","tailwind-css"],"text":"Title: Tailwind CSS truncate after filling a space\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am building a card with Tailwind CSS and Vue.js. I want to fill a space on my card with text and truncate any remaining text that doesn't fit with an ellipsis.\n\nI have applied Tailwinds .truncate class however it only allows me to have 1 line of text before the ellipsis. I have also looked into the line-clamp property but I was hoping there would be a nicer way to do this with Tailwind.\n\n```\n\n \n \n \n \n \n \n\n### Title\n\n \n Lorem ipsum, dolor sit amet consectetur adipisicing elit.\n Tempore repellat labore distinctio maxime, debitis autem perferendis dolore, \n deleniti doloribus quia vel! Amet nisi, a vel modi officiis sapiente fugiat, \n illum delectus, incidunt repellendus suscipit. Delectus iusto eligendi, doloribus amet et fugiat,\n atque perspiciatis eveniet, ipsum inventore sed placeat sapiente maiores.\n \n\n \n \n Button 1\n Button 2\n \n \n \n \n\n```\n\nhttps://i.sstatic.net/VSxnI.png\n\n========================================\n\nTop Answer:\nUse the @tailwind/line-clamp plugin\n\n`` where `n` stands for the number of lines you want before truncating\n\n========================================\n\nCode:\n```text\n<template>\n <div class=\"p-6 w-full bg-white rounded-lg overflow-hidden shadow-lg border\">\n <div class=\"flex flex-col sm:flex-row\">\n <img src=\"img/card-default.jpg\" class=\"mx-auto\" alt=\"Card\">\n <div class=\"mt-4 overflow-hidden sm:ml-4 flex flex-col justify-between\">\n <div>\n <h2 class=\"text-gray-900 font-semibold text-lg\">Title</h2>\n <p class=\"truncate mt-2 text-gray-700 max-h-full\">\n Lorem ipsum, dolor sit amet consectetur adipisicing elit.\n Tempore repellat labore distinctio maxime, debitis autem perferendis dolore, \n deleniti doloribus quia vel! Amet nisi, a vel modi officiis sapiente fugiat, \n illum delectus, incidunt repellendus suscipit. Delectus iusto eligendi, doloribus amet et fugiat,\n atque perspiciatis eveniet, ipsum inventore sed placeat sapiente maiores.\n </p>\n </div>\n <div class=\"flex justify-around mt-4 mx-2 sm:mx-0\">\n <button class=\"mx-2 bg-indigo-600 p-2 rounded-lg text-white hover:bg-indigo-500 sm:mx-0\">Button 1</button>\n <button class=\"mx-2 bg-indigo-600 p-2 rounded-lg text-white hover:bg-indigo-500 sm:mx-0\">Button 2</button>\n </div>\n </div>\n </div>\n </div>\n</template>\n```\n\n```text\n<p className=\"line-clamp-n\">\n```\n\n```text\nn\n```\n\n```text\nmax-height\n```\n\n```text\n<p>\n```\n\n========================================\n\nComments:\n- In case you are using Tailwind v3 line-clamp is a built-in flag now, docs are here, so you can use for example text to allow text to show in 3 lines before being truncated","metadata":{"transformedAt":"2026-08-18T18:33:42.940Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":97,"estimatedTokens":744}}727{"id":"stack-59855921","source":"stackoverflow","questionId":59855921,"title":"How to pass value from one child component to another in VueJS?","tags":["javascript","vue.js","vuejs2","tailwind-css","vue-props"],"text":"Title: How to pass value from one child component to another in VueJS?\nTags: javascript, vue.js, vuejs2, tailwind-css, vue-props\nSource: Stack Overflow\n\nQuestion:\nFull source code: https://github.com/tenzan/menu-ui-tw\n\nDemo: https://flamboyant-euclid-6fcb57.netlify.com/\n\n***Goal:***\n\n`ItemsList` and `ItemImage` are child components to `Menu.vue`. I need to pass the `image_url` from `ItemsList` to `ItemImage`, in order to change the image on right, after item on left is changed automatically on time intervals.\n\n- Left side: component `ItemsList.vue`\n\n- Right side: component `ItemImage.vue`\n\nhttps://i.sstatic.net/1BNsE.png\n\nComponent **Menu.vue** has 2 child components:\n\n```\n\n \n \n \n \n \n \n \n \n \n \n \n\nimport ItemsList from \"./ItemsList\";\nimport ItemImage from \"./ItemImage\";\n\nexport default {\n components: {\n ItemsList,\n ItemImage\n }\n};\n\n```\n\n**ItemsList.vue:**\n\n```\n\n \n \n \n \n {{ item.name }}\n \n\n \n {{ item.price }}\n \n\n \n \n \n\nexport default {\n data() {\n return {\n menuItems: [\n {\n name: \"Apple\",\n price: 20,\n image_url: \"../assets/images/apple.jpg\"\n },\n {\n name: \"Orange\",\n price: 21,\n image_url: \"../assets/images/orange.jpg\"\n },\n {\n name: \"Banana\",\n price: 22,\n image_url: \"../assets/images/banana.jpg\"\n },\n {\n name: \"Grape\",\n price: 23,\n image_url: \"../assets/images/grape.jpg\"\n }\n ]\n };\n },\n created() {\n var self = this;\n self.menuItems.map((x, i) => {\n self.$set(self.menuItems[i], \"highlight\", false);\n });\n var init = 0;\n setInterval(function() {\n if (init === self.menuItems.length) {\n init = 0;\n }\n self.menuItems[init].highlight = true;\n if (init === 0) {\n self.menuItems[self.menuItems.length - 1].highlight = false;\n } else {\n self.menuItems[init - 1].highlight = false;\n }\n init++;\n }, 2000);\n }\n};\n\n.highlight {\n background-color: gray;\n}\n\n```\n\n**ItemImage.vue** - *almost empty*\n\n```\n\n Hello from ItemImage component\n\nexport default {\n props: [\"image_url\"]\n};\n\n```\n\n**ItemsList** iterates through each item and highlights it.\nI will need component **ItemImage** to show an image for that *active/highlighted* item.\nURL for an image is `item.image_url` .\n\n========================================\n\nTop Answer:\nYou can try with emitting an event from the child to the parent component.\n\nIn your child component **ItemsList.vue**, emit an event to the parent component (where the highlight property is set to true):\n\n```\ncreated() {\n var self = this;\n self.menuItems.map((x, i) => {\n self.$set(self.menuItems[i], \"highlight\", false);\n });\n var init = 0;\n setInterval(function() {\n if (init === self.menuItems.length) {\n init = 0;\n }\n self.menuItems[init].highlight = true;\n \n //emit an event to trigger parent event\n this.$emit('itemIsHighlighted', menuItems[init].image_url)\n \n if (init === 0) {\n self.menuItems[self.menuItems.length - 1].highlight = false;\n } else {\n self.menuItems[init - 1].highlight = false;\n }\n init++;\n }, 2000);\n }\n```\n\nThen in your parent component **Menu.vue**:\n\n```\n\n...\n\nexport default {\n data() {\n return {\n selectedItem: '' \n } \n }, \n methods: {\n onItemHighlighted(value) {\n console.log(value) // someValue\n this.selectedItem = value\n }\n }\n}\n```\n\nI couldn't test it, but I hope it helps.\n\nYou can also check this answer here.\n\nP.S. Using Vuex would make this task a lot easier.\n\n========================================\n\nCode:\n```text\n<template>\n <div>\n <!-- Two columns -->\n <div class=\"flex mb-4\">\n <div class=\"w-1/2 bg-gray-400\">\n <ItemsList />\n </div>\n <div class=\"w-1/2 bg-gray-500\">\n <ItemImage></ItemImage>\n </div>\n </div>\n </div>\n</template>\n\n<script>\nimport ItemsList from \"./ItemsList\";\nimport ItemImage from \"./ItemImage\";\n\nexport default {\n components: {\n ItemsList,\n ItemImage\n }\n};\n</script>\n```\n\n```text\n<template>\n <div>\n <div v-for=\"item in menuItems\" :key=\"item.name\">\n <ul\n class=\"flex justify-between bg-gray-200\"\n :class=\"item.highlight ? 'highlight' : ''\"\n >\n <p class=\"px-4 py-2 m-2\">\n {{ item.name }}\n </p>\n <p class=\"px-4 py-2 m-2\">\n {{ item.price }}\n </p>\n </ul>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n menuItems: [\n {\n name: \"Apple\",\n price: 20,\n image_url: \"../assets/images/apple.jpg\"\n },\n {\n name: \"Orange\",\n price: 21,\n image_url: \"../assets/images/orange.jpg\"\n },\n {\n name: \"Banana\",\n price: 22,\n image_url: \"../assets/images/banana.jpg\"\n },\n {\n name: \"Grape\",\n price: 23,\n image_url: \"../assets/images/grape.jpg\"\n }\n ]\n };\n },\n created() {\n var self = this;\n self.menuItems.map((x, i) => {\n self.$set(self.menuItems[i], \"highlight\", false);\n });\n var init = 0;\n setInterval(function() {\n if (init === self.menuItems.length) {\n init = 0;\n }\n self.menuItems[init].highlight = true;\n if (init === 0) {\n self.menuItems[self.menuItems.length - 1].highlight = false;\n } else {\n self.menuItems[init - 1].highlight = false;\n }\n init++;\n }, 2000);\n }\n};\n</script>\n\n<style scoped>\n.highlight {\n background-color: gray;\n}\n</style>\n```\n\n```text\n<template>\n <div><p>Hello from ItemImage component</p></div>\n</template>\n\n<script>\nexport default {\n props: [\"image_url\"]\n};\n</script>\n```\n\n```text\nItemsList\n```\n\n```text\nItemImage\n```\n\n```text\nMenu.vue\n```\n\n```text\nimage_url\n```\n\n```text\nItemsList\n```\n\n```text\nItemImage\n```\n\n```text\nItemsList.vue\n```\n\n```text\nItemImage.vue\n```\n\n```text\nitem.image_url\n```\n\n```text\ncreated() {\n var self = this;\n self.menuItems.map((x, i) => {\n self.$set(self.menuItems[i], \"highlight\", false);\n });\n var init = 0;\n setInterval(function() {\n if (init === self.menuItems.length) {\n init = 0;\n }\n self.menuItems[init].highlight = true;\n \n //emit an event to trigger parent event\n this.$emit('itemIsHighlighted', menuItems[init].image_url)\n \n if (init === 0) {\n self.menuItems[self.menuItems.length - 1].highlight = false;\n } else {\n self.menuItems[init - 1].highlight = false;\n }\n init++;\n }, 2000);\n }\n```\n\n```text\n<ItemsList @itemIsHighlighted=\"onItemHighlighted\"/>\n<ItemImage :image_url=\"this.selectedItem\" ></ItemImage>\n\n...\n\nexport default {\n data() {\n return {\n selectedItem: '' \n } \n }, \n methods: {\n onItemHighlighted(value) {\n console.log(value) // someValue\n this.selectedItem = value\n }\n }\n}\n```\n\n========================================\n\nComments:\n- Thanks. I can't test at the moment, but I won't be clicking. I see you mentioned a @click event...\n- Sorry, I didn't realize that the rows are selected on time intervals. Then you just have to put the emitting event in the `setInterval()` function, where the property `highlight` is set to `true`. I updated my answer.","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":403,"estimatedTokens":1748}}728{"id":"stack-77950365","source":"stackoverflow","questionId":77950365,"title":"How to use not operator when using state variables in tailwind?","tags":["css","tailwind-css"],"text":"Title: How to use not operator when using state variables in tailwind?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nLet's say I have a h1 tag like this:\n\n```\n\n### content\n\n```\n\nHow can I use tailwind(maybe with some not operator based on my last search results but I still don't know how) to do `animate-fade-in` when `position` is not equal to `mid`?\nThere are three general choices on position attribute: `left`, `right` and `mid`\n\n========================================\n\nTop Answer:\nThe closest that I could get to was something like this:\n\n```\n\n### content\n\n```\n\nWhich `$=` is an attribute selector and works when the attribute data value ends with that letter 't' and I did that because there are three general choices on `position` attribute: `left`, `right` and `mid`\nAs it is obvious the `left` and `right` words end in `t` so I can enable and disable different animations based on that.\n\nI'm sure there is a better way and if you know it, I'll be pretty happy to know that.\n\n========================================\n\nCode:\n```html\n<h1 data-position=\"left\" class=\"data-[position=mid]:animate-fade-out\">content</h1>\n```\n\n```text\nanimate-fade-in\n```\n\n```text\nposition\n```\n\n```text\nmid\n```\n\n```text\nleft\n```\n\n```text\nright\n```\n\n```text\nmid\n```\n\n```html\n<h1 data-position=\"left\" class=\"[&:not([data-position=mid])]:animate-fade-out\">content</h1>\n```\n\n```text\n[&:not([data-position=mid])]\n```\n\n```text\ndata-position=\"mid\"\n```\n\n```text\n[&<CSS-selector>]\n```\n\n```text\n:not()\n```\n\n```text\ndata-position\n```\n\n```text\nmid\n```\n\n```text\n[data-position=mid]\n```\n\n```html\n<h1 data-position=\"left\" class=\"animate-fade-in data-[position=mid]:animate-fade-out\">\n content\n</h1>\n```\n\n```html\n<h1 data-position=\"left\" class=\"data-[position=mid]:animate-fade-out data-[position$=t]:animate-fade-in\">content</h1>\n```\n\n```text\n$=\n```\n\n```text\nposition\n```\n\n```text\nleft\n```\n\n```text\nright\n```\n\n```text\nmid\n```\n\n```text\nleft\n```\n\n```text\nright\n```\n\n```text\nt\n```\n\n========================================\n\nComments:\n- This isn't what I want, I want to have fade-in animation when position is not mid and have fade-out animation when position is mid.\n- Tried this one out before. Doesn't work either and the reason is that the animate-fade-out goes away but its effect stays long after fade-out is removed because we are applying fade-in once, it doesn't repeat again after fade-out is removed and the object stays hidden and invisible and the object doesn't do the fade-in animation.\n- @Mahmood can you please a minimal reproducible code of the situation?","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":25,"totalLines":143,"estimatedTokens":639}}729{"id":"stack-73240805","source":"stackoverflow","questionId":73240805,"title":"Text color not changing using NextJS with Tailwind CSS","tags":["reactjs","next.js","tailwind-css"],"text":"Title: Text color not changing using NextJS with Tailwind CSS\nTags: reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn my NextJS app I'm using an `` tag for the text and wrap it in a `` but when I try to apply a color to the text, it doesn't work. I even added in my `global.css` but it throws an error.\n\n```\n\n \n \n\n### some text here\n\n \n```\n\nThe code above does not throw an error, but it also doesn't apply the style to the text.\n\n**styles/global.css**\n\n```\n@tailwind base;\n @tailwind components;\n @tailwind utilities;\n \n @layer base{\n body{\n @apply bg-[#06202A] text-gray-300; \n }\n }\n```\n\nApplying styles in the base layer (above) throws the following error.\n\n.../styles/globals.css The `text-gray-300` class does not exist. If `text-gray-300` is a custom class, make sure it is defined within a `@layer` directive.\n\n**tailwind.config.js**\n\n```\n@type {import('tailwindcss').Config} */\n module.exports = {\n mode: \"jit\",\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n colors: {\n 'main-bg-color': '#02172F',\n 'text-gray-color': '#fff'\n },\n extend: {},\n },\n plugins: [],\n }\n```\n\n**postcss.config.js**\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n }\n```\n\nWhy is this not working?\n\n========================================\n\nTop Answer:\nI've read tailwindcss config in nextjs and i saw that the tailwind config file is different if you choose .src folder or not when npx create next app. This solved my problem: https://tailwindcss.com/docs/guides/nextjs\n\n```\ncontent: [\n\"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n\"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n\"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n\n// Or if using `src` directory:\n\"./src/**/*.{js,ts,jsx,tsx,mdx}\",\n```\n\n],\n\n========================================\n\nCode:\n```text\n<div className=\"mt-2 flex justify-start items-center text-2xl font-bold text-gray-300\">\n <Image \n src={Logo}\n width={40}\n height={40}\n />\n <h1>some text here</h1>\n </div>\n```\n\n```css\n@tailwind base;\n @tailwind components;\n @tailwind utilities;\n \n @layer base{\n body{\n @apply bg-[#06202A] text-gray-300; \n }\n }\n```\n\n```js\n@type {import('tailwindcss').Config} */\n module.exports = {\n mode: \"jit\",\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n colors: {\n 'main-bg-color': '#02172F',\n 'text-gray-color': '#fff'\n },\n extend: {},\n },\n plugins: [],\n }\n```\n\n```js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n }\n```\n\n```text\n<h1>\n```\n\n```text\n<div>\n```\n\n```text\nglobal.css\n```\n\n```text\ntext-gray-300\n```\n\n```text\ntext-gray-300\n```\n\n```text\n@layer\n```\n\n```js\nmodule.exports = {\n mode: \"jit\",\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {\n colors: {\n 'main-bg-color': '#02172F',\n 'text-gray-color': '#fff'\n },\n },\n },\n plugins: [],\n}\n```\n\n```text\nextend\n```\n\n```text\nmode\n```\n\n```text\ncontent: [\n\"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n\"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n\"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n\n// Or if using `src` directory:\n\"./src/**/*.{js,ts,jsx,tsx,mdx}\",\n```\n\n========================================\n\nComments:\n- Could you also include your `tailwind.config.js` and `postcss.config.js` files in your question?\n- Does this answer your question? Tailwind classes not reflecting on heading elements\n- @EdLucas i have included.\n- Declaring a color this way `'text-gray-color': '#fff'` will require you to use it like this `text-text-gray-color`.","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":210,"estimatedTokens":939}}730{"id":"stack-78236550","source":"stackoverflow","questionId":78236550,"title":"not able to target element","tags":["css","sass","css-selectors","tailwind-css"],"text":"Title: not able to target element\nTags: css, sass, css-selectors, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have HTML Like this\n\n```\n\n \n \n\n```\n\nI want to change the margin-bottom of class-3 only when element2 has `removePadding` attribute, I tried like this\n\n```\nelement1 element2[removePadding] element1 element3.class-3 {\n margin-top: 20px;\n}\n```\n\nbut this didn't work.\n\nI want to target that `class-3` *only when* element2 has `removePadding` attribute\n\n========================================\n\nTop Answer:\nTry using a combination of the sibling selector with the class-3 selector:\n\n```\nelement1 element2[removePadding] ~.class-3 {\n margin-bottom: ...\n}\n```\n\nAs the other comment mentioned, CSS selectors can only go down/next and not up/previous.\n\n========================================\n\nCode:\n```text\n<element1 class=\"class__1\">\n <element2 removePadding></element2>\n <element3 class=\"class-3\"></element3>\n</element>\n```\n\n```text\nelement1 element2[removePadding] element1 element3.class-3 {\n margin-top: 20px;\n}\n```\n\n```text\nremovePadding\n```\n\n```text\nclass-3\n```\n\n```text\nremovePadding\n```\n\n```css\ndiv div[data-removePadding] + div.class-3 {\n margin-top: 20px;\n background: red;\n}\n\ndiv {\n border: 1px solid #020202;\n padding: 5px;\n box-sizing: border-box;\n}\n```\n\n```html\n<div class=\"class__1\">\n <div data-removePadding=\"\"></div>\n <div class=\"class-3\"></div>\n</div>\n```\n\n```text\nelement1 element2[removePadding] element1\n```\n\n```text\nelement1\n```\n\n```text\nelement3\n```\n\n```text\nelement2\n```\n\n```text\n+\n```\n\n```text\nelement1 element2[removePadding] ~.class-3 {\n margin-bottom: ...\n}\n```\n\n```text\nelement1:has( > element2[removePadding] ) > element3.class-3 {\n /* your code goes here */\n}\n```\n\n```text\n:has\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":122,"estimatedTokens":437}}731{"id":"stack-47381149","source":"stackoverflow","questionId":47381149,"title":"Angular 4 TalwindCSS setup","tags":["css","angular","configure","tailwind-css"],"text":"Title: Angular 4 TalwindCSS setup\nTags: css, angular, configure, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIs there a way to configure TailwindCSS with Angular (4+)?\n\nI'm happy to eject the Angular project, to make webpack configuration available. But I'm not sure what to put in the `webpack.config.js` so that TailwindCSS works nicely with the internals of Angular.\n\nIt would be great to have a setup such that I can still use a single command for dev (something like `npm start`), and continue to file changes watched (including CSS). Same for building the project.\n\n========================================\n\nTop Answer:\nI put together some JavaScript using chokidar to watch my tailwind files and build them out when changes occur in my tailwind files, since Angular (as of 6.0.3, to the best of my knowledge) does not allow access to the postcss plugins in a CLI project (which is totally the way to go, in my humble opinion).\n\nchokidar.js (top-level file, right next to package.json):\n\n```\nconst chokidar = require('chokidar')\nconst child = require('child_process')\n\nconst tailwind = chokidar.watch(['tailwind.js', './src/tailwind.css'])\n\ntailwind.on('change', (event, path) => {\n child.exec('npm run build-tailwind')\n console.log('Reprocessing Tailwind Files')\n})\n```\n\npackage.json scripts:\n\n```\n\"scripts\": {\n \"ng\": \"ng\",\n \"build-tailwind\": \"./node_modules/.bin/tailwind build ./src/tailwind.css -c ./tailwind.js -o ./src/styles.css\",\n \"prestart\": \"npm run build-tailwind\",\n \"start\": \"ng serve & node chokidar.js\",\n \"build\": \"npm run prestart && ng build\"\n}\n```\n\nAs you can see from the build-tailwind script, I just put `tailwind.css` in the `src/` folder with the global `styles.css`, and all of my custom css goes there like any other tailwind project.\n\ntailwind.css:\n\n```\n@tailwind preflight;\n\n/* custom components */\n\n@tailwind utilities;\n\n/* custom utilities */\n```\n\nI hope that helps somebody while we wait for Angular to give us access to post-css directly.\n\n**UPDATE:**\n\nI built a cli tool for npm, to make this super easy on anyone else trying to take advantage of what tailwind offers in their angular projects.\n\nhttps://www.npmjs.com/package/ng-tailwindcss\n\n========================================\n\nCode:\n```text\nwebpack.config.js\n```\n\n```text\nnpm start\n```\n\n```text\n$ ng new project --style=scss\n```\n\n```text\n$ cd project\n$ npm install tailwindcss --save-dev \n$ ./node_modules/.bin/tailwind init tailwind.config.js\n```\n\n```text\n$ ng eject\n$ npm install\n```\n\n```text\nconst tailwindcss = require('tailwindcss'); // <-- create this constant\n...\n\nconst postcssPlugins = function () {\n ...\n return [\n postcssUrl({\n ...\n }),\n tailwindcss('./tailwind.config.js'), //<-- then add it here\n autoprefixer(),\n ...\n };\n```\n\n```text\n@tailwind preflight;\n\n// your custom components goes here.\n\n@tailwind utilities;\n\n// your custom utilities goes here.\n```\n\n```text\n$ npm start\n```\n\n```text\n$ ng new project\n$ cd project\n$ npm install tailwindcss --save-dev \n$ ./node_modules/.bin/tailwind init tailwind.config.js\n```\n\n```text\n@tailwind preflight;\n\n// your custom components goes here.\n\n@tailwind utilities;\n\n// your custom utilities goes here.\n```\n\n```text\n{\n ...\n \"scripts\": {\n ...\n \"tailwind\": \"./node_modules/.bin/tailwind build ./src/tailwind-build.css -c ./tailwind.config.js -o ./src/styles.css\",\n \"prestart\": \"npm run tailwind\" // or \"yarn run tailwind\" depending on which you are using\n }\n},\n```\n\n```text\nnpm run tailwind // or \"yarn run tailwind\"\n```\n\n```text\nstyles.css\n```\n\n```text\ntailwind-build.css\n```\n\n```text\nscript\n```\n\n```text\n./src/styles.css\n```\n\n```text\nconst chokidar = require('chokidar')\nconst child = require('child_process')\n\nconst tailwind = chokidar.watch(['tailwind.js', './src/tailwind.css'])\n\ntailwind.on('change', (event, path) => {\n child.exec('npm run build-tailwind')\n console.log('Reprocessing Tailwind Files')\n})\n```\n\n```text\n\"scripts\": {\n \"ng\": \"ng\",\n \"build-tailwind\": \"./node_modules/.bin/tailwind build ./src/tailwind.css -c ./tailwind.js -o ./src/styles.css\",\n \"prestart\": \"npm run build-tailwind\",\n \"start\": \"ng serve & node chokidar.js\",\n \"build\": \"npm run prestart && ng build\"\n}\n```\n\n```text\n@tailwind preflight;\n\n/* custom components */\n\n@tailwind utilities;\n\n/* custom utilities */\n```\n\n```text\ntailwind.css\n```\n\n```text\nsrc/\n```\n\n```text\nstyles.css\n```\n\n```text\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.scss$/,\n loader: 'postcss-loader',\n options: {\n ident: 'postcss',\n syntax: 'postcss-scss',\n plugins: () => [\n require('postcss-import'),\n require('tailwindcss')('./tailwind.config.js'),\n ]\n }\n }\n ]\n }\n};\n```\n\n```text\n...\n\"build\": {\n \"builder\": \"@angular-builders/custom-webpack:browser\",\n \"options\": {\n \"customWebpackConfig\": {\n \"path\": \"webpack.config.js\"\n },\n ...\n }\n},\n...\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nnpm install -D @angular-builders/custom-webpack postcss-scss tailwindcss\n```\n\n```text\nwebpack.config.js\n```\n\n```text\nangular.json\n```\n\n```text\nstyles.scss\n```\n\n```text\nnpm start\n```\n\n========================================\n\nComments:\n- I made the tutorial here if you guys want to take a look. It is proven working with AOT and latest Angular 9, also compatible with the previous version as well. You will need `@fullhuman/postcss-purgecss` plugin to remove unused CSS class from Tailwind. If you don't include that plugin, it will result in a massive bundle size of CSS. github.com/trungk18/angular-tailwind-css-configuration\n- As noted by ThanapongP., I get an \"atRule.before...\" error.\n- I made this the chosen answer, as using the latest angular version (from angular cli 1.6.0) produces the desired result.\n- @HackAfro What I did was delete the node_modules folder and then delete all the postcss stuff in package.json. After that I use `npm install postcss --save-dev`, `npm install postcss-loader --save-dev` and `npm install postcss-url --save-dev` to install the latest version of those dependencies.\n- I installed the latest postcss, and the error goes away. Running npm start (effectively 'webpack-dev-server --port=4200'), serves the application. However the tailwind styles do not seem to be coming through to the components.\n- I tried again, with the latest angular version (angular cli 1.6.0) and it produces the desired result","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":30,"totalLines":282,"estimatedTokens":1615}}732{"id":"stack-74493982","source":"stackoverflow","questionId":74493982,"title":"TailwindCSS nesting not working with postCSS config","tags":["nested","tailwind-css","postcss","postcss-import"],"text":"Title: TailwindCSS nesting not working with postCSS config\nTags: nested, tailwind-css, postcss, postcss-import\nSource: Stack Overflow\n\nQuestion:\nI am trying to scope tailwind styles and I am using this postcss config from Tailwind docs:\n\n```\nmodule.exports = {\nplugins: {\n 'postcss-import': {},\n 'tailwindcss/nesting': {},\n tailwindcss: {},\n autoprefixer: {},\n }\n}\n```\n\nand here is my css\n\n```\n.app-wrapper {\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n }\n```\n\nwith this config the nesting is working fine but not all the tailwindCSS classes working as expected.\n\nbut when I change the config to the following\n\n```\nmodule.exports = {\n plugins: [\n require('postcss-import'),\n require('tailwindcss/nesting'),\n require('tailwindcss'),\n require('autoprefixer'),\n ]\n};\n```\n\nthe classes works fine but the nesting throw the following error\n\nNested @tailwind rules were detected, but are not supported.\n\nany idea how I can get the tailwind to work as expected with the nesting enabled?\n\n========================================\n\nCode:\n```text\nmodule.exports = {\nplugins: {\n 'postcss-import': {},\n 'tailwindcss/nesting': {},\n tailwindcss: {},\n autoprefixer: {},\n }\n}\n```\n\n```text\n.app-wrapper {\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n }\n```\n\n```text\nmodule.exports = {\n plugins: [\n require('postcss-import'),\n require('tailwindcss/nesting'),\n require('tailwindcss'),\n require('autoprefixer'),\n ]\n};\n```\n\n```js\n// postcss.config.js\n\nmodule.exports = {\n plugins: {\n 'postcss-import': {},\n 'tailwindcss/nesting': {},\n tailwindcss: {},\n autoprefixer: {},\n }\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\n// tailwind.config.js\n\nmodule.exports = {\n important: '.app-wrapper',\n // ...\n};\n```\n\n```css\n.app-wrapper .text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n```\n\n```js\nmodule.exports = {\n darkMode: 'class',\n important: '.app-wrapper',\n // ...\n};\n```\n\n```css\n.app-wrapper .dark .dark\\:text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n```\n\n```text\nimportant: '.app-wrapper',\n```\n\n```text\n@tailwind\n```\n\n```text\ntext-red-500\n```\n\n```text\ndark:text-white\n```\n\n```text\ndark\n```\n\n```text\napp-wrapper\n```\n\n```text\nhtml\n```\n\n```text\nbody\n```\n\n========================================\n\nComments:\n- one problem is that base styles not being prefixed with `.app-wrapper`. Wondering if there is a way to make it work?\n- @Vytalyi doubt aboit it. `base` styles basically are normalizeCSS and only injects preflights and not handles them in Tailwind way like utilities (no purging, JIT, etc).","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":17,"totalLines":171,"estimatedTokens":673}}733{"id":"stack-77338809","source":"stackoverflow","questionId":77338809,"title":"How to overwrite tailwind class on old class like !important in css","tags":["css","tailwind-css","react-bootstrap","tailwind-ui"],"text":"Title: How to overwrite tailwind class on old class like !important in css\nTags: css, tailwind-css, react-bootstrap, tailwind-ui\nSource: Stack Overflow\n\nQuestion:\nI used `text-[20px]` in ``, but it's overridden by another css class, how can I override `tailwind` the class\n\n\r\n\r\n\n```\n\n 1\n\n```\n\n========================================\n\nTop Answer:\nAnother thing I found handy when dealing with situations like this is that using your own custom class could increase the specificity and override Tailwind's base styles.\n\nIn your case, you can define a class in your stylesheet like:\n\n```\n.badge-text {\n @apply text-[20px];\n}\n```\n\nThen your template can go as:\n\n```\n\n 1\n\n```\n\nThis has worked for me in many cases.\n\n========================================\n\nCode:\n```html\n<Badge\n label=\"1\"\n className='w-[30px] h-[30px] p-6 ml-4 text-[20px]'\n style={{ lineHeight: '20px'}}>\n 1\n</Badge>\n```\n\n```text\ntext-[20px]\n```\n\n```text\n<Badge/>\n```\n\n```text\ntailwind\n```\n\n```text\n<Badge\n label=\"1\"\n className='w-[30px] h-[30px] p-6 ml-4 !text-[20px]'\n style={{ lineHeight: '20px'}}>\n 1\n</Badge>\n```\n\n```text\n// Add `-:` prefix in the badge component\nconst Badge = ({className, children}) => {\n className = '-:text-base ' + className;\n return <button class={className}>{ children }</button>\n}\n\n// The class without the `-:` will be applied\n<Badge className=\"text-[20px]\">1</Badge>\n```\n\n```text\n!\n```\n\n```text\n[&&]:\n```\n\n```text\n<Badge>\n```\n\n```html\n<Badge\n label=\"1\"\n className='w-[30px] h-[30px] p-6 ml-4 [&&]:text-[20px]'\n style={{ lineHeight: '20px'}}>\n 1\n </Badge>\n```\n\n```text\ntext-[20px]\n```\n\n```text\n.badge-text {\n @apply text-[20px];\n}\n```\n\n```text\n<Badge\n label=\"1\"\n className='w-[30px] h-[30px] p-6 ml-4 badge-text'\n style={{ lineHeight: '20px'}}>\n 1\n</Badge>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":122,"estimatedTokens":446}}734{"id":"stack-76590507","source":"stackoverflow","questionId":76590507,"title":"How to remove steps from being over the drawer","tags":["css","tailwind-css","svelte","sveltekit","daisyui"],"text":"Title: How to remove steps from being over the drawer\nTags: css, tailwind-css, svelte, sveltekit, daisyui\nSource: Stack Overflow\n\nQuestion:\nI'm using DaisyUI and TailwindCSS\n\nI'm using a drawer and steps.\n\n```\n\n \n \n \n Open drawer\n \n \n- Register\n \n- Choose plan\n \n- Purchase\n \n- Receive Product\n \n \n \n \n \n \n \n- Sidebar Item 1\n \n- Sidebar Item 2\n \n \n\n```\n\nThe code is the copy/paste from the first example of the drawer and steps component from DaisyUI.\n\nhttps://i.sstatic.net/GdPgP.png\n\nWhen I click on *\"OPEN DRAWER\"* to open the drawer, the circle of the steps remains above it:\n\nhttps://i.sstatic.net/ihjQ2.png\n\nHow to make the drawer be over the step circles?\n\n========================================\n\nTop Answer:\nConsider increasing the z-stack position of the `.drawer-side` element by applying `z-index: 10` to it via the `z-10` utility class:\n\n\r\n\r\n\n```\n\n \n \n \n Open drawer\n \n \n- Register\n \n- Choose plan\n \n- Purchase\n \n- Receive Product\n \n \n \n \n \n \n \n- Sidebar Item 1\n \n- Sidebar Item 2\n \n \n\n```\n\n========================================\n\nCode:\n```html\n<div class=\"drawer\">\n <input id=\"my-drawer\" type=\"checkbox\" class=\"drawer-toggle\" />\n <div class=\"drawer-content\">\n <!-- Page content here -->\n <label for=\"my-drawer\" class=\"btn btn-primary drawer-button\">Open drawer</label>\n <ul class=\"steps\">\n <li class=\"step step-primary\">Register</li>\n <li class=\"step step-primary\">Choose plan</li>\n <li class=\"step\">Purchase</li>\n <li class=\"step\">Receive Product</li>\n </ul>\n </div>\n <div class=\"drawer-side\">\n <label for=\"my-drawer\" class=\"drawer-overlay\" />\n <ul class=\"menu p-4 w-80 h-full bg-base-200 text-base-content\">\n <!-- Sidebar content here -->\n <li><a>Sidebar Item 1</a></li>\n <li><a>Sidebar Item 2</a></li>\n </ul>\n </div>\n</div>\n```\n\n```html\n<ul class=\"steps isolate\">\n```\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/daisyui/3.1.7/full.min.css\" integrity=\"sha512-XCyMGudVghtcrEkHUSNd/OvlbxUYXLeI0bYO4jm3Tn1olsupuMnMmRRecHPy0kY/AJI2gc6mTzzCPY5DCsPRCg==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"\n/>\n<script src=\"https://cdn.tailwindcss.com/3.3.2\"></script>\n\n<div class=\"drawer\">\n <input id=\"my-drawer\" type=\"checkbox\" class=\"drawer-toggle\" />\n <div class=\"drawer-content\">\n <!-- Page content here -->\n <label for=\"my-drawer\" class=\"btn btn-primary drawer-button\">Open drawer</label>\n <ul class=\"steps isolate\">\n <li class=\"step step-primary\">Register</li>\n <li class=\"step step-primary\">Choose plan</li>\n <li class=\"step\">Purchase</li>\n <li class=\"step\">Receive Product</li>\n </ul>\n </div>\n <div class=\"drawer-side\">\n <label for=\"my-drawer\" class=\"drawer-overlay\"></label>\n <ul class=\"menu p-4 w-80 h-full bg-base-200 text-base-content\">\n <!-- Sidebar content here -->\n <li><a>Sidebar Item 1</a></li>\n <li><a>Sidebar Item 2</a></li>\n </ul>\n </div>\n</div>\n```\n\n```text\nisolation\n```\n\n```text\nsteps\n```\n\n```text\nsteps\n```\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/daisyui/3.1.7/full.min.css\" integrity=\"sha512-XCyMGudVghtcrEkHUSNd/OvlbxUYXLeI0bYO4jm3Tn1olsupuMnMmRRecHPy0kY/AJI2gc6mTzzCPY5DCsPRCg==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"\n/>\n<script src=\"https://cdn.tailwindcss.com/3.3.2\"></script>\n\n<div class=\"drawer\">\n <input id=\"my-drawer\" type=\"checkbox\" class=\"drawer-toggle\" />\n <div class=\"drawer-content\">\n <!-- Page content here -->\n <label for=\"my-drawer\" class=\"btn btn-primary drawer-button\">Open drawer</label>\n <ul class=\"steps\">\n <li class=\"step step-primary\">Register</li>\n <li class=\"step step-primary\">Choose plan</li>\n <li class=\"step\">Purchase</li>\n <li class=\"step\">Receive Product</li>\n </ul>\n </div>\n <div class=\"drawer-side z-10\">\n <label for=\"my-drawer\" class=\"drawer-overlay\"></label>\n <ul class=\"menu p-4 w-80 h-full bg-base-200 text-base-content\">\n <!-- Sidebar content here -->\n <li><a>Sidebar Item 1</a></li>\n <li><a>Sidebar Item 2</a></li>\n </ul>\n </div>\n</div>\n```\n\n```text\n.drawer-side\n```\n\n```text\nz-index: 10\n```\n\n```text\nz-10\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":197,"estimatedTokens":1059}}735{"id":"stack-75948274","source":"stackoverflow","questionId":75948274,"title":"Tailwind postcss nesting is not working with nested scss codes","tags":["css","ruby-on-rails","sass","tailwind-css","postcss"],"text":"Title: Tailwind postcss nesting is not working with nested scss codes\nTags: css, ruby-on-rails, sass, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI am trying to use scss but tailwind is not compiling as expected.\n\nThats how i build application.css\n\n```\n\"build:css\": \"tailwindcss -i ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css\"\n```\n\nHere is my application.scss;\n\n```\n@import 'application_dock/colors.scss';\n@import 'application_dock/pages/spots.scss';\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nbody {\n font-family: 'Noto Sans';\n background-color: var(--bg-color);\n}\n```\n\nSpots.scss;\n\n```\n.spots {\n .spot {\n color: blue;\n\n .spot-content {\n @apply h-32;\n }\n }\n}\n```\n\nAnd here is the built css file output;\n\n```\n.spots {\n .spot {\n color: blue;\n .spot-content{\n height: 8rem;\n }\n }\n}\n```\n\nI expect it to be like;\n\n```\n.spots .spot {\n color: blue;\n}\n.spots .spot .spot-content {\n height: 8rem;\n}\n```\n\nMy postcss.config.js;\n\n```\nmodule.exports = {\n plugins: {\n 'postcss-import': {},\n 'tailwindcss/nesting': {},\n tailwindcss: {},\n autoprefixer: {}\n },\n}\n```\n\n========================================\n\nTop Answer:\nAfter installing `postcss-cli` and building with `postcss` fixed the issue/\n\n```\n\"build:css\": \"postcss ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css\"\n```\n\n========================================\n\nCode:\n```text\n\"build:css\": \"tailwindcss -i ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css\"\n```\n\n```text\n@import 'application_dock/colors.scss';\n@import 'application_dock/pages/spots.scss';\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\nbody {\n font-family: 'Noto Sans';\n background-color: var(--bg-color);\n}\n```\n\n```text\n.spots {\n .spot {\n color: blue;\n\n .spot-content {\n @apply h-32;\n }\n }\n}\n```\n\n```text\n.spots {\n .spot {\n color: blue;\n .spot-content{\n height: 8rem;\n }\n }\n}\n```\n\n```text\n.spots .spot {\n color: blue;\n}\n.spots .spot .spot-content {\n height: 8rem;\n}\n```\n\n```text\nmodule.exports = {\n plugins: {\n 'postcss-import': {},\n 'tailwindcss/nesting': {},\n tailwindcss: {},\n autoprefixer: {}\n },\n}\n```\n\n```bash\n$ tailwindcss -h \n...\nOptions:\n...\n --postcss Load custom PostCSS configuration\n```\n\n```bash\n$ tailwindcss -i ./app/assets/stylesheets/application.tailwind.scss\n\nRebuilding...\n.spots {\n .spot {\n color: blue;\n .spot-content {\n height: 8rem\n }\n }\n}\n```\n\n```bash\n$ tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.scss\n\nRebuilding...\n.spots .spot {\n color: blue;\n}\n\n.spots .spot .spot-content {\n height: 8rem;\n}\n```\n\n```text\n\"scripts\": {\n \"build:css\": \"tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.scss -o ./app/assets/builds/application.css\"\n}\n```\n\n```html\n<!-- app/views/spots/_spot.html.erb -->\n<div class=\"w-32 h-32 rounded-full grid place-content-center <%= color %>\">\n <div class=\"text-white\"> <%= text %> </div>\n</div>\n```\n\n```rb\n<div class=\"grid gap-2 grid-cols-[repeat(auto-fit,8rem)]\">\n <% colors = %w[bg-blue-500 bg-red-500 bg-indigo-500 bg-purple-500].cycle %>\n <% 36.times do |i| %>\n <%= render \"spots/spot\", text: \"i'm a spot ##{i}\", color: colors.next %>\n <% end %>\n</div>\n```\n\n```text\npackage.json\n```\n\n```text\n--postcss\n```\n\n```text\n\"build:css\": \"postcss ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css\"\n```\n\n```text\npostcss-cli\n```\n\n```text\npostcss\n```\n\n========================================\n\nComments:\n- Thanks Alex, i never saw that configuration anywhere. Also will consider your suggestions about spots, thanks a lot!\n- This helped me alot as I was trying to pass tailwind config to postcss and failed. But letting tailwind handle postcss instead worked flawlessly.","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":236,"estimatedTokens":971}}736{"id":"stack-74877171","source":"stackoverflow","questionId":74877171,"title":"Prefix Vue3 & TailwindCSS on build only","tags":["vue.js","vuejs3","tailwind-css","vite","postcss"],"text":"Title: Prefix Vue3 & TailwindCSS on build only\nTags: vue.js, vuejs3, tailwind-css, vite, postcss\nSource: Stack Overflow\n\nQuestion:\nIntroducing a new frontend stack (Vue3, Tailwind CSS) into an already established application.\n\nThe old stack has dependencies which includes CSS classes that conflict with Tailwind.\n\nThe end goal is to use ***only*** Vue and TailwindCSS, so I don't want to use a prefix during development as it won't be necessary... but I need to support both old and new stack until I am able to entirely remove the old CSS.\n\nI am aware of using the prefix property in the TW config (`prefix: 'tw-',`) but this means the source .vue files will need to use the prefix.\n\nAm I able to tell Vue during *build only* (using Vite) to add a prefix to all classes, then likewise pass a rule to Tailwind during *build only* to add the prefix (but not required during development)?\n\nI saw a similar question where an answer mentioned if this existed in TW, then how would TW know which to convert and which not to... I understand this but in my scenario I have no other plugin.\n\nI've had a brief look at `postcss-prefixer` but not sure if that's what I need...\n\nI guess I can just use the TW prefixer as it's not the end of the world, but feels dirty for my end goal...\n\n========================================\n\nCode:\n```text\nprefix: 'tw-',\n```\n\n```text\npostcss-prefixer\n```\n\n========================================\n\nComments:\n- Yeah you're right, the cleanest option is to re-build and release when entirely finished. I was hoping there would be an option to support this edge-case but I understand it's a weird one as I'm trying to force two different systems to interact in an uncommon way that I want... I think I will just deal with the prefix!","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":36,"estimatedTokens":440}}737{"id":"stack-71259012","source":"stackoverflow","questionId":71259012,"title":"Why is the date input squished on iphone only?","tags":["reactjs","iphone","next.js","webkit","tailwind-css"],"text":"Title: Why is the date input squished on iphone only?\nTags: reactjs, iphone, next.js, webkit, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHere is the link to the site\nHere is the link to the code\n\nOn desktop, it looks fine:\nhttps://i.sstatic.net/6TK8n.png\n\nBut on iPhone, the date gets collapsed even though the input should be taking up the full width of the parent div. Here is the screenshot:\nhttps://i.sstatic.net/7fBOU.jpg\n\nWhat CSS trait am I missing?\n\n```\n\n \n \n \n \n \n \n \n setDate(e.target.value)}\n />\n \n \n```\n\n========================================\n\nCode:\n```text\n<div className=\"mb-6\">\n <div className=\"relative\">\n <span className=\"absolute p-2.5\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n className=\"fill-black dark:fill-white\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z\" />\n </svg>\n </span>\n <input\n className=\"bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n id=\"date-input\"\n type=\"date\"\n value={date}\n onChange={(e) => setDate(e.target.value)}\n />\n </div>\n </div>\n```\n\n```text\nclass=\"appearance-none\"\n```\n\n```text\nTailwind css\n```\n\n========================================\n\nComments:\n- Is this a Safari issue? If so, you might want to check the answers here for overriding the default date input styling: stackoverflow.com/questions/26573346/…","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":72,"estimatedTokens":523}}738{"id":"stack-69048002","source":"stackoverflow","questionId":69048002,"title":"Nextjs Image component and setting width and height with CSS","tags":["html","css","image","next.js","tailwind-css"],"text":"Title: Nextjs Image component and setting width and height with CSS\nTags: html, css, image, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using the Image component that ships with Next.js but its forcing me to set the width and height as values. I am using Tailwind CSS and using their utility classes to set the height and width.\n\nhttps://i.sstatic.net/A28fB.jpg\n\n```\n\n```\n\nThe HTML Css Code that works is\n\nhttps://i.sstatic.net/lRTf9.jpg\n\n```\n\n```\n\n========================================\n\nTop Answer:\nIf the image is not loaded from the web source (hence its size is known at the time of creating a bundle) it's simpler to do this:\n\n```\nimport YourImage from '../your/assets/image.png'\nimport styles from '../your/image.module.css'\n\n```\n\nand specify the size and other properties in the CSS file.\n\n========================================\n\nCode:\n```text\n<Image\n src={imageSrc}\n alt={name}\n className=\"object-cover object-center\"\n layout=\"fill\"\n/>\n```\n\n```text\n<img\n className=\"w-auto h-6 lg:block\"\n src=\"/img/logo-dark.png\"\n alt=\"nftHODL.club Logo\"\n/>\n```\n\n```text\n<div className=\"h-64 w-96 relative\"> // \"relative\" is required; adjust sizes to your liking\n <Image\n src={img.img}\n alt=\"Picture of the author\"\n layout=\"fill\" // required\n objectFit=\"cover\" // change to suit your needs\n className=\"rounded-full\" // just an example\n />\n</div>\n```\n\n```text\nrelative\n```\n\n```text\nlayout=\"fill\"\n```\n\n```text\nimport YourImage from '../your/assets/image.png'\nimport styles from '../your/image.module.css'\n\n<Image\n src={YourImage}\n alt='This is an image'\n className={styles.image}\n/>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":84,"estimatedTokens":412}}739{"id":"stack-69035860","source":"stackoverflow","questionId":69035860,"title":"Can I pass the tailwind className as props in React?","tags":["reactjs","typescript","tailwind-css"],"text":"Title: Can I pass the tailwind className as props in React?\nTags: reactjs, typescript, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI made a MessageBanner component, and want to make multiple banners like MessageSuccess(green theme) and MessageError(red theme) out from it.\nAnd I tried to pass the classNames of background color, text color, and border color but didn't succeed. Please help.\n\nThis is the MessageBanner.tsx.\n\n```\nexport const MessageBanner: VFC = memo(props => {\n const { title, description, bgColor, textColor, borderColor } = props\n return (\n <>\n \n \n \n {title}\n\n {description}\n\n \n \n \n \n )\n})\n```\n\nThis is the MessageSuccess component. I tried without '.', like 'bg-green-100' instead of '.bg-green-100' but both didn't succeed.\n\n```\nexport const MessageSuccess: VFC = () => {\n return (\n \n )\n}\n```\n\nI appreciate any help. Thanks in advance.\n\n========================================\n\nCode:\n```text\nexport const MessageBanner: VFC<Props> = memo(props => {\n const { title, description, bgColor, textColor, borderColor } = props\n return (\n <>\n <div\n className={`${bgColor} ${textColor} ${borderColor} pointer-events-autoborder-t-4 rounded-b px-4 py-3 shadow-md duration-1000`}\n role='alert'\n >\n <div className='flex'>\n <div>\n <p className='font-bold'>{title}</p>\n <p className='text-sm'>{description}</p>\n </div>\n </div>\n </div>\n </>\n )\n})\n```\n\n```text\nexport const MessageSuccess: VFC = () => {\n return (\n <MessageBanner\n title='Welcome Back'\n description='You have successfully logged in'\n bgColor='.bg-green-100'\n textColor='.green-900'\n borderColor='.border-green-500'\n />\n )\n}\n```\n\n```js\nexport const MessageSuccess: VFC = () => {\n return (\n <MessageBanner\n title='Welcome Back'\n description='You have successfully logged in'\n bgColor='bg-green-100'\n textColor='green-900'\n borderColor='border-green-500'\n />\n )\n}\n```\n\n```text\nimport { classnames } from \"classnames\";\n\nconst MessageBanner = (props) => {\n const classStr = classnames(\n \"pointer-events-autoborder-t-4 rounded-b px-4 py-3 shadow-md duration-1000\",\n props.bgColor,\n props.textColor,\n props.borderColor\n );\n return <div className={classStr} role=\"alert\">{props.description}</div>\n};\n\nexport { MessageBanner }\n```\n\n```text\n.\n```\n\n```text\n.\n```\n\n========================================\n\nComments:\n- Is it impossible without using this package? I feel like that tailwind doesn't have many preset components as chakra UI does, so I might need to use this one. Thanks for your suggestion.\n- I see. But I tried to add them through classnames but still not working. If you or anybody, please help!\n- Wow, it finally worked! I now understood how to use this classname npm package. Thank you so much.\n- good to know. I've turned these comments into an actual answer, given that it strayed from \"just a comment\" into \"actually helping you answer the question\".","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":125,"estimatedTokens":752}}740{"id":"stack-68055027","source":"stackoverflow","questionId":68055027,"title":"How to add a backdrop blur filter as a gradient","tags":["html","css","tailwind-css"],"text":"Title: How to add a backdrop blur filter as a gradient\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to achieve a backdrop blur effect that using a gradient. I have been able to apply the blur but not make it have a gradient. I am using Tailwind so any help with using those classes would be great.\n\nThis is the result I am looking for (or something close to it), where line isn't harsh.\n\nhttps://i.sstatic.net/GNzJq.png\n\nHere is an example using plain CSS.\n\r\n\r\n\n```\n.content {\n position: relative;\n width: 800px;\n height: 420px;\n display: flex;\n align-items: flex-end;\n}\n\nimg {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.overlay {\n width: 100%;\n -webkit-backdrop-filter: blur(20px);\n height: 200px;\n z-index: 10;\n position: relative;\n}\n\np {\n text-align: center;\n font-size: 18px;\n}\n```\n\n\r\n\n```\n\n \n\n \n hello world\n\n \n\n```\n\n========================================\n\nCode:\n```css\n.content {\n position: relative;\n width: 800px;\n height: 420px;\n display: flex;\n align-items: flex-end;\n}\n\nimg {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.overlay {\n width: 100%;\n -webkit-backdrop-filter: blur(20px);\n height: 200px;\n z-index: 10;\n position: relative;\n}\n\np {\n text-align: center;\n font-size: 18px;\n}\n```\n\n```html\n<div class=\"content\">\n\n <img width=\"800\" src=\"https://149351115.v2.pressablecdn.com/wp-content/uploads/2021/03/121220-Stackoverflow-Motivation-Alex-Francis-2048x1075.jpg\" />\n\n <div class=\"overlay\">\n <p>hello world</p>\n </div>\n</div>\n```\n\n```text\n-webkit-mask: -webkit-gradient(\n linear,\n left 45%,\n left 0%,\n from(rgba(0, 0, 0, 1)),\n to(rgba(0, 0, 0, 0))\n );\n```\n\n========================================\n\nComments:\n- like this: stackoverflow.com/a/67906184/8620333 ? mask combined with the filter and the gradient goes inside the mask\n- Are you able to provide an example? I have tried with `-webkit-mask: -webkit-gradient(...)}` however I can't seem to get it to work.","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":119,"estimatedTokens":499}}741{"id":"stack-66885301","source":"stackoverflow","questionId":66885301,"title":"tailwindcss breaks some of my styles in my angular project","tags":["css","angular","tailwind-css"],"text":"Title: tailwindcss breaks some of my styles in my angular project\nTags: css, angular, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI just finished adding tailwindcss 2.0.4 to my angular 11.2.6 project.\n\nThe page's appearance was not the same after I had installed and added the necessary imports.\n\nLike this button for example:\n\nhttps://i.sstatic.net/vvYVN.png\n\nWhich used to look like this before adding tailwindcss:\n\nhttps://i.sstatic.net/mthow.png\n\nAfter using devtools, I noticed some styles have been applied to this button from a file named 'base.css', which is the stylesheet Tailwind adds to the project.\n\nAll of my button styles returned to the way they were when I removed all of the styles associated with a base.css file.\n\nWhat is the correct way to handle this? Do I need to go and change the base.css file? Can I do that? Or is there a better way to handle overriding base.css styles?\n\n========================================\n\nCode:\n```text\n// tailwind.config.js\n module.exports = {\n corePlugins: {\n preflight: false,\n }\n }\n```\n\n```text\ntailwind-config.js\n```\n\n========================================\n\nComments:\n- `tailwind.config.js` not `-`","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":43,"estimatedTokens":293}}742{"id":"stack-72988324","source":"stackoverflow","questionId":72988324,"title":"field_with_error not triggering Tailwind CSS style","tags":["css","ruby-on-rails","tailwind-css","field-with-errors"],"text":"Title: field_with_error not triggering Tailwind CSS style\nTags: css, ruby-on-rails, tailwind-css, field-with-errors\nSource: Stack Overflow\n\nQuestion:\nIn a Rails 7 app with Tailwind CSS installed, I am using this form:\n\n```\n\n \n \n \n\n```\n\nWhen there is no error in the form, the Tailwind CSS classes are triggered as expected, and the styles are perfectly applied to the HTML.\n\nHowever, when the form throws a validation error (let's say: the `name` field is empty), I am unable to apply the Tailwind CSS classes for fields with errors (red border, red text for instance), given that the `field_with_error` class is nowhere to be found in the `new.html.erb` view file (as it is generated by the form helper instead).\n\nI tried updating `application.tailwind.css` as follows, but I am unable to get that style triggered by the `field_with_error` classes in the HTML no matter what:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n .field_with_errors {\n label {\n @apply text-red-900;\n }\n input, textarea, select {\n @apply border-red-300 text-red-900 placeholder-red-300;\n }\n }\n}\n```\n\nMy concern is that, since Tailwind CSS scans the source code to determine what CSS to compile (or not, for that matter), it may not be \"seeing\" any HTML code actually containing `field_with_errors`, and is therefore not loading the custom CSS classes added to `application.tailwind.css`.\n\nIs this not the way to proceed with Rails & Tailwind? Is there an error in the CSS I included in `application.tailwind.css`? Or is there another issue I am missing?\n\n========================================\n\nCode:\n```text\n<%= form_with(model: project) do |f| %>\n <%= f.label :name, class: \"some_tailwind_css_class\" %>\n <%= f.text_field :name, autofocus:true, class: \"some_other_tailwind_css_class\" %>\n <%= f.submit class: \"yet_another_tailwind_css_class\" %>\n<% end %>\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n .field_with_errors {\n label {\n @apply text-red-900;\n }\n input, textarea, select {\n @apply border-red-300 text-red-900 placeholder-red-300;\n }\n }\n}\n```\n\n```text\nname\n```\n\n```text\nfield_with_error\n```\n\n```text\nnew.html.erb\n```\n\n```text\napplication.tailwind.css\n```\n\n```text\nfield_with_error\n```\n\n```text\nfield_with_errors\n```\n\n```text\napplication.tailwind.css\n```\n\n```text\napplication.tailwind.css\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\ndiv.field_with_errors > label {\n @apply text-red-900;\n}\n\ndiv.field_with_errors > :is(input, textarea, select) {\n @apply border-red-300 text-red-900 placeholder-red-300;\n}\n```\n\n```text\n@layer base\n```\n\n```text\n@layer component\n```\n\n```text\n.field_with_errors\n```\n\n```text\n.field_with_errors\n```\n\n```text\n@layer components\n```\n\n========================================\n\nComments:\n- if its still doesnt work I think we need to make an issue in here github.com/rails/tailwindcss-rails, I will look more at this\n- I confirm that I had tried what you suggest, and just tried it again, and it is not working as expected.\n- I have update the syntax as per this example play.tailwindcss.com/RHN4KVctXG?file=css could u also test it ?\n- I have test it myself, remember to recompile the css or use incognito if its still not works\n- Thnaks. I updated code per your changes above, I stopped the server and started it again with `bin/dev`, and I tried in incognito mode: it still does not work. Could it be because fields have a class applied to them in the `_form.html.erb` partial they are generated from? `` I am wondering if that is overriding the `field_with_errors` style. But then how to fix it?\n- I think you should check on the inspect element if there is override happens it will showed there with a striped css and yes also I think class css have a higher priority than base css, try to use class css instead base css maybe?\n- `field_with_errors` is applied to the parent `div` around the `input`, so that may be the cause of the issue, since the class of the `input` seems to be taking priority over the class of the parent `div`. I am not sure how to work around that: maybe with some JS to remove the class from the `input` when `field_with_errors` is applied to the parent `div`?\n- yeah that is the expected behaviour guides.rubyonrails.org/… there is also a way to override that, but I think its not supported anymore in current rails version, oh yeah also the code in top is not appending the class but replacing, if you delete ur input current class I think it should work if that is the case, then you just need to migrate the code from base to a class based ones `.field_with_errors > .text-field-class {bg-blue-900}`\n- ok, I will give it a try and let you know.\n- I make an issue here github.com/rails/tailwindcss-rails/issues/191\n- hey I have update the solution @newtoncolbert\n- sorry for the late reply: yes, your updated solution worked. Thanks for your help.","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":16,"totalLines":151,"estimatedTokens":1238}}743{"id":"stack-69694611","source":"stackoverflow","questionId":69694611,"title":"Simple way to reuse tailwind component in react","tags":["reactjs","tailwind-css"],"text":"Title: Simple way to reuse tailwind component in react\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using Tailwind CSS in react. I'd like to know how to reuse a tailwind button style in a simple way, and where to keep the component in the file.\n\n```\nexport default function App() {\n return (\n \n \n Button1\n \n\n \n Button2\n \n }\n```\n\n========================================\n\nTop Answer:\nI'm sharing one of my implementations using TypeScript.\n\nYou can get ideas of how you can reuse any component with tailwind.\nThe implementation, naming and pathing usually opinionated.\n\n```\n// src/components/atoms/Button.tsx\nimport {DefaultComponent} from '$types/common';\nimport {NoopFn, classNames} from '@utils';\nimport {ReactElement} from 'react';\n\ntype ButtonUse = `primary` | `secondary` | `destructive`;\ntype ButtonSize = `xs` | `sm` | `md`;\ntype ButtonType = `button` | `submit`;\n\ntype ButtonProps = DefaultComponent & {\n size?: ButtonSize;\n type?: ButtonType;\n use?: ButtonUse;\n};\n\nconst BUTTON_SIZE: {[key in ButtonSize]: string} = {\n md: `text-base px-4 py-2`,\n sm: `text-sm px-3 py-2 leading-4`,\n xs: `text-xs px-2.5 py-1.5`,\n};\n\nconst BUTTON_COLOR: {[key in ButtonUse]: string} = {\n destructive: `text-white bg-red-600 hover:bg-red-700`,\n primary: `text-white bg-indigo-600 hover:bg-indigo-700`,\n secondary: ``,\n};\n\nexport const Button = (props: ButtonProps): ReactElement => {\n const {\n className = ``,\n children,\n use = `primary`,\n size = `xs`,\n type = `button`,\n onClick = NoopFn,\n } = props;\n return (\n \n {children}\n \n );\n};\n```\n\n========================================\n\nCode:\n```text\nexport default function App() {\n return (\n <div className=\"App\">\n <button\n // className='btn-indigo'\n className=\"py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75\"\n >\n Button1\n </button>\n\n <button\n // className='btn-indigo'\n className=\"py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75\"\n >\n Button2\n </button>\n }\n```\n\n```css\n// do this in your CSS file\n\n.my-btn {\n @apply py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75;\n}\n```\n\n```js\n<button className=\"my-btn\">Foo</button>\n```\n\n```text\n// src/components/MyButton.jsx\n\nconst MyButton = ({ children }) => <button className=\"py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75\">{children}</button>\n\nexport default MyButton\n```\n\n```text\nimport MyButton from './components/MyButton'\n\n// ...\n\n<MyButton>foo</MyButton>\n<MyButton>bar</MyButton>\n```\n\n```text\nconst myBtn = \"py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75\"\n\n// ...\n\n<button className={`${myBtn} some-other-class-specific-to-foo`}>Foo</button>\n<button className={myBtn}>Bar</button>\n```\n\n```text\n@apply\n```\n\n```text\nMyButton\n```\n\n```text\n// src/components/atoms/Button.tsx\nimport {DefaultComponent} from '$types/common';\nimport {NoopFn, classNames} from '@utils';\nimport {ReactElement} from 'react';\n\ntype ButtonUse = `primary` | `secondary` | `destructive`;\ntype ButtonSize = `xs` | `sm` | `md`;\ntype ButtonType = `button` | `submit`;\n\ntype ButtonProps = DefaultComponent & {\n size?: ButtonSize;\n type?: ButtonType;\n use?: ButtonUse;\n};\n\nconst BUTTON_SIZE: {[key in ButtonSize]: string} = {\n md: `text-base px-4 py-2`,\n sm: `text-sm px-3 py-2 leading-4`,\n xs: `text-xs px-2.5 py-1.5`,\n};\n\nconst BUTTON_COLOR: {[key in ButtonUse]: string} = {\n destructive: `text-white bg-red-600 hover:bg-red-700`,\n primary: `text-white bg-indigo-600 hover:bg-indigo-700`,\n secondary: ``,\n};\n\nexport const Button = (props: ButtonProps): ReactElement => {\n const {\n className = ``,\n children,\n use = `primary`,\n size = `xs`,\n type = `button`,\n onClick = NoopFn,\n } = props;\n return (\n <button\n {...{onClick, type}}\n className={classNames(\n `inline-flex items-center border border-transparent font-medium rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 justify-center`,\n BUTTON_SIZE[size],\n BUTTON_COLOR[use],\n className,\n )}>\n {children}\n </button>\n );\n};\n```\n\n```text\nimport classNames from \"classnames\";\nfunction Button({\n children,\n primary,\n outline,\n round,\n // rest will specially good for event handlers mouseover, onclick. \n ...rest\n}) {\n const fullClasses = classNames(\n // you can also pass down specific props, size, border etc\n rest.className,\n \"flex items-center px-3 py-1.5 border\",\n {\n // in js object key names cannot have \"-\" so we write inside string\n // if we pass \"primary\" prop, this value will be evaluated \"truthy\" so thie key \"border-blue-500 bg-blue-500 text-white\" will be added to fullClasses\n // if you do not pass primary this key class will not be added\n \"border-blue-800 bg-blue-800 text-white\": primary,\n \"rounded-full\": round,\n // later className will override the earlier one. if outline is true earlier bg will be ignored\n \"bg-white\": outline,\n \"text-blue-600\": outline && primary, \n }\n );\n return (\n <button {...rest} className={fullClasses}>\n {children}\n </button>\n );\n}\n```\n\n========================================\n\nComments:\n- this is not working in my code for some reason. line 41 codesandbox.io/s/nostalgic-roman-l69mv?file=/src/App.js\n- @somniumm you haven't configured postcss in that and also it should be `className=\"my-btn\"` not `className=\".my-btn\"`. Refer this: tailwindcss.com/docs/guides/create-react-app\n- thanks! i'm so lost at configuring tailwind in codesandbox..\n- hahaha can't get more hacky than solution 3\n- i can see solution 2 and 3 works. but i think solution 1 is probably more standard and easier to do minor customization. could you see if im missing anything else? i followed the tutorial but still can't make the tailwind work. codesandbox.io/s/nostalgic-roman-l69mv?file=/src/App.js\n- @somniumm codesandbox.io/s/boxbf","metadata":{"transformedAt":"2026-08-18T18:33:42.941Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":237,"estimatedTokens":1631}}744{"id":"stack-72899754","source":"stackoverflow","questionId":72899754,"title":"Django - TailwindCSS won't load some attributes","tags":["python","css","django","tailwind-css"],"text":"Title: Django - TailwindCSS won't load some attributes\nTags: python, css, django, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm having issues when it comes to using some attributes with Django and TailwindCSS.\nLet's take this table for example:\n\n```\n\n \n \n \n \n Report title\n \n \n Company\n \n \n Brand (if any)\n \n \n Go to report\n \n \n \n \n {% for report in reports %}\n \n \n {{ report.title }}\n \n \n {{ report.company }}\n \n \n {% if report.brand %}\n {{ report.brand }}\n {% else %}\n -\n {% endif %}\n \n \n Access\n \n \n {% endfor %}\n \n \n \n```\n\nGives the following:\n\nBut when I try to change the `bg-color` from:\n\n```\n\n```\n\nTo:\n\n```\n\n```\n\nThe new color won't load. It gives:\n\nI don't understand why I'm getting nothing. In my configuration, following tasks are running:\n\n- The server is running with `python manage.py runserver`\n\n- TailwindCSS is running with `python manage.py tailwind start`\n\n- Livereload is running with `python manage.py livereload`\n\nI also clear my cache with CMD+Shift+R.\n\nI'm also having troubles with some margins and paddings that won't apply. I even bought the plugin Devtools for TailwindCSS. When I edit an attribute with Chrome inspector and this plugin, it's working. But when it's in my code, the new color won't load.\nHas this ever happened to you?\n\n**Update:**\nHere is the complete code:\n\n```\n{% extends 'base.html' %}\n{% block content %}\n\n \n\n \n \n {% if nb_reports == 0 %}\n\n \n >\n \n \n \n\n### No reports\n\n Get started by creating a new report.\n\n \n \n New report\n \n \n \n\n {% else %}\n\n \n \n\n### Create report\n\n Find all your created reports below.\n\n \n\n \n \n \n \n \n Report title\n \n \n Company\n \n \n Brand (if any)\n \n \n Go to report\n \n \n \n \n {% for report in reports %}\n \n \n {{ report.title }}\n \n \n {{ report.company }}\n \n \n {% if report.brand %}\n {{ report.brand }}\n {% else %}\n -\n {% endif %}\n \n \n Access\n \n \n {% endfor %}\n \n \n {% endif %}\n \n \n \n \n \n\n{% endblock %}\n```\n\n========================================\n\nTop Answer:\nIt is working fine for me. YOu can see here for the code here .\n\nIf the `bg` class is working for any custom color, then it should also work with `red-700`. Else you can check if there's any typo.\n\nYou can also add `!` likr this `!bg-red-700` to make this class important.\n\nLastly try to restart the server,\n\n========================================\n\nCode:\n```html\n<div class=\"relative overflow-x-auto shadow-md sm:rounded-lg\">\n <table class=\"w-full text-lg text-left text-gray-500 rounded-2xl mt-4 dark:text-gray-400\">\n <thead class=\"rounded-2xl text-lg text-white uppercase bg-[#68BA9E] dark:bg-gray-700 dark:text-gray-400\">\n <tr>\n <th scope=\"col\" class=\"px-6 py-3\">\n Report title\n </th>\n <th scope=\"col\" class=\"px-6 py-3\">\n Company\n </th>\n <th scope=\"col\" class=\"px-6 py-3\">\n Brand (if any)\n </th>\n <th scope=\"col\" class=\"px-6 py-3\">\n Go to report\n </th>\n </tr>\n </thead>\n <tbody>\n {% for report in reports %}\n <tr class=\"bg-white border-b text-center dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600\">\n <th scope=\"row\"\n class=\"h-19 px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap\">\n {{ report.title }}\n </th>\n <td class=\"px-6 py-4\">\n {{ report.company }}\n </td>\n <td class=\"px-6 py-4\">\n {% if report.brand %}\n {{ report.brand }}\n {% else %}\n -\n {% endif %}\n </td>\n <td class=\"px-6 py-4\">\n <a href=\"{% url 'tool:single-report' slug=report.slug %}\">Access</a>\n </td>\n </tr>\n {% endfor %}\n </tbody>\n </table>\n </div>\n```\n\n```html\n<thead class=\"rounded-2xl text-lg text-white uppercase bg-[#68BA9E] dark:bg-gray-700 dark:text-gray-400\">\n```\n\n```html\n<thead class=\"rounded-2xl text-lg text-white uppercase bg-red-700 dark:bg-gray-700 dark:text-gray-400\">\n```\n\n```html\n{% extends 'base.html' %}\n{% block content %}\n\n <div class=\"flex-1 pt-8 pb-5 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n\n <div class=\"w-100 mb-10\">\n <div>\n {% if nb_reports == 0 %}\n\n <div class=\"text-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n d=\"M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"/>\n </svg>\n <h3 class=\"mt-2 text-sm font-medium text-gray-900\">No reports</h3>\n <p class=\"mt-1 text-sm text-gray-500\">Get started by creating a new report.</p>\n <div class=\"mt-6\">\n <a href=\"{% url 'tool:create-report' %}\"\n class=\"inline-block items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-xl text-white bg-[#195266] hover:bg-[#23647a] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\">\n New report\n </a>\n </div>\n </div>\n\n {% else %}\n\n <div>\n <h2 class=\"text-xl leading-6 font-medium text-gray-900\">Create report</h2>\n <p class=\"mt-1 text-sm text-gray-500\">Find all your created reports below.</p>\n </div>\n\n\n\n\n\n <div class=\"relative overflow-x-auto shadow-md sm:rounded-lg\">\n <table class=\"w-full text-lg text-left text-gray-500 rounded-2xl mt-4 dark:text-gray-400\">\n <thead class=\"rounded-2xl text-lg text-white uppercase bg-red-700 dark:bg-gray-700 dark:text-gray-400\">\n <tr>\n <th scope=\"col\" class=\"px-6 py-3\">\n Report title\n </th>\n <th scope=\"col\" class=\"px-6 py-3\">\n Company\n </th>\n <th scope=\"col\" class=\"px-6 py-3\">\n Brand (if any)\n </th>\n <th scope=\"col\" class=\"px-6 py-3\">\n Go to report\n </th>\n </tr>\n </thead>\n <tbody>\n {% for report in reports %}\n <tr class=\"bg-white border-b text-center dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600\">\n <th scope=\"row\"\n class=\"h-19 px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap\">\n {{ report.title }}\n </th>\n <td class=\"px-6 py-4\">\n {{ report.company }}\n </td>\n <td class=\"px-6 py-4\">\n {% if report.brand %}\n {{ report.brand }}\n {% else %}\n -\n {% endif %}\n </td>\n <td class=\"px-6 py-4\">\n <a href=\"{% url 'tool:single-report' slug=report.slug %}\">Access</a>\n </td>\n </tr>\n {% endfor %}\n </tbody>\n </table>\n {% endif %}\n </div>\n </div>\n </div>\n </div>\n \n\n{% endblock %}\n```\n\n```text\nbg-color\n```\n\n```text\npython manage.py runserver\n```\n\n```text\npython manage.py tailwind start\n```\n\n```text\npython manage.py livereload\n```\n\n```text\npython manage.py collectstatic\n```\n\n```text\nstatic > css > dist > styles.css\n```\n\n```text\ndjango-tailwind\n```\n\n```text\ntheme\n```\n\n```text\nstyles.css\n```\n\n```text\nbg\n```\n\n```text\nred-700\n```\n\n```text\n!\n```\n\n```text\n!bg-red-700\n```\n\n```text\nTEMPLATES = [\n { ...,\n 'DIRS': ['templates'],\n ..., \n }\n],\n```\n\n```text\nTEMPLATES = [\n { ...,\n 'DIRS': ['theme/templates'],\n ...,\n }\n]\n```\n\n```text\npython manage.py collectstatic\n```\n\n```text\nstatic/css/dist/styles.css\n```\n\n```text\ntheme/static/css/dist/styles.css\n```\n\n```text\nstatic/css/dist/styles.css\n```\n\n```text\npython manage.py tailwind start\n```\n\n========================================\n\nComments:\n- Can you the complete code?\n- Hi @RosePark, I just edited my post to include the complete code of my template.\n- Thanks for your answer. I believe the answer is correct but I'm still having the same issue on my side. I did try to restart the server, it did not change anything.\n- I also amazed to see that if `bg-[#68BA9E]` is working then why `bg-red-700` is not? Check and update the tailwind to the latest version.\n- I tried to do it, also to switch to the 2.2.0 version but I'm still getting the issue. I installed Tailwind with `django-tailwind` and I'm running on localhost. I don't know if it is related?","metadata":{"transformedAt":"2026-08-18T18:33:42.942Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":24,"totalLines":430,"estimatedTokens":2716}}745{"id":"stack-65369129","source":"stackoverflow","questionId":65369129,"title":"How can i use Tailwind using Sass on Vue","tags":["javascript","css","vue.js","sass","tailwind-css"],"text":"Title: How can i use Tailwind using Sass on Vue\nTags: javascript, css, vue.js, sass, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI wanna using tailwind with sass on vue js, I'm following tailwind docs but still got this error\n\nthis is my **depedency**, postcss is up to date\n\n```\n\"dependencies\": {\n \"autoprefixer\": \"^10.1.0\",\n \"core-js\": \"^3.6.5\",\n \"postcss\": \"^8.2.1\",\n \"postcss-flexbugs-fixes\": \"^5.0.2\",\n \"postcss-import\": \"^14.0.0\",\n \"postcss-loader\": \"^4.1.0\",\n \"postcss-preset-env\": \"^6.7.0\",\n \"precss\": \"^4.0.0\",\n \"tailwindcss\": \"^2.0.2\",\n \"vue\": \"^2.6.11\",\n \"vue-router\": \"^3.2.0\",\n \"vuex\": \"^3.4.0\"\n },\n```\n\nthis is my **postcss.config.js**\n\n```\nmodule.exports = {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer'),\n ]\n}\n```\n\nany solution? how can i use tailwind with sass preprocessor on vue js? Thanks all.\n\nError: PostCSS plugin tailwindcss requires PostCSS 8\n\n========================================\n\nCode:\n```text\n\"dependencies\": {\n \"autoprefixer\": \"^10.1.0\",\n \"core-js\": \"^3.6.5\",\n \"postcss\": \"^8.2.1\",\n \"postcss-flexbugs-fixes\": \"^5.0.2\",\n \"postcss-import\": \"^14.0.0\",\n \"postcss-loader\": \"^4.1.0\",\n \"postcss-preset-env\": \"^6.7.0\",\n \"precss\": \"^4.0.0\",\n \"tailwindcss\": \"^2.0.2\",\n \"vue\": \"^2.6.11\",\n \"vue-router\": \"^3.2.0\",\n \"vuex\": \"^3.4.0\"\n },\n```\n\n```text\nmodule.exports = {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer'),\n ]\n}\n```\n\n```text\nnpm uninstall tailwindcss postcss autoprefixer\n```\n\n```text\nnpm i -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9\n```\n\n========================================\n\nComments:\n- Hello @Boussadjra Brahim, how are you? i still got this error, can it not be installed using yarn? or tailwind specifically for npm only? Thank you\n- fine, thank you, try to replace `npm uninstall` by `yarn remove` and `npm i` by `yarn add`","metadata":{"transformedAt":"2026-08-18T18:33:42.942Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":83,"estimatedTokens":469}}746{"id":"stack-62913010","source":"stackoverflow","questionId":62913010,"title":"Tailwind css laravel mix add fonts","tags":["laravel","laravel-mix","tailwind-css"],"text":"Title: Tailwind css laravel mix add fonts\nTags: laravel, laravel-mix, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to use tailwndo css for a project in laravel and I would like to maintain the nunito font for the whole app but Tailwind has its own font set. Does anybody know how to change it?\n\n========================================\n\nTop Answer:\ntailwind.config.js :\n\n```\ntheme: {\n extend: {\n fontFamily: {\n body: ['Rowdies']\n }\n }\n },\n```\n\ncss\\app.css\n\n```\n@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300&display=swap');\n```\n\nshell:\n\n```\nnpm run dev\nor \nnpm run watch\n```\n\nnow you can use `.font-body` class in any tag that you want\nfor example:\n\n```\n\n \n\n### Hello World!\n\n```\n\nfont + body = font-body\n\n```\nfontFamily: {\n body: ['Open Sans']\n }\n```\n\n(you can change body)\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n theme: {\n fontFamily: {\n 'sans': ['-apple-system', 'BlinkMacSystemFont', ...],\n 'serif': ['Georgia', 'Cambria', ...],\n 'mono': ['SFMono-Regular', 'Menlo', ...],\n 'your-font': ['Your Font', ...]\n }\n }\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntheme: {\n extend: {\n fontFamily: {\n body: ['Rowdies']\n }\n }\n },\n```\n\n```text\n@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300&display=swap');\n```\n\n```text\nnpm run dev\nor \nnpm run watch\n```\n\n```text\n<body class=\"font-body\">\n <h1>Hello World!</h1>\n</body>\n```\n\n```text\nfontFamily: {\n body: ['Open Sans']\n }\n```\n\n```text\n.font-body\n```\n\n========================================\n\nComments:\n- I got this step, but it doesn't seem to work I think I am adding the fonts the wrong way. How do I add a font in laravel?\n- Сhoose the font-weight you want here fonts.google.com/specimen/… (Screen). Copy the code from the \"embed\" tab and add it to your `head` in your `app.blade.php`. Then add `'nunito': ['Nunito', 'sans-serif']` in your tailwind.config","metadata":{"transformedAt":"2026-08-18T18:33:42.942Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":118,"estimatedTokens":496}}747{"id":"stack-79802152","source":"stackoverflow","questionId":79802152,"title":"Why does parent's aspect-ratio break with child's h-full but work with absolute?","tags":["css","tailwind-css","css-position","absolute","aspect-ratio"],"text":"Title: Why does parent's aspect-ratio break with child's h-full but work with absolute?\nTags: css, tailwind-css, css-position, absolute, aspect-ratio\nSource: Stack Overflow\n\nQuestion:\nI'm building a responsive MacBook screen component using CSS aspect-ratio, but I'm encountering a strange behavior where the aspect ratio gets distorted depending on how I position the inner content.\n\nReproducing this issue turned out to be trickier than expected, as it appears to be browser-specific.\n\nThe version using *absolute positioning works consistently across all browsers*:\n\n- Tailwind Play #1 (with `absolute inset-2`)\n\nThe version using `h-full` works correctly in Safari *but fails in Chrome*:\n\n- **Tailwind Play #2 (with `h-full`)**\n\n### Working version with `absolute inset-2` (maintains aspect-ratio)\n\n```\nfunction MacBookFrame() {\n return (\n \n \n {/* This works aspect ratio is maintained */}\n \n \n \n \n \n )\n}\n```\n\nhttps://i.sstatic.net/rWtR2akZ.gif\n\n### Broken version with `h-full` (aspect-ratio gets distorted on smaller screens)\n\n```\nfunction MacBookFrame() {\n return (\n \n \n {/* This breaks 👇 aspect ratio becomes distorted */}\n \n \n \n \n \n )\n}\n```\n\nhttps://i.sstatic.net/CbnJN97r.gif\n\n### The issue\n\nWith `absolute inset-2`: the MacBook maintains perfect 16:9 aspect ratio at all screen sizes.\n\nWhile with `h-full`: the MacBook becomes keeps its height, breaking the 16:9 ratio.\n\n### What I don't understand\n\nThe content stays within the black borders in both cases, so the outer container dimensions seem unchanged. Why does the aspect-ratio calculation get affected differently by these two positioning methods?\n\nCan someone explain the CSS behavior behind this difference?\n\n### FakeContent scaffold\n\n```\nfunction FakeContent() {\n return (\n \n {/* fake content */}\n \n )\n}\n```\n\n### Environment\n\n- React with Tailwind CSS\n\n- Modern browsers (Chrome, Firefox, Safari)\n\n========================================\n\nCode:\n```jsx\nfunction MacBookFrame() {\n return (\n <div className=\"aspect-[16/9] max-w-[calc(380px*16/9)] mx-auto w-full\">\n <div className=\"rounded-lg bg-black p-2 w-full h-full relative\">\n {/* This works aspect ratio is maintained */}\n <div className=\"absolute inset-2\">\n <FakeContent />\n </div>\n </div>\n </div>\n )\n}\n```\n\n```jsx\nfunction MacBookFrame() {\n return (\n <div className=\"aspect-[16/9] max-w-[calc(380px*16/9)] mx-auto w-full\">\n <div className=\"rounded-lg bg-black p-2 w-full h-full relative\">\n {/* This breaks 👇 aspect ratio becomes distorted */}\n <div className=\"h-full\">\n <FakeContent />\n </div>\n </div>\n </div>\n )\n}\n```\n\n```jsx\nfunction FakeContent() {\n return (\n <div className=\"rounded-[0.25rem] flex flex-col h-full overflow-y-auto\">\n {/* fake content */}\n </div>\n )\n}\n```\n\n```text\nabsolute inset-2\n```\n\n```text\nh-full\n```\n\n```text\nh-full\n```\n\n```text\nabsolute inset-2\n```\n\n```text\nh-full\n```\n\n```text\nabsolute inset-2\n```\n\n```text\nh-full\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n <div class=\"flex min-h-[100vh] items-center justify-center bg-black px-4\">\n <div class=\"h-[70vh] w-full overflow-y-auto border-6 border-blue-500 bg-white\">\n <div class=\"mx-auto h-full w-full max-w-5xl border-x-2 border-red-500\">\n <div class=\"flex h-full flex-col gap-2 py-2 [&>div]:p-1 [&>div]:font-bold [&>div:not(:nth-child(3))]:bg-blue-200\">\n <div>Stepper</div>\n <div>Some text</div>\n <div class=\"mx-auto aspect-[16/9] min-h-0 w-full max-w-[calc(380px*16/9)] flex-none\">\n <div class=\"relative h-full w-full rounded-lg bg-black p-2\">\n <div class=\"h-full overflow-y-auto\">\n <div class=\"h-[800px] w-[200px] bg-amber-200\"></div>\n </div>\n </div>\n </div>\n <div>User inputs</div>\n <div class=\"mt-auto\">Nav buttons</div>\n </div>\n </div>\n </div>\n</div>\n```\n\n```text\nflex: none, min-height: 0\n```\n\n========================================\n\nComments:\n- Thanks! Do you know why it's working correctly without flex-none and min-h-0 in Safari?","metadata":{"transformedAt":"2026-08-18T18:33:42.942Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":187,"estimatedTokens":1029}}748{"id":"stack-79513123","source":"stackoverflow","questionId":79513123,"title":"How do I specify directories Tailwindcss v4 should scan for class names?","tags":["django","django-templates","tailwind-css"],"text":"Title: How do I specify directories Tailwindcss v4 should scan for class names?\nTags: django, django-templates, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI currently have a django application structured like this:\n\n```\n/project-root\n|\n|\n/shop # installed application\n|\n├── templates/ # Django templates directory (HTML files)\n│ ├── base.html\n│ ├── index.html\n│ ├── other_template.html\n│ └── ...\n├── static/\n│ └── shop/\n│ ├── styles/ # Tailwind CSS setup lives here\n│ │ ├── node_modules/ # Installed NPM packages (Tailwind, etc.)\n│ │ ├── src/ # Source files for Tailwind\n│ │ │ ├── input.css \n│ │ ├── dist/ # Output folder (compiled Tailwind CSS)\n│ │ │ ├── output.css # Compiled Tailwind CSS\n│ │ ├── tailwind.config.js \n│ │ ├── package.json # Dependencies\n│ │ ├── package-lock.json # Dependency lock file\n│ ├── js/ # JavaScript files (if any)\n│ │ ├── main.js\n│ │ ├── other_script.js\n│ │ └── ...\n└-- views.py\n---- models.py\n\n// other files\n```\n\nThe problem is I noticed when running the command `npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch` Tailwindcss only scans HTML files in the styles directory. I tried moving the `node_modules` and `package.json` to the root folder but it still wasn't able to pick up any of the html files in the `templates` folder. I tried creating a `tailwind.config.js` in the styles directory and specifying the folders to check but that didn't work either. The content of my config file is below:\n\n```\n// tailwind.config.js\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n '../../../templates/**/*.{html,js}',\n ],\n // ...\n}\n```\n\nIs there a solution to this? I've read the docs and I can't seem to find anything related to specifying file paths to scan, and I really don't want to use the CDN as it's not advised for applications going to production.\n\n========================================\n\nCode:\n```text\n/project-root\n|\n|\n/shop # installed application\n|\n├── templates/ # Django templates directory (HTML files)\n│ ├── base.html\n│ ├── index.html\n│ ├── other_template.html\n│ └── ...\n├── static/\n│ └── shop/\n│ ├── styles/ # Tailwind CSS setup lives here\n│ │ ├── node_modules/ # Installed NPM packages (Tailwind, etc.)\n│ │ ├── src/ # Source files for Tailwind\n│ │ │ ├── input.css \n│ │ ├── dist/ # Output folder (compiled Tailwind CSS)\n│ │ │ ├── output.css # Compiled Tailwind CSS\n│ │ ├── tailwind.config.js \n│ │ ├── package.json # Dependencies\n│ │ ├── package-lock.json # Dependency lock file\n│ ├── js/ # JavaScript files (if any)\n│ │ ├── main.js\n│ │ ├── other_script.js\n│ │ └── ...\n└-- views.py\n---- models.py\n\n// other files\n```\n\n```text\n// tailwind.config.js\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n '../../../templates/**/*.{html,js}',\n ],\n // ...\n}\n```\n\n```text\nnpx tailwindcss -i ./src/input.css -o ./dist/output.css --watch\n```\n\n```text\nnode_modules\n```\n\n```text\npackage.json\n```\n\n```text\ntemplates\n```\n\n```text\ntailwind.config.js\n```\n\n```css\n@import \"tailwindcss\" source(\"../../../\");\n```\n\n```css\n@import \"tailwindcss\";\n@source \"../../../templates\";\n```\n\n```text\nshop/static/shop/styles\n```\n\n```text\nsource()\n```\n\n```text\n@import\n```\n\n```text\n.gitignore\n```\n\n```text\ntemplates\n```\n\n```text\n@source\n```\n\n========================================\n\nComments:\n- Related: What's changed from TailwindCSS v4? and New CSS-first configuration introduced in v4 and Automatic Source Detection from TailwindCSS v4 and **`@source` directive was introduced**","metadata":{"transformedAt":"2026-08-18T18:33:42.942Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":15,"totalLines":159,"estimatedTokens":931}}749{"id":"stack-77796341","source":"stackoverflow","questionId":77796341,"title":"Collapsible/expandable data table row: How to make the collapsible content full width in a Shadcn Data Table?","tags":["css","reactjs","tailwind-css","tanstack"],"text":"Title: Collapsible/expandable data table row: How to make the collapsible content full width in a Shadcn Data Table?\nTags: css, reactjs, tailwind-css, tanstack\nSource: Stack Overflow\n\nQuestion:\nI am trying to build a data table where each row can be expanded/collapsed. Clicking on the arrow on the far left, expands the coloured content as show in the image below. This is working nicely, but the content of the expanded section is only as wide as the first column. How can I make the expanded section as wide as the entire table (indicated by the red arrows)?\n\nI am using Shadcn-UI (https://ui.shadcn.com/docs/components/data-table).\n\nhttps://i.sstatic.net/V8i1r.png\n\nHere is the code:\n\n```\n//page.tsx\n\nimport { DataTable } from \"./data-table\";\nimport { Row, columns } from \"./columns\";\n\nexport default async function CollapsibleTablePage() {\n const data: [Row] = [\n {\n column1: \"Hi from outer column 1 and row 1\",\n column2: \"Hi from outer column 2 and row 1\",\n collapsibleContent: \"Hi from collapsible content and row 1\",\n },\n {\n column1: \"Hi from outer column 1 and row 2\",\n column2: \"Hi from outer column 2 and row 2\",\n collapsibleContent: \"Hi from collapsible content and row 2\",\n },\n {\n column1: \"Hi from outer column 1 and row 3\",\n column2: \"Hi from outer column 2 and row 3\",\n collapsibleContent: \"Hi from collapsible content and row 3\",\n },\n ];\n\n return (\n \n );\n}\n```\n\n```\n//columns.tsx\n\n\"use client\";\n\nimport { ColumnDef } from \"@tanstack/react-table\";\nimport { ChevronDown, Copy } from \"lucide-react\";\nimport { Button } from \"@/components/shadcn/ui/button\";\nimport { CollapsibleTrigger } from \"@/components/shadcn/ui/collapsible\";\n\nexport type Row = {\n column1: string;\n column2: string;\n collapsibleContent: string;\n};\n\nexport const columns: ColumnDef[] = [\n {\n accessorKey: \"column1\",\n header: \"column1\",\n cell: ({ row }) => {\n return (\n \n \n \n \n \n {row.getValue(\"column1\")}\n \n \n );\n },\n },\n {\n accessorKey: \"column2\",\n header: \"column2\",\n },\n];\n```\n\n```\n//data-table.tsx\n\n\"use client\";\n\nimport {\n ColumnDef,\n flexRender,\n getCoreRowModel,\n useReactTable,\n} from \"@tanstack/react-table\";\n\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/components/shadcn/ui/table\";\n\nimport {\n Collapsible,\n CollapsibleContent,\n} from \"@/components/shadcn/ui/collapsible\";\nimport React from \"react\";\nimport { Row } from \"./columns\";\n\ninterface DataTableProps {\n columns: ColumnDef[];\n data: TData[];\n}\n\nexport function DataTable({\n columns,\n data,\n}: DataTableProps) {\n const table = useReactTable({\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n });\n\n var CollapsibleRowContent = ({ row }: { row: Row }) => (\n {row.collapsibleContent}\n );\n\n return (\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n );\n })}\n \n ))}\n \n \n {table.getRowModel().rows.map((row) => (\n \n <>\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n ))}\n \n \n \n \n \n \n ))}\n \n \n \n );\n}\n```\n\n========================================\n\nCode:\n```js\n//page.tsx\n\nimport { DataTable } from \"./data-table\";\nimport { Row, columns } from \"./columns\";\n\nexport default async function CollapsibleTablePage() {\n const data: [Row] = [\n {\n column1: \"Hi from outer column 1 and row 1\",\n column2: \"Hi from outer column 2 and row 1\",\n collapsibleContent: \"Hi from collapsible content and row 1\",\n },\n {\n column1: \"Hi from outer column 1 and row 2\",\n column2: \"Hi from outer column 2 and row 2\",\n collapsibleContent: \"Hi from collapsible content and row 2\",\n },\n {\n column1: \"Hi from outer column 1 and row 3\",\n column2: \"Hi from outer column 2 and row 3\",\n collapsibleContent: \"Hi from collapsible content and row 3\",\n },\n ];\n\n return (\n <DataTable columns={columns} data={data} />\n );\n}\n```\n\n```js\n//columns.tsx\n\n\"use client\";\n\nimport { ColumnDef } from \"@tanstack/react-table\";\nimport { ChevronDown, Copy } from \"lucide-react\";\nimport { Button } from \"@/components/shadcn/ui/button\";\nimport { CollapsibleTrigger } from \"@/components/shadcn/ui/collapsible\";\n\nexport type Row = {\n column1: string;\n column2: string;\n collapsibleContent: string;\n};\n\nexport const columns: ColumnDef<Row>[] = [\n {\n accessorKey: \"column1\",\n header: \"column1\",\n cell: ({ row }) => {\n return (\n <div className=\"flex items-center\">\n <CollapsibleTrigger>\n <Button variant=\"ghost\">\n <ChevronDown className=\"h-4 w-4\" />\n </Button>\n {row.getValue(\"column1\")}\n </CollapsibleTrigger>\n </div>\n );\n },\n },\n {\n accessorKey: \"column2\",\n header: \"column2\",\n },\n];\n```\n\n```js\n//data-table.tsx\n\n\"use client\";\n\nimport {\n ColumnDef,\n flexRender,\n getCoreRowModel,\n useReactTable,\n} from \"@tanstack/react-table\";\n\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/components/shadcn/ui/table\";\n\nimport {\n Collapsible,\n CollapsibleContent,\n} from \"@/components/shadcn/ui/collapsible\";\nimport React from \"react\";\nimport { Row } from \"./columns\";\n\ninterface DataTableProps<TData, TValue> {\n columns: ColumnDef<TData, TValue>[];\n data: TData[];\n}\n\nexport function DataTable<TData, TValue>({\n columns,\n data,\n}: DataTableProps<TData, TValue>) {\n const table = useReactTable({\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n });\n\n var CollapsibleRowContent = ({ row }: { row: Row }) => (\n <div className=\"p-20\">{row.collapsibleContent}</div>\n );\n\n return (\n <div>\n <Table>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n return (\n <TableHead key={header.id}>\n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </TableHead>\n );\n })}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {table.getRowModel().rows.map((row) => (\n <Collapsible key={row.id} asChild>\n <>\n <TableRow>\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id}>\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n </TableCell>\n ))}\n </TableRow>\n <CollapsibleContent className=\"bg-slate-700\">\n <CollapsibleRowContent row={row.original} />\n </CollapsibleContent>\n </>\n </Collapsible>\n ))}\n </TableBody>\n </Table>\n </div>\n );\n}\n```\n\n```text\n<CollapsibleContent className=\"bg-slate-700\" asChild>\n <tr>\n <CollapsibleRowContent row={row.original} />\n </tr>\n</CollapsibleContent>\n```\n\n```text\nvar CollapsibleRowContent = ({ row }: { row: Row }) => (\n <td colSpan={2}>\n <div className=\"p-20\">{row.collapsibleContent}</div>\n </td>\n);\n```\n\n```text\n<table>\n```\n\n```text\ncolspan\n```\n\n```text\n<td>\n```\n\n```text\n<CollapsibleContent>\n```\n\n```text\n<tr>\n```\n\n```text\nasChild\n```\n\n```text\n<td>\n```\n\n```text\n<CollapsibleRowContent>\n```\n\n```text\ncolSpan\n```\n\n```text\ncolspan\n```\n\n========================================\n\nComments:\n- Please don't tag your titles. See How to Ask.\n- Have you tried setting `col-span-2` on the collapsible content?\n- Tried but no success so far","metadata":{"transformedAt":"2026-08-18T18:33:42.942Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":15,"totalLines":410,"estimatedTokens":1963}}750{"id":"stack-65688859","source":"stackoverflow","questionId":65688859,"title":"How do I auto-place new items in columns with Tailwind CSS?","tags":["html","css","hugo","tailwind-css"],"text":"Title: How do I auto-place new items in columns with Tailwind CSS?\nTags: html, css, hugo, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have the following code for my Hugo page for listing out new posts, formatted with Tailwind CSS:\n\n```\n{{ define \"main\" }}\n{{ range .Pages }}\n\n \n \n \n \n \n \n \n \n {{ .Params.Major}}\n\n {{ .Title }}\n\n A small description and a bucnch of stuff.\n\n \n \n \n \n \n \n 3rd Year\n\n \n \n \n \n \n Programming\n\n \n \n \n Made By\n \n \n \n Aman Bhargava\n\n \n \n \n \n \n \n\n{{ end }}\n{{ end }}\n```\n\nWhat I want is to have three columns of cards, with each new post being added left to right in the columns before adding a new row below. However, my code gives me a stacked listing instead of the expected output:\n\nhttps://i.sstatic.net/BHAGr.png\n\nI would like something like this:\n\n1st Column\n2nd Column\n3rd Column\n\nFirst Post\nSecond Post\nThird Post\n\nFourth Post\nFifth Post\nSixth Post\n\n========================================\n\nCode:\n```text\n{{ define \"main\" }}\n{{ range .Pages }}\n<div class=\"grid grid-flow-row grid-cols-3\">\n <div class=\"flex justify-center\">\n <div class=\"bg-white shadow-xl rounded-lg overflow-hidden\">\n <div class=\"bg-cover bg-center h-56 p-4\" style=\"background-image: url(https://ui-avatars.com/api/?name=John+Doe&size=512)\">\n <div class=\"flex justify-end\">\n \n </div>\n </div>\n <div class=\"p-4\">\n <p class=\"uppercase tracking-wide text-sm font-bold text-gray-700\">{{ .Params.Major}}</p>\n <p class=\"text-3xl text-gray-900 font-bold\">{{ .Title }}</p>\n <p class=\"text-gray-700\">A small description and a bucnch of stuff.</p>\n </div>\n <div class=\"flex p-4 border-t border-gray-300 text-gray-700\">\n <div class=\"flex-1 inline-flex items-center\">\n <svg class=\"h-6 w-6 text-gray-600 fill-current mr-3\" viewBox=\"0 0 20 20\">\n <path d=\"M15.573,11.624c0.568-0.478,0.947-1.219,0.947-2.019c0-1.37-1.108-2.569-2.371-2.569s-2.371,1.2-2.371,2.569c0,0.8,0.379,1.542,0.946,2.019c-0.253,0.089-0.496,0.2-0.728,0.332c-0.743-0.898-1.745-1.573-2.891-1.911c0.877-0.61,1.486-1.666,1.486-2.812c0-1.79-1.479-3.359-3.162-3.359S4.269,5.443,4.269,7.233c0,1.146,0.608,2.202,1.486,2.812c-2.454,0.725-4.252,2.998-4.252,5.685c0,0.218,0.178,0.396,0.395,0.396h16.203c0.218,0,0.396-0.178,0.396-0.396C18.497,13.831,17.273,12.216,15.573,11.624 M12.568,9.605c0-0.822,0.689-1.779,1.581-1.779s1.58,0.957,1.58,1.779s-0.688,1.779-1.58,1.779S12.568,10.427,12.568,9.605 M5.06,7.233c0-1.213,1.014-2.569,2.371-2.569c1.358,0,2.371,1.355,2.371,2.569S8.789,9.802,7.431,9.802C6.073,9.802,5.06,8.447,5.06,7.233 M2.309,15.335c0.202-2.649,2.423-4.742,5.122-4.742s4.921,2.093,5.122,4.742H2.309z M13.346,15.335c-0.067-0.997-0.382-1.928-0.882-2.732c0.502-0.271,1.075-0.429,1.686-0.429c1.828,0,3.338,1.385,3.535,3.161H13.346z\"></path>\n </svg>\n <p><span class=\"text-gray-900 font-bold\">3rd</span> Year</p>\n </div>\n <div class=\"flex-1 inline-flex items-center\">\n <svg class=\"h-6 w-6 text-gray-600 fill-current mr-3\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path fill-rule=\"evenodd\" d=\"M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z\"></path>\n </svg>\n <p><span class=\"text-gray-900 font-bold\"></span> Programming</p>\n </div>\n </div>\n <div class=\"px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100\">\n <div class=\"text-xs uppercase font-bold text-gray-600 tracking-wide\">Made By</div>\n <div class=\"flex items-center pt-2\">\n \n <div>\n <p class=\"font-bold text-gray-900\">Aman Bhargava</p>\n \n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n{{ end }}\n{{ end }}\n```\n\n```text\n{{ define \"main\" }}\n<div class=\"grid grid-flow-row grid-cols-3\">\n {{ range .Pages }}\n <div class=\"flex justify-center\">\n <div class=\"bg-white shadow-xl rounded-lg overflow-hidden\">\n <!-- content -->\n </div>\n </div>\n {{ end }}\n</div>\n{{ end }}\n```\n\n========================================\n\nComments:\n- With the above code I'm able to replicate the desired behaviour you mentioned in play.tailwindcss.com. Is there additional CSS that might be causing the issue?\n- @juliomalves Thank you for your response! Hugo uses something called partials to build pages, so this bit of the page is inserted into the main `base` template. This is what that looks like: pastebin.com/X8E8RHXG (The part where the list gets included is on line 19). The only additional CSS I can see is ``\n- Sadly, I still can't reproduce the issue with the additional HTML.\n- @juliomalves Sorry about this. I've uploaded the entire repo, hopefully that is of more help. This particular file is here: github.com/thedivtagguy/srishtiarchives/blob/master/themes/…\n- @juliomalves did you have any luck with this? I've started a bounty on the question and would be happy to award it to you if you managed to solve it.\n- Oh wow, thank you so much! This has been an issue for the past 4 days and I had absolutely no idea what was going on. Your answer works perfectly. I shall revisit this answer and award the bounty in 15 hours, after it is unlocked. Thank you so much again.\n- You're welcome. Can I suggest adding the hugo tag, and consider a title revision to \"How do I place grid items in columns using Hugo and Tailwind CSS?\", which may help others with a similar issue find the question.","metadata":{"transformedAt":"2026-08-18T18:33:42.942Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":152,"estimatedTokens":1608}}751{"id":"stack-74594834","source":"stackoverflow","questionId":74594834,"title":"how to place multiple items in a grid column cell using tailwind?","tags":["css","tailwind-css","css-grid"],"text":"Title: how to place multiple items in a grid column cell using tailwind?\nTags: css, tailwind-css, css-grid\nSource: Stack Overflow\n\nQuestion:\nI have a design where I have 3 items. 2 items should be placed vertically and 1 item has to be in it's own cell. So, 2 items should be placed in 1 cell vertically and 1 item takes it's own whole cell. To demonstrate, below is the image\n\nhttps://i.sstatic.net/n9i7X.png\n\nHow can I achieve this design using tailwind?\n\n========================================\n\nTop Answer:\nYou can achieve this setup using `grid`/`flex`. Using one or the other depends on your content.\n\n### Grid:\n\nCreate a three-by-two grid using `grid-cols-3` and `grid-rows-2` on the grid's container. Then, set each container's span to fit your structure (using `col-span-n row-span-n`).\n\nRead about `grid-cols` here and about `grid-row` here.\n\n```\n\n 1\n 2\n 3\n\n```\n\nhttps://i.sstatic.net/54geQ.png\n\nTailwind-play\n\n### Flex:\n\nWe are going to have two containers. The main container will wrap all the elements (including the second container), and the inner container will wrap your first two elements. Each of those containers will have a `flex` utility applied to it.\n\nThen, we will apply `flex-col` on the second container. This way, the container will place its children on top of each other, just like the first column of your image.\n\nThe first container's default flex-direction is `flex-row` which is why the inner container and the third element will be positioned next to each other, just like a row.\n\nTo give the structure a proportion similar to your image, we can set the inner container's width to 30% (`w-[30%]`), and the third element to 70% (`w-[70%]`).\n\nRead about flex-direction here.\n\n```\n\n \n 1\n 2\n \n 3\n \n\n```\n\nhttps://i.sstatic.net/gi6vL.png\n\nTailwind-play\n\n========================================\n\nCode:\n```text\n<div class=\"border-2 grid grid-cols-3 grid-rows-2\">\n <div class=\"border-2 col-span-1\">1</div>\n <div class=\"border-2 col-span-2 row-span-2\">2</div>\n <div class=\"border-2 col-span-1\">3</div>\n<div>\n```\n\n```css\n.grid-rows-2 {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n}\n```\n\n```html\n<div class=\"grid grid-cols-3 grid-rows-[min-content_1fr]\">\n <div>1</div>\n <div class=\"col-span-2 row-span-2\">2</div>\n <div>3</div>\n<div>\n```\n\n```text\ngrid-rows-2\n```\n\n```text\n1fr\n```\n\n```text\ngrid-rows-[min-content_1fr]\n```\n\n```text\n<div class=\"border-2 grid grid-cols-3 grid-rows-2\">\n <div class=\"border-2 col-span-1\">1</div>\n <div class=\"border-2 col-span-2 row-span-2\">2</div>\n <div class=\"border-2 col-span-1\">3</div>\n<div>\n```\n\n```text\n<div class=\"flex border-2\">\n <div class=\"flex w-[30%] flex-col\">\n <div class=\"border-2\">1</div>\n <div class=\"border-2\">2</div>\n </div>\n <div class=\"w-[70%] border-2\">3</div>\n <div></div>\n</div>\n```\n\n```text\ngrid\n```\n\n```text\nflex\n```\n\n```text\ngrid-cols-3\n```\n\n```text\ngrid-rows-2\n```\n\n```text\ncol-span-n row-span-n\n```\n\n```text\ngrid-cols\n```\n\n```text\ngrid-row\n```\n\n```text\nflex\n```\n\n```text\nflex-col\n```\n\n```text\nflex-row\n```\n\n```text\nw-[30%]\n```\n\n```text\nw-[70%]\n```\n\n========================================\n\nComments:\n- I have tried what u said. The problem is, The 3rd element should be placed in first row and since there is dynamic data in each element, mainly in 2nd element, it ends up making the 2nd element large which moves the 3rd element in first row way too down. I attached an SS here\n- @LosMos, I see what you mean. It looks like `grid` won't be working well with your structure unless you use Ihar Aliakseyenka addition. Doesn't the `flex` method work in your case? It should be a perfect scenario for that. Can you please provide the code from your SS? Also, the number I provided for each element is arbitrary. You can swap them however fits your structure.\n- Actually, in order to use flex, I will have to change all of the internal structure of the underlying components. Those components get html dynamically from layout files. I am working on a magento 2 project and there are different layout files for all underlying components. I can change the underlying html structure but, It is going to take a of a time. Also, I already have designed for mobile and it works fine for mobile. Only desktop version did not work which now works. Ihar Aliakseyenka's answer helped.\n- Glad it helped :) I wasn't thinking about his approach, happy it works with your structure.\n- what tailwind version is it? When I try to apply in my project, the browser tells me that the grid-rows-[min-content_1fr] is an invalid property. But, on tailwind playground, it works fine.\n- It should be supported since version 2.2+ with `mode: 'jit'` in config or 3+ by default - it is called arbitrary values\n- Hmmm, I am using tailwind 3.4. Weird that it does not work as a tailwind class but as a vanilla css class, it works.\n- @LosMos Tailwind doesn't have release 3.4 yet - max 3.2.4\n- I mean 3.2.4. That was a typo there.","metadata":{"transformedAt":"2026-08-18T18:33:42.942Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":177,"estimatedTokens":1226}}752{"id":"stack-78374324","source":"stackoverflow","questionId":78374324,"title":"Tailwind CSS group-hover not working with custom prefix","tags":["css","tailwind-css"],"text":"Title: Tailwind CSS group-hover not working with custom prefix\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using Tailwind CSS with a custom prefix `tw-` for all classes. However, I'm having trouble getting the group-hover functionality to work correctly. Here's the code I'm working with:\n\n\r\n\r\n\n```\n\n tailwind.config = { prefix: 'tw-' }\n\n \n **Hover on me**\n **the texts will be**\n **of different colors**\n \n\n```\n\n\r\n\r\n\r\n\nI've also tried\n\n\r\n\r\n\n```\n\n tailwind.config = { prefix: 'tw-' }\n\n \n **Hover on me**\n **the texts will be**\n **of different colors**\n \n\n```\n\n\r\n\r\n\r\n\nThe following works without a prefix\n\n\r\n\r\n\n```\n\n \n **Hover on me**\n **the texts will be**\n **of different colors**\n \n\n```\n\n========================================\n\nCode:\n```html\n<script src=\"https://cdn.tailwindcss.com/3.2.4\"></script>\n<script>\n tailwind.config = { prefix: 'tw-' }\n</script>\n\n<div class=\"tw-flex tw-h-screen tw-justify-center tw-items-center\">\n <div class=\"tw-group tw-text-xl\">\n <strong class=\"tw-group-hover:tw-text-red-500\">Hover on me </strong>\n <strong class=\"tw-group-hover:tw-text-green-500\">the texts will be </strong>\n <strong class=\"tw-group-hover:tw-text-blue-500\">of different colors</strong>\n </div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.2.4\"></script>\n<script>\n tailwind.config = { prefix: 'tw-' }\n</script>\n\n<div class=\"tw-flex tw-h-screen tw-justify-center tw-items-center\">\n <div class=\"tw-group tw-text-xl\">\n <strong class=\"tw-group-hover:text-red-500\">Hover on me </strong>\n <strong class=\"tw-group-hover:text-green-500\">the texts will be </strong>\n <strong class=\"tw-group-hover:ext-blue-500\">of different colors</strong>\n </div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.2.4\"></script>\n<div class=\"flex h-screen justify-center items-center\">\n <div class=\"group text-xl\">\n <strong class=\"group-hover:text-red-500\">Hover on me </strong>\n <strong class=\"group-hover:text-green-500\">the texts will be </strong>\n <strong class=\"group-hover:text-blue-500\">of different colors</strong>\n </div>\n</div>\n```\n\n```text\ntw-\n```\n\n```html\n<div class=\"tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500\">\n <!-- -->\n</div>\n```\n\n```js\ntailwind.config = { prefix: 'tw-' }\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.2.4\"></script>\n\n<div class=\"tw-flex tw-h-screen tw-justify-center tw-items-center\">\n <div class=\"tw-group tw-text-xl\">\n <strong class=\"group-hover:tw-text-red-500\">Hover on me </strong>\n <strong class=\"group-hover:tw-text-green-500\">the texts will be </strong>\n <strong class=\"group-hover:tw-text-blue-500\">of different colors</strong>\n </div>\n</div>\n```\n\n```text\nsm:\n```\n\n```text\nhover:\n```\n\n```text\ngroup-hover:tw-<class name>\n```\n\n========================================\n\nComments:\n- Worked for me, thank you","metadata":{"transformedAt":"2026-08-18T18:33:42.942Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":148,"estimatedTokens":713}}753{"id":"stack-79739829","source":"stackoverflow","questionId":79739829,"title":"How can I safely introduce the use of `light-dark()` without increasing the minimum browser version requirement?","tags":["css","tailwind-css","tailwind-css-4","lightningcss"],"text":"Title: How can I safely introduce the use of `light-dark()` without increasing the minimum browser version requirement?\nTags: css, tailwind-css, tailwind-css-4, lightningcss\nSource: Stack Overflow\n\nQuestion:\nUsing `light-dark()` would be appealing to me, but it is part of the 2024 baseline and somewhat raises the minimum browser version requirement set by TailwindCSS v4 - which is already high - originally targeting the 2023 baseline.\n\n- https://tailwindcss.com/docs/compatibility (Baseline 2023)\n\n- https://caniuse.com/?search=light-dark (Baseline 2024)\n\nRequired minimum browser versions:\n\nTailwind CSS v4 (without `light-dark()`)\nwith `light-dark()`\n\nChrome 111\nChrome 123\n(+)\n\nSafari 16.4\nSafari 17.5\n(+)\n\nFirefox 128\nFirefox 128\n(=)\n\n- https://caniuse.com/usage-table\n\nThe LightningCSS engine that TailwindCSS v4 uses under the hood provides a solution for a polyfill-like replacement of `light-dark()` with some extra manual code.\n\n- LightningCSS transpilation: `light-dark()` color function\n\nHowever, for compatibility reasons, TailwindCSS has simply disabled the use of this feature here.\n\n- TailwindCSS's list of excluded LightningCSS features\n\n- `tailwindlabs/tailwindcss` issue #15438 - [v4] light-dark is broken in optimized build\n\nHow can I still use `light-dark()` without increasing the minimum browser version requirement, even without relying on this feature?\n\n```\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-primary: light-dark(#da373d, #fd96b0);\n}\n\n* {\n color-scheme: light; /* apply \"light\" (first) color from light-dark() */\n \n @variant dark {\n color-scheme: dark; /* apply \"dark\" (second) color from light-dark() */\n }\n}\n\n Hello world!\n\nToggle Light/Dark\n```\n\nIt works, but for the reasons detailed in the question, it increases the minimum browser version requirements.\n\nFor the reasons described above, the code snippet only works on *Chrome 123+* and *Safari 17.5+*. However, I'd like an alternative so that I don't have to target these versions, but instead align with the *Chrome 111+* and *Safari 16.4+* versions preferred by v4.\n\nThe goal is to be able to declare the light and dark `color-scheme` values in a single line, similar to `light-dark()`, so that both can be seen at once in one line.\n\n**Note**: I like the `light-dark()` solution, but I don't want to impose Baseline 2024 browser requirements on my project, as this could potentially cause me to lose visitors.\n\n========================================\n\nCode:\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --color-primary: light-dark(#da373d, #fd96b0);\n}\n\n* {\n color-scheme: light; /* apply \"light\" (first) color from light-dark() */\n \n @variant dark {\n color-scheme: dark; /* apply \"dark\" (second) color from light-dark() */\n }\n}\n</style>\n\n<h1 class=\"m-4 text-primary text-3xl font-bold underline text-clifford\">\n Hello world!\n</h1>\n\n<button class=\"m-4 px-4 py-2 bg-sky-700 hover:bg-sky-950 text-sky-50 rounded-md cursor-pointer\">Toggle Light/Dark</button>\n```\n\n```text\nlight-dark()\n```\n\n```text\nlight-dark()\n```\n\n```text\nlight-dark()\n```\n\n```text\nlight-dark()\n```\n\n```text\nlight-dark()\n```\n\n```text\ntailwindlabs/tailwindcss\n```\n\n```text\nlight-dark()\n```\n\n```text\ncolor-scheme\n```\n\n```text\nlight-dark()\n```\n\n```text\nlight-dark()\n```\n\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n document.documentElement.classList.toggle('dark');\n});\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme inline {\n --color-primary: var(--tw-light, #da373d) var(--tw-dark, #fd96b0);\n}\n\n* {\n color-scheme: light;\n --tw-light: initial;\n --tw-dark: ;\n \n @variant dark {\n color-scheme: dark;\n --tw-light: ;\n --tw-dark: initial;\n }\n}\n</style>\n\n<h1 class=\"m-4 text-primary text-3xl font-bold underline text-clifford\">\n Hello world!\n</h1>\n\n<button class=\"m-4 px-4 py-2 bg-sky-700 hover:bg-sky-950 text-sky-50 rounded-md cursor-pointer\">Toggle Light/Dark</button>\n```\n\n```text\n--tw-light\n```\n\n```text\n--tw-dark\n```\n\n```text\nempty\n```\n\n```text\ncolor-scheme\n```\n\n```text\ninitial\n```\n\n```text\nprimary\n```\n\n```text\n@variant dark\n```\n\n```text\n@custom-variant dark\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n```text\n@theme inline\n```\n\n```text\nvar(--tw-light, ...) var(--tw-dark, ...)\n```\n\n```text\nlight-dark()\n```\n\n```text\ncolor-scheme\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.942Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":28,"totalLines":241,"estimatedTokens":1203}}754{"id":"stack-74731750","source":"stackoverflow","questionId":74731750,"title":"How to use the `margin: y x;` shorthand in Tailwind?","tags":["css","tailwind-css"],"text":"Title: How to use the `margin: y x;` shorthand in Tailwind?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nIn Tailwind CSS if I use a utility for calc such as:\n\n```\nright-[calc(-50vw+50%)]\n```\n\nthis works as expected. I have some attributes I am trying to add to an element but can't seem to figure out how to get it work using tailwind utilities:\n\n```\n.element {\n width: 100vw;\n max-width: 100vw;\n margin: 0 calc(-50vw + 50%);\n }\n```\n\n========================================\n\nTop Answer:\nUse like below. you use can square brackets to set custom CSS\n\n```\nclass=\"my-0 mx-[calc(-50vw_+_50%)]\"\n```\n\n========================================\n\nCode:\n```text\nright-[calc(-50vw+50%)]\n```\n\n```text\n.element {\n width: 100vw;\n max-width: 100vw;\n margin: 0 calc(-50vw + 50%);\n }\n```\n\n```text\nclass=\"my-0 mx-[calc(-50vw_+_50%)]\"\n```\n\n```text\nmy\n```\n\n```text\nmx\n```\n\n```text\nclass=\"my-0 mx-[calc(-50vw_+_50%)]\"\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.942Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":60,"estimatedTokens":231}}755{"id":"stack-76171245","source":"stackoverflow","questionId":76171245,"title":"Bug with react-tailwindcss-datepicker","tags":["reactjs","next.js","datepicker","tailwind-css"],"text":"Title: Bug with react-tailwindcss-datepicker\nTags: reactjs, next.js, datepicker, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've used tailwindcss for a while now and was always very happy. But I am currently facing major problems with react-tailwindcss-datepicker. In an empty project the datepicker works as expected but in my current nextjs project it doesn't. All dependencies are at latest and usage as described in the docs.\n\nEdit: If I copy the src i works great.\n\nIt has to be a conflict between my project and react-tailwindcss-datepicker, but I don't know where. Does anyone has an idea where the problem could be? Any help would be appreciated. 🙏🏻\n\n**How it should look**\nhttps://i.sstatic.net/4pdB9.png\n\n**How it looks**\nhttps://i.sstatic.net/cXtw7.png\n\n**package.json**\n\n```\n{\n \"name\": \"MyProject\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n },\n \"dependencies\": {\n \"@emotion/react\": \"^11.10.4\",\n \"@emotion/styled\": \"^11.10.4\",\n \"@headlessui/react\": \"^1.7.14\",\n \"@heroicons/react\": \"^2.0.17\",\n \"@hookform/resolvers\": \"^2.9.8\",\n \"@mui/icons-material\": \"^5.10.3\",\n \"@mui/material\": \"^5.10.5\",\n \"@tailwindcss/forms\": \"^0.5.3\",\n \"axios\": \"^0.27.2\",\n \"dancemonkey-dal\": \"*\",\n \"dayjs\": \"^1.11.7\",\n \"eslint-config\": \"*\",\n \"form-data\": \"^4.0.0\",\n \"html-to-image\": \"^1.11.1\",\n \"next\": \"12.2.5\",\n \"next-auth\": \"^4.10.3\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"18.2.0\",\n \"react-hook-form\": \"^7.36.1\",\n \"react-multi-carousel\": \"^2.8.2\",\n \"react-query\": \"^3.39.2\",\n \"react-tailwindcss-datepicker\": \"^1.6.0\",\n \"react-toast\": \"^1.0.3\",\n \"ts-config\": \"*\",\n \"yup\": \"^0.32.11\"\n },\n \"devDependencies\": {\n \"@rvxlab/tailwind-plugin-ios-full-height\": \"^1.1.0\",\n \"@types/node\": \"18.7.14\",\n \"@types/react\": \"18.0.18\",\n \"@types/react-dom\": \"18.0.6\",\n \"autoprefixer\": \"^10.4.8\",\n \"eslint\": \"8.22.0\",\n \"eslint-config-next\": \"12.2.5\",\n \"orval\": \"^6.9.6\",\n \"postcss\": \"^8.4.16\",\n \"tailwindcss\": \"^3.1.8\",\n \"typescript\": \"4.8.2\"\n },\n \"resolutions\": {\n \"webpack\": \"^5\"\n }\n}\n```\n\n**tailwind.config.js**\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n mode: 'jit',\n important: true,\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n \"./node_modules/react-tailwindcss-datepicker/dist/index.esm.js\",\n ],\n plugins: [\n require('@rvxlab/tailwind-plugin-ios-full-height'),\n require('@tailwindcss/forms')\n ],\n theme: {\n extend: {\n colors: {\n custom: '#517080'\n },\n screens: {\n 'csm': '640px',\n 'cs': '700px',\n 'cmd': '768px',\n 'cla': '800px',\n 'clb': '900px',\n 'clc': '950px',\n 'clg': '1024px',\n 'cxl': '1280px',\n 'c2xl': '1536px',\n 'c3xl': '1920px',\n },\n },\n }\n}\n```\n\n========================================\n\nTop Answer:\nadd this in your `tailwind.config.ts`\n\n```\ncontent: [\n './node_modules/tailwind-datepicker-react/dist/**/*.js'\n ]\n```\n\n========================================\n\nCode:\n```text\n{\n \"name\": \"MyProject\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n },\n \"dependencies\": {\n \"@emotion/react\": \"^11.10.4\",\n \"@emotion/styled\": \"^11.10.4\",\n \"@headlessui/react\": \"^1.7.14\",\n \"@heroicons/react\": \"^2.0.17\",\n \"@hookform/resolvers\": \"^2.9.8\",\n \"@mui/icons-material\": \"^5.10.3\",\n \"@mui/material\": \"^5.10.5\",\n \"@tailwindcss/forms\": \"^0.5.3\",\n \"axios\": \"^0.27.2\",\n \"dancemonkey-dal\": \"*\",\n \"dayjs\": \"^1.11.7\",\n \"eslint-config\": \"*\",\n \"form-data\": \"^4.0.0\",\n \"html-to-image\": \"^1.11.1\",\n \"next\": \"12.2.5\",\n \"next-auth\": \"^4.10.3\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"18.2.0\",\n \"react-hook-form\": \"^7.36.1\",\n \"react-multi-carousel\": \"^2.8.2\",\n \"react-query\": \"^3.39.2\",\n \"react-tailwindcss-datepicker\": \"^1.6.0\",\n \"react-toast\": \"^1.0.3\",\n \"ts-config\": \"*\",\n \"yup\": \"^0.32.11\"\n },\n \"devDependencies\": {\n \"@rvxlab/tailwind-plugin-ios-full-height\": \"^1.1.0\",\n \"@types/node\": \"18.7.14\",\n \"@types/react\": \"18.0.18\",\n \"@types/react-dom\": \"18.0.6\",\n \"autoprefixer\": \"^10.4.8\",\n \"eslint\": \"8.22.0\",\n \"eslint-config-next\": \"12.2.5\",\n \"orval\": \"^6.9.6\",\n \"postcss\": \"^8.4.16\",\n \"tailwindcss\": \"^3.1.8\",\n \"typescript\": \"4.8.2\"\n },\n \"resolutions\": {\n \"webpack\": \"^5\"\n }\n}\n```\n\n```text\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n mode: 'jit',\n important: true,\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n \"./node_modules/react-tailwindcss-datepicker/dist/index.esm.js\",\n ],\n plugins: [\n require('@rvxlab/tailwind-plugin-ios-full-height'),\n require('@tailwindcss/forms')\n ],\n theme: {\n extend: {\n colors: {\n custom: '#517080'\n },\n screens: {\n 'csm': '640px',\n 'cs': '700px',\n 'cmd': '768px',\n 'cla': '800px',\n 'clb': '900px',\n 'clc': '950px',\n 'clg': '1024px',\n 'cxl': '1280px',\n 'c2xl': '1536px',\n 'c3xl': '1920px',\n },\n },\n }\n}\n```\n\n```text\ncontent: [\n './src/**/*.{js, jsx, ts, tsx, mdx}',\n '../../node_modules/react-tailwindcss-datepicker/dist/index.esm.js'\n]\n```\n\n```text\ncontent: [\n './node_modules/tailwind-datepicker-react/dist/**/*.js'\n ]\n```\n\n```text\ntailwind.config.ts\n```\n\n========================================\n\nComments:\n- it seems like you are also using material-ui, check this and also I don't see `@tailwindcss/forms` in your `package.json`\n- Thanks for the link, I did that and also set important in the tailwind.config.js to true, to overrule the materialUI style. \"@tailwindcss/forms\": \"^0.5.3\", is in package.json.\n- Did this ever get resolved? I'm having the same issue.\n- Had a problem with usage in a monorepo. github.com/onesine/react-tailwindcss-datepicker/issues/126\n- Thank you, for me the path which worked was \"./node_modules/react-tailwindcss-datepicker/dist/index.esm.‌​js\"","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":242,"estimatedTokens":1543}}756{"id":"stack-75809619","source":"stackoverflow","questionId":75809619,"title":"Swiper - how to hide and show navigation at breakpoints? (React)","tags":["javascript","reactjs","tailwind-css","swiper.js"],"text":"Title: Swiper - how to hide and show navigation at breakpoints? (React)\nTags: javascript, reactjs, tailwind-css, swiper.js\nSource: Stack Overflow\n\nQuestion:\nI got React Typescript swiper slider styled with tailwind.\nEverything works correctly, as long as I hide the navigation when I resize it. To hide the navigation I use the tailwind style 'hidden', but when I show the navigation again it stops working. How to correctly hide/show navigation in react on different brackpoints?\n\n```\nimport { Navigation, Pagination } from 'swiper';\nimport { Swiper, SwiperSlide } from \"swiper/react\";\nimport 'swiper/css';\nimport 'swiper/css/navigation';\n\nconst Slider = ({slides}) => {\n const prevRef = useRef(null);\n const nextRef = useRef(null);\n\n return (\n \n {\n if (swiper.params.navigation && typeof swiper.params.navigation !== 'boolean') {\n swiper.params.navigation.prevEl = prevRef.current;\n swiper.params.navigation.nextEl = nextRef.current;\n }\n }}\n modules={[Navigation]}\n >\n {slides.map((slide) => {\n return (\n \n ...slide...\n \n )})\n }\n \n // show/hide nav buttons\n // After the buttons have been hidden once, they stop working, they appear but don't work\n prev\n next\n \n \n );\n}\n```\n\n========================================\n\nCode:\n```text\nimport { Navigation, Pagination } from 'swiper';\nimport { Swiper, SwiperSlide } from \"swiper/react\";\nimport 'swiper/css';\nimport 'swiper/css/navigation';\n\nconst Slider = ({slides}) => {\n const prevRef = useRef<HTMLButtonElement>(null);\n const nextRef = useRef<HTMLButtonElement>(null);\n\n return (\n <div>\n <Swiper\n slidesPerView={'auto'}\n spaceBetween={16}\n className='custom-swiper-slide'\n navigation={{\n enabled: true,\n nextEl: nextRef.current,\n prevEl: prevRef.current,\n disabledClass: 'opacity-40',\n }}\n breakpoints={{\n 320: {\n slidesPerView: 'auto',\n spaceBetween: 8,\n //navigation: {enabled: false} - not working!\n //navigation: {hidden: true} - not working!\n },\n 640: {\n slidesPerView: 1,\n spaceBetween: 16,\n }\n }}\n onBeforeInit={(swiper) => {\n if (swiper.params.navigation && typeof swiper.params.navigation !== 'boolean') {\n swiper.params.navigation.prevEl = prevRef.current;\n swiper.params.navigation.nextEl = nextRef.current;\n }\n }}\n modules={[Navigation]}\n >\n {slides.map((slide) => {\n return (\n <SwiperSlide>\n ...slide...\n </SwiperSlide>\n )})\n }\n </Swiper>\n <div className='hidden md:block'> // show/hide nav buttons\n // After the buttons have been hidden once, they stop working, they appear but don't work\n <button ref={prevRef}>prev</button>\n <button ref={nextRef}>next</button>\n </div>\n </div>\n );\n}\n```\n\n```text\nbreakpoints={{\n 320: {\n navigation: {\n enabled: true,\n nextEl: nextRef.current,\n prevEl: prevRef.current,\n },\n },\n 640: {\n navigation: {\n enabled: true,\n nextEl: nextRef.current,\n prevEl: prevRef.current,\n disabledClass: 'opacity-40',\n },\n }\n```\n\n========================================\n\nComments:\n- can you try opacity-0 md:opacity-1\n- it just hides the buttons and they stop working\n- What's the point of enabled? If I choose enabled false it will hide it?","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":134,"estimatedTokens":890}}757{"id":"stack-76012750","source":"stackoverflow","questionId":76012750,"title":"Error: Cannot find module 'tailwindcss/defaultTheme' when deploying to Heroku","tags":["ruby-on-rails","heroku","tailwind-css"],"text":"Title: Error: Cannot find module 'tailwindcss/defaultTheme' when deploying to Heroku\nTags: ruby-on-rails, heroku, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to deploy my Rails 7 app to Heroku but it fails on `Running: rake assets:precompile` with error: `Error: Cannot find module 'tailwindcss/defaultTheme' when deploying to Heroku`\n\nI tried running `RAILS_ENV=production bundle exec rake assets:precompile` but it didn't help.\n\nI am using `gem \"tailwindcss-rails\", \"~> 2.0\"` to add TailwindCSS to my Rails app.\n\nIt works locally when I run it with `bin/dev`(or `rails s` after running `bin/dev`).\n\nAm I missing some crucial step here?\n\nHere is my `tailwind.config.js` for reference.\n\n```\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n content: [\n './public/*.html',\n './app/helpers/**/*.rb',\n './app/javascript/**/*.js',\n './app/views/**/*',\n './node_modules/flowbite/**/*.js'\n ],\n theme: {\n extend: {\n fontFamily: {\n sans: ['Inter var', ...defaultTheme.fontFamily.sans],\n },\n colors: {\n primary: \"#000000\",\n action: \"#000000\",\n \"action-hover\": \"#000000\"\n }\n },\n },\n plugins: [\n require('@tailwindcss/forms'),\n require('@tailwindcss/aspect-ratio'),\n require('@tailwindcss/typography'),\n require('@tailwindcss/container-queries'),\n require('flowbite/plugin')\n ]\n}\n```\n\n========================================\n\nTop Answer:\nThanks for this! It helped me get around a similar problem.\n\nMy Rails 7 app, created with the `--css tailwind` option, was working just fine on Heroku. But things got weird when I added a custom Tailwind plugin that used the `flattenColorPalette` utility:\n\n```\n...\nfunction ({ matchUtilities, theme }) {\n matchUtilities(\n {\n \"solid-bottom-line-2\": (value) => ({\n \"boxShadow\": `0 2px 0 0 ${value}`\n })\n },\n {\n \"values\": flattenColorPalette(theme(\"backgroundColor\")),\n \"type\": \"color\"\n }\n )\n}\n...\n```\n\nI had to import that utility in my `tailwind.config.js`:\n\n```\nconst {\n default: flattenColorPalette,\n} = require('tailwindcss/lib/util/flattenColorPalette')\n```\n\nAfter that, things blew up locally. Using the bundled standalone executable that comes with the `tailwindcss-rails` gem wasn't sufficient once I added that `require` statement. Adding `tailwindcss` to my `package.json` (with `npm i tailwindcss`; note that I didn't install `tailwindcss` as a dev dependency) got things working locally. At this point I ran into the same issue you had deploying to Heroku, but adding the `heroku/nodejs` buildpack fixed things.\n\n========================================\n\nCode:\n```js\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n content: [\n './public/*.html',\n './app/helpers/**/*.rb',\n './app/javascript/**/*.js',\n './app/views/**/*',\n './node_modules/flowbite/**/*.js'\n ],\n theme: {\n extend: {\n fontFamily: {\n sans: ['Inter var', ...defaultTheme.fontFamily.sans],\n },\n colors: {\n primary: \"#000000\",\n action: \"#000000\",\n \"action-hover\": \"#000000\"\n }\n },\n },\n plugins: [\n require('@tailwindcss/forms'),\n require('@tailwindcss/aspect-ratio'),\n require('@tailwindcss/typography'),\n require('@tailwindcss/container-queries'),\n require('flowbite/plugin')\n ]\n}\n```\n\n```text\nRunning: rake assets:precompile\n```\n\n```text\nError: Cannot find module 'tailwindcss/defaultTheme' when deploying to Heroku\n```\n\n```text\nRAILS_ENV=production bundle exec rake assets:precompile\n```\n\n```text\ngem \"tailwindcss-rails\", \"~> 2.0\"\n```\n\n```text\nbin/dev\n```\n\n```text\nrails s\n```\n\n```text\nbin/dev\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n1. heroku/nodejs\n2. heroku/ruby\n```\n\n```text\nnpm install\n```\n\n```text\nheroku/ruby\n```\n\n```text\nherok/nodejs\n```\n\n```text\nnpm install\n```\n\n```text\nheroku/nodejs\n```\n\n```text\nheroku buildpacks\n```\n\n```text\nheroku buildpacks:add --index 1 heroku/nodejs\n```\n\n```text\nheroku buildpacks\n```\n\n```text\n...\nfunction ({ matchUtilities, theme }) {\n matchUtilities(\n {\n \"solid-bottom-line-2\": (value) => ({\n \"boxShadow\": `0 2px 0 0 ${value}`\n })\n },\n {\n \"values\": flattenColorPalette(theme(\"backgroundColor\")),\n \"type\": \"color\"\n }\n )\n}\n...\n```\n\n```text\nconst {\n default: flattenColorPalette,\n} = require('tailwindcss/lib/util/flattenColorPalette')\n```\n\n```text\n--css tailwind\n```\n\n```text\nflattenColorPalette\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwindcss-rails\n```\n\n```text\nrequire\n```\n\n```text\ntailwindcss\n```\n\n```text\npackage.json\n```\n\n```text\nnpm i tailwindcss\n```\n\n```text\ntailwindcss\n```\n\n```text\nheroku/nodejs\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":30,"totalLines":253,"estimatedTokens":1141}}758{"id":"stack-77568001","source":"stackoverflow","questionId":77568001,"title":"How to use postcss-import with tailwindcss-rails and importmaps","tags":["ruby-on-rails","tailwind-css","import-maps","postcss-import"],"text":"Title: How to use postcss-import with tailwindcss-rails and importmaps\nTags: ruby-on-rails, tailwind-css, import-maps, postcss-import\nSource: Stack Overflow\n\nQuestion:\nI started a new rails project and am attempting to get tailwind running on it.\n\nI'd like to be able to have the tailwind css files separated for organizational reasons.\n\nRelevant gems in my `Gemfile`:\n\n```\ngem \"sprockets-rails\"\ngem \"importmap-rails\"\ngem \"tailwindcss-rails\"\n```\n\nI ran `bin/importmap pin postcss-import` which added a bunch of pins to my `config/importmap.rb` file.\n\nI would have assumed this would allow those node modules to be accessed from JS files from within the application? So then in `config/tailwind.config.js` I have this:\n\n```\nmodule.exports = {\n // which files tailwind can access https://tailwindcss.com/docs/content-configuration\n content: [\n './public/*.html',\n './app/helpers/**/*.rb',\n './app/javascript/**/*.js',\n './app/views/**/*.{erb,haml,html,slim}',\n './app/views/**/*'\n ],\n plugins: [\n require(\"postcss-import\"),\n require('@tailwindcss/forms'),\n require('@tailwindcss/aspect-ratio'),\n require('@tailwindcss/typography'),\n require('@tailwindcss/container-queries'),\n ]\n}\n```\n\nFor my CSS, I have `app/assets/stylesheets/application.tailwind.css` that looks like this:\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@import \"tailwind/font\"\n```\n\nAnd I also have `app/assets/stylesheets/tailwind/font.css` that looks like this:\n\n```\n@layer base {\n h1 {\n @apply 2xl;\n }\n h2 {\n @apply h2;\n }\n}\n```\n\nHowever, when I go to build the CSS (via `bin/dev`), I get this error:\n\n```\n18:00:48 css.1 | Rebuilding...\n18:00:48 css.1 | Error: Cannot find module 'postcss-import'\n18:00:48 css.1 | Require stack:\n18:00:48 css.1 | - /home/zifnab/projects/my_project/config/tailwind.config.js\n18:00:48 css.1 | at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)\n18:00:48 css.1 | at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)\n18:00:48 css.1 | at Function.resolve (node:internal/modules/cjs/helpers:108:19)\n18:00:48 css.1 | at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:250334)\n18:00:48 css.1 | at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:252917)\n18:00:48 css.1 | at /home/zifnab/projects/my_project/config/tailwind.config.js:112:5\n18:00:48 css.1 | at evalModule (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:255614)\n18:00:48 css.1 | at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:253542)\n18:00:48 css.1 | at /snapshot/tailwindcss/lib/lib/load-config.js:37:30\n18:00:48 css.1 | at loadConfig (/snapshot/tailwindcss/lib/lib/load-config.js:39:6) {\n18:00:48 css.1 | code: 'MODULE_NOT_FOUND',\n18:00:48 css.1 | requireStack: [\n18:00:48 css.1 | '/home/zifnab/projects/my_project/config/tailwind.config.js'\n18:00:48 css.1 | ]\n18:00:48 css.1 | }\n```\n\nWhich indicates to me that the importmaps aren't currently working during this build step to include the `postcss-import` module... I would rather not fall back on doing yarn packages, I'd like to stick with the rails 7 way of importmaps if possible... what can I do here to make it recognize the module from importmaps while building this CSS...?\n\n========================================\n\nCode:\n```text\ngem \"sprockets-rails\"\ngem \"importmap-rails\"\ngem \"tailwindcss-rails\"\n```\n\n```text\nmodule.exports = {\n // which files tailwind can access https://tailwindcss.com/docs/content-configuration\n content: [\n './public/*.html',\n './app/helpers/**/*.rb',\n './app/javascript/**/*.js',\n './app/views/**/*.{erb,haml,html,slim}',\n './app/views/**/*'\n ],\n plugins: [\n require(\"postcss-import\"),\n require('@tailwindcss/forms'),\n require('@tailwindcss/aspect-ratio'),\n require('@tailwindcss/typography'),\n require('@tailwindcss/container-queries'),\n ]\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@import \"tailwind/font\"\n```\n\n```text\n@layer base {\n h1 {\n @apply 2xl;\n }\n h2 {\n @apply h2;\n }\n}\n```\n\n```text\n18:00:48 css.1 | Rebuilding...\n18:00:48 css.1 | Error: Cannot find module 'postcss-import'\n18:00:48 css.1 | Require stack:\n18:00:48 css.1 | - /home/zifnab/projects/my_project/config/tailwind.config.js\n18:00:48 css.1 | at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)\n18:00:48 css.1 | at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)\n18:00:48 css.1 | at Function.resolve (node:internal/modules/cjs/helpers:108:19)\n18:00:48 css.1 | at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:250334)\n18:00:48 css.1 | at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:252917)\n18:00:48 css.1 | at /home/zifnab/projects/my_project/config/tailwind.config.js:112:5\n18:00:48 css.1 | at evalModule (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:255614)\n18:00:48 css.1 | at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:253542)\n18:00:48 css.1 | at /snapshot/tailwindcss/lib/lib/load-config.js:37:30\n18:00:48 css.1 | at loadConfig (/snapshot/tailwindcss/lib/lib/load-config.js:39:6) {\n18:00:48 css.1 | code: 'MODULE_NOT_FOUND',\n18:00:48 css.1 | requireStack: [\n18:00:48 css.1 | '/home/zifnab/projects/my_project/config/tailwind.config.js'\n18:00:48 css.1 | ]\n18:00:48 css.1 | }\n```\n\n```text\nGemfile\n```\n\n```text\nbin/importmap pin postcss-import\n```\n\n```text\nconfig/importmap.rb\n```\n\n```text\nconfig/tailwind.config.js\n```\n\n```text\napp/assets/stylesheets/application.tailwind.css\n```\n\n```text\napp/assets/stylesheets/tailwind/font.css\n```\n\n```text\nbin/dev\n```\n\n```text\npostcss-import\n```\n\n```js\nrequire(\"postcss-import\")\n```\n\n```scss\n// postcss requires imports to be first\n@import \"./tailwind/font\";\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```scss\n@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n\n@import \"./tailwind/font\";\n```\n\n```text\ntailwindcss-rails\n```\n\n```text\n@import\n```\n\n========================================\n\nComments:\n- Ok well now I feel dumb! I tried what you mentioned (putting it as the first directive), but `@import \"tailwind/font\"` wasn't working so I assumed postcss-import must not be available by default... I just needed to prefix it with `\"./\"` and now it does work XD Thank you so much for saving me more headaches.","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":18,"totalLines":223,"estimatedTokens":1598}}759{"id":"stack-75777718","source":"stackoverflow","questionId":75777718,"title":"How do you justify-evenly with borders in Tailwind?","tags":["tailwind-css"],"text":"Title: How do you justify-evenly with borders in Tailwind?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm wondering if it's at all possible in purely TailwindCSS to evenly justify columns with a gutter separating them? Currently the only way I could achieve this is to:\n\n- On the parent provide it with `flex`, `justify-evenly` and use `divide-x`\n\n- On each child in the panel use `w-full` and pad them according to their position ie. first doesn't pad left and further right doesn't pad right, the middle padding evenly.\n\nHere's an example of the result I'm hoping to achieve:\n\nhttps://i.sstatic.net/b4nP5.png\n\n========================================\n\nCode:\n```text\nflex\n```\n\n```text\njustify-evenly\n```\n\n```text\ndivide-x\n```\n\n```text\nw-full\n```\n\n```css\n@layer components {\n .item {\n @apply flex-1 px-5 border-r border-solid border-neutral-200;\n }\n .item:first-child {\n @apply pl-0;\n }\n .item:last-child {\n @apply pr-0 border-0;\n }\n}\n```\n\n```html\n<div class=\"card\"> \n <hr />\n <div class=\"flex\">\n <div class=\"item\">\n <p class=\"title\">Ready to drink</p>\n <p class=\"count\">31</p>\n </div>\n <div class=\"item\">\n <p class=\"title\">Expiring Soon</p>\n <p class=\"count\">23</p>\n </div>\n <div class=\"item\">\n <p class=\"title\">Past Prime</p>\n <p class=\"count\">32</p>\n </div>\n </div>\n</div>\n```\n\n```html\n<div class=\"card\"> \n <hr />\n <div class=\"flex gap-5\">\n <div class=\"flex-1 bg-green-100\">\n <p class=\"title\">Ready to drink</p>\n <p class=\"count\">31</p>\n </div>\n <div class=\"bg-neutral-200 w-[1px]\"></div> <!-- Divider -->\n <div class=\"flex-1 bg-orange-100\">\n <p class=\"title\">Expiring Soon</p>\n <p class=\"count\">23</p>\n </div>\n <div class=\"bg-neutral-200 w-[1px]\"></div> <!-- Divider -->\n <div class=\"flex-1 bg-red-100\">\n <p class=\"title\">Past Prime</p>\n <p class=\"count\">32</p>\n </div>\n </div>\n</div>\n```\n\n```text\nflex\n```\n\n```text\nflex-1\n```\n\n```text\nflex\n```\n\n```text\nflex-1\n```\n\n```text\ngap-5\n```\n\n========================================\n\nComments:\n- Thank you very much, I hadn't thought about these as options.\n- Option B is the perfect solution","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":115,"estimatedTokens":543}}760{"id":"stack-74210304","source":"stackoverflow","questionId":74210304,"title":"Fix Element at Bottom of the Screen, but only as long as the Parent Container hasn't ended?","tags":["html","css","css-position","tailwind-css","absolute"],"text":"Title: Fix Element at Bottom of the Screen, but only as long as the Parent Container hasn't ended?\nTags: html, css, css-position, tailwind-css, absolute\nSource: Stack Overflow\n\nQuestion:\nSay I have an element that is visually part of a container. This container can be very long in height.\n\nNow when the user scrolls down, I want to position this element to remain at the bottom of the *screen*. But when the container ends at some point, I want the element to stay at the bottom of that container and no scroll down further.\n\nSo once again: When the container hasn't ended yet, the element is at the bottom of the screen:\n\nhttps://i.sstatic.net/7Awtn.png\n\n... but when I continue scrolling, it stops inside the container:\n\nhttps://i.sstatic.net/Jzqw5.png\n\nI am a bit stuck here. I do know how to do this when the element is positioned at the top inside of the container. Scrolling down will then just make it stop at the bottom.\n\nThe problem seems to be that either the Element will be moved outside of the document flow, so it won't remain inside the container, OR it will be at the bottom of the container *all the time*, so the element won't scroll with the user and remain on the bottom of the *screen*.\n\nAny ideas?\n\n```\n\n \n Element\n \n\n \n\n The page continues here but the element remains in the container ...\n \n\n```\n\nPS: Using tailwind & react here, but any vanilla CSS are welcome too! I would love to solve this without javascript.\n\n========================================\n\nTop Answer:\nYour issue is technically your solution. Position: sticky will only stay within a parent element. The best way to fix this is to place a parent element around alllll objects you want the sticky to scroll over. If that doesn't work, you could use jquery or javascript to write a script that says, \"when the viewport scrolls to this position, then add position:fixed to this element\"\n\nPosition: Sticky makes an element appear at the top of the parent container, then scroll over everything else in a fixed position (literally like position: fixed) until the end of the parent container.\n\nTo make this work you need to:\n\n- start a parent container at the place where you want the sticky item to first appear\n\n- contain all of the items you want the sticky object to scroll *over* inside that parent container\n\n- end the parent container where you want the sticky object to stop\n\nHere's another SO post about it: CSS: Position sticky to bottom when enter viewport\n\n\r\n\r\n\n```\n.sticky {\n position: -webkit-sticky;\n position: sticky;\n bottom: 0;\n height: 30px;\n width: 100vw;\n background: yellow;\n}\n```\n\n\r\n\n```\n\n Scroll\n \n\n \n \n \n Scroll\n \n Scroll\n \n Scroll\n \n Sticky Section\n\n```\n\n\r\n\r\n\r\n\nif you want to go the jquery route...\n\n\r\n\r\n\n```\n$(document).scroll(function() {\n var viewportPlacement = $(window).scrollTop() + $(window).height(); //finds the height of the bottom of the viewport\n var initialSticky = $('.sticky').prev().height() + $('.sticky').height(); //finds the initial placement of the sticky element, plus the height of the element so the whole thing has to scroll into view for the fixed position to be added\n if (viewportPlacement >= initialSticky) { //if the bottom of the viewport has the whole sticky element in it\n $('.sticky').css('position', 'fixed') //then add position fixed to it\n } else if (viewportPlacement \n\nHello World\n\n```\n\n========================================\n\nCode:\n```text\n<div className=\"mx-20 my-36\">\n <div className=\"bg-slate-200 h-[1200px] w-full relative border-2 border-black relative\">\n <div className=\"fixed bottom-0 left-0 right-0 p-2 bg-white w-full border-2 border-red-600\">Element</div>\n </div>\n\n <div className=\"my-12\">\n\n The page continues here but the element remains in the container ...\n </div>\n</div>\n```\n\n```text\n<div className=\"mx-20 my-36\">\n <div className=\"bg-slate-200 border-2 border-black w-full\">\n <div className=\"h-[1200px]\">\n </div>\n <div className=\"sticky bottom-0 left-0 right-0 p-2 bg-white w-full border-2 border-red-600\">Element</div>\n </div>\n\n <div className=\"my-12\">\n The page continues here but the element remains in the container ...\n </div>\n</div>\n```\n\n```text\nfixed\n```\n\n```text\nsticky\n```\n\n```text\nrelative\n```\n\n```css\n.sticky {\n position: -webkit-sticky;\n position: sticky;\n bottom: 0;\n height: 30px;\n width: 100vw;\n background: yellow;\n}\n```\n\n```html\n<!-- Content you want before the sticky element -->\n<div>\n <div style=\"height: 300px; background: red;\">Scroll</div>\n <div style=\"height: 300px; background: orange;\"></div>\n</div>\n\n<!-- Content you want after the sticky element -->\n<div>\n <!-- The sticky element will appear as if its been placed here -->\n <div style=\"height: 300px; background: green;\"></div>\n <div style=\"height: 300px; background: blue;\"></div>\n <div style=\"height: 300px; background: red;\">Scroll</div>\n <div style=\"height: 300px; background: orange;\"></div>\n <div style=\"height: 300px; background: red;\">Scroll</div>\n <div style=\"height: 300px; background: orange;\"></div>\n <div style=\"height: 300px; background: red;\">Scroll</div>\n <div style=\"height: 300px; background: orange;\"></div>\n <div class=\"sticky\">Sticky Section</div>\n</div>\n```\n\n```js\n$(document).scroll(function() {\n var viewportPlacement = $(window).scrollTop() + $(window).height(); //finds the height of the bottom of the viewport\n var initialSticky = $('.sticky').prev().height() + $('.sticky').height(); //finds the initial placement of the sticky element, plus the height of the element so the whole thing has to scroll into view for the fixed position to be added\n if (viewportPlacement >= initialSticky) { //if the bottom of the viewport has the whole sticky element in it\n $('.sticky').css('position', 'fixed') //then add position fixed to it\n } else if (viewportPlacement < initialSticky){ //else if the initial placement of the sticky element is below the viewport\n $('.sticky').css('position', 'static') //remove the position fixed\n }\n})\n```\n\n```css\n.sibling {\n background-color: lavender;\n height: 150vh;\n}\n\n.sticky {\n background-color: pink;\n box-sizing: border-box;\n border: 1px solid fuchsia;\n position: static;\n padding: 20px;\n width: 100%;\n bottom: 0;\n}\n```\n\n```html\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>\n<div class=\"sibling\"></div>\n<div class=\"sticky\">Hello World</div>\n<div class=\"sibling\"></div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":220,"estimatedTokens":1608}}761{"id":"stack-73756449","source":"stackoverflow","questionId":73756449,"title":"Tailwind arbitrary background-position values","tags":["html","css","tailwind-css"],"text":"Title: Tailwind arbitrary background-position values\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThe docs say that with the `jit` mode you can use arbitrary values for background positioning, giving the example:\n\n``\n\nBut this isn't an arbitrary css value like say `80px`.\n\nIs there any documentation for this syntax?\n\n1rem obviously offsets the `top` value, but how would I also offset the `center`? My guess of `bg-[center_2rem_top_1rem]` doesn't work.\n\nI'm also surprised that something like `bg-[0% 20%]` doesn't work, especially as I've seen it suggested as answers to other questions.\n\nThanks\n\n========================================\n\nTop Answer:\nIf Tailwind fails to understand the **arbitrary values**, maybe due to ambiguity, you can provide a **hint** to the value like this: `bg-[position:0_100%]`\n\n========================================\n\nCode:\n```text\njit\n```\n\n```text\n<div class=\"bg-[center_top_1rem]\">\n```\n\n```text\n80px\n```\n\n```text\ntop\n```\n\n```text\ncenter\n```\n\n```text\nbg-[center_2rem_top_1rem]\n```\n\n```text\nbg-[0% 20%]\n```\n\n```text\n.bg-\\[center_2rem_top_1rem\\] {\n background-position: center 2rem top 1rem;\n}\n```\n\n```text\n3-value syntax\n```\n\n```text\nbg-[center_top_1rem]\n```\n\n```text\ncenter\n```\n\n```text\ntop\n```\n\n```text\n1rem\n```\n\n```text\n[center_2rem_top_1rem]\n```\n\n```text\n2rem\n```\n\n```text\n[left_2rem_top_1rem]\n```\n\n```text\nbg-[0% 20%]\n```\n\n```text\nbg-[0%_20%]\n```\n\n```text\nbottom_right\n```\n\n```text\nbg-[position:0_100%]\n```\n\n========================================\n\nComments:\n- Great answer, thanks! I guess I just wasn't aware of underscore separated values, and hadn't thought about that in conjunction with the 3 value syntax. I managed to make the percentages work with the 4 value syntax described in your link `bg-[top_0%_left_100%]`\n- Here it doesn't work at all... I'm going to stick to the great, genial vanilla CSS","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":114,"estimatedTokens":467}}762{"id":"stack-71032856","source":"stackoverflow","questionId":71032856,"title":"How to change Tailwind CSS background color with Svelte, based on a value unpacked in #each?","tags":["javascript","tailwind-css","svelte","tailwind-ui"],"text":"Title: How to change Tailwind CSS background color with Svelte, based on a value unpacked in #each?\nTags: javascript, tailwind-css, svelte, tailwind-ui\nSource: Stack Overflow\n\nQuestion:\nI am a beginner in both Svelte and Tailwind and want to avoid an XY-Problem, so here is my goal:\n\nI generate rows of a table with an `#each` loop in Svelte. (6 values per row). I now want to conditionally color the background of this row based on one value (the battery charge).\n\nMy idea was to conditionally render different tags based on this value. Like this:\n\n```\n{#each allLZ as {id, name, mac, status, lastcontact, battery}, i}\n \n {#if battery > 70}\n \n {:else if battery > 40}\n \n {:else }\n \n {/if}\n```\n\nBut this doesn't work as Svelte wants to see the tags closed to be full elements, not piecemeal code, fair enough.\n\nSo is there a good way to change tailwind background color based on a value unpacked in `#each`?\n\n========================================\n\nTop Answer:\nI would recommend having a function that give you back the background color according to the `batteryValue` like:\n\n```\nlet getBatteryColor = (batteryValue) => {\n if (batteryValue > 70) return 'green'\n if (batteryValue > 40) return 'yellow'\n return 'red'\n}\n```\n\n...and then consume it in the node's class:\n\n```\n\n ...\n\n```\n\nHave a look at the REPL.\n\n========================================\n\nCode:\n```text\n{#each allLZ as {id, name, mac, status, lastcontact, battery}, i}\n \n {#if battery > 70}\n <tr class=\"bg-green-50\">\n {:else if battery > 40}\n <tr class=\"bg-yellow-50\">\n {:else }\n <tr class=\"bg-red-50\">\n {/if}\n```\n\n```text\n#each\n```\n\n```text\n#each\n```\n\n```html\n{#each allLZ as {id, name, mac, status, lastcontact, battery}, i}\n<tr\n class:bg-red-500={battery < 39}\n class:bg-yellow-500={battery >= 40 && battery < 70}\n class:bg-green-500={ battery >= 70}>\n\n <td>{name}/{battery}</td>\n\n</tr>\n{/each}\n```\n\n```text\nclass:name\n```\n\n```js\nlet getBatteryColor = (batteryValue) => {\n if (batteryValue > 70) return 'green'\n if (batteryValue > 40) return 'yellow'\n return 'red'\n}\n```\n\n```html\n<tr class={`bg-${getBatteryColor(batteryValue)}`}>\n <td>...</td>\n</tr>\n```\n\n```text\nbatteryValue\n```\n\n========================================\n\nComments:\n- That nearly works (with added quotes after the equals-sign) but only ever colors red or green. The middle condition (with the AND) never triggers. Are you sure this is possible to do?\n- Please click on the \"repl link\" at the bottom, should see the three conditions triggered. Could you eventually paste your `allLZ`? PS. the quotes are not required.\n- Oh, I overlooked that one. Thanks a lot! My stupid mistake. Tailwind didnt have a yellow-50 apparently. yellow-100 did the trick. !\n- Easier to unit test relative to @Paolo's answer?","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":115,"estimatedTokens":705}}763{"id":"stack-72813467","source":"stackoverflow","questionId":72813467,"title":"Tailwind CSS: Button larger than A link","tags":["html","css","tailwind-css"],"text":"Title: Tailwind CSS: Button larger than A link\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nUsing Tailwind CSS.\nSetting up a form with a button to save the data then an 'a link' to abort.\n\nThe button has slightly more padding in the height than the link but they have similar css.\nChanging the a link to a button tag makes them match up and have the same height.\n\nCan someone kindly point to where this extra padding is referenced or how to solve this by not making everything a button.\n\nPlease see https://play.tailwindcss.com/7MmHdWY6Iw for example (updated link as it was originally incorrect)\n\n```\nBack\n\nNext\n```\n\n========================================\n\nCode:\n```text\n<a href=\"\"\nvalue=\"cancel\" \nclass=\"ring-gray-500 ring-1 rounded text-gray-800 hover:text-white p-2.5 hover:bg-gray-800\">Back</a>\n\n<button value=\"submit\" \nclass=\"ring-blue-400 ring-1 rounded text-white bg-blue-500 p-2.5 hover:bg-blue-600\">Next</button>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<div class=\"p-10 space-x-5\">\n <a href=\"\"\nvalue=\"cancel\" \nclass=\"ring-gray-500 ring-1 rounded text-gray-800 hover:text-white px-3 py-[13px] hover:bg-gray-800\">Back</a>\n\n<button value=\"submit\" \nclass=\"ring-blue-400 ring-1 rounded text-white bg-blue-500 px-3 py-[10px] hover:bg-blue-600\">Next</button>\n</div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":44,"estimatedTokens":330}}764{"id":"stack-72378555","source":"stackoverflow","questionId":72378555,"title":"Notification number over badge Tailwind","tags":["reactjs","tailwind-css","storybook","tailwind-ui"],"text":"Title: Notification number over badge Tailwind\nTags: reactjs, tailwind-css, storybook, tailwind-ui\nSource: Stack Overflow\n\nQuestion:\nstarting point on code\nhow should it look from figma\n\nI need to create a kinda notification number as in the second picture that is my mockup in figma.\nAs for now I have those three badges written like this.\n\n```\n\n \n Indigo\n \n \n Purple\n \n \n Pink\n \n \n```\n\nI'm using storybook, tailwind UI and react (18).\n\n========================================\n\nCode:\n```text\n<div className=\"mt-3\">\n <span className=\"bg-indigo-100 text-indigo-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-900\">\n Indigo\n </span>\n <span className=\"bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900\">\n Purple\n </span>\n <span className=\"bg-pink-100 text-pink-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-900\">\n Pink\n </span>\n </div>\n```\n\n```html\n<div class=\"p-5\">\n <strong class=\"relative inline-flex items-center rounded border border-gray-200 px-2.5 py-1.5 text-xs font-medium\">\n <span class=\"absolute -top-2 -right-2 h-5 w-5 rounded-full bg-green-600 flex justify-center items-center items\"><span>10</span></span>\n <span class=\"ml-1.5 text-green-700\"> Indigo </span>\n </strong>\n</div>\n```\n\n```text\nrelative\n```\n\n========================================\n\nComments:\n- What about numbers like 1000 ? Oddly enough I can't find any examples with numbers higher than 9 :P\n- play.tailwindcss.com/MbWoyrtKaO","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":62,"estimatedTokens":424}}765{"id":"stack-70838475","source":"stackoverflow","questionId":70838475,"title":"How to turn page background color dark when tailwind css modal is open in angular13","tags":["css","angular","tailwind-css"],"text":"Title: How to turn page background color dark when tailwind css modal is open in angular13\nTags: css, angular, tailwind-css\nSource: Stack Overflow\n\nQuestion:\n**I want to turn my entire screen into the grey when my tailwind css modal open in my angular app but the screen remain white after modal open Please anyone can solve this**\n\n*this is my html code*\n\n```\n\n Open modal\n \n\n \n \n \n \n \n \n \n Modal Title\n \n \n \n ×\n \n \n \n \n \n \n I always felt like I could do anything. That’s the main\n thing people are controlled by! Thoughts- their perception\n of themselves! They're slowed down by their perception of\n themselves. If you're taught you can’t do anything, you\n won’t do anything. I was taught I could do everything.\n \n\n \n \n \n \n Close\n \n \n Save Changes\n \n \n \n \n\n```\n\n*This is my typescript code to open modal*\n\n```\nshowModal:boolean = false;\n toggleModal(){\n this.showModal = !this.showModal;\n }\n```\n\n**Here my modal is opening but the entire screen is not turning into the dark mode Please anyone can solve this Thanks in advance**\n\n========================================\n\nCode:\n```text\n<button class=\"bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150\" type=\"button\" (click)=\"toggleModal()\">\n Open modal\n </button>\n\n <div *ngIf=\"showModal\" class=\"overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex\">\n <div class=\"relative w-auto my-6 mx-auto max-w-3xl\">\n <!--content-->\n <div class=\"border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none\">\n <!--header-->\n <div class=\"flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t\">\n <h3 class=\"text-3xl font-semibold\">\n Modal Title\n </h3>\n <button class=\"p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none\" (click)=\"toggleModal()\">\n <span class=\"bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none\">\n ×\n </span>\n </button>\n </div>\n <!--body-->\n <div class=\"relative p-6 flex-auto\">\n <p class=\"my-4 text-blueGray-500 text-lg leading-relaxed\">\n I always felt like I could do anything. That’s the main\n thing people are controlled by! Thoughts- their perception\n of themselves! They're slowed down by their perception of\n themselves. If you're taught you can’t do anything, you\n won’t do anything. I was taught I could do everything.\n </p>\n </div>\n <!--footer-->\n <div class=\"flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b\">\n <button class=\"text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150\" type=\"button\" (click)=\"toggleModal()\">\n Close\n </button>\n <button class=\"bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150\" type=\"button\" (click)=\"toggleModal()\">\n Save Changes\n </button>\n </div>\n </div>\n </div>\n</div>\n```\n\n```text\nshowModal:boolean = false;\n toggleModal(){\n this.showModal = !this.showModal;\n }\n```\n\n```text\n.backdrop {\n background-color: rgba(0,0,0,0.5);\n}\n```\n\n```text\n<button class=\"bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150\" type=\"button\" (click)=\"toggleModal()\">\n Open modal\n</button>\n\n<div *ngIf=\"showModal\" class=\"backdrop overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex\">\n//.......the rest code is the same....\n```\n\n```text\nstyle=\"background-color: rgba(0,0,0,0.5);\"\n```\n\n```text\n<div *ngIf=\"showModal\" style=\"background-color: rgba(0,0,0,0.5);\" class=\"overflow-x-hidden...\n```\n\n```text\n<div *ngIf=\"showModal\" class=\"backdrop overflow-x-hidden overflow-y-auto...\n```\n\n========================================\n\nComments:\n- CSS variables are supported by all browsers. Example.\n- Thanks @Vadim but its only change the background color of the modal div not entire page i want to change the entire page color dark when modal open Please can you provide the code of the picture that you showing in answer Thanks\n- @AmirShahzad sure, the code is the same as I provided before, the dark class should be applied for the entire where the *ngIf directive is used before\n- @AmirShahzad I've updated the answer adding the component template html most part of code","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":153,"estimatedTokens":1245}}766{"id":"stack-70845529","source":"stackoverflow","questionId":70845529,"title":"Replace all cursor in tailwindcss","tags":["tailwind-css"],"text":"Title: Replace all cursor in tailwindcss\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHow to replace all cursors with my custom image in tailwindcss?\n\n**My attempt**\n\nIn tailwind.config.js:\n\n```\nmodule.exports = {\n theme: {\n extend: {\n cursor: {\n default: \"url(/images/cursor.png)\",\n pointer: \"url(/images/cursorPointer.png)\",\n },\n },\n },\n};\n```\n\n**Answer:**\n\nIn global.css:\n\n```\n*,\n*:before,\n*:after {\n @apply cursor-default;\n}\n\na, button {\n @apply cursor-pointer;\n}\n```\n\nIn tailwind.config.js:\n\n```\nmodule.exports = {\n theme: {\n extend: {\n cursor: {\n default: 'url(/images/cursor.png), default',\n pointer: 'url(/images/cursorPointer.png), pointer',\n },\n },\n }\n}\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n theme: {\n extend: {\n cursor: {\n default: \"url(/images/cursor.png)\",\n pointer: \"url(/images/cursorPointer.png)\",\n },\n },\n },\n};\n```\n\n```text\n*,\n*:before,\n*:after {\n @apply cursor-default;\n}\n\na, button {\n @apply cursor-pointer;\n}\n```\n\n```text\nmodule.exports = {\n theme: {\n extend: {\n cursor: {\n default: 'url(/images/cursor.png), default',\n pointer: 'url(/images/cursorPointer.png), pointer',\n },\n },\n }\n}\n```\n\n```css\n/* URL with mandatory keyword fallback */\ncursor: url(/images/cursor.png), pointer;\n```\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n cursor: {\n default: 'url(/images/cursor.png), default',\n pointer: 'url(/images/cursor.png), pointer',\n },\n },\n },\n plugins: [],\n}\n```\n\n```css\n*,\n*:before,\n*:after {\n @apply cursor-default;\n}\n```\n\n```text\n<url>\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- Does this answer your question? Using external images for CSS custom cursors\n- That isn't using the tailwindcss \"tailwind.config.js\"\n- I was referring to the cause, that an image could not be used as expected.\n- Are you sure that your image is available? You could try using an external image instead.\n- I saw in your code, you added the \"cursor-point\" class into . Is it impossible to replace the default cursor without explicitly defining those classes into the elements? For example, my default , play.tailwindcss.com/Kgc6pYAwEv, is still hand-pointer\n- I've updated my answer with a solution for your need: play.tailwindcss.com/XdgFOu86ix?file=css.\n- Thanks andreivictor for your answers. Looks like the only way to replace the pointers is by explicitly defining each and every element that has a pointer by defaults, and @apply cursor-pointer them. Example: a, button { {at}apply cursor-pointer; } Correct me if I'm wrong. Demo: play.tailwindcss.com/T2tZDAGnyt?file=css\n- indeed, I think that is the only solution.","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":142,"estimatedTokens":682}}767{"id":"stack-73996589","source":"stackoverflow","questionId":73996589,"title":"Fixed width sidebar isn't the right size in Tailwind CSS","tags":["html","css","tailwind-css"],"text":"Title: Fixed width sidebar isn't the right size in Tailwind CSS\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have this simple HTML and I am using `tailwindcss`.\n\n```\n\n \n \n \n \n Static Template\n \n \n \n \n \n \n Sidebar\n \n \n \n \n Main\n \n \n \n \n\n```\n\nFor some reason, my sidebar's width is **not** 312px like I want it to be.\n\nhttps://i.sstatic.net/Od3Av.png\n\nWhat am I missing? Here is a CodeSandbox too.\n\n========================================\n\nCode:\n```text\n<!DOCTYPE html>\n<html class=\"h-full\" lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <title>Static Template</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n </head>\n <body class=\"h-full\">\n <div id=\"app\" class=\"h-full flex\">\n <div class=\"w-[312px] bg-red-100\">\n <h1 class=\"text-3xl font-bold\">\n Sidebar\n </h1>\n </div>\n <div class=\"w-full bg-green-100\">\n <h1 class=\"text-3xl font-bold\">\n Main\n </h1>\n </div>\n </div>\n </body>\n</html>\n```\n\n```text\ntailwindcss\n```\n\n```text\n<div class=\"w-[312px] flex-none bg-red-100\">\n <h1 class=\"text-3xl font-bold\">\n Sidebar\n </h1>\n </div>\n```\n\n```text\nflex-none\n```\n\n```text\ndiv\n```\n\n========================================\n\nComments:\n- Thanks @Lukas, can you please explain why the `flex-none` is necessary? In my mind, I was saying have the sidebar be 312px and whatever is left, give to the Main content. Was that not happening?\n- I wrote in answer it prevents from growing and shrinking. `flex-none` in css is `flex:none` which sets `flex-grow:0;` and `flex-shrink:0;`.\n- By default `flex-shrink` has value 1 so div can shrink.\n- @J86 when parent has `display:flex;` it works a little differently.","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":96,"estimatedTokens":465}}768{"id":"stack-70742302","source":"stackoverflow","questionId":70742302,"title":"Tailwind css negative translate","tags":["tailwind-css"],"text":"Title: Tailwind css negative translate\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThe following code generates the translates but not negative ones so the following doesn't work `-translate-x-1/7` but testing `translate-x-1/7` it does.\n\nI'm using the negative translate to slide a nav bar off the side of the page.\n\n```\nmodule.exports = {\n purge: ['./src/**/*.{js,jsx,ts,tsx}'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n translate: {\n '1/7': '14.2857143%',\n '2/7': '28.5714286%',\n '3/7': '42.8571429%',\n '4/7': '57.1428571%',\n '5/7': '71.4285714%',\n '6/7': '85.7142857%',\n },\n },\n },\n variants: {\n extend: {\n },\n },\n plugins: [\n require('@tailwindcss/forms'),\n ],\n}\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\n purge: ['./src/**/*.{js,jsx,ts,tsx}'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n translate: {\n '1/7': '14.2857143%',\n '2/7': '28.5714286%',\n '3/7': '42.8571429%',\n '4/7': '57.1428571%',\n '5/7': '71.4285714%',\n '6/7': '85.7142857%',\n },\n },\n },\n variants: {\n extend: {\n },\n },\n plugins: [\n require('@tailwindcss/forms'),\n ],\n}\n```\n\n```text\n-translate-x-1/7\n```\n\n```text\ntranslate-x-1/7\n```\n\n========================================\n\nComments:\n- I've just tested it and it works fine: play.tailwindcss.com/Duhp6l1ejl What version of Tailwind are you using? I see you are still using `purge` so probably not the latest. Maybe it was a bug and you just need to update?\n- Updating to 3.x solved the issue, in your demo if you change it to 2.x it breaks. Thanks\n- warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":78,"estimatedTokens":427}}769{"id":"stack-70456655","source":"stackoverflow","questionId":70456655,"title":"TailwindCSS in Angular: @tailwind vs @import","tags":["angular","sass","tailwind-css"],"text":"Title: TailwindCSS in Angular: @tailwind vs @import\nTags: angular, sass, tailwind-css\nSource: Stack Overflow\n\nQuestion:\ni´m using Angular 13.1 (With SASS) + TailwindCss 3.0.7 for a project and found a strange behaviour.\n\nIn my `styles.scss` I imported the Tailwind styles with the `@tailwind` directive as stated on the official docs, but then when I display a component on a lazy-loaded module the styles weren´t being applied, which i fixed by importing tailwind again on each component own stylesheet.\n\nIf I change the `@tailwind` for `@import 'tailwindcss/...'` on the `styles.scss` then everything works as expected.\n\nCan someone explain me the difference between `@tailwind` and the `@import` to understand what´s happening? I´m a newbie on CSS preprocessors...\n\n**Working as expected**\n\n```\n@import 'tailwind/base';\n@import 'tailwind/components';\n@import 'tailwind/utilities';\n\nhtml, body {\n height: 100%;\n width: 100%;\n}\n\nh6 {\n @apply text-xl;\n}\n\nfa-icon {\n @apply p-1;\n}\n```\n\n**Not working**\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nhtml, body {\n height: 100%;\n width: 100%;\n}\n\nh6 {\n @apply text-xl;\n}\n\nfa-icon {\n @apply p-1;\n}\n```\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [\n require(\"@tailwindcss/forms\"),\n require(\"@tailwindcss/typography\"),\n require(\"daisyui\")\n ],\n daisyui: {\n themes: [\n \"bumblebee\",\n ],\n },\n};\n```\n\n========================================\n\nTop Answer:\nim just doing a new project and stumbled upon this pretty randomly. It works for me and i noticed a difference in your config.content[]: while yours says `html,js`, mine says `html,ts`:\n\n```\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nmaybe its due to the file being imported in app-routing.module.**ts**:\n\n```\nloadChildren: () => import('./cv-generator/cv-generator.module').then(m => m.CvGeneratorModule) }\n```\n\n========================================\n\nCode:\n```text\n@import 'tailwind/base';\n@import 'tailwind/components';\n@import 'tailwind/utilities';\n\nhtml, body {\n height: 100%;\n width: 100%;\n}\n\nh6 {\n @apply text-xl;\n}\n\nfa-icon {\n @apply p-1;\n}\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nhtml, body {\n height: 100%;\n width: 100%;\n}\n\nh6 {\n @apply text-xl;\n}\n\nfa-icon {\n @apply p-1;\n}\n```\n\n```text\nmodule.exports = {\n content: [\"./src/**/*.{html,js}\"],\n theme: {\n extend: {},\n },\n plugins: [\n require(\"@tailwindcss/forms\"),\n require(\"@tailwindcss/typography\"),\n require(\"daisyui\")\n ],\n daisyui: {\n themes: [\n \"bumblebee\",\n ],\n },\n};\n```\n\n```text\nstyles.scss\n```\n\n```text\n@tailwind\n```\n\n```text\n@tailwind\n```\n\n```text\n@import 'tailwindcss/...'\n```\n\n```text\nstyles.scss\n```\n\n```text\n@tailwind\n```\n\n```text\n@import\n```\n\n```css\n@tailwind base;\n@import \"./custom-base-styles.css\";\n\n@tailwind components;\n@import \"./custom-components.css\";\n\n@tailwind utilities;\n@import \"./custom-utilities.css\";\n```\n\n```css\n@import \"tailwindcss/base\";\n@import \"./custom-base-styles.css\";\n\n@import \"tailwindcss/components\";\n@import \"./custom-components.css\";\n\n@import \"tailwindcss/utilities\";\n@import \"./custom-utilities.css\";\n```\n\n```text\n@import 'tailwind/base';\n```\n\n```text\n@tailwind base;\n```\n\n```text\n@tailwind\n```\n\n```text\n@tailwind\n```\n\n```text\n@import\n```\n\n```text\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nloadChildren: () => import('./cv-generator/cv-generator.module').then(m => m.CvGeneratorModule) }\n```\n\n```text\nhtml,js\n```\n\n```text\nhtml,ts\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.943Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":252,"estimatedTokens":916}}770{"id":"stack-69448233","source":"stackoverflow","questionId":69448233,"title":"Targetting next sibling on hover with tailwindcss","tags":["css","tailwind-css"],"text":"Title: Targetting next sibling on hover with tailwindcss\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to hide an element until its previous sibling is hovered over, in css (or scss rather), it looks like this:\n\n\r\n\r\n\n```\n.menu-container {\n // style with flex etc...\n & .menu-item-link {\n // style the link...\n &+.sub-menu-container {\n display: none;\n }\n &:hover+.sub-menu-container {\n display: block;\n }\n }\n}\n```\n\n\r\n\n```\n\n \n Ingredients\n \n \n Fruits\n \n \n Vegetables\n \n \n Dairy\n \n \n Children\n \n \n \n\n```\n\n\r\n\r\n\r\n\nHow do I achieve this using tailwind?\n\n========================================\n\nCode:\n```css\n.menu-container {\n // style with flex etc...\n & .menu-item-link {\n // style the link...\n &+.sub-menu-container {\n display: none;\n }\n &:hover+.sub-menu-container {\n display: block;\n }\n }\n}\n```\n\n```html\n<ul class=\"menu-container\">\n <li class=\"menu-item-container\">\n <a class=\"menu-item-link\">Ingredients</a>\n <ul class=\"sub-menu-container\">\n <li class=\"sub-menu-item-container\">\n <a class=\"sub-menu-link\">Fruits</a>\n </li>\n <li class=\"sub-menu-item-container\">\n <a class=\"sub-menu-link\">Vegetables</a>\n </li>\n <li class=\"sub-menu-item-container\">\n <a class=\"sub-menu-link\">Dairy</a>\n </li>\n <li class=\"sub-menu-item-container\">\n <a class=\"sub-menu-link\">Children</a>\n </li>\n </ul>\n </li>\n</ul>\n```\n\n```html\n<ul>\n <li class=\"group\">\n <a>Ingredients</a>\n <ul class=\"hidden group-hover:block\">\n <li>\n <a>Fruits</a>\n </li>\n <li>\n <a>Vegetables</a>\n </li>\n <li>\n <a>Dairy</a>\n </li>\n <li>\n <a>Children</a>\n </li>\n </ul>\n </li>\n</ul>\n```\n\n```text\ngroup\n```\n\n```text\ngroup-hover:[some-display-class]\n```\n\n========================================\n\nComments:\n- This might be a duplicate of this question.\n- Does this answer your question? Tailwind CSS : Is there a way to target next sibling?\n- @Viira kind of: I accepted an answer provided below as it is a much saner way of solving my particular problem (using groups and targeting children as opposed to siblings)\n- Yes that seems a far better way to handle this","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":132,"estimatedTokens":555}}771{"id":"stack-67212731","source":"stackoverflow","questionId":67212731,"title":"Dynamically created classes not available when using 'nuxt build' - tailwindcss nuxtjs","tags":["nuxt.js","tailwind-css","postcss"],"text":"Title: Dynamically created classes not available when using 'nuxt build' - tailwindcss nuxtjs\nTags: nuxt.js, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI have a nuxtjs project that I use with tailwindcss.\n\nIn that project I generate classes on the fly for negative margins like so:\n\n```\n\n```\n\nThe entire project works fine locally, but if I run `nuxt build; nuxt start;` it gets compiled without errors but none of the dynamic classes seem to work.\n\nSo I finally found out that the `nuxt build` process does some ***css tree shaking***, and since these classes are not included anywhere in the dom, they are not included in the css build process.\n\nTo test this I have created a hidden div like so:\n\n```\nok needed classes\n```\n\nAnd voila, that will make my project workable after `nuxt build` since now the classes needed are present in the dom and will be included.\n\nThis seems very hacky!\n\n**Now to my question:**\n\nWhat would be the proper way to include dynamically created classes in the build process in a nuxtjs project?\n\n**UPDATED tailwind.config.js (Did NOT work with JIT MODE turned on!)**\n\n```\nconst colors = require(\"tailwindcss/colors\")\nmodule.exports = {\n purge: {\n enabled: process.env.NODE_ENV === 'production',\n content: [\n 'components/**/*.vue',\n 'layouts/**/*.vue',\n 'pages/**/*.vue',\n 'plugins/**/*.js',\n 'nuxt.config.js',\n // TypeScript\n 'plugins/**/*.ts',\n 'nuxt.config.ts'\n ],\n // UPDATE: safelist does NOT work in combination with JIT\n options: {\n safelist: ['mt-0', '-mt-8', '-mt-16', '-mt-24', '-mt-32', '-mt-40', '-mt-48', '-mt-56', '-mt-64', '-mt-72', '-mt-80'],\n }\n },\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n colors: {\n emerald: colors.emerald,\n gray: colors.trueGray,\n cyan: colors.cyan\n },\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n========================================\n\nTop Answer:\nYou can safelist classes with Tailwind CSS version 3.\nI use HTML components in my CMS and for that I have safelisted a couple of classes!\n\n```\nmodule.exports = {\ndarkMode: \"class\",\ncontent: [\n \"./components/**/*.{js,vue,ts}\",\n \"./layouts/**/*.vue\",\n \"./pages/**/*.vue\",\n \"./plugins/**/*.{js,ts}\",\n \"./nuxt.config.{js,ts}\",\n],\nsafelist: [\n 'border-l-2',\n 'border-blue-500',\n {\n pattern: /(bg|text|border)-(red|green|blue|purple|yellow)-(100|200|300|400|500)/,\n },\n {\n pattern: /(h|w)-(12|16|24|32|48|64|72|96)/,\n },\n 'absolute',\n '-mt-9',\n '-ml-9',\n 'pl-4',\n 'overflow-scroll'\n],}\n```\n\n========================================\n\nCode:\n```html\n<div class=\"mins-1\" :class=\"['-mt-'+ m1*8]\"></div>\n```\n\n```html\n<div class=\"hidden -mt-8 -mt-16 -mt-24 -mt-32 -mt-40 -mt-48 -mt-56 -mt-64 -mt-72 -mt-80\">ok needed classes</div>\n```\n\n```js\nconst colors = require(\"tailwindcss/colors\")\nmodule.exports = {\n purge: {\n enabled: process.env.NODE_ENV === 'production',\n content: [\n 'components/**/*.vue',\n 'layouts/**/*.vue',\n 'pages/**/*.vue',\n 'plugins/**/*.js',\n 'nuxt.config.js',\n // TypeScript\n 'plugins/**/*.ts',\n 'nuxt.config.ts'\n ],\n // UPDATE: safelist does NOT work in combination with JIT\n options: {\n safelist: ['mt-0', '-mt-8', '-mt-16', '-mt-24', '-mt-32', '-mt-40', '-mt-48', '-mt-56', '-mt-64', '-mt-72', '-mt-80'],\n }\n },\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n colors: {\n emerald: colors.emerald,\n gray: colors.trueGray,\n cyan: colors.cyan\n },\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nnuxt build; nuxt start;\n```\n\n```text\nnuxt build\n```\n\n```text\nnuxt build\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n purge: {\n // Configure as you need\n content: ['./src/**/*.html'],\n // These options are passed through directly to PurgeCSS\n options: {\n // List your classes here, or you can even use RegExp\n safelist: ['bg-red-500', 'px-4', /^text-/],\n blocklist: [/^debug-/],\n keyframes: true,\n fontFace: true,\n },\n },\n // ...\n}\n```\n\n```text\nsafelist\n```\n\n```text\nstub.html\n```\n\n```text\nsafelist\n```\n\n```js\nmodule.exports = {\n mode: 'jit',\n // These paths are just examples, customize them to match your project structure\n purge: [\n './public/**/*.html',\n './src/**/*.{js,jsx,ts,tsx,vue}',\n ],\n ...\n}\n```\n\n```text\nmodule.exports = {\ndarkMode: \"class\",\ncontent: [\n \"./components/**/*.{js,vue,ts}\",\n \"./layouts/**/*.vue\",\n \"./pages/**/*.vue\",\n \"./plugins/**/*.{js,ts}\",\n \"./nuxt.config.{js,ts}\",\n],\nsafelist: [\n 'border-l-2',\n 'border-blue-500',\n {\n pattern: /(bg|text|border)-(red|green|blue|purple|yellow)-(100|200|300|400|500)/,\n },\n {\n pattern: /(h|w)-(12|16|24|32|48|64|72|96)/,\n },\n 'absolute',\n '-mt-9',\n '-ml-9',\n 'pl-4',\n 'overflow-scroll'\n],}\n```\n\n========================================\n\nComments:\n- What is your version of tailwind ?\n- Latest 2.1.1 unsing @nuxt/tailwindcss 4.0.3\n- see my updated tailwind css file with options safelist, that did not work ...\n- It won't work if you are using JIT which you did not mention in the post. With JIT the best way you can do right now is to place some stub file like `stub.html` somewhere with all the classes you need to generate in advance\n- Ok I removed jit and now it works, great! So it is either fast development and adding a stub file, or removing jit and have a safelist if I understand you correctly?\n- Right now yes, but keep an eye on the docs, I'm sure tailwind team will add some way to generate classes for JIT mode too\n- Thank you for your TIME to explain the problem!\n- I am using jit in nuxtjs config, but it did not help.\n- What about the rest (`purge` key containing an array).\n- Can you give more debugging details?\n- I also believe that you did not fully understand my issue ...\n- I did, just did not spent more time digging into the configuration issues. Also, I kinda prefer using `windy`. Glad you found a solution.","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":248,"estimatedTokens":1483}}772{"id":"stack-66633914","source":"stackoverflow","questionId":66633914,"title":"How do I remove just the 2xl breakpoint in Tailwind 2?","tags":["media-queries","responsive","tailwind-css"],"text":"Title: How do I remove just the 2xl breakpoint in Tailwind 2?\nTags: media-queries, responsive, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have upgraded to tailwind 2 which has a new `2xl` breakpoint. This causes any element with a `container` class to become wider than it used to.\n\nHow can I remove just the `2xl` breakpoint while keeping all the other default breakpoints?\n\n========================================\n\nCode:\n```text\n2xl\n```\n\n```text\ncontainer\n```\n\n```text\n2xl\n```\n\n```js\nconst defaultTheme = require('tailwindcss/defaultTheme')\n\nmodule.exports = {\n theme: {\n screens: Object.fromEntries(\n Object.entries(defaultTheme.screens).filter(([key, value]) => key !== '2xl')\n )\n }\n}\n```\n\n```js\nscreens: Object.fromEntries(\n Object.entries(defaultTheme.screens).filter(([key, value]) => ['sm', 'xl'].includes(key))\n )\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ndefaultTheme\n```\n\n```text\nscreens\n```\n\n```text\n2xl\n```\n\n```text\nfromEntires()\n```\n\n```text\nsm\n```\n\n```text\nxl\n```\n\n========================================\n\nComments:\n- Usually, you only have 3/4 breakpoints. So, writing all of them -1 is not so time consuming neither. ^^\n- @kissu sure, but then you're duplicating values that could change.\n- Only writing 3 values in your tailwind config file rather than 4 no?\n- @kissu I'd rather cherry pick the defaults than re-enter their values. That way updates to defaultTheme pass through.","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":77,"estimatedTokens":357}}773{"id":"stack-70627316","source":"stackoverflow","questionId":70627316,"title":"Issue with Upgrade from Tailwind v2 to v3 React Js using Craco","tags":["node.js","npm","upgrade","tailwind-css","migrate"],"text":"Title: Issue with Upgrade from Tailwind v2 to v3 React Js using Craco\nTags: node.js, npm, upgrade, tailwind-css, migrate\nSource: Stack Overflow\n\nQuestion:\nI was using Tailwind **v2** and when I am upgrading it to **v3** it is giving me Postcss 8 Error **(Error: PostCSS plugin tailwindcss requires PostCSS 8.)**. I tried to resolve this Error but did not succeed. Is there any way I can use Tailwind Cli in React Js.\nError ScreenShoot\n\n```\n\"name\": \"frontend\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@craco/craco\": \"^6.4.0\",\n \"@formatjs/intl-pluralrules\": \"^4.1.5\",\n \"@formatjs/intl-relativetimeformat\": \"^9.3.2\",\n \"@headlessui/react\": \"^1.4.2\",\n \"@heroicons/react\": \"^1.0.5\",\n \"@manaflair/redux-batch\": \"^1.0.0\",\n \"@reduxjs/toolkit\": \"^1.6.2\",\n \"@tailwindcss/forms\": \"^0.4.0\",\n \"@tailwindcss/line-clamp\": \"^0.3.0\",\n \"@testing-library/jest-dom\": \"^5.11.4\",\n \"@testing-library/react\": \"^11.1.0\",\n \"@testing-library/user-event\": \"^12.1.10\",\n \"react\": \"^17.0.2\",\n \"react-apexcharts\": \"^1.3.9\",\n \"react-autocomplete\": \"^1.8.1\",\n \"react-datepicker\": \"^4.5.0\",\n \"react-dom\": \"^17.0.2\",\n \"web-vitals\": \"^1.0.1\",\n \"yup\": \"0.29.0\"\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.2\",\n \"copyfiles\": \"2.1.1\",\n \"postcss\": \"^8.4.5\",\n \"prettier\": \"^1.19.1\",\n \"sass\": \"1.32.8\",\n \"serve\": \"11.2.0\",\n \"tailwindcss\": \"^3.0.12\"\n },\n \"scripts\": {\n \"start\": \"craco start\",\n \"dev\": \"TAILWIND_MODE=watch craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n```\n\n========================================\n\nCode:\n```text\n\"name\": \"frontend\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@craco/craco\": \"^6.4.0\",\n \"@formatjs/intl-pluralrules\": \"^4.1.5\",\n \"@formatjs/intl-relativetimeformat\": \"^9.3.2\",\n \"@headlessui/react\": \"^1.4.2\",\n \"@heroicons/react\": \"^1.0.5\",\n \"@manaflair/redux-batch\": \"^1.0.0\",\n \"@reduxjs/toolkit\": \"^1.6.2\",\n \"@tailwindcss/forms\": \"^0.4.0\",\n \"@tailwindcss/line-clamp\": \"^0.3.0\",\n \"@testing-library/jest-dom\": \"^5.11.4\",\n \"@testing-library/react\": \"^11.1.0\",\n \"@testing-library/user-event\": \"^12.1.10\",\n \"react\": \"^17.0.2\",\n \"react-apexcharts\": \"^1.3.9\",\n \"react-autocomplete\": \"^1.8.1\",\n \"react-datepicker\": \"^4.5.0\",\n \"react-dom\": \"^17.0.2\",\n \"web-vitals\": \"^1.0.1\",\n \"yup\": \"0.29.0\"\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.2\",\n \"copyfiles\": \"2.1.1\",\n \"postcss\": \"^8.4.5\",\n \"prettier\": \"^1.19.1\",\n \"sass\": \"1.32.8\",\n \"serve\": \"11.2.0\",\n \"tailwindcss\": \"^3.0.12\"\n },\n \"scripts\": {\n \"start\": \"craco start\",\n \"dev\": \"TAILWIND_MODE=watch craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n```\n\n```text\nnpm uninstall @craco/craco autoprefixer postcss tailwindcss\n```\n\n```text\nnpm install -D tailwindcss postcss autoprefixer\n```\n\n```text\nnpx tailwindcss init -p\n```\n\n```text\nnpm install react-scripts@latest\n```\n\n```text\nnpm start\n```\n\n========================================\n\nComments:\n- Did you try to `rm - rf node_modules` `npm i`?\n- Yes, I tried but It didn't worked.\n- These steps worked for me too. The only thing you missed is updating the scripts from \"craco\" back to \"react-scripts\".\n- these are the scripts for CRA that are missing in the above steps: \"start\": \"react-scripts start\", \"build\": \"react-scripts build\", \"test\": \"react-scripts test\", \"eject\": \"react-scripts eject\",","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":162,"estimatedTokens":1000}}774{"id":"stack-70503943","source":"stackoverflow","questionId":70503943,"title":"Docker fails to build - Create React App + Tailwind /bin/sh: craco: not found","tags":["reactjs","docker","docker-compose","tailwind-css","craco"],"text":"Title: Docker fails to build - Create React App + Tailwind /bin/sh: craco: not found\nTags: reactjs, docker, docker-compose, tailwind-css, craco\nSource: Stack Overflow\n\nQuestion:\nI've been stuck with this problem for a couple of days now. I am trying to dockerize a django REST API + react (create-react-app) application. The react application uses craco for building since I am using tailwindcss. I followed the this guide to integrate Tailwind with the React app and it's working when I run yarn start locally.\n\nGuide: https://tailwindcss.com/docs/guides/create-react-app\n\nThe problem is it is throwing **/bin/sh: craco: not found** error when I run it using docker-compose. I even tried adding **RUN yarn add @craco/craco -g** after **RUN yarn** in the frontend Dockerfile but it is showing the same error.\n\nError when running `docker-compose up --build`:\n\n```\n...\nStep 8/9 : COPY . /app/frontend/\n ---> 19e0247cde64\nStep 9/9 : EXPOSE 3000\n ---> Running in 43f7d970d460\nRemoving intermediate container 43f7d970d460\n ---> a20ae2148d4b\n\nSuccessfully built a20ae2148d4b\nSuccessfully tagged react_frontend:latest\nCreating react_frontend_container ... done\nAttaching to react_frontend_container\nyarn run v1.22.15\n$ craco start\nfrontend_1 | /bin/sh: craco: not found\nerror Command failed with exit code 127.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\nreact_frontend_container exited with code 127\n```\n\nFrontend Dockerfile:\n\n```\nFROM node:16-alpine\n\nWORKDIR /app/frontend\n\nCOPY package.json .\nCOPY yarn.lock .\n\nRUN yarn\n\nCOPY . /app/frontend/\nEXPOSE 3000\n```\n\ndocker-compose.yml:\n\n```\nversion: '3.8'\n\nservices:\n ... (postgres db and django api services)\n\n frontend:\n build: ./frontend\n command: [\"yarn\", \"start\"]\n stdin_open: true # docker run -i\n tty: true # docker run -t\n volumes:\n - ./frontend:/app/frontend\n - node-modules:/app/frontend/node_modules\n container_name: react_frontend_container\n ports:\n - \"3000:3000\"\n\nvolumes:\n node-modules:\n```\n\npackage.json:\n\n```\n{\n \"name\": \"frontend\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@craco/craco\": \"^6.4.3\",\n \"@testing-library/jest-dom\": \"^5.11.4\",\n \"@testing-library/react\": \"^11.1.0\",\n \"@testing-library/user-event\": \"^12.1.10\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-scripts\": \"4.0.3\",\n \"web-vitals\": \"^1.0.1\"\n },\n \"scripts\": {\n \"start\": \"craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^9\",\n \"postcss\": \"^7\",\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat\"\n }\n}\n```\n\n========================================\n\nTop Answer:\n@Hans Kilian answer solves the problem but when you edit, your code changes don't reflect.\n\nWith the anonymous volume ('/app/frontend/node_modules'), the node_modules directory wouldn't be overwritten by the mounting of the host directory at runtime\n\nBy changing your volumes section, you solve your issue and keep the fast development feedback loop\n\n```\nvolumes:\n - ./frontend:/app/frontend\n - /app/frontend/node_modules\n```\n\nYou can read more here\n\nI had the same issue and solved by doing above ^\n\n========================================\n\nCode:\n```text\n...\nStep 8/9 : COPY . /app/frontend/\n ---> 19e0247cde64\nStep 9/9 : EXPOSE 3000\n ---> Running in 43f7d970d460\nRemoving intermediate container 43f7d970d460\n ---> a20ae2148d4b\n\nSuccessfully built a20ae2148d4b\nSuccessfully tagged react_frontend:latest\nCreating react_frontend_container ... done\nAttaching to react_frontend_container\nyarn run v1.22.15\n$ craco start\nfrontend_1 | /bin/sh: craco: not found\nerror Command failed with exit code 127.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\nreact_frontend_container exited with code 127\n```\n\n```text\nFROM node:16-alpine\n\nWORKDIR /app/frontend\n\nCOPY package.json .\nCOPY yarn.lock .\n\nRUN yarn\n\nCOPY . /app/frontend/\nEXPOSE 3000\n```\n\n```text\nversion: '3.8'\n\nservices:\n ... (postgres db and django api services)\n\n frontend:\n build: ./frontend\n command: [\"yarn\", \"start\"]\n stdin_open: true # docker run -i\n tty: true # docker run -t\n volumes:\n - ./frontend:/app/frontend\n - node-modules:/app/frontend/node_modules\n container_name: react_frontend_container\n ports:\n - \"3000:3000\"\n\nvolumes:\n node-modules:\n```\n\n```text\n{\n \"name\": \"frontend\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@craco/craco\": \"^6.4.3\",\n \"@testing-library/jest-dom\": \"^5.11.4\",\n \"@testing-library/react\": \"^11.1.0\",\n \"@testing-library/user-event\": \"^12.1.10\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-scripts\": \"4.0.3\",\n \"web-vitals\": \"^1.0.1\"\n },\n \"scripts\": {\n \"start\": \"craco start\",\n \"build\": \"craco build\",\n \"test\": \"craco test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^9\",\n \"postcss\": \"^7\",\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat\"\n }\n}\n```\n\n```text\ndocker-compose up --build\n```\n\n```text\nvolumes:\n - ./frontend:/app/frontend\n - node-modules:/app/frontend/node_modules\n```\n\n```text\nvolumes:\n - ./frontend:/app/frontend\n - /app/frontend/node_modules\n```\n\n========================================\n\nComments:\n- Have you tried running `yarn craco start` instead? This should force yarn to look for craco in the dependencies.\n- That solved my problem, thanks! But once I remove the volumes section, now when I make edits in my code, the changes aren't reflecting. This was initially what the volumes solves, right? So how do I resolve this new issue?\n- The simple way is to build the image every time you make changes. Making an image that can work both as a development environment that reacts to changes and also is an image you can deploy is hard. Yours, right now, is an image you can deploy when you're done and is not suited for a fast development feedback loop.","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":271,"estimatedTokens":1619}}775{"id":"stack-70181978","source":"stackoverflow","questionId":70181978,"title":"Tailwind CSS in Nuxt project trying to use SCSS variable throws \"Unknown word\" error","tags":["sass","nuxt.js","less","tailwind-css","postcss"],"text":"Title: Tailwind CSS in Nuxt project trying to use SCSS variable throws \"Unknown word\" error\nTags: sass, nuxt.js, less, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI'm using Tailwind CSS in my Nuxt JS project and need to create a simple scss file with some variables that are then used in the `:root` selector to generate some theme colours. I've created my variables, and then have included them inside of my `tailwind.scss` file inside of **assets/scss**\n\nThe issue I'm facing is that PostCSS thinks that there's an error with my variable defined in this selector and throws the following error:\n\npostcss-custom-properties: Unknown word\n\nTo me, this isn't an error as I'm working in a SCSS file which supports variables, what am I missing here?\n\n**assets/scss/tailwind.scss**\n\n```\n@import '../../brand-theme';\n\n/* In your CSS */\n:root {\n --color-primary: $primary;\n --color-primary-darken: $primary;\n --color-secondary: $secondary;\n}\n\n@import './layout/base';\n@import './vendors/hooper';\n```\n\n**brand-theme.scss *(in root of my project)* **\n\n```\n$primary: 238, 121, 61;\n$secondary: 146, 74, 139;\n```\n\nhttps://i.sstatic.net/MfnFm.png\n\n========================================\n\nCode:\n```css\n@import '../../brand-theme';\n\n/* In your CSS */\n:root {\n --color-primary: $primary;\n --color-primary-darken: $primary;\n --color-secondary: $secondary;\n}\n\n@import './layout/base';\n@import './vendors/hooper';\n```\n\n```text\n$primary: 238, 121, 61;\n$secondary: 146, 74, 139;\n```\n\n```text\n:root\n```\n\n```text\ntailwind.scss\n```\n\n```css\n--color-primary: #{$primary};\n```\n\n```text\n:root\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":75,"estimatedTokens":398}}776{"id":"stack-75703850","source":"stackoverflow","questionId":75703850,"title":"Tinymce richtext editor styles overridden by tailwind css base styles. How to set preflight false to a rich text display component in React.js","tags":["reactjs","tinymce","tailwind-css"],"text":"Title: Tinymce richtext editor styles overridden by tailwind css base styles. How to set preflight false to a rich text display component in React.js\nTags: reactjs, tinymce, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nMy project having below stack.\nTailwind css, react.js, tinymce editor.\n\nThe tailwind css @tailwind base overriding default browser css styles. I want to disable this only for a single component which display's richtext editor content.\n\nfor example: links, anchor tags, headings default browser css are overridden by tailwind base css.\n\nI can't disable for entire project by preflight:false in tailwind config.\n\nAny ideas, Please suggest.\n\n========================================\n\nTop Answer:\nTo prevent Tailwind CSS from overriding default browser styles for a specific component, you can use a more standard approach by using a CSS reset and a scoped style.\n\nScoped Styles with a CSS Reset
\n\n- Create a CSS Reset Class: Define a CSS class that resets styles to their default values. You can use a minimal CSS reset for this purpose.\nApply the Reset Class: Apply this class to the component where\nyou want to disable Tailwind's styles.\n\nAdd a CSS reset class in your application's stylesheet. Here's a simple example:\n\n```\n.reset-tailwind {\n all: initial;\n display: block;\n }\n```\n\nThe all: initial; rule resets all properties to their initial values. You can then add any specific styles you need to ensure the component displays correctly.\n\n```\n\n \n \n```\n\n========================================\n\nCode:\n```text\n.reset-tailwind {\n all: initial;\n display: block;\n }\n```\n\n```text\n<div class=\"reset-tailwind\">\n <%= raw(richtext-editor-content) %>\n </div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":2,"totalLines":59,"estimatedTokens":424}}777{"id":"stack-75498251","source":"stackoverflow","questionId":75498251,"title":"Using TailwindCSS to put logo in top left and menu in top right","tags":["html","css","tailwind-css"],"text":"Title: Using TailwindCSS to put logo in top left and menu in top right\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have managed to write some Tailwind CSS to put a logo in the top left hand corner of the screen, but now I cant seem to get a menu to render in the top right, this is what I have. Nothing I try seems to work. It just renders right next to the logo image\n\n```\n\n \n \n \n \n \n This Company Name\n \n \n \n \n- Home\n \n- Contact\n \n \n \n \n \n\n```\n\n========================================\n\nCode:\n```text\n<div className=\"isolate\">\n <div className=\"px-6 pt-6 lg:px-8\">\n <div>\n <nav\n className=\"flex h-9 items-center justify-between\"\n aria-label=\"Global\"\n >\n <div\n className=\"flex lg:min-w-0 lg:flex-1\"\n aria-label=\"Global\"\n >\n <a href=\"/\" className=\"-m-1.5 p-1.5\">\n <span className=\"sr-only\">This Company Name</span>\n <img\n className=\"h-8\"\n src=\"/this-company-logo.png\"\n alt=\"This Company Name\"\n />\n </a>\n <ul>\n <li><a href=\"\">Home</a></li>\n <li><a href=\"\">Contact</a></li>\n </ul>\n </div>\n </nav>\n </div>\n </div>\n</div>\n```\n\n```html\n...\n<div className=\"flex lg:min-w-0 lg:flex-1\" aria-label=\"Global\">\n ...\n</div>\n...\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":71,"estimatedTokens":395}}778{"id":"stack-74539226","source":"stackoverflow","questionId":74539226,"title":"Tailwind + Nuxt 3 SSR dynamic class to child component not working","tags":["vue.js","vuejs3","tailwind-css","server-side-rendering","nuxt3.js"],"text":"Title: Tailwind + Nuxt 3 SSR dynamic class to child component not working\nTags: vue.js, vuejs3, tailwind-css, server-side-rendering, nuxt3.js\nSource: Stack Overflow\n\nQuestion:\nI'm facing an extrange behavior trying to implement dynamic class by props on child element when using Nuxt 3 SSR + Tailwind.\n\nMy parent component includes a child component\n\n```\n\n```\n\nMy child component tries to render columns based on `columns` property\n\n```\n\n Últimas noticias {{gridCols}}\n\n \n \n \n \n \n\n import camelcaseKeys from 'camelcase-keys'\n\n const props = defineProps({\n excludeSlug: {\n type: String,\n required: false\n },\n count: {\n type: Number,\n required: false,\n default: 6\n },\n columns: {\n type: Number,\n required: false,\n default: 3\n }\n })\n\n const runtimeConfig = useRuntimeConfig()\n const route = useRoute()\n\n const { data: posts } = await useFetch(`/public/latest`, {\n params: {\n count: props.count,\n exclude_slug: props.excludeSlug\n },\n key: route.fullPath,\n baseURL: runtimeConfig.public.apiBase,\n transform: (response) => {\n return camelcaseKeys(response, {deep: true})\n }\n })\n\n```\n\nFor some reason, despite I correctly see the class `md:grid-cols-3` in dev tools elements inspector, the class is not applied.\nPlease note that if I manually set the class without using backticks, the class works as expected, so it's not about CSS layout.\n\nI'm guessing that is something related to SSR and lifecycle, but not sure how to fix it.\n\nEDIT:\nThe solution as per @kissu recommendation is to use a computed property\n\n```\nconst columnsCount = computed(() => {\n return props.columns === 3 ? 'md:grid-cols-3' : 'md:grid-cols-4'\n})\n```\n\nThen in template simply use it\n\n```\n\n \n \n \n\n```\n\n========================================\n\nCode:\n```html\n<section-latest-news :count=\"12\" :columns=\"4\" />\n```\n\n```html\n<template>\n <p class=\"text-xl text-center uppercase font-semibold border-b-2 mb-4 pb-1 tracking-widest\">Últimas noticias {{gridCols}}</p>\n\n <div :class=\"`grid gap-5 md:grid-cols-${columns}`\" >\n <div v-for=\"post in posts\" :key=\"post.id\" class=\"md:mb-0\">\n <post-card-image :post=\"post\" />\n </div>\n </div>\n</template>\n\n<script setup>\n import camelcaseKeys from 'camelcase-keys'\n\n const props = defineProps({\n excludeSlug: {\n type: String,\n required: false\n },\n count: {\n type: Number,\n required: false,\n default: 6\n },\n columns: {\n type: Number,\n required: false,\n default: 3\n }\n })\n\n const runtimeConfig = useRuntimeConfig()\n const route = useRoute()\n\n const { data: posts } = await useFetch(`/public/latest`, {\n params: {\n count: props.count,\n exclude_slug: props.excludeSlug\n },\n key: route.fullPath,\n baseURL: runtimeConfig.public.apiBase,\n transform: (response) => {\n return camelcaseKeys(response, {deep: true})\n }\n })\n</script>\n```\n\n```html\nconst columnsCount = computed(() => {\n return props.columns === 3 ? 'md:grid-cols-3' : 'md:grid-cols-4'\n})\n```\n\n```text\n<div class=\"grid gap-5\" :class=\"columnsCount\">\n <div v-for=\"post in posts\" :key=\"post.id\" class=\"md:mb-0\">\n <post-card-image :post=\"post\" />\n </div>\n</div>\n```\n\n```text\ncolumns\n```\n\n```text\nmd:grid-cols-3\n```\n\n========================================\n\nComments:\n- Hey Luciano, I'm having the same issue. Did you manage to figure it out? Thanks!\n- @TimothyHawkins you're not happy with the available answer?\n- @TimothyHawkins Please look at my post edit. I've posted the solution using the approach from accepted answer","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":168,"estimatedTokens":875}}779{"id":"stack-73404750","source":"stackoverflow","questionId":73404750,"title":"Is any technical problem with use own html tags in Modern browsers","tags":["html","dom","internet-explorer","syntax","tailwind-css"],"text":"Title: Is any technical problem with use own html tags in Modern browsers\nTags: html, dom, internet-explorer, syntax, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nSometimes my code gets horribly ugly\n\nEspecially when I use frameworks like tailwind\nWhen the project gets big, I can say without exaggeration that 90% of my time is spent finding the desired class between elements\n\nOne of the solutions to keep the code clean is to use own tags\nI don't mean the new html5 tags like `aside`, `header` , `footer` , `section` , ...\n\nfor example\n\n```\n\n \n somedata \n somedata \n somedata \n \n\n```\n\ncan replaced with\n\n```\n\n \n somedata \n somedata \n somedata \n \n\n```\n\neven in vanilla css own tag's make the code more deciplined\nexample\n\n```\n\n \n \n \n \n \n ...\n \n \n \n \n .....\n\n```\n\nit can be like\n\n```\n\n \n \n \n \n \n \n something \n\n \n ...\n\n```\n\nIs there any **Serious technical problems** other than not being supported by old browsers?\n\n========================================\n\nCode:\n```text\n<div class=\"flex items-center justify-center p-4 rounded shadow\">\n <div id=\"inner\"> <!-- A dirty tag to prevent display flex from affecting child tags -->\n <div> somedata </div>\n <div> somedata </div>\n <div> somedata </div>\n </div>\n</div>\n```\n\n```text\n<card class=\"flex items-center justify-center p-4 rounded shadow\">\n <inner> \n <div> somedata </div>\n <div> somedata </div>\n <div> somedata </div>\n </inner>\n</card>\n```\n\n```text\n<div class=\"post\">\n <header>\n <div class=\"header__image\">\n <img src=\"example.jpg\">\n <div>\n <div class=\"header_details\">\n ...\n </div>\n </header>\n <div class=\"post__content\">\n </div>\n .....\n</div>\n```\n\n```text\n<post>\n <header>\n <picture>\n <img src=\"example.jpg\">\n </picure>\n </header>\n <content>\n <p> something </p>\n <content>\n ...\n</post>\n```\n\n```text\naside\n```\n\n```text\nheader\n```\n\n```text\nfooter\n```\n\n```text\nsection\n```\n\n```text\n<div class=\"card\">\n <header>\n <img src=\"img_avatar.png\" alt=\"Avatar\" style=\"width:100%\">\n </header>\n<div class=\"container\">\n <div>John Doe</div>\n <p>Architect & Engineer</p>\n </div>\n</div>\n```\n\n```text\n<card>\n<header>\n <image src=\"img_avatar.png\" alt=\"Avatar\" style=\"width:100%\">\n</header>\n<container>\n <name>John Doe</name>\n <job>Architect & Engineer</job>\n </container>\n</card>\n```\n\n```text\n<custome-tags>\n```\n\n```text\ninline\n```\n\n```text\n<image>\n```\n\n```text\n<img>\n```\n\n```text\n<title>\n```\n\n```text\ntext-only\n```\n\n```text\ndisplay:none\n```\n\n```text\n<subject>\n```\n\n```text\n<col>\n```\n\n```text\n<colgroup>\n```\n\n```text\n<column>\n```\n\n========================================\n\nComments:\n- I never use them, but it is perfectly legit to use `` in your HTML. This is what MDN: Using custom elements has to say about the subject. And here's a nice read explaining some do's and don'ts by Mathew Taylor: Custom HTML Tags.","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":21,"totalLines":216,"estimatedTokens":707}}780{"id":"stack-56420573","source":"stackoverflow","questionId":56420573,"title":"Removing Sublime syntax highlight for just '@apply'","tags":["syntax-error","sublimetext3","tailwind-css"],"text":"Title: Removing Sublime syntax highlight for just '@apply'\nTags: syntax-error, sublimetext3, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using Tailwindcss for my scss files which introduces a new command @apply. But the problem is Sublime highlights this (presumably as an error or unrecognized syntax). How do I just turn off that single highlight so it won't appear as a glaring error for all my @apply rules?\n\n========================================\n\nCode:\n```text\ntmLanguage\n```\n\n```text\nsublime-syntax\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```text\nsource.css invalid.illegal\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n========================================\n\nComments:\n- Are you using a third party package to support this at all? In stock Sublime `@apply` highlights as just normal text as far as I can see, although I'm not familiar with TailWind so I may be doing something wrong.\n- `@apply` goes into my scss file, so I do have scss syntax highlights. But as `@apply`isn't a normal scss command, it turns up as a bright pink overlay. =(\n- Ahh I see. I suspect that you would need to add an extra rule to the syntax then. What package are you using to provide syntax highlighting for SCSS?\n- I think it's just the SCSS syntax from package control, packagecontrol.io/packages/SCSS","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":53,"estimatedTokens":337}}781{"id":"stack-61215064","source":"stackoverflow","questionId":61215064,"title":"Tailwind text above header","tags":["css","tailwind-css"],"text":"Title: Tailwind text above header\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to learn Tailwind and create a design like the image.\n\nThe template has a navbar and two columns (left pink and right with img). For the navbar, I used absolute positioning. But what about h1 and text below?\n\nhttps://i.sstatic.net/2CRpN.png\n\nHow can I vertical align the `h1` and text below? And how can I make the `h1` move to the right and overlap the image?\n\n\r\n\r\n\n```\n\r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n Document\r\n \r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n LOGO\r\n \r\n \r\n \r\n Dashboard\r\n \r\n \r\n Team\r\n \r\n \r\n Projects\r\n \r\n \r\n Calendar\r\n \r\n \r\n \r\n \r\n \r\n phone number\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Flowers delivery\n in Moscow\r\n \r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, placeat, totam. A consectetur, consequuntur enim est, facilis iure minus nisi officiis provident quasi, quis quisquam vel! Fugit itaque nemo veritatis.\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n\r\n\n```\n\n========================================\n\nCode:\n```html\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n<!doctype html>\n<html lang=\"ru\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n <title>Document</title>\n <link rel=\"stylesheet\" href=\"build/tailwind.css\">\n</head>\n\n<body>\n\n <!--NAV-->\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 absolute w-full\">\n <div class=\"flex justify-between h-16\">\n <div class=\"flex mx-auto\">\n <div class=\"flex-shrink-0 flex items-center\">\n LOGO\n </div>\n <div class=\"sm:ml-6 sm:flex\">\n <a href=\"#\" class=\"inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium leading-5 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out\">\n\t\t\t\t\t\tDashboard\n\t\t\t\t\t</a>\n <a href=\"#\" class=\"ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out\">\n\t\t\t\t\t\tTeam\n\t\t\t\t\t</a>\n <a href=\"#\" class=\"ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out\">\n\t\t\t\t\t\tProjects\n\t\t\t\t\t</a>\n <a href=\"#\" class=\"ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out\">\n\t\t\t\t\t\tCalendar\n\t\t\t\t\t</a>\n </div>\n </div>\n <div class=\"hidden sm:ml-6 sm:flex sm:items-center\">\n <a href=\"#\" class=\"ml-8 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out\">\n\t\t\t\t\tphone number\n\t\t\t\t</a>\n </div>\n </div>\n </div>\n\n <!--Header-->\n <div class=\"flex flex-wrap\">\n <!--Left col-->\n <div class=\"w-full md:w-1/2 bg-pink-500\">\n <div class=\"items-center\">\n <h1 class=\"w-full text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl text-right my-auto pl-20\">\n Flowers delivery<br> in Moscow\n </h1>\n <div class=\"text-right pl-40\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, placeat, totam. A consectetur, consequuntur enim est, facilis iure minus nisi officiis provident quasi, quis quisquam vel! Fugit itaque nemo veritatis.</div>\n </div>\n </div>\n <!--Right col-->\n <div class=\"w-full md:w-1/2\">\n <div style=\"max-width: 70%\" class=\"\">\n <img src=\"https://sun9-59.userapi.com/c206720/v206720075/e9982/Ro2mvWfYfNE.jpg\" class=\"py-20\" alt=\"\">\n </div>\n\n </div>\n </div>\n\n</body>\n\n</html>\n```\n\n```text\nh1\n```\n\n```text\nh1\n```\n\n```text\n<!DOCTYPE html>\n<html>\n <head>\n <title>Parcel Sandbox</title>\n <meta charset=\"UTF-8\" />\n <link\n href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\"\n rel=\"stylesheet\"\n />\n </head>\n\n <body>\n <main class=\"text-gray-900\">\n <section class=\"flex min-h-screen\">\n <div class=\"w-full lg:w-1/2 bg-red-300 min-h-full z-10\">\n <header class=\"flex justify-between px-5\">\n <div>logo</div>\n <nav>\n <a href=\"#\" class=\"mr-5\">Main</a>\n <a href=\"#\" class=\"mr-5\">Catalog</a>\n <a href=\"#\" class=\"mr-5\">Contact</a>\n <a href=\"#\" class=\"mr-5\">FAQ</a>\n </nav>\n </header>\n <section class=\"flex items-center h-full\">\n <div class=\"text-right p-10\">\n <h1 class=\"text-5xl font-bold leading-none -mr-24 mb-10\">\n Flowers delivery<br />\n in moscow\n </h1>\n <p class=\"pl-32 mb-10\">\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n Accusamus sit perspiciatis maiores dolorum consequatur\n obcaecati.\n </p>\n <a href=\"#\" class=\"border-b border-gray-900 pb-2\">Learn more</a>\n </div>\n </section>\n </div>\n <div class=\"w-full lg:w-1/2\">\n <div class=\"flex justify-end px-5\">\n <a href=\"tel:01-800-000-000\">01-800-000-000</a>\n </div>\n <div>\n <img\n class=\"max-w-full\"\n src=\"https://images.unsplash.com/photo-1527061011665-3652c757a4d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=633&q=80\"\n alt=\"\"\n />\n </div>\n </div>\n </section>\n </main>\n </body>\n</html>\n```\n\n========================================\n\nComments:\n- grate! Big thsnks!","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":232,"estimatedTokens":1525}}782{"id":"stack-64863245","source":"stackoverflow","questionId":64863245,"title":"How to make menu item color change after click in Blazor app with Tailwind CSS","tags":["c#","css","asp.net-core","blazor","tailwind-css"],"text":"Title: How to make menu item color change after click in Blazor app with Tailwind CSS\nTags: c#, css, asp.net-core, blazor, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've started building Blazor server app with Tailwind CSS. I created horizontal menu nav bar with new styles. But one thing I missed. In default Blazor template when I click on menu item, it changes background color, till click to other menu element or changing route component page - then that page menu element changes color, other elements return to default background. I know it is not doing by default bootstrap CSS or site.css. And in code I can't find it. Is it done in `` in _Host.cshtml?\n\nI've tried a few solutions as this two NavLinks:\n\n```\n...\n \n Home\n Counter \n \n \n \n @code\n {\n ...\n private bool _active = false;\n string activeClass = \"\";\n \n private void ToggleActive()\n {\n _active = !_active;\n activeClass = _active ? \" bg-purple-400\" : \"\";\n }\n ...\n }\n```\n\nBut of course it is not it. I think it should be something like this in JavaScript (w3schools link):\n\n```\n\n 1\n 2\n 3\n \n \n \n var header = document.getElementById(\"myDIV\");\n var btns = header.getElementsByClassName(\"btn\");\n for (var i = 0; i \n```\n\nIs there something simmilar to achieve that? Should I pass manually id from onclick event of every NAvLink or maybe other solution would be proper?\n\nedit: I found info (link) that with Bootstrap NavLink toggles an active CSS class based on whether its href matches the current URL. But with active class generated by Tailwind CSS I can't do it.\n\n```\n@tailwind base;\n@tailwind components;\n\n.nav-item {\n @apply bg-gray-100 m-1 font-bold text-gray-700 px-4 py-2 rounded-sm shadow-lg;\n}\n.nav-item:hover {\n @apply bg-purple-300;\n}\n.nav-item:focus {\n @apply outline-none;\n}\n\n.nav-item:active {\n @apply bg-purple-500;\n}\n```\n\n========================================\n\nTop Answer:\nIn blazor the template does this with the `NavLink` component. The `NavLink` component places a class on the anchor object when it is being rendered based on weather the current navigation location starts with or is equal to the href.\n\nIn your case if the route is active you simply want to put and active class on the element.\n\n```\n\n 1\n 2\n 3\n\n@code {\n\n [Inject]\n NavigationManager NavigationManager { get; set; }\n\n protected override void OnInitialized() => NavigationManager.LocationChanged += (s, e) => StateHasChanged();\n\n bool IsActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix)\n {\n var relativePath = NavigationManager.ToBaseRelativePath(NavigationManager.Uri).ToLower();\n return navLinkMatch == NavLinkMatch.All ? relativePath == href.ToLower() : relativePath.StartsWith(href.ToLower());\n }\n\n string GetActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix) => IsActive(href, navLinkMatch) ? \"active\" : \"\";\n}\n```\n\n========================================\n\nCode:\n```text\n...\n <ul class=\"@($\"{menuVisibleClass} flex flex-col bg-gray-400 px-4 py-2 md:flex md:flex-row md:bg-transparent\")\">\n <NavLink @onclick=\"ToggleActive\" class=\"@($\"nav-item {activeClass}\" )\" href=\"/\">Home</NavLink>\n <NavLink class=\"@($\"nav-item focus:bg-purple-400\")\" tabindex=\"-1\" href=\"/fetchdata\">Counter</NavLink> \n </ul>\n </div>\n \n @code\n {\n ...\n private bool _active = false;\n string activeClass = \"\";\n \n private void ToggleActive()\n {\n _active = !_active;\n activeClass = _active ? \" bg-purple-400\" : \"\";\n }\n ...\n }\n```\n\n```text\n<div id=\"myDIV\">\n <button class=\"btn\">1</button>\n <button class=\"btn active\">2</button>\n <button class=\"btn\">3</button>\n </div>\n \n <script>\n var header = document.getElementById(\"myDIV\");\n var btns = header.getElementsByClassName(\"btn\");\n for (var i = 0; i < btns.length; i++) {\n btns[i].addEventListener(\"click\", function() {\n var current = document.getElementsByClassName(\"active\");\n current[0].className = current[0].className.replace(\" active\", \"\");\n this.className += \" active\";\n });\n }\n </script>\n```\n\n```text\n@tailwind base;\n@tailwind components;\n\n.nav-item {\n @apply bg-gray-100 m-1 font-bold text-gray-700 px-4 py-2 rounded-sm shadow-lg;\n}\n.nav-item:hover {\n @apply bg-purple-300;\n}\n.nav-item:focus {\n @apply outline-none;\n}\n\n.nav-item:active {\n @apply bg-purple-500;\n}\n```\n\n```text\n<script src=\"_framework/blazor.server.js\"></script>\n```\n\n```text\na.active{@apply bg-purple-500}\n```\n\n```text\n.nav-item.active{@apply bg-purple-500}\n```\n\n```text\n.customActiveClass{@apply bg-purple-500}\n```\n\n```text\nActiveClass\n```\n\n```text\n:active\n```\n\n```text\n<div id=\"myDIV\">\n <button class=\"btn @GetActive(\"path1\")\">1</button>\n <button class=\"btn @GetActive(\"path2\")\">2</button>\n <button class=\"btn @GetActive(\"path3\")\">3</button>\n</div>\n\n@code {\n\n [Inject]\n NavigationManager NavigationManager { get; set; }\n\n protected override void OnInitialized() => NavigationManager.LocationChanged += (s, e) => StateHasChanged();\n\n bool IsActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix)\n {\n var relativePath = NavigationManager.ToBaseRelativePath(NavigationManager.Uri).ToLower();\n return navLinkMatch == NavLinkMatch.All ? relativePath == href.ToLower() : relativePath.StartsWith(href.ToLower());\n }\n\n string GetActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix) => IsActive(href, navLinkMatch) ? \"active\" : \"\";\n}\n```\n\n```text\nNavLink\n```\n\n```text\nNavLink\n```\n\n========================================\n\nComments:\n- .nav-item.active{@apply bg-purple-500} solves problem. I should use right class definition to work NavLink automatically, not :active pseudo class of element. However :active Tailwind CSS works as well when element is clicked.","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":12,"totalLines":225,"estimatedTokens":1475}}783{"id":"stack-65509750","source":"stackoverflow","questionId":65509750,"title":"Dark variant with background images in Tailwind","tags":["jsx","background-image","variant","tailwind-css"],"text":"Title: Dark variant with background images in Tailwind\nTags: jsx, background-image, variant, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI tried using different background images depending on the mode (default & dark). It seems that the dark variant isn't working as soon as I use a custom image. I added variants following Tailwind's instructions.\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\n important: true,\n // Active dark mode on class basis\n darkMode: \"class\",\n i18n: {\n locales: [\"en-US\"],\n defaultLocale: \"en-US\",\n },\n purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n theme: {\n extend: {\n backgroundImage: theme => ({\n 'ysosb': \"url('./images/y-so-serious.png')\",\n 'ysosw': \"url('./images/y-so-serious-white.png')\",\n })\n }\n },\n variants: {\n extend: {\n backgroundColor: [\"checked\"],\n backgroundImage: [\"dark\"],\n borderColor: [\"checked\"],\n inset: [\"checked\"],\n zIndex: [\"hover\", \"active\"],\n },\n },\n plugins: [],\n future: {\n purgeLayersByDefault: true,\n },\n};\n```\n\n**JSX file**\n\n```\n\n...\n\n```\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n important: true,\n // Active dark mode on class basis\n darkMode: \"class\",\n i18n: {\n locales: [\"en-US\"],\n defaultLocale: \"en-US\",\n },\n purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n theme: {\n extend: {\n backgroundImage: theme => ({\n 'ysosb': \"url('./images/y-so-serious.png')\",\n 'ysosw': \"url('./images/y-so-serious-white.png')\",\n })\n }\n },\n variants: {\n extend: {\n backgroundColor: [\"checked\"],\n backgroundImage: [\"dark\"],\n borderColor: [\"checked\"],\n inset: [\"checked\"],\n zIndex: [\"hover\", \"active\"],\n },\n },\n plugins: [],\n future: {\n purgeLayersByDefault: true,\n },\n};\n```\n\n```text\n<section className=\"dark:bg-ysosb bg-ysosw shadow\">\n...\n</section>\n```\n\n```text\n<section bg-ysosw dark:bg-ysosb shadow text-black dark:text-white>\n...\n</section>\n```\n\n========================================\n\nComments:\n- Solved it! I changed the JSX code to : ``\n- Please MOVE your comment to a (self posted) answer, and mark that as accepted\n- great, merci! Make sure to also mark it \"accepted\" (some day) ...","metadata":{"transformedAt":"2026-08-18T18:33:42.944Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":106,"estimatedTokens":575}}784{"id":"stack-64248303","source":"stackoverflow","questionId":64248303,"title":"Input element goes beyond the mobile screen width","tags":["html","css","tailwind-css"],"text":"Title: Input element goes beyond the mobile screen width\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have the search input element and when I view it on mobile it goes beyond the width of the screen. I'm not sure why:\n\nhttps://i.sstatic.net/koHN9.png\nhttps://i.sstatic.net/40JYk.png\n\n```\n\n \n \n \n \n \n\n Filters\n \n\n```\n\nAny help is appreciated.\n\nhttps://i.sstatic.net/D8YCs.png\n\nhttps://i.sstatic.net/Z875W.png\n\nhttps://i.sstatic.net/0Tmpy.png\n\nEDIT:\n\nI tried to remove styles that set padding:\n\n```\n\n \n \n \n \n \n\n Filters\n \n\n```\n\nbut it didn't work.\n\nI'm looking to solve it with `tailwind` classes, without resorting to raw css solutions.\n\nhttps://i.sstatic.net/Gx8JP.png\n\nhttps://i.sstatic.net/aKFlM.png\n\n========================================\n\nTop Answer:\nThe input break is due to the padding you added.\nIt has 3rem padding-rigth, and when the screen is smaller, the component is larger than the width.\nYou should decrease the size of your padding.\n\nThe ideal would be to decrease the padding, and try to work with a text-indent in css.\n\n\r\n\r\n\n```\n.flex input{\n text-indent: 10px;\n }\n```\n\n\r\n\n```\n\n \n \n \n\n \n Filters\n \n\n```\n\n========================================\n\nCode:\n```text\n<template>\n <div id=\"app\" class=\"bg-gray-200 antialiased\">\n <section class=\"flex justify-between bg-gray-800 px-4 py-3 \">\n <div class=\"relative\">\n <input class= \"bg-gray-900 text-white rounded-lg px-12 py-2\n focus:outline-none focus:bg-white focus:text-gray-500\"\n placeholder=\"Search by keywords\"/>\n </div>\n\n\n <button>Filters</button>\n </section>\n</div>\n</template>\n```\n\n```text\n<template>\n <div id=\"app\" class=\"bg-gray-200 \">\n <section class=\"flex justify-between bg-gray-800 \">\n <div class=\" \">\n <input class= \"bg-gray-900 \"\n placeholder=\"Search by keywords\"/>\n </div>\n\n\n <button>Filters</button>\n </section>\n</div>\n</template>\n```\n\n```text\ntailwind\n```\n\n```css\n.flex input { /* or put a custom class on your input, such as input-flex */\n min-width: 0;\n}\n\nbody {\n width: 240px; /* demo only */\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@1.0.0/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div id=\"app\" class=\"bg-gray-200 antialiased\">\n <section class=\"flex justify-between bg-gray-800 px-4 py-3 \">\n <input class=\"bg-gray-900 text-white rounded-lg px-12 py-2\n focus:outline-none focus:bg-white focus:text-gray-500\" placeholder=\"Search by keywords\" />\n\n <button>Filters</button>\n </section>\n</div>\n```\n\n```css\nbody {\n width: 240px; /* demo only */\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@1.0.0/dist/tailwind.min.css\" rel=\"stylesheet\"/>\n\n<div id=\"app\" class=\"bg-gray-200 antialiased\">\n <section class=\"flex justify-between bg-gray-800 px-4 py-3 \">\n <input class=\"w-full bg-gray-900 text-white rounded-lg px-12 py-2\n focus:outline-none focus:bg-white focus:text-gray-500\" placeholder=\"Search by keywords\" />\n\n <button>Filters</button>\n </section>\n</div>\n```\n\n```text\nw-full\n```\n\n```text\nsm\n```\n\n```text\nsm:w-full\n```\n\n```css\n.flex input{\n text-indent: 10px;\n }\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n<div id=\"app\" class=\"bg-gray-200 antialiased\">\n\n<section class=\"grid grid-cols-2 bg-gray-800 px-3 py-3 \">\n <div class=\"relative\">\n <input class=\"bg-gray-900 text-white w-full rounded-lg px-3 px-3 py-2\n focus:outline-none focus:bg-white focus:text-gray-500\" placeholder=\"Search by keywords\" />\n </div>\n\n <div class=\"text-right\">\n <button>Filters</button>\n </div>\n\n</section>\n</div>\n```\n\n```text\n<div>\n <div id=\"app\" class=\"bg-gray-200 antialiased\">\n <section class=\"flex justify-between bg-gray-800 px-4 py-3 col-gap-2\">\n <input class=\"block max-w-none sm:max-w-full overflow-auto flex-1 w-auto bg-gray-500 text-white rounded-lg py-2 px-4 focus:outline-none focus:bg-white focus:text-gray-500 placeholder-black \" placeholder=\"Search by keywords\"/>\n <button class=\"block text-gray-100\">\n <span class=\"hidden md:block\">Filters</span>\n <span class=\"md:hidden\">\n <svg class=\"w-10 h-10\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z\"></path>\n </svg>\n </span>\n </button>\n </section>\n </div>\n </div>\n```\n\n```text\n<section class=\"flex justify-between col-gap-4 bg-gray-800 px-2 py-3 \">\n <input class= \"flex-1 overflow-auto bg-gray-900 text-white px-2 \n focus:outline-none focus:bg-white focus:text-gray-500\"\n placeholder=\"Search by keywords\"/>\n \n <button class=\"px-4 bg-gray-700 \">Filters</button>\n</section>\n```\n\n```text\n<div class=\"relative\">\n```\n\n```text\ninput\n```\n\n```text\nsection\n```\n\n```text\noverflow-auto\n```\n\n```text\nflex-1\n```\n\n```text\ninput\n```\n\n```text\ninput\n```\n\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css\" rel=\"stylesheet\"/>\n<div class=\"flex grid grid-cols-6 place-content-center min-h-screen bg-gray-50\">\n <div class=\"col-start-2 col-span-4\">\n <span class=\"z-10 leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-2 py-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n </svg>\n </span>\n <div class=\"flex justify-between\">\n <input type=\"search\" name=\"search\" id=\"search\" placeholder=\"Search Item...\" class=\"px-5 text-md border-gray-400 rounded-l text-lg pl-11 py-1 shadow-sm float-left w-full border\" />\n <button type=\"submit\" class=\"w-24 flex items-center justify-center bg-gray-100 text-lg py-1 border-t border-r border-b border-gray-400 rounded-r text-gray-600\">Search</button>\n </div>\n </div>\n</div>\n```\n\n========================================\n\nComments:\n- maybe id=\"app\" has some CSS property?\n- @aakash No it doesn't\n- can you run your HTML in something like `jsfiddle`?\n- if I remove the padding `px` `py` classes the problem doesn't go away\n- And I tried your code, somehow it shows the same thing as on the first screenshots of mine...\n- You could replace \"flex justify-between\" with \"grid-cols-2\", and add a \".w-full\" class to the input\n- This has the same problem below 268px. I'm not sure what the OP's size goals are....\n- Yes, the same thing: i.imgur.com/maA4a5R.png\n- Ok got it. I have fixed it now. Please see the latest edit and checkout the playground link as well.\n- It seems that if I remove `overflow-auto` from your code, it stops working. So if `overflow-auto` is key here, I tried adding it to my original code: play.tailwindcss.com/oeisp6ePUK. Also had to move out the `input` element out of the `div` - into the `section` element. Somewhy if the `input` is inside another `div` it breaks. Thanks for the `overflow-auto` idea and for that tailwind playground site. I had troubles finding one.","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":22,"totalLines":294,"estimatedTokens":1900}}785{"id":"stack-66543079","source":"stackoverflow","questionId":66543079,"title":"PurgeCSS ignore regex in whitelistPatterns and remove TailwindCSS classes (on NuxtJS)","tags":["tailwind-css","nuxt.js","css-purge"],"text":"Title: PurgeCSS ignore regex in whitelistPatterns and remove TailwindCSS classes (on NuxtJS)\nTags: tailwind-css, nuxt.js, css-purge\nSource: Stack Overflow\n\nQuestion:\nI'm using NuxtJS (VueJS) with TailwindCSS and PurgeCSS.\nUntil now, I was specifying complete CSS classes for colors like `text-green-800`, `bg-red-400`, etc. But when creating component it's not ideal while the color can be passed as a Prop, but it's also not possible to directly do `bg-{color}-400` while PurgeCSS while remove the background colors not found.\n\nSo, I wanted to put those classes in the whitelistPatterns from PurgeCSS, allowing regex to protect some classes.\nThis is what I've set up :\n\n```\npurgeCSS: {\n whitelistPatterns: [/^bg-/, /^text-/, /^border-/]\n },\n```\n\nBut PurgeCSS is completely ignoring the configuration. I've tried many regex : `/bg-/`, `/bg/`, `/^bg-.*/`, etc. None have worked.\nI thought that maybe it's using the new version of PurgeCSS which uses `safelist` instead, but when I set the whitelistPatterns like this :\n\n```\npurgeCSS: {\n whitelistPatterns: ['text-green-800', /^bg-/, /^text-/, /^border-/]\n },\n```\n\nThen the `text-green-800` class is successfully protected. So i'm completely lost, nothing seems to work. And obviously only happening on production, so difficult to debug.\n\nI've already found this post which gives exactly what I've done :\nPurgeCSS whitelist patterns with TailwindCSS\n\nIf anyone has a lead... Thank you!\n\n========================================\n\nCode:\n```text\npurgeCSS: {\n whitelistPatterns: [/^bg-/, /^text-/, /^border-/]\n },\n```\n\n```text\npurgeCSS: {\n whitelistPatterns: ['text-green-800', /^bg-/, /^text-/, /^border-/]\n },\n```\n\n```text\ntext-green-800\n```\n\n```text\nbg-red-400\n```\n\n```text\nbg-{color}-400\n```\n\n```text\n/bg-/\n```\n\n```text\n/bg/\n```\n\n```text\n/^bg-.*/\n```\n\n```text\nsafelist\n```\n\n```text\ntext-green-800\n```\n\n```html\npurge: {\n content: [\n './components/**/*.{vue,js}',\n './layouts/**/*.vue',\n './pages/**/*.vue',\n './plugins/**/*.{js,ts}',\n './nuxt.config.{js,ts}'\n\n ],\n options: {\n // Whitelisting some classes to avoid purge\n safelist: [/^bg-/, /^text-/, /^border-/]\n }\n },\n```\n\n```text\nnuxt.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nbg-blue-200\n```\n\n```text\nnuxt.config.js\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- Which version of PurgeCSS are you using?\n- For god sake I was having the same issue as you and was trying to use `whitelistPatterns` (which was previously working). As a side note; to keep media queries I had to specify a regex like : `/^(\\D{2}:)?border-/`\n- Using gatsby 2.30.3 with gatsby-plugin-purgecss 5.0.0 require to use the old 'whitelistPatterns' key. Thanks @Baldráni","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":16,"totalLines":123,"estimatedTokens":692}}786{"id":"stack-75429594","source":"stackoverflow","questionId":75429594,"title":"How can I open a headless Tailwind dialog from inside a menu dropdown?","tags":["reactjs","tailwind-css","headless-ui"],"text":"Title: How can I open a headless Tailwind dialog from inside a menu dropdown?\nTags: reactjs, tailwind-css, headless-ui\nSource: Stack Overflow\n\nQuestion:\nI'm using Tailwind CSS and their HeadlessUI components for React.\n\nI'd like to be able to click an item in a menu dropdown and have it open a dialog. But when I click the item in the dropdown, the dialog flashes and disappears -- presumably it's closed because the dropdown menu was closed.\n\nhttps://i.sstatic.net/f7buk.gif\n\nIs there a way to make this work?\n\nThe menu looks like this:\n\n```\nconst menuItems = ['One', 'Two', 'Three', , 'Four']\n\n// ...\n\n Menu\n \n {menuItems.map((item, i) => (\n \n {({ active }) => (\n \n )}\n \n ))}\n \n\n```\n\nand the dialog:\n\n```\nconst Dialog = ({ buttonStyle }: any) => {\n const [isOpen, setIsOpen] = useState(false)\n const open = () => setIsOpen(true)\n const close = () => setIsOpen(false)\n return (\n <>\n \n **👉 Click me 👈**\n \n \n \n \n \n \n 🥳\n\n I am a dialog and you can see me.\n\n \n \n \n \n \n \n \n \n )\n}\n```\n\nYou can see it in action here: https://tailwind-dialog-in-dropdown.glitch.me/\n\nCode is here: https://glitch.com/edit/#!/tailwind-dialog-in-dropdown\n\n========================================\n\nCode:\n```text\nconst menuItems = ['One', 'Two', 'Three', <Dialog />, 'Four']\n\n// ...\n\n<Headless.Menu as=\"div\" className=\"relative inline-block text-left\">\n <Headless.Menu.Button className=\"button\">Menu</Headless.Menu.Button>\n <Headless.Menu.Items className=\"absolute mt-2 w-56 border divide-y rounded bg-white\">\n {menuItems.map((item, i) => (\n <Headless.Menu.Item key={i}>\n {({ active }) => (\n <span\n className={cx({\n 'block cursor-pointer px-4 py-2': true,\n 'bg-gray-100 text-gray-900': active,\n })}\n children={item}\n />\n )}\n </Headless.Menu.Item>\n ))}\n </Headless.Menu.Items>\n</Headless.Menu>\n```\n\n```text\nconst Dialog = ({ buttonStyle }: any) => {\n const [isOpen, setIsOpen] = useState(false)\n const open = () => setIsOpen(true)\n const close = () => setIsOpen(false)\n return (\n <>\n <button className={buttonStyle} onClick={open}>\n <b>👉 Click me 👈</b>\n </button>\n <Headless.Transition.Root show={isOpen}>\n <Headless.Dialog as=\"div\" className=\"Dialog\" onClose={close}>\n <Backdrop />\n <div className=\"fixed inset-0 z-10 flex min-h-full justify-center p-4 items-center\">\n <Headless.Dialog.Panel className=\"w-full max-w-lg p-6 rounded bg-white space-y-2\">\n <p className=\"text-4xl\">🥳</p>\n <p>I am a dialog and you can see me.</p>\n <div className=\"text-right\">\n <button className=\"button\" onClick={close} children=\"OK\" />\n </div>\n </Headless.Dialog.Panel>\n </div>\n </Headless.Dialog>\n </Headless.Transition.Root>\n </>\n )\n}\n```\n\n```text\n<Headless.Menu.Items unmount={false}>\n```\n\n```text\n<Menu.Items>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":134,"estimatedTokens":739}}787{"id":"stack-79705011","source":"stackoverflow","questionId":79705011,"title":"The bg-opacity-* utility no longer exists as of v4 - how could it still be created?","tags":["tailwind-css","tailwind-css-4"],"text":"Title: The bg-opacity-* utility no longer exists as of v4 - how could it still be created?\nTags: tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nIn some cases, it's useful to declare the `bg-opacity` value **without using a modifier**.\n\nSo instead of writing `bg-sky-500/50`, I'd prefer to use `bg-sky-500 bg-opacity-50` in v4 as well.\n\nHowever, it works in v3:\n\n```\n\n```\n\nbut no longer in v4:\n\n```\n\n```\n\n========================================\n\nCode:\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"size-16 bg-sky-500\"></div>\n<div class=\"size-16 bg-sky-500 bg-opacity-50\"></div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"size-16 bg-sky-500\"></div>\n<div class=\"size-16 bg-sky-500 bg-opacity-50\"></div>\n```\n\n```text\nbg-opacity\n```\n\n```text\nbg-sky-500/50\n```\n\n```text\nbg-sky-500 bg-opacity-50\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"size-16 bg-sky-500\"></div>\n<div class=\"size-16 bg-sky-500/50\"></div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@utility bg-opacity-* {\n --background-opacity: calc(100% - --value(integer) * 1%);\n}\n\n@utility bg-* {\n background-color: color-mix(in oklab, --value(--color-*, [*]) var(--background-opacity, 100%), transparent);\n}\n</style>\n\n<div class=\"size-16 bg-sky-500\"></div>\n<div class=\"size-16 bg-sky-500 bg-opacity-50\"></div>\n```\n\n```text\nbg-opacity-*\n```\n\n```text\nbg-opacity-*\n```\n\n```text\nbg-black/50\n```\n\n```text\nbg-opacity\n```\n\n```text\nbg-color/opacity\n```\n\n```text\nbg-sky-500/50\n```\n\n```text\nbg-opacity\n```\n\n```text\nbg-opacity-*\n```\n\n```text\nbg-*\n```\n\n```text\n@supports\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":17,"totalLines":112,"estimatedTokens":439}}788{"id":"stack-74520409","source":"stackoverflow","questionId":74520409,"title":"Accordion closing imediately after opening with tailwind css","tags":["css","bootstrap-4","tailwind-css"],"text":"Title: Accordion closing imediately after opening with tailwind css\nTags: css, bootstrap-4, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have the following accordion item:\n\n```\n\n \n \n What is tax and legal advisory?\n \n \n \n \n \n \n \n \n Learn how to create your very first NFT and how to create your NFT collections. Unique.\n \n\n \n \n\n```\n\nThis item closes immediately after opening:\n\nhttps://i.sstatic.net/F3j5a.png\n\nI expect to see this:\n\nhttps://i.sstatic.net/i0uAq.png\n\nI have determined that unselecting the following css features via browser inspector gives me what I want:\n\nhttps://i.sstatic.net/px2ut.png\n\nFor some reason the collapse class is added twice when I toggle the accordion. Why is the css created in a style sheet and both inline? I only have one file and it is separate. How can I fix this accordion button?\n\n========================================\n\nCode:\n```text\n<div class=\"accordion-item mb-5 overflow-hidden rounded-lg border border-jacarta-100 dark:border-jacarta-600\">\n <h2 class=\"accordion-header\" id=\"faq-heading-1\">\n <button class=\"accordion-button relative flex w-full items-center justify-between bg-white px-4 py-3 text-left font-display text-jacarta-700 dark:bg-jacarta-700 dark:text-white\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#faq-1\" aria-expanded=\"false\" aria-controls=\"faq-1\">\n <span>What is tax and legal advisory?</span>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" class=\"accordion-arrow h-4 w-4 shrink-0 fill-jacarta-700 transition-transform dark:fill-white\">\n <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n <path d=\"M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z\"></path>\n </svg>\n </button>\n </h2>\n <div id=\"faq-1\" class=\"accordion-collapse\" aria-labelledby=\"faq-heading-1\" data-bs-parent=\"#accordionFAQ\">\n <div class=\"accordion-body border-t border-jacarta-100 bg-white p-4 dark:border-jacarta-600 dark:bg-jacarta-700\">\n <p class=\"dark:text-jacarta-200\">Learn how to create your very first NFT and how to create your NFT collections. Unique.\n </p>\n </div>\n </div>\n</div>\n```\n\n```text\ncorePlugins: {\n visibility: false\n },\n```\n\n```text\n@layer utilities {\n .visible {\n visibility: visible;\n }\n .invisible {\n visibility: hidden;\n }\n}\n```\n\n========================================\n\nComments:\n- don't use a div for that. use the `details` html tag","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":86,"estimatedTokens":623}}789{"id":"stack-79629110","source":"stackoverflow","questionId":79629110,"title":"Livewire Flux and Tailwind list items","tags":["php","css","tailwind-css","laravel-livewire","flux"],"text":"Title: Livewire Flux and Tailwind list items\nTags: php, css, tailwind-css, laravel-livewire, flux\nSource: Stack Overflow\n\nQuestion:\nI'm having an issue and I think it might be with Tailwind4, I haven't really used Tailwind before. But now since I am using Livewire Flux, I have an issue with the Flux editor, or at least, with displaying the output. Here's an image of how I enter it in my editor:\n\nhttps://i.sstatic.net/z1rS4Mm5.png\n\nSo I expect the output to be the same, but it is being displayed like so:\n\nhttps://i.sstatic.net/BO0jsH2z.png\n\nThe HTML looks like this:\n\n```\n\n Hello, this is a test:\n\n \n First\n\n Second\n\n Third\n\n \n And this is also a test:\n\n \n First\n\n Second\n\n Third\n\n \n Does it work?\n\n```\n\nSo, two questions:\n\n- Why are the lists not being displayed properly?\n\n- Why are there no line breaks as expected? Or am I missing something here?\n\n========================================\n\nCode:\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n\n<div class=\"text-sm text-zinc-950 dark:text-white\">\n <p>Hello, this is a test:</p>\n <ol>\n <li><p>First</p></li>\n <li><p>Second</p></li>\n <li><p>Third</p></li>\n </ol>\n <p>And this is also a test:</p>\n <ul>\n <li><p>First</p></li>\n <li><p>Second</p></li>\n <li><p>Third</p></li>\n </ul>\n <p>Does it work?</p>\n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@layer theme, base, components, utilities;\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/utilities.css\" layer(utilities);\n</style>\n\n<div class=\"text-sm text-zinc-950 dark:text-white\">\n <p>Hello, this is a test:</p>\n <ol>\n <li><p>First</p></li>\n <li><p>Second</p></li>\n <li><p>Third</p></li>\n </ol>\n <p>And this is also a test:</p>\n <ul>\n <li><p>First</p></li>\n <li><p>Second</p></li>\n <li><p>Third</p></li>\n </ul>\n <p>Does it work?</p>\n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@import \"tailwindcss\";\n\n@layer base {\n ul,\n ol {\n list-style: revert;\n margin: revert; \n padding-inline-start: revert;\n }\n\n li {\n margin: revert;\n padding: revert;\n display: list-item;\n }\n}\n</style>\n\n<div class=\"text-sm text-zinc-950 dark:text-white\">\n <p>Hello, this is a test:</p>\n <ol>\n <li><p>First</p></li>\n <li><p>Second</p></li>\n <li><p>Third</p></li>\n </ol>\n <p>And this is also a test:</p>\n <ul>\n <li><p>First</p></li>\n <li><p>Second</p></li>\n <li><p>Third</p></li>\n </ul>\n <p>Does it work?</p>\n</div>\n```\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n@import \"tailwindcss\";\n</style>\n\n<div class=\"text-sm text-zinc-950 dark:text-white\">\n <p>Hello, this is a test:</p>\n <ol class=\"list-decimal pl-[revert]\">\n <li><p>First</p></li>\n <li><p>Second</p></li>\n <li><p>Third</p></li>\n </ol>\n <p>And this is also a test:</p>\n <ul class=\"list-disc pl-[revert]\">\n <li><p>First</p></li>\n <li><p>Second</p></li>\n <li><p>Third</p></li>\n </ul>\n <p>Does it work?</p>\n</div>\n```\n\n```text\n@import \"tailwindcss\"\n```\n\n```text\nol\n```\n\n```text\nul\n```\n\n```text\nlist-style-type\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":171,"estimatedTokens":817}}790{"id":"stack-62150922","source":"stackoverflow","questionId":62150922,"title":"How to increase text input width (with transition) when it is hovered in Tailwindcss","tags":["tailwind-css"],"text":"Title: How to increase text input width (with transition) when it is hovered in Tailwindcss\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI was able to change the width of a text when it is hovered after adding `hover` in `tailwind.config.js`\n\n```\nwidth: ['responsive', 'hover', 'focus'],\n.\n.\n.\ntransitionProperty: ['responsive', 'hover', 'focus'],\ntransitionTimingFunction: ['responsive', 'hover', 'focus'],\ntransitionDuration: ['responsive', 'hover', 'focus'],\ntransitionDelay: ['responsive', 'hover', 'focus'],\n```\n\nHowever the animation effect is ugly and I wanted to add some transition but it doesn't seem to work. Here is the HTML part:\n\n```\n\n```\n\nSample fiddle:\nhttps://jsfiddle.net/codename2200/30wjcndm/9/\n\nSince there is no tailwind config in jsfiddle I just extracted the styles (with purge) to replicate what I've got so far.\n\n========================================\n\nCode:\n```text\nwidth: ['responsive', 'hover', 'focus'],\n.\n.\n.\ntransitionProperty: ['responsive', 'hover', 'focus'],\ntransitionTimingFunction: ['responsive', 'hover', 'focus'],\ntransitionDuration: ['responsive', 'hover', 'focus'],\ntransitionDelay: ['responsive', 'hover', 'focus'],\n```\n\n```text\n<input type=\"text\" placeholder=\"Search\" class=\"placeholder-gray-500 rounded-full px-3 pl-8 py-1 outline-none transition duration-700 ease-in-out focus:shadow-outline hover:w-64\" />\n```\n\n```text\nhover\n```\n\n```text\ntailwind.config.js\n```\n\n```css\nbody {\n background: #DEDEDE;\n}\n\n/*-- Extracted from tailwindcss --*/\n/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * Remove the gray background on active links in IE 10.\n */\n\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\n/**\n * Add the correct font size in all browsers.\n */\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Remove the border on images inside links in IE 10.\n */\n\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton { /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\n[type=\"button\"] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\n\n/*\n * Add the correct display in all browsers.\n */\n\n/* Misc\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10+.\n */\n\n/**\n * Add the correct display in IE 10.\n */\n\n/**\n * Manually forked from SUIT CSS Base: https://github.com/suitcss/base\n * A thin layer on top of normalize.css that provides a starting point more\n * suitable for web applications.\n */\n\n/**\n * Removes the default spacing and border for appropriate elements.\n */\n\n\nh2,\nh3 {\n margin: 0;\n}\n\nbutton {\n background-color: transparent;\n background-image: none;\n padding: 0;\n}\n\n/**\n * Work around a Firefox/IE bug where the transparent `button` background\n * results in a loss of the default `button` focus styles.\n */\n\nbutton:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n\nul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/**\n * Tailwind custom reset styles\n */\n\n/**\n * 1. Use the user's configured `sans` font-family (with Tailwind's default\n * sans-serif font stack as a fallback) as a sane default.\n * 2. Use Tailwind's default \"normal\" line-height so the user isn't forced\n * to override it to ensure consistency even when using the default theme.\n */\n\nhtml {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 1 */\n line-height: 1.5; /* 2 */\n}\n\n/**\n * 1. Prevent padding and border from affecting element width.\n *\n * We used to set this in the html element and inherit from\n * the parent element for everything else. This caused issues\n * in shadow-dom-enhanced elements like <details> where the content\n * is wrapped by a div with box-sizing set to `content-box`.\n *\n * https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n * By default, the way the browser specifies that an element should have no\n * border is by setting it's border-style to `none` in the user-agent\n * stylesheet.\n *\n * In order to easily add borders to elements by just setting the `border-width`\n * property, we change the default border-style for all elements to `solid`, and\n * use border-width to hide them instead. This way our `border` utilities only\n * need to set the `border-width` property instead of the entire `border`\n * shorthand, making our border utilities much more straightforward to compose.\n *\n * https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e2e8f0; /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n border-style: solid;\n}\n\ninput::-moz-placeholder {\n color: #a0aec0;\n}\n\ninput:-ms-input-placeholder {\n color: #a0aec0;\n}\n\ninput::-ms-input-placeholder {\n color: #a0aec0;\n}\n\ninput::placeholder {\n color: #a0aec0;\n}\n\nbutton {\n cursor: pointer;\n}\n\ntable {\n border-collapse: collapse;\n}\n\n\nh2,\nh3 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput {\n padding: 0;\n line-height: inherit;\n color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\n/**\n * Make replaced elements `display: block` by default as that's\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg {\n display: block;\n vertical-align: middle;\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their instrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\n.bg-white {\n --bg-opacity: 1;\n background-color: #fff;\n background-color: rgba(255, 255, 255, var(--bg-opacity));\n}\n\n.bg-custom-bgnormal {\n --bg-opacity: 1;\n background-color: #E7E7E7;\n background-color: rgba(231, 231, 231, var(--bg-opacity));\n}\n\n.bg-custom-dividerbg {\n --bg-opacity: 1;\n background-color: #F3F4F6;\n background-color: rgba(243, 244, 246, var(--bg-opacity));\n}\n\n.hover\\:bg-gray-600:hover {\n --bg-opacity: 1;\n background-color: #718096;\n background-color: rgba(113, 128, 150, var(--bg-opacity));\n}\n\n.border-gray-400 {\n --border-opacity: 1;\n border-color: #cbd5e0;\n border-color: rgba(203, 213, 224, var(--border-opacity));\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.border-b {\n border-bottom-width: 1px;\n}\n\n.flex {\n display: flex;\n}\n\n.table {\n display: table;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.flex-1 {\n flex: 1 1 0%;\n}\n\n.flex-none {\n flex: none;\n}\n\n.font-semibold {\n font-weight: 600;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.h-auto {\n height: auto;\n}\n\n.h-screen {\n height: 100vh;\n}\n\n.text-xs {\n font-size: 0.75rem;\n}\n\n.text-sm {\n font-size: 0.875rem;\n}\n\n.text-xl {\n font-size: 1.25rem;\n}\n\n.leading-7 {\n line-height: 1.75rem;\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.mt-2 {\n margin-top: 0.5rem;\n}\n\n.ml-2 {\n margin-left: 0.5rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.ml-4 {\n margin-left: 1rem;\n}\n\n.mt-6 {\n margin-top: 1.5rem;\n}\n\n.outline-none {\n outline: 0;\n}\n\n.focus\\:outline-none:focus {\n outline: 0;\n}\n\n.overflow-y-auto {\n overflow-y: auto;\n}\n\n.overflow-y-hidden {\n overflow-y: hidden;\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.pt-1 {\n padding-top: 0.25rem;\n}\n\n.pl-2 {\n padding-left: 0.5rem;\n}\n\n.pl-8 {\n padding-left: 2rem;\n}\n\n.pb-10 {\n padding-bottom: 2.5rem;\n}\n\n.placeholder-gray-500::-moz-placeholder {\n --placeholder-opacity: 1;\n color: #a0aec0;\n color: rgba(160, 174, 192, var(--placeholder-opacity));\n}\n\n.placeholder-gray-500:-ms-input-placeholder {\n --placeholder-opacity: 1;\n color: #a0aec0;\n color: rgba(160, 174, 192, var(--placeholder-opacity));\n}\n\n.placeholder-gray-500::-ms-input-placeholder {\n --placeholder-opacity: 1;\n color: #a0aec0;\n color: rgba(160, 174, 192, var(--placeholder-opacity));\n}\n\n.placeholder-gray-500::placeholder {\n --placeholder-opacity: 1;\n color: #a0aec0;\n color: rgba(160, 174, 192, var(--placeholder-opacity));\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.top-0 {\n top: 0;\n}\n\n.focus\\:shadow-outline:focus {\n box-shadow: 0 0 0 3px rgba(255,153,51,0.5);\n}\n\n.fill-current {\n fill: currentColor;\n}\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-custom-txtnormal {\n --text-opacity: 1;\n color: #5B5E65;\n color: rgba(91, 94, 101, var(--text-opacity));\n}\n\n.text-custom-iconnormal {\n --text-opacity: 1;\n color: #A0A7AD;\n color: rgba(160, 167, 173, var(--text-opacity));\n}\n\n.text-gray-600 {\n --text-opacity: 1;\n color: #718096;\n color: rgba(113, 128, 150, var(--text-opacity));\n}\n\n.hover\\:text-white:hover {\n --text-opacity: 1;\n color: #fff;\n color: rgba(255, 255, 255, var(--text-opacity));\n}\n\n.hover\\:text-orange-600:hover {\n --text-opacity: 1;\n color: #dd6b20;\n color: rgba(221, 107, 32, var(--text-opacity));\n}\n\n.hover\\:text-orange-800:hover {\n --text-opacity: 1;\n color: #9c4221;\n color: rgba(156, 66, 33, var(--text-opacity));\n}\n\n.group:hover .group-hover\\:text-gray-800 {\n --text-opacity: 1;\n color: #2d3748;\n color: rgba(45, 55, 72, var(--text-opacity));\n}\n\n.group:hover .group-hover\\:text-orange-400 {\n --text-opacity: 1;\n color: #f6ad55;\n color: rgba(246, 173, 85, var(--text-opacity));\n}\n\n.group:hover .group-hover\\:text-orange-800 {\n --text-opacity: 1;\n color: #9c4221;\n color: rgba(156, 66, 33, var(--text-opacity));\n}\n\n.uppercase {\n text-transform: uppercase;\n}\n\n.hover\\:underline:hover {\n text-decoration: underline;\n}\n\n.tracking-wide {\n letter-spacing: 0.025em;\n}\n\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.w-4 {\n width: 1rem;\n}\n\n.w-48 {\n width: 12rem;\n}\n\n.w-auto {\n width: auto;\n}\n\n.w-full {\n width: 100%;\n}\n\n.hover\\:w-64:hover {\n width: 16rem;\n}\n\n.transition {\n transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.duration-200 {\n transition-duration: 200ms;\n}\n\n.duration-700 {\n transition-duration: 700ms;\n}\n\n.sidebar-spotify::-webkit-scrollbar{\n width: 8px;\n background-color: #f5f5f5;\n}\n\n.sidebar-spotify::-webkit-scrollbar-thumb {\n border-radius: 8px;\n background-color: #c98a00;\n}\n\n.content-spotify::-webkit-scrollbar {\n width: 8px;\n background-color: #f5f5f5;\n}\n\n.content-spotify::-webkit-scrollbar-thumb {\n border-radius: 8px;\n background-color: #c98a00;\n}\n\n.sidebar-active {\n --border-opacity: 1;\n border-color: #dd6b20;\n border-color: rgba(221, 107, 32, var(--border-opacity));\n border-left-width: 4px;\n}\n\n.sidebar-active a {\n --text-opacity: 1;\n color: #7b341e;\n color: rgba(123, 52, 30, var(--text-opacity));\n}\n\n.sidebar-active i {\n --text-opacity: 1;\n color: #dd6b20;\n color: rgba(221, 107, 32, var(--text-opacity));\n}\n\n.sidebar li:not(.logo) {\n transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;\n transition-duration: 200ms;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sidebar li:hover:not(.logo) {\n border-left-width: 4px;\n --border-opacity: 1;\n border-color: #dd6b20;\n border-color: rgba(221, 107, 32, var(--border-opacity));\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n<input type=\"text\" placeholder=\"Search\" class=\"placeholder-gray-500 w-56 rounded-full px-3 pl-8 py-1 outline-none transition-all duration-700 ease-in-out focus:shadow-outline hover:w-64 hover:w-64\"/>\n```\n\n```text\nhover:w-64\n```\n\n```text\nw-56\n```\n\n```text\ntransition\n```\n\n```text\nbackground-color, border-color, color, fill, stroke, opacity, box-shadow, transform\n```\n\n```text\ntransition-all\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":900,"estimatedTokens":4190}}791{"id":"stack-76718979","source":"stackoverflow","questionId":76718979,"title":"Tailwind CSS: Use CSS variable as arbitrary value for font size?","tags":["css","tailwind-css"],"text":"Title: Tailwind CSS: Use CSS variable as arbitrary value for font size?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nUsing Tailwind CSS, I know it is possible to use `px` and `rem` values as arbitrary values to set an element's font size:\n\n```\ntext-[6.9rem]\ntext-[420px]\n```\n\nBut is there a way to use CSS variables as arbitrary font size values? Using a variable in place of a `px` or `rem` value to set the font size does not seem to work, as the resulting class sets the element's color i.o. its font size:\n\n```\ntext-[var(--custom-size-a)]\ntext-[var(--custom-size-b)]\n```\n\nhttps://i.sstatic.net/4VP7i.png\n\n========================================\n\nCode:\n```css\ntext-[6.9rem]\ntext-[420px]\n```\n\n```css\ntext-[var(--custom-size-a)]\ntext-[var(--custom-size-b)]\n```\n\n```text\npx\n```\n\n```text\nrem\n```\n\n```text\npx\n```\n\n```text\nrem\n```\n\n```text\ntext-[--custom-size-a]\ntext-[--custom-size-b]\n\n<!-- Will generate a font-size utility -->\n<div class=\"text-[length:--my-var]\">...</div>\n\n<!-- Will generate a color utility -->\n<div class=\"text-[color:--my-var]\">...</div>\n```\n\n========================================\n\nComments:\n- Cool, I did not know that, thanks for pointing it out. But this does not solve the problem I posed, the resulting class still sets the `color` prop, not the `font-size`\n- try this : ...","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":66,"estimatedTokens":329}}792{"id":"stack-79584611","source":"stackoverflow","questionId":79584611,"title":"How to use enviroment variables in Tailwind v4 (react-vite)?","tags":["tailwind-css","vite","react-tsx","tailwind-css-4"],"text":"Title: How to use enviroment variables in Tailwind v4 (react-vite)?\nTags: tailwind-css, vite, react-tsx, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nAt my current job, we use `.env` variables to set the main colors of the web pages. I've been using the new TailwindCSS setup where you define everything in `index.css`, but I haven't found a way to use environment variables directly in there.\n\nThis works, but is not what I'm looking for.\n\n**`index.css`**\n\n```\n@import \"tailwindcss\";\n \n@theme {\n --color-main: #62297f;\n --color-secondary: #5184c9;\n}\n```\n\n**.env**\n\n```\nVITE_PRIMARY_COLOR=#3490dc\nVITE_SECONDARY_COLOR=#ffed4a\nVITE_ACTION_COLOR=#e3342f\n```\n\n========================================\n\nCode:\n```css\n@import \"tailwindcss\";\n \n@theme {\n --color-main: #62297f;\n --color-secondary: #5184c9;\n}\n```\n\n```none\nVITE_PRIMARY_COLOR=#3490dc\nVITE_SECONDARY_COLOR=#ffed4a\nVITE_ACTION_COLOR=#e3342f\n```\n\n```text\n.env\n```\n\n```text\nindex.css\n```\n\n```text\nindex.css\n```\n\n```js\n// utils/applyEnvColors.ts\nexport function applyEnvColors() {\n const root = document.documentElement;\n\n const colorVars = {\n primary_color: import.meta.env.VITE_PRIMARY_COLOR,\n secondary_color: import.meta.env.VITE_SECONDARY_COLOR,\n action_color: import.meta.env.VITE_ACTION_COLOR,\n };\n\n Object.entries(colorVars).forEach(([key, value]) => {\n if (value && typeof value === 'string') {\n const formattedKey = `--color-${key.replace('_color', '').replace(/_/g, '-')}`;\n root.style.setProperty(formattedKey, value);\n }\n });\n}\n```\n\n```css\n@theme {\n --color-primary: var(--color-primary);\n --color-secondary: var(--color-secondary);\n --color-action: var(--color-action);\n}\n```\n\n========================================\n\nComments:\n- So in CSS, you need to declare the colors as variables for TailwindCSS. After that, with Vite or JS, you can declare CSS variables in the :root as you wish, and they will immediately be valid for TailwindCSS. To do this, you just need to know how to declare TailwindCSS styles with variables. After that, setting up the CSS variables becomes a piece of cake.\n- Thank you so much! It only worked when I changed the color format to RGB, though. I can't tell why, but thank you again for the fast response!\n- I don't really understand. Why are you converting the CSS `var(...)` reference to a string? Just use: `--color-custom-name: var(--my-custom-variable-name);`\n- @rozsazoltan I tested it, and it works even without being a string. I edited my message, and both versions work correctly. Thanks for tour note.\n- @Becca, you can use a hex value too. You just need to put quotes around the values in the .env file. Otherwise, it will be interpreted as a comment due to the # sign at the beginning of the hex value. This should work: `VITE_PRIMARY_COLOR='#3490dc'`","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":94,"estimatedTokens":700}}793{"id":"stack-76311092","source":"stackoverflow","questionId":76311092,"title":"Can't build className dinamically using clsx and Tailwind","tags":["javascript","reactjs","next.js","tailwind-css","clsx"],"text":"Title: Can't build className dinamically using clsx and Tailwind\nTags: javascript, reactjs, next.js, tailwind-css, clsx\nSource: Stack Overflow\n\nQuestion:\nHi there!\nNot that-skilled-yet Javascript developer here, using React and Next, more specifically this template\n\nWhen it comes to declare component class names, I'm using the following utility function, that combines `tailwind-merge` and `clsx`, as suggested here:\n\n```\n// utils.ts\nimport { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nfunction cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n```\n\nTo make things easier, improve DRY and even readability, I wish to be able to dynamically insert tailwind modifiers (e.g `dark:`, `hover:`, `md:`...) while declaring these class names, like in the following:\n\n```\n// page.tsx\nimport { cn, dark, hover, md } from '@/utils'\n\n```\n\nTo achieve so, I implemented some other utilities functions:\n\n```\n// utils.ts\nfunction apply_modifier(modifier: string, ...inputs: string[]) {\n return inputs.map((input) => `${modifier}:${input}`).join(\" \")\n}\n\nfunction create_specialist_apply_modifier_function(modifier: string) {\n return (...inputs: string[]) => apply_modifier(modifier, ...inputs)\n}\n\nconst dark = create_specialist_apply_modifier_function(\"dark\")\nconst hover = create_specialist_apply_modifier_function(\"hover\")\nconst md = create_specialist_apply_modifier_function(\"md\")\n...\n```\n\nI tested it out and I got the string I was expecting every time, however, the results aren't being applied to the component at all, and I couldn't understand why\n\nEven the following won't work:\n\n```\n `dark:${c}`).join(\" \")\n)}/>\n```\n\nI appreciate any thoughts on understand the problem\nand also into figure an alternative solution\n\n*Obrigado!*\n\n========================================\n\nTop Answer:\nI think class-variance-authority should help you out. I would still keep the classNames whole but this is a great way to create dynamic components.\n\n========================================\n\nCode:\n```js\n// utils.ts\nimport { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nfunction cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n```\n\n```js\n// page.tsx\nimport { cn, dark, hover, md } from '@/utils'\n\n<Component className={cn(\n \"text-white text-sm\",\n \"w-full h-10\",\n hover(\"font-bold text-lime-500\"),\n md(\n \"w-1/2 h-20\",\n \"text-xl\"\n )\n)}/>\n```\n\n```js\n// utils.ts\nfunction apply_modifier(modifier: string, ...inputs: string[]) {\n return inputs.map((input) => `${modifier}:${input}`).join(\" \")\n}\n\nfunction create_specialist_apply_modifier_function(modifier: string) {\n return (...inputs: string[]) => apply_modifier(modifier, ...inputs)\n}\n\nconst dark = create_specialist_apply_modifier_function(\"dark\")\nconst hover = create_specialist_apply_modifier_function(\"hover\")\nconst md = create_specialist_apply_modifier_function(\"md\")\n...\n```\n\n```js\n<Component className={clsx(\n [\"text-2xl\", \"text-white\"].map((c) => `dark:${c}`).join(\" \")\n)}/>\n```\n\n```text\ntailwind-merge\n```\n\n```text\nclsx\n```\n\n```text\ndark:\n```\n\n```text\nhover:\n```\n\n```text\nmd:\n```\n\n```html\n<div class=\"text-{{ error ? 'red' : 'green' }}-600\"></div>\n```\n\n```html\n<div class=\"{{ error ? 'text-red-600' : 'text-green-600' }}\"></div>\n```\n\n```text\n<Component className={cn(\n \"text-white text-sm\",\n \"w-full h-10\",\n \"hover:font-bold hover:text-lime-500\",\n \"md:w-1/2 md:h-20\",\n \"md:text-xl\"\n)}/>\n```\n\n```text\n<Component className={cn(\n \"text-white text-sm\",\n \"w-full h-10\",\n hover(\"font-bold text-lime-500\"),\n md(\n \"w-1/2 h-20\",\n \"text-xl\"\n )\n)}/>\n\n// After some trickery, perhaps something like ↓\n\n<Component className={cn(\n \"text-white text-sm\",\n \"w-full h-10\",\n hover(\"hover:font-bold hover:text-lime-500\"),\n md(\n \"md:w-1/2 md:h-20\",\n \"md:text-xl\"\n )\n)}/>\n```\n\n```text\ntext-red-600\n```\n\n```text\ntext-green-600\n```\n\n========================================\n\nComments:\n- This is probably unrelated to the problem, but note that `hover(\"font-bold text-lime-500\")` returns `\"hover:font-bold text-lime-500\"`, not `\"hover:font-bold hover:text-lime-500\"`.\n- Thanks for the enlightening, Wongjn. I wouldn't realize it was a matter on how Tailwind produce its classes. And it actually make sense with the results I found: The element weren't being styled at all.\n- I'm certain the `transforming source files` customization is the way to go here!","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":15,"totalLines":191,"estimatedTokens":1100}}794{"id":"stack-79454279","source":"stackoverflow","questionId":79454279,"title":"How to use TailwindCSS v4 with spring boot and Java template Engine","tags":["spring","spring-boot","tailwind-css","tailwind-css-4","jte"],"text":"Title: How to use TailwindCSS v4 with spring boot and Java template Engine\nTags: spring, spring-boot, tailwind-css, tailwind-css-4, jte\nSource: Stack Overflow\n\nQuestion:\nI am using Spring boot application with Java template engine and when I did the setup for v3, a tailwind.config.js file was present to check for the JTE files as below:\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: ['../jte/**/*.jte'],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nHowever, With the v4 Tailwind CLI **there is no configuration for the `content` files**.\n\nThe script is not picking up the CSS class used in the JTE files\n\n**package.json**\n\n```\n\"scripts\": {\n \"build\": \"tailwindcss -i ./style.css -o ../resources/static/main.css --minify\",\n \"watch\": \"tailwindcss --watch -i ./style.css -o ../resources/static/main.css --watch\"\n}\n```\n\n**style.css** (now for v4)\n\n```\n@import \"tailwindcss\";\n```\n\n**v3 style.css**\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nWhen the build command is run **`npm run build` none of the tailwind CSS is working**.\n\n**login.jte**\n\n```\n\n ${csrfHiddenInput}\n\n \n User name\n \n \n \n Password\n \n \n\n \n \n Sign in\n \n \n\n```\n\n**Index.jte**\n\n```\n@param gg.jte.Content content\n\n \n \n Spring Security Demo\n \n\n ${content}\n\n```\n\nNone of the CSS are working.\n\n========================================\n\nTop Answer:\n**TLDR**:\n\n- a new separate CLI package is needed.\n\n- no source declaration is required;\n\n- there is no need for `tailwind.config.js` (but you can still use it, detailed below);\n\n- you don't need to use the `@tailwind` directives, instead use `@import 'tailwindcss';`;\n\n### Separate CLI package\n\nStarting from TailwindCSS v4, the required CLI and PostCSS code snippets have been separated into dedicated packages: `@tailwindcss/cli` and `@tailwindcss/postcss`. It looks like you'll need to install `@tailwindcss/cli` to properly use your build and watch commands.\n\nIn v4, Tailwind CLI lives in a dedicated `@tailwindcss/cli` package. Update any of your build commands to use the new package instead:\n\n```\nnpx @tailwindcss/cli -i input.css -o output.css\n```\n\n```\n\"scripts\": {\n \"build\": \"npx @tailwindcss/cli -i ./style.css -o ../resources/static/main.css --minify\",\n \"watch\": \"npx @tailwindcss/cli --watch -i ./style.css -o ../resources/static/main.css --watch\"\n}\n```\n\n- Using Tailwind CLI - TailwindCSS v3 to v4 upgrade guide\n\n- Use `npx @tailwindcss/cli` instead of `npx tailwindcss` #1955 - GitHub\n\n### There is no need to declare sources\n\nTailwindCSS v4 comes with automatic source detection, so there is no need to declare sources. The only paths excluded are those specified in `.gitignore`. For more details, see here:\n\n- Automatic Source Detection from TailwindCSS v4 - StackOverflow\n\n### Which files are scanned\n\nTailwind will scan every file in your project for class names, **except in the following cases**:\n\n- **Files that are in your `.gitignore` file**\n\n- Binary files like images, videos, or zip files\n\n- CSS files\n\n- Common package manager lock files\n\n- Setting your base path: `@import \"tailwindcss\" source(\"../src\");` - TailwindCSS v4 Docs\n\n- Disable automatic detection: `@import \"tailwindcss\" source(none);` - TailwindCSS v4 Docs\n\n**Note**: For example, it's important to pay attention if you want to load class names from a dependency. These are typically excluded from the repository with `.gitignore`, and TailwindCSS v4's automatic source detection is designed to exclude them as well. However, with the `@source` directive, you can override this. e.g. Yes, I don't request the `node_modules` folder because of `.gitignore`, but with `@source`, I specifically request the `node_modules/mypackage` folder.\n\n- `@source` directive - TailwindCSS v4 Docs\n\n### New CSS-first configuration\n\nThe `tailwind.config.js file` has been removed. Instead, a CSS-first configuration approach has been introduced, offering many useful new CSS directives.\n\n- Functions and directives - TailwindCSS v4 Docs\n\n- New CSS-first configuration option in v4 - StackOverflow\n\n- Problem installing TailwindCSS with Vite, after \"npx tailwindcss init -p\" command - StackOverflow\n\nHowever, you can still use the legacy JavaScript-based configuration with the `@config` directive (though content declaration is no longer needed in this case).\n\n- TailwindCSS v4 is backwards compatible with v3 - StackOverflow\n\n### Simpler CSS import\n\nThe `@tailwind` directives are deprecated and should be replaced with a single `@import \"tailwindcss\";`.\n\n- Removed @tailwind directives - TailwindCSS v3 to v4 upgrade guide\n\n- Removed @tailwind directives - StackOverflow\n\n### What's changed from TailwindCSS v4?\n\nThere have been several breaking changes besides these, which are not related to your question. These might also interest you:\n\n- Upgrade guide - TailwindCSS v3 to v4 upgrade guide\n\n- Cannot build frontend using TailwindCSS - StackOverflow\n\n========================================\n\nCode:\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: ['../jte/**/*.jte'],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```json\n\"scripts\": {\n \"build\": \"tailwindcss -i ./style.css -o ../resources/static/main.css --minify\",\n \"watch\": \"tailwindcss --watch -i ./style.css -o ../resources/static/main.css --watch\"\n}\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```html\n<form class=\"mt-8 space-y-6\" action=\"/login\" method=\"POST\">\n ${csrfHiddenInput}\n\n <div>\n <label>User name</label>\n <input name=\"username\" type=\"text\" required class=\"w-full px-4 py-2 border\"/>\n </div>\n <div>\n <label>Password</label>\n <input name=\"password\" type=\"password\" required class=\"w-full px-4 py-2 border\" />\n </div>\n\n\n <div>\n <button type=\"submit\"\n class=\"group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\">\n Sign in\n </button>\n </div>\n</form>\n```\n\n```html\n@param gg.jte.Content content\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Spring Security Demo</title>\n <link rel=\"stylesheet\" href=\"./main.css\">\n</head>\n<body class=\"bg-gray-100\">\n ${content}\n</body>\n</html>\n```\n\n```text\ncontent\n```\n\n```text\nnpm run build\n```\n\n```text\n@import \"tailwindcss\";\n@source \"../jte\"; /* Specify JTE templates location */\n```\n\n```text\nstyle.css\n```\n\n```text\nmain.css\n```\n\n```text\nnpm build\n```\n\n```text\nnpm watch\n```\n\n```none\nnpx @tailwindcss/cli -i input.css -o output.css\n```\n\n```json\n\"scripts\": {\n \"build\": \"npx @tailwindcss/cli -i ./style.css -o ../resources/static/main.css --minify\",\n \"watch\": \"npx @tailwindcss/cli --watch -i ./style.css -o ../resources/static/main.css --watch\"\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@tailwind\n```\n\n```text\n@import 'tailwindcss';\n```\n\n```text\n@tailwindcss/cli\n```\n\n```text\n@tailwindcss/postcss\n```\n\n```text\n@tailwindcss/cli\n```\n\n```text\n@tailwindcss/cli\n```\n\n```text\nnpx @tailwindcss/cli\n```\n\n```text\nnpx tailwindcss\n```\n\n```text\n.gitignore\n```\n\n```text\n.gitignore\n```\n\n```text\n@import \"tailwindcss\" source(\"../src\");\n```\n\n```text\n@import \"tailwindcss\" source(none);\n```\n\n```text\n.gitignore\n```\n\n```text\n@source\n```\n\n```text\nnode_modules\n```\n\n```text\n.gitignore\n```\n\n```text\n@source\n```\n\n```text\nnode_modules/mypackage\n```\n\n```text\n@source\n```\n\n```text\ntailwind.config.js file\n```\n\n```text\n@config\n```\n\n```text\n@tailwind\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n========================================\n\nComments:\n- I have multiple JTE location, how do I mention all the location. Can't we filter all the location that has .jte extension\n- TailwindCSS v4 comes with automatic source detection, so this is not necessary unless you have excluded all paths in the .gitignore file.\n- @SanJaisy - Is that a multi-module project? Can you please the structure or the code so that I can take a look?\n- @VijayKumar, its not a multi-module, however, I do have lots of folders and files in same project. How do I refer all the pages on different directory","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":39,"totalLines":390,"estimatedTokens":2056}}795{"id":"stack-75882642","source":"stackoverflow","questionId":75882642,"title":"Tailwind not working after install nextjs 13","tags":["reactjs","next.js","tailwind-css"],"text":"Title: Tailwind not working after install nextjs 13\nTags: reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have installed Tailwind many times using same steps since nextjs 13 came out been having issues.\n\nThis is my package.json file To reproduce I used `npx create-next-app@latest` and followed the tailwind doc to install nextjs.\n\nThis is my json file\n\n```\n{\n \"name\": \"fullstack\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },\n \"dependencies\": {\n \"eslint\": \"8.37.0\",\n \"eslint-config-next\": \"13.2.4\",\n \"next\": \"13.2.4\",\n \"react\": \"18.2.0\",\n \"react-dom\": \"18.2.0\"\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.14\",\n \"postcss\": \"^8.4.21\",\n \"tailwindcss\": \"^3.3.0\"\n }\n}\n```\n\n```\nmodule.exports = {\n content: [\n \"./app/**/*.{js,ts,jsx,tsx}\",\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n} ```\n\n This is my tailwind config file\n```\n\n========================================\n\nCode:\n```text\n{\n \"name\": \"fullstack\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },\n \"dependencies\": {\n \"eslint\": \"8.37.0\",\n \"eslint-config-next\": \"13.2.4\",\n \"next\": \"13.2.4\",\n \"react\": \"18.2.0\",\n \"react-dom\": \"18.2.0\"\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.14\",\n \"postcss\": \"^8.4.21\",\n \"tailwindcss\": \"^3.3.0\"\n }\n}\n```\n\n```text\nmodule.exports = {\n content: [\n \"./app/**/*.{js,ts,jsx,tsx}\",\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n} ```\n\n This is my tailwind config file\n```\n\n```text\nnpx create-next-app@latest\n```\n\n```bash\nnpm install -D tailwindcss postcss autoprefixer\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./app/**/*.{js,ts,jsx,tsx}\",\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./src/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nglobal.css\n```\n\n```text\npages/_app.js\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":139,"estimatedTokens":583}}796{"id":"stack-74011013","source":"stackoverflow","questionId":74011013,"title":"Email warning showing even when field is empty using peer-invalid of tailwind in react. How to fix it?","tags":["javascript","reactjs","tailwind-css"],"text":"Title: Email warning showing even when field is empty using peer-invalid of tailwind in react. How to fix it?\nTags: javascript, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nSo I'm making a sign up form for a website that uses react and tailwindcss. For email field, I wanna see if the email is valid or not. So i used the native tailwind **peer-{modifier}** for it.\nCode:\n\n```\n\n \n Email address\n \n setEmail(e.target.value)}\n />\n \n Please provide a valid email address.\n \n\n```\n\nScreenshot:\n\nhttps://i.sstatic.net/xzr5Y.png\n\nit shows this error message even when there's nothing entered yet. How do i fix it?\n\n========================================\n\nTop Answer:\nTry to use `$v.user.email.$error` condition to avoid the error that is showing even if the fields are empty at starting.\n\n```\n\n Email is required\n\n```\n\nSource: https://stackoverflow.com/a/65151936/13680835\n\n========================================\n\nCode:\n```text\n<div className='flex w-full flex-col space-y-2'>\n <label htmlFor='email' className='text-sm text-gray-600'>\n Email address\n </label>\n <input\n type='email'\n id='email'\n autoComplete='email'\n required\n className='peer relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n invalid:border-pink-500 invalid:text-pink-600\n focus:invalid:border-pink-500 focus:invalid:ring-pink-500'\n value={email}\n onChange={e => setEmail(e.target.value)}\n />\n <p className=\"mt-2 invisible peer-invalid:visible text-pink-600 text-sm\">\n Please provide a valid email address.\n </p>\n</div>\n```\n\n```text\n{!isEmailValid(value) && <p className=\"mt-2 text-pink-600 text-sm\">\n Please provide a valid email address.\n</p>}\n// ...\nconst isEmailValid = (email: string) => {\n if (email.length === 0) return true;\n // other checks here\n return false;\n}\n```\n\n```text\n<input className=\"peer ...\" ... placeholder=\"Your email address...\" />\n<p className=\"mt-2 invisible peer-placeholder-shown:!invisible peer-invalid:visible text-pink-600 text-sm\">\n Please provide a valid email address.\n</p>\n```\n\n```text\nrequired\n```\n\n```text\nrequired\n```\n\n```text\ninput\n```\n\n```text\ninput\n```\n\n```text\npeer-placeholder-shown\n```\n\n```text\npeer-placeholder-shown\n```\n\n```text\n<p class=\"mt-2 text-sm text-red-600\" v-if=\"$v.user.email.$error\">\n Email is required\n</p>\n```\n\n```text\n$v.user.email.$error\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":11,"totalLines":117,"estimatedTokens":676}}797{"id":"stack-73566007","source":"stackoverflow","questionId":73566007,"title":"How to change the locale in Flowbite datepicker?","tags":["javascript","datepicker","tailwind-css","flowbite"],"text":"Title: How to change the locale in Flowbite datepicker?\nTags: javascript, datepicker, tailwind-css, flowbite\nSource: Stack Overflow\n\nQuestion:\nUnfortunately the Flowbite Datepicker Documentation has no instruction on how to use another locale, but the support is there.\n\nThis is how I implemented the datepicker (working):\n\n```\nimport Datepicker from \"flowbite-datepicker/Datepicker\";\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n document.querySelectorAll(\"[datepicker]\").forEach(function (datepickerEl) {\n new Datepicker(datepickerEl);\n });\n});\n```\n\nand this is how I try to get the locale to work:\n\n```\nimport Datepicker from \"flowbite-datepicker/Datepicker\";\nimport { locales } from \"../../node_modules/flowbite-datepicker/js/i18n/base-locales.js\";\nimport de from \"../../node_modules/flowbite-datepicker/js/i18n/locales/de.js\";\n\nlocales.de = de;\n\nconst datepickerOptions = {\n language: \"de\",\n weekStart: 1,\n};\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n document.querySelectorAll(\"[datepicker]\").forEach(function (datepickerEl) {\n const d = new Datepicker(datepickerEl);\n d.setOptions(datepickerOptions);\n });\n});\n```\n\nBut my modular Javascript understanding is too poor to get this right. This is the file to reference the original code. Should be straight forward for someone with more experience.\n\n========================================\n\nTop Answer:\nI found out that flowbite-datepicker is forked from vanillajs-datepicker, and after checking their docs I got the following code to work:\n\n```\nimport Datepicker from \"flowbite-datepicker/Datepicker\";\nimport ja from \"flowbite-datepicker/locales/ja\";\n\nconst datepickerEl = document.getElementById(\"datepickerId\");\nObject.assign(Datepicker.locales, ja);\nconst datePicker = new Datepicker(datepickerEl, {\n language: 'ja',\n});\n```\n\n========================================\n\nCode:\n```js\nimport Datepicker from \"flowbite-datepicker/Datepicker\";\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n document.querySelectorAll(\"[datepicker]\").forEach(function (datepickerEl) {\n new Datepicker(datepickerEl);\n });\n});\n```\n\n```js\nimport Datepicker from \"flowbite-datepicker/Datepicker\";\nimport { locales } from \"../../node_modules/flowbite-datepicker/js/i18n/base-locales.js\";\nimport de from \"../../node_modules/flowbite-datepicker/js/i18n/locales/de.js\";\n\nlocales.de = de;\n\nconst datepickerOptions = {\n language: \"de\",\n weekStart: 1,\n};\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n document.querySelectorAll(\"[datepicker]\").forEach(function (datepickerEl) {\n const d = new Datepicker(datepickerEl);\n d.setOptions(datepickerOptions);\n });\n});\n```\n\n```text\nlocales.de = de\n```\n\n```text\nDatepicker.locales.de = de\n```\n\n```text\nimport Datepicker from \"flowbite-datepicker/Datepicker\";\nimport ja from \"flowbite-datepicker/locales/ja\";\n\nconst datepickerEl = document.getElementById(\"datepickerId\");\nObject.assign(Datepicker.locales, ja);\nconst datePicker = new Datepicker(datepickerEl, {\n language: 'ja',\n});\n```\n\n========================================\n\nComments:\n- Have you tried passing in `locale` in `datepickerOptions`? const datepickerOptions = { language: \"de\", weekStart: 1, locale:de }; You can do something like new Datepicker(datepickerEl, datepickerOptions)\n- Can you also provide the code of the HTML parts?\n- It's working with `Datepicker.locales.de = de.de`. Thanks!","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":117,"estimatedTokens":851}}798{"id":"stack-71726596","source":"stackoverflow","questionId":71726596,"title":"Items in Flexbox get Squished due to Full Width Item","tags":["css","tailwind-css"],"text":"Title: Items in Flexbox get Squished due to Full Width Item\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a flexbox which consists of one input box and two circular divs. I want the input field to take up all the space that the circle divs don't need, hence I assigned it a `w-full`.\n\nHowever, the input field takes up more space than it should and in effect causes the divs to be squished and not correct circles.\n\n**Image:**\nhttps://i.sstatic.net/6FSaF.png\n\n**Code:**\n\n```\n\n \n \n \n\n```\n\n**Tailwind Play Environment**\n\n========================================\n\nCode:\n```text\n<div class=\"flex w-full p-3 gap-x-2 items-center bg-red-100\">\n <input class=\"w-full h-10 p-2 bg-orange-50 outline-none\"></input>\n <div class=\"w-9 h-9 rounded-full bg-blue-100\"> </div>\n <div class=\"w-9 h-9 rounded-full bg-green-100\"></div>\n</div>\n```\n\n```text\nw-full\n```\n\n```text\n<input class=\"grow h-10 p-2 bg-orange-50 outline-none\"></input>\n```\n\n========================================\n\nComments:\n- If you zoom in on the image on the two circles, you'll see they're not perfect circles. Furthermore, if inspecting the circle divs in the taillwind play environment shows you that each has dimensions `32.23px * 36px`\n- you need flex-shrink:0 to the div element","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":48,"estimatedTokens":315}}799{"id":"stack-70345866","source":"stackoverflow","questionId":70345866,"title":"Tailwind: equal height columns","tags":["html","css","flexbox","tailwind-css"],"text":"Title: Tailwind: equal height columns\nTags: html, css, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have 3 columns that each contain a persons image, name, function and a quote. I want all 3 columns to be equal in height.\n\nSo far i have tried setting p class=\"flex-1\" which did nothing, i also changed the 2nd inner div to class=\"flex flex-1 p-6 gap-y-4\". This did make the columns equal in height, but it made the div a row instead of a column, if i use flex-1 together with flex-col it does not set the columns equal in height.\n\nHow can achieve said behaviour without using a static height in tailwind?\n\n**HTML**\n\n```\n\n \n \n \n \n \n\n### {{employee?.name}}\n\n \n\n### {{employee?.function}}\n\n \n\n \n\n```\n\n========================================\n\nTop Answer:\nYou can use a `flex` wrapper instead of using `grid` and specifying columns count.\n\n\r\n\r\n\n```\n\n \n \n Image\n \n \n \n\n### Employee Name\n\n \n\n### Employee Function\n\n Employee Quote\n\n \n \n \n \n Image\n \n \n \n\n### Employee Name\n\n \n\n### Employee Function\n\n Employee Quote\n\n \n \n \n\n### Employee Name\n\n \n\n### Employee Function\n\n Employee Quote\n\n \n \n \n \n Image\n \n \n \n\n### Employee Name\n\n \n\n### Employee Function\n\n Employee Quote\n\n \n \n\n```\n\n========================================\n\nCode:\n```text\n<div class=\"flex flex-col\">\n <div class=\"w-full\">\n <img class=\"h-full w-full\" [src]=\"'/api'\" alt=\"employee image\">\n </div>\n <div class=\"flex flex-col p-6 gap-y-4 text-center bg-indigo-300\">\n <h3 class=\"text-3xl font-bold text-white\">{{employee?.name}}</h3>\n <h4 class=\"text-lg uppercase text-black\">{{employee?.function}}</h4>\n <p class=\"text-center text-xl font-bold text-black\" [innerHtml]=\"employee?.quote\"></p>\n </div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"grid grid-cols-3 gap-3\">\n <div class=\"flex flex-col\">\n <div>\n <div class=\"h-20 bg-slate-400\">Image</div>\n </div>\n <div class=\"flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto\">\n <h3 class=\"text-3xl font-bold text-white\">Employee Name</h3>\n <h4 class=\"text-lg uppercase text-black\">Employee Function</h4>\n <p class=\"text-center text-xl font-bold text-black\">Employee Quote</p>\n </div>\n </div>\n <div class=\"flex flex-col\">\n <div>\n <div class=\"h-20 bg-slate-400\">Image</div>\n </div>\n <div class=\"flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto\">\n <h3 class=\"text-3xl font-bold text-white\">Employee Name</h3>\n <h4 class=\"text-lg uppercase text-black\">Employee Function</h4>\n <p class=\"text-center text-xl font-bold text-black\">Employee Quote</p>\n </div>\n <div class=\"flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto\">\n <h3 class=\"text-3xl font-bold text-white\">Employee Name</h3>\n <h4 class=\"text-lg uppercase text-black\">Employee Function</h4>\n <p class=\"text-center text-xl font-bold text-black\">Employee Quote</p>\n </div>\n </div>\n <div class=\"flex flex-col\">\n <div>\n <div class=\"h-20 bg-slate-400\">Image</div>\n </div>\n <div class=\"flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto\">\n <h3 class=\"text-3xl font-bold text-white\">Employee Name</h3>\n <h4 class=\"text-lg uppercase text-black\">Employee Function</h4>\n <p class=\"text-center text-xl font-bold text-black\">Employee Quote</p>\n </div>\n </div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"flex gap-3\">\n <div class=\"flex flex-col w-full\">\n <div>\n <div class=\"h-20 bg-slate-400\">Image</div>\n </div>\n <div class=\"flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto\">\n <h3 class=\"text-3xl font-bold text-white\">Employee Name</h3>\n <h4 class=\"text-lg uppercase text-black\">Employee Function</h4>\n <p class=\"text-center text-xl font-bold text-black\">Employee Quote</p>\n </div>\n </div>\n <div class=\"flex flex-col w-full\">\n <div>\n <div class=\"h-20 bg-slate-400\">Image</div>\n </div>\n <div class=\"flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto\">\n <h3 class=\"text-3xl font-bold text-white\">Employee Name</h3>\n <h4 class=\"text-lg uppercase text-black\">Employee Function</h4>\n <p class=\"text-center text-xl font-bold text-black\">Employee Quote</p>\n </div>\n <div class=\"flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto\">\n <h3 class=\"text-3xl font-bold text-white\">Employee Name</h3>\n <h4 class=\"text-lg uppercase text-black\">Employee Function</h4>\n <p class=\"text-center text-xl font-bold text-black\">Employee Quote</p>\n </div>\n </div>\n <div class=\"flex flex-col w-full\">\n <div>\n <div class=\"h-20 bg-slate-400\">Image</div>\n </div>\n <div class=\"flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto\">\n <h3 class=\"text-3xl font-bold text-white\">Employee Name</h3>\n <h4 class=\"text-lg uppercase text-black\">Employee Function</h4>\n <p class=\"text-center text-xl font-bold text-black\">Employee Quote</p>\n </div>\n </div>\n</div>\n```\n\n```text\nflex\n```\n\n```text\ngrid\n```\n\n========================================\n\nComments:\n- You are right that i should have mentioned the html snippet is a seperate component loaded into another component which has a grid layout with 3 columns, as you already suggested. That said, this is the exact same code just wrapped into a grid and does not address the issue / question asked.\n- Intrinsically, all elements of the grid have same height, which is why I thought my answer was enough. I edited my answer, adding flex-auto to each card and adding a card to the second column to illustrate how each column has same height.","metadata":{"transformedAt":"2026-08-18T18:33:42.945Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":222,"estimatedTokens":1416}}800{"id":"stack-72568312","source":"stackoverflow","questionId":72568312,"title":"tailwind dark mode isn't extending fully when scrolling all the way on page","tags":["css","next.js","tailwind-css","darkmode"],"text":"Title: tailwind dark mode isn't extending fully when scrolling all the way on page\nTags: css, next.js, tailwind-css, darkmode\nSource: Stack Overflow\n\nQuestion:\nusing dark mode in a nextjs web app with tailwind, when scrolling, if you scroll past the scroll container (almost like your bouncing off the bottom or top of the page when scrolling), the dark mode isn't extending all the way, so the color isn't applying and it's just the previous color underneath (white in this case), what is the reason for this and is there a way to extend the dark mode fully?\n\nBrowsers that don't work\n\n- Firefox\n\n- Brave\n\n- Chrome\n\nBrowsers that do work\n\n- Safari\n\nstackoverflow and tailwindcss.com in dark mode handle this well and the dark mode extends fully on the whole page\n\n`_app.tsx`\n\n```\n\n \n \n \n \n \n \n \n {\" \"}\n```\n\n========================================\n\nTop Answer:\nI was running into the same problem. Turns out it was because my dark background/foreground color styling was on a React component (a container layout component) rather than being on the body element.\n\nI fixed it by setting the dark background/foreground directly on the body element in my css file:\n\n```\n@layer base {\n body {\n @apply dark:bg-slate-800 dark:text-white;\n }\n}\n```\n\nThen in your pages/_app.jsx file or wherever, you can call `document.documentElement.classList.add(\"dark\");` and the dark mode will be set properly even on scroll.\n\nhttps://tailwindcss.com/docs/dark-mode\n\n========================================\n\nCode:\n```text\n<Store state={state} dispatch={dispatch}>\n <Head>\n <meta charSet=\"UTF-8\" />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1.0\"\n />\n </Head>\n <div className=\"h-screen dark dark:bg-black dark:text-white overscroll-auto lg:overscroll-contain\">\n <Component {...pageProps} id=\"app\" />\n </div>\n </Store>{\" \"}\n```\n\n```text\n_app.tsx\n```\n\n```css\n@tailwind base;\n\n@layer base {\n :root {\n @apply dark:bg-black dark:text-white;\n }\n}\n```\n\n```js\nimport { Html, Head, Main, NextScript } from 'next/document'\n\nexport default function Document() {\n return (\n <Html className=\"dark:bg-black dark:text-white\">\n <Head />\n <body>\n <Main />\n <NextScript />\n </body>\n </Html>\n )\n}\n```\n\n```text\nbody\n```\n\n```text\n:root\n```\n\n```text\nHTML\n```\n\n```text\n:root\n```\n\n```text\nbody\n```\n\n```text\nhtml\n```\n\n```text\n@layer base {\n body {\n @apply dark:bg-slate-800 dark:text-white;\n }\n}\n```\n\n```text\ndocument.documentElement.classList.add(\"dark\");\n```\n\n```text\nimport React from 'react'\nimport { Html, Head, Main, NextScript } from 'next/document'\n\nexport default function Document() {\n return (\n <Html id=\"html\" className=\"bg-white\">\n <Head />\n <body className=\"bg-bg-light dark:bg-bg-dark\">\n <Main />\n <NextScript />\n </body>\n </Html>\n )\n}\n```\n\n```text\nuseEffect(() => {\n\n if (darkMode !== undefined) {\n if (darkMode) {\n document.body.classList.add(\"dark\");\n document.getElementById(\"html\").classList.add(\"bg-black\")\n } else if (!darkMode) {\n document.body.classList.remove(\"dark\");\n document.getElementById(\"html\").classList.remove(\"bg-black\")\n }\n }\n}, [darkMode])\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":169,"estimatedTokens":837}}801{"id":"stack-70352572","source":"stackoverflow","questionId":70352572,"title":"How to reduce the clickable area for with Tailwind CSS","tags":["css","tailwind-css"],"text":"Title: How to reduce the clickable area for with Tailwind CSS\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using Tailwind CSS and I recently created a link using ``, `` and ``. But the clickable area from `` tag is bigger than I want, I just want in the text, but the box are in div.\n\nI'll show my code:\n\n```\n\n \n \n Back to login\n\n \n\n```\n\n Here's how it's going: \nhttps://i.sstatic.net/Gc8TN.png\n\n========================================\n\nCode:\n```html\n<div class=\"mt-5\">\n <a :href=\"route('login')\" class=\"flex justify-center\">\n <img src=\"../../Assets/Img/menorq.svg\" class=\"w-4 h-4 mt-1\" alt=\"\">\n <p class=\"text-purple-600\">Back to login</p>\n </a>\n</div>\n```\n\n```text\n<a>\n```\n\n```text\n<p>\n```\n\n```text\n<div>\n```\n\n```text\n<a>\n```\n\n```text\n<div class=\"mt-5 text-center\">\n <a :href=\"route('login')\" class=\"inline-flex align-center\">\n <img src=\"../../Assets/Img/menorq.svg\" class=\"w-4 h-4 mt-1\" alt=\"\">\n <p class=\"text-purple-600\">Back to login</p>\n </a>\n</div>\n```\n\n```text\ninline-flex\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":62,"estimatedTokens":255}}802{"id":"stack-69815613","source":"stackoverflow","questionId":69815613,"title":"tailwind - position icon left within a tag where text is centered","tags":["html","css","flexbox","tailwind-css"],"text":"Title: tailwind - position icon left within a tag where text is centered\nTags: html, css, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to position icon to the left side of a Link and have the text centered at the same time.\n\n```\n\n \n \n \n Some random text \n\n \n\n```\n\nWith this the icon is in the middle with the text. I can push to the right with margin left but then it is not dynamic. Any idea how I can push the icon to the left and it remains dynamic?\n\n========================================\n\nCode:\n```text\n<div className=\"max-w-screen-2xl mx-auto sm:px-6 lg:px-8\">\n <Link\n href=\"#\"\n className=\"px-6 py-3 mt-2 flex justify-center text-center\"\n >\n <DocumentTextIcon\n className=\"ml-1 mt-1 -mr-1 h-10 w-10\"\n aria-hidden=\"true\"\n />\n <p>\n Some random text </p>\n </Link>\n</div>\n```\n\n```text\n<div class=\"my-10 flex items-center justify-center bg-gray-100 w-40\">\n <div class=\"flex-1\">\n <span class=\"mr-auto\">icon</span>\n </div>\n <p>text</p>\n <div class=\"flex-1\"></div>\n</div>\n\n<div class=\"my-10 flex items-center justify-center bg-gray-100 w-80\">\n <div class=\"flex-1\">\n <span class=\"mr-auto\">icon</span>\n </div>\n <p>with long text</p>\n <div class=\"flex-1\"></div>\n</div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":56,"estimatedTokens":309}}803{"id":"stack-69922053","source":"stackoverflow","questionId":69922053,"title":"Tailwind text color not changing on hover","tags":["css","reactjs","hover","tailwind-css","textcolor"],"text":"Title: Tailwind text color not changing on hover\nTags: css, reactjs, hover, tailwind-css, textcolor\nSource: Stack Overflow\n\nQuestion:\nI'm trying to get the text color in a button to change when I hover over it but it doesn't work...\nMy React code is this\n\n\r\n\r\n\n```\nSign Up\n```\n\n\r\n\r\n\r\n\nand my tailwind config file looks like this\n\n\r\n\r\n\n```\nconst colors = require(\"tailwindcss/colors\");\n\nmodule.exports = {\n purge: [],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n colors: {\n light: \"#e2f3f5\",\n teal: \"#22d1ee\",\n blue: \"#3d5af1\",\n dark: \"#0e153a\",\n },\n },\n },\n variants: {\n extend: {\n fontSize: [\"hover\", \"focus\"],\n backgroundOpacity: [\"active\"],\n borderWidth: [\"hover\", \"focus\"],\n textColor: [\n \"responsive\",\n \"dark\",\n \"group-hover\",\n \"focus-within\",\n \"hover\",\n \"focus\",\n ],\n },\n },\n plugins: [],\n};\n```\n\n\r\n\r\n\r\n\nYet the text color does not change on hover. Can someone please help me?\n\n========================================\n\nCode:\n```html\n<button className=\"px-4 py-2 bg-blue-500 text-light hover:bg-light hover:border-2 hover:border-blue-500 hover:text-blue-500\">Sign Up</button>\n```\n\n```js\nconst colors = require(\"tailwindcss/colors\");\n\nmodule.exports = {\n purge: [],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n colors: {\n light: \"#e2f3f5\",\n teal: \"#22d1ee\",\n blue: \"#3d5af1\",\n dark: \"#0e153a\",\n },\n },\n },\n variants: {\n extend: {\n fontSize: [\"hover\", \"focus\"],\n backgroundOpacity: [\"active\"],\n borderWidth: [\"hover\", \"focus\"],\n textColor: [\n \"responsive\",\n \"dark\",\n \"group-hover\",\n \"focus-within\",\n \"hover\",\n \"focus\",\n ],\n },\n },\n plugins: [],\n};\n```\n\n```text\n...\ntheme: {\n extend: {\n colors: {\n light: \"#e2f3f5\",\n teal: \"#22d1ee\",\n dark: \"#0e153a\",\n blue: {\n 'DEFAULT': '#f00'\n }\n },\n },\n },\n...\n```\n\n```text\nbg-blue-500\n```\n\n```text\nbg-blue\n```\n\n```text\nbg-blue-[xxx]\n```\n\n```text\nDEFAULT\n```\n\n```text\nbg-blue\n```\n\n========================================\n\nComments:\n- I implemented your changes and as long as I have text-light, the text color doesnt change when hovering. When I put the text color to anything other than the custom defined color (ie text-green-500), the text color does change upon hover, but not when I use a custom color such as text-dark, text-teal etc. Even though it works in your example... Any idea why?\n- Actually never mind, I had some old CSS code that was causing the problem, once I removed it the problem dissapeared. Thanks for your answer!\n- Good to hear you got it sorted!","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":150,"estimatedTokens":716}}804{"id":"stack-69925543","source":"stackoverflow","questionId":69925543,"title":"Change color of button using css or tailwind","tags":["html","css","tailwind-css"],"text":"Title: Change color of button using css or tailwind\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\ni am trying to change color on buttons when main button is clicked, one color is changing why the other buttons color is not changing, is it because it's outside main `` how can i achieve it, without removing any div.\n\n**code**\n\n\r\n\r\n\n```\nbutton.one:focus~div.two {\n background-color: rgba(185, 28, 28, 1);\n}\n```\n\n\r\n\n```\n\nMAIN BUTTON\n\nRED\n\nMAKE THIS RED TOO\n```\n\n========================================\n\nCode:\n```css\nbutton.one:focus~div.two {\n background-color: rgba(185, 28, 28, 1);\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\" />\n\n\n<div>\n\n<button class=\"one bg-red-400 font-bold px-4 py-4 rounded-lg\">MAIN BUTTON</button>\n\n<div class=\"two bg-blue-400 font-bold px-4 py-4 rounded-lg\">RED\n</div>\n\n</div>\n\n<div class=\"two bg-blue-400 font-bold px-4 py-4 rounded-lg\">MAKE THIS RED TOO</div>\n```\n\n```text\n<div>\n```\n\n```css\ndiv[tabindex=\"0\"] {\n display: inline-block;\n outline: none;\n cursor: pointer;\n z-index: 1;\n}\n\ndiv:focus .two,\ndiv:focus~.two {\n background-color: rgba(185, 28, 28, 1);\n}\n\ndiv[tabindex=\"0\"] > button {\n pointer-events: none;\n}\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\" />\n\n\n<div tabindex=\"0\" role=\"button\" aria-label=\"MAIN BUTTON\">\n\n <button aria-hidden=\"true\" class=\"one bg-red-400 font-bold px-4 py-4 rounded-lg\">MAIN BUTTON</button>\n\n <div class=\"two bg-blue-400 font-bold px-4 py-4 rounded-lg\">RED\n </div>\n\n</div>\n\n<div class=\"two bg-blue-400 font-bold px-4 py-4 rounded-lg\">MAKE THIS RED TOO</div>\n```\n\n```text\nbutton\n```\n\n```text\ndiv\n```\n\n```text\nbutton\n```\n\n```text\npointer-events: none\n```\n\n```text\naria-hidden=\"true\"\n```\n\n```text\nbutton\n```\n\n```text\naria-label=\"MAIN BUTTON\"\n```\n\n```text\nrole=\"button\" to the parent\n```\n\n```text\n, so that screen readers can treat the\n```\n\n```text\ncursor: pointer\n```\n\n```text\ndiv\n```\n\n```text\nCSS\n```\n\n```text\ntabindex=\"0\"\n```\n\n```text\ndiv\n```\n\n```text\n~\n```\n\n```text\ndiv\n```\n\n```text\ninline\n```\n\n```text\ninline-block\n```\n\n========================================\n\nComments:\n- when i click on main button/first button nothing is changing?\n- @Fayakon I updated my answer for you. Sorry for the issue.\n- Thankyou, can you please tell/fix why it's not working if i add one div above tab index; play.tailwindcss.com/PnAJCarYYz\n- @Fayakon Your `HTML` is different there than what you included in your question. Also, your `CSS` was working at all at the tailwind sandbox. Have a look at this: play.tailwindcss.com/H61nnozDBn\n- it's working, but when i add one extra div above tab index why it stops working?play.tailwindcss.com/PnAJCarYYz\n- @Fayakon The general sibling combinator (`~`) can only find sibling elements. As of today, `CSS` can't travel up in the DOM to parent elements.","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":23,"totalLines":173,"estimatedTokens":721}}805{"id":"stack-67963274","source":"stackoverflow","questionId":67963274,"title":"SVGs in React & Tailwind CSS — fill: \"currentColor\" not working","tags":["reactjs","svg","tailwind-css"],"text":"Title: SVGs in React & Tailwind CSS — fill: \"currentColor\" not working\nTags: reactjs, svg, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to get an SVG to change color on dark mode with Tailwind CSS. This means I have to set the SVG's fill color using a class like `text-white` (which translates to `--tw-text-opacity: 1; color: rgba(255, 255, 255, var(--tw-text-opacity));` in pure CSS). Then I can add another Tailwind class like `dark:text-black`, which should make the SVG black when the user enables dark mode.\n\nHowever, even when the SVG is properly formatted to use `fill: currentColor`, the fill does not match the currentColor (the text color) of the parent element (an `img` tag).\n\nWhat am I doing wrong?\n\n### HTML\n\n```\n\n```\n\n### SVG\n\n```\n\n .currentColorFill{fill:currentColor !important;}\n\n \n \n\n```\n\n========================================\n\nCode:\n```html\n<img\n className=\"w-auto h-12 mx-auto mt-12 text-black rounded-full p-x4 dark:text-white\"\n src=\"/brand/cerebrum-full.svg\"\n/>\n```\n\n```text\n<style type=\"text/css\">\n .currentColorFill{fill:currentColor !important;}\n</style>\n<g>\n <path\n className=\"currentColorFill\"\n d=\"M284.6,124.1v-0.2c0-23.8,17.9-43.3,43.6-43.3c15.8,0,25.2,5.3,33,12.9l-11.7,13.5c-6.5-5.9-13-9.4-21.4-9.4\n c-14.1,0-24.3,11.7-24.3,26v0.2c0,14.3,9.9,26.3,24.3,26.3c9.6,0,15.4-3.8,22-9.8l11.7,11.8c-8.6,9.2-18.2,14.9-34.3,14.9\n C302.9,167.2,284.6,148.2,284.6,124.1z\"\n />\n <path class=\"currentColorFill\" d=\"M412.3,25.5h3.4v6c1.7-3.8,5-6.6,9.3-6.4v3.7h-0.3c-5,0-9.1,3.6-9.1,10.5v9.1h-3.4V25.5z\"/>\n\n</g>\n```\n\n```text\ntext-white\n```\n\n```text\n--tw-text-opacity: 1; color: rgba(255, 255, 255, var(--tw-text-opacity));\n```\n\n```text\ndark:text-black\n```\n\n```text\nfill: currentColor\n```\n\n```text\nimg\n```\n\n```text\nimport AcmeLogo from \"components/AcmeLogo.js\";\n\n<AcmeLogo className=\"w-auto h-12 mx-auto mt-12 text-black p-x4 dark:text-white\" />\n```\n\n```text\nAcmeLogo.svg\n```\n\n```text\nAcmeLogo.svg\n```\n\n```text\nnpm install -g svg-to-react-cli\n```\n\n```text\nsvgtoreact <PATH_TO_SVG> <PATH_TO_EXPORT_REACT COMPONENT>\n```\n\n```text\nsvgtoreact /path/to/AcmeLogo.svg /path/to/AcmeLogo.js\n```\n\n```text\nAcmeLogo.js\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":103,"estimatedTokens":541}}806{"id":"stack-65683583","source":"stackoverflow","questionId":65683583,"title":"Why is tailwind css having no effect?","tags":["tailwind-css","parceljs"],"text":"Title: Why is tailwind css having no effect?\nTags: tailwind-css, parceljs\nSource: Stack Overflow\n\nQuestion:\nNo errors, but Tailwind doesn't apply any style:\n\npackage.json\n\n```\n\"dependencies\": {\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.0.2\",\n \"vue\": \"^3.0.5\"\n},\n\"devDependencies\": {\n \"autoprefixer\": \"^9.8.6\",\n \"parcel-bundler\": \"^1.12.4\",\n \"postcss\": \"^7.0.35\",\n \"@vue/cli\": \"^5.0.0-alpha.2\"\n},\n```\n\npostcss.config.js\n\n```\nmodule.exports = \n{\n plugins: \n {\n tailwindcss: {},\n autoprefixer: {}\n }\n}\n```\n\ntailwind.config.js\n\n```\nmodule.exports = \n{\n purge: [],\n darkMode: 'class', // or 'media' or 'class'\n theme: \n {\n extend: {},\n },\n variants: \n {\n extend: {},\n },\n plugins: [],\n}\n```\n\nindex.html\n\n```\n\n \n \n \n\n \n \n hello world\n \n\n```\n\nmain.css\n\n```\n@import \"../../node_modules/tailwindcss/base.css\";\n@import \"../../node_modules/tailwindcss/components.css\";\n@import \"../../node_modules/tailwindcss/utilities.css\";\n```\n\nBuilt using: `node ./node_modules/.bin/parcel src/index.html`\n\n========================================\n\nCode:\n```json\n\"dependencies\": {\n \"tailwindcss\": \"npm:@tailwindcss/postcss7-compat@^2.0.2\",\n \"vue\": \"^3.0.5\"\n},\n\"devDependencies\": {\n \"autoprefixer\": \"^9.8.6\",\n \"parcel-bundler\": \"^1.12.4\",\n \"postcss\": \"^7.0.35\",\n \"@vue/cli\": \"^5.0.0-alpha.2\"\n},\n```\n\n```js\nmodule.exports = \n{\n plugins: \n {\n tailwindcss: {},\n autoprefixer: {}\n }\n}\n```\n\n```js\nmodule.exports = \n{\n purge: [],\n darkMode: 'class', // or 'media' or 'class'\n theme: \n {\n extend: {},\n },\n variants: \n {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <link rel=\"stylesheet\" href=\"css/main.css\">\n</head>\n<body class=\"dark bg-gray-100\"> \n <div class='app' id='app' class=\"bg-red-500\">\n <div class=\"text-gray-50\">hello world</div>\n </div>\n</body>\n</html>\n```\n\n```css\n@import \"../../node_modules/tailwindcss/base.css\";\n@import \"../../node_modules/tailwindcss/components.css\";\n@import \"../../node_modules/tailwindcss/utilities.css\";\n```\n\n```text\nnode ./node_modules/.bin/parcel src/index.html\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nnode_modules\n```\n\n```text\n@tailwind\n```\n\n```text\nnpx parcel src/index.html\n```\n\n```text\n@tailwind\n```\n\n```text\n@import\n```\n\n```text\n@tailwind\n```\n\n========================================\n\nComments:\n- Thanks so much for helping! Doesn't work yet though, still no style, it's still not seeing the Tailwind files for some reason. For instance, in my css file: `@tailwind \"NoNSeNsE\";` builds without error. As does `@tailwind \"../../node_modules/tailwindcss/base\";` and `@tailwind \"base\";`. Is there a verbose way to debug Tailwind or Parcel so I can see exactly what file it's trying to find?\n- Oh lol, I had \" quotes and you didn't. It works now. Thank you kind sir!","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":184,"estimatedTokens":745}}807{"id":"stack-61905389","source":"stackoverflow","questionId":61905389,"title":"custom default styles have been removed by PurgeCSS in nuxt-tailwindcss","tags":["nuxt.js","tailwind-css","css-purge"],"text":"Title: custom default styles have been removed by PurgeCSS in nuxt-tailwindcss\nTags: nuxt.js, tailwind-css, css-purge\nSource: Stack Overflow\n\nQuestion:\nIn my SSR Nuxt.js project, I am using Nuxt offical tailwindcss-module\n\nI coded a default style for `` tags like below.\n\n**/assets/scss/app.scss**\n\n```\na{\n color: color(\"blue\", \"base\");\n transition: color .3s ease;\n\n &:hover,&:active{\n color: color(\"blue\", \"darken-4\");\n }\n}\n```\n\n**pages/index.vue**\n\n```\n\n Login\n\n```\n\n**nuxt.config.js**\n\n```\nbuildModules:['@nuxtjs/tailwindcss'],\n css:['@/assets/scss/app.scss']\n```\n\nWhen I run `npm run dev`, the PurgeCSS would not work, so the result is what I expected.\n\nBut when I run `npm run prod`, the PurgeCSS of tailwindcss will remove my own style for `` tags in **'@/assets/scss/app.scss'**\n\nHow can I config `tailwind.config.js` to make custom default styles be rendered in result? Whitelist only accepts classnames/ids.\n\nThanks a lot!\n\n========================================\n\nCode:\n```text\na{\n color: color(\"blue\", \"base\");\n transition: color .3s ease;\n\n &:hover,&:active{\n color: color(\"blue\", \"darken-4\");\n }\n}\n```\n\n```js\n<template>\n <nuxt-link to=\"/login\">Login</nuxt-link>\n</template>\n```\n\n```js\nbuildModules:['@nuxtjs/tailwindcss'],\n css:['@/assets/scss/app.scss']\n```\n\n```text\n<a></a>\n```\n\n```text\nnpm run dev\n```\n\n```text\nnpm run prod\n```\n\n```text\n<a></a>\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n/* purgecss start ignore */\na {...}\n/* purgecss end ignore */\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":95,"estimatedTokens":375}}808{"id":"stack-58723533","source":"stackoverflow","questionId":58723533,"title":"Tailwindcss Dropdown item flying off to edge of the screen instead of under the dropdown button","tags":["html","css","vue.js","tailwind-css"],"text":"Title: Tailwindcss Dropdown item flying off to edge of the screen instead of under the dropdown button\nTags: html, css, vue.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nSo Im making an app with Rails, Vue and TailwindCss 1.0+\n\nAt present I'm attempting to make a dropdown menu for my products, but when I click on the dropdown button my dropdown that contains my items flys off to the edge of the screen, when it should be under my button.. \n\nIm not too sure where I'm going wrong. \n\nPic of the problem: \n\nhttps://i.sstatic.net/MdROt.png\n\nHere is how the dropdown menu looks:\n\n```\n\n \n \n **Products\n \n \n \n \n \n \n\n```\n\nThis is the code of the entire nav component:\n\n```\n\n \n \n \n \n **LOADZE\n \n \n \n\n \n \n \n \n \n \n\n \n \n \n\n \n \n \n **Products\n \n \n \n \n \n \n \n \n \n \n \n \n \n\nexport default {\n data () {\n return {\n navOpen: false,\n prodOpen: false\n }\n }\n}\n\n```\n\n========================================\n\nCode:\n```text\n<!-- Start LG Products Dropdown -->\n <div class=\"hidden lg:inline-block\">\n <button @click=\"prodOpen = !prodOpen\" role=\"button\" class=\"relative z-10 inline-block select-none focus:outline-none text-base font-normal text-blue-600 hover:text-green-600 header-font focus:text-green-600\">\n <i class=\"fal fa-sitemap\"></i><span class=\"ml-1\">Products</span>\n </button>\n <button v-if=\"prodOpen\" @click=\"prodOpen = false\" class=\"fixed inset-0 bg-black opacity-25 h-full w-full cursor-default\"></button>\n </div>\n <div v-if=\"prodOpen\" class=\"absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal\">\n <slot name=\"dropdown-items\"></slot>\n </div>\n<!-- End LG Products Dropdown -->\n```\n\n```text\n<template>\n <nav class=\"flex items-center justify-between flex-wrap bg-white p-6 w-full fixed\">\n <a href=\"https://loadze.com\">\n <h1>\n <div class=\"flex items-center flex-shrink-0 text-blue-600 mr-6 logoFont\">\n <span class=\"font-bold text-3xl tracking-tight\"><i class=\"far fa-truck-loading text-2xl\"></i>LOADZE</span>\n </div>\n </h1>\n </a>\n\n <div class=\"block lg:hidden\">\n <button @click=\"navOpen = !navOpen\" class=\"flex items-center px-3 py-2 border rounded text-blue-600 border-blue-600 hover:text-green-600 hover:border-green-600 focus:outline-none\">\n <svg v-if=\"!navOpen\" aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"bars\" class=\"svg-inline--fa fa-bars fa-w-14\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path fill=\"currentColor\" d=\"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z\"></path></svg>\n <svg v-if=\"navOpen\" aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"times\" class=\"svg-inline--fa fa-times fa-w-10\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\"><path fill=\"currentColor\" d=\"M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z\"></path></svg>\n </button>\n </div>\n\n <div :class=\"navOpen ? 'block' : 'hidden'\" class=\"w-full block flex-grow lg:flex lg:items-center lg:w-auto\">\n <div class=\"text-sm lg:flex-grow\">\n <slot name=\"nav-left\"></slot>\n\n <!-- Start LG Products Dropdown -->\n <div class=\"hidden lg:inline-block\">\n <button @click=\"prodOpen = !prodOpen\" role=\"button\" class=\"relative z-10 inline-block select-none focus:outline-none text-base font-normal text-blue-600 hover:text-green-600 header-font focus:text-green-600\">\n <i class=\"fal fa-sitemap\"></i><span class=\"ml-1\">Products</span>\n </button>\n <button v-if=\"prodOpen\" @click=\"prodOpen = false\" class=\"fixed inset-0 bg-black opacity-25 h-full w-full cursor-default\"></button>\n </div>\n <div v-if=\"prodOpen\" class=\"absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal\">\n <slot name=\"dropdown-items\"></slot>\n </div>\n <!-- End LG Products Dropdown -->\n </div>\n <div>\n <slot name=\"nav-right\"></slot>\n </div>\n </div>\n </nav>\n</template>\n\n<script>\nexport default {\n data () {\n return {\n navOpen: false,\n prodOpen: false\n }\n }\n}\n</script>\n```\n\n```text\n<div v-if=\"prodOpen\" class=\"absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal\">\n <slot name=\"dropdown-items\"></slot>\n</div>\n```\n\n```text\n<div v-if=\"prodOpen\" class=\"absolute right-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal\">\n <slot name=\"dropdown-items\"></slot>\n</div>\n```\n\n```text\nleft-0\n```\n\n```text\nright-0\n```\n\n========================================\n\nComments:\n- Maybe it's your relative class only given to button that seems not work. Try wrap it in one div and give relative class to the div.\n- Here is an example codepen.io/Shuree/pen/GRRxdVV\n- Adam has the video tutorial series on 'BUILDING A DROPDOWN MENU' tailwindcss.com/course/styling-the-basic-dropdown-elements\n- @Saleem the code is from that course.......\n- You can add the `relative` class to parent of div (where you check `v-if=\"prodOpen\"`)\n- Isnt there a way to do this automatically though? With dropdown components, they should detect if they're going off screen and realign, we see it all the time, why isn't there a known solution for this?\n- @tmarois maybe take a look at headlessui.dev","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":184,"estimatedTokens":1472}}809{"id":"stack-69251419","source":"stackoverflow","questionId":69251419,"title":"TailwindCSS: How do I make a responsive grid with different ratios?","tags":["css","css-grid","tailwind-css"],"text":"Title: TailwindCSS: How do I make a responsive grid with different ratios?\nTags: css, css-grid, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI need your advice. I am working on a simple page design for displaying a product article. I am using TailwindCSS for this. (Tailwind is very cool tool!).\nHere is my question: How do I make a responsive grid with different ratios?\n\nFor the breakpoint prefixes **sm** and **md** the page width should be **50%** to **50%**. But for the breakpoint prefix lg the aspect ratio should be **~30%** to **~70%**. And under the breakpoint **sm**, two lines are to be displayed.\n\nHere is my current code. Thanks for your support!\n\n\r\n\r\n\n```\n\n \n \n \n \n \n\n \n \n\n### Title\n\n \n\n### Subtitle\n\n \n \n Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia, quae. Exercitationem, aspernatur cupiditate reiciendis veniam fugiat rerum officia dolor accusantium ipsam cum provident eum voluptatum numquam consequatur! Consectetur, quos rem. \n Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia, quae. Exercitationem, aspernatur cupiditate reiciendis veniam fugiat rerum officia dolor accusantium ipsam cum provident eum voluptatum numquam consequatur! Consectetur, quos rem.\n\n \n \n\n \n comments\n \n\n \n\n```\n\n\r\n\r\n\r\n\nHere is the link to the Tailwind Play to edit it online:\nhttps://play.tailwindcss.com/gPFDif7RKx\n\n========================================\n\nCode:\n```html\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css\" rel=\"stylesheet\"/>\n<div class=\"bg-blue-400 text-blue-400 min-h-screen flex items-center justify-center\">\n <div class=\"grid grid-cols-2 gap-2 px-2\">\n \n <div class=\"col-span-2 sm:col-span-1 bg-white p-5 rounded text-center\">\n <img class=\"w-full object-cover object-center\" src=\"https://via.placeholder.com/500x666\">\n </div>\n\n <div class=\"col-span-2 sm:col-span-1 bg-white p-10 rounded \">\n <h1 class=\"uppercase text-3xl\">Title</h1>\n <h3 class=\"uppercase text-md\">Subtitle</h3> \n <div class=\"leading-10\">\n Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia, quae. Exercitationem, aspernatur cupiditate reiciendis veniam fugiat rerum officia dolor accusantium ipsam cum provident eum voluptatum numquam consequatur! Consectetur, quos rem. \n Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia, quae. Exercitationem, aspernatur cupiditate reiciendis veniam fugiat rerum officia dolor accusantium ipsam cum provident eum voluptatum numquam consequatur! Consectetur, quos rem.\n\n </div>\n </div>\n\n <div class=\"col-span-2 bg-white p-10 rounded\">\n comments\n </div>\n\n\n </div>\n</div>\n```\n\n```text\ngrid-cols-10\n```\n\n```text\ngrid-cols-2\n```\n\n```text\ncol-span-5\n```\n\n```text\ncol-span-5\n```\n\n```text\ncol-span-3\n```\n\n```text\ncol-span-7\n```\n\n```text\ngrid-cols-1 sm:grid-cols-10\n```\n\n========================================\n\nComments:\n- Very cool and easy! `Imagecontent`","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":118,"estimatedTokens":735}}810{"id":"stack-67725255","source":"stackoverflow","questionId":67725255,"title":"Tailwind CSS no autocomplete with 'jit' Just-In-Time mode","tags":["webstorm","jit","tailwind-css","postcss"],"text":"Title: Tailwind CSS no autocomplete with 'jit' Just-In-Time mode\nTags: webstorm, jit, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI am just trying out the new Tailwind CSS 'jit' mode and realized when switched **Webstorm fails to autocomplete** the Tailwind CSS classes.\nMay there be a fix to this?\n\nmy `tailwind.config.js`;\n\n```\nmodule.exports = {\n mode: 'jit',\n purge: [\n './public/**/*.html',\n './src/**/*.{js,jsx,ts,tsx,vue}',\n ],\n presets: [],\n darkMode: false, // or 'media' or 'class'\n theme: {...}\n...\n```\n\nMy postcss config (inside nuxt.config.js);\n\n```\npostcss: {\n plugins: {\n 'tailwindcss': {},\n '@tailwindcss/jit': {},\n autoprefixer: {},\n }\n }\n```\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n mode: 'jit',\n purge: [\n './public/**/*.html',\n './src/**/*.{js,jsx,ts,tsx,vue}',\n ],\n presets: [],\n darkMode: false, // or 'media' or 'class'\n theme: {...}\n...\n```\n\n```js\npostcss: {\n plugins: {\n 'tailwindcss': {},\n '@tailwindcss/jit': {},\n autoprefixer: {},\n }\n }\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n\"jit\"\n```\n\n```text\ntailwindcss\n```\n\n```text\n*.test.css\n```\n\n```text\ntailwindcss\n```\n\n```text\nnode_modules/tailwindcss/jit/tests/\n```\n\n========================================\n\nComments:\n- This question no longer serves any purpose. For Tailwind 3 please refer to the docs. `\"mode\"` has been removed as `'jit'` is now the default. `purge` option has been renamed to `content` and is adviced.","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":89,"estimatedTokens":373}}811{"id":"stack-63242090","source":"stackoverflow","questionId":63242090,"title":"Why there is not much percentage unit in tailwind?","tags":["tailwind-css"],"text":"Title: Why there is not much percentage unit in tailwind?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nWhy there is not much percentage unit in tailwind like for example I wanted a width of 50%. I understand that I can add custom config to it but I just wanted to know is there any specific reason to it.\n\n========================================\n\nTop Answer:\njust do this:\n\n```\nstyle={{width: width+'%'}}\n```\n\n========================================\n\nCode:\n```text\n// using flex\n<div class=\"flex\">\n <div class=\"flex-1\">1</div> // 50%\n <div class=\"flex-1\">2</div> // 50%\n</div>\n\n\n// using grid\n<div class=\"grid grid-cols-2\">\n <div>1</div> // 50%\n <div>2</div> // 50%\n</div>\n```\n\n```text\nwidth: 50%\n```\n\n```text\nstyle={{width: width+'%'}}\n```\n\n========================================\n\nComments:\n- thank you, I was thought that there is some tricky case where percentage based unit is tricky or has a side effect","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":3,"totalLines":46,"estimatedTokens":233}}812{"id":"stack-79570791","source":"stackoverflow","questionId":79570791,"title":"How to use theme configuration in newer css first approach of Tailwind","tags":["tailwind-css","tailwind-css-4"],"text":"Title: How to use theme configuration in newer css first approach of Tailwind\nTags: tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nStarting from Tailwind v4 tailwind.config.ts is not supported/needed. Hence I am migrating v3 config of tailwind.config.ts. The below is existing code using tailwind.config.ts and I want to convert into css-first approach in v4\n\n```\nconst config: Config = {\n darkMode: 'class',\n theme: {\n extend: {\n screens: {\n xs: '475px',\n },\n colors: {\n primary: {\n '100': '#FFE8F0',\n DEFAULT: '#EE2B69',\n },\n secondary: '#FBE843',\n black: {\n '100': '#333333',\n '200': '#141413',\n '300': '#7D8087',\n DEFAULT: '#000000',\n },\n white: {\n '100': '#F7F7F7',\n DEFAULT: '#FFFFFF',\n },\n },\n fontFamily: {\n 'work-sans': ['var(--font-work-sans)'],\n },\n borderRadius: {\n lg: 'var(--radius)',\n md: 'calc(var(--radius) - 2px)',\n sm: 'calc(var(--radius) - 4px)',\n },\n boxShadow: {\n 100: '2px 2px 0px 0px rgb(0, 0, 0)',\n 200: '2px 2px 0px 2px rgb(0, 0, 0)',\n 300: '2px 2px 0px 2px rgb(238, 43, 105)',\n },\n },\n },\n};\n```\n\n========================================\n\nCode:\n```ts\nconst config: Config = {\n darkMode: 'class',\n theme: {\n extend: {\n screens: {\n xs: '475px',\n },\n colors: {\n primary: {\n '100': '#FFE8F0',\n DEFAULT: '#EE2B69',\n },\n secondary: '#FBE843',\n black: {\n '100': '#333333',\n '200': '#141413',\n '300': '#7D8087',\n DEFAULT: '#000000',\n },\n white: {\n '100': '#F7F7F7',\n DEFAULT: '#FFFFFF',\n },\n },\n fontFamily: {\n 'work-sans': ['var(--font-work-sans)'],\n },\n borderRadius: {\n lg: 'var(--radius)',\n md: 'calc(var(--radius) - 2px)',\n sm: 'calc(var(--radius) - 4px)',\n },\n boxShadow: {\n 100: '2px 2px 0px 0px rgb(0, 0, 0)',\n 200: '2px 2px 0px 2px rgb(0, 0, 0)',\n 300: '2px 2px 0px 2px rgb(238, 43, 105)',\n },\n },\n },\n};\n```\n\n```css\n@import \"tailwindcss\";\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n --breakpoint-xs: 475px;\n\n --color-primary-100: #FFE8F0;\n --color-primary: #EE2B69;\n --color-secondary: #FBE843;\n --color-black-100: #333333;\n --color-black-200: #141413;\n --color-black-300: #7D8087;\n --color-black: #000000;\n --color-white-100: #F7F7F7;\n --color-white: #FFFFFF;\n\n --font-work-sans: var(--font-work-sans);\n\n --radius-lg: var(--radius);\n --radius-md: calc(var(--radius) - 2px);\n --radius-sm: calc(var(--radius) - 4px);\n\n --shadow-100: 2px 2px 0px 0px rgb(0, 0, 0);\n --shadow-200: 2px 2px 0px 2px rgb(0, 0, 0);\n --shadow-300: 2px 2px 0px 2px rgb(238, 43, 105);\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nprefers-color-scheme\n```\n\n```text\n@theme\n```\n\n========================================\n\nComments:\n- As per the documentation, there is an upgrade tool that you can use to do the bulk of the menial work to upgrade a project to v4. This is not a website where people write code for you so that you don't have to. If you need help debugging code that you have written, you must post a Minimal, Complete, and Verifiable example and explain the specific problem with your code.","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":142,"estimatedTokens":798}}813{"id":"stack-79763562","source":"stackoverflow","questionId":79763562,"title":"Tailwind @container query behavior","tags":["css","tailwind-css","tailwind-css-4"],"text":"Title: Tailwind @container query behavior\nTags: css, tailwind-css, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI have a local setup of Tailwind v4.1 the below header **occupies the whole screen** on mobile viewports, with container queries\n\n```\n\n \n \n \n \n \n \n \n```\n\nwhile this header **doesn't occupy the full width of the screen** in mobile viewports\n\n```\n\n \n \n \n \n \n \n \n```\n\nBelow a screenshot of the `` element in 412px viewport with :focus-visible on Chrome devtools:\nhttps://i.sstatic.net/GBbg95QE.png\n\nmy main & only style.css is:\n\n```\n@layer theme, base, components, utilities;\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/preflight.css\" layer(base);\n@import \"tailwindcss/utilities.css\" layer(utilities);\n```\n\nI've also tried `.sm:max-4xl:w-full` in the place of `.3xs:min-w-full` and it doesn't work either.\n\nIs the use of `@container` mandatory in Tailwind CSS?\n\n========================================\n\nCode:\n```html\n<div id=\"app\" class=\"@container\">\n <div class=\"wrapper w-full\">\n <header class=\"fixed z-50 @4xl:top-10 @4xl:start-1/10 @4xl:min-w-0 @4xl:w-8/10 @3xs:min-w-full @3xs:top-5 @3xs:px-4\">\n <nav class=\"flex w-full\">\n </nav>\n </header>\n </div>\n </div>\n```\n\n```html\n<div id=\"app\">\n <div class=\"wrapper w-full\">\n <header class=\"fixed z-50 4xl:top-10 4xl:start-1/10 4xl:min-w-0 4xl:w-8/10 3xs:min-w-full 3xs:top-5 3xs:px-4\">\n <nav class=\"flex w-full\">\n </nav>\n </header>\n </div>\n </div>\n```\n\n```css\n@layer theme, base, components, utilities;\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/preflight.css\" layer(base);\n@import \"tailwindcss/utilities.css\" layer(utilities);\n```\n\n```text\n<header>\n```\n\n```text\n.sm:max-4xl:w-full\n```\n\n```text\n.3xs:min-w-full\n```\n\n```text\n@container\n```\n\n```css\n@theme {\n /* New breakpoints for media query */\n --breakpoint-3xs: 10rem;\n --breakpoint-2xs: 20rem;\n --breakpoint-xs: 30rem;\n --breakpoint-3xl: 108rem;\n\n /* New breakpoints for @container */\n --container-4xs: 8rem;\n --container-8xl: 96rem;\n}\n```\n\n```css\n@theme {\n /* Remove default breakpoints for media query */\n --breakpoint-*: initial;\n /* New breakpoints for media query */\n --breakpoint-tablet: 40rem;\n --breakpoint-laptop: 64rem;\n --breakpoint-desktop: 80rem;\n\n /* Remove default breakpoints for @container */\n --container-*: initial;\n /* New breakpoints for @container */\n --breakpoint-tablet: 20rem;\n --breakpoint-laptop: 32rem;\n --breakpoint-desktop: 40rem;\n}\n```\n\n```text\n@container\n```\n\n```text\n@container\n```\n\n```text\n@container\n```\n\n```text\n@container\n```\n\n```text\n0\n```\n\n```text\nsm\n```\n\n```text\nsm\n```\n\n```text\n2xl\n```\n\n```text\n@3xs\n```\n\n```text\n@7xl\n```\n\n```text\npx\n```\n\n```text\n16px\n```\n\n```text\nrem\n```\n\n```text\nrem\n```\n\n```text\nrem\n```\n\n```text\npx\n```\n\n========================================\n\nComments:\n- @rozsazoltan gives a deep explanation of when and why you should use certain approaches. Here, I’m providing the exact solution you’re looking for — one you can directly implement. However, I strongly suggest that you also take time to understand what’s actually happening in Tailwind by going through @rozsazoltan’s answer.\n- Because Tailwind is a mobile-first framework, using w-full applies it across all breakpoints unless you specify otherwise with sm, md, or xl. For your case, you just need to use: 'w-full md:container mx-auto'\n- Thanks a lot, I was so confused by the official Tailwind docs but your answer was very extensive and clear!\n- Related: How to use new `@container` in TailwindCSS v4?","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":25,"totalLines":198,"estimatedTokens":891}}814{"id":"stack-78735717","source":"stackoverflow","questionId":78735717,"title":"Fixing Transparent Line Between Div with Clip-Path and Parent Div","tags":["html","css","svg","tailwind-css","jsx"],"text":"Title: Fixing Transparent Line Between Div with Clip-Path and Parent Div\nTags: html, css, svg, tailwind-css, jsx\nSource: Stack Overflow\n\nQuestion:\nA thin, transparent line appears between the triangular div and its parent div when **zoomed**. I believe this is likely caused by anti-aliasing in the browser. If there is a way to fix this, I would appreciate it. I have also tried using SVG instead of clip-path, but the issue persists.\n\n\r\n\r\n\n```\n\n \n \n \n \n\n```\n\n\r\n\r\n\r\n\nThe line is more visible when viewed directly rather than from image btw\nhttps://i.sstatic.net/60Xzf6BM.png\n\n========================================\n\nCode:\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"bg-red-500 h-[30rem] relative\">\n <div class=\"w-1/2 h-10 md:h-20 bg-inherit absolute transform -translate-y-full [clip-path:polygon(0%0%,100%100%,0%100%)]\"></div>\n <div class=\"w-1/2 h-10 md:h-20 bg-inherit absolute transform -translate-y-full right-0 [clip-path:polygon(100%0%,100%100%,0%100%)]\"></div>\n <div class=\"w-1/2 h-10 md:h-20 bg-white absolute bottom-0 [clip-path:polygon(0%0%,100%100%,0%100%)]\"></div>\n <div class=\"w-1/2 h-10 md:h-20 bg-white absolute bottom-0 right-0 [clip-path:polygon(100%0%,100%100%,0%100%)]\"></div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"h-[80vh] border-2 border-sky-500 m-2\"></div>\n<footer>\n <div class=\"bg-red-500 h-[30rem] relative\">\n <div id=\"top-left\" class=\"w-1/2 h-10 md:h-20 bg-inherit absolute transform -translate-y-full [clip-path:polygon(0%0%,100%100%,0%100%)]\">\n </div>\n <div class=\"w-1/2 h-10 md:h-20 bg-inherit absolute transform -translate-y-full right-0 [clip-path:polygon(100%0%,100%100%,0%100%)]\">\n </div>\n <div class=\"w-1/2 h-10 md:h-20 bg-white absolute bottom-0 [clip-path:polygon(0%0%,100%100%,0%100%)]\"></div>\n <div class=\"w-1/2 h-10 md:h-20 bg-white absolute bottom-0 right-0 [clip-path:polygon(100%0%,100%100%,0%100%)]\">\n </div>\n </div>\n</footer>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"h-[80vh] border-2 border-sky-500 m-2\"></div>\n<footer>\n <div class=\"bg-red-500 h-[30rem] relative will-change-transform\">\n <div id=\"top-left\" class=\"w-1/2 h-10 md:h-20 bg-inherit absolute transform -translate-y-full [clip-path:polygon(0%0%,100%100%,0%100%)]\">\n </div>\n <div class=\"w-1/2 h-10 md:h-20 bg-inherit absolute transform -translate-y-full right-0 [clip-path:polygon(100%0%,100%100%,0%100%)]\">\n </div>\n <div class=\"w-1/2 h-10 md:h-20 bg-white absolute bottom-0 [clip-path:polygon(0%0%,100%100%,0%100%)]\"></div>\n <div class=\"w-1/2 h-10 md:h-20 bg-white absolute bottom-0 right-0 [clip-path:polygon(100%0%,100%100%,0%100%)]\">\n </div>\n </div>\n</footer>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"h-[80vh] border-2 border-sky-500 m-2\"></div>\n<footer>\n <div class=\"bg-red-500 h-[30rem] relative\">\n <div id=\"top-left\" class=\"w-1/2 h-10 md:h-20 bg-inherit absolute transform -translate-y-full [clip-path:polygon(0%0%,100%100%,0%100%)] top-px\">\n </div>\n <div class=\"w-1/2 h-10 md:h-20 bg-inherit absolute transform -translate-y-full right-0 [clip-path:polygon(100%0%,100%100%,0%100%)] top-px\">\n </div>\n <div class=\"w-1/2 h-10 md:h-20 bg-white absolute bottom-0 [clip-path:polygon(0%0%,100%100%,0%100%)] bottom-[-1px]\"></div>\n <div class=\"w-1/2 h-10 md:h-20 bg-white absolute bottom-0 right-0 [clip-path:polygon(100%0%,100%100%,0%100%)] bottom-[-1px]\">\n </div>\n </div>\n</footer>\n```\n\n```css\n.clipped {\n height: calc(100% + var(--h));\n top: calc(-1 * var(--h));\n clip-path: polygon(0 0, 50% var(--h), 100% 0, 100% calc(100% - var(--h)), 50% 100%, 0 calc(100% - var(--h)));\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"h-[80vh] border-2 border-sky-500 m-2\"></div>\n<footer>\n <div class=\"h-[30rem] relative\">\n <div class=\"clipped bg-red-500 relative [--h:2.5rem] md:[--h:5rem]\"></div>\n </div>\n</footer>\n```\n\n```text\nheight:80vh\n```\n\n```text\nwill-change-transform\n```\n\n```text\n--tw-rotate\n```\n\n========================================\n\nComments:\n- Welcome to StackOverflow, hope you will find new knowledge here. You can help us answering your question, by adding a minimal-reproducible-example StackOverflow Snippet with the [] button in the editor. It will help readers execute your code with one click. And help create answers with one click. Thank you.\n- Reproduced on Chrome, but only when adding position/margin/padding on it or its parent.\n- @syndRain This occurs when the user zooms\n- wait, i will add an image\n- @Mr.Unknown right, but in my case even with zooming it only happen when the positioning/margin/padding are using specific units like `vh`. Could you also include related parent element(s)?\n- the parent of this `` is with no css, plain footer\n- This is common when zooming in because you end up with partial pixels and the browser has to figure out what to do with them. If it's a big deal to you just move the lower `div` up by a pixel `-mt-px`.","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":132,"estimatedTokens":1259}}815{"id":"stack-78811246","source":"stackoverflow","questionId":78811246,"title":"ShadCN UI combobox only working with keyboard not with mouse","tags":["javascript","next.js","tailwind-css","shadcnui"],"text":"Title: ShadCN UI combobox only working with keyboard not with mouse\nTags: javascript, next.js, tailwind-css, shadcnui\nSource: Stack Overflow\n\nQuestion:\nI have a very simple app that consists of only a combobox and a card (it is going to be embedded on a Wordpress). NextJS, ShadCN ui.\n\nThe combobox for some reason only works with keyboard, not with the mouse. Even if I copy the examples directly from ShadCN ui website it does not work.\n\nI am sure it is something easy but I cant figure it out.\n\nHere is my code:\n\n```\n'use client'\n\nimport { ChevronsUpDown } from 'lucide-react'\nimport { Batch, batches } from '@/lib/batch'\nimport { Button } from '@/components/ui/button'\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '@/components/ui/command'\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from '@/components/ui/popover'\nimport { useState } from 'react'\nimport InfoCard from './info-card'\n\nexport function Combobox() {\n const [open, setOpen] = useState(false)\n const [value, setValue] = useState('')\n const [inputValue, setInputValue] = useState('')\n const [currentItem, setCurrentItem] = useState(null)\n\n const filteredBatches = batches.filter((batch) =>\n batch.number.includes(inputValue)\n )\n\n const handleClick = (batch: Batch) => {\n console.log('clicked')\n setCurrentItem(batch)\n setOpen(false)\n }\n\n return (\n <>\n \n \n \n {value\n ? batches.find((batch) => batch.number === value)?.number\n : 'Type your batch number...'}\n \n \n \n \n \n \n No batch found.\n \n \n {filteredBatches.map((batch) => (\n handleClick(batch)}\n className='hover:cursor-pointer hover:bg-slate-400'\n >\n {batch.number} - {batch.fishery}\n \n ))}\n \n \n \n \n \n\n \n \n )\n}\n\nexport default Combobox\n```\n\nI have it deployed here so you can see that it works with keyboard:\nhttps://aisbatchnumbers.vercel.app/\n\nCode is here:\nhttps://github.com/santivdt/ais-batch-numbers\n\nHopefully someone knows the solution ..\n\n========================================\n\nTop Answer:\nYou have to replace data-disabled to data-[disabled ='true'] from the command.tsx (the command component).\n\nThis might be helpful: https://github.com/shadcn-ui/ui/issues/2944#issuecomment-1985153126\n\n========================================\n\nCode:\n```text\n'use client'\n\nimport { ChevronsUpDown } from 'lucide-react'\nimport { Batch, batches } from '@/lib/batch'\nimport { Button } from '@/components/ui/button'\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '@/components/ui/command'\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from '@/components/ui/popover'\nimport { useState } from 'react'\nimport InfoCard from './info-card'\n\nexport function Combobox() {\n const [open, setOpen] = useState(false)\n const [value, setValue] = useState('')\n const [inputValue, setInputValue] = useState('')\n const [currentItem, setCurrentItem] = useState<Batch | null>(null)\n\n const filteredBatches = batches.filter((batch) =>\n batch.number.includes(inputValue)\n )\n\n const handleClick = (batch: Batch) => {\n console.log('clicked')\n setCurrentItem(batch)\n setOpen(false)\n }\n\n return (\n <>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button\n variant='outline'\n role='combobox'\n aria-expanded={open}\n className='w-[500px] justify-between'\n >\n {value\n ? batches.find((batch) => batch.number === value)?.number\n : 'Type your batch number...'}\n <ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />\n </Button>\n </PopoverTrigger>\n <PopoverContent className='w-[500px] p-0'>\n <Command>\n <CommandInput\n placeholder='Search batch number...'\n value={inputValue}\n onValueChange={setInputValue}\n />\n <CommandEmpty>No batch found.</CommandEmpty>\n <CommandList>\n <CommandGroup>\n {filteredBatches.map((batch) => (\n <CommandItem\n key={batch.number}\n value={batch.number}\n onSelect={() => handleClick(batch)}\n className='hover:cursor-pointer hover:bg-slate-400'\n >\n {batch.number} - {batch.fishery}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n\n <InfoCard batch={currentItem} />\n </>\n )\n}\n\nexport default Combobox\n```\n\n```text\ndata-[disabled]:pointer-events-none\n```\n\n```text\ndata-disabled\n```\n\n```text\ndata-disabled\n```\n\n```text\ndata-disabled\n```\n\n```text\ndata-disabled\n```\n\n```text\ntrue\n```\n\n```text\ndata-[disabled=true]:pointer-events-none\n```\n\n```text\ndata-[disabled]:pointer-events-auto\n```\n\n```text\ndata-[disabled=true]\n```\n\n```text\ndata-[disabled]\n```\n\n```text\n<CommandItem value={proj.label}\n key={proj.value}\n onSelect={() => {form.setValue(\"projects\", proj.value)}}\n className=\"pointer-events-auto\"> // Add here\n {proj.label}\n <Check className={cn(\"ml-auto h-4 w-4\", proj.value === field.value ? \"opacity-100\": \"opacity-0\")}/>\n</CommandItem>\n```\n\n```text\ndata-[disabled=true]:pointer-events-none\n```\n\n```text\nclassName=\"pointer-events-auto\"\n```\n\n```text\n<Popover open={open} onOpenChange={setOpen}>\n<PopoverTrigger asChild>\n <Button\n variant=\"input\"\n role=\"combobox\"\n size=\"input\"\n aria-expanded={open}\n className=\"justify-between dark:hover:text-info-foreground bg-background-foreground text-nav-foreground hover:text-nav-foreground hover:bg-background-foreground hover:opacity-90 dark:text-info-foreground dark:bg-accent dark:hover:opacity-90\"\n >\n {value\n ? options.find((option) => option.value === value)?.label\n : placeholder || t(\"placeholder.select\")}\n <CaretSortIcon className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n </Button>\n</PopoverTrigger>\n<PopoverContent className=\"w-[200px] h-[200px] p-0\">\n <Command className=\"overflow-auto\">\n <CommandInput\n placeholder={placeholder || t(\"placeholder.select\")}\n className=\"h-9\"\n name={name || id}\n onValueChange={setInputValue}\n value={inputValue}\n />\n <CommandList>\n <CommandEmpty>{messageEmpty || t(\"noData\")}</CommandEmpty>\n <ScrollArea className=\"overflow-auto\">\n <CommandGroup>\n {filteredOptions.map((option) => (\n <CommandItem\n key={option.value}\n value={option.label}\n onSelect={() => {\n onChange ? onChange(option.value) : null;\n setOpen(false);\n setInputValue(\"\");\n }}\n >\n {option.label}\n <CheckIcon\n className={cn(\n \"ml-auto h-4 w-4\",\n value === option.value ? \"opacity-100\" : \"opacity-0\"\n )}\n />\n </CommandItem>\n ))}\n </CommandGroup>\n </ScrollArea>\n </CommandList>\n </Command>\n</PopoverContent>\n```\n\n```text\n<Popover modal={true} open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button\n variant=\"input\"\n role=\"combobox\"\n size=\"input\"\n aria-expanded={open}\n className=\"justify-between dark:hover:text-info-foreground bg-background-foreground text-nav-foreground hover:text-nav-foreground hover:bg-background-foreground hover:opacity-90 dark:text-info-foreground dark:bg-accent dark:hover:opacity-90\"\n >\n {value\n ? options.find((option) => option.value === value)?.label\n : placeholder || t(\"placeholder.select\")}\n <CaretSortIcon className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-[200px] h-[200px] p-0\">\n <Command className=\"overflow-auto\">\n <CommandInput\n placeholder={placeholder || t(\"placeholder.select\")}\n className=\"h-9\"\n name={name || id}\n onValueChange={setInputValue}\n value={inputValue}\n />\n <CommandList>\n <CommandEmpty>{messageEmpty || t(\"noData\")}</CommandEmpty>\n <ScrollArea className=\"overflow-auto\">\n <CommandGroup>\n {filteredOptions.map((option) => (\n <CommandItem\n key={option.value}\n value={option.label}\n onSelect={() => {\n onChange ? onChange(option.value) : null;\n setOpen(false);\n setInputValue(\"\");\n }}\n >\n {option.label}\n <CheckIcon\n className={cn(\n \"ml-auto h-4 w-4\",\n value === option.value ? \"opacity-100\" : \"opacity-0\"\n )}\n />\n </CommandItem>\n ))}\n </CommandGroup>\n </ScrollArea>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n```\n\n========================================\n\nComments:\n- Thank you so much , that works. I am not sure I understand completely why it comes like this out of the box (ShadCN ui). Am I overlooking a feature or a way that this is normally used? I've just deleted the `data-[disabled]:pointer-events-none` from the component and now it works. Thanks!\n- @Santi I looked at the code on their official website, and their components do not have `data-disabled` by default. It's possible that another part of your code added this attribute, but I'm not entirely sure.\n- Thanks for checking, I ll dive into it but am happy it is solved anyway :)\n- Hi! To improve your answer, I would recommend explaining why the class name fixes the problem\n- works, thank you","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":372,"estimatedTokens":2472}}816{"id":"stack-79627226","source":"stackoverflow","questionId":79627226,"title":"Laravel Livewire Starter Kit - Tailwind broken out of the box?","tags":["laravel","tailwind-css","laravel-livewire","tailwind-css-4"],"text":"Title: Laravel Livewire Starter Kit - Tailwind broken out of the box?\nTags: laravel, tailwind-css, laravel-livewire, tailwind-css-4\nSource: Stack Overflow\n\nQuestion:\nI've come across a very strange issue working on a new project with the Laravel Livewire starter kit. It appears that Tailwind is not working out of the box?\n\nAfter doing a fresh `laravel new test` command, selecting Livewire and Volt, and putting the following code into the `welcome.blade.php`, I'm finding that styles are not being applied, or being overridden altogether.\n\n```\n\n Tailwind alive?\n\n```\n\nThe text is neither being rendered red or in 4xl size. I have also tried wrapping in `` instead of ``.\n\nWhat the heck is going wrong here?\n\n========================================\n\nCode:\n```html\n<h1 class=\"text-red-500 text-4xl\">\n Tailwind alive?\n</h1>\n```\n\n```text\nlaravel new test\n```\n\n```text\nwelcome.blade.php\n```\n\n```text\n<p>\n```\n\n```text\n<h1>\n```\n\n```html\n<head>\n @include('partials.head')\n</head>\n```\n\n```html\n@vite(['resources/css/app.css', 'resources/js/app.js'])\n```\n\n```text\n./resources/css/app.css\n```\n\n```text\n./resources/views/partials/head.blade.php\n```\n\n```text\n./resources/css/app.css\n```\n\n```text\nlaravel/livewire-start-kit\n```\n\n```text\napp.css\n```\n\n```text\n./resources/views/partials/head.blade.php\n```\n\n```text\npartials.head\n```\n\n```text\nlaravel/livewire-start-kit\n```\n\n```text\npartials.head\n```\n\n```text\nwelcome.blade.php\n```\n\n```text\n./resources/views/welcome.blade.php\n```\n\n```text\n<style>\n```\n\n```text\nwelcome.blade.php\n```\n\n```text\nhead.blade.php\n```\n\n```text\nwelcome.blade.php\n```\n\n```text\n<head>\n```\n\n```text\npartials.head\n```\n\n```text\nwelcome.blade.php\n```\n\n```text\n@vite\n```\n\n```text\n<style>\n```\n\n```text\nlaravel/livewire-starter-kit\n```\n\n========================================\n\nComments:\n- Did you run npm run dev/npm run build? Because tailwind purges unused classes by default.\n- Yes I have, with no results. This works on a base Laravel install (with no starter kit), but fails on the Livewire kit\n- What other custom CSS are you using? TailwindCSS v4 relies heavily on CSS layers priority, so unlayered custom styles completely override TailwindCSS. It's recommended to place all custom styles inside `@layer base`. See: From v4 the reset style cannot be overridden by TailwindCSS classes\n- You can check in DevTools whether your two classes have been created.\n- True legend! I thought I was going nuts as everything was being overridden. Thanks a bunch dude","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":28,"totalLines":146,"estimatedTokens":617}}817{"id":"stack-79425047","source":"stackoverflow","questionId":79425047,"title":"sv@0.6.21 not generating a tailwind.config.js file - problem with UI libraries","tags":["tailwind-css","svelte","sveltekit","shadcnui","svelte-5"],"text":"Title: sv@0.6.21 not generating a tailwind.config.js file - problem with UI libraries\nTags: tailwind-css, svelte, sveltekit, shadcnui, svelte-5\nSource: Stack Overflow\n\nQuestion:\nI created my Svelte project using `sv@0.6.21`\n\n```\nnpx sv@0.6.21 create app\n```\n\nAdded the TailwindCSS package\n\n```\nnpx sv@0.6.21 add tailwindcss\n```\n\nAnd then tried to install `shadcn-svelte`\n\n```\nnpx shadcn-svelte@next init\n```\n\nHowever couldn't because there was no `tailwind.config.js` file.\n\nI tried to run the `init` process for TailwindCSS to get a `tailwind.config.js` and it didn't work. I tried to create a config file manually and it didn't work either.\n\nHowever creating a project with `sv@0.6.18` and adding `-initializing` flag the TailwindCSS package solved the problem. I am curious why is that?\n\n========================================\n\nCode:\n```text\nnpx sv@0.6.21 create app\n```\n\n```text\nnpx sv@0.6.21 add tailwindcss\n```\n\n```text\nnpx shadcn-svelte@next init\n```\n\n```text\nsv@0.6.21\n```\n\n```text\nshadcn-svelte\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ninit\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nsv@0.6.18\n```\n\n```text\n-initializing\n```\n\n```text\nnpm install tailwindcss@3\n```\n\n```js\nimport { defineConfig } from 'vite'\nimport { sveltekit } from '@sveltejs/kit/vite'\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default defineConfig({\n plugins: [\n tailwindcss(),\n sveltekit(),\n ],\n css: {\n transformer: 'lightningcss'\n }\n});\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```text\nnpm install tailwindcss\n```\n\n```text\nnpm install tailwindcss\n```\n\n```text\nnpm install tailwindcss@3\n```\n\n```text\nshadcn-ui/ui\n```\n\n========================================\n\nComments:\n- A few days ago, Shadcn officially started supporting TailwindCSS v4; See: `shadcn-ui/ui` #6427 and Shadcn UI with TailwindCSS v4","metadata":{"transformedAt":"2026-08-18T18:33:42.946Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":17,"totalLines":116,"estimatedTokens":454}}818{"id":"stack-79596481","source":"stackoverflow","questionId":79596481,"title":"Error with TailwindCSS Utility Class sm:text-[54px] in Next.js Project","tags":["next.js","tailwind-css","utilities","tailwind-css-4","next.js15"],"text":"Title: Error with TailwindCSS Utility Class sm:text-[54px] in Next.js Project\nTags: next.js, tailwind-css, utilities, tailwind-css-4, next.js15\nSource: Stack Overflow\n\nQuestion:\n```\nError evaluating Node.js code\nError: Cannot apply unknown utility class: sm:text-[54px]\n [at onInvalidCandidate (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\node\\node_modules\\tailwindcss\\dist\\lib.js:20:348)]\n [at me (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\node\\node_modules\\tailwindcss\\dist\\lib.js:15:29296)]\n [at De (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\node\\node_modules\\tailwindcss\\dist\\lib.js:20:311)]\n [at si (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\node\\node_modules\\tailwindcss\\dist\\lib.js:36:784)]\n [at process.processTicksAndRejections (node:internal/process/task_queues:105:5)]\n [at async ui (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\node\\node_modules\\tailwindcss\\dist\\lib.js:36:1079)]\n [at async Cr (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\node\\dist\\index.js:12:3305)]\n [at async $ (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\postcss\\dist\\index.js:10:3320)]\n [at async Object.Once (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\postcss\\dist\\index.js:10:3596)]\n [at async LazyResult.runAsync (turbopack:///[project]/node_modules/postcss/lib/lazy-result.js:293:11)]\n```\n\nglobals.css:\n\n```\n@import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap\");\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n --background: #ffffff;\n --foreground: #171717;\n}\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --background: #0a0a0a;\n --foreground: #ededed;\n }\n}\n\n@layer utilities {\n .heading {\n @apply uppercase bg-black px-6 py-3 font-work-sans font-extrabold text-white sm:text-[54px] sm:leading-[64px] text-[36px] leading-[46px] max-w-5xl text-center my-5;\n }\n}\n\nbody {\n background: var(--background);\n color: var(--foreground);\n font-family: Arial, Helvetica, sans-serif;\n}\n```\n\ntailwind.config.ts:\n\n```\nimport type { Config } from \"tailwindcss\";\n\nconst config: Config = {\n darkMode: [\"class\", \"dark\"],\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./sanity/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n extend: {\n screens: {\n xs: \"475px\",\n },\n colors: {\n primary: {\n \"100\": \"#FFE8F0\",\n DEFAULT: \"#EE2B69\",\n },\n secondary: \"#FBE843\",\n black: {\n \"100\": \"#333333\",\n \"200\": \"#141413\",\n \"300\": \"#7D8087\",\n DEFAULT: \"#000000\",\n },\n white: {\n \"100\": \"#F7F7F7\",\n DEFAULT: \"#FFFFFF\",\n },\n },\n fontFamily: {\n \"work-sans\": [\"var(--font-work-sans)\"],\n },\n fontSize: {\n \"36px\": \"36px\",\n \"54px\": \"54px\",\n },\n lineHeight: {\n \"46px\": \"46px\",\n \"64px\": \"64px\",\n },\n borderRadius: {\n lg: \"var(--radius)\",\n md: \"calc(var(--radius) - 2px)\",\n sm: \"calc(var(--radius) - 4px)\",\n },\n boxShadow: {\n 100: \"2px 2px 0px 0px rgb(0, 0, 0)\",\n 200: \"2px 2px 0px 2px rgb(0, 0, 0)\",\n 300: \"2px 2px 0px 2px rgb(238, 43, 105)\",\n },\n },\n },\n plugins: [require(\"tailwindcss-animate\"), require(\"@tailwindcss/typography\")],\n};\n\nexport default config;\n```\n\npackage.json:\n\n```\n{\n \"name\": \"startup-project\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev --turbopack\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },\n \"packageManager\": \"npm@11.3.0\",\n \"overrides\": {\n \"react\": \"$react\",\n \"react-dom\": \"$react-dom\"\n },\n \"dependencies\": {\n \"@tailwindcss/typography\": \"^0.5.16\",\n \"next\": \"15.3.1\",\n \"next-auth\": \"^5.0.0-beta.27\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"tailwindcss-animate\": \"^1.0.7\"\n },\n \"devDependencies\": {\n \"@eslint/eslintrc\": \"^3\",\n \"@tailwindcss/postcss\": \"^4\",\n \"@types/node\": \"^20\",\n \"@types/react\": \"^19\",\n \"@types/react-dom\": \"^19\",\n \"eslint\": \"^9\",\n \"eslint-config-next\": \"15.3.1\",\n \"tailwindcss\": \"^3.4.1\",\n \"typescript\": \"^5\"\n }\n}\n```\n\nWhat I Have Tried:\n\nDouble-checking the syntax for the utility classes in globals.css.\n\nEnsuring that the `TailwindCSS` version is up-to-date.\n\nReviewing the `TailwindCSS` configuration in tailwind.config.ts.\n\nI am unsure why I'm seeing the error Cannot apply unknown utility class: sm:text-[54px]. Is there something wrong with how I am using the sm:text-[54px] class or my Tailwind configuration? Any help would be appreciated!\n\nThanks in advance!\n\n========================================\n\nCode:\n```text\nError evaluating Node.js code\nError: Cannot apply unknown utility class: sm:text-[54px]\n [at onInvalidCandidate (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\node\\node_modules\\tailwindcss\\dist\\lib.js:20:348)]\n [at me (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\node\\node_modules\\tailwindcss\\dist\\lib.js:15:29296)]\n [at De (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\node\\node_modules\\tailwindcss\\dist\\lib.js:20:311)]\n [at si (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\node\\node_modules\\tailwindcss\\dist\\lib.js:36:784)]\n [at process.processTicksAndRejections (node:internal/process/task_queues:105:5)]\n [at async ui (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\node\\node_modules\\tailwindcss\\dist\\lib.js:36:1079)]\n [at async Cr (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\node\\dist\\index.js:12:3305)]\n [at async $ (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\postcss\\dist\\index.js:10:3320)]\n [at async Object.Once (D:\\MERN-LINKEDIN\\Next JS\\JS Mastery Next JS\\startup-project\\node_modules\\@tailwindcss\\postcss\\dist\\index.js:10:3596)]\n [at async LazyResult.runAsync (turbopack:///[project]/node_modules/postcss/lib/lazy-result.js:293:11)]\n```\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap\");\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n --background: #ffffff;\n --foreground: #171717;\n}\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --font-sans: var(--font-geist-sans);\n --font-mono: var(--font-geist-mono);\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --background: #0a0a0a;\n --foreground: #ededed;\n }\n}\n\n@layer utilities {\n .heading {\n @apply uppercase bg-black px-6 py-3 font-work-sans font-extrabold text-white sm:text-[54px] sm:leading-[64px] text-[36px] leading-[46px] max-w-5xl text-center my-5;\n }\n}\n\nbody {\n background: var(--background);\n color: var(--foreground);\n font-family: Arial, Helvetica, sans-serif;\n}\n```\n\n```ts\nimport type { Config } from \"tailwindcss\";\n\nconst config: Config = {\n darkMode: [\"class\", \"dark\"],\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./sanity/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n extend: {\n screens: {\n xs: \"475px\",\n },\n colors: {\n primary: {\n \"100\": \"#FFE8F0\",\n DEFAULT: \"#EE2B69\",\n },\n secondary: \"#FBE843\",\n black: {\n \"100\": \"#333333\",\n \"200\": \"#141413\",\n \"300\": \"#7D8087\",\n DEFAULT: \"#000000\",\n },\n white: {\n \"100\": \"#F7F7F7\",\n DEFAULT: \"#FFFFFF\",\n },\n },\n fontFamily: {\n \"work-sans\": [\"var(--font-work-sans)\"],\n },\n fontSize: {\n \"36px\": \"36px\",\n \"54px\": \"54px\",\n },\n lineHeight: {\n \"46px\": \"46px\",\n \"64px\": \"64px\",\n },\n borderRadius: {\n lg: \"var(--radius)\",\n md: \"calc(var(--radius) - 2px)\",\n sm: \"calc(var(--radius) - 4px)\",\n },\n boxShadow: {\n 100: \"2px 2px 0px 0px rgb(0, 0, 0)\",\n 200: \"2px 2px 0px 2px rgb(0, 0, 0)\",\n 300: \"2px 2px 0px 2px rgb(238, 43, 105)\",\n },\n },\n },\n plugins: [require(\"tailwindcss-animate\"), require(\"@tailwindcss/typography\")],\n};\n\nexport default config;\n```\n\n```json\n{\n \"name\": \"startup-project\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev --turbopack\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },\n \"packageManager\": \"npm@11.3.0\",\n \"overrides\": {\n \"react\": \"$react\",\n \"react-dom\": \"$react-dom\"\n },\n \"dependencies\": {\n \"@tailwindcss/typography\": \"^0.5.16\",\n \"next\": \"15.3.1\",\n \"next-auth\": \"^5.0.0-beta.27\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"tailwindcss-animate\": \"^1.0.7\"\n },\n \"devDependencies\": {\n \"@eslint/eslintrc\": \"^3\",\n \"@tailwindcss/postcss\": \"^4\",\n \"@types/node\": \"^20\",\n \"@types/react\": \"^19\",\n \"@types/react-dom\": \"^19\",\n \"eslint\": \"^9\",\n \"eslint-config-next\": \"15.3.1\",\n \"tailwindcss\": \"^3.4.1\",\n \"typescript\": \"^5\"\n }\n}\n```\n\n```text\nTailwindCSS\n```\n\n```text\nTailwindCSS\n```\n\n```none\nnpm install tailwindcss@4 @tailwindcss/postcss postcss\n```\n\n```js\nconst config = {\n plugins: {\n \"@tailwindcss/postcss\": {},\n },\n};\nexport default config;\n```\n\n```css\n@import \"tailwindcss\";\n```\n\n```text\ntailwind.config.js\n```\n\n```text\npostcss.config.mjs\n```\n\n```text\n@tailwindcss/postcss\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@tailwind\n```\n\n```text\nglobal.css\n```\n\n========================================\n\nComments:\n- Based on your `package.json`, you have installed TailwindCSS v3, but you are also using `@theme`, which belongs to the new v4 CSS-first configuration. You should clarify which version you actually want to use.\n- @rozsazoltan I want clarification for the v4 specifically.","metadata":{"transformedAt":"2026-08-18T18:33:42.947Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":15,"totalLines":388,"estimatedTokens":2538}}819{"id":"stack-79807090","source":"stackoverflow","questionId":79807090,"title":"Radix UI's global CSS cannot be overridden with TailwindCSS utilities - only with !important","tags":["css","next.js","tailwind-css","tailwind-css-4","radix-ui"],"text":"Title: Radix UI's global CSS cannot be overridden with TailwindCSS utilities - only with !important\nTags: css, next.js, tailwind-css, tailwind-css-4, radix-ui\nSource: Stack Overflow\n\nQuestion:\nI'm using ShadCN UI, **Radix UI** with TailwindCSS v4. I noticed that Tailwind classes don't work unless I add `!important`. For example:\n\n```\n\n \n \n \n {locations.map((location) => (\n \n {location.name}\n \n ))}\n \n\n \n \n \n\n```\n\nThe code relies heavily on `!important`. If I remove it, the app breaks completely.\n\nHow can I combine Radix UI and TailwindCSS v4 so that TailwindCSS utilities always override Radix component styles, but Radix UI component styles remain stronger than the default base styles (base Here's my **global.css**:\n\n```\n@import \"@radix-ui/themes/styles.css\";\n@import \"tailwindcss\";\n\n@custom-variant dark (&:is(.dark *));\n\n@plugin \"tailwindcss-animate\";\n\nhtml,\nbody {\n max-width: 100vw;\n overflow-x: hidden;\n font-family: \"Lato\", sans-serif !important;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Override component library fonts */\n[data-radix-collection-item],\n[data-radix-scroll-area-viewport],\n[data-radix-select-content],\n[data-radix-select-item],\n[data-radix-select-trigger],\n.radix-themes,\n.radix-themes *,\nbutton,\ninput,\nselect,\ntextarea,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nspan,\ndiv {\n font-family: \"Lato\", sans-serif !important;\n}\n\n* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n font-family: \"Lato\", sans-serif !important;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n\n@media (prefers-color-scheme: dark) {\n html {\n color-scheme: dark;\n }\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n font-family: \"Lato\", sans-serif;\n }\n}\n```\n\n========================================\n\nTop Answer:\n**Important note**: *The question contains too many inaccuracies; this answer can be deleted after the question is revised, as it is no longer relevant.*\n\n### Breaking changes from v4\n\nFrom v4 onward, there's no need for a `tailwind.config.js` - just delete it.\n\n- New CSS-first configuration option in v4\n\nStarting with v4, the `@tailwind` directive has been removed - you only need a single import instead:\n\n- Removed @tailwind directives\n\nAvoid relying on `@media prefers-color-scheme` if you want to switch dark mode manually. From v4 onward, use the `@variant dark` instead:\n\n- How to use custom color themes in TailwindCSS v4\n\nAnd from v4 onward, they rely heavily on CSS layers, so unlayered CSS (like the one you're using) is too strong compared to TailwindCSS utilities:\n\n- From v4 the reset style cannot be overridden by TailwindCSS classes\n\n- What is the order of precedence for CSS? How working CSS Cascade Layers? - StackOverflow\n\nPlace them in `@layer base` if they are considered default styles:\n\n```\n/* See more: https://stackoverflow.com/a/79807110/15167500 */\n@import 'tailwindcss';\n@import '@radix-ui/themes/styles.css' layer(components);\n\n@custom-variant dark (&:is(.dark *));\n/* @tailwind components; */ /* Removed */\n/* @tailwind utilities; */ /* Removed */\n\n@layer base {\n /* @media (prefers-color-scheme: dark) { */ /* Ignore this */\n @variant dark { /* Successfully for manual dark mode */\n html {\n color-scheme: dark;\n }\n }\n\n html,\n body {\n max-width: 100vw;\n overflow-x: hidden;\n font-family: \"Lato\", sans-serif !important;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n font-family: \"Lato\", sans-serif !important;\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n font-family: \"Lato\", sans-serif;\n }\n\n /* Override component library fonts */\n [data-radix-collection-item], [data-radix-scroll-area-viewport], [data-radix-select-content], [data-radix-select-item], [data-radix-select-trigger], .radix-themes, .radix-themes *, button, input, select, textarea, h1, h2, h3, h4, h5, h6, p, span, div {\n font-family: \"Lato\", sans-serif !important;\n }\n \n a {\n color: inherit;\n text-decoration: none;\n }\n}\n```\n\nExtra: avoid using `@apply` if possible:\n\n- Why stop using `@apply`\n\nAnd create the missing settings. For example, in the case of `border-border`, your `border` color doesn't exist yet; for `outline-ring`, your `ring` color doesn't exist; for `bg-background`, a color named `background` doesn't exist; etc.\n\n- **Which TailwindCSS v4 namespace matches a given TailwindCSS v3's theme keys?**\n\n- **How to override theme variables in TailwindCSS v4 - `@theme` vs `@layer theme` vs `:root`**\n\n- Should I use `@theme` or `@theme inline`?\n\n- When should I use `*` and when should I use `:root, :host` as the parent selector?\n\nFor global colors:\n\n```\n@theme {\n --color-border: #ccc; /* should use border-border, but also text-border, bg-border, etc. */\n --color-ring: #ddd;\n --color-background: #eee;\n}\n```\n\nUndocumented, for utility-specific colors:\n\n```\n@theme {\n --border-color-border: #ccc; /* only for border-border */\n --outline-color-ring: #ddd; /* only for ring-ring and outline-ring */\n --background-color-background: #eee; /* only for bg-background */\n}\n```\n\nAnd I see you're using a plugin in the config file. From v4 onward, the new `@plugin` directive allows this in the CSS-first configuration, like this:\n\n```\n@plugin \"tailwindcss-animate\";\n```\n\n========================================\n\nCode:\n```html\n<section className=\"bg-gray-100 !px-15 !pt-15 !pb-20 rounded-[16px]\">\n <Card className=\"bg-white !px-10 !py-[35px] shadow-xl border-0 rounded-[16px] max-w-[1280px] !mx-auto\">\n <Tabs value={activeLocation} onValueChange={handleTabChange} className=\"w-full\">\n <TabsList className=\"flex justify-start gap-2 !mb-8 bg-transparent !p-0\">\n {locations.map((location) => (\n <TabsTrigger\n key={location.id}\n value={location.value}\n className=\"w-fit min-w-[60px] sm:min-w-[89px] h-[38px] !px-3 !py-1.5 sm:!px-5 sm:!py-2 gap-2.5 rounded-4xl text-xs sm:text-sm font-semibold transition-colors data-[state=active]:!bg-primary data-[state=active]:!text-primary-foreground data-[state=active]:shadow-sm data-[state=inactive]:!bg-white data-[state=inactive]:!text-black hover:data-[state=inactive]:bg-gray-50\"\n >\n {location.name}\n </TabsTrigger>\n ))}\n </TabsList>\n\n <Separator className=\"!mt-2 !mb-6\" />\n </Tabs>\n </Card>\n</section>\n```\n\n```text\n@import \"@radix-ui/themes/styles.css\";\n@import \"tailwindcss\";\n\n@custom-variant dark (&:is(.dark *));\n\n@plugin \"tailwindcss-animate\";\n\nhtml,\nbody {\n max-width: 100vw;\n overflow-x: hidden;\n font-family: \"Lato\", sans-serif !important;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Override component library fonts */\n[data-radix-collection-item],\n[data-radix-scroll-area-viewport],\n[data-radix-select-content],\n[data-radix-select-item],\n[data-radix-select-trigger],\n.radix-themes,\n.radix-themes *,\nbutton,\ninput,\nselect,\ntextarea,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nspan,\ndiv {\n font-family: \"Lato\", sans-serif !important;\n}\n\n* {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n font-family: \"Lato\", sans-serif !important;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n\n@media (prefers-color-scheme: dark) {\n html {\n color-scheme: dark;\n }\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n font-family: \"Lato\", sans-serif;\n }\n}\n```\n\n```text\n!important\n```\n\n```text\n!important\n```\n\n```css\n@import 'tailwindcss';\n@import '@radix-ui/themes/styles.css' layer(components);\n```\n\n```css\n@import 'tailwindcss';\n@import '@radix-ui/themes/styles.css' layer(components);\n\n@layer base {\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n /* override default font-family, but it will be weaker than all Radix UI styles, which is not a problem */\n font-family: \"Lato\", sans-serif; /* avoid using !important modifier */\n }\n\n html {\n color-scheme: light;\n @variant dark { /* use @variant and CSS-nesting instead of @media (prefers-color-scheme: dark) */\n color-scheme: dark;\n }\n }\n}\n\n@layer components {\n /* Override radix component library fonts */\n /* Note: I don't fully understand this part - the many listings in the question - but * is sufficient to select all elements */\n\n * {\n /* it will properly override the styling of Radix UI components, but it will be weaker than the TailwindCSS utilities, so for example the font-serif class will remain strong */\n font-family: \"Lato\", sans-serif; /* avoid using !important modifier */\n }\n}\n```\n\n```css\n@layer theme, base, components, utilities;\n\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/preflight.css\" layer(base);\n@import \"tailwindcss/utilities.css\" layer(utilities);\n```\n\n```css\n/* Added new radix layer between base and components */\n/* Sort: theme < base < radix < components < utilities */\n@layer theme, base, radix, components, utilities;\n\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/preflight.css\" layer(base);\n@import \"tailwindcss/utilities.css\" layer(utilities);\n\n/* Import radix styles to new radix layer */\n@import \"@radix-ui/themes/styles.css\" layer(radix);\n```\n\n```css\n@layer theme, base, radix, components, utilities;\n\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/preflight.css\" layer(base);\n@import \"@radix-ui/themes/styles.css\" layer(radix);\n@import \"tailwindcss/utilities.css\" layer(utilities);\n\n/* weaker than radix layer */\n@layer base {\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n font-family: \"Lato\", sans-serif; /* avoid using !important modifier */\n }\n\n html {\n color-scheme: light;\n @variant dark { /* use @variant and CSS-nesting instead of @media (prefers-color-scheme: dark) */\n color-scheme: dark;\n }\n }\n}\n\n/* stronger than radix layer */\n@layer components {\n /* Override radix component library fonts */\n /* Note: I don't fully understand this part - the many listings in the question - but * is sufficient to select all elements */\n\n * {\n font-family: \"Lato\", sans-serif; /* avoid using !important modifier */\n }\n}\n```\n\n```css\n@import 'tailwindcss';\n@import '@radix-ui/themes/styles.css' layer(components);\n```\n\n```text\nstyles.css\n```\n\n```text\ncomponents\n```\n\n```text\nlayer(components)\n```\n\n```text\nbase\n```\n\n```text\ncomponents\n```\n\n```text\ncomponents\n```\n\n```text\nbase\n```\n\n```text\n!important\n```\n\n```text\n!important\n```\n\n```text\nbg-red-500!\n```\n\n```text\n!bg-red-500\n```\n\n```text\n!important\n```\n\n```text\n@layer utilities\n```\n\n```text\n@layer\n```\n\n```text\n@layer\n```\n\n```text\n@tailwind base\n```\n\n```text\n@tailwind base\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\n@import \"tailwindcss\";\n```\n\n```text\nradix-ui/themes\n```\n\n```text\nradix\n```\n\n```text\nutilities\n```\n\n```text\nbase\n```\n\n```text\nradix\n```\n\n```text\ncomponents\n```\n\n```text\nbase\n```\n\n```text\nutilities\n```\n\n```css\n/* See more: https://stackoverflow.com/a/79807110/15167500 */\n@import 'tailwindcss';\n@import '@radix-ui/themes/styles.css' layer(components);\n\n@custom-variant dark (&:is(.dark *));\n/* @tailwind components; */ /* Removed */\n/* @tailwind utilities; */ /* Removed */\n\n@layer base {\n /* @media (prefers-color-scheme: dark) { */ /* Ignore this */\n @variant dark { /* Successfully for manual dark mode */\n html {\n color-scheme: dark;\n }\n }\n\n html,\n body {\n max-width: 100vw;\n overflow-x: hidden;\n font-family: \"Lato\", sans-serif !important;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n font-family: \"Lato\", sans-serif !important;\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n font-family: \"Lato\", sans-serif;\n }\n\n /* Override component library fonts */\n [data-radix-collection-item], [data-radix-scroll-area-viewport], [data-radix-select-content], [data-radix-select-item], [data-radix-select-trigger], .radix-themes, .radix-themes *, button, input, select, textarea, h1, h2, h3, h4, h5, h6, p, span, div {\n font-family: \"Lato\", sans-serif !important;\n }\n \n a {\n color: inherit;\n text-decoration: none;\n }\n}\n```\n\n```css\n@theme {\n --color-border: #ccc; /* should use border-border, but also text-border, bg-border, etc. */\n --color-ring: #ddd;\n --color-background: #eee;\n}\n```\n\n```css\n@theme {\n --border-color-border: #ccc; /* only for border-border */\n --outline-color-ring: #ddd; /* only for ring-ring and outline-ring */\n --background-color-background: #eee; /* only for bg-background */\n}\n```\n\n```css\n@plugin \"tailwindcss-animate\";\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@tailwind\n```\n\n```text\n@media prefers-color-scheme\n```\n\n```text\n@variant dark\n```\n\n```text\n@layer base\n```\n\n```text\n@apply\n```\n\n```text\n@apply\n```\n\n```text\nborder-border\n```\n\n```text\nborder\n```\n\n```text\noutline-ring\n```\n\n```text\nring\n```\n\n```text\nbg-background\n```\n\n```text\nbackground\n```\n\n```text\n@theme\n```\n\n```text\n@layer theme\n```\n\n```text\n:root\n```\n\n```text\n@theme\n```\n\n```text\n@theme inline\n```\n\n```text\n*\n```\n\n```text\n:root, :host\n```\n\n```text\n@plugin\n```\n\n========================================\n\nComments:\n- Is this something put together by an AI? You’re mixing v3 and v4 syntax. Which one are you using?\n- I'm working with v4 and yeah, I asked ai for the intial code generation\n- Classic mistake. AI models mostly work with data that's several years old, and they may even mix things up to produce a seemingly correct result. But there are so many breaking changes between v3 and v4 that you can't rely on v3 solutions in v4. Moreover, many AIs don't have 2025 data, which is a fundamental gap for v4, released in January 2025.\n- Now that you've generated your code solely with AI, I have no idea what you know about v4 and what you don't. I think you should go through these useful links manually, without AI - there’s a lot you can learn from them: stackoverflow.com/a/79383884/15167500, and stackoverflow.com/a/79380522/15167500, and reddit.com/r/tailwindcss/comments/1oe6pdt/comment/nkz4xim - After that, you can ask in a focused way what doesn't work in v4, without any other errors.\n- I've posted two answers. It would be good to update the question so that it exclusively refers to Radix UI; then my first answer about breaking changes could be deleted, and the question could be focused on TailwindCSS v4 - Radix UI, where my second answer provides the solution with proper layer handling: stackoverflow.com/a/79807110/15167500\n- I've slightly edited the question to focus on the main issues rather than minor typos. The main problem is that Radix should be weaker than TailwindCSS, but you should still be able to override Radix component styles yourself - for example, the default font. (Please review my first answer; I will likely delete it in the future since it's not closely related to the question - I only included it to be helpful.)\n- I just checked this as well. Thanks a lot for this input\n- Thanks so much for this. So Helpful. After removing the universal reset { padding: 0; margin: 0; }.. the app styles broke. I mean weird margin and padding that were not present before\n- @PerfDev. Update: It works so well now. Appreciate!","metadata":{"transformedAt":"2026-08-18T18:33:42.947Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":62,"totalLines":690,"estimatedTokens":3833}}820{"id":"stack-77353868","source":"stackoverflow","questionId":77353868,"title":"Next.js 13 + Tailwind - localFont not rendering/applying to font-sans class","tags":["reactjs","next.js","tailwind-css","typography"],"text":"Title: Next.js 13 + Tailwind - localFont not rendering/applying to font-sans class\nTags: reactjs, next.js, tailwind-css, typography\nSource: Stack Overflow\n\nQuestion:\nI'm starting up a project using Nextjs and TailwindCSS, and been trying to get the fonts to work using variables - however it is not.\n\nMy `layout.js`:\n\n```\nimport localFont from \"next/font/local\";\n \n // Font files can be colocated inside of `app`\n const customFont = localFont({\n src: [\n {\n path: \"./components/typography/localFont/exConSemiBold.ttf\",\n weight: \"normal\",\n style: \"normal\",\n },\n ],\n variable: \"--custom\",\n });\n \n export default function RootLayout({ children }) {\n return (\n \n {children}\n \n );\n }\n```\n\nMy `tailwind.config.js`:\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n extend: {\n fontFamily: {\n sans: [\"var(--custom)\"],\n },\n colors: {\n },\n },\n },\n plugins: [require(\"@tailwindcss/typography\")],\n};\n```\n\nComponent in which I am trying to use the font:\n(`app/Car/page.js`)\n\n```\nexport default function Car() {\n return This is a car\n\n;\n}\n```\n\nIt seems nothing gets applied by using the class `font-sans`.\n*The font loads in the generated CSS, and using the inspector to manually set the `font-family` to the font name generated by the variable, it shows.*\n\nSome weird things:\n\n- Setting `customFont.className` to the document, instead of `customFont.variable` the font loads properly\n\n- I tried using `font-custom` and other namings instead of `font-sans`, with no success\n\n- Tried different font files without any success\n\n========================================\n\nCode:\n```js\nimport localFont from \"next/font/local\";\n \n // Font files can be colocated inside of `app`\n const customFont = localFont({\n src: [\n {\n path: \"./components/typography/localFont/exConSemiBold.ttf\",\n weight: \"normal\",\n style: \"normal\",\n },\n ],\n variable: \"--custom\",\n });\n \n export default function RootLayout({ children }) {\n return (\n <html lang=\"en\" className={`${customFont.variable} font-sans`}>\n <body>{children}</body>\n </html>\n );\n }\n```\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n extend: {\n fontFamily: {\n sans: [\"var(--custom)\"],\n },\n colors: {\n },\n },\n },\n plugins: [require(\"@tailwindcss/typography\")],\n};\n```\n\n```js\nexport default function Car() {\n return <p className=\"font-sans\">This is a car</p>;\n}\n```\n\n```text\nlayout.js\n```\n\n```text\ntailwind.config.js\n```\n\n```text\napp/Car/page.js\n```\n\n```text\nfont-sans\n```\n\n```text\nfont-family\n```\n\n```text\ncustomFont.className\n```\n\n```text\ncustomFont.variable\n```\n\n```text\nfont-custom\n```\n\n```text\nfont-sans\n```\n\n```text\nimport \"./globals.css\"\n```\n\n```text\nlayout.js\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.947Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":175,"estimatedTokens":768}}821{"id":"stack-78326282","source":"stackoverflow","questionId":78326282,"title":"Tailwind set `group-hover` on button only when enabled","tags":["css","tailwind-css"],"text":"Title: Tailwind set `group-hover` on button only when enabled\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have some buttons styled with TailwindCSS.\n\nThese buttons contains some icons / helper text (``) that should receive a color (*different than the color used for button text*) when the mouse is over the button.\n\nI used the `group` class on button, and then in the inner element:\n\n\r\n\r\n\n```\n\n helper text\n\n helper text\n\n```\n\n\r\n\r\n\r\n\nNotifce that the hover effect is set only when **the button is enabled** (by using `hover:enabled`).\n\nIf the button is **disabled**, I want to disable this hover effect on the helper text well.\n\nI've tried `group-hover:enabled:text-pink-900`, but it does not work.\n\n`disabled:pointer-events-none` is not an option for me, because it will break `disabled:cursor-not-allowed`.\n\nExample:\nhttps://play.tailwindcss.com/US7h6jStv9\n\n========================================\n\nTop Answer:\nCan you please check the below solution? Hope it will work for you.\n\n\r\n\r\n\n```\n\nspan]:text-red-700 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 disabled:opacity-50\">\n Not Disabled\n\nspan]:text-red-700 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 disabled:opacity-50 disabled:hover-[&>span]:text-white\"\n disabled>\n Disabled\n\n```\n\n\r\n\r\n\r\n\nExample:\nhttps://play.tailwindcss.com/hXHNBTxnvz\n\n========================================\n\nCode:\n```html\n<script src=\"https://cdn.tailwindcss.com#.js\"></script>\n\n<button class=\"group bg-indigo-500 hover:enabled:bg-indigo-400 disabled:cursor-not-allowed\">\n <span class=\"group-hover:text-pink-900\">helper text</span>\n</button>\n\n<button disabled class=\"group bg-indigo-500 hover:enabled:bg-indigo-400 disabled:cursor-not-allowed\">\n <span class=\"group-hover:text-pink-900\">helper text</span>\n</button>\n```\n\n```text\n<span>\n```\n\n```text\ngroup\n```\n\n```text\nhover:enabled\n```\n\n```text\ngroup-hover:enabled:text-pink-900\n```\n\n```text\ndisabled:pointer-events-none\n```\n\n```text\ndisabled:cursor-not-allowed\n```\n\n```html\n<span class=\"group-hover:group-enabled:text-pink-900\">★</span>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com#.js\"></script>\n\n<button class=\"group bg-indigo-500 hover:enabled:bg-indigo-400 disabled:cursor-not-allowed ...\">\n Button text\n <span class=\"group-hover:group-enabled:text-pink-900\">★</span>\n</button>\n\n<button disabled class=\"group bg-indigo-500 hover:enabled:bg-indigo-400 disabled:cursor-not-allowed ...\">\n Button text\n <span class=\"group-hover:group-enabled:text-pink-900\">★</span>\n</button>\n```\n\n```css\n.group:hover:enabled .(classname) {\n --tw-text-opacity: 1;\n color: rgb(131 24 67 / var(--tw-text-opacity));\n}\n```\n\n```text\ngroup-*\n```\n\n```text\ngroup-hover:group-enabled:...\n```\n\n```text\ngroup-hover:group-enabled:text-indigo-900\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com#.js\"></script>\n\n<button class=\"group bg-indigo-500 hover:bg-indigo-400 disabled:pointer-events-none\">\n <span class=\"group-hover:text-pink-900\">helper text</span>\n</button>\n\n<button disabled class=\"group bg-indigo-500 hover:bg-indigo-400 disabled:pointer-events-none\">\n <span class=\"group-hover:text-pink-900\">helper text</span>\n</button>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com#.js\"></script>\n\n<button\n class=\"rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold uppercase tracking-wider text-white hover:bg-indigo-400 hover-[&>span]:text-red-700 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 disabled:opacity-50\">\n <span>Not Disabled</span>\n</button>\n<button\n class=\"rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold uppercase tracking-wider text-white hover:bg-indigo-400 hover-[&>span]:text-red-700 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 disabled:opacity-50 disabled:hover-[&>span]:text-white\"\n disabled>\n <span>Disabled</span>\n</button>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com#.js\"></script>\n\n<div class=\"m-4 flex space-x-4\">\n <button class=\"relative rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold uppercase tracking-wider text-white focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 hover:bg-indigo-400 group\">\n Not Disabled\n <span class=\"absolute top-full left-0 w-full bg-pink-500 opacity-0 transition-opacity duration-300 pointer-events-none invisible group-hover:visible group-hover:opacity-100\">\n Helper Text\n </span>\n </button>\n <button class=\"rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold uppercase tracking-wider text-white focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed\" disabled>\n Disabled\n </button>\n</div>\n```\n\n```text\ninvisible\n```\n\n```text\npointer-events-none\n```\n\n```text\ngroup-hover:visible\n```\n\n========================================\n\nComments:\n- `disabled:pointer-events-none` is not an option for me, because it will break `disabled:cursor-not-allowed`.\n- So you gotta write down all the disabled classes into your code or use wrapper to give pointer events none - cursor not allowed stackoverflow.com/questions/46665625/…\n- `disabled:pointer-events-none` is not an option for me, because it will break `disabled:cursor-not-allowed`.\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.\n- Nice. I've managed to implement it with `group-hover:group-enabled`.","metadata":{"transformedAt":"2026-08-18T18:33:42.947Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":201,"estimatedTokens":1400}}822{"id":"stack-76021897","source":"stackoverflow","questionId":76021897,"title":"I am getting 'Uncaught TypeError: props.handleSelect is not a function'","tags":["reactjs","tailwind-css","vite","react-props","react-functional-component"],"text":"Title: I am getting 'Uncaught TypeError: props.handleSelect is not a function'\nTags: reactjs, tailwind-css, vite, react-props, react-functional-component\nSource: Stack Overflow\n\nQuestion:\nI am trying to create custom components using TailwindCSS and Vite. While passing a function I get the error 'Uncaught TypeError: props.handleSelect is not a function'.\n\n```\nconst Navbar = () => {\n const handleSelect = (option) => {\n option == \"Home\"\n ? console.log(option)\n : option == \"View Submissions\"\n ? console.log(option)\n : console.log(option);\n };\n\n return (\n \n {\n navigate(\"/home\");\n }}\n className={`pl-[20px] font-semibold hover:cursor-pointer`}\n >\n MICROTEK\n \n \n \n \n \n );\n};\n```\n\nFor Menu2\n\n```\nconst Menu2 = (props) => {\n const [click, setClick] = useState(false);\n\n return (\n \n {\n setClick(!click);\n }}\n onChange={props.onChange}\n className={\n `${props.className} ` +\n ` flex min-w-[100px] flex-row items-center justify-between rounded font-semibold ${\n click ? \"bg-primary-700\" : \"bg-none\"\n } border-primary-700 hover:bg-primary-700 border-[2px] pl-[10px]`\n }\n >\n {props.placeholder}\n {click == true ? (\n \n ) : (\n \n )}\n \n\n \n {props.options?.map((options) => {\n return (\n {\n props.handleSelect(options);\n }}\n >\n {options}\n \n );\n })}\n \n \n );\n};\n\nexport default Menu2;\n```\n\nI've looked at other answers and they mentioned using `props` or `{handleSelect}` both of which did not work.\n\n========================================\n\nTop Answer:\nYou're passing the `handleSelect` prop like this - `onSelect={handleSelect}`, so in the `Menu2` component you can access it like `props.onSelect(options);`.\n\n========================================\n\nCode:\n```text\nconst Navbar = () => {\n const handleSelect = (option) => {\n option == \"Home\"\n ? console.log(option)\n : option == \"View Submissions\"\n ? console.log(option)\n : console.log(option);\n };\n\n return (\n <div\n className={`bg-primary-700 flex min-h-[50px] min-w-[100vh] flex-row items-center justify-between p-[5px] text-white `}\n >\n <div\n onClick={() => {\n navigate(\"/home\");\n }}\n className={`pl-[20px] font-semibold hover:cursor-pointer`}\n >\n MICROTEK\n </div>\n <div className={`mr-[10px] flex flex-row`}>\n <Menu2\n placeholder=\"Navigate\"\n options={[\"View Submissions\", \"Home\"]}\n onSelect={handleSelect}\n ></Menu2>\n </div>\n </div>\n );\n};\n```\n\n```text\nconst Menu2 = (props) => {\n const [click, setClick] = useState(false);\n\n return (\n <div>\n <button\n name={props.name}\n id={props.id}\n required={props.required}\n value={props.value}\n onClick={() => {\n setClick(!click);\n }}\n onChange={props.onChange}\n className={\n `${props.className} ` +\n ` flex min-w-[100px] flex-row items-center justify-between rounded font-semibold ${\n click ? \"bg-primary-700\" : \"bg-none\"\n } border-primary-700 hover:bg-primary-700 border-[2px] pl-[10px]`\n }\n >\n {props.placeholder}\n {click == true ? (\n <img\n src={upIcon}\n style={{ marginTop: \"2px\", margin: \"9px\" }}\n height=\"10px\"\n width=\"20px\"\n ></img>\n ) : (\n <img\n src={downIcon}\n style={{ marginTop: \"2px\", margin: \"9px\" }}\n height=\"10px\"\n width=\"20px\"\n ></img>\n )}\n </button>\n\n <div\n className={`${\n click == true ? \"\" : \"hidden\"\n } animate-ease-out shadow-primary-700 absolute min-h-[40px] min-w-[100px] max-w-[200px] rounded bg-white text-black shadow-md`}\n >\n {props.options?.map((options) => {\n return (\n <div\n className=\"hover:bg-primary-700 p-[10px] hover:text-white \"\n key={options}\n onClick={() => {\n props.handleSelect(options);\n }}\n >\n {options}\n </div>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default Menu2;\n```\n\n```text\nprops\n```\n\n```text\n{handleSelect}\n```\n\n```text\nconst Menu2 = (props) => {\n const [click, setClick] = useState(false);\n //this will indicate which props are getting passed\n console.log(props); \n\n ...\n}\n```\n\n```text\n<div className={`mr-[10px] flex flex-row`}>\n <Menu2\n placeholder=\"Navigate\"\n options={[\"View Submissions\", \"Home\"]}\n handleSelect={(option) => handleSelect(option)}\n ></Menu2>\n </div>\n```\n\n```text\n{props.options?.map((options) => {\n return (\n <div\n className=\"hover:bg-primary-700 p-[10px] hover:text-white \"\n key={options}\n onClick={() => props.handleSelect(options)}\n >\n {options}\n </div>\n );\n })}\n```\n\n```text\nconsole.log(props)\n```\n\n```text\nMenu.js\n```\n\n```text\nhandleSelect\n```\n\n```text\nhandleSelect\n```\n\n```text\nprop\n```\n\n```text\nsame name\n```\n\n```text\noption\n```\n\n```text\nhandleSelect\n```\n\n```text\nonSelect={handleSelect}\n```\n\n```text\nMenu2\n```\n\n```text\nprops.onSelect(options);\n```\n\n========================================\n\nComments:\n- I have tried `props.onSelect(options)` it shows the same error.\n- Make sure you access the prop by the same name as you pass it. To debug, you can console.log(props) in the Menu2 component to inspect them.\n- Thanks! That worked. I should have named the prop correctly.","metadata":{"transformedAt":"2026-08-18T18:33:42.947Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":18,"totalLines":282,"estimatedTokens":1362}}823{"id":"stack-75498963","source":"stackoverflow","questionId":75498963,"title":"Classes brought from Team A and Team B polluting the same global namespace","tags":["css","tailwind-css"],"text":"Title: Classes brought from Team A and Team B polluting the same global namespace\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am new to Tailwind CSS but there is something that confuses me.\n\nLet's run a scenario:\n\n**Team A**\n\n- builds a UI component library using TailwindCSS (Button, Forms, Dialog, etc)\n\n- publish NPM package where exports `index.ts` and `theme/tailwind.css`\n\n**Team B**\n\n- `npm install` Team A library. Imports `theme/tailwind.css` into their application `main.ts` (entry point).\n\nAt this point, their `main.ts` should have\n\n```\nimport { Button } from '@team-a/ui`\nimport '@team-a/ui/theme/tailwind.css` // tailwind classes coming from Team A\nimport `./theme/main.css` // tailwind CSS global file belonging to Team B\n```\n\nAt this point in time, in the `` tags in the head, we will have classes brought from Team A and Team B, polluting the same global namespace.\n\nHow do you get around this issue?\n\n========================================\n\nCode:\n```text\nimport { Button } from '@team-a/ui`\nimport '@team-a/ui/theme/tailwind.css` // tailwind classes coming from Team A\nimport `./theme/main.css` // tailwind CSS global file belonging to Team B\n```\n\n```text\nindex.ts\n```\n\n```text\ntheme/tailwind.css\n```\n\n```text\nnpm install\n```\n\n```text\ntheme/tailwind.css\n```\n\n```text\nmain.ts\n```\n\n```text\nmain.ts\n```\n\n```text\n<style>\n```\n\n========================================\n\nComments:\n- Thank you @Ricardo Silva. Solution 3) is not feasible as it requires you to also write the tailwindCSS classes using that prefix, which defeats entirely the TW purpose (having to start writing prefix-text-color, prefix-bg-colo, etc). Solution 1) AFAIK doesn't really solve the clash, it just allows your to set a priority but clashes will still happen, you would only be in control of the ordering. It seems Solution 2) is the only one working, using CSS Modules in React/Vue allows for correct scoping, but requires a large refactoring from the UI Component library side of things.\n- You can do scoping with sass as well. But it will require your tailwind output to be imported as a partial and wrapped within a scoping tag (probably an ID or attribute). But yes CSS modules would be best approach imo as well.","metadata":{"transformedAt":"2026-08-18T18:33:42.947Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":73,"estimatedTokens":556}}824{"id":"stack-75995827","source":"stackoverflow","questionId":75995827,"title":"Tailwind v3 - Get all possible background color class names in JS","tags":["javascript","tailwind-css","tailwind-css-3"],"text":"Title: Tailwind v3 - Get all possible background color class names in JS\nTags: javascript, tailwind-css, tailwind-css-3\nSource: Stack Overflow\n\nQuestion:\nI have a Javascript App which is a playground for some UI Components made with **TailwindCSS v3**. These components are *customizable* (colors, background, etc).\n\nFor example, the user will be able to select a background color class from a dropdown (tailwind syntax - eg: `bg-indigo-400`) and the selected class will be applied to the displayed UI component.\n(All the classes are already generated in CSS by using `safelist` option pattern in `tailwind.config`).\n\n**The requirement:**\n\nTo populate the select dropdown options, I need to generate an array of all the possible background color classes, as strings, based on current Tailwind Configuration Colors:\n\nFor example, if my Tailwind Config contains has:\n\n```\ntheme: {\n colors: {\n brown: {\n 50: '#fdf8f6',\n 100: '#f2e8e5',\n ...\n 900: '#43302b',\n },\n primary: '#5c6ac4',\n }\n},\n```\n\nthe available background color classes will be:\n`bg-brown-50`, `bg-brown-100`.... `bg-brown-900`, `bg-primary`.\n\n**What I've tried**\n\nBased on this answer, https://stackoverflow.com/a/70317546/1135971, I was to able to get the available colors:\n\n```\nimport resolveConfig from 'tailwindcss/resolveConfig'\nimport tailwindConfig from 'path/to/your/tailwind.config.js'\n\nconst fullConfig = resolveConfig(tailwindConfig)\n\nconsole.log(fullConfig.theme.colors)\n```\n\nwhich gives me an object with the following format:\n\n```\n{\n \"brown\": {\n \"50\": \"#fdf8f6\",\n \"100\": \"#f2e8e5\",\n ....\n \"900\": \"#43302b\"\n },\n \"primary\": \"#5c6ac4\"\n}\n```\n\nNow, based on this object, I'll need to generate all the background color classes, perhaps looping through all the properties of the object (`Object.entries`) and generating the array of background color classes.\n\nIs there any other approach? Maybe an exposed Tailwind function that I can import?\n\n========================================\n\nTop Answer:\nThis is how I got them:\n\n```\nimport tailwindColors from \"tailwindcss/colors\"\n\nconst colors = Object.keys(tailwindColors)\n```\n\n### Update\n\nThis is only on how to get the default tailwindCSS colors not the custom ones.\n\n========================================\n\nCode:\n```js\ntheme: {\n colors: {\n brown: {\n 50: '#fdf8f6',\n 100: '#f2e8e5',\n ...\n 900: '#43302b',\n },\n primary: '#5c6ac4',\n }\n},\n```\n\n```js\nimport resolveConfig from 'tailwindcss/resolveConfig'\nimport tailwindConfig from 'path/to/your/tailwind.config.js'\n\nconst fullConfig = resolveConfig(tailwindConfig)\n\nconsole.log(fullConfig.theme.colors)\n```\n\n```js\n{\n \"brown\": {\n \"50\": \"#fdf8f6\",\n \"100\": \"#f2e8e5\",\n ....\n \"900\": \"#43302b\"\n },\n \"primary\": \"#5c6ac4\"\n}\n```\n\n```text\nbg-indigo-400\n```\n\n```text\nsafelist\n```\n\n```text\ntailwind.config\n```\n\n```text\nbg-brown-50\n```\n\n```text\nbg-brown-100\n```\n\n```text\nbg-brown-900\n```\n\n```text\nbg-primary\n```\n\n```text\nObject.entries\n```\n\n```js\nimport resolveConfig from \"tailwindcss/resolveConfig\"\nimport tailwindConfig from \"path/to/your/tailwind.config.js\"\nimport flatten from \"tailwindcss/src/util/flattenColorPalette\";\n\nconst fullConfig = resolveConfig(tailwindConfig)\n\nconst theme = fullConfig.theme.colors;\nconst flatPalette = flatten(theme);\n\nconst classes = Object.keys(flatPalette);\n\n/*\n * classes = [\n * 'inherit', 'current', 'transparent', 'black', 'white',\n * 'slate-50', 'slate-100', 'slate-200', 'slate-300', 'slate-400',\n * …\n * ]\n */\n```\n\n```js\nclasses.map(suffix => `bg-${suffix}`);\n```\n\n```text\nutil/flattenColorPalette.js\n```\n\n```text\nString.prototype.endsWith\n```\n\n```js\nimport tailwindColors from \"tailwindcss/colors\"\n\nconst colors = Object.keys(tailwindColors)\n```\n\n========================================\n\nComments:\n- Just to make sure I understood your question correctly, you want an array of all the possible `bg-{colour}-{number}` classes as strings? Can I ask what it'd be used for? (I ask because this sounds a bit like it could be an XY problem)\n- Yes, I would need an array of classes, as strings.\n- In a project I have some UI Components based on Tailwind - eg buttons etc. I've build a playground (a form with some inputs) where a user can customize the button text and button background. The background is a Css class based on TailwindCss `bg-{colour}-{number}`.\n- How to do this in Tailwind 4? The config is now in CSS.\n- This will return Tailwind's default color palette. It won't include any custom colors defined in Tailwind config.\n- Ah yes !, you are totally right.","metadata":{"transformedAt":"2026-08-18T18:33:42.947Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":16,"totalLines":197,"estimatedTokens":1138}}825{"id":"stack-76641302","source":"stackoverflow","questionId":76641302,"title":"Tailwind grid row height to prevent stretching to all same height of \"tallest\" row","tags":["html","css","tailwind-css"],"text":"Title: Tailwind grid row height to prevent stretching to all same height of \"tallest\" row\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nEDIT 2: Here's an example with filler text added: https://play.tailwindcss.com/KPrBMJr6vI\n\nYou can see at \"2XL\" viewport width, that Blocks 3 and 4's heights are super tall. Block 5 behaves as I would like, but I now need just Block 3 and 4 to remain the height of each of their respective sets of content requires.\n\nEDIT 1: It appears when I remove all the \"grid-rows-X\" definitions from the outer-most div, they all start to behave exactly as I want, with the exception of when it's at 2xl media size. Everything below that works perfect it seems. Not sure what definitions to add to get Block 3, 4, and 5 to auto-height to content, but stretch 5 to \"fill\".\n\nI have the layout/code below:\n\n```\n\n \n \n \n\n Block 2: Left Column\n\n \n \n\n### Block 3\n\n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n\n### Block 4\n\n \n blah\n \n \n\n \n \n\n### Block 5\n\n \n\n \n \n \n\n### Block 6: Right Column\n\n \n \n \n\n Block 7\n\n```\n\nwhich produces the following layout:\n\nhttps://i.sstatic.net/tX3PK.png\n\nI'm struggling to figure out how to get each row to only have a height of it's own content. In the case where Block 2 or Block 6 is taller than Blocks 3, 4, and 5 total, I'd want Block 5 to auto-fill the remaining height to match either Block 2 or 6's overall height (2 will sometimes have longer content and sometimes 6 will be longer).\n\nCurrently, my Block 6 has the longest content, and all of the Blocks end up having that same height. When I use \"h-fit\" on Block 1 (top row) for example, the div height shrinks down to the content like I want, but the distance of the second row is still way down the page like it's height is still matching Block 6's height.\n\nHow can I have all Blocks use a height that fits their own content, and have Blocks 2, 5 and 6 \"fill\" down as needed based whichever of those columns has the longest content?\n\n========================================\n\nCode:\n```text\n<div class=\"grid-rows-7 mt-2 grid grid-cols-1 gap-2 text-white lg:mt-4 lg:grid-cols-5 lg:grid-rows-6 lg:gap-4 2xl:grid-rows-5\">\n <div class=\"col-span-1 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-5\">\n <div class=\"relative h-auto overflow-hidden rounded-lg\"></div>\n </div>\n\n <div class=\"col-span-1 col-start-1 row-span-1 row-start-2 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-2 lg:row-span-4 2xl:col-span-2 2xl:row-span-3\">Block 2: Left Column</div>\n\n <div class=\"col-span-1 col-start-1 row-start-3 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-2 2xl:col-span-2 2xl:col-start-3 2xl:row-start-2\">\n <h5 class=\"mb-4 text-xl font-medium text-gray-500 dark:text-white\">Block 3</h5>\n <div class=\"mb-4 items-center justify-between pl-3 pr-3 sm:flex sm:space-x-2 sm:space-y-0\">\n <div class=\"relative inline-flex items-center justify-start\"></div>\n </div>\n\n <div class=\"mb-4 content-center pl-3 pr-3\">\n <div class=\"flex w-full items-center justify-start pb-2\">\n <span class=\"flex text-sm font-medium text-gray-500 dark:text-gray-400\">\n <div role=\"status\" class=\"max-w-sm animate-pulse\">\n <div class=\"h-1 w-24 rounded-full bg-gray-200 dark:bg-gray-700\"></div>\n </div>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"col-span-1 col-start-1 row-start-4 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-3 2xl:col-span-2 2xl:col-start-3 2xl:row-start-3\">\n <h5 class=\"mb-4 text-xl font-medium text-gray-500 dark:text-white\">Block 4</h5>\n <div class=\"mb-4 items-center justify-between pl-3 pr-3 sm:flex sm:space-x-2 sm:space-y-0\">\n <span class=\"ml-2 text-sm text-gray-500 dark:text-gray-400\">blah</span>\n </div>\n </div>\n\n <div class=\"col-span-1 col-start-1 row-start-5 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-4 2xl:col-span-2 2xl:col-start-3 2xl:row-start-4\">\n <h5 class=\"mb-4 text-xl font-medium text-gray-500 dark:text-white\">Block 5</h5>\n </div>\n\n <div class=\"col-span-1 col-start-1 row-span-1 row-start-6 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-5 2xl:col-span-1 2xl:col-start-5 2xl:row-span-3 2xl:row-start-2\">\n <div class=\"mb-8 block w-full\">\n <h5 class=\"text-xl font-medium text-gray-500 dark:text-white\">Block 6: Right Column</h5>\n </div>\n <div class=\"block w-full pt-8\"></div>\n </div>\n\n <div class=\"col-span-1 row-start-7 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-5 lg:row-start-6 2xl:row-start-5\">Block 7</div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com/3.3.2\"></script>\n\n<div class=\"grid-rows-[repeat(7,auto)] mt-2 grid grid-cols-1 gap-2 text-white lg:mt-4 lg:grid-cols-5 lg:grid-rows-[repeat(4,auto)_1fr_auto] lg:gap-4 2xl:grid-rows-[repeat(3,auto)_1fr_auto]\">\n <div class=\"col-span-1 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-5\">\n <div class=\"relative h-auto overflow-hidden rounded-lg\"></div>\n </div>\n\n <div class=\"col-span-1 col-start-1 row-span-1 row-start-2 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-2 lg:row-span-4 2xl:col-span-2 2xl:row-span-3\">Block 2: Left Column</div>\n\n <div class=\"col-span-1 col-start-1 row-start-3 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-2 2xl:col-span-2 2xl:col-start-3 2xl:row-start-2\">\n <h5 class=\"mb-4 text-xl font-medium text-gray-500 dark:text-white\">Block 3</h5>\n <div class=\"mb-4 items-center justify-between pl-3 pr-3 sm:flex sm:space-x-2 sm:space-y-0\">\n <div class=\"relative inline-flex items-center justify-start\"></div>\n </div>\n\n <div class=\"mb-4 content-center pl-3 pr-3\">\n <div class=\"flex w-full items-center justify-start pb-2\">\n <span class=\"flex text-sm font-medium text-gray-500 dark:text-gray-400\">\n <div role=\"status\" class=\"max-w-sm animate-pulse\">\n <div class=\"h-1 w-24 rounded-full bg-gray-200 dark:bg-gray-700\"></div>\n </div>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"col-span-1 col-start-1 row-start-4 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-3 2xl:col-span-2 2xl:col-start-3 2xl:row-start-3\">\n <h5 class=\"mb-4 text-xl font-medium text-gray-500 dark:text-white\">Block 4</h5>\n <div class=\"mb-4 items-center justify-between pl-3 pr-3 sm:flex sm:space-x-2 sm:space-y-0\">\n <span class=\"ml-2 text-sm text-gray-500 dark:text-gray-400\">blah</span>\n </div>\n </div>\n\n <div class=\"col-span-1 col-start-1 row-start-5 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-4 2xl:col-span-2 2xl:col-start-3 2xl:row-start-4\">\n <h5 class=\"mb-4 text-xl font-medium text-gray-500 dark:text-white\">Block 5</h5>\n </div>\n\n <div class=\"col-span-1 col-start-1 row-span-1 row-start-6 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-5 2xl:col-span-1 2xl:col-start-5 2xl:row-span-3 2xl:row-start-2\">\n <div class=\"mb-8 block w-full\">\n <h5 class=\"text-xl font-medium text-gray-500 dark:text-white\">Block 6: Right Column</h5>\n </div>\n <div class=\"block w-full pt-8\"></div>\n </div>\n\n <div class=\"col-span-1 row-start-7 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-5 lg:row-start-6 2xl:row-start-5\">Block 7</div>\n</div>\n```\n\n```text\n1fr\n```\n\n```text\nauto\n```\n\n========================================\n\nComments:\n- This appears to still make Blocks 3, 4, and 5 all equal height, and they all fill the vertical space when either Block 2 or Block 6 have very long content. In the case where either of those 2 Blocks (2 or 6) have long content, I'd only want Block 5 to fill vertically, while 3 and 4 remain only the height of their content.\n- Hmm seems to behave the same. Here's an example with filler text. play.tailwindcss.com/KPrBMJr6vI\n- Seems like you did not implement my solution. Here is your Tailwind Play modified with my solution.\n- oh wow! sorry about that. refresh failed me! lol... so is the class definitions of that outermost-div the only change that was made? which class/definition is doing the \"heavy lifting\" on making it behave as expected now?\n- The class definitions of that outermost-div the only change that was made. The `grid-rows-*` classes are doing the \"heavy lifting\" on making it behave as expected.","metadata":{"transformedAt":"2026-08-18T18:33:42.947Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":197,"estimatedTokens":2119}}826{"id":"stack-76041732","source":"stackoverflow","questionId":76041732,"title":"How to use background with linear gradient in Tailwind css","tags":["css","reactjs","background","tailwind-css"],"text":"Title: How to use background with linear gradient in Tailwind css\nTags: css, reactjs, background, tailwind-css\nSource: Stack Overflow\n\nQuestion:\ni want to use this color in my background\n\n```\nlinear-gradient(355.45deg, #FFFFFF 11.26%, rgba(255, 255, 255, 0) 95.74%)\n```\n\ni know that how to this color in my background using css. but how to use this color using tailwind css.\n\n========================================\n\nTop Answer:\nuse `bg-[...]` and put your custom color or what you want inside `[]`, in tailwind you can also use same way to give custom attributes to more things\n\n========================================\n\nCode:\n```text\nlinear-gradient(355.45deg, #FFFFFF 11.26%, rgba(255, 255, 255, 0) 95.74%)\n```\n\n```js\nbg-[linear-gradient(355.45deg,rgba(255,255,255,100%)11.26%,rgba(255,255,255,0)95.74%)]\n```\n\n```html\n<!doctype html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n\n<body class=\"bg-black\">\n <h1 class=\"text-3xl font-bold underline bg-[linear-gradient(355.45deg,rgba(255,255,255,100%)11.26%,rgba(255,255,255,0)95.74%)]\">\n Hello world!\n </h1>\n</body>\n\n</html>\n```\n\n```text\nbg-[]\n```\n\n```text\nrgba()\n```\n\n```text\nbg-[...]\n```\n\n```text\n[]\n```\n\n========================================\n\nComments:\n- No. we cant to use linear gradient in that way.\n- then maybe this link can help v2.tailwindcss.com/docs/background-image#linear-gradients","metadata":{"transformedAt":"2026-08-18T18:33:42.947Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":69,"estimatedTokens":371}}827{"id":"stack-74946772","source":"stackoverflow","questionId":74946772,"title":"Unable to dismiss alert with TailwindCSS React component","tags":["javascript","reactjs","tailwind-css","flowbite"],"text":"Title: Unable to dismiss alert with TailwindCSS React component\nTags: javascript, reactjs, tailwind-css, flowbite\nSource: Stack Overflow\n\nQuestion:\nI have the following in Code Sandbox\n\n```\nimport React from \"react\";\n\nexport default function HomePage() {\n return (\n <>\n\n \n\n### Welcome to Ticket Management System.\n\n \n \n \n A simple info alert with an example link. Give it a click if you like.\n \n \n Dismiss\n \n \n\n \n );\n}\n```\n\nWhen you click on the \"x\" button to dismiss the alert it doesn't dismiss, though it does have \"data-dismiss-target\" set. I copied and pasted the example from FlowBite. Theirs works but mine doesn't. Why?\nThanks!\n\n========================================\n\nCode:\n```text\nimport React from \"react\";\n\nexport default function HomePage() {\n return (\n <>\n\n <h1>Welcome to Ticket Management System. </h1>\n <div id=\"alert-border-1\" class=\"flex p-4 mb-4 bg-blue-100 border-t-4 border-blue-500 dark:bg-blue-200\" role=\"alert\">\n <svg class=\"flex-shrink-0 w-5 h-5 text-blue-700\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\"></path></svg>\n <div class=\"ml-3 text-sm font-medium text-blue-700\">\n A simple info alert with an <a href=\"#\" class=\"font-semibold underline hover:text-blue-800\">example link</a>. Give it a click if you like.\n </div>\n <button type=\"button\" class=\"ml-auto -mx-1.5 -my-1.5 bg-blue-100 dark:bg-blue-200 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 dark:hover:bg-blue-300 inline-flex h-8 w-8\" data-dismiss-target=\"#alert-border-1\" aria-label=\"Close\">\n <span class=\"sr-only\">Dismiss</span>\n <svg aria-hidden=\"true\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"></path></svg>\n </button>\n</div>\n </>\n );\n}\n```\n\n```html\n<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"https://unpkg.com/flowbite@1.5.5/dist/flowbite.min.css\" />\n <script src=\"https://cdn.tailwindcss.com\"></script>\n </head>\n <body>\n <div id=\"alert-1\" class=\"flex p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200\" role=\"alert\">\n <svg\n aria-hidden=\"true\"\n class=\"flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800\"\n fill=\"currentColor\"\n viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\n clip-rule=\"evenodd\"\n ></path>\n </svg>\n <span class=\"sr-only\">Info</span>\n <div class=\"ml-3 text-sm font-medium text-blue-700 dark:text-blue-800\">\n A simple info alert with an\n <a href=\"#\" class=\"font-semibold underline hover:text-blue-800 dark:hover:text-blue-900\">example link</a>. Give\n it a click if you like.\n </div>\n <button\n type=\"button\"\n class=\"ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300\"\n data-dismiss-target=\"#alert-1\"\n aria-label=\"Close\"\n >\n <span class=\"sr-only\">Close</span>\n <svg\n aria-hidden=\"true\"\n class=\"w-5 h-5\"\n fill=\"currentColor\"\n viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clip-rule=\"evenodd\"\n ></path>\n </svg>\n </button>\n </div>\n\n <script src=\"https://unpkg.com/flowbite@1.5.5/dist/flowbite.js\"></script>\n </body>\n</html>\n```\n\n```text\nflowbite.js\n```\n\n```text\nRequires Flowbite JS\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.947Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":125,"estimatedTokens":1089}}828{"id":"stack-74907541","source":"stackoverflow","questionId":74907541,"title":"Html tailwindcss add border to li tag","tags":["html","css","tailwind-css","border"],"text":"Title: Html tailwindcss add border to li tag\nTags: html, css, tailwind-css, border\nSource: Stack Overflow\n\nQuestion:\nI am using `tailwindcss` to create a side menu and I need some active indicator so I need to show the border at end of `` tag.\n\nRight now its showing like this:\n\n```\n\n \n \n \n \n \n \n \n \n \n \n \n\n```\n\nhttps://i.sstatic.net/VGSCh.png\n\nI want to do it like this\n\nhttps://i.sstatic.net/51FVB.png\n\n========================================\n\nTop Answer:\nTo apply the right border to the element in the tailwind by using the \"border-r-2\" class and also more classes with border variants like \"border-r-4\", \"border-r-8\" etc.\n\nIn your case, you have to apply \"border-r-2\" to `` elements like\n\n``\n\nHear the value \"2\" indicate border width,\n\nFor more information regarding the same here you can find the reference\nhttps://tailwindcss.com/docs/border-width\n\n========================================\n\nCode:\n```text\n<div class=\"bg-bgcolor h-screen\">\n <aside class=\"w-20 bg-white pt-2 rounded-2xl flex flex-col justify-center h-4/5\">\n <ul class=\"flex flex-col items-center\">\n <li>\n <div class=\" text-white bg-black p-2 rounded-2xl\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5}\n stroke=\"currentColor\" class=\"w-6 h-6\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\"\n d=\"M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25\" />\n </svg>\n </div>\n </li>\n </ul>\n </aside>\n</div>\n```\n\n```text\ntailwindcss\n```\n\n```text\n<li>\n```\n\n```html\n<!doctype html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n\n<body>\n <h1 class=\"text-3xl font-bold underline\">\n Hello world!\n </h1>\n\n <div class=\"bg-bgcolor h-screen\">\n <aside class=\"w-20 bg-white pt-2 rounded-2xl flex flex-col justify-center h-4/5\">\n <ul class=\"flex flex-col items-center\">\n <li class=\"pr-2 border-black border-r-2\">\n <div class=\"text-white bg-black p-2 rounded-2xl\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5} stroke=\"currentColor\" class=\"w-6 h-6\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25\" />\n </svg>\n </div>\n </li>\n </ul>\n </aside>\n </div>\n</body>\n\n</html>\n```\n\n```text\n<li>\n```\n\n```text\npr-2 border-black border-r-2\n```\n\n```text\n<li>\n```\n\n```text\n<li class=\"border-r-2\">\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.947Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":8,"totalLines":122,"estimatedTokens":764}}829{"id":"stack-73846771","source":"stackoverflow","questionId":73846771,"title":"Blinking cursor forever during TailwindCSS install process","tags":["tailwind-css","tailwind-css-cli"],"text":"Title: Blinking cursor forever during TailwindCSS install process\nTags: tailwind-css, tailwind-css-cli\nSource: Stack Overflow\n\nQuestion:\nRefer the Step 4:\n\nStart the Tailwind CLI build process (source: Tailwind CSS v3 installation steps)\n\nthe question is once I run the CLI command for CSS processing rebuilding and done is OK with no errors.\n\n```\nnpx tailwindcss -i input.css -o output.css --watch\n```\n\nHowever after that my cursor keeps blinking forever, so I cant issue any more CLI commands so then I need to hit CTRLC (say couple of times) to get a message `Terminate batch job (Y/N)` and I choose `Y` and then its normal command line prompt. This is an irritant.\n\nI can't call any more commands in the terminal while the command is running. How can I issue a command while it is running?\n\n========================================\n\nCode:\n```none\nnpx tailwindcss -i input.css -o output.css --watch\n```\n\n```text\nTerminate batch job (Y/N)\n```\n\n```text\nY\n```\n\n```text\n--watch\n```\n\n========================================\n\nComments:\n- The duplicates do not necessarily point to the exact CLI command mentioned in this question, but the underlying mechanism is the same for any long-running CLI process that watches for file changes. For that reason, the answers there can also be relevant to the Tailwind CLI case: open a new terminal, run the process in parallel, or use a similar approach. This is also what the accepted answer here demonstrates.","metadata":{"transformedAt":"2026-08-18T18:33:42.948Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":42,"estimatedTokens":363}}830{"id":"stack-73993653","source":"stackoverflow","questionId":73993653,"title":"Contain contents of fixed aspect box in tailwind","tags":["css","tailwind-css"],"text":"Title: Contain contents of fixed aspect box in tailwind\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a **fixed aspect ratio** area in my layout using Tailwind 3. It is defined like so...\n\n```\n\n p]:py-5 [&>p]:pl-5\">\n Lorem ipsum\n\n \n \n \n \n wevs\n wevs\n wevs\n \n \n \n\n```\n\nIt looks like this, which is what I want, the bottom parallel with however long the text on the left happens to be. If I add more text on the left the fixed aspect area on the right scales to the height of the content on the left.\n\nhttps://i.sstatic.net/NyuxO.png\n\nSo I want that fixed aspect ratio area to contain its contents without changing size but when I put some extra content into it the whole container grows. Admittedly it grows in the fixed aspect ratio I have set so that is nice, but I'd rather it didn't grow at all!\n\nhttps://i.sstatic.net/bJL9N.png\n\nHere is a link to a full example on Tailwind Play: https://play.tailwindcss.com/oNjWgFb2AW\n\nWith a wide screen (1440px) if you keep adding \"wevs\" you will see the effect.\n\nI've tried a bunch of way to fix the width and also tried playing with limiting the height fidgeting with the grid values but I'm not having any luck. Everything I've tried seem to either break the aspect ratio part, or the container still scales up with the content. 🙏\n\n========================================\n\nCode:\n```text\n<div class=\"grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-1\">\n <div class=\"text-xl text-gray-700 lg:text-lg [&>p]:py-5 [&>p]:pl-5\">\n <p>Lorem ipsum</p>\n </div>\n <div class=\"grid place-items-center\">\n <div class=\"aspect-9/16 w-full bg-blue-300 lg:min-h-full lg:w-auto\">\n <div>\n wevs\n wevs\n wevs\n </div>\n </div>\n </div>\n</div>\n```\n\n```text\n...\n<div class=\"max-h-0 aspect-9/16 w-full bg-blue-300 lg:min-h-full lg:w-auto\">\n...\n```\n\n```text\nmax-h-0\n```\n\n========================================\n\nComments:\n- Thank you Konstantin, that's a great help! While I don't want to look a gift horse in the mouth do you know why that works? It seems a little counterintuitive to me but I'm sure there's just a gap in my understanding around this.\n- @RogerHeathcote I had a similar problem a couple of years ago, and I was looking for a solution for a long time. Unfortunately, I don't remember why it works that way. Perhaps when setting the minimum height, css sets other priorities","metadata":{"transformedAt":"2026-08-18T18:33:42.948Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":74,"estimatedTokens":605}}831{"id":"stack-72980476","source":"stackoverflow","questionId":72980476,"title":"Build separate CSS files using Tailwindcss and laravel-vite-plugin","tags":["laravel","tailwind-css","vite"],"text":"Title: Build separate CSS files using Tailwindcss and laravel-vite-plugin\nTags: laravel, tailwind-css, vite\nSource: Stack Overflow\n\nQuestion:\nI'm trying to build two separate CSS files using Tailwindcss, Laravel and vite-plugin.\n\nThe two css files use different configuration, but I have no idea how specify the correct **tailwind.config.js** for each builds.\n\n- **app.css** should use **tailwind.config.js**\n\n- **mail.css** should use **tailwind-mail.config.js**\n\n**vite.config.js**\n\n```\nimport { defineConfig } from \"vite\"\nimport laravel from \"laravel-vite-plugin\"\n\nexport default defineConfig({\n plugins: [\n laravel({\n input: [\"resources/css/app.css\", \"resources/js/app.js\", \"resources/css/mail.css\"]\n refresh: true,\n })\n ]\n})\n```\n\n**postcss.config.js**\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n**tailwind.config.js**\n\n```\nmodule.exports = {\n content: [\n './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',\n './vendor/laravel/jetstream/**/*.blade.php',\n './storage/framework/views/*.php',\n './resources/views/**/*.blade.php',\n ],\n theme: {},\n plugins: [require(\"@tailwindcss/forms\"), require(\"@tailwindcss/typography\")],\n}\n```\n\n**tailwind-mail.config.js**\n\n```\nmodule.exports = {\n content: [\"./resources/views/mails/**/*.blade.php\"],\n theme: {},\n plugins: [require(\"@tailwindcss/typography\")],\n}\n```\n\n========================================\n\nCode:\n```js\nimport { defineConfig } from \"vite\"\nimport laravel from \"laravel-vite-plugin\"\n\nexport default defineConfig({\n plugins: [\n laravel({\n input: [\"resources/css/app.css\", \"resources/js/app.js\", \"resources/css/mail.css\"]\n refresh: true,\n })\n ]\n})\n```\n\n```js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```js\nmodule.exports = {\n content: [\n './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',\n './vendor/laravel/jetstream/**/*.blade.php',\n './storage/framework/views/*.php',\n './resources/views/**/*.blade.php',\n ],\n theme: {},\n plugins: [require(\"@tailwindcss/forms\"), require(\"@tailwindcss/typography\")],\n}\n```\n\n```js\nmodule.exports = {\n content: [\"./resources/views/mails/**/*.blade.php\"],\n theme: {},\n plugins: [require(\"@tailwindcss/typography\")],\n}\n```\n\n```css\n@config \"./tailwind.config.js\";\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```css\n@config \"./tailwind.mail.config.js\";\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\nimport { defineConfig } from \"vite\"\nimport laravel from \"laravel-vite-plugin\"\n\nexport default defineConfig({\n plugins: [\n laravel({\n input: [\"resources/css/app.css\", \"resources/js/app.js\", \"resources/css/mail.css\"]\n refresh: true,\n })\n ]\n})\n```\n\n```text\n@config <filename>\n```\n\n========================================\n\nComments:\n- Trying to also figure this out. Haven't been able to find anything online related to vite since the original article was for webpack. Please create an answer if you managed to figure it out.\n- @m33ts4k0z Sorry, I haven't figured this out yet.\n- @m33ts4k0z I think the release of Tailwind CSS 3.2 will solve this issue :)\n- @config \"./tailwind.mail.config.js\"; missing semicolon","metadata":{"transformedAt":"2026-08-18T18:33:42.948Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":151,"estimatedTokens":830}}832{"id":"stack-74584719","source":"stackoverflow","questionId":74584719,"title":"Adding a string to a variable in a Tailwind utility class","tags":["css","reactjs","tailwind-css"],"text":"Title: Adding a string to a variable in a Tailwind utility class\nTags: css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to add a variable to a className and need to append a percentage for it to work. For example the following works:\n\n```\nclassName=\"scale-x-[35%]\"\n```\n\nBut the following doesn't:\n\n```\nclassName={`scale-x-[${variableNumber}%]`}\n```\n\nWhat would be the correct way to append the percentage string to my variable?\n\n**Edit: Full code**\n\n```\nexport default function proposalDetail() {\n const [percentage1, setPercentage1] = useState(10);\n const [percentage2, setPercentage2] = useState(35);\n return (\n \n \n \n 0% burn, 2.5% revenue\n 23 voters\n 295.7513474746361 QNTFI ({percentage1}%)\n \n \n)\n```\n\n========================================\n\nTop Answer:\nAccording to the docs, `10` is not a predefined value for the `scale` class. To add a one off custom value, you can do the following:\n\n```\nclassName={`scale-x-[${percentage1}]`}\n```\n\n`0` is 0%, while `1` is 100%.\n\n========================================\n\nCode:\n```text\nclassName=\"scale-x-[35%]\"\n```\n\n```text\nclassName={`scale-x-[${variableNumber}%]`}\n```\n\n```text\nexport default function proposalDetail() {\n const [percentage1, setPercentage1] = useState(10);\n const [percentage2, setPercentage2] = useState(35);\n return (\n <div className=\"relative p-4 my-4 overflow-hidden border border-gray-200 rounded-lg hover:border-indigo-500\">\n <div className={`scale-x-${percentage1}% absolute inset-0 w-full origin-top-left bg-indigo-500 bg-opacity-50`}></div>\n <div className=\"relative text-black z-100 dark:text-white\">\n <div className=\"font-medium\">0% burn, 2.5% revenue</div>\n <div className=\"text-sm\">23 voters</div>\n <div className=\"text-sm\">295.7513474746361 QNTFI ({percentage1}%)</div>\n </div>\n </div>\n)\n```\n\n```text\n<div style={{transform: `scaleX(${percentage1/100})`}} className=\"absolute inset-0 w-full origin-top-left bg-indigo-500 bg-opacity-50\"></div>\n```\n\n```text\nclassName={`scale-x-${percentage1}% ...`}\n```\n\n```text\npercentage1\n```\n\n```text\npercentage2\n```\n\n```text\nstyle\n```\n\n```js\nclassName={`scale-x-[${percentage1}]`}\n```\n\n```text\n10\n```\n\n```text\nscale\n```\n\n```text\n0\n```\n\n```text\n1\n```\n\n========================================\n\nComments:\n- I don't see a problem here. can you post the whole code snippet? maybe variableNumber is `undefined`. Also, are you using Tailwind css? If so, you don't need the square brackets, just `scale-x-${variableNumber}%`\n- When you say \"it doesn't work\" do you mean on initial render or on when your var updates?\n- @jmargolisvt initial render\n- @KarimElghamry added whole code\n- I've tried this, but it doesn't work. className={`scale-x-[${percentage1}] absolute inset-0 w-full origin-top-left bg- indigo-500 bg-opacity-50`}","metadata":{"transformedAt":"2026-08-18T18:33:42.948Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":13,"totalLines":123,"estimatedTokens":699}}833{"id":"stack-72651808","source":"stackoverflow","questionId":72651808,"title":"Tailwindcss not rendering in ExpressJS/React app","tags":["javascript","node.js","reactjs","express","tailwind-css"],"text":"Title: Tailwindcss not rendering in ExpressJS/React app\nTags: javascript, node.js, reactjs, express, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to add TailwindCSS to my existing Express JS + React application. I have tried many different tutorials, such as this one https://tailwindcss.com/docs/installation for regular JS, and this one made specifically for Create-React-App https://tailwindcss.com/docs/guides/create-react-app . I later tried this tutorial for express js https://daily.dev/blog/how-to-use-tailwindcss-with-node-js-express-and-pug\nMy project was initially made with Create-React-App, but I later changed everything to run in Express JS. So I need to build it first before I see any changes. I've done that every single time I try something different. I've even run the tailwind specific build command every time to see if that does anything but so far nothing. It seems like it doesn't even render on my plain html page, nevermind my react side.\n\nHere is my project for reference https://github.com/twbluenaxela/LVChineseBusinessCrawler/pull/35\n\nHere is my scripts for package json\n\n```\n\"scripts\": {\n\"predeploy\": \"npm install\",\n\"dev\": \"react-scripts --openssl-legacy-provider start\",\n\"clientbuild\": \"npm install && node server/index.js\",\n\"test\": \"react-scripts test\",\n\"build\": \"react-scripts --openssl-legacy-provider build\",\n\"build:css\": \"postcss src/index.css -o dist/output.css\",\n\"eject\": \"react-scripts eject\",\n\"start_cors\": \"node cors.js\",\n\"start\": \"node server/index.js\" }\n```\n\nHere's my post css config js\n\n```\nmodule.exports = {\n plugins: [require('tailwindcss'), require('autoprefixer')],\n}\n```\n\nHere's my tailwind config\n\n```\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n \"./build/**/*.html\"\n ],\n theme: {\n extend: {},\n },\n plugins: [\n {\n tailwindcss: {},\n autoprefixer: {},\n },\n ],\n };\n```\n\nHere's my link to my dist folder in my index html (location: public/index.html)\n\n```\n\n```\n\nHere's my express side. I think it possibly may have to deal with express first loading these 'chunk' files generated by running the 'react-scripts build' script and then defaulting to that rather than tailwind?\n\n```\n// Have Node serve the files for our built React app\napp.use(express.static(path.resolve(__dirname, '../build')));\n//this is for tailwind.\napp.use(express.static(path.join(__dirname, 'dist')));\n\n// Stop browser from sending requests to get the icon\napp.get('../build/favicon.ico', (req, res) => res.status(204).end());\n\n// All other GET requests not handled before will return our React app\napp.get('*', (req, res) => {\n res.sendFile(path.resolve(__dirname, '../build/index.html'));\n});\n\n// Start the server and listen on the preconfigured port\napp.listen(port, () => console.log(`App started on port ${port}.`));\n```\n\nHere's the log I get from the server when I reload the page\n\n```\ngitpod /workspace/LVChineseBusinessCrawler (NodemonFix) $ npm run start\n\n> pachong@0.1.0 start\n> node server/index.js\n\nApp started on port 3001.\nGET / 200 3.406 ms - 2371\nGET /dist/output.css 200 1.897 ms - 2371\nGET /static/css/main.a6b1053c.chunk.css 200 0.556 ms - 108\nGET /static/js/2.b2955d3e.chunk.js 200 0.561 ms - 188544\nGET /static/js/main.bfafc08b.chunk.js 200 0.453 ms - 2862\nGET /static/css/main.a6b1053c.chunk.css.map 200 0.609 ms - 227\nGET /favicon.ico 200 0.719 ms - 3870\nGET /manifest.json 200 0.401 ms - 319\n```\n\nAs you can see it does seem like it knows where my output.css is and I'm assuming it loads it? So maybe its' the chunk css overwriting it?\nSo I tested it on my index html in my public folder by changing the h1 heading to this line\n\n```\n\n```\n\nAnd it just shows regular h1 without any underline or anything.\nIs there something I'm not seeing here? I would realllyyy appreciate any help I could get!!\n\nedit1:\nHere's my index.css as well\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n========================================\n\nTop Answer:\nThe problem lies on the `/build` folder and your `tailwind.config.js` file not reading the files it's supposed to read.\n\nYou're supposed to watch for any class used in your `/build` folder files, especially any `html`/`pug` file.\n\nAlso tailwind is not told to watch the `/public` folder, that is why the underline style was not showing up.\n\nTry this `tailwind.config.js` file.\n\n```\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n \"./build/**/*.{js,jsx,ts,tsx,pug,html}\"\n ],\n theme: {\n extend: {},\n },\n plugins: [\n {\n tailwindcss: {},\n autoprefixer: {},\n },\n ],\n };\n```\n\nIf you want Tailwind to watch `/public` too, just add `\"./public/**/*.{js,jsx,ts,tsx,pug,html}\"` on the `content` array. *Not recommended though*.\n\n========================================\n\nCode:\n```text\n\"scripts\": {\n\"predeploy\": \"npm install\",\n\"dev\": \"react-scripts --openssl-legacy-provider start\",\n\"clientbuild\": \"npm install && node server/index.js\",\n\"test\": \"react-scripts test\",\n\"build\": \"react-scripts --openssl-legacy-provider build\",\n\"build:css\": \"postcss src/index.css -o dist/output.css\",\n\"eject\": \"react-scripts eject\",\n\"start_cors\": \"node cors.js\",\n\"start\": \"node server/index.js\" }\n```\n\n```text\nmodule.exports = {\n plugins: [require('tailwindcss'), require('autoprefixer')],\n}\n```\n\n```text\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n \"./build/**/*.html\"\n ],\n theme: {\n extend: {},\n },\n plugins: [\n {\n tailwindcss: {},\n autoprefixer: {},\n },\n ],\n };\n```\n\n```text\n<link href=\"/dist/output.css\" rel=\"stylesheet\">\n```\n\n```text\n// Have Node serve the files for our built React app\napp.use(express.static(path.resolve(__dirname, '../build')));\n//this is for tailwind.\napp.use(express.static(path.join(__dirname, 'dist')));\n\n\n// Stop browser from sending requests to get the icon\napp.get('../build/favicon.ico', (req, res) => res.status(204).end());\n\n// All other GET requests not handled before will return our React app\napp.get('*', (req, res) => {\n res.sendFile(path.resolve(__dirname, '../build/index.html'));\n});\n\n// Start the server and listen on the preconfigured port\napp.listen(port, () => console.log(`App started on port ${port}.`));\n```\n\n```text\ngitpod /workspace/LVChineseBusinessCrawler (NodemonFix) $ npm run start\n\n> pachong@0.1.0 start\n> node server/index.js\n\nApp started on port 3001.\nGET / 200 3.406 ms - 2371\nGET /dist/output.css 200 1.897 ms - 2371\nGET /static/css/main.a6b1053c.chunk.css 200 0.556 ms - 108\nGET /static/js/2.b2955d3e.chunk.js 200 0.561 ms - 188544\nGET /static/js/main.bfafc08b.chunk.js 200 0.453 ms - 2862\nGET /static/css/main.a6b1053c.chunk.css.map 200 0.609 ms - 227\nGET /favicon.ico 200 0.719 ms - 3870\nGET /manifest.json 200 0.401 ms - 319\n```\n\n```text\n<h1 class=\"text-3xl font-bold underline\">\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nexpress\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nindex.css\n```\n\n```text\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n \"./build/**/*.{js,jsx,ts,tsx,pug,html}\"\n ],\n theme: {\n extend: {},\n },\n plugins: [\n {\n tailwindcss: {},\n autoprefixer: {},\n },\n ],\n };\n```\n\n```text\n/build\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n/build\n```\n\n```text\nhtml\n```\n\n```text\npug\n```\n\n```text\n/public\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n/public\n```\n\n```text\n\"./public/**/*.{js,jsx,ts,tsx,pug,html}\"\n```\n\n```text\ncontent\n```\n\n========================================\n\nComments:\n- Hi there! Yes I have 😁\n- Try to restart the server\n- Hey thanks for replying, I have run npm run build, npm ci, and then npm start in that order everytime I tried something different.\n- Thank you so much! This fixed it. So the issue was that, in my index.js I was importing the initial index.css file which only included the tailwind directives. Then I tried importing my generated tailwind css file (located at dist/output.css) and it didnt work. However when I put my generated dist folder into my src folder, then imported that file into my index.js, it started to work. Thank you!\n- I'm happy to hear that, as you are a new user , if you appreciate any of the below answers make sure you up vote and the answer which worked , mark it as tick . Which will help others to quickly find the useful answer\n- I can't upvote yet but I marked your answer with the green checkmark. Thanks again!\n- Hey thanks for taking the time to reply!! So here's what I did. I changed my tailwind.config.js file to include what you have up there. Then I ran npm install, npm ci, npm run build:css (executes this line: postcss src/index.css -o dist/output.css), then I ran npm run build, and finally npm start. Still nothing has changed... I even tried linking the public folder by adding \"./public/**/*.{js,jsx,ts,tsx,pug,html}\" but it doesnt seem to have helped... is there another why i can debug it?","metadata":{"transformedAt":"2026-08-18T18:33:42.948Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":22,"totalLines":320,"estimatedTokens":2224}}834{"id":"stack-72626094","source":"stackoverflow","questionId":72626094,"title":"Icons for Nextjs and tailwind layout","tags":["next.js","tailwind-css"],"text":"Title: Icons for Nextjs and tailwind layout\nTags: next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI was looking through a tutorial located here: https://daily-dev-tips.com/posts/creating-a-sidebar-layout-in-nextjs-with-tailwind/ about a sidebar.\n\nI was wondering if there was a way to use Icons (like heroicons) within the layout file.\nreferenced below:\n\n```\nimport Link from \"next/link\";\nimport { useRouter } from \"next/router\";\nimport HomeIcon from \"@heroicons/react/outline\";\n\nexport default function Layout({ children }) {\n const router = useRouter();\n\n const menuItems = [\n {\n href: \"/\",\n title: \"Home\",\n },\n {\n href: \"/about\",\n title: \"About\",\n },\n {\n href: \"/contact\",\n title: \"Contact\",\n },\n ];\n\n return (\n \n \n Next.js sidebar menu\n \n \n \n \n \n {menuItems.map(({ href, title }) => (\n \n \n \n {title}\n \n \n \n ))}\n \n \n \n {children}\n \n \n );\n}\n```\n\nI tried\n\n```\nhref: \"/\",\n title: \"Home\",\n icon: ,\n```\n\nbut then I wasn't sure exactly how to incorporate it. Any ideas?\n\n========================================\n\nTop Answer:\ni suggest change the array object like this.\n\nsample https://codesandbox.io/s/epic-stitch-h5gn89?file=/src/App.js\n\n```\n{\n href: \"/\",\n title: \"Home\",\n icon: \"HomeIcon\",\n }\n```\n\nand use this component i found on this link.(i changed some of it) https://github.com/tailwindlabs/heroicons/issues/278#issuecomment-851594776\n\nin this solution dont need to import eche icon one by one\n\nDynamicHeroIcon.tsx\n\n```\n// DynamicHeroIcon.tsx\n// Simple Dynamic HeroIcons Component for React (typescript / tsx)\n// by: Mike Summerfeldt (IT-MikeS - https://github.com/IT-MikeS)\n\nimport { FC } from \"react\";\nimport * as HIcons from \"@heroicons/react/outline\";\n\nconst DynamicHeroIcon: FC> = (\n props\n) => {\n const { ...icons } = HIcons;\n const Fprops = { ...props };\n delete Fprops.icon;\n // @ts-ignore\n const TheIcon: JSX.Element = icons[props.icon];\n\n return (\n <>\n {/* @ts-ignore */}\n \n \n );\n};\n\nexport default DynamicHeroIcon;\n```\n\nand use it like this.\n\n```\nimport DynamicHeroIcon from \"./components/DynamicHeroIcon\";\n\n {list.map((item) => {\n return ;\n })}\n```\n\n========================================\n\nCode:\n```text\nimport Link from \"next/link\";\nimport { useRouter } from \"next/router\";\nimport HomeIcon from \"@heroicons/react/outline\";\n\nexport default function Layout({ children }) {\n const router = useRouter();\n\n const menuItems = [\n {\n href: \"/\",\n title: \"Home\",\n },\n {\n href: \"/about\",\n title: \"About\",\n },\n {\n href: \"/contact\",\n title: \"Contact\",\n },\n ];\n\n return (\n <div className=\"min-h-screen flex flex-col\">\n <header className=\"bg-white sticky top-0 h-14 flex justify-center items-center font-semibold uppercase\">\n Next.js sidebar menu\n </header>\n <div className=\"flex flex-col md:flex-row flex-1\">\n <aside className=\"bg-black w-full md:w-60\">\n <nav>\n <ul>\n {menuItems.map(({ href, title }) => (\n <li className=\"m-2\" key={title}>\n <Link href={href}>\n <a\n className={`flex p-2 bg-black text-white rounded hover:bg-red-600 cursor-pointer ${\n router.asPath === href && \"bg-black text-red-600\"\n }`}\n >\n {title}\n </a>\n </Link>\n </li>\n ))}\n </ul>\n </nav>\n </aside>\n <main className=\"flex-1\">{children}</main>\n </div>\n </div>\n );\n}\n```\n\n```text\nhref: \"/\",\n title: \"Home\",\n icon: <HomeIcon />,\n```\n\n```js\nimport { ChatIcon, HomeIcon, PhoneIcon } from \"@heroicons/react/outline\";\n```\n\n```js\nconst menuItems = [\n {\n href: \"/\",\n title: \"Homepage\",\n icon: <HomeIcon className=\"h-4 w-4 mx-2\" />,\n },\n {\n href: \"/about\",\n title: \"About\",\n icon: <ChatIcon className=\"h-4 w-4 mx-2\" />,\n },\n {\n href: \"/contact\",\n title: \"Contact\",\n icon: <PhoneIcon className=\"h-4 w-4 mx-2\" />,\n },\n ];\n```\n\n```js\n{menuItems.map(({ href, title, icon }) => (\n <li className=\"m-2\" key={title}>\n <Link href={href}>\n <a className={`inline-flex items-center w-full p-2 bg-fuchsia-200 rounded hover:bg-fuchsia-400 cursor-pointer ${router.asPath === href && \"bg-fuchsia-600 text-white\"}`}\n >\n {icon} {title}\n </a>\n </Link>\n </li>\n ))}\n```\n\n```js\nimport Link from \"next/link\";\nimport { useRouter } from \"next/router\";\nimport { ChatIcon, HomeIcon, PhoneIcon } from \"@heroicons/react/outline\";\n\nexport default function Layout({ children }) {\n const router = useRouter();\n\n const menuItems = [\n {\n href: \"/\",\n title: \"Homepage\",\n icon: <HomeIcon className=\"h-4 w-4 mx-2\" />,\n },\n {\n href: \"/about\",\n title: \"About\",\n icon: <ChatIcon className=\"h-4 w-4 mx-2\" />,\n },\n {\n href: \"/contact\",\n title: \"Contact\",\n icon: <PhoneIcon className=\"h-4 w-4 mx-2\" />,\n },\n ];\n\n return (\n <div className=\"min-h-screen flex flex-col\">\n <header className=\"bg-purple-200 sticky top-0 h-14 flex justify-center items-center font-semibold uppercase\">\n Next.js sidebar menu\n </header>\n <div className=\"flex flex-col md:flex-row flex-1\">\n <aside className=\"bg-fuchsia-100 w-full md:w-60\">\n <nav>\n <ul>\n {menuItems.map(({ href, title, icon }) => (\n <li className=\"m-2\" key={title}>\n <Link href={href}>\n <a\n className={`inline-flex items-center w-full p-2 bg-fuchsia-200 rounded hover:bg-fuchsia-400 cursor-pointer ${\n router.asPath === href && \"bg-fuchsia-600 text-white\"\n }`}\n >\n {icon} {title}\n </a>\n </Link>\n </li>\n ))}\n </ul>\n </nav>\n </aside>\n <main className=\"flex-1\">{children}</main>\n </div>\n </div>\n );\n}\n```\n\n```text\n{menuItems.map(({ href, title, icon })\n```\n\n```text\n{icon} {title}\n```\n\n```text\nLink\n```\n\n```text\nflex\n```\n\n```text\ninline-flex items-center w-full\n```\n\n```text\n{\n href: \"/\",\n title: \"Home\",\n icon: \"HomeIcon\",\n }\n```\n\n```text\n// DynamicHeroIcon.tsx\n// Simple Dynamic HeroIcons Component for React (typescript / tsx)\n// by: Mike Summerfeldt (IT-MikeS - https://github.com/IT-MikeS)\n\nimport { FC } from \"react\";\nimport * as HIcons from \"@heroicons/react/outline\";\n\nconst DynamicHeroIcon: FC<{ icon: string } & React.HTMLProps<HTMLElement>> = (\n props\n) => {\n const { ...icons } = HIcons;\n const Fprops = { ...props };\n delete Fprops.icon;\n // @ts-ignore\n const TheIcon: JSX.Element = icons[props.icon];\n\n return (\n <>\n {/* @ts-ignore */}\n <TheIcon {...Fprops} aria-hidden=\"true\" />\n </>\n );\n};\n\nexport default DynamicHeroIcon;\n```\n\n```text\nimport DynamicHeroIcon from \"./components/DynamicHeroIcon\";\n\n<DynamicHeroIcon style={{ width: \"52px\" }} icon={\"HomeIcon\"} />\n\n\n\n {list.map((item) => {\n return <DynamicHeroIcon style={{ width: \"52px\" }} icon={item.icon} />;\n })}\n```\n\n```text\nimport {AiFillHome} from \"react-icons/ai\";\n```\n\n```text\n<AiFillHome />\n```\n\n```text\nReact-icons\n```\n\n```text\nnpm\n```\n\n```text\nAiFillHome\n```\n\n========================================\n\nComments:\n- Hey, this looks really good! I ran into a small error though. the line 'delete Fprops.icon;' the operand of a delete operator must be optional\n- i haven't get this error . but for a fast solution you can make icon optional . { FC<{ icon?: string }}","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":19,"totalLines":382,"estimatedTokens":1918}}835{"id":"stack-71685632","source":"stackoverflow","questionId":71685632,"title":"Animated SVG in React","tags":["css","reactjs","animation","svg","tailwind-css"],"text":"Title: Animated SVG in React\nTags: css, reactjs, animation, svg, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a React web app utilizing Tailwind CSS and I'm attempting to import a pre-animated SVG file that I obtained from SVGator, however, the file immediately throws a massive error when imported. What is the best way for imported pre-animated SVG files, if there is a proper method?\n\nWhat I want to animate is a circle with an icon that will revolve entirely around a specific axis, which is a picture in the center.\n\nHere is the circle:\n\n```\n\n \n \n \n\n```\n\nI would much rather just import a pre-animated SVG into the site, as implementing multiple circles revolving around the same radius might become bothersome in regards to CSS.\n\nEDIT: For reference, I have found this answer that depicts a rough structure of what I'd like to implement within React/Tailwind: https://stackoverflow.com/a/39021942/18241240\n\n========================================\n\nTop Answer:\nHopefully I am understanding you correctly. You want to import an SVG file from svgator into your react application.\n\nHere is the solution I found for your issue in the svgator documentation\n\n```\nimport React from 'react';\nimport ExampleSVG from './Example.svg';\n\nfunction App() {\n return (\n svg-animation\n );\n}\nexport default App;\n```\n\nI am also a developer using tailwind and have sort of made a similar SVG to one that you are describing I believe.\n\n```\n\n \n \n \n```\n\nThe svg spins due to the **animate-spin** class from tailwind and ultimately it looks something like a loading animation. Not sure if it could help you out but it is a more do it yourself approach. All of that **d** in the path component is linked to adobe graphics I believe. I simply used the ones found in the tailwindCSS documentation.\n\nHopefully this helps.\n\n========================================\n\nCode:\n```text\n<div className='w-[5%] mx-20 self-center'>\n <div className='shadow-lg bg-gray-200 rounded-full'>\n <img className=\"w-15 mx-auto\" src={images.react} alt=\"React icon\" />\n </div>\n</div>\n```\n\n```text\n<div id=\"container\" className='dark:bg-[#6052dd] bg-[#aaa0ff] transition ease-out duration-500'>\n <div class=\"item\">\n <div className='rounded-[30%] shadow-lg w-[100%] py-[2px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:bg-[#aaa0ff] hover:dark:bg-[#aaa0ff] transition ease-out'>\n <img className=\"w-[90%] my-1 mx-auto\" src={images.html} alt=\"HTML icon\" />\n </div>\n </div>\n <div class=\"item\">\n <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:bg-[#aaa0ff] hover:dark:bg-[#aaa0ff] transition ease-out'>\n <img className=\"w-[90%] my-1 mx-auto\" src={images.react} alt=\"HTML icon\" />\n </div>\n </div>\n <div class=\"item\">\n <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:bg-[#aaa0ff] hover:dark:bg-[#aaa0ff] transition ease-out'>\n <img className=\"w-[90%] my-1 mx-auto\" src={images.flutter} alt=\"HTML icon\" />\n </div>\n </div>\n <div class=\"item\">\n <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:dark:bg-[#aaa0ff] hover:bg-[#aaa0ff] transition ease-out'>\n <img className=\"w-[90%] my-1 mx-auto\" src={images.css} alt=\"HTML icon\" />\n </div>\n </div>\n <div class=\"item\">\n <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:dark:bg-[#aaa0ff] hover:bg-[#aaa0ff] transition ease-out'>\n <img className=\"w-[90%] my-1 mx-auto\" src={images.vue} alt=\"HTML icon\" />\n </div>\n </div>\n <div class=\"item\">\n <div className='rounded-[30%] w-[100%] shadow-lg py-[0px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:dark:bg-[#aaa0ff] hover:bg-[#aaa0ff] transition ease-out'>\n <img className=\"w-[90%] my-1 mx-auto\" src={images.redux} alt=\"HTML icon\" />\n </div>\n </div>\n <div class=\"item\">\n <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:bg-[#aaa0ff] hover:dark:bg-[#aaa0ff] transition ease-out'>\n <img className=\"w-[90%] my-1 mx-auto\" src={images.firebase} alt=\"HTML icon\" />\n </div>\n </div>\n </div>\n```\n\n```text\n#container {\n --n:7; /* number of item */\n --d:45s; /* duration */\n\n width: 500px;\n height: 500px;\n margin: 40px auto;\n display:grid;\n grid-template-columns:30px;\n grid-template-rows:30px;\n place-content: center;\n border-radius: 50%;\n /* background-color: #aaa0ff; */\n}\n.item {\n grid-area:1/3/3/1;\n box-shadow: 50px #000;\n line-height: 80px;\n text-align: center;\n align-self: center;\n width: 80px;\n height: 80px;\n border-radius: 30%;\n /* background: rgb(231, 231, 231); */\n animation: spin var(--d) linear infinite; \n transform:rotate(0) translate(310px) rotate(0);\n}\n@keyframes spin {\n 100% {\n transform:rotate(1turn) translate(310px) rotate(-1turn);\n }\n}\n\n.item:nth-child(1) {animation-delay:calc(-0*var(--d)/var(--n))}\n.item:nth-child(2) {animation-delay:calc(-1*var(--d)/var(--n))}\n.item:nth-child(3) {animation-delay:calc(-2*var(--d)/var(--n))}\n.item:nth-child(4) {animation-delay:calc(-3*var(--d)/var(--n))}\n.item:nth-child(5) {animation-delay:calc(-4*var(--d)/var(--n))}\n.item:nth-child(6) {animation-delay:calc(-5*var(--d)/var(--n))}\n.item:nth-child(7) {animation-delay:calc(-6*var(--d)/var(--n))}\n/*.item:nth-child(N) {animation-delay:calc(-(N - 1)*var(--d)/var(--n))}*/\n```\n\n```text\nimport React from 'react';\nimport ExampleSVG from './Example.svg';\n\nfunction App() {\n return (\n <object type=\"image/svg+xml\" data={ExampleSVG}>svg-animation</object>\n );\n}\nexport default App;\n```\n\n```text\n<svg\n className=\"animate-spin h-10 w-10\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n className=\"opacity-40\"\n cx={\"12\"}\n cy={\"12\"}\n r=\"10\"\n stroke=\"#454545\"\n stroke-width={\"2\"}\n ></circle>\n <path\n fill=\"#FFFFFF\"\n className=\"opacity-75\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n```\n\n========================================\n\nComments:\n- Yeah when I implement it the way the documentation suggests from SVGator, theres a massive error prefaced with \"Module build failed (from ./node_modules/@svgr/webpack/lib/index.js)\"; apparently its a bug with ReactJS of some sort. I'm still relatively new to Tailwind, but here is an example of what I'd like to display in React, granted, there will be more images and etc. involved: stackoverflow.com/a/39021942/18241240\n- I tried tinkering with the SVG and adding different parts, but that whole deal is well out of my realm of expertise. I suggest simply adding the css from one of those answers into your index.css file directly. There was an answer in the same thread that didnt use JQuery here and got a similar result. You also could try copy pasting over the css into their tailwind equivalents but I believe you at the least need to use your index.css file for the webkit transformations. Hopefully someone can provide a more complete answer","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":189,"estimatedTokens":2019}}836{"id":"stack-72040675","source":"stackoverflow","questionId":72040675,"title":"How can i disable a class in Tailwindcss?","tags":["tailwind-css"],"text":"Title: How can i disable a class in Tailwindcss?\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want to disable a class like `list-item`.\nI can disable `corePlugins.display` in configuration file, but how can i disable the `list-item` only.\n\n========================================\n\nCode:\n```text\nlist-item\n```\n\n```text\ncorePlugins.display\n```\n\n```text\nlist-item\n```\n\n```text\nmodule.exports = {\n blocklist: [\n 'list-item',\n ],\n // ...\n}\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":31,"estimatedTokens":114}}837{"id":"stack-71760430","source":"stackoverflow","questionId":71760430,"title":"Tailwind CSS align text in center of border on element","tags":["javascript","reactjs","tailwind-css"],"text":"Title: Tailwind CSS align text in center of border on element\nTags: javascript, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to use Tailwind CSS to align some text within the border of another element, so that the border around my element draws a perimeter around the element, and has a break with the text in the center top of the border.\n\nThis is being done within a React component.\n\nI am very new to Tailwind CSS. So new, in fact, that my desired goal comes from the following StackOverflow Question, but the solutions provided there do not appear to work.\n\nI have tried the following:\n\n- Adding `mt-5` or `pd-5` to both the class for the `h2` and `span` elements for my label, in an effort to add a margin to move the label down into the border, but this does not seem to work.\n\n- Wrapping the `h2` element containing the `span` element in a `div` and applying `mt-5` or `pd-5` to that, but that also did not work.\n\n- I've also tried editing the margin in-browser via the Chrome Development tools, but that did not help.\n\nMy Code:\n\n```\nexport default function Skills() {\n return (\n \n \n \n \n My desired label\n \n \n Some content here.\n \n \n \n \n );\n}\n```\n\nThe `leading-border-text` TailwindCSS class is one that I have defined in my `tailwind.config.js` to simply add a custom line height of 0.1.\n\n```\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {\n lineHeight: {\n 'border-text': '0.1'\n }\n },\n },\n plugins: [],\n}\n```\n\nThis is what my code currently renders:\n\nhttps://i.sstatic.net/RzEBf.png\n\nAnd I'd like for that text, `My desired label` to be in-line with the border just below it.\n\nWhat am I doing wrong?\n\n========================================\n\nTop Answer:\nAfter some more thought, I came up with a solution to my own question.\n\nFor some reason that is not immediately clear to me, adding `mt-5` did not move the label down but adding a negative margin-bottom class, in my case `-mb-2`, did. I would love it if someone could explain why this is the case.\n\nMy solution code:\n\n```\nexport default function Skills() {\n return (\n \n \n \n \n My desired label\n \n \n Some content here.\n \n \n \n \n );\n}\n```\n\nWhat my solution code renders:\n\nhttps://i.sstatic.net/ge6MW.png\n\n========================================\n\nCode:\n```js\nexport default function Skills() {\n return (\n <section id=\"skills\">\n <div className=\"container px-5 py-10 mx-auto\">\n <div className=\"pt-3\">\n <h2 className=\"w-full text-center leading-border-text mt-5\">\n <span className=\"text-sm font-medium\">My desired label</span>\n </h2>\n <div className=\"flex flex-wrap px-5 pb-5 pt-4 border-b border-t border-r border-l border-gray-600 rounded-md\">\n Some content here.\n </div>\n </div>\n </div>\n </section>\n );\n}\n```\n\n```js\nmodule.exports = {\n content: [\n \"./src/**/*.{js,jsx,ts,tsx}\",\n ],\n theme: {\n extend: {\n lineHeight: {\n 'border-text': '0.1'\n }\n },\n },\n plugins: [],\n}\n```\n\n```text\nmt-5\n```\n\n```text\npd-5\n```\n\n```text\nh2\n```\n\n```text\nspan\n```\n\n```text\nh2\n```\n\n```text\nspan\n```\n\n```text\ndiv\n```\n\n```text\nmt-5\n```\n\n```text\npd-5\n```\n\n```text\nleading-border-text\n```\n\n```text\ntailwind.config.js\n```\n\n```text\nMy desired label\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n\n<div class=\"bg-gray-700 min-h-screen text-gray-400\">\n\n <!-- Skills() -->\n <div class=\"container mx-auto px-5 py-10\">\n <div class=\"relative rounded-md border border-gray-600\">\n <p class=\"p-3\">Some content here.</p>\n <h2 class=\"absolute flex top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2\">\n <span class=\"bg-gray-700 px-2 text-sm font-medium\">My desired label</span>\n </h2>\n </div>\n </div>\n <!-- Skills() -->\n\n</div>\n```\n\n```text\nabsolute\n```\n\n```text\nrelative\n```\n\n```js\nexport default function Skills() {\n return (\n <section id=\"skills\">\n <div className=\"container px-5 py-10 mx-auto\">\n <div className=\"pt-3\">\n <h2 className=\"w-full text-center leading-border-text -mb-2 pr-2 pl-2\">\n <span className=\"bg-gray-900 text-sm font-medium\">My desired label</span>\n </h2>\n <div className=\"flex flex-wrap px-5 pb-5 pt-4 border-b border-t border-r border-l border-gray-600 rounded-md\">\n Some content here.\n </div>\n </div>\n </div>\n </section>\n );\n}\n```\n\n```text\nmt-5\n```\n\n```text\n-mb-2\n```\n\n========================================\n\nComments:\n- That is because margins sometimes can overlap each other or other elements that are below or above that particular element. It's always better to use padding if you can. When you put a negative margin you can literally move an element in the opposite direction. Look this way: Above that H2, you did not have space to push element from above because margin overlap div (his parent). Instead you pull H2 down with negative margin","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":20,"totalLines":243,"estimatedTokens":1284}}838{"id":"stack-71576243","source":"stackoverflow","questionId":71576243,"title":"Tailwind CSS: Styling Dynamically Created HTML","tags":["html","css","tailwind-css","auto-generate"],"text":"Title: Tailwind CSS: Styling Dynamically Created HTML\nTags: html, css, tailwind-css, auto-generate\nSource: Stack Overflow\n\nQuestion:\nAny one figure out a good way to style auto-generated HTML code with Tailwind CSS?\n\nExample: Using a library like `Marked` to convert `Markdown` into `HTML`, which would then be injected into the page.\n\nThe key here, is that you do not know the structure of the auto-generated HTML as the markdown could be in any format created by the author.\n\n========================================\n\nTop Answer:\nThe only thing you could do is like style all elements of a type adding tailwind classes via javascript like this:\n\n```\ndocument.querySelectorAll('span').classList.add('text-sm text-gray-500 py-1');\n```\n\netc\n\n========================================\n\nCode:\n```text\nMarked\n```\n\n```text\nMarkdown\n```\n\n```text\nHTML\n```\n\n```text\nnpm install @tailwindcss/typography\n```\n\n```text\nplugins: [\n require(\"@tailwindcss/typography\")\n ],\n```\n\n```text\n<article className=\"prose lg:prose-xl\">\n <div dangerouslySetInnerHTML={{ __html: dynamicContentHere }} />\n </article>\n```\n\n```text\ndocument.querySelectorAll('span').classList.add('text-sm text-gray-500 py-1');\n```\n\n========================================\n\nComments:\n- Maybe you looking for tailwind/typography plugin?\n- @IharAliakseyenka thanks for the lead. This may just be the answer to my question. Digging in now.","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":62,"estimatedTokens":352}}839{"id":"stack-71527810","source":"stackoverflow","questionId":71527810,"title":"Vite appending assets path to image URLs","tags":["tailwind-css","vite"],"text":"Title: Vite appending assets path to image URLs\nTags: tailwind-css, vite\nSource: Stack Overflow\n\nQuestion:\nUsing Vite/React/Tailwind, I am trying to set dev/prod workflow so that images stored in 'public' directory has the correct path when deployed to gh-pages. Below is my Tailwind config starting point where 'backgroundImages' property is referencing an image file stored in 'public'.\n\n\r\n\r\n\n```\nmodule.exports = {\n mode:'jit',\n content: [\"./src/**/*.{html,jsx}\"],\n theme: {\n screens: {\n sm: '480px',\n md: '768px',\n lg: '976px',\n xl: '1440px',\n },\n colors: {\n 'splash-hex': '#6BD1D2',\n 'splash-rgba': 'rgba(107, 209, 210,1.0)',\n 'splash-hsla': 'hsla(181, 53%, 62%, 1.0)',\n },\n fontFamily: {\n sans: ['Graphik', 'sans-serif'],\n serif: ['Merriweather', 'serif'],\n },\n backgroundImages:{\n 'default':'url(\"./10475996-3x2-940x627.jpeg\")'\n },\n extend: {\n spacing: {\n '128': '32rem',\n '144': '36rem',\n },\n borderRadius: {\n '4xl': '2rem',\n }\n }\n },\n prefix: 'tw-',\n plugins: [],\n}\n```\n\n\r\n\r\n\r\n\nIn dev this works fine.\n\n`http://localhost:3000/10475996-3x2-940x627.jpeg`\n\nIn 'dist' folder, it looks correct as well when 'build' is run.\n\nhttps://i.sstatic.net/r1lHE.png\n\nWhen deployed to gh-pages, the path changes to `/assets/` and the image is no longer served from root as I expected according to Vite.\n\n`https://unevenartwork.com/assets/10475996-3x2-940x627.jpeg`\n\nIs there a configuration that would suppress the `/assets/` on deploy or another solution?\n\n========================================\n\nCode:\n```html\nmodule.exports = {\n mode:'jit',\n content: [\"./src/**/*.{html,jsx}\"],\n theme: {\n screens: {\n sm: '480px',\n md: '768px',\n lg: '976px',\n xl: '1440px',\n },\n colors: {\n 'splash-hex': '#6BD1D2',\n 'splash-rgba': 'rgba(107, 209, 210,1.0)',\n 'splash-hsla': 'hsla(181, 53%, 62%, 1.0)',\n },\n fontFamily: {\n sans: ['Graphik', 'sans-serif'],\n serif: ['Merriweather', 'serif'],\n },\n backgroundImages:{\n 'default':'url(\"./10475996-3x2-940x627.jpeg\")'\n },\n extend: {\n spacing: {\n '128': '32rem',\n '144': '36rem',\n },\n borderRadius: {\n '4xl': '2rem',\n }\n }\n },\n prefix: 'tw-',\n plugins: [],\n}\n```\n\n```text\nhttp://localhost:3000/10475996-3x2-940x627.jpeg\n```\n\n```text\n/assets/\n```\n\n```text\nhttps://unevenartwork.com/assets/10475996-3x2-940x627.jpeg\n```\n\n```text\n/assets/\n```\n\n```text\nbuild\n```\n\n```text\ndeploy\n```\n\n```text\nsrc/img\n```\n\n```text\n../img/10475996-3x2-940x627.jpeg\n```\n\n```text\n./img/10475996-3x2-940x627.jpeg\n```\n\n```text\nimg\n```\n\n```text\nsrc\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":150,"estimatedTokens":644}}840{"id":"stack-71517015","source":"stackoverflow","questionId":71517015,"title":"How can I make a Tailwind column full-width when it is the only column in a row","tags":["reactjs","tailwind-css"],"text":"Title: How can I make a Tailwind column full-width when it is the only column in a row\nTags: reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a grid that spans 2 columns per row.\n\n```\nconst items = [1,2,3,4,5,6]\n\n...\n\n{\n items.map(item =>\n \n {item.name}\n \n )\n}\n\n```\n\nWith 6 items, the grid aligns perfectly, with 2 items per row. But if I add an additional item, the new item is added to a new row but is restricted to a single column.\n\nI'm trying to figure out a way to have an item on it's own row span across both columns. Is this possible with tailwind/css, or would it require additional JS to calculate if a row should span.\n\n========================================\n\nCode:\n```text\nconst items = [1,2,3,4,5,6]\n\n...\n\n<ul className=\"grid grid-cols-2 gap-8 mt-16 justify-items-center\">\n{\n items.map(item =>\n <li className=\"text-center max-w-sm\" key={item.name}>\n {item.name}\n </li>\n )\n}\n</ul>\n```\n\n```text\nitems.map((item, i) => {\n const spanClass = (i === items.length - 1) && (items.length % 2) ? 'col-span-2' : '';\n return (\n <li className=`${spanClass} text-center max-w-sm` key={item.name}>\n {item.name}\n </li>\n )\n})\n```\n\n```text\ncol-span-2\n```\n\n========================================\n\nComments:\n- unfortunate that this isn't doable without js currently. But thank you for including a js solution. Marked as correct :)","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":64,"estimatedTokens":346}}841{"id":"stack-70675225","source":"stackoverflow","questionId":70675225,"title":"Color not rendering from props","tags":["javascript","reactjs","react-native","tailwind-css","react-props"],"text":"Title: Color not rendering from props\nTags: javascript, reactjs, react-native, tailwind-css, react-props\nSource: Stack Overflow\n\nQuestion:\nSo, I'm passing in props to my JSX component, and then setting that props into a gradient from black to that prop. But whenever I try this, the gradient ends up going from black to just a transparent background.\n\n\r\n\r\n\n```\nimport React from 'react'\n\nimport Color from './color'\n\nconst App = () => {\n return (\n \n \n \n )\n}\n\nexport default App\n```\n\n\r\n\r\n\r\n\n\r\n\r\n\n```\nimport React from 'react'\n\nconst color = props => {\n\n return (\n \n \n {props.text}\n \n \n )\n}\n\nexport default color\n```\n\n\r\n\r\n\r\n\nWhat should I do?\n\n========================================\n\nCode:\n```js\nimport React from 'react'\n\nimport Color from './color'\n\nconst App = () => {\n return (\n <div className=\"h-screen w-screen\">\n <Color color=\"red-400\" />\n </div>\n )\n}\n\nexport default App\n```\n\n```js\nimport React from 'react'\n\nconst color = props => {\n\n\n return (\n <div className=\"h-screen w-screen\">\n <div className={`h-full w-full absolute bg-gradient-to-r from-cyan-500 to-${props.color}`}>\n {props.text}\n </div>\n </div>\n )\n}\n\nexport default color\n```\n\n```js\nimport React from 'react'\n\nimport Color from './color'\n\nconst App = () => {\n return (\n <div className=\"h-screen w-screen\">\n <Color color=\"to-red-400\" />\n </div>\n )\n}\n\nexport default App\n```\n\n```js\nimport React from 'react'\n\nconst color = props => {\n\n\n return (\n <div className=\"h-screen w-screen\">\n <div className={`h-full w-full absolute bg-gradient-to-r from-cyan-500 ${props.color}`}>\n {props.text}\n </div>\n </div>\n )\n}\n\nexport default color\n```\n\n```text\n'to-red-500'\n```\n\n```text\n`to-${'red-500'}`\n```\n\n```text\ncolor\n```\n\n```text\ntocolor\n```\n\n========================================\n\nComments:\n- Do you have any colour customisation in your Tailwind config? Perhaps you haven't included cyan\n- Ive tried all different kinds of colors, including things like just red-500. And if i just set the color there to something like cyan it renders fine","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":148,"estimatedTokens":544}}842{"id":"stack-70672317","source":"stackoverflow","questionId":70672317,"title":"How to change a button when clicked in Vue JS and Tailwind CSS","tags":["vue.js","vuejs3","tailwind-css","vue-composition-api"],"text":"Title: How to change a button when clicked in Vue JS and Tailwind CSS\nTags: vue.js, vuejs3, tailwind-css, vue-composition-api\nSource: Stack Overflow\n\nQuestion:\nI'm trying to do a Dark mode button toggle, the fist step that I want to make is a icon that changes when I click in the button, but my code isn't running.\nThat's my code: \n\n```\n\n \n \n \n\nexport default {\n setup(){\n const showSidebar = ref(false)\n const stayInDropdown = ref(true)\n const isDark = ref(true)\n return{\n showSidebar,\n stayInDropdown,\n isDark,\n }\n },\n\n```\n\n========================================\n\nCode:\n```html\n<button href=\"\" class=\"px-2 mb-1\" @click=\"isDark = !isDark\">\n <img src=\"../Assets/Icons/moon.svg\" alt=\"\" class=\"w-6 h-5 hidden lg:flex md:flex\" v-if=\"isDark = true\">\n <img src=\"../Assets/Icons/sun.svg\" alt=\"\" class=\"w-6 h-5 hidden lg:flex md:flex\" v-if=\"isDark = false\">\n </button>\n<script>\nexport default {\n setup(){\n const showSidebar = ref(false)\n const stayInDropdown = ref(true)\n const isDark = ref(true)\n return{\n showSidebar,\n stayInDropdown,\n isDark,\n }\n },\n</script>\n```\n\n```html\n<img v-if='isDark' src=\"../Assets/Icons/moon.svg\" alt=\"\" class=\"w-6 h-5 hidden lg:flex md:flex\" >\n <img v-else src=\"../Assets/Icons/sun.svg\" alt=\"\" class=\"w-6 h-5 hidden lg:flex md:flex\" >\n```\n\n```text\nv-if=\"isDark = true\"\n```\n\n```text\ntrue\n```\n\n```text\nisDark\n```\n\n```text\nv-if=\"isDark === true\"\n```\n\n```text\nv-if='isDark'\n```\n\n========================================\n\nComments:\n- Do you get an error message when you run this? If so, post it in your question. Also, a better way to do this would be to make a computed property called something like imgSrc, which returns one url if isDark is true and another if false, and then in your template, just have one tag, like this:","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":80,"estimatedTokens":451}}843{"id":"stack-67831672","source":"stackoverflow","questionId":67831672,"title":"Adding Utility Classes to the Body Tag","tags":["tailwind-css"],"text":"Title: Adding Utility Classes to the Body Tag\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\n```\n\n \n \n Document\n\ntest\n\n```\n\nDoesn't work. What can be the reason for this?\nAny of the utility classes added to the body tag won't work\n\n========================================\n\nCode:\n```text\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document</title>\n</head>\n<body class=\"bg-green-400 h-screen\">\ntest\n\n</body>\n</html>\n```\n\n```text\n<link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n```\n\n```text\nbg-green-400\n```\n\n```text\nh-screen\n```\n\n========================================\n\nComments:\n- Your code works. I wonder why it is not working here play.tailwindcss.com/XLfpavD9LR\n- @zaster It looks like the entire code you enter in the Tailwind Play editor gets placed in a tag on the right, so it doesn't seem to be possible to accomplish your particular requirement using Tailwind Play, but you should be fine to use classes on the body tag elsewhere.","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":53,"estimatedTokens":273}}844{"id":"stack-67194515","source":"stackoverflow","questionId":67194515,"title":"How to implement \"align-content stretch\" in tailwind css","tags":["tailwind-css"],"text":"Title: How to implement \"align-content stretch\" in tailwind css\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm learning and trying to use `tailwind css` but didn't find equivalent to `align-content: stretch` on https://tailwindcss.com/docs/align-content\n\nIs this missing purposely or tailwind doesn't support all the things from plain CSS ?\n\n========================================\n\nCode:\n```text\ntailwind css\n```\n\n```text\nalign-content: stretch\n```\n\n```text\nstretch\n```\n\n========================================\n\nComments:\n- My guess is with Tailwind you can find a good combo classes to achieve what `align-content: stretch` could do. If you have an image of what you want to achieve, I can guide you on possibilities.\n- This is an old answer, but it does make sense to use it. If you set an element to `align-content: center`, for example, but want to return to `align-content: stretch` at a higher breakpoint, there doesn’t seem to be a way to do so. The same goes for `justify-content`.","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":29,"estimatedTokens":251}}845{"id":"stack-70596753","source":"stackoverflow","questionId":70596753,"title":"How to change a dropdown when click Vuejs + Tailwind CSS","tags":["css","vue.js","vuejs3","tailwind-css","laravel-breeze"],"text":"Title: How to change a dropdown when click Vuejs + Tailwind CSS\nTags: css, vue.js, vuejs3, tailwind-css, laravel-breeze\nSource: Stack Overflow\n\nQuestion:\nI want to do a dropdown that when I click in one item the dropdown change, but I don't have ideia to how to do that and I don't find nothing about this. That's my code:\n\n```\n\n \n \n \n Language\n \n\n \n \n \n \n English\n \n \n \n French\n \n \n \n German\n \n \n \n Portuguese\n \n \n \n```\n\nThat what I do:\n\nhttps://i.sstatic.net/UcKl7.png\n\n And what I want\nenter image description here\n\n========================================\n\nTop Answer:\nAdd another property called `selectedLang` and update it when you click on one of the languages :\n\n```\ndata(){\n return{\n show:false,\n selectedLang:null\n }\n}\n```\n\nfor the template add the `@click.native=\"selectedLang='theCurrentLanguage'\"` for each language item :\n\n```\n\n \n \n {{selectedLang??'Language'}}\n \n\n \n \n \n \n English\n \n```\n\n========================================\n\nCode:\n```text\n<div>\n <div class=\"relative\">\n <!-- Dropdown toggle button -->\n <button\n @click=\"show = !show\"\n class=\"flex items-center text-gray-500 rounded-md\"\n >\n <span class=\"\">Language</span>\n </button>\n\n <!-- Dropdown menu -->\n <div\n v-show=\"show\"\n class=\"\n absolute right-0 py-2 mt-5\n rounded-md shadow-xl w-36 bg-white\n \n \"\n >\n <router-link\n to=\"/\"\n class=\"\n inline-flex\n w-full px-4 py-2\n text-sm text-gray-500\n hover:bg-indigo-200 hover:text-indigo-600 \n \"\n >\n <img src=\"../Assets/Img/en.png\" alt=\"\" class=\"w-6 h-4 mr-2\">\n English\n </router-link>\n <router-link\n to=\"/\"\n class=\"\n inline-flex w-full px-4 py-2\n text-sm text-gray-500\n hover:bg-indigo-200 hover:text-indigo-600\n \"\n >\n <img src=\"../Assets/Img/fr.png\" alt=\"\" class=\"w-6 h-4 mr-2\">\n French\n </router-link>\n <router-link\n to=\"/\"\n class=\"\n inline-flex w-full px-4 py-2 text-sm text-gray-500\n hover:bg-indigo-200 hover:text-indigo-600\n \"\n >\n <img src=\"../Assets/Img/de.png\" alt=\"\" class=\"w-6 h-4 mr-2\">\n German\n </router-link>\n <router-link\n to=\"/\"\n class=\"\n inline-flex w-full px-4 py-2 text-sm text-gray-500\n hover:bg-indigo-200 hover:text-indigo-600\n \"\n >\n <img src=\"../Assets/Img/pt.png\" alt=\"\" class=\"w-6 h-4 mr-2\">\n Portuguese\n </router-link>\n </div>\n </div>\n```\n\n```text\nselectedLang\n```\n\n```text\nselected lang\n```\n\n```js\ndata(){\n return{\n show:false,\n selectedLang:null\n }\n}\n```\n\n```html\n<!-- Dropdown toggle button -->\n <button\n @click=\"show = !show\"\n class=\"flex items-center text-gray-500 rounded-md\"\n >\n \n <span class=\"\" >{{selectedLang??'Language'}}</span>\n </button>\n\n <!-- Dropdown menu -->\n <div\n v-show=\"show\"\n class=\"\n absolute right-0 py-2 mt-5\n rounded-md shadow-xl w-36 bg-white\n \n \"\n >\n <router-link\n to=\"/\"\n @click.native=\"selectedlang='English'\"\n class=\"\n inline-flex\n w-full px-4 py-2\n text-sm text-gray-500\n hover:bg-indigo-200 hover:text-indigo-600 \n \"\n >\n <img src=\"../Assets/Img/en.png\" alt=\"\" class=\"w-6 h-4 mr-2\">\n English\n </router-link>\n```\n\n```text\nselectedLang\n```\n\n```text\n@click.native=\"selectedLang='theCurrentLanguage'\"\n```\n\n========================================\n\nComments:\n- the .native after @click '.native' modifier on 'v-on'directive is deprecated\n- obs: i want the img in the dropdown too, what I should do?","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":7,"totalLines":209,"estimatedTokens":975}}846{"id":"stack-68058234","source":"stackoverflow","questionId":68058234,"title":"React Responsive and dynamic Video Grid","tags":["html","css","reactjs","next.js","tailwind-css"],"text":"Title: React Responsive and dynamic Video Grid\nTags: html, css, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHi Guys I am working on a project where I want a dynamic grid of div's that automatically fills the screen space, just like google meet does for the meeting participants. And I am struggling to implement that I am using tailwind css with nextjs, But not able to figure out how to make a grid like google meet.\n\n```\nreturn (\n \n \n {\n setisMessagesOpen(!isMessagesOpen)\n }}\n audioPermession={audioPermession}\n cameraPermession={cameraPermession}\n toggleVideo={toggleVideo}\n toggleAudio={toggleAudio}\n />\n \n \n \n \n \n \n \n \n \n { setisMessagesOpen(false) }} />\n \n )\n```\n\n**above is the jsx for grid div with VideoView as children's**\n\n```\nconst VideoView = (props) => {\n //refs\n const mainDiv = useRef();\n\n //state\n const [divHeight, setdivHeight] = useState(0)\n\n //lifecycle\n useLayoutEffect(() => {\n if (mainDiv.current) {\n setdivHeight(mainDiv.current.offsetWidth / 2)\n }\n return () => {\n\n };\n }, [])\n //methods\n\n //views\n return (\n \n \n \n )\n}\n```\n\n**above is the VideoView component**\n\nhere is the screenshot of current problem\nhttps://i.sstatic.net/FxqQH.png\n\nIt will be great if you can help!!\n\n========================================\n\nCode:\n```text\nreturn (\n <div className=\"flex flex-row h-full w-full\">\n <div className=\"relative flex h-full w-full pb-16 \">\n <FooterMeeting\n isMessagesOpen={isMessagesOpen}\n toggleMessages={() => {\n setisMessagesOpen(!isMessagesOpen)\n }}\n audioPermession={audioPermession}\n cameraPermession={cameraPermession}\n toggleVideo={toggleVideo}\n toggleAudio={toggleAudio}\n />\n <div className=\"flex w-full h-full p-2\">\n <div className=\"grid w-full grid-flow-col grid-cols-2 grid-rows-2 md:grid-cols-3 md:grid-rows-3 xl:grid-cols-4 xl:grid-rows-3 gap-2 justify-start overflow-x-scroll scrollDiv\">\n <VideoView />\n <VideoView />\n <VideoView />\n <VideoView />\n </div>\n </div>\n </div>\n <MessagesSidebar isMessagesOpen={isMessagesOpen} closeMessages={() => { setisMessagesOpen(false) }} />\n </div>\n )\n```\n\n```text\nconst VideoView = (props) => {\n //refs\n const mainDiv = useRef();\n\n //state\n const [divHeight, setdivHeight] = useState(0)\n\n //lifecycle\n useLayoutEffect(() => {\n if (mainDiv.current) {\n setdivHeight(mainDiv.current.offsetWidth / 2)\n }\n return () => {\n\n };\n }, [])\n //methods\n\n //views\n return (\n <div ref={mainDiv} style={{ height: divHeight }} className=\" relative flex w-full h-auto bg-gray-300 dark:bg-appColor-appLight rounded-xl justify-center items-center\">\n <video className=\" h-auto max-w-full rounded-xl overflow-hidden flipVideo object-cover\" />\n </div>\n )\n}\n```\n\n```text\n<div className=\"grid w-full grid-flow-col grid-cols-2 grid-rows-2 md:grid-cols-3 md:grid-rows-3 xl:grid-cols-4 xl:grid-rows-3 gap-2 justify-start overflow-x-scroll scrollDiv\">\n <VideoView />\n <VideoView />\n <VideoView />\n <VideoView />\n </div>\n```\n\n```text\nclassName=\"grid grid-cols-2 gap-0\"\n```\n\n```text\nclassName=\"container\"\n```\n\n```text\n.container{\n // specify how many cols you want\n @apply grid gap-0 grid-cols-3\n \n // ' >* ' means target all of the children \n // we are able to use '&' with postcss-nesting plugin\n &>*{\n @apply overflow-hidden;\n height:300px;\n max-height:500px;\n // or specify the height based on screen size \n // sm-md-lg-x1-2x1\n @screen lg{\n height:400px}\n }\n}\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":164,"estimatedTokens":1000}}847{"id":"stack-70462185","source":"stackoverflow","questionId":70462185,"title":"Unable to add ant design stylesheets with tailwind in Rails 7","tags":["ruby-on-rails","antd","tailwind-css","esbuild","ruby-on-rails-7"],"text":"Title: Unable to add ant design stylesheets with tailwind in Rails 7\nTags: ruby-on-rails, antd, tailwind-css, esbuild, ruby-on-rails-7\nSource: Stack Overflow\n\nQuestion:\nI created a Rails 7 app using `rails new demo -j esbuild --css tailwind`.\nI am using `antd` package for the components and want to use the ant design stylesheet along with the tailwind stylesheet.\n\nTailwind has a way to add external stylesheets to its default styles. I used that and set `application.tailwind.css` file to this:\n\n```\n@import \"~antd/dist/antd.css\";\n\n@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n```\n\nNow when I run `./bin/dev`, the `antd` styles are neither applied nor those style classes are present in the generated `app/assets/builds/application.css` file.\n\nIt looks like tailwind overwrites the ant design styles.\n\nIf I keep `application.tailwind.css` and add\n\n```\nimport 'antd/dist/antd.css';\n```\n\nto my `index.js` root file, only then are the `antd` styles being applied and are present in the generated `app/assets/builds/application.css`. But then the tailwindcss classes are removed.\n\nHow can I have both ant design styles and tailwind styles together in the generated `app/assets/builds/application.css` ?\n\n========================================\n\nCode:\n```js\n@import \"~antd/dist/antd.css\";\n\n@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n```\n\n```js\nimport 'antd/dist/antd.css';\n```\n\n```text\nrails new demo -j esbuild --css tailwind\n```\n\n```text\nantd\n```\n\n```text\napplication.tailwind.css\n```\n\n```text\n./bin/dev\n```\n\n```text\nantd\n```\n\n```text\napp/assets/builds/application.css\n```\n\n```text\napplication.tailwind.css\n```\n\n```text\nindex.js\n```\n\n```text\nantd\n```\n\n```text\napp/assets/builds/application.css\n```\n\n```text\napp/assets/builds/application.css\n```\n\n```text\n<%= stylesheet_link_tag \"application\", \"users\", \"data-turbo-track\": \"reload\" %>\n```\n\n```text\nrails new demo --css tailwind\n```\n\n```text\ntailwindcss-rails gem\n```\n\n```text\ncssbundling-rails gem\n```\n\n```text\nrails new demo -j esbuild --css tailwind\n```\n\n```text\nusers\n```\n\n```text\napp/assets/stylesheets/users.css\n```\n\n```text\napplication.html.erb\n```\n\n```text\nusers\n```\n\n```text\napplication\n```\n\n```text\nstylesheet_link_tag\n```\n\n```text\napp/assets/config/manifest.js\n```\n\n```text\n//= link users.css\n```\n\n========================================\n\nComments:\n- Thank you. This worked.","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":26,"totalLines":147,"estimatedTokens":610}}848{"id":"stack-66876272","source":"stackoverflow","questionId":66876272,"title":"Tailwind css does not reduce file size after purge","tags":["css","tailwind-css"],"text":"Title: Tailwind css does not reduce file size after purge\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\ni have a basic html file (index.html), my project structure is like below :\n\n- index.html\n\n- tailwind.config.js\n\n- postcss.js\n\n- tailwind.css\n\n- dist.css\n\nand here contents for each files\n\n```\nmodule.exports = {\npurge: {\n enabled:true,\n content:['./*.html', './**/*.html'],\n layers: ['components']\n},\ntheme: {\n extend: {\n fontSize:{\n 'small' : '.6rem',\n // Or with a default line-height as well\n '3xl': ['2.5rem', {\n lineHeight: '50px',\n }],\n '6xl': ['3.70rem', {\n lineHeight: '60px',\n }],\n },\n colors:{\n transparent: 'transparent',\n current: 'currentColor',\n orange:{\n DEFAULT: '#F47521'\n }\n },\n screens: {\n 'sm': '640px',\n 'md': '760px',\n 'custom' : '980px',\n 'lg': '1024px',\n 'xl': '1280px',\n '2xl': '1536px',\n '3xl': '1600px',\n 'xxl' : '1700px'\n }\n }\n},\nvariants: {\n textColor: ['responsive', 'hover', 'focus', 'visited'],\n},\nplugins: [\n ({addUtilities}) => {\n const utils = {\n '.translate-x-half': {\n transform: 'translateX(50%)',\n },\n };\n addUtilities(utils, ['responsive'])\n }\n]\n};\n```\n\n**the postcss file**\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n }\n}\n```\n\nand my package.json\n\n```\n{\n \"name\": \"myproject\",\n \"version\": \"1.0.0\",\n \"description\": \"my theme\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n \"build\": \"NODE_ENV=production npx tailwindcss-cli@latest build tailwind.css -o dist.css\",\n \"build:css\": \"postcss tailwind.css -o dist.css\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"autoprefixer\": \"^10.2.5\",\n \"postcss\": \"^8.2.8\",\n \"tailwindcss\": \"^2.0.4\"\n },\n \"dependencies\": {\n \"cssnano\": \"^4.1.10\",\n \"postcss-cli\": \"^8.3.1\"\n }\n}\n```\n\nwhen building with : npm run build, tailwind build the project but the dist.css size remains 5,7MB\n\nWhat i'm doing wrong here?\n\nthank you\n\n========================================\n\nCode:\n```text\nmodule.exports = {\npurge: {\n enabled:true,\n content:['./*.html', './**/*.html'],\n layers: ['components']\n},\ntheme: {\n extend: {\n fontSize:{\n 'small' : '.6rem',\n // Or with a default line-height as well\n '3xl': ['2.5rem', {\n lineHeight: '50px',\n }],\n '6xl': ['3.70rem', {\n lineHeight: '60px',\n }],\n },\n colors:{\n transparent: 'transparent',\n current: 'currentColor',\n orange:{\n DEFAULT: '#F47521'\n }\n },\n screens: {\n 'sm': '640px',\n 'md': '760px',\n 'custom' : '980px',\n 'lg': '1024px',\n 'xl': '1280px',\n '2xl': '1536px',\n '3xl': '1600px',\n 'xxl' : '1700px'\n }\n }\n},\nvariants: {\n textColor: ['responsive', 'hover', 'focus', 'visited'],\n},\nplugins: [\n ({addUtilities}) => {\n const utils = {\n '.translate-x-half': {\n transform: 'translateX(50%)',\n },\n };\n addUtilities(utils, ['responsive'])\n }\n]\n};\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n }\n}\n```\n\n```text\n{\n \"name\": \"myproject\",\n \"version\": \"1.0.0\",\n \"description\": \"my theme\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n \"build\": \"NODE_ENV=production npx tailwindcss-cli@latest build tailwind.css -o dist.css\",\n \"build:css\": \"postcss tailwind.css -o dist.css\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"autoprefixer\": \"^10.2.5\",\n \"postcss\": \"^8.2.8\",\n \"tailwindcss\": \"^2.0.4\"\n },\n \"dependencies\": {\n \"cssnano\": \"^4.1.10\",\n \"postcss-cli\": \"^8.3.1\"\n }\n}\n```\n\n```text\nenabled\n```\n\n```text\nNODE_ENV\n```\n\n========================================\n\nComments:\n- hey, you're right about \"utilities\", thanks a lot\n- Hi Nathan. I'm a newbie at Tailwind and am reading around on Tailwind's potential impact on performance. I came across this SO thread. Would I still experience the sluggish refresh rate they are referring to if I purge correctly?\n- @TommyWolheart I know CSS inside out but wherever possible nowadays I'd use Tailwind. With purging setup correctly your CSS file output will be tiny.\n- That’s great, thanks! I’ll go ahead and give it a try it in my project then and see how it goes.","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":223,"estimatedTokens":1106}}849{"id":"stack-70581541","source":"stackoverflow","questionId":70581541,"title":"Tailwind CSS not applying using CLI","tags":["javascript","css","tailwind-css"],"text":"Title: Tailwind CSS not applying using CLI\nTags: javascript, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to use tailwind css in my project, seems like only font changes but there's no effect on using the classes.\n\nim using live server extension on vs code.\n\npackage.json\n\n```\n{\n \"name\": \"testing\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"dev\": \"npx tailwindcss -i tailwind.css -o ./public/styles.css\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"tailwindcss\": \"^3.0.9\"\n }\n}\n```\n\ntailwind.config.js\n\n```\nmodule.exports = {\n content: [\n '*'\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\ntailwind.css\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nindex.html\n\n```\n\n \n \n \n \n Document\n\n \n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quidem voluptas facilis expedita sequi molestiae mollitia nobis doloremque tempora, suscipit illo voluptatum, totam ex maiores! Quaerat fugit laborum incidunt voluptate!\n\n \n \n \n\n```\n\nso if i comment out the linking of styles.css, i don't see any effect.\nand as soon as i use styles.css, the font changes which reflects that tailwind is working\nbut if i apply the classes, it doesn't work at all.\n\nSteps i followed:\n\n- created package.json using `npm init -y`\n\n- installed tailwind cli `npm install -D tailwindcss`\n\n- created tailwind.config.js file (root folder)\n\n- created tailwind.css file and added tailwind directives in that file (root folder)\n\n- added a public folder in which index.html and styles.css file are there\n\n- for building the styles.css file, `npx tailwindcss -i tailwind.css -o ./public/styles.css` is used.\n\n- styles.css file now contains some css of ~400 lines of code\n\n- linked styles.css file in index.html\n\n========================================\n\nTop Answer:\ni spend a lot of time to resolve the issue first you need check the following\n1.first check your content has the right path to the file in tailwind.config.js\n\n```\n.content: [\n './public/*'\n ],\n```\n\n2.check the link tag in the html and specify the correct path\n\n3.change the following\n\n```\nfrom\n\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\nto\n@import \"tailwind/base\";\n@import \"tailwind/components\";\n@import \"tailwind/utilities\";`\n```\n\n4.if the problem still persists which is my case :the reason maybe installation of your node file in your computer or files of node may be corrupt or path complications\na.search for the uninstalling node and go to the codedamm website where they are provided instructions for every os\nb.try to delete all the files and reinstall it\nc.if your are a mac user then use the brew to download it and you also uninstall the easily also using the brew command\n\n========================================\n\nCode:\n```json\n{\n \"name\": \"testing\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"dev\": \"npx tailwindcss -i tailwind.css -o ./public/styles.css\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"tailwindcss\": \"^3.0.9\"\n }\n}\n```\n\n```js\nmodule.exports = {\n content: [\n '*'\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" href=\"styles.css\">\n <title>Document</title>\n</head>\n<body>\n <div class=\"w-full bg-purple-900\">\n <h1 class=\"text-green-100\">\n <div class=\"bg-pink-500\">\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quidem voluptas facilis expedita sequi molestiae mollitia nobis doloremque tempora, suscipit illo voluptatum, totam ex maiores! Quaerat fugit laborum incidunt voluptate!</p>\n </div>\n </h1>\n </div>\n</body>\n\n</html>\n```\n\n```text\nnpm init -y\n```\n\n```text\nnpm install -D tailwindcss\n```\n\n```text\nnpx tailwindcss -i tailwind.css -o ./public/styles.css\n```\n\n```js\nmodule.exports = {\n content: [\n './public/*'\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\npublic\n```\n\n```text\ntailwind.css\n```\n\n```text\ncontent\n```\n\n```text\n'./src/**/*.{js,ts,jsx,tsx,mdx}',\n```\n\n```text\n.content: [\n './public/*'\n ],\n```\n\n```text\nfrom\n\n\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\nto\n@import \"tailwind/base\";\n@import \"tailwind/components\";\n@import \"tailwind/utilities\";`\n```\n\n========================================\n\nComments:\n- did you run the `npm run dev` , also check your generated css file what's in there ?\n- yes i did run that command, also there's indeed some css written in styles.css (generated file)\n- then check if you included the right file path and also check if it is really effecting, by inspecting elements\n- i've double checked the path, it is correct. i still dont know where is the problem. for reference, i've added \"steps that i've followed\" in the ques\n- Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":14,"totalLines":258,"estimatedTokens":1352}}850{"id":"stack-65556207","source":"stackoverflow","questionId":65556207,"title":"Can't extend spacing on Tailwind","tags":["node.js","extend","spacing","tailwind-css"],"text":"Title: Can't extend spacing on Tailwind\nTags: node.js, extend, spacing, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to extend the spacing on Tailwind, but I can't make it work. I did my research and I made the changes in the `tailwind.config.js`, but when I use the class in the HTML, it doesn't exist.\n\nPS: I understand that there is no need to run the build\n\n*tailwind.config.js*\n\n```\nmodule.exports = {\n purge: [],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n spacing: {\n '1/3': '33,333333%',\n '2/3': '66,666667%'\n }\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n========================================\n\nCode:\n```js\nmodule.exports = {\n purge: [],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n spacing: {\n '1/3': '33,333333%',\n '2/3': '66,666667%'\n }\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\ntailwind.config.js\n```\n\n```js\ntheme: {\n extend: {\n spacing: {\n '1/3': '33.333333%',\n '2/3': '66.666667%',\n },\n },\n},\n```\n\n```text\n33,333333%\n```\n\n```text\n66,666667%\n```\n\n```text\n33,333333%\n```\n\n```text\n33.333333%\n```\n\n========================================\n\nComments:\n- Okay thanks,I changed it, but it still don't working. if you need more information just ask for it\n- How do you build your CSS?\n- \"build\": \"postcss css/tailwind.css -o public/build/tailwind.css\" in package.json \"scripts\" then in console: npm run build\n- I've just added a CodeSandbox link with PostCSS setup.\n- ohh, i dont know how to use it, sorry Don't worry, I will try to resolve it, thanks for the help","metadata":{"transformedAt":"2026-08-18T18:33:42.949Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":91,"estimatedTokens":406}}851{"id":"stack-70277976","source":"stackoverflow","questionId":70277976,"title":"Tailwind two column layout with resizeable columns","tags":["html","css","flexbox","tailwind-css"],"text":"Title: Tailwind two column layout with resizeable columns\nTags: html, css, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to achieve a two column layout created with tailwind which allows the left column to be horizontal resizable. When resizing the column, the right column should fill the remaining space. I'm used `grid-cols-2` to create the two column layout but with grid-cols the `resize-x` will only affect the left column. The demo can be found here: https://play.tailwindcss.com/W2sGHdRz4Y\n\n```\n\n \n Header\n\n \n \n \n \n \n \n \n One\n Two\n \n\n \n \n \n \n \n \n \n \n \n\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae illum sed, praesentium voluptatem dolor excepturi optio explicabo dolorem facere culpa enim sapiente minima voluptates quis, repellat magni obcaecati ut ullam? Sunt doloribus fuga reprehenderit ipsam adipisci, natus sequi quisquam id nobis quae sit saepe reiciendis molestias amet! Error fugit sequi dolorem laudantium atque. Tenetur ea nam, incidunt magnam sunt praesentium. At deleniti, quos praesentium blanditiis facilis velit deserunt, veritatis fuga beatae perferendis accusamus. Sit, repellat veniam dolore libero officiis voluptatibus quae explicabo ab, dolores perspiciatis cum. Aut ipsa placeat in. Mollitia, dolores enim perspiciatis possimus aut unde cumque, dicta, quae placeat iste exercitationem excepturi nulla eaque illo aliquid quos optio! Recusandae nostrum a rerum similique ex! A quod nobis accusamus. Consectetur provident, quis inventore, quibusdam dolorum sed necessitatibus assumenda iure et delectus facere eligendi? Iusto, cum magnam inventore atque odit expedita iste hic molestiae fugiat accusantium maiores. Perspiciatis, perferendis consequatur! Molestias neque, assumenda facilis sunt debitis voluptate magni nulla est hic iure accusamus corporis aliquam autem delectus, amet quam enim dolore. Molestiae, quibusdam totam minus ullam labore fugiat. Atque, sint. Quis ex laboriosam reiciendis eos sequi maxime amet quod enim repellat consequatur officiis, accusantium ad vitae atque ut praesentium non iure harum error! Temporibus suscipit adipisci optio rerum voluptatum repudiandae. Odio, laboriosam libero aliquam velit sequi id nihil. Excepturi molestiae officiis magni optio veritatis modi error atque itaque. Aliquam dolor impedit mollitia maiores in at distinctio molestias natus debitis fugiat. Quia obcaecati harum officia deleniti ipsam at architecto cum mollitia sint. Dicta totam commodi consectetur voluptates pariatur ad, quisquam quidem. Quisquam nihil suscipit eos magni iusto odio nam unde dolore? Provident repudiandae quo vitae ratione ipsum enim animi tenetur rerum cum, molestiae eius quibusdam omnis nesciunt nobis ex qui est delectus blanditiis facere, eum modi possimus nostrum, ea laboriosam? Tempora. Quas a voluptates doloribus quisquam fugiat harum officiis eligendi, dolorum perspiciatis itaque voluptatum corrupti atque qui animi aliquam. Sint asperiores eius delectus odio, laudantium voluptates officiis. Quod, unde. Ipsa, eius. Sequi atque assumenda vero inventore quo. Tempore necessitatibus magnam dolores. Deleniti, iure quae. Temporibus nisi magnam qui tenetur, incidunt, in aspernatur eum quo quod, aliquam doloribus assumenda. Deserunt, in quos. Qui ullam quia aliquam ad, obcaecati cumque illo, et eligendi exercitationem veniam nobis dignissimos, accusantium ipsam? At iste commodi voluptate dolore soluta, voluptatibus labore, eum reiciendis atque, ea esse nesciunt. Voluptates, labore! Vitae voluptate veritatis illo, iste excepturi sit ut asperiores sed fuga cumque ducimus, deleniti voluptatum magnam debitis architecto. Suscipit omnis soluta officia, saepe perferendis itaque repellat accusamus. Eos? Cum doloremque sapiente tenetur maxime quam deserunt autem minima sed nemo corrupti ad, dolorem laboriosam? Molestias quia aliquid quis labore culpa, sapiente vero harum repellat placeat eos cumque nesciunt architecto? Laboriosam tempora culpa sed, alias dolorem neque architecto, iste repudiandae fuga illo provident, soluta cum sapiente nam ipsa ex quisquam! Deleniti quae delectus eveniet odio voluptas unde. Repudiandae, dolore praesentium? Ab in nisi voluptas praesentium eum doloremque ea, molestiae qui dicta? Ullam, at. At in accusantium itaque ab harum, neque eligendi repellat quas, hic nulla maxime magni delectus nesciunt est? Ipsum dicta repudiandae cum accusantium blanditiis illo quidem velit maiores fugiat aliquam soluta odio mollitia, numquam repellendus neque ea labore. Beatae nostrum quibusdam impedit repudiandae ducimus doloremque voluptas necessitatibus quae? Accusamus nam officia tenetur eius consequuntur facilis! Similique, accusamus dolorum, eligendi eveniet ipsam culpa nobis cum adipisci iusto vero, molestias nulla maiores! Corporis, dolores ducimus illum impedit quam dolore harum. Itaque, doloribus beatae maiores accusantium ab quaerat sunt ipsa quis iste autem amet reiciendis earum voluptatem quas, adipisci expedita! Voluptatem temporibus laborum eveniet incidunt excepturi cum quia est esse ad. Placeat provident aut minima rem veniam aliquid corporis rerum eius et? Odit eos praesentium explicabo repellat, facilis corporis id unde possimus officiis, fugit expedita at modi consequatur. Quis, molestiae consectetur. Temporibus perferendis officia consequuntur illo omnis tempore modi nobis quam rerum sed, doloremque provident tenetur veniam laudantium ex quae distinctio quisquam voluptatum? Mollitia tenetur eligendi praesentium porro reiciendis quas esse. Mollitia aspernatur dolor consequatur laudantium odit a explicabo provident corporis reiciendis. Sunt ut iure officiis, ipsa minus deleniti cumque temporibus doloremque assumenda voluptatibus, est nobis incidunt. Veniam corporis vel impedit. Voluptatibus rem velit sit eius perspiciatis omnis cupiditate laudantium ab quo, earum eligendi deleniti explicabo a eum soluta accusamus repellendus ad ipsum praesentium pariatur aliquid facere debitis doloremque quasi! Autem? Laborum recusandae, optio molestiae distinctio a id vitae esse? Officia distinctio dignissimos nihil blanditiis quibusdam facere nulla eum voluptas excepturi nam quia, atque adipisci? Distinctio quisquam suscipit vitae voluptas enim. Eius beatae non possimus dolores quo nostrum illo aliquam minus commodi fugit architecto alias rerum accusantium ratione, magni atque nisi repellendus deleniti! Ratione necessitatibus sequi magnam, doloribus pariatur dolorem harum! Inventore beatae, incidunt voluptatibus doloremque corrupti facilis cum! Hic ipsum dolorum accusamus quia veritatis, quibusdam commodi tenetur, reiciendis mollitia sapiente facilis nam, accusantium quidem. Voluptate architecto at voluptatem eaque id? Obcaecati adipisci quisquam tempore blanditiis, qui error eius ab ea ipsa suscipit dignissimos nisi quos ut quas voluptatem amet. Ut sit aliquid molestias, hic iste dolorum nobis laudantium quasi quo? Laudantium cumque voluptatem reprehenderit consequatur quisquam alias odit animi cupiditate! Quod nostrum inventore necessitatibus, distinctio quibusdam dignissimos qui ipsa accusantium incidunt neque explicabo temporibus cumque sapiente corporis. Amet, modi exercitationem. Modi aperiam laboriosam corrupti consequuntur provident veritatis sunt animi repellendus ratione! Deleniti reprehenderit perferendis ad natus magnam sunt delectus eaque repellat error, enim alias rerum harum eius fugit. Dolores, eos. Doloribus quibusdam et doloremque natus corrupti earum iure! Impedit id aut unde officia tenetur cum asperiores, eos pariatur! Provident ullam qui beatae ab rerum quibusdam, odit ipsam totam cum quasi! Magni error, quos quia, voluptas natus vel totam impedit voluptatum, fugit ex autem aliquid tempore magnam! Minus et voluptatum similique quis asperiores repellat perspiciatis quasi dolore molestiae vero, itaque laudantium. Corporis quibusdam, sit, quos molestias laudantium et reprehenderit possimus vel atque culpa repellendus at deserunt earum quo. Cum ratione saepe ad, aut corrupti nesciunt, et consequuntur alias explicabo, dignissimos veritatis. Dolores, neque? Eveniet odit ut eos ipsam, ullam autem voluptatum, odio accusantium tempore nesciunt obcaecati. Est, necessitatibus placeat nulla aut soluta quaerat in, sint dolorem excepturi voluptas asperiores laborum maxime. Culpa deleniti aliquam pariatur provident earum. Dolorum, quasi natus, ex dolorem obcaecati enim dignissimos nulla laboriosam placeat itaque repudiandae! Nisi pariatur reiciendis consequuntur ipsa dolore nostrum repellendus in! Possimus, reprehenderit. Quos nam ipsam voluptatum qui quo, placeat error fuga nobis laudantium provident aut minima deserunt similique accusamus impedit commodi facere repellendus? Iste, sapiente id! Fugiat temporibus magni minus provident saepe! Ipsa sunt iure nostrum quibusdam illum unde dolore labore voluptate facilis similique veritatis maiores officia quo quisquam, sapiente numquam temporibus neque in. Iusto placeat saepe suscipit cumque necessitatibus officia perferendis. Nemo quos laboriosam tempore doloribus repudiandae quidem molestiae. Nemo minus ipsa reprehenderit sapiente aspernatur repellat similique, officiis eos illo, animi minima delectus doloremque tempore distinctio ullam sunt, facilis fuga temporibus? Voluptate voluptatibus, ullam deleniti ad in, ratione dolor modi unde impedit libero facere quas perspiciatis accusantium ducimus officiis pariatur, doloribus dolorem beatae. Tenetur tempore beatae quia explicabo eos accusamus quisquam? Est recusandae praesentium impedit, asperiores culpa nesciunt iste reprehenderit earum eligendi cum, accusamus animi, placeat similique? Dolorem provident iusto velit voluptatem necessitatibus aliquid sequi vero, natus, commodi, sit minus veniam!\n \n \n\n```\n\n========================================\n\nCode:\n```html\n<div class=\"flex flex-col min-h-screen max-h-screen\">\n <!-- Header -->\n <div class=\"flex h-20 justify-center items-center bg-gray-100\">Header</div>\n\n <div class=\"flex flex-1 bg-gray-200 overflow-y-auto\">\n <div class=\"grid grid-cols-2 bg-gray-200\">\n <!-- Left -->\n <div class=\"flex flex-1 overflow-y-auto resize-x\">\n <div class=\"flex flex-1 flex-col overflow-y-auto\">\n <!-- Tabs -->\n <div class=\"flex h-12 space-x-2 overflow-x-auto justify-between items-center px-4\">\n <div class=\"w-1/2 text-center\">One</div>\n <div class=\"w-1/2 text-center\">Two</div>\n </div>\n\n <!-- Images -->\n <div class=\"flex flex-1 flex-wrap justify-center bg-gray-300 p-3 overflow-y-auto\">\n <div class=\"p-1\"><img src=\"https://dummyimage.com/210x297/fff/aaa\" /></div>\n <div class=\"p-1\"><img src=\"https://dummyimage.com/210x297/fff/aaa\" /></div>\n <div class=\"p-1\"><img src=\"https://dummyimage.com/210x297/fff/aaa\" /></div>\n <div class=\"p-1\"><img src=\"https://dummyimage.com/210x297/fff/aaa\" /></div>\n </div>\n </div>\n </div>\n\n <!-- Right -->\n <div class=\"px-4 overflow-y-auto\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae illum sed, praesentium voluptatem dolor excepturi optio explicabo dolorem facere culpa enim sapiente minima voluptates quis, repellat magni obcaecati ut ullam? Sunt doloribus fuga reprehenderit ipsam adipisci, natus sequi quisquam id nobis quae sit saepe reiciendis molestias amet! Error fugit sequi dolorem laudantium atque. Tenetur ea nam, incidunt magnam sunt praesentium. At deleniti, quos praesentium blanditiis facilis velit deserunt, veritatis fuga beatae perferendis accusamus. Sit, repellat veniam dolore libero officiis voluptatibus quae explicabo ab, dolores perspiciatis cum. Aut ipsa placeat in. Mollitia, dolores enim perspiciatis possimus aut unde cumque, dicta, quae placeat iste exercitationem excepturi nulla eaque illo aliquid quos optio! Recusandae nostrum a rerum similique ex! A quod nobis accusamus. Consectetur provident, quis inventore, quibusdam dolorum sed necessitatibus assumenda iure et delectus facere eligendi? Iusto, cum magnam inventore atque odit expedita iste hic molestiae fugiat accusantium maiores. Perspiciatis, perferendis consequatur! Molestias neque, assumenda facilis sunt debitis voluptate magni nulla est hic iure accusamus corporis aliquam autem delectus, amet quam enim dolore. Molestiae, quibusdam totam minus ullam labore fugiat. Atque, sint. Quis ex laboriosam reiciendis eos sequi maxime amet quod enim repellat consequatur officiis, accusantium ad vitae atque ut praesentium non iure harum error! Temporibus suscipit adipisci optio rerum voluptatum repudiandae. Odio, laboriosam libero aliquam velit sequi id nihil. Excepturi molestiae officiis magni optio veritatis modi error atque itaque. Aliquam dolor impedit mollitia maiores in at distinctio molestias natus debitis fugiat. Quia obcaecati harum officia deleniti ipsam at architecto cum mollitia sint. Dicta totam commodi consectetur voluptates pariatur ad, quisquam quidem. Quisquam nihil suscipit eos magni iusto odio nam unde dolore? Provident repudiandae quo vitae ratione ipsum enim animi tenetur rerum cum, molestiae eius quibusdam omnis nesciunt nobis ex qui est delectus blanditiis facere, eum modi possimus nostrum, ea laboriosam? Tempora. Quas a voluptates doloribus quisquam fugiat harum officiis eligendi, dolorum perspiciatis itaque voluptatum corrupti atque qui animi aliquam. Sint asperiores eius delectus odio, laudantium voluptates officiis. Quod, unde. Ipsa, eius. Sequi atque assumenda vero inventore quo. Tempore necessitatibus magnam dolores. Deleniti, iure quae. Temporibus nisi magnam qui tenetur, incidunt, in aspernatur eum quo quod, aliquam doloribus assumenda. Deserunt, in quos. Qui ullam quia aliquam ad, obcaecati cumque illo, et eligendi exercitationem veniam nobis dignissimos, accusantium ipsam? At iste commodi voluptate dolore soluta, voluptatibus labore, eum reiciendis atque, ea esse nesciunt. Voluptates, labore! Vitae voluptate veritatis illo, iste excepturi sit ut asperiores sed fuga cumque ducimus, deleniti voluptatum magnam debitis architecto. Suscipit omnis soluta officia, saepe perferendis itaque repellat accusamus. Eos? Cum doloremque sapiente tenetur maxime quam deserunt autem minima sed nemo corrupti ad, dolorem laboriosam? Molestias quia aliquid quis labore culpa, sapiente vero harum repellat placeat eos cumque nesciunt architecto? Laboriosam tempora culpa sed, alias dolorem neque architecto, iste repudiandae fuga illo provident, soluta cum sapiente nam ipsa ex quisquam! Deleniti quae delectus eveniet odio voluptas unde. Repudiandae, dolore praesentium? Ab in nisi voluptas praesentium eum doloremque ea, molestiae qui dicta? Ullam, at. At in accusantium itaque ab harum, neque eligendi repellat quas, hic nulla maxime magni delectus nesciunt est? Ipsum dicta repudiandae cum accusantium blanditiis illo quidem velit maiores fugiat aliquam soluta odio mollitia, numquam repellendus neque ea labore. Beatae nostrum quibusdam impedit repudiandae ducimus doloremque voluptas necessitatibus quae? Accusamus nam officia tenetur eius consequuntur facilis! Similique, accusamus dolorum, eligendi eveniet ipsam culpa nobis cum adipisci iusto vero, molestias nulla maiores! Corporis, dolores ducimus illum impedit quam dolore harum. Itaque, doloribus beatae maiores accusantium ab quaerat sunt ipsa quis iste autem amet reiciendis earum voluptatem quas, adipisci expedita! Voluptatem temporibus laborum eveniet incidunt excepturi cum quia est esse ad. Placeat provident aut minima rem veniam aliquid corporis rerum eius et? Odit eos praesentium explicabo repellat, facilis corporis id unde possimus officiis, fugit expedita at modi consequatur. Quis, molestiae consectetur. Temporibus perferendis officia consequuntur illo omnis tempore modi nobis quam rerum sed, doloremque provident tenetur veniam laudantium ex quae distinctio quisquam voluptatum? Mollitia tenetur eligendi praesentium porro reiciendis quas esse. Mollitia aspernatur dolor consequatur laudantium odit a explicabo provident corporis reiciendis. Sunt ut iure officiis, ipsa minus deleniti cumque temporibus doloremque assumenda voluptatibus, est nobis incidunt. Veniam corporis vel impedit. Voluptatibus rem velit sit eius perspiciatis omnis cupiditate laudantium ab quo, earum eligendi deleniti explicabo a eum soluta accusamus repellendus ad ipsum praesentium pariatur aliquid facere debitis doloremque quasi! Autem? Laborum recusandae, optio molestiae distinctio a id vitae esse? Officia distinctio dignissimos nihil blanditiis quibusdam facere nulla eum voluptas excepturi nam quia, atque adipisci? Distinctio quisquam suscipit vitae voluptas enim. Eius beatae non possimus dolores quo nostrum illo aliquam minus commodi fugit architecto alias rerum accusantium ratione, magni atque nisi repellendus deleniti! Ratione necessitatibus sequi magnam, doloribus pariatur dolorem harum! Inventore beatae, incidunt voluptatibus doloremque corrupti facilis cum! Hic ipsum dolorum accusamus quia veritatis, quibusdam commodi tenetur, reiciendis mollitia sapiente facilis nam, accusantium quidem. Voluptate architecto at voluptatem eaque id? Obcaecati adipisci quisquam tempore blanditiis, qui error eius ab ea ipsa suscipit dignissimos nisi quos ut quas voluptatem amet. Ut sit aliquid molestias, hic iste dolorum nobis laudantium quasi quo? Laudantium cumque voluptatem reprehenderit consequatur quisquam alias odit animi cupiditate! Quod nostrum inventore necessitatibus, distinctio quibusdam dignissimos qui ipsa accusantium incidunt neque explicabo temporibus cumque sapiente corporis. Amet, modi exercitationem. Modi aperiam laboriosam corrupti consequuntur provident veritatis sunt animi repellendus ratione! Deleniti reprehenderit perferendis ad natus magnam sunt delectus eaque repellat error, enim alias rerum harum eius fugit. Dolores, eos. Doloribus quibusdam et doloremque natus corrupti earum iure! Impedit id aut unde officia tenetur cum asperiores, eos pariatur! Provident ullam qui beatae ab rerum quibusdam, odit ipsam totam cum quasi! Magni error, quos quia, voluptas natus vel totam impedit voluptatum, fugit ex autem aliquid tempore magnam! Minus et voluptatum similique quis asperiores repellat perspiciatis quasi dolore molestiae vero, itaque laudantium. Corporis quibusdam, sit, quos molestias laudantium et reprehenderit possimus vel atque culpa repellendus at deserunt earum quo. Cum ratione saepe ad, aut corrupti nesciunt, et consequuntur alias explicabo, dignissimos veritatis. Dolores, neque? Eveniet odit ut eos ipsam, ullam autem voluptatum, odio accusantium tempore nesciunt obcaecati. Est, necessitatibus placeat nulla aut soluta quaerat in, sint dolorem excepturi voluptas asperiores laborum maxime. Culpa deleniti aliquam pariatur provident earum. Dolorum, quasi natus, ex dolorem obcaecati enim dignissimos nulla laboriosam placeat itaque repudiandae! Nisi pariatur reiciendis consequuntur ipsa dolore nostrum repellendus in! Possimus, reprehenderit. Quos nam ipsam voluptatum qui quo, placeat error fuga nobis laudantium provident aut minima deserunt similique accusamus impedit commodi facere repellendus? Iste, sapiente id! Fugiat temporibus magni minus provident saepe! Ipsa sunt iure nostrum quibusdam illum unde dolore labore voluptate facilis similique veritatis maiores officia quo quisquam, sapiente numquam temporibus neque in. Iusto placeat saepe suscipit cumque necessitatibus officia perferendis. Nemo quos laboriosam tempore doloribus repudiandae quidem molestiae. Nemo minus ipsa reprehenderit sapiente aspernatur repellat similique, officiis eos illo, animi minima delectus doloremque tempore distinctio ullam sunt, facilis fuga temporibus? Voluptate voluptatibus, ullam deleniti ad in, ratione dolor modi unde impedit libero facere quas perspiciatis accusantium ducimus officiis pariatur, doloribus dolorem beatae. Tenetur tempore beatae quia explicabo eos accusamus quisquam? Est recusandae praesentium impedit, asperiores culpa nesciunt iste reprehenderit earum eligendi cum, accusamus animi, placeat similique? Dolorem provident iusto velit voluptatem necessitatibus aliquid sequi vero, natus, commodi, sit minus veniam!</div>\n </div>\n </div>\n</div>\n```\n\n```text\ngrid-cols-2\n```\n\n```text\nresize-x\n```\n\n```html\n<div class=\"flex flex-col min-h-screen max-h-screen\">\n <!-- Header -->\n <div class=\"flex h-20 justify-center items-center bg-gray-100\">Header</div>\n\n <div class=\"flex flex-1 bg-gray-200 overflow-y-auto\">\n <div class=\"grid grid-flow-col bg-gray-200\">\n <!-- Left -->\n <div class=\"flex flex-1 overflow-y-auto resize-x\">\n <div class=\"flex flex-1 flex-col overflow-y-auto\">\n <!-- Tabs -->\n <div class=\"flex h-12 space-x-2 overflow-x-auto justify-between items-center px-4\">\n <div class=\"w-1/2 text-center\">One</div>\n <div class=\"w-1/2 text-center\">Two</div>\n </div>\n\n <!-- Images -->\n <div class=\"flex flex-1 flex-wrap justify-center bg-gray-300 p-3 overflow-y-auto\">\n <div class=\"p-1\"><img src=\"https://dummyimage.com/210x297/fff/aaa\" /></div>\n <div class=\"p-1\"><img src=\"https://dummyimage.com/210x297/fff/aaa\" /></div>\n <div class=\"p-1\"><img src=\"https://dummyimage.com/210x297/fff/aaa\" /></div>\n <div class=\"p-1\"><img src=\"https://dummyimage.com/210x297/fff/aaa\" /></div>\n </div>\n </div>\n </div>\n\n <!-- Right -->\n <div class=\"px-4 overflow-y-auto\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae illum sed, praesentium voluptatem dolor excepturi optio explicabo dolorem facere culpa enim sapiente minima voluptates quis, repellat magni obcaecati ut ullam? Sunt doloribus fuga reprehenderit ipsam adipisci, natus sequi quisquam id nobis quae sit saepe reiciendis molestias amet! Error fugit sequi dolorem laudantium atque. Tenetur ea nam, incidunt magnam sunt praesentium. At deleniti, quos praesentium blanditiis facilis velit deserunt, veritatis fuga beatae perferendis accusamus. Sit, repellat veniam dolore libero officiis voluptatibus quae explicabo ab, dolores perspiciatis cum. Aut ipsa placeat in. Mollitia, dolores enim perspiciatis possimus aut unde cumque, dicta, quae placeat iste exercitationem excepturi nulla eaque illo aliquid quos optio! Recusandae nostrum a rerum similique ex! A quod nobis accusamus. Consectetur provident, quis inventore, quibusdam dolorum sed necessitatibus assumenda iure et delectus facere eligendi? Iusto, cum magnam inventore atque odit expedita iste hic molestiae fugiat accusantium maiores. Perspiciatis, perferendis consequatur! Molestias neque, assumenda facilis sunt debitis voluptate magni nulla est hic iure accusamus corporis aliquam autem delectus, amet quam enim dolore. Molestiae, quibusdam totam minus ullam labore fugiat. Atque, sint. Quis ex laboriosam reiciendis eos sequi maxime amet quod enim repellat consequatur officiis, accusantium ad vitae atque ut praesentium non iure harum error! Temporibus suscipit adipisci optio rerum voluptatum repudiandae. Odio, laboriosam libero aliquam velit sequi id nihil. Excepturi molestiae officiis magni optio veritatis modi error atque itaque. Aliquam dolor impedit mollitia maiores in at distinctio molestias natus debitis fugiat. Quia obcaecati harum officia deleniti ipsam at architecto cum mollitia sint. Dicta totam commodi consectetur voluptates pariatur ad, quisquam quidem. Quisquam nihil suscipit eos magni iusto odio nam unde dolore? Provident repudiandae quo vitae ratione ipsum enim animi tenetur rerum cum, molestiae eius quibusdam omnis nesciunt nobis ex qui est delectus blanditiis facere, eum modi possimus nostrum, ea laboriosam? Tempora. Quas a voluptates doloribus quisquam fugiat harum officiis eligendi, dolorum perspiciatis itaque voluptatum corrupti atque qui animi aliquam. Sint asperiores eius delectus odio, laudantium voluptates officiis. Quod, unde. Ipsa, eius. Sequi atque assumenda vero inventore quo. Tempore necessitatibus magnam dolores. Deleniti, iure quae. Temporibus nisi magnam qui tenetur, incidunt, in aspernatur eum quo quod, aliquam doloribus assumenda. Deserunt, in quos. Qui ullam quia aliquam ad, obcaecati cumque illo, et eligendi exercitationem veniam nobis dignissimos, accusantium ipsam? At iste commodi voluptate dolore soluta, voluptatibus labore, eum reiciendis atque, ea esse nesciunt. Voluptates, labore! Vitae voluptate veritatis illo, iste excepturi sit ut asperiores sed fuga cumque ducimus, deleniti voluptatum magnam debitis architecto. Suscipit omnis soluta officia, saepe perferendis itaque repellat accusamus. Eos? Cum doloremque sapiente tenetur maxime quam deserunt autem minima sed nemo corrupti ad, dolorem laboriosam? Molestias quia aliquid quis labore culpa, sapiente vero harum repellat placeat eos cumque nesciunt architecto? Laboriosam tempora culpa sed, alias dolorem neque architecto, iste repudiandae fuga illo provident, soluta cum sapiente nam ipsa ex quisquam! Deleniti quae delectus eveniet odio voluptas unde. Repudiandae, dolore praesentium? Ab in nisi voluptas praesentium eum doloremque ea, molestiae qui dicta? Ullam, at. At in accusantium itaque ab harum, neque eligendi repellat quas, hic nulla maxime magni delectus nesciunt est? Ipsum dicta repudiandae cum accusantium blanditiis illo quidem velit maiores fugiat aliquam soluta odio mollitia, numquam repellendus neque ea labore. Beatae nostrum quibusdam impedit repudiandae ducimus doloremque voluptas necessitatibus quae? Accusamus nam officia tenetur eius consequuntur facilis! Similique, accusamus dolorum, eligendi eveniet ipsam culpa nobis cum adipisci iusto vero, molestias nulla maiores! Corporis, dolores ducimus illum impedit quam dolore harum. Itaque, doloribus beatae maiores accusantium ab quaerat sunt ipsa quis iste autem amet reiciendis earum voluptatem quas, adipisci expedita! Voluptatem temporibus laborum eveniet incidunt excepturi cum quia est esse ad. Placeat provident aut minima rem veniam aliquid corporis rerum eius et? Odit eos praesentium explicabo repellat, facilis corporis id unde possimus officiis, fugit expedita at modi consequatur. Quis, molestiae consectetur. Temporibus perferendis officia consequuntur illo omnis tempore modi nobis quam rerum sed, doloremque provident tenetur veniam laudantium ex quae distinctio quisquam voluptatum? Mollitia tenetur eligendi praesentium porro reiciendis quas esse. Mollitia aspernatur dolor consequatur laudantium odit a explicabo provident corporis reiciendis. Sunt ut iure officiis, ipsa minus deleniti cumque temporibus doloremque assumenda voluptatibus, est nobis incidunt. Veniam corporis vel impedit. Voluptatibus rem velit sit eius perspiciatis omnis cupiditate laudantium ab quo, earum eligendi deleniti explicabo a eum soluta accusamus repellendus ad ipsum praesentium pariatur aliquid facere debitis doloremque quasi! Autem? Laborum recusandae, optio molestiae distinctio a id vitae esse? Officia distinctio dignissimos nihil blanditiis quibusdam facere nulla eum voluptas excepturi nam quia, atque adipisci? Distinctio quisquam suscipit vitae voluptas enim. Eius beatae non possimus dolores quo nostrum illo aliquam minus commodi fugit architecto alias rerum accusantium ratione, magni atque nisi repellendus deleniti! Ratione necessitatibus sequi magnam, doloribus pariatur dolorem harum! Inventore beatae, incidunt voluptatibus doloremque corrupti facilis cum! Hic ipsum dolorum accusamus quia veritatis, quibusdam commodi tenetur, reiciendis mollitia sapiente facilis nam, accusantium quidem. Voluptate architecto at voluptatem eaque id? Obcaecati adipisci quisquam tempore blanditiis, qui error eius ab ea ipsa suscipit dignissimos nisi quos ut quas voluptatem amet. Ut sit aliquid molestias, hic iste dolorum nobis laudantium quasi quo? Laudantium cumque voluptatem reprehenderit consequatur quisquam alias odit animi cupiditate! Quod nostrum inventore necessitatibus, distinctio quibusdam dignissimos qui ipsa accusantium incidunt neque explicabo temporibus cumque sapiente corporis. Amet, modi exercitationem. Modi aperiam laboriosam corrupti consequuntur provident veritatis sunt animi repellendus ratione! Deleniti reprehenderit perferendis ad natus magnam sunt delectus eaque repellat error, enim alias rerum harum eius fugit. Dolores, eos. Doloribus quibusdam et doloremque natus corrupti earum iure! Impedit id aut unde officia tenetur cum asperiores, eos pariatur! Provident ullam qui beatae ab rerum quibusdam, odit ipsam totam cum quasi! Magni error, quos quia, voluptas natus vel totam impedit voluptatum, fugit ex autem aliquid tempore magnam! Minus et voluptatum similique quis asperiores repellat perspiciatis quasi dolore molestiae vero, itaque laudantium. Corporis quibusdam, sit, quos molestias laudantium et reprehenderit possimus vel atque culpa repellendus at deserunt earum quo. Cum ratione saepe ad, aut corrupti nesciunt, et consequuntur alias explicabo, dignissimos veritatis. Dolores, neque? Eveniet odit ut eos ipsam, ullam autem voluptatum, odio accusantium tempore nesciunt obcaecati. Est, necessitatibus placeat nulla aut soluta quaerat in, sint dolorem excepturi voluptas asperiores laborum maxime. Culpa deleniti aliquam pariatur provident earum. Dolorum, quasi natus, ex dolorem obcaecati enim dignissimos nulla laboriosam placeat itaque repudiandae! Nisi pariatur reiciendis consequuntur ipsa dolore nostrum repellendus in! Possimus, reprehenderit. Quos nam ipsam voluptatum qui quo, placeat error fuga nobis laudantium provident aut minima deserunt similique accusamus impedit commodi facere repellendus? Iste, sapiente id! Fugiat temporibus magni minus provident saepe! Ipsa sunt iure nostrum quibusdam illum unde dolore labore voluptate facilis similique veritatis maiores officia quo quisquam, sapiente numquam temporibus neque in. Iusto placeat saepe suscipit cumque necessitatibus officia perferendis. Nemo quos laboriosam tempore doloribus repudiandae quidem molestiae. Nemo minus ipsa reprehenderit sapiente aspernatur repellat similique, officiis eos illo, animi minima delectus doloremque tempore distinctio ullam sunt, facilis fuga temporibus? Voluptate voluptatibus, ullam deleniti ad in, ratione dolor modi unde impedit libero facere quas perspiciatis accusantium ducimus officiis pariatur, doloribus dolorem beatae. Tenetur tempore beatae quia explicabo eos accusamus quisquam? Est recusandae praesentium impedit, asperiores culpa nesciunt iste reprehenderit earum eligendi cum, accusamus animi, placeat similique? Dolorem provident iusto velit voluptatem necessitatibus aliquid sequi vero, natus, commodi, sit minus veniam!</div>\n </div>\n </div>\n</div>\n```\n\n```text\ngrid-cols-2\n```\n\n```text\ngrid-flow-col\n```\n\n```text\nflex-none\n```\n\n========================================\n\nComments:\n- Thanks for mention `flex-none` for the header. Did'nt recognice this issue until I've read you answer.\n- Short -up question: When I want to make the last column to fill all avaiable space (e.g. when the content is only `Lorem ipsum`), how can I archive it? I've tried to set w-full but this will only take the 100% width of the content. play.tailwindcss.com/y4HIrTNt1S\n- `w-full` gets disrespected in grid and flex layouts a lot. Min and max width values and fixed width (non-percent) get obeyed usually though. So you can make a new width value that is larger than you ever imagine a screen will get (1000rem in my example here) then give it a `max-w-full` and it should be good to go. Check the config tab here play.tailwindcss.com/sBrMAQivuT I also added the `max-w-72` class you declared since it's not a default TW class.","metadata":{"transformedAt":"2026-08-18T18:33:42.950Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":135,"estimatedTokens":7915}}852{"id":"stack-60593596","source":"stackoverflow","questionId":60593596,"title":"Tailwind CSS - Overflowing footer with fixed position","tags":["css","flexbox","tailwind-css"],"text":"Title: Tailwind CSS - Overflowing footer with fixed position\nTags: css, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm new to Tailwind CSS and have been trying to make a simple portfolio page with available code samples in Tailwind's documentation.\n\nWhile the container class is wrapping all content on page with some margin, if I set the footer to fixed position, the footer is overflowing to the right. The issue seems to be with the fixed or absolute class as without this class, the footer takes the container's width.\n\nWhat can I do to make the footer wrap within the container with the fixed class applied? A CSS approach would do but ideally I'm looking for the reason why Tailwind CSS wouldn't wrap the footer to parent's width.\n\nCode and Demo: https://codesandbox.io/s/tailwind-portfolio-s1r1g\n\nTrying to achieve this:\nhttps://i.sstatic.net/3J7FJ.jpg\n\n========================================\n\nCode:\n```text\nfooter { left: 0}\n```\n\n```text\ncontainer mx-auto\n```\n\n```text\nbody\n```\n\n========================================\n\nComments:\n- Hi, thanks for the response this solves only part of the problem. The left:0 aligns the footer to complete left but I'm trying to make the footer start and end at the same position as the header.\n- Just add class \"container\" to the footer. Here is the updated sandbox link - codesandbox.io/s/tailwind-portfolio-kprn4","metadata":{"transformedAt":"2026-08-18T18:33:42.950Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":36,"estimatedTokens":343}}853{"id":"stack-65967612","source":"stackoverflow","questionId":65967612,"title":"TailwindCSS Dark mode not working in Nuxt.js","tags":["javascript","css","typescript","nuxt.js","tailwind-css"],"text":"Title: TailwindCSS Dark mode not working in Nuxt.js\nTags: javascript, css, typescript, nuxt.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've been at this for a couple of days now and still can't seem to get this working. I'm trying to get the whole dark mode going with Tailwind CSS in Nuxt.js.\n\nI think it may be an issue with the CSS setup and not the TypeScript side as I have a toggle that switches the `` class to light and dark.\n\nAs a reference, I've been trying to copy Fayazara's work which you can find here.\n\nEnv:\n\n- Windows 10 Pro\n\n- Node 14.15.4\n\n- NPM 6.14.10\n\n- Nuxt.js 2.14.12\n\n- TailwindCSS 2.0.2\n\nHere are some of the config files:\n\n**nuxt.config.js:**\n\n```\nexport default {\n head: {\n // meta stuff\n },\n purgeCSS: { \n whitelist: ['dark-mode'], \n },\n components: true,\n buildModules: [\n '@nuxt/typescript-build',\n '@nuxtjs/tailwindcss',\n '@nuxtjs/color-mode', \n ],\n colorMode: {\n classSuffix: \"\"\n },\n ...\n ...\n}\n```\n\n**tailwind.config.js:**\n\n```\nmodule.exports = {\n theme: {\n darkSelector: '.dark-mode',\n },\n variants: {\n backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', 'hover', 'responsive'],\n borderColor: ['dark', 'dark-focus', 'dark-focus-within', 'hover', 'responsive'],\n textColor: ['dark', 'dark-hover', 'dark-active', 'hover', 'responsive']\n },\n plugins: [\n require('tailwindcss-dark-mode')()\n ]\n}\n```\n\n**~/assets/css/tailwind.css:**\n\n```\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\nI have this in my settings page `Settings\n\n` which stays blue even with the toggle\n\nI uploaded my project to GitHub for all the other files\n\nThanks to anyone that helps :)\n\n========================================\n\nCode:\n```js\nexport default {\n head: {\n // meta stuff\n },\n purgeCSS: { \n whitelist: ['dark-mode'], \n },\n components: true,\n buildModules: [\n '@nuxt/typescript-build',\n '@nuxtjs/tailwindcss',\n '@nuxtjs/color-mode', \n ],\n colorMode: {\n classSuffix: \"\"\n },\n ...\n ...\n}\n```\n\n```js\nmodule.exports = {\n theme: {\n darkSelector: '.dark-mode',\n },\n variants: {\n backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', 'hover', 'responsive'],\n borderColor: ['dark', 'dark-focus', 'dark-focus-within', 'hover', 'responsive'],\n textColor: ['dark', 'dark-hover', 'dark-active', 'hover', 'responsive']\n },\n plugins: [\n require('tailwindcss-dark-mode')()\n ]\n}\n```\n\n```css\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n\n```text\n<hmtl></html>\n```\n\n```text\n<p class=\"bg-blue-500 dark:bg-red-500\">Settings</p>\n```\n\n```text\n// tailwind.config.js\nmodule.exports = {\n darkMode: 'class',\n}\n```\n\n```text\n<template>\n <div class=\"dark\">\n <Navigation />\n <Nuxt />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue'\nimport Navigation from '~/components/Navigation.vue'\nexport default Vue.extend({\n name: 'Default',\n components: {\n Navigation\n }\n})\n</script>\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ndark\n```\n\n```text\nlayouts/default\n```\n\n```text\n<div class=\"dark\">\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.950Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":180,"estimatedTokens":808}}854{"id":"stack-59746066","source":"stackoverflow","questionId":59746066,"title":"Use Tailwind css in a nrwl/nx Next js project","tags":["next.js","tailwind-css","nrwl-nx"],"text":"Title: Use Tailwind css in a nrwl/nx Next js project\nTags: next.js, tailwind-css, nrwl-nx\nSource: Stack Overflow\n\nQuestion:\nHow to make Tailwind css work in a nrwl/nx Next js project?\nNow I am using the common approach but it failed:\n\n```\n[ error ] ./styles/main.css\nError: Didn't get a result from child compiler\n```\n\nthe common approach I took:\n\n`npx create-nx-workspace@latest my-org`\n\n`yarn add --dev @nrwl/next`\n\n`nx g @nrwl/next:application my-project`\n\n`yarn add tailwindcss autoprefixer postcss-loader @zeit/next-css`\n\n`cd apps/my-project`\n\ncreate\n\n```\npostcss.config.js\nmodule.exports = {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer')\n ]\n};\n```\n\n- create\n\n```\nnext.config.js\nconst withCSS = require('@zeit/next-css');\nmodule.exports = withCSS({});\n```\n\n- create\n\n```\nstyles/main.css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n- create a default _app.js in pages\n\n- add import '../styles/main.css' in _app.js\n\n========================================\n\nTop Answer:\nIf you use new version - 9.2 then you need this article:\n\nhttps://nextjs.org/blog/next-9-2\n\nAnd updated setup example for Next.js 9.2:\n\nhttps://github.com/tailwindcss/setup-examples/pull/50\n\nI tried it, it good works for me.\n\n========================================\n\nCode:\n```text\n[ error ] ./styles/main.css\nError: Didn't get a result from child compiler\n```\n\n```text\npostcss.config.js\nmodule.exports = {\n plugins: [\n require('tailwindcss'),\n require('autoprefixer')\n ]\n};\n```\n\n```text\nnext.config.js\nconst withCSS = require('@zeit/next-css');\nmodule.exports = withCSS({});\n```\n\n```text\nstyles/main.css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```text\nnpx create-nx-workspace@latest my-org\n```\n\n```text\nyarn add --dev @nrwl/next\n```\n\n```text\nnx g @nrwl/next:application my-project\n```\n\n```text\nyarn add tailwindcss autoprefixer postcss-loader @zeit/next-css\n```\n\n```text\ncd apps/my-project\n```\n\n```text\nconst path = require('path');\n\nmodule.exports = {\n webpack: config => {\n config.module.rules.push({\n test: /\\.css$/,\n use: [\n {\n loader: 'postcss-loader',\n options: {\n ident: 'postcss',\n plugins: [\n require('tailwindcss')(\n path.resolve(__dirname, 'tailwind.config.js') // the absolute path of your tailwind.config.js\n ),\n require('autoprefixer')\n ]\n }\n }\n ],\n // the absolute path of the folder contains tailwind.css\n // I reuse tailwind.css across projects and libs so I put it in the workspace root\n // Maybe I should create a lib for it.\n include: path.resolve('./global') \n });\n\n return config;\n }\n};\n```\n\n```text\ntailwind\n```\n\n```text\nautoprefixer\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntailwind.css\n```\n\n```text\ntailwind.css\n```\n\n```text\n_app.tsx\n```\n\n```text\nnext.config.js\n```\n\n========================================\n\nComments:\n- Thanks. But here the context is within a nrwl/nx workspace. Have you tried in it?\n- hey @Yan thank you for posting the steps. I am trying to these steps and get this compile error ``` error - ./pages/index.module.css 11:5 Module parse failed: Unexpected token (11:5) File was processed with these loaders: * ../../node_modules/postcss-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders. | */ | > html { | line-height: 1.15; /* 1 */ | -webkit-text-size-adjust: 100%; /* 2 */ ``` any tips please? thanks\n- Hey @jerry it seems the issue is on css module. I did not use that, and btw I do not use nx for monorepo management now, so not quite sure how to properly config it. You can check nx's git issues. I remember there are some discussion on this there and they might have support css module since then.","metadata":{"transformedAt":"2026-08-18T18:33:42.950Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":188,"estimatedTokens":952}}855{"id":"stack-75229681","source":"stackoverflow","questionId":75229681,"title":"How can I use tailwind-css to style the active state of the Navlink(react-router-dom)?","tags":["javascript","reactjs","react-router-dom","tailwind-css","classname"],"text":"Title: How can I use tailwind-css to style the active state of the Navlink(react-router-dom)?\nTags: javascript, reactjs, react-router-dom, tailwind-css, classname\nSource: Stack Overflow\n\nQuestion:\nI am trying to use a template literal for the className of the `Navlink` but it does not work.\n\nThis is current code:\n\n```\nclassName={`px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${({ isActive }) => isActive ? \"bg-red-500\" : \"bg-black-500\"}`}\n```\n\nI tried using only the active part to check if anything else is messing with it but it still does not work.\n\n```\nclassName={`${({ isActive }) => isActive ? \"bg-red-500\" : \"bg-blue-500\"}`}\n```\n\nIs there something wrong with the way I am using the template literal?\n\nIt works when I use this:\n\n```\nclassName={({ isActive }) => isActive ? \"bg-red-500\" : \"bg-blue-500\"}\n```\n\n========================================\n\nTop Answer:\ntry this one. className={`px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${isActive ? \"bg-red-500\": \"bg-black-500\"}`}\n\n========================================\n\nCode:\n```text\nclassName={`px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${({ isActive }) => isActive ? \"bg-red-500\" : \"bg-black-500\"}`}\n```\n\n```text\nclassName={`${({ isActive }) => isActive ? \"bg-red-500\" : \"bg-blue-500\"}`}\n```\n\n```text\nclassName={({ isActive }) => isActive ? \"bg-red-500\" : \"bg-blue-500\"}\n```\n\n```text\nNavlink\n```\n\n```text\ndeclare function NavLink(\n props: NavLinkProps\n): React.ReactElement;\n\ninterface NavLinkProps\n extends Omit<\n LinkProps,\n \"className\" | \"style\" | \"children\"\n > {\n caseSensitive?: boolean;\n children?:\n | React.ReactNode\n | ((props: { isActive: boolean }) => React.ReactNode);\n className?:\n | string\n | ((props: { isActive: boolean; }) => string | undefined); // <--\n end?: boolean;\n style?:\n | React.CSSProperties\n | ((props: { isActive: boolean; }) => React.CSSProperties);\n}\n```\n\n```text\nclassName={({ isActive }) => [\n \"px-2 py-2.5\",\n \"hover:bg-cprimary-300 hover:text-csecond-100\",\n \"rounded-md transition\",\n isActive ? \"bg-red-500\" : \"bg-black-500\"\n ].join(\" \")\n}\n```\n\n```text\nclassName\n```\n\n```text\nisActive\n```\n\n```text\nisActive\n```\n\n```text\npx-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${isActive ? \"bg-red-500\": \"bg-black-500\"}\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.950Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":10,"totalLines":100,"estimatedTokens":598}}856{"id":"stack-66133523","source":"stackoverflow","questionId":66133523,"title":"Dynamically update CSS variables definitions in Tailwindcss during runtime","tags":["css","vue.js","tailwind-css","css-variables"],"text":"Title: Dynamically update CSS variables definitions in Tailwindcss during runtime\nTags: css, vue.js, tailwind-css, css-variables\nSource: Stack Overflow\n\nQuestion:\n### What I am trying to do?\n\nI have a component library website where I want to show the different color themes. I have a select box where the user can switch between different themes.\n\nI have two css files, lets name them watermelon and blueberry.\n\n```\n// blueberry/index/.css\n:root {\n--color-1: indigo;\n}\n```\n\n```\n// watermelon/index/.css\n:root {\n--color-1: green;\n}\n```\n\nand on my tailwind.config.js\n\n```\n//tailwind.config.js\ntheme: {\n extend: {\n color: {\n primary: \"var(--color-1)\"\n```\n\n### Whats happening on the code\n\nI have a watcher on selectedTheme, so everytime value changes, I import the correct theme css file.\n\n```\nimport { ref, watch } from \"vue\"\n\nexport default {\n setup() {\n const selectedTheme = ref(\"watermelon\")\n const themeOptions = [\n { name: \"Blueberry\", value: \"blueberry\" },\n { name: \"Watermelon\", value: \"watermelon\" },\n ]\n async function importTheme(theme) {\n try {\n await import(`../themes/${theme}/index.css`)\n } catch (error) {\n console.log(error)\n }\n }\n watch(\n selectedTheme,\n async newValue => {\n console.log(\"changing\", newValue)\n await importTheme(newValue)\n },\n { immediate: true }\n )\n return { themeOptions, selectedTheme }\n },\n}\n\n#app {\n font-family: \"Poppins\", sans-serif;\n}\n\n```\n\n### What is happening right now\n\nOn the first switch -> The theme is switched from watermelon to blueberry -> component color changes from green to indigo.\n\nOn second switch and after -> nothing happens, component color does not change.\n\nI'm not sure what's happening here. Can someone enlighten me or point me to the right direction?\n\n### What is supposed to happen\n\nSwitching works even after the first. Switch from green to indigo and then back to green.\n\n========================================\n\nTop Answer:\nNot sure if is what you want, but you can change css variables dynamically by doing:\n\n```\nif (typeof window !== 'undefined') {\n document.documentElement.style.setProperty('--color-1', someCoolColor)\n }\n```\n\nand this would be reflefect into tailwind styles that uses this variable.\n\n========================================\n\nCode:\n```text\n// blueberry/index/.css\n:root {\n--color-1: indigo;\n}\n```\n\n```text\n// watermelon/index/.css\n:root {\n--color-1: green;\n}\n```\n\n```text\n//tailwind.config.js\ntheme: {\n extend: {\n color: {\n primary: \"var(--color-1)\"\n```\n\n```text\nimport { ref, watch } from \"vue\"\n\nexport default {\n setup() {\n const selectedTheme = ref(\"watermelon\")\n const themeOptions = [\n { name: \"Blueberry\", value: \"blueberry\" },\n { name: \"Watermelon\", value: \"watermelon\" },\n ]\n async function importTheme(theme) {\n try {\n await import(`../themes/${theme}/index.css`)\n } catch (error) {\n console.log(error)\n }\n }\n watch(\n selectedTheme,\n async newValue => {\n console.log(\"changing\", newValue)\n await importTheme(newValue)\n },\n { immediate: true }\n )\n return { themeOptions, selectedTheme }\n },\n}\n</script>\n<style>\n#app {\n font-family: \"Poppins\", sans-serif;\n}\n</style>\n```\n\n```text\n.blueberry-theme {\n --color-1:indigo;\n}\n```\n\n```text\n.watermelon-theme {\n --color-1: green;\n}\n```\n\n```text\n<template>\n <Select :options=\"themeOptions\" v-model=\"selectedTheme\" />\n</template>\n\n<script>\nimport { ref, watch } from \"vue\"\nexport default {\n setup() {\n const selectedTheme = ref(\"blueberry-theme\")\n\n const themeOptions = [\n { name: \"Blueberry\", value: \"blueberry-theme\" },\n { name: \"Watermelon\", value: \"watermelon-theme\" },\n ]\n\n function setTheme(theme) {\n document.documentElement.className = theme\n }\n\n watch(\n selectedTheme,\n async newValue => {\n await setTheme(newValue)\n },\n { immediate: true }\n )\n\n return { themeOptions, selectedTheme }\n },\n}\n</script>\n```\n\n```text\ndocument.documentElement.className\n```\n\n```text\nif (typeof window !== 'undefined') {\n document.documentElement.style.setProperty('--color-1', someCoolColor)\n }\n```\n\n========================================\n\nComments:\n- Does the console show the change?\n- @Dan, yep it does\n- @Dan my thought process right now is that whenever I import the new index.css, it overrides the previously imported index.css because the css variables have the same name. 1. On the first switch -> The theme is switched from watermelon to blueberry -> component color changes from green to blue. 2. On second switch and after -> nothing happens, component color does not change.\n- I'm guessing that once a CSS module is loaded, future reloads of that module are ignored. Since unloading a CSS module is no trivial task, I would suggest rethinking the pattern. For example, your themes could have differently named classes. Or you could use a root element that changes class based on `selectedTheme`, and then each theme defines styles like: `.indigo .mydiv {}`\n- @Dan, yep you are probably right, have read somewhere about using `document.documentElement.className` to set/update class on the root div instead. Anyways, thanks for the effort!\n- You're welcome. Yeah, something like `` would be sufficient","metadata":{"transformedAt":"2026-08-18T18:33:42.950Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":9,"totalLines":225,"estimatedTokens":1306}}857{"id":"stack-65268254","source":"stackoverflow","questionId":65268254,"title":"TailwindCSS - Fixed div full width of flex parent","tags":["html","css","tailwind-css"],"text":"Title: TailwindCSS - Fixed div full width of flex parent\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have the below template created by using TailwindCSS:\n\n```\n\n \n \n \n 1\n \n\n \n \n \n Link #1\n \n \n Link #2\n \n \n\n \n \n \n \n \n 3\n \n 4\n \n \n \n\n```\n\n**Please see the following fiddle I have created here**.\n\nThe problem I have is with these two divs:\n\n```\n\n \n Link #1\n \n \n Link #2\n \n\n```\n\nI want to have two links at the bottom (Link #1 and Link #2 in my example), that have a fixed position. Each link's width should occupy 50% of the parent div.\n\nAs you can see in the example posted above, the width of the two bottoms `` exceeds that of the parent (#1).\n\nhttps://i.sstatic.net/Ppc7l.png\n\n========================================\n\nCode:\n```html\n<body class=\"h-full\">\n <div class=\"flex h-full\">\n <div class=\"w-5/6\">\n <div class=\"grid grid-rows-2 grid-flow-col h-full\" style=\"grid-template-rows: 93.8% 6.2%;\">\n <div class=\"relative bg-gray-200 h-full\">1</div>\n <div class=\"bg-red-200\">\n\n <!-- This area is where I have problems -->\n <div class=\"flex h-full\">\n <div class=\"w-1/2 h-full\">\n <div class=\"bg-blue-500 h-full fixed\" style=\"width: inherit;\">Link #1</div>\n </div>\n <div class=\"w-1/2 h-full\">\n <div class=\"bg-green-500 h-full fixed\" style=\"width: inherit;\">Link #2</div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"w-1/6\">\n <div class=\"grid grid-rows-2 grid-flow-col h-full\" style=\"grid-template-rows: 20% 80%;\">\n <div class=\"md:py-16 md:px-4 border-l border-gray-100 bg-gray-50\">3\n </div>\n <div class=\"md:py-4 md:px-4 border-l border-t border-gray-100\">4</div>\n </div>\n </div>\n </div>\n</body>\n```\n\n```html\n<div class=\"flex h-full\">\n <div class=\"w-1/2 h-full\">\n <div class=\"bg-blue-500 h-full fixed\" style=\"width: inherit;\">Link #1</div>\n </div>\n <div class=\"w-1/2 h-full\">\n <div class=\"bg-green-500 h-full fixed\" style=\"width: inherit;\">Link #2</div>\n </div>\n</div>\n```\n\n```text\n<div>\n```\n\n```text\nfixed\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.950Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":113,"estimatedTokens":545}}858{"id":"stack-66844616","source":"stackoverflow","questionId":66844616,"title":"Styles working locally but not applied properly when running `npm run build` on react app with tailwindcss","tags":["css","reactjs","npm","create-react-app","tailwind-css"],"text":"Title: Styles working locally but not applied properly when running `npm run build` on react app with tailwindcss\nTags: css, reactjs, npm, create-react-app, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm trying to figure out what exactly is happening, but I'm all out of ideas. I've recently transitioned to Tailwind and I set it up according to instructions for create-react-app, which can be seen here.\n\nI've also tried another setup, but I got the same problem. That setup can be seen here.\n\nFor whatever reason, everything is working normally in local development (when running code with `npm start`). But when I build the code, I'm getting some really weird stylings.\n\nhttps://i.sstatic.net/S3pPE.png\nThis is in local development\n\nhttps://i.sstatic.net/wHyJw.png\nThis is when `npm run build` is run.\n\nSpecific part of the code which isn't displaying as it should:\n\n```\n\n \n \n \n\n### Log in\n\n \n\n \n \n Don't have an account? history.push('/signup')} label='Sign up here!' />\n \n\n \n\n \n \n \n\n \n \n \n\n \n {displayInfoMessage()}\n \n \n```\n\nI've opened both files with inspect element, and everything seems to be the same. And problem is everywhere where there is any kind of `h1` element as far as I saw.\n\nThis is my `tailwind.config.js`:\n\n```\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n important: true,\n purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n colors: {\n transparent: 'transparent',\n current: 'currentColor',\n main: {\n light: '#508991',\n DEFAULT: '#1b262c',\n '100': '#DBF9F4',\n '700': '#60949B',\n },\n black: colors.black,\n white: colors.white,\n gray: colors.trueGray,\n indigo: colors.indigo,\n red: colors.rose,\n yellow: colors.amber,\n blue: colors.blue,\n green: colors.green,\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\nI've also tried setting `purge: false` to see if that was causing the problem, but it didn't change anything.\n\nIf anyone has any kind of idea what could be causing this, I'd appreciate it.\n\nEDIT: I've also noticed that the padding differs on development and build, so if anyone has any idea why that's happening, that would be also nice.\n\nFINAL EDIT: Problem was in the leftover boostrap files, since the project used that before switching to tailwind. In development environment bootstrap css was loaded on top of everything else, which lead to strange behavior.\n\nThere was leftover import in the `index.tsx`: `import 'bootstrap/dist/css/bootstrap.min.css'`\n\nAfter that import was removed, and `boostrap` package was removed from `package.json` file and `node_modules` folder was deleted and packages were reinstalled problem disappeared. True layout was actually generated by `npm run build`\n\n========================================\n\nTop Answer:\nTailwind resets all headings to have the base font size (16px by default) so unless you are explicit, that’s what you get. That means you’re actually getting extra styling in development that isn’t supposed to be there unless you have custom styles somewhere.\n\nAdd `text-xl` Or whatever size you want it to be to the `h1`\n\n========================================\n\nCode:\n```js\n<div className='w-full lg:w-1/4 m-auto p-5 text-center lg:shadow-2xl rounded-xl'>\n <HelmetComponent\n title='Log in | Notify Me'\n description='Login page for Notify Me.'\n />\n <NavbarLoggedOut/>\n <h1 className='font-bold'>Log in</h1>\n\n <LoginForm\n onSubmit={onLogin}\n />\n\n <div className='text-base mt-2'>\n <p>\n Don't have an account? <LinkButton onClick={() => history.push('/signup')} label='Sign up here!' />\n </p>\n </div>\n\n <div className='mt-4'>\n <GoogleOAuthComponent\n buttonText='Log in with Google'\n setErrorMessage={updateErrorMessage}\n />\n </div>\n\n <div className='mt-4'>\n <LoadingBar\n isLoading={waitingForServerResponse}\n />\n </div>\n\n <div>\n {displayInfoMessage()}\n </div>\n </div>\n```\n\n```js\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n important: true,\n purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n colors: {\n transparent: 'transparent',\n current: 'currentColor',\n main: {\n light: '#508991',\n DEFAULT: '#1b262c',\n '100': '#DBF9F4',\n '700': '#60949B',\n },\n black: colors.black,\n white: colors.white,\n gray: colors.trueGray,\n indigo: colors.indigo,\n red: colors.rose,\n yellow: colors.amber,\n blue: colors.blue,\n green: colors.green,\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\nnpm start\n```\n\n```text\nnpm run build\n```\n\n```text\nh1\n```\n\n```text\ntailwind.config.js\n```\n\n```text\npurge: false\n```\n\n```text\nindex.tsx\n```\n\n```text\nimport 'bootstrap/dist/css/bootstrap.min.css'\n```\n\n```text\nboostrap\n```\n\n```text\npackage.json\n```\n\n```text\nnode_modules\n```\n\n```text\nnpm run build\n```\n\n```text\nindex.tsx\n```\n\n```text\nimport 'bootstrap/dist/css/bootstrap.min.css'\n```\n\n```text\nboostrap\n```\n\n```text\npackage.json\n```\n\n```text\nnode_modules\n```\n\n```text\nnpm run build\n```\n\n```text\ntext-xl\n```\n\n```text\nh1\n```\n\n========================================\n\nComments:\n- Do you have an idea how to disable extra styling in development, my guess is always going with `text-{size}` classes instead of headings? Also, I've noticed that the padding also slightly differs in development and in production. Do you have any idea why that's the case?","metadata":{"transformedAt":"2026-08-18T18:33:42.950Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":21,"totalLines":262,"estimatedTokens":1397}}859{"id":"stack-79699078","source":"stackoverflow","questionId":79699078,"title":"How to keep buttons always at the bottom of the Ion Sheet Modal?","tags":["html","css","vue.js","ionic-framework","tailwind-css"],"text":"Title: How to keep buttons always at the bottom of the Ion Sheet Modal?\nTags: html, css, vue.js, ionic-framework, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using ion modal with breakpoints so it has handle and I can resize it.\n\nGood State #1\nGood State #2\n\nHere in this picture you can see the correct thing:\nAnd also when I click submit it is correct with the invalid messages:\n\nhttps://i.sstatic.net/TMyXGYhJ.png\nhttps://i.sstatic.net/8cavmKTK.png\n\nBut the problem is when I roll the drawer up so it takes the whole screen the button is not at the bottom as seen here.\n\nBad State\nDimensions that I use\n\nhttps://i.sstatic.net/wjo3m4JY.png\nhttps://i.sstatic.net/2fBIroeM.png\n\nI want the button to be at the bottom no matter what the drawer size is and I cant manage to do that.\n\n**m-add-project.vue**\n\n```\n\n \n \n \n \n \n \n \n {{ $t('projectModal.addNewProject') }}\n \n \n \n \n \n \n \n \n \n \n {{ $t('projectModal.projectName')\n }}\n \n \n \n {{ $t('projectModal.category')\n }}\n \n \n \n \n {{ $t('projectModal.selectDate')\n }}\n \n \n \n \n {{ err.$message }}\n \n \n \n \n \n {{ $t('projectModal.budgetUSD')\n }}\n \n \n \n \n \n {{ err.$message }}\n \n \n \n \n \n \n \n \n \n \n \n \n {{ $t('projectModal.cancel') }}\n \n \n \n \n {{ $t('projectModal.createProject') }}\n \n\n \n \n \n \n \n \n \n \n \n\nimport { ref, watch, computed } from 'vue'\nimport { required, minLength, maxLength, minValue, helpers } from '@vuelidate/validators'\nimport useVuelidate from '@vuelidate/core'\nimport XIcon from '@/plugins/app@projects/components/add-new-project/assets/x-icon.vue'\nimport DatePicker from 'primevue/datepicker'\nimport BudgetIcon from '@/plugins/app@projects/components/add-new-project/assets/budget-icon.vue'\nimport InputNumber from 'primevue/inputnumber'\nimport { useProjectsManagement } from '@/plugins/app@projects/composables/projects-management.composable'\nimport AInviteSelect from '@/plugins/app@projects/components/add-new-project/components/a-invite-select.vue'\nimport AUploadIcon from '@/plugins/app@projects/components/add-new-project/components/a-upload-icon.vue'\nimport { projectCategories } from '@/plugins/app@projects/composables/projects-management.composable'\nimport type { Project } from '@/plugins/app@projects/types/project.types'\nimport { getGlobalProperties } from '@wezeo/plugins'\nimport { useIsMobile } from '@/plugins/app/_composables/is-mobile.composable'\n\nconst emit = defineEmits(['closeModal', 'recalc-modal'])\nconst { $gp } = getGlobalProperties()\nconst uploadedFileName = ref('')\nconst { createProject } = useProjectsManagement()\nconst { isMobile } = useIsMobile()\n\nconst getInitialValues = () => ({\n name: '',\n category: null,\n dueDate: null,\n budget: null,\n members: [],\n uploadedImageUrl: ''\n})\n\nconst fields = ref(getInitialValues())\n\nconst rules = {\n name: {\n required: helpers.withMessage($gp.$t('validation.required'), required),\n minLength: helpers.withMessage(\n ({ $params }) => $gp.$t('validation.minLength', { min: $params.min }),\n minLength(5)\n ),\n maxLength: helpers.withMessage(\n ({ $params }) => $gp.$t('validation.maxLength', { max: $params.max }),\n maxLength(10)\n )\n },\n category: {\n required: helpers.withMessage($gp.$t('validation.required'), required)\n },\n dueDate: {\n required: helpers.withMessage($gp.$t('validation.required'), required),\n notInFuture: helpers.withMessage($gp.$t('validation.notInFuture'), value => !value || value \n projectCategories.map(option => ({\n ...option,\n value: $gp.$t(option.value)\n }))\n)\n\nfunction emitClose() {\n emit('closeModal')\n resetValues()\n}\n\nfunction resetValues() {\n fields.value = getInitialValues()\n v$.value.$reset()\n}\n\nfunction saveProject(newProject: Project) {\n createProject(newProject)\n $gp.$toast.success('Project was successfully created!', 'bottom', 3000)\n}\n\nfunction createProjectObject(): Project {\n return {\n title: fields.value.name,\n category: fields.value.category || '',\n date: fields.value.dueDate ? formatDateForProject(fields.value.dueDate) : '',\n budget: `$${Number(fields.value.budget).toLocaleString('de-DE')}`,\n members: fields.value.members.map((member: any) => member.name),\n status: 'started',\n completedTasks: 0,\n totalTasks: 0,\n icon: fields.value.uploadedImageUrl || null\n }\n}\n\nasync function confirmAction(): Promise {\n try {\n await $gp.$alert.confirm('Do you want to create this project?')\n return true\n } catch (e) {\n return false\n }\n}\n\nasync function submitForm() {\n const isValid = await v$.value.$validate()\n if (!isValid) return\n\n const confirmed = await confirmAction()\n if (!confirmed) return\n\n const project = createProjectObject()\n saveProject(project)\n emitClose()\n}\n\nfunction formatDateForProject(date: Date): string {\n const day = date.getDate().toString().padStart(2, '0');\n const monthIndex = date.getMonth();\n const year = date.getFullYear();\n const months = [\n 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',\n 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'\n ];\n const monthName = months[monthIndex];\n return `${day} ${monthName} ${year}`;\n}\n\nwatch(\n () => v$.value.$errors.map(e => e.$message).join(','),\n async () => {\n emit('recalc-modal')\n }\n)\n\n.w-alert-modal .ion-page {\n border: 1px solid var(--ion-color-neutral-grey);\n border-radius: 12px;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);\n}\n\n.project-datepicker:deep(.p-inputtext::placeholder) {\n color: var(--p-slate-500);\n}\n\n:deep(.p-datepicker) {\n border-radius: 8px;\n}\n\n.project-budget:deep(.p-inputtext::placeholder) {\n color: var(--p-slate-500);\n}\n\n.project-datepicker :deep(.p-datepicker-input-icon-container .p-datepicker-input-icon) {\n width: 16px;\n height: 19px;\n min-width: 16px;\n min-height: 19px;\n max-width: 16px;\n max-height: 19px;\n}\n\n:deep(.p-inputtext) {\n font-size: 14px;\n line-height: 21px;\n}\n\n:deep(.w-input-wrapper.custom-border-grey) {\n border: 1px solid var(--ion-color-neutral-grey);\n}\n\n:deep(.p-inputtext) {\n border: 1px solid var(--ion-color-neutral-grey);\n}\n\n:deep(.p-inputtext) {\n border: 1px solid var(--ion-color-neutral-grey);\n box-shadow: none;\n}\n\n```\n\nm-responsive-modal:\n\n```\n\n \n \n \n\n \n \n \n\n \n \n \n\nimport { ref, nextTick, onMounted, onBeforeUnmount } from 'vue'\nimport { useIsMobile } from '@/plugins/app/_composables/is-mobile.composable'\n\nconst isOpen = ref(false)\nconst { isMobile } = useIsMobile()\nconst preMeasureRef = ref(null)\nconst measuredHeight = ref(650)\nconst computedBreakpoints = ref([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1])\nconst computedInitialBreakpoint = ref(0.5)\nconst modalRef = ref(null)\nlet resizeObserver\nconst isAvailable = ref(true)\n\nonMounted(() => {\n if (isMobile.value && preMeasureRef.value) {\n resizeObserver = new ResizeObserver(() => {\n const contentHeight = preMeasureRef.value?.offsetHeight || 650\n measuredHeight.value = contentHeight\n })\n resizeObserver.observe(preMeasureRef.value)\n }\n})\n\nonBeforeUnmount(() => {\n if (resizeObserver && preMeasureRef.value) {\n resizeObserver.unobserve(preMeasureRef.value)\n }\n})\n\nasync function openModal() {\n await nextTick()\n await recalcModal()\n isOpen.value = true\n}\n\nfunction closeModal() {\n isAvailable.value = false\n isOpen.value = false;\n modalRef.value = null;\n setTimeout(() => {\n isAvailable.value = true\n }, 1)\n}\n\nasync function recalcModal(validateActive: boolean = false) {\n let contentHeight = preMeasureRef.value?.offsetHeight || 650\n if (validateActive) {\n contentHeight = contentHeight + 64\n }\n measuredHeight.value = contentHeight\n const vh = window.innerHeight;\n let fraction = Math.min(contentHeight / vh, 1);\n let breakpoints = [...computedBreakpoints.value, fraction];\n breakpoints = Array.from(new Set(breakpoints)).sort((a, b) => a - b);\n computedBreakpoints.value = breakpoints;\n computedInitialBreakpoint.value = fraction;\n\n await nextTick();\n await nextAnimationFrame();\n if (isMobile.value && modalRef.value) {\n modalRef.value.$el.setCurrentBreakpoint(fraction)\n }\n}\n\nfunction nextAnimationFrame() {\n return new Promise(resolve => requestAnimationFrame(resolve));\n}\n\ndefineExpose({ openModal, closeModal, recalcModal })\n\n@media (min-width: 640px) {\n ion-modal.add-project-modal {\n --height: auto;\n }\n}\n\n```\n\nAnd this is the example of it in my code:\n\n```\n\n \n\n```\n\nOkay so what I want and need is so that no matter the dimension or size of the mobile and the drawer the button should be always at the bottom even for iPhone SE or iPhone 12 Pro.\n\nEasy to reproduce code:\n\n```\n\n \n \n \n \n \n This progression is locked\n \n\n \n You need to complete level {{ modalData.previousLevel }} before accessing this.\n\n \n\n \n \n Cancel\n \n \n Level up\n \n \n \n \n \n\nimport { IonButton, IonContent, IonIcon, IonModal } from '@ionic/vue'\nimport { informationCircleOutline } from 'ionicons/icons'\nimport { useRouter } from 'vue-router'\n\nconst props = defineProps()\n\nconst emit = defineEmits()\n\nconst router = useRouter()\n\nconst handleLevelUp = () => {\n emit('dismiss')\n router.push({\n path: `/warm-up-info-screen/${props.modalData.skillId}/${props.modalData.previousProgressionId}`,\n query: { fromSkillId: props.modalData.skillId }\n })\n}\n\n```\n\nGood State #1\nGood State #2\n\nhttps://i.sstatic.net/WiVcqtRw.png\nhttps://i.sstatic.net/Fy5R3f4V.png\n\nSo what I want is to have the buttons always at the most bottom no matter the sheet size if it is 0.25 0.5 .75.\n\n========================================\n\nCode:\n```text\n<template>\n <div class=\"modal-outer\">\n <div class=\"modal-scrollable\">\n <div class=\"flex flex-col h-full max-h-screen\">\n <div class=\"flex-1 overflow-y-auto\">\n <div class=\"w-full flex flex-col\">\n <div class=\"sticky top-0 bg-white z-10 flex items-center justify-between border-b border-neutral-grey py-4 px-5\">\n <span class=\"text-grey text-[16px] font-medium\">\n {{ $t('projectModal.addNewProject') }}\n </span>\n <button @click=\"emitClose\" class=\"w-4 h-5\">\n <XIcon class=\"w-4 h-5 text-neutral-grey\" />\n </button>\n </div>\n <div class=\"flex flex-col items-center gap-3 p-6\">\n <AUploadIcon v-model:fileName=\"uploadedFileName\" v-model:fileUrl=\"fields.uploadedImageUrl\"\n :invalid=\"v$.uploadedImageUrl.$error\" class=\"mb-3\" />\n <slot name=\"title\"></slot>\n <slot name=\"body\">\n <div class=\"w-full flex flex-col gap-3\">\n <label class=\"text-[14px] leading-[18px] font-medium text-ink\">{{ $t('projectModal.projectName')\n }}</label>\n <W-input v-model=\"v$.name\" :placeholder=\"$t('projectModal.projectName')\" class=\"custom-border-grey\" />\n </div>\n <div class=\"w-full flex flex-col gap-3\">\n <label class=\"text-[14px] leading-[18px] font-medium text-ink\">{{ $t('projectModal.category')\n }}</label>\n <W-select v-model=\"v$.category\" :options=\"translatedCategories\"\n :placeholder=\"$t('projectModal.selectCategory')\" class=\"custom-border-grey\" />\n </div>\n <div class=\"w-full flex gap-4\">\n <div class=\"relative w-full max-w-[305px] flex flex-col gap-3\">\n <label class=\"text-[14px] leading-[18px] font-medium text-ink\">{{ $t('projectModal.selectDate')\n }}</label>\n <div class=\"w-full max-w-[305px]\">\n <DatePicker v-model=\"fields.dueDate\" size=\"large\" :placeholder=\"$t('projectModal.selectDate')\"\n showIcon iconDisplay=\"input\" class=\"w-full h-[52px] project-datepicker\"\n :class=\"{ 'border-red-500': v$.dueDate.$error }\" :invalid=\"v$.dueDate.$error\" />\n <span v-if=\"v$.dueDate.$error\" class=\"text-red-500 text-sm mt-1\">\n <span v-for=\"err in v$.dueDate.$errors\" :key=\"err.$uid\">\n {{ err.$message }}\n </span>\n </span>\n </div>\n </div>\n <div class=\"relative w-full max-w-[305px] flex flex-col gap-3\">\n <label class=\"text-[14px] leading-[18px] font-medium text-ink\">{{ $t('projectModal.budgetUSD')\n }}</label>\n <div class=\"relative w-full h-[52px]\">\n <InputNumber v-model=\"fields.budget\" inputId=\"locale-german\" locale=\"de-DE\" fluid\n class=\"project-budget h-[52px]\" :invalid=\"v$.budget.$error\"\n :placeholder=\"$t('projectModal.setBudget')\" />\n <BudgetIcon\n class=\"text-ion-grey absolute right-3 top-1/2 -translate-y-1/2 w-4 h-[19px] pointer-events-none\" />\n <span v-if=\"v$.budget.$error\" class=\"text-red-500 text-sm mt-1\">\n <span v-for=\"err in v$.budget.$errors\" :key=\"err.$uid\">\n {{ err.$message }}\n </span>\n </span>\n </div>\n </div>\n </div>\n <AInviteSelect v-model=\"fields.members\" :invalid=\"v$.members.$error\" />\n </slot>\n </div>\n </div>\n </div>\n <div class=\"flex flex-col sm:flex-row shrink-0 p-6 pt-0 bg-white gap-2 justify-between items-center\">\n <W-button v-if=\"!isMobile\" @click=\"emitClose\" color=\"none\"\n class=\"bg-light-grey text-sm text-grey font-medium flex items-center justify-center w-[94px] h-[44px] rounded-[6px] whitespace-nowrap\">\n {{ $t('projectModal.cancel') }}\n </W-button>\n <slot name=\"footer\">\n <W-button\n @click=\"submitForm\"\n :class=\"isMobile\n ? 'bg-blue font-medium flex items-center justify-center w-full h-[44px] rounded-[6px] text-sm whitespace-nowrap mt-6'\n : 'bg-blue font-medium flex items-center justify-center w-[144px] h-[44px] rounded-[6px] text-sm whitespace-nowrap mt-6'\"\n >\n <p class=\"text-white\">\n {{ $t('projectModal.createProject') }}\n </p>\n </W-button>\n </slot>\n <div v-if=\"isMobile\" class=\"w-full flex justify-center pb-2\">\n <div class=\"bg-black rounded-full mt-3 w-[140px] h-[6px]\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed } from 'vue'\nimport { required, minLength, maxLength, minValue, helpers } from '@vuelidate/validators'\nimport useVuelidate from '@vuelidate/core'\nimport XIcon from '@/plugins/app@projects/components/add-new-project/assets/x-icon.vue'\nimport DatePicker from 'primevue/datepicker'\nimport BudgetIcon from '@/plugins/app@projects/components/add-new-project/assets/budget-icon.vue'\nimport InputNumber from 'primevue/inputnumber'\nimport { useProjectsManagement } from '@/plugins/app@projects/composables/projects-management.composable'\nimport AInviteSelect from '@/plugins/app@projects/components/add-new-project/components/a-invite-select.vue'\nimport AUploadIcon from '@/plugins/app@projects/components/add-new-project/components/a-upload-icon.vue'\nimport { projectCategories } from '@/plugins/app@projects/composables/projects-management.composable'\nimport type { Project } from '@/plugins/app@projects/types/project.types'\nimport { getGlobalProperties } from '@wezeo/plugins'\nimport { useIsMobile } from '@/plugins/app/_composables/is-mobile.composable'\n\nconst emit = defineEmits(['closeModal', 'recalc-modal'])\nconst { $gp } = getGlobalProperties()\nconst uploadedFileName = ref('')\nconst { createProject } = useProjectsManagement()\nconst { isMobile } = useIsMobile()\n\nconst getInitialValues = () => ({\n name: '',\n category: null,\n dueDate: null,\n budget: null,\n members: [],\n uploadedImageUrl: ''\n})\n\nconst fields = ref(getInitialValues())\n\nconst rules = {\n name: {\n required: helpers.withMessage($gp.$t('validation.required'), required),\n minLength: helpers.withMessage(\n ({ $params }) => $gp.$t('validation.minLength', { min: $params.min }),\n minLength(5)\n ),\n maxLength: helpers.withMessage(\n ({ $params }) => $gp.$t('validation.maxLength', { max: $params.max }),\n maxLength(10)\n )\n },\n category: {\n required: helpers.withMessage($gp.$t('validation.required'), required)\n },\n dueDate: {\n required: helpers.withMessage($gp.$t('validation.required'), required),\n notInFuture: helpers.withMessage($gp.$t('validation.notInFuture'), value => !value || value <= new Date())\n },\n budget: {\n required: helpers.withMessage($gp.$t('validation.required'), required),\n minValue: helpers.withMessage($gp.$t('validation.budgetMinValue'), minValue(1))\n },\n members: {\n required: helpers.withMessage($gp.$t('validation.membersRequired'), required)\n },\n uploadedImageUrl: {}\n}\n\nconst v$ = useVuelidate(rules, fields)\n\nconst translatedCategories = computed(() =>\n projectCategories.map(option => ({\n ...option,\n value: $gp.$t(option.value)\n }))\n)\n\nfunction emitClose() {\n emit('closeModal')\n resetValues()\n}\n\nfunction resetValues() {\n fields.value = getInitialValues()\n v$.value.$reset()\n}\n\nfunction saveProject(newProject: Project) {\n createProject(newProject)\n $gp.$toast.success('Project was successfully created!', 'bottom', 3000)\n}\n\nfunction createProjectObject(): Project {\n return {\n title: fields.value.name,\n category: fields.value.category || '',\n date: fields.value.dueDate ? formatDateForProject(fields.value.dueDate) : '',\n budget: `$${Number(fields.value.budget).toLocaleString('de-DE')}`,\n members: fields.value.members.map((member: any) => member.name),\n status: 'started',\n completedTasks: 0,\n totalTasks: 0,\n icon: fields.value.uploadedImageUrl || null\n }\n}\n\nasync function confirmAction(): Promise<boolean> {\n try {\n await $gp.$alert.confirm('Do you want to create this project?')\n return true\n } catch (e) {\n return false\n }\n}\n\nasync function submitForm() {\n const isValid = await v$.value.$validate()\n if (!isValid) return\n\n const confirmed = await confirmAction()\n if (!confirmed) return\n\n const project = createProjectObject()\n saveProject(project)\n emitClose()\n}\n\nfunction formatDateForProject(date: Date): string {\n const day = date.getDate().toString().padStart(2, '0');\n const monthIndex = date.getMonth();\n const year = date.getFullYear();\n const months = [\n 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',\n 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'\n ];\n const monthName = months[monthIndex];\n return `${day} ${monthName} ${year}`;\n}\n\nwatch(\n () => v$.value.$errors.map(e => e.$message).join(','),\n async () => {\n emit('recalc-modal')\n }\n)\n</script>\n\n<style>\n.w-alert-modal .ion-page {\n border: 1px solid var(--ion-color-neutral-grey);\n border-radius: 12px;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);\n}\n</style>\n\n<style scoped>\n.project-datepicker:deep(.p-inputtext::placeholder) {\n color: var(--p-slate-500);\n}\n\n:deep(.p-datepicker) {\n border-radius: 8px;\n}\n\n.project-budget:deep(.p-inputtext::placeholder) {\n color: var(--p-slate-500);\n}\n\n.project-datepicker :deep(.p-datepicker-input-icon-container .p-datepicker-input-icon) {\n width: 16px;\n height: 19px;\n min-width: 16px;\n min-height: 19px;\n max-width: 16px;\n max-height: 19px;\n}\n\n:deep(.p-inputtext) {\n font-size: 14px;\n line-height: 21px;\n}\n\n:deep(.w-input-wrapper.custom-border-grey) {\n border: 1px solid var(--ion-color-neutral-grey);\n}\n\n:deep(.p-inputtext) {\n border: 1px solid var(--ion-color-neutral-grey);\n}\n\n:deep(.p-inputtext) {\n border: 1px solid var(--ion-color-neutral-grey);\n box-shadow: none;\n}\n</style>\n```\n\n```text\n<template>\n <div ref=\"preMeasureRef\" class=\"absolute -left-[9999px] -top-[9999px] invisible pointer-events-none\">\n <slot />\n </div>\n\n <ion-modal\n ref=\"modalRef\"\n v-if=\"isMobile && isAvailable\"\n :isOpen=\"isOpen\"\n @willDismiss=\"closeModal()\"\n class=\"add-project-modal\"\n :breakpoints=\"computedBreakpoints\"\n :initialBreakpoint=\"computedInitialBreakpoint\"\n >\n <slot @recalc-modal=\"recalcModal\" />\n </ion-modal>\n\n <ion-modal ref=\"modalRef\" v-else :isOpen=\"isOpen\" @willDismiss=\"closeModal()\" class=\"add-project-modal\">\n <slot @recalc-modal=\"recalcModal\" />\n </ion-modal>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, nextTick, onMounted, onBeforeUnmount } from 'vue'\nimport { useIsMobile } from '@/plugins/app/_composables/is-mobile.composable'\n\nconst isOpen = ref(false)\nconst { isMobile } = useIsMobile()\nconst preMeasureRef = ref(null)\nconst measuredHeight = ref(650)\nconst computedBreakpoints = ref([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1])\nconst computedInitialBreakpoint = ref(0.5)\nconst modalRef = ref(null)\nlet resizeObserver\nconst isAvailable = ref(true)\n\nonMounted(() => {\n if (isMobile.value && preMeasureRef.value) {\n resizeObserver = new ResizeObserver(() => {\n const contentHeight = preMeasureRef.value?.offsetHeight || 650\n measuredHeight.value = contentHeight\n })\n resizeObserver.observe(preMeasureRef.value)\n }\n})\n\nonBeforeUnmount(() => {\n if (resizeObserver && preMeasureRef.value) {\n resizeObserver.unobserve(preMeasureRef.value)\n }\n})\n\nasync function openModal() {\n await nextTick()\n await recalcModal()\n isOpen.value = true\n}\n\nfunction closeModal() {\n isAvailable.value = false\n isOpen.value = false;\n modalRef.value = null;\n setTimeout(() => {\n isAvailable.value = true\n }, 1)\n}\n\nasync function recalcModal(validateActive: boolean = false) {\n let contentHeight = preMeasureRef.value?.offsetHeight || 650\n if (validateActive) {\n contentHeight = contentHeight + 64\n }\n measuredHeight.value = contentHeight\n const vh = window.innerHeight;\n let fraction = Math.min(contentHeight / vh, 1);\n let breakpoints = [...computedBreakpoints.value, fraction];\n breakpoints = Array.from(new Set(breakpoints)).sort((a, b) => a - b);\n computedBreakpoints.value = breakpoints;\n computedInitialBreakpoint.value = fraction;\n\n await nextTick();\n await nextAnimationFrame();\n if (isMobile.value && modalRef.value) {\n modalRef.value.$el.setCurrentBreakpoint(fraction)\n }\n}\n\nfunction nextAnimationFrame() {\n return new Promise(resolve => requestAnimationFrame(resolve));\n}\n\n\ndefineExpose({ openModal, closeModal, recalcModal })\n</script>\n\n<style scoped>\n@media (min-width: 640px) {\n ion-modal.add-project-modal {\n --height: auto;\n }\n}\n</style>\n```\n\n```text\n<MResponsiveModal ref=\"addNewProjectModal\">\n <MAddProject\n @closeModal=\"addNewProjectModal?.closeModal\"\n @recalc-modal=\"onRecalcModal\"\n />\n</MResponsiveModal>\n```\n\n```text\n<template>\n <ion-modal :is-open=\"isOpen\" :initial-breakpoint=\"0.25\" :breakpoints=\"[0, 0.25, 0.5, 0.75]\" @didDismiss=\"$emit('dismiss')\">\n <ion-content>\n <div class=\"p-5 h-full\">\n <div class=\"flex items-center justify-center gap-2\">\n <ion-icon :icon=\"informationCircleOutline\" class=\"w-7 h-7\"></ion-icon>\n <div class=\"text-xl font-semibold\">This progression is locked</div>\n </div>\n\n <div class=\"mt-5 text-sm leading-relaxed\">\n <p>You need to complete level {{ modalData.previousLevel }} before accessing this.</p>\n </div>\n\n <div class=\"mt-5 flex justify-end gap-2\">\n <ion-button size=\"small\" fill=\"clear\" @click=\"$emit('dismiss')\">\n Cancel\n </ion-button>\n <ion-button size=\"small\" @click=\"handleLevelUp\">\n Level up\n </ion-button>\n </div>\n </div>\n </ion-content>\n </ion-modal>\n</template>\n\n<script setup lang=\"ts\">\nimport { IonButton, IonContent, IonIcon, IonModal } from '@ionic/vue'\nimport { informationCircleOutline } from 'ionicons/icons'\nimport { useRouter } from 'vue-router'\n\nconst props = defineProps<{\n isOpen: boolean\n modalData: {\n previousLevel: number\n skillId: number\n previousProgressionId: number\n }\n}>()\n\nconst emit = defineEmits<{\n (e: 'dismiss'): void\n}>()\n\nconst router = useRouter()\n\nconst handleLevelUp = () => {\n emit('dismiss')\n router.push({\n path: `/warm-up-info-screen/${props.modalData.skillId}/${props.modalData.previousProgressionId}`,\n query: { fromSkillId: props.modalData.skillId }\n })\n}\n</script>\n```\n\n```js\n<!--\n A proper bottom sheet that resizes instead of translating heights.\n\n This component is a replacement for `ion-modal` that uses `ion-content`\n and `ion-footer` so the buttons stay pinned and silky smooth.\n-->\n<template>\n <ion-modal\n ref=\"modalRef\"\n class=\"resize-sheet-modal\"\n :is-open=\"isOpen\"\n @didDismiss=\"$emit('dismiss')\"\n >\n <div\n class=\"sheet\"\n :class=\"{ animating }\"\n :style=\"{ height: `${height}px` }\"\n ref=\"sheetRef\"\n >\n <!-- handle is a direct child of the sheet so it paints above ion-header -->\n <div class=\"handle\" />\n\n <!-- the whole top bar is the drag target -->\n <div class=\"grabber\" ref=\"grabberRef\">\n <ion-header>\n <ion-toolbar>\n <ion-title>Add new project</ion-title>\n <ion-buttons slot=\"end\">\n <ion-button @click=\"$emit('dismiss')\">✕</ion-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n </div>\n\n <ion-content class=\"ion-padding\">\n <ion-item v-for=\"n in 12\" :key=\"n\">\n <ion-input :label=\"`Field ${n}`\" label-placement=\"stacked\" :placeholder=\"`Field ${n}`\" />\n </ion-item>\n </ion-content>\n\n <ion-footer>\n <ion-toolbar>\n <ion-buttons slot=\"end\">\n <ion-button fill=\"clear\" @click=\"$emit('dismiss')\">Cancel</ion-button>\n <ion-button data-testid=\"resize-submit\" @click=\"$emit('dismiss')\">Submit</ion-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-footer>\n </div>\n </ion-modal>\n</template>\n\n<script setup>\nimport { ref, watch, onBeforeUnmount } from 'vue'\nimport {\n IonModal, IonHeader, IonToolbar, IonTitle, IonButtons,\n IonButton, IonContent, IonFooter, IonItem, IonInput,\n} from '@ionic/vue'\n\n// breakpoints as fractions of the viewport height (ascending)\nconst BREAKPOINTS = [0.25, 0.5, 1]\nconst INITIAL = 0.5\n// drag below this fraction of the smallest breakpoint dismisses the sheet\nconst DISMISS_FRACTION = 0.5\n\ndefineProps({ isOpen: Boolean })\nconst emit = defineEmits(['dismiss'])\n\nconst modalRef = ref(null)\nconst sheetRef = ref(null)\nconst grabberRef = ref(null)\n\nconst height = ref(0)\nconst animating = ref(false) // toggles the CSS height transition\n\nconst vh = () => window.innerHeight\nconst clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v))\nconst maxPx = () => BREAKPOINTS[BREAKPOINTS.length - 1] * vh()\nconst minPx = () => BREAKPOINTS[0] * vh()\n\nconst snapTo = (px) => {\n // nearest breakpoint by pixel distance\n let best = BREAKPOINTS[0]\n let bestDist = Infinity\n for (const bp of BREAKPOINTS) {\n const d = Math.abs(bp * vh() - px)\n if (d < bestDist) { bestDist = d; best = bp }\n }\n return best * vh()\n}\n\nlet dragging = false\nlet startY = 0\nlet startHeight = 0\n\nconst onWindowMove = (e) => {\n if (!dragging) return\n height.value = clamp(startHeight - (e.clientY - startY), 0, maxPx())\n}\n\nconst endDrag = () => {\n if (!dragging) return\n dragging = false\n window.removeEventListener('pointermove', onWindowMove)\n window.removeEventListener('pointerup', endDrag)\n window.removeEventListener('pointercancel', endDrag)\n animating.value = true // animate the snap\n if (height.value < minPx() * DISMISS_FRACTION) {\n height.value = 0\n emit('dismiss')\n return\n }\n height.value = snapTo(height.value)\n}\n\nconst onPointerDown = (e) => {\n if (e.button != null && e.button !== 0) return\n // let taps on the header buttons through instead of starting a drag\n if (e.target?.closest?.('ion-buttons, ion-button')) return\n dragging = true\n startY = e.clientY\n startHeight = height.value\n animating.value = false\n // Listen on window (not the element) so shadow-DOM boundaries and lost pointer\n // capture can't drop mid-drag moves (more reliable).\n window.addEventListener('pointermove', onWindowMove)\n window.addEventListener('pointerup', endDrag)\n window.addEventListener('pointercancel', endDrag)\n}\n\nconst onPresent = () => {\n animating.value = false\n height.value = INITIAL * vh()\n grabberRef.value?.addEventListener('pointerdown', onPointerDown, true)\n}\nconst onDismiss = () => {\n grabberRef.value?.removeEventListener('pointerdown', onPointerDown, true)\n emit('dismiss')\n}\n\nlet boundEl = null\nconst bind = (el) => {\n if (!el || el === boundEl) return\n unbind()\n el.addEventListener('didPresent', onPresent)\n el.addEventListener('didDismiss', onDismiss)\n boundEl = el\n}\nconst unbind = () => {\n if (!boundEl) return\n boundEl.removeEventListener('didPresent', onPresent)\n boundEl.removeEventListener('didDismiss', onDismiss)\n boundEl = null\n}\n\nwatch(modalRef, (comp) => {\n const el = comp?.$el ?? comp\n if (el) bind(el)\n})\n\nonBeforeUnmount(() => {\n grabberRef.value?.removeEventListener('pointerdown', onPointerDown, true)\n window.removeEventListener('pointermove', onWindowMove)\n window.removeEventListener('pointerup', endDrag)\n window.removeEventListener('pointercancel', endDrag)\n unbind()\n})\n</script>\n\n<style scoped>\n.resize-sheet-modal {\n --background: transparent;\n --box-shadow: none;\n --width: 100%;\n --height: 100%;\n --border-radius: 0;\n}\n\n.resize-sheet-modal::part(content) {\n pointer-events: none;\n}\n\n.sheet {\n pointer-events: auto;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n background: var(--ion-background-color, #fff);\n border-top-left-radius: 14px;\n border-top-right-radius: 14px;\n box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.18);\n overflow: hidden;\n}\n\n.sheet.animating {\n transition: height 0.28s cubic-bezier(0.32, 0.72, 0, 1);\n}\n\n.sheet ion-content {\n flex: 1;\n min-height: 0;\n}\n\n.grabber {\n position: relative;\n flex-shrink: 0;\n cursor: grab;\n touch-action: none;\n user-select: none;\n}\n\n.grabber:active {\n cursor: grabbing;\n}\n\n.grabber ion-toolbar {\n --padding-top: 8px;\n}\n\n.handle {\n position: absolute;\n top: 7px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 11;\n width: 40px;\n height: 5px;\n border-radius: 3px;\n background: var(--ion-color-medium, #9aa0a6);\n opacity: 0.4;\n pointer-events: none;\n}\n</style>\n```\n\n```text\nion-modal\n```\n\n========================================\n\nComments:\n- It's difficult to understand the root problem because of all the custom element names, and a lot of irrelevant code (like validation, among others). The only real Ionic thing that stands out is `` and Ionic is heavily dependent on their classes/components being used. If you can make a simple example using only Ionic components I'd be glad to take a look, but this is too complex to have something jump out.\n- @MattP I added at the bottom easy to reproduce step. After half year I again want to do the same thing and am unable to do it.","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":1149,"estimatedTokens":7713}}860{"id":"stack-75129043","source":"stackoverflow","questionId":75129043,"title":"How can I transition an element between a relative position to an absolute position?","tags":["css","vue.js","tailwind-css"],"text":"Title: How can I transition an element between a relative position to an absolute position?\nTags: css, vue.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm working on a portfolio site and I had this cool idea that the landing page will have the name in the middle and then when I select a route the page will turn into a navbar.\n\nThe problem is, in order to do this I either have to position the navbar items absolutely, which I don't want to do, or I need to center the name in the middle of the screen relative to its original position, which is not desirable either.\n\nThis is how it looks now\n\nI'm using Vue with Tailwind, but a vanilla HTML solution would help.\n\nThis is my code:\n\n```\n\n \n \n \n \n Aby\n \n \n Isakov\n \n \n click\n \n \n\n```\n\nI tried to position the navbar items absolutely, but this caused problems with making the component responsive.\n\n========================================\n\nTop Answer:\nUnfortunately, this can't be achieved for time being according the docs.\n\n### Reference\n\n### 1. w3 docs\n\nAnimatable: no\n\n### 2. mozilla docs\n\nAnimation type: discrete\n\n========================================\n\nCode:\n```html\n<template>\n <header\n class=\"bg-black/25 py-3 transition-[max-height] duration-1000 ease-in-out max-h-screen h-screen justify-center\"\n :class=\"{\n 'flex max-h-20': !isHomePage,\n }\"\n >\n <div\n class=\"w-5/6 flex justify-between items-center\"\n :class=\"{ 'h-screen': isHomePage }\"\n >\n <router-link to=\"/\" :class=\"{ 'flex space-x-2 items-end': !isHomePage }\">\n <div\n class=\"text-3xl font-semibold transition-all absolute duration-1000 left-1/2 top-1/3 -translate-y-4\"\n :class=\"{\n 'relative !translate-y-0 !translate-x-0 left-0 top-0': !isHomePage,\n }\"\n >\n Aby\n </div>\n <div\n class=\"text-2xl font-medium transition-all duration-1000 absolute left-1/2 top-1/3 translate-y-4 -translate-x-4\"\n :class=\"{\n 'relative !translate-y-0 !translate-x-0 left-0 top-0': !isHomePage,\n }\"\n >\n Isakov\n </div>\n </router-link>\n <router-link to=\"/other\">click</router-link>\n </div>\n </header>\n</template>\n```\n\n```text\nfunction positionTransition(element) {\n var rectBefore = element.getBoundingClientRect(); //get old coordinates\n \n //change positioning:\n element.style.position = \"absolute\";\n element.style.left = \"50vw\";\n element.style.top = \"50vh\";\n \n var rectAfter = element.getBoundingClientRect(); //get new coordinates\n \n //calculate the difference:\n var xDiff = -(rectAfter.x - rectBefore.x);\n var yDiff = -(rectAfter.y - rectBefore.y);\n \n //translate back, so that the absolute positioned element seems to be in the old place:\n element.style.transform = \"translate(\" + xDiff + \"px, \" + yDiff + \"px)\";\n \n //finally, make the transition, which works because it remains in position: absolute\n setTimeout(function() { //without the timeout, transition is ignored\n element.style.transition = \"transform 1000ms ease-in-out\";\n element.style.transform = \"\";\n }, 10);\n}\n```\n\n```js\nwindow.addEventListener(\"DOMContentLoaded\", function() {\n setTimeout(function() {\n var element = document.querySelector(\".the-changing-span\");\n positionTransition(element);\n }, 1000);\n });\n \n function positionTransition(element) {\n var rectBefore = element.getBoundingClientRect(); //get old coordinates\n \n //change positioning:\n element.style.position = \"absolute\";\n element.style.left = \"50vw\";\n element.style.top = \"50vh\";\n \n var rectAfter = element.getBoundingClientRect(); //get new coordinates\n \n //calculate the difference:\n var xDiff = -(rectAfter.x - rectBefore.x);\n var yDiff = -(rectAfter.y - rectBefore.y);\n \n //translate, so that the absolute positioned element seems to be in the old place:\n element.style.transform = \"translate(\" + xDiff + \"px, \" + yDiff + \"px)\";\n \n //finally, make the transition, which works because it remains in position: absolute\n setTimeout(function() {\n element.style.transition = \"transform 1000ms ease-in-out\";\n element.style.transform = \"\";\n }, 10);\n }\n```\n\n```css\n.the-changing-span {\n position: relative;\n }\n \n span {\n border: 1px solid #AAA;\n }\n```\n\n```html\n<span class=\"a-simple-span\">\n stays\n </span>\n <span class=\"the-changing-span\">\n changes\n </span>\n```\n\n========================================\n\nComments:\n- According to the spec, no. You can't animate the position property\n- @BernardBorg I know that, but the question is there a way to animate to the relative positive. Maybe I'm approaching this all wrong?\n- You can transition/animate their relative position - you'd just have to *calculate* by how much you need to move the element from its default position in the nav bar, for it to appear in the center of the screen then.\n- tried playing with this for a while... Didn't work for me still. All this does for me is jump the name to the center then get it back with a transition..\n- this happened to me when I forgot the minus sign. Anyway, I added a snippet with the full HTML and CSS. I forgot to mention the initial position: relative of the element, and now it is built into the example. Feel free to ask me if anything goes wrong!","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":175,"estimatedTokens":1372}}861{"id":"stack-79681828","source":"stackoverflow","questionId":79681828,"title":"How to change the default font for entire Angular project?","tags":["css","angular","fonts","tailwind-css","primeng"],"text":"Title: How to change the default font for entire Angular project?\nTags: css, angular, fonts, tailwind-css, primeng\nSource: Stack Overflow\n\nQuestion:\nI am currently working on a project with these technologies: Angular 19; PrimeNG 19; Tailwindcss 4.1.\n\nI am trying to make \"Exo 2\" as my default font for my entire project. So I decided to try and make \"Exo 2\" the tailwindcss default font, and then, the components from PrimeNG would inherit the font family.\n\nThis is my `styles.scss`:\n\n```\n@import url(\"https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap\");\n@import \"tailwindcss\";\n@import \"primeicons/primeicons.css\";\n@import \"leaflet.markercluster/dist/MarkerCluster.css\";\n@import \"leaflet.markercluster/dist/MarkerCluster.Default.css\";\n\n@theme {\n --default-font-family: \"Exo 2\", sans-serif;\n}\n\n// I have also tried this:\n/*@theme {\n --font-sans: \"Exo 2\", ui-sans-serif, system-ui, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-serif: \"Exo 2\", ui-serif, Georgia, Cambria, \"Times New Roman\", Times,\n serif;\n --font-mono: \"Exo 2\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n \"Liberation Mono\", \"Courier New\", monospace;\n}*/\n\nhtml,\nbody {\n height: 100%;\n}\n\n.p-component {\n font-family: inherit;\n}\n```\n\nI was expecting that \"Exo 2\" would become the default font for my project, however, when I inspect a PrimeNG component, I see this when I inspect ``:\n\nThe same happens when I inspect something that isn't a PrimeNG component, for example a ``.\n\nWhat's the problem? Can it be something with my `index.html`? Can it be some configuration of the tailwindcss?\n\n========================================\n\nCode:\n```text\n@import url(\"https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap\");\n@import \"tailwindcss\";\n@import \"primeicons/primeicons.css\";\n@import \"leaflet.markercluster/dist/MarkerCluster.css\";\n@import \"leaflet.markercluster/dist/MarkerCluster.Default.css\";\n\n@theme {\n --default-font-family: \"Exo 2\", sans-serif;\n}\n\n// I have also tried this:\n/*@theme {\n --font-sans: \"Exo 2\", ui-sans-serif, system-ui, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-serif: \"Exo 2\", ui-serif, Georgia, Cambria, \"Times New Roman\", Times,\n serif;\n --font-mono: \"Exo 2\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n \"Liberation Mono\", \"Courier New\", monospace;\n}*/\n\nhtml,\nbody {\n height: 100%;\n}\n\n.p-component {\n font-family: inherit;\n}\n```\n\n```text\nstyles.scss\n```\n\n```text\n<p-menubar>\n```\n\n```text\n<p>\n```\n\n```text\nindex.html\n```\n\n```css\n@theme {\n --font-custom: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n /* ... */\n}\n```\n\n```css\n@theme {\n --font-exo: \"Exo 2\", sans-serif;\n}\n```\n\n```css\n@layer base {\n html,\n body,\n body .p-component {\n font-family: var(--font-exo);\n }\n}\n```\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap\");\n\n@import \"tailwindcss\";\n@plugin \"tailwindcss-primeui\";\n@import \"primeicons/primeicons.css\";\n\n@theme {\n --font-exo: \"Exo 2\", sans-serif;\n}\n\n@layer base {\n html,\n body,\n body .p-component {\n font-family: var(--font-exo);\n }\n}\n```\n\n```js\nprovidePrimeNG({\n theme: {\n preset: Aura,\n options: {\n cssLayer: {\n name: 'primeng',\n order: 'theme, base, primeng'\n }\n }\n }\n})\n```\n\n```text\n--default-font-family\n```\n\n```text\n--font-*\n```\n\n```text\n--font-custom\n```\n\n```text\n\"Exo 2\"\n```\n\n```text\nfont-exo\n```\n\n========================================\n\nComments:\n- Thank you for your answer! It worked, and now all PrimeNG components are using the font I wanted. However, I noticed that some elements still weren't inheriting the \"Exo 2\" font, so I had to add the following rule to ensure consistency across everything: * { font-family: var(--font-exo); } That fixed it completely. Thanks again!","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":15,"totalLines":181,"estimatedTokens":1050}}862{"id":"stack-79423511","source":"stackoverflow","questionId":79423511,"title":"Integrating shadcn/ui with Tailwind CSS v4 in a Tauri Application Using Vite and React","tags":["javascript","tailwind-css","vite","tauri","shadcnui"],"text":"Title: Integrating shadcn/ui with Tailwind CSS v4 in a Tauri Application Using Vite and React\nTags: javascript, tailwind-css, vite, tauri, shadcnui\nSource: Stack Overflow\n\nQuestion:\nI'm developing a Tauri application with Vite and React and aim to integrate shadcn/ui using Tailwind CSS version 4. However, I'm encountering the following error during setup:\n\ncommand used:\n\n```\npnpm dlx shadcn@latest init\n```\n\n```\nProgress: resolved 168, reused 96, downloaded 72, added 168, done\n✔ Preflight checks.\n✔ Verifying framework. Found Vite.\n✖ Validating Tailwind CSS.\n✖ Validating import alias.\n```\n\nCurrent Configuration:\n\ntsconfig.json:\n\n```\n{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"useDefineForClassFields\": true,\n \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true,\n \"jsx\": \"react-jsx\",\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noFallthroughCasesInSwitch\": true\n },\n \"include\": [\"src\"],\n \"references\": [{ \"path\": \"./tsconfig.node.json\" }]\n}\n```\n\ntsconfig.node.json:\n\n```\n{\n \"compilerOptions\": {\n \"composite\": true,\n \"skipLibCheck\": true,\n \"module\": \"ESNext\",\n \"moduleResolution\": \"bundler\",\n \"allowSyntheticDefaultImports\": true,\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n },\n \"include\": [\"vite.config.ts\"]\n}\n```\n\nvite.config.ts:\n\n```\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport tailwindcss from \"@tailwindcss/vite\";\nimport path from \"path\";\n\nconst host = process.env.TAURI_DEV_HOST;\n\nexport default defineConfig(async () => ({\n plugins: [react(), tailwindcss()],\n resolve: {\n alias: {\n \"@\": path.resolve(__dirname, \"./src\"),\n },\n },\n clearScreen: false,\n server: {\n port: 1420,\n strictPort: true,\n host: host || false,\n hmr: host\n ? {\n protocol: \"ws\",\n host,\n port: 1421,\n }\n : undefined,\n watch: {\n ignored: [\"**/src-tauri/**\"],\n },\n },\n}));\n```\n\n**Assumptions and Issues:**\n\n**Tailwind CSS Configuration:**\n\nI assumed that with Tailwind CSS version 4, a separate `tailwind.config.js` file might not be necessary. However, the error suggests that the absence of this configuration is causing issues.\n\n**Import Alias:**\n\nThe shadcn/ui installation guide mentions setting an import alias. Despite configuring aliases in `tsconfig.json` and `tsconfig.node.json`, the validation fails, indicating that the alias might not be recognized.\n\n**Request for Assistance:**\n\nCould someone provide guidance on the following:\n\n**Is a `tailwind.config.js` file required with Tailwind CSS version 4?**\n\nIf so, what should it include to ensure proper configuration?\n\n**How can I correctly set up the import alias to be compatible with shadcn/ui?**\n\nAre there specific configurations needed in the `tsconfig` files or elsewhere?\n\n**Are there additional steps or configurations necessary to integrate shadcn/ui with a Tauri application using Vite and React?**\n\nAny insights, examples, or resources would be greatly appreciated.\n\n========================================\n\nCode:\n```text\npnpm dlx shadcn@latest init\n```\n\n```text\nProgress: resolved 168, reused 96, downloaded 72, added 168, done\n✔ Preflight checks.\n✔ Verifying framework. Found Vite.\n✖ Validating Tailwind CSS.\n✖ Validating import alias.\n```\n\n```text\n{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"useDefineForClassFields\": true,\n \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true,\n \"jsx\": \"react-jsx\",\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noFallthroughCasesInSwitch\": true\n },\n \"include\": [\"src\"],\n \"references\": [{ \"path\": \"./tsconfig.node.json\" }]\n}\n```\n\n```text\n{\n \"compilerOptions\": {\n \"composite\": true,\n \"skipLibCheck\": true,\n \"module\": \"ESNext\",\n \"moduleResolution\": \"bundler\",\n \"allowSyntheticDefaultImports\": true,\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n },\n \"include\": [\"vite.config.ts\"]\n}\n```\n\n```text\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport tailwindcss from \"@tailwindcss/vite\";\nimport path from \"path\";\n\nconst host = process.env.TAURI_DEV_HOST;\n\nexport default defineConfig(async () => ({\n plugins: [react(), tailwindcss()],\n resolve: {\n alias: {\n \"@\": path.resolve(__dirname, \"./src\"),\n },\n },\n clearScreen: false,\n server: {\n port: 1420,\n strictPort: true,\n host: host || false,\n hmr: host\n ? {\n protocol: \"ws\",\n host,\n port: 1421,\n }\n : undefined,\n watch: {\n ignored: [\"**/src-tauri/**\"],\n },\n },\n}));\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntsconfig.json\n```\n\n```text\ntsconfig.node.json\n```\n\n```text\ntailwind.config.js\n```\n\n```text\ntsconfig\n```\n\n```text\nnpm install -D tailwindcss@3\n```\n\n```text\nshadcn-ui/ui\n```\n\n```text\nnpm install tailwindcss\n```\n\n```text\nnpm install tailwindcss@3\n```\n\n```text\nnpx tailwindcss\n```\n\n```text\nnpx @tailwindcss/cli\n```\n\n```text\nnpx tailwindcss init\n```\n\n```text\ntailwind.config.js\n```\n\n```text\n@config\n```\n\n```text\nnpm i tailwindcss\n```\n\n```text\nshadcn/app-tailwind-v4\n```\n\n```text\nshadcn/ui\n```\n\n```text\nnpm install tailwindcss@3\n```\n\n```text\nshadcn-ui/ui\n```\n\n```text\nshadcn-ui/ui\n```\n\n```text\nshadcn-ui/ui\n```\n\n========================================\n\nComments:\n- A few days ago, Shadcn officially started supporting TailwindCSS v4; See: `shadcn-ui/ui` #6427 and Shadcn UI with TailwindCSS v4\n- Thanks man , that will save me some time","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":26,"totalLines":309,"estimatedTokens":1436}}863{"id":"stack-75576803","source":"stackoverflow","questionId":75576803,"title":"How to add a border radius to a table row element using tailwind","tags":["html","css","tailwind-css"],"text":"Title: How to add a border radius to a table row element using tailwind\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want my rows to have border radius but it doesn't work , I want it to look like this https://i.sstatic.net/xUMsP.png\n\nI have space between rows by adding an empty tr with this css :\n\n```\n.spacer {\n height: 15px;\n background: transparent;\n}\n```\n\nmy table code looks like this :\n\n```\n\n \n \n \n الرقم\n \n \n اسم المشروع\n \n \n الحالة\n \n \n الدرجة\n \n \n التاريخ\n \n \n التعديل\n \n \n \n\n```\n\n========================================\n\nCode:\n```text\n.spacer {\n height: 15px;\n background: transparent;\n}\n```\n\n```text\n<table className=\"text-gray-500 rtl w-full text-center font-inter text-base font-semibold \">\n <thead className=\"bg-white text-base text-primary\">\n <tr>\n <td scope=\"col\" className=\"px-4 py-6\">\n الرقم\n </td>\n <td scope=\"col\" className=\"px-4 py-6\">\n اسم المشروع\n </td>\n <td scope=\"col\" className=\"px-4 py-6\">\n الحالة\n </td>\n <td scope=\"col\" className=\"px-4 py-6\">\n الدرجة\n </td>\n <td scope=\"col\" className=\"px-4 py-6\">\n التاريخ\n </td>\n <td scope=\"col\" className=\"px-4 py-6\">\n التعديل\n </td>\n </tr>\n </thead>\n</table>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":81,"estimatedTokens":362}}864{"id":"stack-76816028","source":"stackoverflow","questionId":76816028,"title":"How to change the element's text color in tailwind when using an if condition in react","tags":["reactjs","if-statement","tailwind-css","textcolor"],"text":"Title: How to change the element's text color in tailwind when using an if condition in react\nTags: reactjs, if-statement, tailwind-css, textcolor\nSource: Stack Overflow\n\nQuestion:\nI am getting some data from a .json file to a react table. After getting that data , i calculate some data and display in another table cell. What i want is , when calculate those cells , i want the result to change color according to the if condition in tailwind.\n\nFor ex:\nif {item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet Here is the code:\n\n```\nconst Table = () => {\n\nreturn (\n\n \n \n Aracı Kurum\n Hisse Adı\n Maliyet\n Güncel Fiyat\n Adet\n Kar/Zarar\n Düzenle/Sil\n \n \n \n {\n data.map((item)=>(\n \n {item.araciKurum} \n {item.hisseAd}\n {item.hisseMaliyet}₺\n {item.hisseGuncelFiyat}₺\n {item.hisseAdet}\n \n \n {item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet ₺\n \n \n \n \n \n )) \n }\n \n\n )\n}\n```\n\nI tried something like this but maybe dont know how to write it\n\n```\n\n \n {item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet ₺\n```\n\n========================================\n\nCode:\n```text\nconst Table = () => {\n\nreturn (\n<div className='overflow-auto w-full'>\n<table className=\" mt-10 w-full \">\n <thead className='bg-blue-900 text-white h-8 '>\n <tr className='divide-x-2 divide-gray-200 '>\n <th>Aracı Kurum</th>\n <th>Hisse Adı</th>\n <th>Maliyet</th>\n <th>Güncel Fiyat</th>\n <th>Adet</th>\n <th>Kar/Zarar</th>\n <th>Düzenle/Sil</th>\n </tr>\n </thead>\n <tbody className='text-center divide-y-2 '>\n {\n data.map((item)=>(\n <tr key={item.hisseId} className=' odd:bg-white even:bg-slate-100 divide-x-2 divide-gray-200'>\n <td className='py-2 whitespace-nowrap'>{item.araciKurum}</td> \n <td className='py-2 whitespace-nowrap'>{item.hisseAd}</td>\n <td className='py-2 whitespace-nowrap'>{item.hisseMaliyet}<span>₺</span></td>\n <td className='py-2 whitespace-nowrap'>{item.hisseGuncelFiyat}<span>₺</span></td>\n <td className='py-2 whitespace-nowrap'>{item.hisseAdet}</td>\n <td className='py-2 whitespace-nowrap'>\n \n {item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet < 0\n ? \"text-red-400\"\n : \"text-green-400\" \n }\n \n <span>₺</span></td>\n <td className='text-center gap-6 flex justify-center py-2 whitespace-nowrap'>\n <button><BiEdit size={25} className='text-green-500'/></button>\n <button><BiTrashAlt size={25} className='text-red-500'/></button>\n </td>\n </tr>\n )) \n }\n </tbody>\n</table>\n</div>\n )\n}\n```\n\n```text\n<td className='py-2 whitespace-nowrap'>\n \n {item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet < 0\n ? \"text-red-400\"\n : \"text-green-400\" \n }\n \n<span>₺</span></td>\n```\n\n```text\n<td className='py-2 whitespace-nowrap \n {item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet < 0 \n ? \"text-red-400\" : \"text-green-400\" }'>\n <span>\n ₺\n </span>\n</td>\n```\n\n========================================\n\nComments:\n- Thank you. You gave me the idea and i practised it like this: {item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet} ₺\n- Template literals are not seen here in this code for some reason. So i also added template literal after the first bracket and before the last bracket in className section. For your information to everyone who checks this answer","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":136,"estimatedTokens":891}}865{"id":"stack-78145410","source":"stackoverflow","questionId":78145410,"title":"How to make a link button using Vue FormKit?","tags":["vue.js","tailwind-css","formkit"],"text":"Title: How to make a link button using Vue FormKit?\nTags: vue.js, tailwind-css, formkit\nSource: Stack Overflow\n\nQuestion:\nA project I inherited is using Vue 3 and FormKit for Vue and Tailwind. I would like to make some links that are styled to look like buttons from the FormKit theme. For example, a back/cancel button on the form would be a router-link, not a button or submit, but I want it to look like the other buttons.\n\nThe reason this is difficult is because FormKit has a theming system that uses Tailwind and it applies dozens of classes at run time. For example\n\n```\n\n```\n\nWill generate the following\n\n```\n\n```\n\nThere are no global styles like a `formkit-button` and there doesn't seem to be an easy way to get these generated styles and apply them to non `` elements.\n\nCopying and pasting the generated classes is out of the question because any changes to the theme will not carry over.\n\nIs there any way to either apply FormKit button styles to a router-link, or tell the FormKit button component to render as a router-link?\n\n========================================\n\nCode:\n```js\n<FormKit type=\"button\" />\n```\n\n```html\n<button type=\"button\" class=\"inline-block bg-primary-500 text-white ...\">\n```\n\n```text\nformkit-button\n```\n\n```text\n<FormKit>\n```\n\n```text\nimport { rootClasses } from \"./formkit.theme\" // <---- adjust to location of your theme file \n\nconst mockButton = { props: { family: 'button', type: 'button' } } as unknown as FormKitNode // remove the `as ...` if not typescript\nconst buttonClasses = rootClasses('input', mockButton)\n```\n\n```text\n{\n \"appearance-none\": true,\n \"[color-scheme:light]\": true,\n ...\n}\n```\n\n```text\nconst classString = Object.keys(buttonClasses).filter(key => buttonClasses[key]).join(' ')\n```\n\n```text\nimport { configSymbol } from \"@formkit/vue\";\n\nconst config = inject(configSymbol)\nconfig?.rootClasses(...)\n```\n\n```html\n<FormKit\n type=\"button\"\n label=\"My Link\"\n :sections-schema=\"{\n input: { $el: 'a' },\n }\"\n href=\"...\"\n/>\n```\n\n```text\n// formkit.config.ts\nimport { defaultConfig } from \"@formkit/vue\";\nimport { rootClasses } from \"./formkit.theme\";\nimport { createInput } from '@formkit/vue'\n\nconst buttonFamilyLink = createInput({\n $cmp: 'RouterLink', // render a component\n props: {\n class: '$classes.input', // use the classes for the 'input' section\n },\n children: '$text', // put content of `text` prop into link\n bind: '$attrs', // inherit attributes (like href, target, etc.)\n}, {\n family: 'button', // inherit button styles\n props: ['text'], // register new `text` prop on FormKit component \n})\n\n\nexport default defaultConfig({\n config: {\n rootClasses,\n },\n inputs: {\n buttonFamilyLink // register new input\n }\n});\n```\n\n```html\n<FormKit\n type=\"buttonFamilyLink\"\n to=\"...\"\n text=\"My Link\"\n/>\n```\n\n```text\nconst routerLink = createInput({\n props: {\n ctx: '$node.context', // pass node context to inner component\n rootClasses: '$node.config.rootClasses', // rootClasses is also available on the node\n },\n $cmp: {\n props: ['ctx', 'rootClasses'],\n setup(props) {\n const linkProps = {\n ...props.ctx.attrs,\n class: props.rootClasses('input', mockButton), // set the classes retrieved from `rootClasses`\n }\n const children = props.ctx.text\n return () => h(RouterLink, linkProps, children)\n }\n },\n}, {\n props: ['text'] // register new `text` prop on FormKit component\n})\n```\n\n```text\nrootClasses\n```\n\n```text\nformkit.theme.[js|ts]\n```\n\n```text\n:class\n```\n\n```text\nrootClasses\n```\n\n```text\n<a>\n```\n\n```text\n<button>\n```\n\n```text\nrootClasses\n```\n\n```text\ntype=\"button\"\n```\n\n```text\n:section-schema\n```\n\n```text\nfamily: button\n```\n\n```text\nFormKit\n```\n\n```text\nrootClasses\n```\n\n```text\nfamily\n```\n\n```text\ntype\n```\n\n```text\ntype\n```\n\n```text\n\"button\"\n```\n\n```text\nrootClasses\n```\n\n```text\nbutton\n```\n\n```text\nrootClasses\n```\n\n```text\nRouterLink\n```\n\n========================================\n\nComments:\n- Have you tried just inspecting a FormKit button in your project and seeing what classes it uses, and then adding those classes to your router-link?\n- @paddyfields yes, however, formkit adds a LOT of classes. I don't want to copy them only to have the theme change and these link buttons not change with it.\n- you don't need to style the router-link itself. router-link can wrap other elements, such as a FormKit button, turning them into links. alternatively, the button can be given a `onclick` event listener, and you can trigger navigation programmatically.\n- @yoduh neither of those are good solutions. Buttons semantically are not allowed inside links and having to use JS to handle link behaviour is bad for accessibility. I need a link that's styled, not a button that behaves like a link.\n- Just a heads up — FormKit should be shipping default `.formkit-${sectionName}` classes in addition to the Tailwind classes if you're using the `Regenesis` theme from themes.formkit.com. also, from any node's `context` object you can get the `classes` object and apply them how you'd like. so `classes.outer` will be that node's `outer` section class list.","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":32,"totalLines":228,"estimatedTokens":1292}}866{"id":"stack-77325271","source":"stackoverflow","questionId":77325271,"title":"How to solve flickering issue in vertical cards infinite scrolling In NextJS and Tailwind CSS?","tags":["javascript","html","css","reactjs","tailwind-css"],"text":"Title: How to solve flickering issue in vertical cards infinite scrolling In NextJS and Tailwind CSS?\nTags: javascript, html, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI want the cards to scroll infinite times, I have three containers each has five cards which move from top to bottom in left and right card, and in middle container moving from bottom to top. The code is working fine but this shows a flickering issue when the counting of cards comes to five or the last card.\n\nNext js Component\n\n```\nconst ImageDivClass = \"w-28 h-28 bg-dark-200 my-6 rounded-xl text-center\"\n\nexport default function VerticalScrollImages(props){\n return (\n <>\n \n \n {Array.from({ length: 2 }, (_, spanIndex) => (\n \n {Array.from({ length: 5 }, (_, index) => (\n {index + 1}\n ))}\n \n ))}\n \n \n \n )\n}\n```\n\nCSS Code\n\n```\n.move_top_bottom {\n animation: marqueeTop 25s linear infinite;\n}\n\n.reverse {\n animation-direction: reverse;\n}\n\n@keyframes marqueeTop {\n 0% {\n top: 0;\n }\n\n 100% {\n top: -100%;\n }\n}\n```\n\nUsing component\n\n```\n\n \n \n```\n\nhttps://i.sstatic.net/NPJEi.png\n\n========================================\n\nCode:\n```text\nconst ImageDivClass = \"w-28 h-28 bg-dark-200 my-6 rounded-xl text-center\"\n\n\nexport default function VerticalScrollImages(props){\n return (\n <>\n <div class=\"h-full w-32 overflow-hidden relative\">\n <div class={`absolute move_top_bottom ${props.className}`}>\n {Array.from({ length: 2 }, (_, spanIndex) => (\n <span key={spanIndex}>\n {Array.from({ length: 5 }, (_, index) => (\n <div className={ImageDivClass} key={index}>{index + 1}</div>\n ))}\n </span>\n ))}\n </div>\n </div>\n </>\n )\n}\n```\n\n```text\n.move_top_bottom {\n animation: marqueeTop 25s linear infinite;\n}\n\n.reverse {\n animation-direction: reverse;\n}\n\n@keyframes marqueeTop {\n 0% {\n top: 0;\n }\n\n 100% {\n top: -100%;\n }\n}\n```\n\n```text\n<VerticalScrollImages className=\"\" />\n <VerticalScrollImages className=\"reverse\" />\n <VerticalScrollImages className=\"\" />\n```\n\n```text\n@keyframes marqueeTop {\n 0% {\n top: 0;\n }\n\n 100% {\n top: -104.5%; // adjust dynamic percent based on number of cards and width of each card\n }\n}\n```\n\n```text\ntop: -104.5%\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":130,"estimatedTokens":596}}867{"id":"stack-76149435","source":"stackoverflow","questionId":76149435,"title":"Prop in interpolation (tailwind, react)","tags":["javascript","reactjs","typescript","tailwind-css"],"text":"Title: Prop in interpolation (tailwind, react)\nTags: javascript, reactjs, typescript, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've problem with pass some colors as prop to component in this the prop is interpolated to className.\n\nWhat's interesting that way works for color like green, orange, but no for e.g. violet, blue, cyan\n\nThere's component:\n\n```\nimport React from \"react\";\n\ntype Props = {\n title: any;\n desc: any;\n color: any;\n icon: any;\n width: any;\n};\n\nfunction CardWordpress({ title, desc, color, icon, width }: Props) {\n return (\n \n \n \n {icon}\n \n \n\n### {title}\n\n {desc}\n\n \n \n );\n}\n\nexport default CardWordpress;\n```\n\nHere usage\n\n```\n\n }\n width=\"[30%]\"\n />\n```\n\nJulian\n\nPlease for hints regarding my issue but also for good programming practices, I'm beginner and I would like to avoid bad habits.\n\n========================================\n\nCode:\n```text\nimport React from \"react\";\n\ntype Props = {\n title: any;\n desc: any;\n color: any;\n icon: any;\n width: any;\n};\n\nfunction CardWordpress({ title, desc, color, icon, width }: Props) {\n return (\n <div\n className={`bg-white dark:bg-black/80 p-8 w-[100%] lg:w-${width} rounded-2xl`}\n >\n <div className=\"flex flex-col\">\n <div\n className={`bg-${color}-200 dark:bg-${color}-700 flex items-center justify-center rounded-full w-[75px] h-[75px]`}\n >\n {icon}\n </div>\n <h3 className=\"fo-medium\">{title}</h3>\n <p className=\"card text-gray-500\">{desc}</p>\n </div>\n </div>\n );\n}\n\nexport default CardWordpress;\n```\n\n```text\n<CardWordpress\n title=\"Title\"\n desc=\"Description\"\n color=\"violet\"\n icon={\n <BsShopWindow\n size={40}\n className=\"text-violet-500 dark:text-violet-300\"\n />\n }\n width=\"[30%]\"\n />\n```\n\n```js\n<div class=\"text-{{ error ? 'red' : 'green' }}-600\"></div>\n```\n\n```text\nfunction CardWordpress({ title, desc, color, icon, width }: Props) {\n const colors = {\n green: 'bg-green-200 dark:bg-green-700',\n red: 'bg-red-200 dark:bg-red-700',\n // etc.\n };\n\n return (\n <div\n className={`bg-white dark:bg-black/80 p-8 w-[100%] lg:w-[--width] rounded-2xl`}\n style={{ '--width': width }}\n >\n <div className=\"flex flex-col\">\n <div\n className={`${colors[color]} flex items-center justify-center rounded-full w-[75px] h-[75px]`}\n >\n {icon}\n </div>\n <h3 className=\"fo-medium\">{title}</h3>\n <p className=\"card text-gray-500\">{desc}</p>\n </div>\n </div>\n );\n}\n```\n\n```text\nbg-green-200\n```\n\n```text\nbg-orange-200\n```\n\n```text\nlg:w-*\n```\n\n```text\nwidth\n```\n\n========================================\n\nComments:\n- I've got error with these lines: `style={{ '--width': width }}` ts(2322) `className={`${colors[color]} flex items-center justify-center rounded-full w-[75px] h-[75px]`}` ts(7053) Could you explain me what's wrong?\n- What's the error? I expect you'd need to adapt the code for Typescript.\n- Type error: Type '{ \"--width\": any; }' is not assignable to type 'Properties'. Object literal may only specify known properties, and '\"--width\"' does not exist in type 'Properties'. it's regarding \"width\" Okay, I got it, but how to do that? Could you support me?","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":159,"estimatedTokens":842}}868{"id":"stack-76020863","source":"stackoverflow","questionId":76020863,"title":"React Native - NativeWind and react-native-dotenv conflict","tags":["reactjs","react-native","babeljs","tailwind-css"],"text":"Title: React Native - NativeWind and react-native-dotenv conflict\nTags: reactjs, react-native, babeljs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am new to React Native and am using Tailwind CSS and trying to implement react-native-dotenv.\n\nI have installed NativeWind and Tailwind (as I believe you need both), which has been working up until I tried to implement react-native-dotenv.\n\nThe problem occurs when I update my `babel.config.js` to the following:\n\n```\nmodule.exports = function (api) {\n api.cache(true);\n\n const presets = [\"babel-preset-expo\"];\n const plugins = [\n \"nativewind/babel\",\n [\n \"module:react-native-dotenv\",\n {\n moduleName: \"@env\",\n path: \".env\",\n },\n ],\n ];\n return { presets, plugins };\n};\n```\n\nWithin the plugins...\n\nIf I remove `nativewind/babel`, the project loads with expo and works as intended (with no styling).\n\nIf I remove `\"module:react-native-dotenv...`, the project loads with expo and works as intended with styling but no Dotenv functionality.\n\nWhen I include BOTH of the plugins together in the `babel.config.js` file, it shows this error in the console:\n\nUncaught TypeError: nativewind__WEBPACK_IMPORTED_MODULE_0__.NativeWindStyleSheet is undefined\njs unitlessNumbers.js:76\nWebpack 48\nunitlessNumbers.js:76\"\n\nI've also tried to separate the plugins into different files and re-import them into `babel.config.js` with no luck.\n\nI have used a `.babelrc` file along with `babel.config.js` with no luck either.\n\n========================================\n\nCode:\n```js\nmodule.exports = function (api) {\n api.cache(true);\n\n const presets = [\"babel-preset-expo\"];\n const plugins = [\n \"nativewind/babel\",\n [\n \"module:react-native-dotenv\",\n {\n moduleName: \"@env\",\n path: \".env\",\n },\n ],\n ];\n return { presets, plugins };\n};\n```\n\n```text\nbabel.config.js\n```\n\n```text\nnativewind/babel\n```\n\n```text\n\"module:react-native-dotenv...\n```\n\n```text\nbabel.config.js\n```\n\n```text\nbabel.config.js\n```\n\n```text\n.babelrc\n```\n\n```text\nbabel.config.js\n```\n\n```text\nreturn {\n presets: [\"babel-preset-expo\"],\n plugins: [\n \"nativewind/babel\",\n [\n \"module-resolver\",\n {\n alias: {\n \"@env\": \"./.env\",\n },\n },\n ],\n ],\n };\n```\n\n```text\nmodule:react-native-dotenv\n```\n\n```text\nbabel-plugin-module-resolver\n```\n\n```text\n.env\n```\n\n```text\nbabel.config.js\n```\n\n========================================\n\nComments:\n- Most `.env` files are not JS/TS so the above would not work. babel will complain that it can't find the file","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":134,"estimatedTokens":638}}869{"id":"stack-74916146","source":"stackoverflow","questionId":74916146,"title":"Converting HTML/CSS/JS site to React App with tailwind css","tags":["html","css","reactjs","tailwind-css"],"text":"Title: Converting HTML/CSS/JS site to React App with tailwind css\nTags: html, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\ni have a site template with its html, css, and all assets needed , and i need to build a react js application with this template.\n\nMy first question is :\n\n- knowing that i use tailwind css for all my other projects, is it a better approach to use it in this case or i should just put all the css files from the template in my react application folder and import them in my components then convert the html files into react component ?\n\nMy second question is :\n\n- If using tailwind css is better is ther an approach to to convert all the css and html into react components styles with tailwind css ?\n\nThank you .\n\n========================================\n\nTop Answer:\nAdding another tool for the second question. You can use DivMagic which lets you convert all CSS and HTML into React components with Tailwind CSS classes with one click.\n\nNote: I built this tool\n\n========================================\n\nCode:\n```text\nimport\n```\n\n```text\ntailwind-css\n```\n\n```text\ntailwind classes\n```\n\n```text\ncss classes\n```\n\n```text\ntailwind-css classes\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":5,"totalLines":46,"estimatedTokens":296}}870{"id":"stack-74784640","source":"stackoverflow","questionId":74784640,"title":"Some styles of Nativewind are not working on native (Android) but they do in the web","tags":["css","node.js","react-native","expo","tailwind-css"],"text":"Title: Some styles of Nativewind are not working on native (Android) but they do in the web\nTags: css, node.js, react-native, expo, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am using Tailwind (Nativewind) with Solito (expo React Native).\nI do have a styled component with some children.\nThe style is properly applied on the web, but in the native version only some are applied. The gap and text-center are not working, but the background color is.\n\nThe code is something like this:\n\n```\n\n TEST\n Login Screen\n \n\n```\n\nThis is how the native version (android) looks:\n\nhttps://i.sstatic.net/u2C5F.jpg\n\nThis is how the web looks (this is the objective):\n\nhttps://i.sstatic.net/KWJne.png\n\n========================================\n\nCode:\n```text\n<Custom className=\"gap-5 bg-orange-100 text-center\">\n <StyledText>TEST</StyledText>\n <StyledTitleBig>Login Screen</StyledTitleBig>\n <...>\n</Custom>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":37,"estimatedTokens":227}}871{"id":"stack-74233428","source":"stackoverflow","questionId":74233428,"title":"How to transition div using Tailwindcss in React","tags":["javascript","css","reactjs","tailwind-css"],"text":"Title: How to transition div using Tailwindcss in React\nTags: javascript, css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a Menu panel next to my sider. I am trying to add a drawer type animation however I can't seem position open/close within the pink column\n\n```\nconst album = [\"Album1\", \"Album2\", \"Album3\"];\nexport const Menu = () => {\n const [open, setOpen] = useState(false);\n return (\n \n \n\n### Album\n\n \n \n {album.map((name) => (\n setOpen(true)}\n >\n {name}\n \n ))}\n \n \n setOpen(false)} //temporary\n className={`transform top-0 left-0 w-72 bg-blue-400 fixed h-full overflow-auto ease-in-out transition-all duration-1000 z-30 ${\n open ? \"translate-x-14\" : \"-translate-x-full\"\n }`}\n >\n hello\n \n \n );\n};\n```\n\nhttps://i.sstatic.net/gHYeb.gif\n\n========================================\n\nCode:\n```text\nconst album = [\"Album1\", \"Album2\", \"Album3\"];\nexport const Menu = () => {\n const [open, setOpen] = useState(false);\n return (\n <div className=\"flex flex-1 flex-col p-3\">\n <h2 className=\"text-lg font-medium text-gray-900\">Album</h2>\n <div className=\"flex-1\">\n <div className=\"flex flex-1 flex-col space-y-3 py-3\">\n {album.map((name) => (\n <button\n key={name}\n id={name}\n className={`flex space-x-2 items-center`}\n onClick={() => setOpen(true)}\n >\n <span>{name}</span>\n </button>\n ))}\n </div>\n </div>\n <aside\n onClick={() => setOpen(false)} //temporary\n className={`transform top-0 left-0 w-72 bg-blue-400 fixed h-full overflow-auto ease-in-out transition-all duration-1000 z-30 ${\n open ? \"translate-x-14\" : \"-translate-x-full\"\n }`}\n >\n hello\n </aside>\n </div>\n );\n};\n```\n\n```html\n<div class=\"text-3xl font-bold underline transition-all duration-300\" id=\"must-change\">\n Lorem Ipsu\n</div>\n\n<button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded\" id=\"press-me\">\n Button\n</button>\n\n<script>\nconst btn = document.querySelector(\"#press-me\")\nconst mustChange = document.querySelector(\"#must-change\")\nbtn.addEventListener(\"click\", () => {\n mustChange.classList.toggle(\"font-bold\")\n})\n</script>\n```\n\n========================================\n\nComments:\n- I have updated my answer with a GIF of current behaviour. I am trying to open drawer within the pink column only. Do you know what I am missing?\n- Fixed it, forgot z-index on the sidebar","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":101,"estimatedTokens":621}}872{"id":"stack-72006380","source":"stackoverflow","questionId":72006380,"title":"Square bracket notation for custom classes from Tailwind doesn't work in a Nuxt application","tags":["vue.js","nuxt.js","tailwind-css"],"text":"Title: Square bracket notation for custom classes from Tailwind doesn't work in a Nuxt application\nTags: vue.js, nuxt.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have created a Nuxt application with TailwindCSS. For some reason, the square bracket notation from Tailwind doesn't work. If I have this div =>\n\n```\nsome text\n```\n\nthe h-[155px] class is ignored. If instead I use `h-24`, it works fine, the height is applied.\nI have also noticed that I haven't got an assets/css/tailwind.css directory. Is this normal ? Could it be the reason it doesn't work ?\nThis is my nuxt.config.js file =>\n\n```\nexport default {\n // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode\n ssr: false,\n\n // Global page headers: https://go.nuxtjs.dev/config-head\n head: {\n title: 'gimm',\n htmlAttrs: {\n lang: 'en',\n },\n meta: [\n { charset: 'utf-8' },\n { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n { hid: 'description', name: 'description', content: '' },\n { name: 'format-detection', content: 'telephone=no' },\n ],\n link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],\n },\n\n // Global CSS: https://go.nuxtjs.dev/config-css\n css: [],\n\n // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins\n plugins: [],\n\n // Auto import components: https://go.nuxtjs.dev/config-components\n components: true,\n\n // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules\n buildModules: [\n // https://go.nuxtjs.dev/eslint\n '@nuxtjs/eslint-module',\n // https://go.nuxtjs.dev/tailwindcss\n '@nuxtjs/tailwindcss',\n ],\n\n // Modules: https://go.nuxtjs.dev/config-modules\n modules: [\n // https://go.nuxtjs.dev/axios\n '@nuxtjs/axios',\n ],\n\n // Axios module configuration: https://go.nuxtjs.dev/config-axios\n axios: {\n // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308\n baseURL: '/',\n },\n\n // Build Configuration: https://go.nuxtjs.dev/config-build\n build: {},\n}\n```\n\nand this is my package.json =>\n\n```\n{\n \"name\": \"gimm\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"nuxt\",\n \"build\": \"nuxt build\",\n \"start\": \"nuxt start\",\n \"generate\": \"nuxt generate\",\n \"lint:js\": \"eslint --ext \\\".js,.vue\\\" --ignore-path .gitignore .\",\n \"lint:prettier\": \"prettier --check .\",\n \"lint\": \"yarn lint:js && yarn lint:prettier\",\n \"lintfix\": \"prettier --write --list-different . && yarn lint:js --fix\"\n },\n \"dependencies\": {\n \"@nuxtjs/axios\": \"^5.13.6\",\n \"core-js\": \"^3.19.3\",\n \"nuxt\": \"^2.15.8\",\n \"vue\": \"^2.6.14\",\n \"vue-server-renderer\": \"^2.6.14\",\n \"vue-template-compiler\": \"^2.6.14\",\n \"webpack\": \"^4.46.0\"\n },\n \"devDependencies\": {\n \"@babel/eslint-parser\": \"^7.16.3\",\n \"@nuxtjs/eslint-config\": \"^8.0.0\",\n \"@nuxtjs/eslint-module\": \"^3.0.2\",\n \"@nuxtjs/tailwindcss\": \"^4.2.1\",\n \"eslint\": \"^8.4.1\",\n \"eslint-config-prettier\": \"^8.3.0\",\n \"eslint-plugin-nuxt\": \"^3.1.0\",\n \"eslint-plugin-vue\": \"^8.2.0\",\n \"postcss\": \"^8.4.4\",\n \"prettier\": \"^2.5.1\"\n }\n}\n```\n\n========================================\n\nCode:\n```html\n<div class=\"h-[155px] bg-red-300\">some text</div>\n```\n\n```js\nexport default {\n // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode\n ssr: false,\n\n // Global page headers: https://go.nuxtjs.dev/config-head\n head: {\n title: 'gimm',\n htmlAttrs: {\n lang: 'en',\n },\n meta: [\n { charset: 'utf-8' },\n { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n { hid: 'description', name: 'description', content: '' },\n { name: 'format-detection', content: 'telephone=no' },\n ],\n link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],\n },\n\n // Global CSS: https://go.nuxtjs.dev/config-css\n css: [],\n\n // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins\n plugins: [],\n\n // Auto import components: https://go.nuxtjs.dev/config-components\n components: true,\n\n // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules\n buildModules: [\n // https://go.nuxtjs.dev/eslint\n '@nuxtjs/eslint-module',\n // https://go.nuxtjs.dev/tailwindcss\n '@nuxtjs/tailwindcss',\n ],\n\n // Modules: https://go.nuxtjs.dev/config-modules\n modules: [\n // https://go.nuxtjs.dev/axios\n '@nuxtjs/axios',\n ],\n\n // Axios module configuration: https://go.nuxtjs.dev/config-axios\n axios: {\n // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308\n baseURL: '/',\n },\n\n // Build Configuration: https://go.nuxtjs.dev/config-build\n build: {},\n}\n```\n\n```json\n{\n \"name\": \"gimm\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"nuxt\",\n \"build\": \"nuxt build\",\n \"start\": \"nuxt start\",\n \"generate\": \"nuxt generate\",\n \"lint:js\": \"eslint --ext \\\".js,.vue\\\" --ignore-path .gitignore .\",\n \"lint:prettier\": \"prettier --check .\",\n \"lint\": \"yarn lint:js && yarn lint:prettier\",\n \"lintfix\": \"prettier --write --list-different . && yarn lint:js --fix\"\n },\n \"dependencies\": {\n \"@nuxtjs/axios\": \"^5.13.6\",\n \"core-js\": \"^3.19.3\",\n \"nuxt\": \"^2.15.8\",\n \"vue\": \"^2.6.14\",\n \"vue-server-renderer\": \"^2.6.14\",\n \"vue-template-compiler\": \"^2.6.14\",\n \"webpack\": \"^4.46.0\"\n },\n \"devDependencies\": {\n \"@babel/eslint-parser\": \"^7.16.3\",\n \"@nuxtjs/eslint-config\": \"^8.0.0\",\n \"@nuxtjs/eslint-module\": \"^3.0.2\",\n \"@nuxtjs/tailwindcss\": \"^4.2.1\",\n \"eslint\": \"^8.4.1\",\n \"eslint-config-prettier\": \"^8.3.0\",\n \"eslint-plugin-nuxt\": \"^3.1.0\",\n \"eslint-plugin-vue\": \"^8.2.0\",\n \"postcss\": \"^8.4.4\",\n \"prettier\": \"^2.5.1\"\n }\n}\n```\n\n```text\nh-24\n```\n\n```text\nnode_modules\n```\n\n```text\nyarn upgrade\n```\n\n```text\npackage.json\n```\n\n```text\nassets/css/tailwind.css\n```\n\n========================================\n\nComments:\n- @Maxime your version the `@nuxtjs/tailwindcss` module that you're using is apparently using a version before the `2.2.0` of Tailwind, hence it looks like the arbitrary values are not supported as you can see on the releases page. I recommend using the latest v3 of Tailwind, as showcased in my repo. That way, you'll get the best experience and all the latest cool stuff at the same time. Tell me if you have any issues running it.","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":234,"estimatedTokens":1558}}873{"id":"stack-73978330","source":"stackoverflow","questionId":73978330,"title":"Tailwind - dynamic number of columns to cater for an unknown number of items","tags":["tailwind-css"],"text":"Title: Tailwind - dynamic number of columns to cater for an unknown number of items\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI suspect the answer to this will be a resounding no, but here's hoping.\n\nI have a number of items to display in a 3 column grid (on larger widths - at smaller widths they just display one above the other).\n\nCan I use any aspect of Tailwind to make it so that they display nicely no matter if the number of items is divisible by 3 (without remainder) or not?\n\nAs things stand, if there are 7 items, the 7th item displays in the left-most column. Ideally it would display in the middle column. Likewise, if there are 8 items, the 7th and 8th display in the left-most and middle columns respectively, whereas ideally they would be centered so that the 7th sits evenly under the 4th and 5th, and the 8th sits evenly under the 5th and 6th.\n\nI suspect that it will have to fall back on some PHP to calculate the layout of the last row depending on the remainder (if any) from X / 3, but live in hope.\n\n========================================\n\nCode:\n```html\n<ul class=\"grid grid-cols-3 gap-6\">\n <li class=\"\">1</li>\n <li class=\"\">2</li>\n\n // and so on...\n <li class=\"\">8</li>\n</ul>\n```\n\n```html\n<ul class=\"columns-3 gap-6\">\n <li class=\"mb-6\">1</li>\n <li class=\"mb-6\">2</li>\n // ...\n <li class=\"mb-6\">8</li>\n</ul>\n```\n\n```html\n<ul class=\"grid grid-cols-6 gap-6\">\n <li class=\"col-span-2\">1</li>\n <li class=\"col-span-2\">2</li>\n // ...\n <li class=\"col-span-2\">6</li>\n <li class=\"col-start-2 col-span-2\">7</li>\n <li class=\"col-span-2\">8</li>\n</ul>\n\n<ul class=\"grid grid-cols-6 gap-6 bg-slate-50 p-6\">\n <li class=\"col-span-2\">1</li>\n <li class=\"col-span-2\">2</li>\n // ...\n <li class=\"col-span-2\">6</li>\n <li class=\"col-span-2 col-start-3\">7</li>\n</ul>\n```\n\n```html\n<ul class=\"flex flex-wrap justify-center gap-6\">\n <li class=\"w-[calc(33.333%-1rem)]\">1</li>\n <li class=\"w-[calc(33.333%-1rem)]\">2</li>\n // ...\n <li class=\"w-[calc(33.333%-1rem)]\">8</li>\n</ul>\n```\n\n```text\ngrid grid-cols-3\n```\n\n```text\ngap-{n}\n```\n\n```text\ncolumns-{n}\n```\n\n```text\namount of elements / 3\n```\n\n```text\n1 === N % 3\n```\n\n```text\ncol-start-3\n```\n\n```text\n2 === N % 3\n```\n\n```text\ncol-start-2\n```\n\n```text\n0 === N % 3\n```\n\n```text\ncol-span-2\n```\n\n```text\ngap-6\n```\n\n```text\n1.5rem\n```\n\n```text\n1.5 * 2 / 3 = 1rem\n```\n\n========================================\n\nComments:\n- The layout you're describing may be one that you think is needed but people are very accustomed to the left to right placement which is the default of grid. Instagram, among many others, deal with grids using default placement on hanging items. Perhaps you're creating a problem for yourself which won't actually benefit your users or your application.\n- @JHeth but I want it to look pretty, though. And the hanging items don't look pretty to me. ;-)\n- A perfectly understandable bias to have, personally when I see the centered hanging columns on a design it looks off to me which distracts from the content.\n- Great, thank you - I shall play around with those ideas.","metadata":{"transformedAt":"2026-08-18T18:33:42.951Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":17,"totalLines":124,"estimatedTokens":766}}874{"id":"stack-72239511","source":"stackoverflow","questionId":72239511,"title":"Build error with Nuxt 2.15.7 - Can't resolve a CSS @font-face URL","tags":["vue.js","fonts","nuxt.js","tailwind-css","postcss"],"text":"Title: Build error with Nuxt 2.15.7 - Can't resolve a CSS @font-face URL\nTags: vue.js, fonts, nuxt.js, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI am trying to build my project but there is an error during build process. I entered this command:\n\n```\nyarn build\n```\n\nthen I saw this:\n\n```\nERROR in ./assets/css/main.css (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./assets/css/main.css)\nModule build failed (from ./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js):\nError: Can't resolve '~/static/fonts/farsi/eot/iranyekanwebregular.eot' in '/Users/mohammadamin/WebstormProjects/test/assets/css'\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:209:21\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:285:5\n at eval (eval at create (/Users/mohammadamin/WebstormProjects/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:285:5\n at eval (eval at create (/Users/mohammadamin/WebstormProjects/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:285:5\n at eval (eval at create (/Users/mohammadamin/WebstormProjects/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1)\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:285:5\n at eval (eval at create (/Users/mohammadamin/WebstormProjects/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), :672:1)\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/AliasPlugin.js:67:43\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:285:5\n at eval (eval at create (/Users/mohammadamin/WebstormProjects/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:285:5\n @ ./assets/css/main.css 4:14-217\n @ ./.nuxt/App.js\n @ ./.nuxt/index.js\n @ ./.nuxt/client.js\n @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js\n```\n\nI must mention that the project build successfully on windows 10 but when I enter the build command on MacBook Air M1 I got this error. and I had to replace node-sass with sass because node-sass not compatible with M1\n\nI tried different ways like replacing ~assets/fonts with ~/static/fonts or just /font/... but they all fail.\n\nThis is my package.json:\n\n```\n{\n \"name\": \"test\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"nuxt\",\n \"build\": \"nuxt build\",\n \"start\": \"nuxt start\",\n \"generate\": \"nuxt generate\"\n },\n \"dependencies\": {\n \"@nuxt/postcss8\": \"^1.1.3\",\n \"@nuxtjs/axios\": \"^5.13.6\",\n \"@nuxtjs/i18n\": \"^7.2.0\",\n \"cookie-universal-nuxt\": \"^2.1.5\",\n \"core-js\": \"^3.15.1\",\n \"jalali-moment\": \"^3.3.11\",\n \"nuxt\": \"^2.15.7\",\n \"v-mask\": \"^2.3.0\",\n \"vue-js-modal\": \"^2.0.1\",\n \"vue-toasted\": \"^1.1.28\",\n \"vue2-touch-events\": \"^3.2.2\",\n \"vuelidate\": \"^0.7.6\"\n },\n \"devDependencies\": {\n \"@nuxtjs/color-mode\": \"^2.1.1\",\n \"@nuxtjs/pwa\": \"^3.3.5\",\n \"@nuxtjs/tailwindcss\": \"^4.2.1\",\n \"autoprefixer\": \"^10.4.7\",\n \"sass\": \"~1.32.6\",\n \"sass-loader\": \"10.1.1\",\n \"tailwindcss-dir\": \"^4.0.0\"\n }\n}\n```\n\nThis is my nuxt.config.js:\n\n```\nimport i18nOptions from './plugins/i18n/options.js'\n\nexport default {\n // Target: https://go.nuxtjs.dev/config-target\n target: 'server',\n\n // Global page headers: https://go.nuxtjs.dev/config-head\n head: {\n title: 'test',\n htmlAttrs: {\n type: 'text/html; charset=utf-8'\n },\n meta: [\n { charset: 'utf-8' },\n { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n { itemprop: 'name', content: 'test' },\n { property: 'og:type', content: 'website' },\n { property: 'og:site_name', content: 'test.ir' },\n { hid: 'description', name: 'description', content: '' },\n { name: 'theme-color', content: '#0048C5' },\n { name: 'format-detection', content: 'telephone=no' }\n ],\n link: [\n { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }\n ]\n },\n\n // Global CSS: https://go.nuxtjs.dev/config-css\n css: [\n '@/assets/css/main.css',\n ],\n\n // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins\n plugins: [\n '~/plugins/i18n/i18n.js',\n '~/plugins/hybridLink.js',\n '~plugins/vue-js-modal.js',\n '~plugins/vue2-touch-events.js',\n '~/plugins/vuelidate.js',\n '~/plugins/englishDigit.js',\n '~/plugins/decimalPlaces.js',\n '~/plugins/preventLeadingZeroes.js',\n { src: '~/plugins/toasted.js', mode: 'client' },\n { src: '~/plugins/vueMask.js', mode: 'client' },\n ],\n\n router: {\n middleware: ['i18n']\n },\n\n // Auto import components: https://go.nuxtjs.dev/config-components\n components: true,\n\n // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules\n buildModules: [\n '@nuxt/postcss8',\n '@nuxtjs/tailwindcss',\n '@nuxtjs/color-mode',\n '@nuxtjs/pwa'\n ],\n\n // Modules: https://go.nuxtjs.dev/config-modules\n modules: [\n ['@nuxtjs/i18n', i18nOptions],\n '@nuxtjs/axios',\n 'cookie-universal-nuxt'\n ],\n\n colorMode: {\n preference: 'dark', // default value of $colorMode.preference\n fallback: '', // fallback value if not system preference found\n hid: 'nuxt-color-mode-script',\n globalName: '__NUXT_COLOR_MODE__',\n componentName: 'ColorScheme',\n classSuffix: '',\n storageKey: 'Theme'\n },\n\n loading: {\n color: '#0048C5',\n height: '4px',\n rtl: true,\n throttle: 0\n },\n\n // Build Configuration: https://go.nuxtjs.dev/config-build\n build: {\n postcss: {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n },\n },\n\n pwa: {\n manifest: {\n name: 'تیکاطب تفسیر آنلاین آزمایش',\n short_name: 'تیکاطب',\n lang: 'fa',\n display: 'standalone',\n theme_color: '#0048C5',\n background_color: '#ffffff',\n },\n icon: {\n fileName: 'testLogo.png',\n sizes: [64, 120, 144, 152, 192, 384, 512]\n }\n }\n}\n```\n\nand this is main.css:\n\n```\n@font-face {\n font-family: iranyekan;\n font-style: normal;\n font-weight: normal;\n src: url('~/static/fonts/farsi/eot/iranyekanwebregular.eot');\n src: url('~/static/fonts/farsi/eot/iranyekanwebregular.eot?#iefix') format('embedded-opentype'), /* IE6-8 */\n url('~/static/fonts/farsi/woff/iranyekanwebregular.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/\n url('~/static/fonts/farsi/woff2/iranyekanwebregular.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/\n url('~/static/fonts/farsi/ttf/iranyekanwebregular.ttf') format('truetype');\n}\n\n@font-face {\n font-family: iranyekan;\n font-style: normal;\n font-weight: 500;\n src: url('~/static/fonts/farsi/eot/iranyekanwebmedium.eot');\n src: url('~/static/fonts/farsi/eot/iranyekanwebmedium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */\n url('~/static/fonts/farsi/woff/iranyekanwebmedium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/\n url('~/static/fonts/farsi/woff2/iranyekanwebmedium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/\n url('~/static/fonts/farsi/ttf/iranyekanwebmedium.ttf') format('truetype');\n}\n\n@font-face {\n font-family: iranyekan;\n font-style: normal;\n font-weight: bold;\n src: url('~/static/fonts/farsi/eot/iranyekanwebbold.eot');\n src: url('~/static/fonts/farsi/eot/iranyekanwebbold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */\n url('~/static/fonts/farsi/woff/iranyekanwebbold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/\n url('~/static/fonts/farsi/woff2/iranyekanwebbold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/\n url('~/static/fonts/farsi/ttf/iranyekanwebbold.ttf') format('truetype');\n}\n\n@font-face {\n font-family: iranyekan;\n font-style: normal;\n font-weight: 800;\n src: url('~/static/fonts/farsi/eot/iranyekanwebextrabold.eot');\n src: url('~/static/fonts/farsi/eot/iranyekanwebextrabold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */\n url('~/static/fonts/farsi/woff/iranyekanwebextrabold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/\n url('~/static/fonts/farsi/woff2/iranyekanwebextrabold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/\n url('~/static/fonts/farsi/ttf/iranyekanwebextrabold.ttf') format('truetype');\n}\n\n.page-enter-active,\n.page-leave-active {\n transition: all 250ms ease-out;\n}\n\n.page-enter,\n.page-leave-active {\n opacity: 0;\n transform-origin: 50% 50%;\n}\n\n@tailwind base;\n\n@layer base {\n html {\n font-family: iranyekan, serif !important;\n }\n\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n input[type=number] {\n -moz-appearance: textfield;\n }\n}\n\n@tailwind components;\n\n@layer components {\n .text-title {\n @apply text-gray-dark dark:text-white\n }\n\n .hero-card {\n background: radial-gradient(circle farthest-side, #0e74b3 1%, #0048C5 75%);\n }\n\n .card-box {\n @apply bg-white dark:bg-black-800 rounded-10\n }\n\n .hero-button, .hero-button-reverse, .service-button {\n background-image: linear-gradient(to right, #044DCC, #257FE1);\n z-index: 1;\n @apply relative transition-all duration-300\n }\n\n .hero-button-reverse {\n background-image: linear-gradient(to right, #257FE1, #044DCC);\n }\n\n .service-button {\n background-image: linear-gradient(to bottom right, #257FE1, #0048C5);\n }\n\n .hero-button::before, .hero-button-reverse::before, .service-button::before {\n content: \"\";\n background: linear-gradient(to right, #FF6B00, #FF974B);\n z-index: -1;\n @apply absolute inset-0 transition-all duration-300 opacity-0 rounded-12\n }\n\n .hero-button:hover {\n @apply translate-x-[20px]\n }\n\n .hero-button-reverse:hover {\n @apply translate-x-[-20px]\n }\n\n .service-button:hover {\n @apply translate-y-[-8px]\n }\n\n .hero-button:hover::before, .hero-button-reverse:hover::before, .service-button:hover::before {\n @apply opacity-100\n }\n\n .custom-input {\n @apply relative\n }\n\n .custom-input label {\n @apply absolute top-[-12px] rtl:right-[30px] ltr:left-[30px] text-title z-20 bg-white dark:bg-black-800 px-[4px] text-[16px]\n }\n\n .custom-input div {\n @apply bg-transparent border border-[0.6px] rounded-5 w-full\n }\n\n .custom-input div input {\n @apply bg-transparent text-title px-16 py-[13px] text-[14px] w-full outline-none\n }\n\n .red-dot {\n @apply bg-red w-[6px] h-[6px] rounded-full min-w-[6px]\n }\n\n .custom-radio {\n @apply flex items-center;\n }\n\n .custom-radio input[type=\"radio\"]:focus {\n @apply outline-none rounded-full;\n }\n\n .custom-radio input[type=\"radio\"] {\n @apply cursor-pointer w-16 h-16 min-w-[16px] relative appearance-none rounded-full mx-8;\n }\n\n .custom-radio input[type=\"radio\"]::before {\n content: '';\n border: 1px solid #7580A0;\n @apply absolute inset-0 rounded-full;\n\n }\n\n .custom-radio input[type=\"radio\"]:focus::before {\n @apply shadow-none;\n }\n\n .custom-radio input[type=\"radio\"]:checked::before {\n border: 5px solid;\n @apply border-[#1F2434] dark:border-[#ffffff];\n }\n\n .custom-radio label {\n @layer text-title;\n @apply text-[14px] mb-0 align-middle text-center self-center cursor-pointer select-none;\n }\n\n .btn-primary {\n @apply flex items-center justify-center bg-primary-dark rounded-5 w-full text-white font-bold text-[16px] py-[10px] transition-all duration-200 hover:bg-[#FF6B00]\n }\n\n .btn-secondary {\n @apply flex items-center justify-center bg-gray-dark rounded-5 w-full text-white font-bold text-[16px] py-[10px] transition-all duration-200 hover:bg-gray-light\n }\n}\n\n@tailwind utilities;\n\n@layer utilities {\n .dir-rtl {\n direction: rtl !important;\n }\n\n .dir-ltr {\n direction: ltr !important;\n }\n}\n```\n\n**Please give me a hint. Thanks!**\n\n========================================\n\nCode:\n```text\nyarn build\n```\n\n```text\nERROR in ./assets/css/main.css (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./assets/css/main.css)\nModule build failed (from ./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js):\nError: Can't resolve '~/static/fonts/farsi/eot/iranyekanwebregular.eot' in '/Users/mohammadamin/WebstormProjects/test/assets/css'\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:209:21\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:285:5\n at eval (eval at create (/Users/mohammadamin/WebstormProjects/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:285:5\n at eval (eval at create (/Users/mohammadamin/WebstormProjects/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:285:5\n at eval (eval at create (/Users/mohammadamin/WebstormProjects/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:285:5\n at eval (eval at create (/Users/mohammadamin/WebstormProjects/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:672:1)\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/AliasPlugin.js:67:43\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:285:5\n at eval (eval at create (/Users/mohammadamin/WebstormProjects/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7\n at /Users/mohammadamin/WebstormProjects/test/node_modules/enhanced-resolve/lib/Resolver.js:285:5\n @ ./assets/css/main.css 4:14-217\n @ ./.nuxt/App.js\n @ ./.nuxt/index.js\n @ ./.nuxt/client.js\n @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js\n```\n\n```text\n{\n \"name\": \"test\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"nuxt\",\n \"build\": \"nuxt build\",\n \"start\": \"nuxt start\",\n \"generate\": \"nuxt generate\"\n },\n \"dependencies\": {\n \"@nuxt/postcss8\": \"^1.1.3\",\n \"@nuxtjs/axios\": \"^5.13.6\",\n \"@nuxtjs/i18n\": \"^7.2.0\",\n \"cookie-universal-nuxt\": \"^2.1.5\",\n \"core-js\": \"^3.15.1\",\n \"jalali-moment\": \"^3.3.11\",\n \"nuxt\": \"^2.15.7\",\n \"v-mask\": \"^2.3.0\",\n \"vue-js-modal\": \"^2.0.1\",\n \"vue-toasted\": \"^1.1.28\",\n \"vue2-touch-events\": \"^3.2.2\",\n \"vuelidate\": \"^0.7.6\"\n },\n \"devDependencies\": {\n \"@nuxtjs/color-mode\": \"^2.1.1\",\n \"@nuxtjs/pwa\": \"^3.3.5\",\n \"@nuxtjs/tailwindcss\": \"^4.2.1\",\n \"autoprefixer\": \"^10.4.7\",\n \"sass\": \"~1.32.6\",\n \"sass-loader\": \"10.1.1\",\n \"tailwindcss-dir\": \"^4.0.0\"\n }\n}\n```\n\n```text\nimport i18nOptions from './plugins/i18n/options.js'\n\nexport default {\n // Target: https://go.nuxtjs.dev/config-target\n target: 'server',\n\n // Global page headers: https://go.nuxtjs.dev/config-head\n head: {\n title: 'test',\n htmlAttrs: {\n type: 'text/html; charset=utf-8'\n },\n meta: [\n { charset: 'utf-8' },\n { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n { itemprop: 'name', content: 'test' },\n { property: 'og:type', content: 'website' },\n { property: 'og:site_name', content: 'test.ir' },\n { hid: 'description', name: 'description', content: '' },\n { name: 'theme-color', content: '#0048C5' },\n { name: 'format-detection', content: 'telephone=no' }\n ],\n link: [\n { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }\n ]\n },\n\n // Global CSS: https://go.nuxtjs.dev/config-css\n css: [\n '@/assets/css/main.css',\n ],\n\n // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins\n plugins: [\n '~/plugins/i18n/i18n.js',\n '~/plugins/hybridLink.js',\n '~plugins/vue-js-modal.js',\n '~plugins/vue2-touch-events.js',\n '~/plugins/vuelidate.js',\n '~/plugins/englishDigit.js',\n '~/plugins/decimalPlaces.js',\n '~/plugins/preventLeadingZeroes.js',\n { src: '~/plugins/toasted.js', mode: 'client' },\n { src: '~/plugins/vueMask.js', mode: 'client' },\n ],\n\n router: {\n middleware: ['i18n']\n },\n\n // Auto import components: https://go.nuxtjs.dev/config-components\n components: true,\n\n // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules\n buildModules: [\n '@nuxt/postcss8',\n '@nuxtjs/tailwindcss',\n '@nuxtjs/color-mode',\n '@nuxtjs/pwa'\n ],\n\n // Modules: https://go.nuxtjs.dev/config-modules\n modules: [\n ['@nuxtjs/i18n', i18nOptions],\n '@nuxtjs/axios',\n 'cookie-universal-nuxt'\n ],\n\n colorMode: {\n preference: 'dark', // default value of $colorMode.preference\n fallback: '', // fallback value if not system preference found\n hid: 'nuxt-color-mode-script',\n globalName: '__NUXT_COLOR_MODE__',\n componentName: 'ColorScheme',\n classSuffix: '',\n storageKey: 'Theme'\n },\n\n loading: {\n color: '#0048C5',\n height: '4px',\n rtl: true,\n throttle: 0\n },\n\n // Build Configuration: https://go.nuxtjs.dev/config-build\n build: {\n postcss: {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n },\n },\n\n pwa: {\n manifest: {\n name: 'تیکاطب تفسیر آنلاین آزمایش',\n short_name: 'تیکاطب',\n lang: 'fa',\n display: 'standalone',\n theme_color: '#0048C5',\n background_color: '#ffffff',\n },\n icon: {\n fileName: 'testLogo.png',\n sizes: [64, 120, 144, 152, 192, 384, 512]\n }\n }\n}\n```\n\n```text\n@font-face {\n font-family: iranyekan;\n font-style: normal;\n font-weight: normal;\n src: url('~/static/fonts/farsi/eot/iranyekanwebregular.eot');\n src: url('~/static/fonts/farsi/eot/iranyekanwebregular.eot?#iefix') format('embedded-opentype'), /* IE6-8 */\n url('~/static/fonts/farsi/woff/iranyekanwebregular.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/\n url('~/static/fonts/farsi/woff2/iranyekanwebregular.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/\n url('~/static/fonts/farsi/ttf/iranyekanwebregular.ttf') format('truetype');\n}\n\n@font-face {\n font-family: iranyekan;\n font-style: normal;\n font-weight: 500;\n src: url('~/static/fonts/farsi/eot/iranyekanwebmedium.eot');\n src: url('~/static/fonts/farsi/eot/iranyekanwebmedium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */\n url('~/static/fonts/farsi/woff/iranyekanwebmedium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/\n url('~/static/fonts/farsi/woff2/iranyekanwebmedium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/\n url('~/static/fonts/farsi/ttf/iranyekanwebmedium.ttf') format('truetype');\n}\n\n@font-face {\n font-family: iranyekan;\n font-style: normal;\n font-weight: bold;\n src: url('~/static/fonts/farsi/eot/iranyekanwebbold.eot');\n src: url('~/static/fonts/farsi/eot/iranyekanwebbold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */\n url('~/static/fonts/farsi/woff/iranyekanwebbold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/\n url('~/static/fonts/farsi/woff2/iranyekanwebbold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/\n url('~/static/fonts/farsi/ttf/iranyekanwebbold.ttf') format('truetype');\n}\n\n@font-face {\n font-family: iranyekan;\n font-style: normal;\n font-weight: 800;\n src: url('~/static/fonts/farsi/eot/iranyekanwebextrabold.eot');\n src: url('~/static/fonts/farsi/eot/iranyekanwebextrabold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */\n url('~/static/fonts/farsi/woff/iranyekanwebextrabold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/\n url('~/static/fonts/farsi/woff2/iranyekanwebextrabold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/\n url('~/static/fonts/farsi/ttf/iranyekanwebextrabold.ttf') format('truetype');\n}\n\n.page-enter-active,\n.page-leave-active {\n transition: all 250ms ease-out;\n}\n\n.page-enter,\n.page-leave-active {\n opacity: 0;\n transform-origin: 50% 50%;\n}\n\n@tailwind base;\n\n@layer base {\n html {\n font-family: iranyekan, serif !important;\n }\n\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n input[type=number] {\n -moz-appearance: textfield;\n }\n}\n\n@tailwind components;\n\n@layer components {\n .text-title {\n @apply text-gray-dark dark:text-white\n }\n\n .hero-card {\n background: radial-gradient(circle farthest-side, #0e74b3 1%, #0048C5 75%);\n }\n\n .card-box {\n @apply bg-white dark:bg-black-800 rounded-10\n }\n\n .hero-button, .hero-button-reverse, .service-button {\n background-image: linear-gradient(to right, #044DCC, #257FE1);\n z-index: 1;\n @apply relative transition-all duration-300\n }\n\n .hero-button-reverse {\n background-image: linear-gradient(to right, #257FE1, #044DCC);\n }\n\n .service-button {\n background-image: linear-gradient(to bottom right, #257FE1, #0048C5);\n }\n\n .hero-button::before, .hero-button-reverse::before, .service-button::before {\n content: \"\";\n background: linear-gradient(to right, #FF6B00, #FF974B);\n z-index: -1;\n @apply absolute inset-0 transition-all duration-300 opacity-0 rounded-12\n }\n\n .hero-button:hover {\n @apply translate-x-[20px]\n }\n\n .hero-button-reverse:hover {\n @apply translate-x-[-20px]\n }\n\n .service-button:hover {\n @apply translate-y-[-8px]\n }\n\n .hero-button:hover::before, .hero-button-reverse:hover::before, .service-button:hover::before {\n @apply opacity-100\n }\n\n .custom-input {\n @apply relative\n }\n\n .custom-input label {\n @apply absolute top-[-12px] rtl:right-[30px] ltr:left-[30px] text-title z-20 bg-white dark:bg-black-800 px-[4px] text-[16px]\n }\n\n .custom-input div {\n @apply bg-transparent border border-[0.6px] rounded-5 w-full\n }\n\n .custom-input div input {\n @apply bg-transparent text-title px-16 py-[13px] text-[14px] w-full outline-none\n }\n\n .red-dot {\n @apply bg-red w-[6px] h-[6px] rounded-full min-w-[6px]\n }\n\n .custom-radio {\n @apply flex items-center;\n }\n\n .custom-radio input[type=\"radio\"]:focus {\n @apply outline-none rounded-full;\n }\n\n .custom-radio input[type=\"radio\"] {\n @apply cursor-pointer w-16 h-16 min-w-[16px] relative appearance-none rounded-full mx-8;\n }\n\n .custom-radio input[type=\"radio\"]::before {\n content: '';\n border: 1px solid #7580A0;\n @apply absolute inset-0 rounded-full;\n\n }\n\n .custom-radio input[type=\"radio\"]:focus::before {\n @apply shadow-none;\n }\n\n .custom-radio input[type=\"radio\"]:checked::before {\n border: 5px solid;\n @apply border-[#1F2434] dark:border-[#ffffff];\n }\n\n .custom-radio label {\n @layer text-title;\n @apply text-[14px] mb-0 align-middle text-center self-center cursor-pointer select-none;\n }\n\n .btn-primary {\n @apply flex items-center justify-center bg-primary-dark rounded-5 w-full text-white font-bold text-[16px] py-[10px] transition-all duration-200 hover:bg-[#FF6B00]\n }\n\n .btn-secondary {\n @apply flex items-center justify-center bg-gray-dark rounded-5 w-full text-white font-bold text-[16px] py-[10px] transition-all duration-200 hover:bg-gray-light\n }\n}\n\n@tailwind utilities;\n\n@layer utilities {\n .dir-rtl {\n direction: rtl !important;\n }\n\n .dir-ltr {\n direction: ltr !important;\n }\n}\n```\n\n========================================\n\nComments:\n- Could you also please the place where you use the `font-face` + your `nuxt.config.js` file?\n- The `Error: Can't resolve '~/static/fonts/farsi/eot/iranyekanwebregular.eot' in '/Users/mohammadamin/WebstormProjects/TicaTeb/assets/css'` indicates that you may have an incorrect path regarding your file.\n- I use font-face in main.css.\n- nuxt.config.js added to my question.\n- What about my second comment? Mind sharing the CSS file too?\n- No problem. I added to the question.\n- node-sass is the old and inefficient version anyway.\n- Yeah. I agree with you and now I change it to sass.\n- But why it can not resolve a CSS @font-face URL !?","metadata":{"transformedAt":"2026-08-18T18:33:42.952Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":800,"estimatedTokens":6120}}875{"id":"stack-73202720","source":"stackoverflow","questionId":73202720,"title":"How to make a vertical border in tailwind centered between two divs","tags":["html","css","reactjs","next.js","tailwind-css"],"text":"Title: How to make a vertical border in tailwind centered between two divs\nTags: html, css, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nHello I'm trying to make a timeline and to do so I want to make a line intersecting each year like so example. I am using tailwind and nextjs.\n\nThis is the code that I have so far but it's still not centering the line.\n\n```\n\n 2022\n \n 2021\n\n```\n\nAny help would be very much appreciated thanks.\n\n========================================\n\nCode:\n```text\n<div className=\"relative flex-col items-center justify-center\">\n <span className=\"text-gray-400\">2022</span>\n <div className=\" h-20 border-l border-gray-400\" />\n <span className=\"text-gray-400\">2021</span>\n</div>\n```\n\n```text\n<div className=\"relative flex-col items-center justify-center\">\n <div className=\"after:block after:bg-black after:w-[1px] after:h-10 after:mx-auto after:my-2\">\n <span className=\"text-gray-400\">2022</span>\n </div>\n <div className=\"after:block after:bg-black after:w-[1px] after:h-20 after:mx-auto after:my-2\">\n <span className=\"text-gray-400\">2021</span>\n </div>\n <span className=\"text-gray-400\">2020</span>\n</div>\n```\n\n```text\n::after\n```\n\n```text\ndiv\n```\n\n========================================\n\nComments:\n- You just forgot to add `flex` class to a parent, that's it. See here. Also just in case I would specify central div width like `w-px` (1px)","metadata":{"transformedAt":"2026-08-18T18:33:42.952Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":54,"estimatedTokens":350}}876{"id":"stack-69826346","source":"stackoverflow","questionId":69826346,"title":"HeadlessUI Tabs active tabs gets back to 0 after refresh","tags":["javascript","reactjs","tabs","tailwind-css","headless-ui"],"text":"Title: HeadlessUI Tabs active tabs gets back to 0 after refresh\nTags: javascript, reactjs, tabs, tailwind-css, headless-ui\nSource: Stack Overflow\n\nQuestion:\nI badly need help about headlessUI tabs. I was trying to fix it my own and research but there's not enough resources about my problem. I still don't understand how this is not working, I also read the docs.\n\n```\nimport { useEffect, useState } from \"react\";\nimport { Tab } from \"@headlessui/react\";\n\nfunction classNames(...classes) {\n return classes.filter(Boolean).join(\" \");\n}\n\nexport default function Tabs({ tabs }) {\n const [index, setIndex] = useState();\n\n return (\n {\n console.log(\"Changed selected tab to:\", index);\n setIndex(index);\n }}\n >\n \n {tabs.map(({ tab }, index) => (\n \n classNames(\n selected ? \"text-gray-900\" : \"text-gray-400 font-avenir-roman\"\n )\n }\n >\n {tab}\n \n ))}\n \n \n {tabs.map(({ content }, index) => (\n {content}\n ))}\n \n \n );\n}\n```\n\n========================================\n\nTop Answer:\nFound an **easy way** of doing this using URL query parameter. First of all add query parameter using onClick on the each Tab component.\n\n`{BASEURL}?tab={tab_name}`\n\nThen create a function like as follows;\n\n```\nconst router = useRouter();\n\nconst getActiveTab = () => {\n const tabValues = [\"tab1\",\"tab2\"]; //This should contains the all the tab_names you given earlier when calling onClick.\n\n return tabValues.indexOf(router.query.tab);\n };\n```\n\nAfter that set the defaultIndex attribute of the Tab.Group Component to be equal to the return value of the function as follows;\n\n```\n\n \n \n\n```\n\n========================================\n\nCode:\n```text\nimport { useEffect, useState } from \"react\";\nimport { Tab } from \"@headlessui/react\";\n\nfunction classNames(...classes) {\n return classes.filter(Boolean).join(\" \");\n}\n\nexport default function Tabs({ tabs }) {\n const [index, setIndex] = useState();\n\n return (\n <Tab.Group\n defaultIndex={index}\n onChange={(index) => {\n console.log(\"Changed selected tab to:\", index);\n setIndex(index);\n }}\n >\n <Tab.List className=\"text-xl space-x-9\">\n {tabs.map(({ tab }, index) => (\n <Tab\n key={index}\n className={({ selected }) =>\n classNames(\n selected ? \"text-gray-900\" : \"text-gray-400 font-avenir-roman\"\n )\n }\n >\n {tab}\n </Tab>\n ))}\n </Tab.List>\n <Tab.Panels>\n {tabs.map(({ content }, index) => (\n <Tab.Panel key={index}>{content}</Tab.Panel>\n ))}\n </Tab.Panels>\n </Tab.Group>\n );\n}\n```\n\n```text\nconst [currentTab, setCurrentTab] = useState(0);\n\nuseEffect(() => {\n localStorage.setItem(\"currentTab\", JSON.stringify(currentTab));\n }, [currentTab]);\n\n useEffect(() => {\n const currentTab = JSON.parse(localStorage.getItem(\"currentTab\"));\n if (currentTab) {\n setCurrentTab(currentTab);\n }\n }, []);\n\n <Tab.Group\n defaultIndex={tab}\n onChange={(currentTab) => {\n setCurrentTab(currentTab);\n router.replace(\n {\n pathname: `/path/userPath/edit/${id}`,\n query: { tab: currentTab },\n },\n undefined,\n {\n shallow: true,\n }\n );\n }}\n >\n```\n\n```text\nquery.tab\n```\n\n```text\nconst router = useRouter();\n\nconst getActiveTab = () => {\n const tabValues = [\"tab1\",\"tab2\"]; //This should contains the all the tab_names you given earlier when calling onClick.\n\n return tabValues.indexOf(router.query.tab);\n };\n```\n\n```text\n<Tab.Group defaultIndex={getActiveTab()}>\n <Tab.List>\n </Tab.List>\n<Tab.Group/>\n```\n\n```text\n{BASEURL}?tab={tab_name}\n```\n\n========================================\n\nComments:\n- What have you tried? defaultIndex={index} will set it back to the first tab, that's expected. You have to manage the state yourself based on url query or params or localStorage or something ..\n- I already fix it using the localStorage, it's working now. Thank you 💙\n- Provide an answer yourself then so this is helpful to others as well.\n- I used router.push() with shallow routing in nextjs to change the url without refreshing the page\n- I think what @trainoasis means is that you should post an answer under this question about your own solution so that other people who come through can easily find how you fixed it.\n- yea, id like an answer","metadata":{"transformedAt":"2026-08-18T18:33:42.952Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":186,"estimatedTokens":1118}}877{"id":"stack-73797220","source":"stackoverflow","questionId":73797220,"title":"How do i make my site responsive for all heights and widths?","tags":["css","tailwind-css"],"text":"Title: How do i make my site responsive for all heights and widths?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am trying to understand TailwindCSS and currently trying to make **responsive employee card**. But the problem i have recently encountered is that my card seems responsive for all breakpoints of tailwind but **only when the height is 900.** Whenever i increase the height i get more space at the bottom and whenever i shrink the window height the contents get overflowed.\n\n**How do i make it responsive for all heights and widths?**\n\n[**Works perfectly only when the height is 900 and within Tailwind Breakpoint Width Range**]\n\nHere is the Live Site Preview \n\nHere is the Github Repo-Code\n\nCode -\n\n```\n\n \n The title of the card here\n\n \n \n UNDER REVIEW\n \n \n May 14, 1988\n \n \n \n Here is a short comment about this employee.\n\n \n\n \n \n Employee\n \n \n VG\n \n Mohammad Mustak\n Web Developer\n \n \n \n \n\n```\n\n========================================\n\nTop Answer:\nHow do i make it responsive for all heights and widths?\n\nDeclare `width`, `height`, `padding` etc. using:\n\n**Viewport Units**\n\n- `vw`\n\n- `vh`\n\n- `vmin`\n\n- `vmax`\n\nand then, if needed:\n\n**Small Viewport Units**\n\n- `svw`\n\n- `svh`\n\n**Large Viewport Units**\n\n- `lvw`\n\n- `lvh`\n\n**Dynamic Viewport Units**\n\n- `dvw`\n\n- `dvh`\n\n### Further Reading:\n\n- Relative Length Units at MDN\n\n========================================\n\nCode:\n```text\n<body class=\"flex justify-center items-center h-screen w-full\">\n\n<div class=\"main-container bg-slate-500 min-h-3/6 w-8/12 sm:w-8/12 sm:min-h-3/6 md:w-7/12 md:min-h-2.5/6 lg:w-5/12 lg:min-h-2.5/6 xl:w-4/12 xl:min-h-2.5/6 2xl:w-3.5/12 2xl:min-h-4/6 flex justify-center items-center py-20\">\n <div class=\"container bg-slate-200 w-8/12 h-4/6 flex flex-col rounded-lg\">\n <div class=\"title py-4 px-5 font-bold\">The title of the card here</div>\n\n <div class=\"review-date grid grid-cols-2 bg-white w-full h-1/6 items-center p-2 px-4 text-center\">\n <div class=\"review flex justify-center items-center text-xs bg-orange-700 text-white font-semibold p-1 sm:w-10/12 sm:py-1 rounded-full uppercase select-none\">\n UNDER REVIEW\n </div>\n <div class=\"date flex justify-end items-center text-xs font-semibold select-none\">\n May 14, 1988\n </div>\n </div>\n <div class=\"comment bg-white border-t border-slate-100 w-full\">\n <p class=\"commentdata bg-slate-200 text-left text-sm p-3 m-4 rounded-lg select-none\">Here is a short comment about this employee.</p>\n </div>\n\n <div class=\"employeedata px-4 pt-2 pb-4\">\n <div class=\"employee uppercase\">\n <label class=\"text-xs font-bold text-slate-600\">Employee</label>\n </div>\n <div class=\"employeebar flex mt-2\">\n <div class=\"employee-logo bg-sky-800 text-white text-xs font-bold w-10 h-10 rounded-full flex justify-center items-center\">VG</div>\n <div class=\"employee-info flex flex-col ml-4\">\n <div class=\"employee-name text-sm font-bold flex pb-0.5\">Mohammad Mustak</div>\n <div class=\"employee-title text-xs text-slate-600\">Web Developer</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n</body>\n```\n\n```text\n<div class=\"main-container bg-slate-500 min-h-3/6 w-8/12 sm:w-8/12 sm:min-h-3/6 md:w-7/12 md:min-h-2.5/6 lg:w-5/12 lg:min-h-2.5/6 xl:w-4/12 xl:min-h-2.5/6 2xl:w-3.5/12 2xl:min-h-4/6 flex justify-center items-center py-20\">\n```\n\n```text\nwidth\n```\n\n```text\nheight\n```\n\n```text\npadding\n```\n\n```text\nvw\n```\n\n```text\nvh\n```\n\n```text\nvmin\n```\n\n```text\nvmax\n```\n\n```text\nsvw\n```\n\n```text\nsvh\n```\n\n```text\nlvw\n```\n\n```text\nlvh\n```\n\n```text\ndvw\n```\n\n```text\ndvh\n```\n\n```css\n@media all and (max-height: 600px) {\n /* your css after this line */\n}\n```\n\n```text\nmedia\n```\n\n========================================\n\nComments:\n- I just can't wrap my head around why people prefer to use HTML bloating languages like this. I mean just look at the amount of elements in this code while all it does is represent 9 items which could well perfectly be controlled by a few lines of CSS and some @media queries.\n- @KayAngevare - It's a different approach entailing a different *dependency direction*. Conventionally, a structure is built in HTML and then the CSS styles are written relative to the HTML. By contrast, with *Utility CSS* like Tailwind, pre-set styles (albeit extensible) already exist and then the HTML is written relative to the CSS.\n- Following this tailwindcss.com/docs/width I did try using vw but it doesn't seem to work.","metadata":{"transformedAt":"2026-08-18T18:33:42.952Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":17,"totalLines":203,"estimatedTokens":1159}}878{"id":"stack-71669246","source":"stackoverflow","questionId":71669246,"title":"Need help using @apply directive in Tailwind CSS","tags":["tailwind-css"],"text":"Title: Need help using @apply directive in Tailwind CSS\nTags: tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI found the @apply directive an easy way to reuse code but when I'm using the @apply directive in tailwind css it is showing me error You cannot `@apply` the `btn` utility here because it creates a circular dependency.\n\nThis is my HTML code\n\n```\nBrowse\n Look\n```\n\nI want the classes of the 1st a tag in my second tag by just using @apply directive\n\nAnd this is my tailwind css file where I put the @apply directive\n\n```\n@tailwind base;\n@tailwind components;\n\n.btn{\n@apply bg-transparent border btn border-black hover:bg-black hover:text-white px-6 py-2 rounded-2xl;\n}\n@tailwind utilities;\n```\n\n========================================\n\nCode:\n```text\n<a class=\"bg-transparent border btn border-black hover:bg-black hover:text-white px-6 py-2 rounded-2xl\"\n href=\"\">Browse</a>\n <a>Look</a>\n```\n\n```text\n@tailwind base;\n@tailwind components;\n\n.btn{\n@apply bg-transparent border btn border-black hover:bg-black hover:text-white px-6 py-2 rounded-2xl;\n}\n@tailwind utilities;\n```\n\n```text\n@apply\n```\n\n```text\nbtn\n```\n\n```text\n<a class=\"btn\" href=\"\">Browse</a>\n\n<a>Look</a>\n```\n\n```text\n@tailwind base;\n@tailwind components;\n.btn{\n@apply bg-transparent border border-black hover:bg-black hover:text-white px-6 py-2 rounded-2xl;\n}\n@tailwind utilities;\n```\n\n```text\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components{\n .btn{\n @apply bg-transparent border border-black hover:bg-black hover:text-white px-6 py-2 rounded-2xl;\n }\n}\n```\n\n```text\nbtn\n```\n\n```text\n@layer components\n```\n\n```text\n@tailwind components;\n```\n\n```text\n@tailwind utilities;\n```\n\n========================================\n\nComments:\n- This causes \"You cannot `@apply` the `invisible` utility here because it creates a circular dependency\" in an Angular application.\n- @JanBrus same in nextjs. We cant use `@apply` inside `@layer components`","metadata":{"transformedAt":"2026-08-18T18:33:42.952Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":103,"estimatedTokens":493}}879{"id":"stack-69460376","source":"stackoverflow","questionId":69460376,"title":"tailwind style not applying in next js when using official cli to generate project","tags":["javascript","css","reactjs","next.js","tailwind-css"],"text":"Title: tailwind style not applying in next js when using official cli to generate project\nTags: javascript, css, reactjs, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am following the tailwind doc to generate nextJs app.\n\n```\nnpx create-next-app -e with-tailwindcss .\n```\n\nThen I've created `NavBar` component by copying the code of tailwind doc\n\nNavBar.js\n\n```\nimport React from \"react\";\n\nfunction NavBar() {\n return (\n \n \n \n \n \n Tailwind CSS\n \n \n \n \n Menu\n \n \n \n \n \n \n \n Docs\n \n \n Examples\n \n \n Blog\n \n \n \n \n Download\n \n \n \n \n );\n}\n\nexport default NavBar;\n```\n\nThe appearance of NavBar is not same as the doc\nhttps://i.sstatic.net/OW3Yj.png\n\nThis is what the `NavBar` should look like:\nhttps://i.sstatic.net/0TphC.png\n\ntailwind.config.js\n\n```\nmodule.exports = {\n mode: 'jit',\n purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\npostcss.config.js\n\n```\n// If you want to use other PostCSS plugins, see the following:\n// https://tailwindcss.com/docs/using-with-preprocessors\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n_app.js\n\n```\nimport Layout from \"../components/Layout\";\nimport \"tailwindcss/tailwind.css\";\n\nfunction MyApp({ Component, pageProps }) {\n return (\n \n \n \n );\n}\n\nexport default MyApp;\n```\n\nLayout.js\n\n```\nimport React from 'react';\nimport NavBar from '../components/NavBar';\n\nfunction Layout({children}) {\n return (\n <>\n \n \n \n {children}\n \n \n \n )\n}\n\nexport default Layout\n```\n\n========================================\n\nCode:\n```text\nnpx create-next-app -e with-tailwindcss .\n```\n\n```text\nimport React from \"react\";\n\nfunction NavBar() {\n return (\n <nav className=\"flex items-center justify-between flex-wrap bg-teal-500 p-6\">\n <div className=\"flex items-center flex-shrink-0 text-white mr-6\">\n <svg\n className=\"fill-current h-8 w-8 mr-2\"\n width=\"54\"\n height=\"54\"\n viewBox=\"0 0 54 54\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z\" />\n </svg>\n <span className=\"font-semibold text-xl tracking-tight\">Tailwind CSS</span>\n </div>\n <div className=\"block lg:hidden\">\n <button className=\"flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white\">\n <svg\n className=\"fill-current h-3 w-3\"\n viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Menu</title>\n <path d=\"M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z\" />\n </svg>\n </button>\n </div>\n <div className=\"w-full block flex-grow lg:flex lg:items-center lg:w-auto\">\n <div className=\"text-sm lg:flex-grow\">\n <a\n href=\"#responsive-header\"\n className=\"block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4\"\n >\n Docs\n </a>\n <a\n href=\"#responsive-header\"\n className=\"block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4\"\n >\n Examples\n </a>\n <a\n href=\"#responsive-header\"\n className=\"block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white\"\n >\n Blog\n </a>\n </div>\n <div>\n <a\n href=\"#\"\n className=\"inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0\"\n >\n Download\n </a>\n </div>\n </div>\n </nav>\n );\n}\n\nexport default NavBar;\n```\n\n```text\nmodule.exports = {\n mode: 'jit',\n purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n// If you want to use other PostCSS plugins, see the following:\n// https://tailwindcss.com/docs/using-with-preprocessors\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```text\nimport Layout from \"../components/Layout\";\nimport \"tailwindcss/tailwind.css\";\n\nfunction MyApp({ Component, pageProps }) {\n return (\n <Layout>\n <Component {...pageProps} />\n </Layout>\n );\n}\n\nexport default MyApp;\n```\n\n```text\nimport React from 'react';\nimport NavBar from '../components/NavBar';\n\nfunction Layout({children}) {\n return (\n <>\n <NavBar/>\n <div>\n <main>\n {children}\n </main>\n </div>\n </>\n )\n}\n\nexport default Layout\n```\n\n```text\nNavBar\n```\n\n```text\nNavBar\n```\n\n```text\nmodule.exports = {\n theme: {\n colors: require('tailwindcss/colors'),\n },\n}\n```\n\n```text\nteal\n```\n\n```text\ntheme: { colors: require('tailwindcss/colors') }\n```\n\n```text\ntailwind.config.js\n```\n\n========================================\n\nComments:\n- If that's from some official code and you didn't do anything else than following the doc, I think it's ok to open a ticket on the relevant GitHub repo","metadata":{"transformedAt":"2026-08-18T18:33:42.952Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":302,"estimatedTokens":1392}}880{"id":"stack-71616561","source":"stackoverflow","questionId":71616561,"title":"CSS (Tailwind) Grid height 100vh not working","tags":["html","css","tailwind-css"],"text":"Title: CSS (Tailwind) Grid height 100vh not working\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\ncurrently im trying to create a Layout which fills the whole screen.\nThought its very easy but found out it doesn't work as expected.\n\nHere is a Fiddle https://jsfiddle.net/s5ocg3v8/36/\n\n```\n\n Header\n \n Navigation\n \n Container\n \n Content\n \n \n \n\n```\n\nif the content gets bigger than the container, the defined height is ignored.\n\ni want the layout to always fill the whole screen but not more, if the content is bigger then it should show a scrollbar for the container.\n\ni could set the header to a fixed height and then use calc(100%-headerHeight) but thats not really what i want\n\n========================================\n\nCode:\n```text\n<div class=\"h-screen grid grid-rows-[auto_1fr] p-5\">\n <div class=\"bg-slate-200 mb-1 p-2\">Header</div>\n <div class=\"grid grid-cols-[auto_1fr]\">\n <div class=\"bg-slate-200 mr-1 p-2\">Navigation</div>\n <div class=\"bg-slate-200 p-2 overflow-y-auto\">\n Container\n <div class=\"border-2 border-black\" style=\"height: 1000px;\">\n Content\n </div>\n </div>\n </div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"h-screen grid grid-rows-[auto_1fr] p-5\">\n <div class=\"bg-slate-200 mb-1 p-2\">Header</div>\n <div class=\"grid grid-cols-[auto_1fr] min-h-0\">\n <div class=\"bg-slate-200 mr-1 p-2\">Navigation</div>\n <div class=\"bg-slate-200 p-2 overflow-y-auto\">\n Container\n <div class=\"border-2 border-black\" style=\"height: 1000px;\">\n Content\n </div>\n </div>\n </div>\n</div>\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<div class=\"h-screen grid grid-rows-[auto_minmax(0,1fr)] p-5\">\n <div class=\"bg-slate-200 mb-1 p-2\">Header</div>\n <div class=\"grid grid-cols-[auto_1fr]\">\n <div class=\"bg-slate-200 mr-1 p-2\">Navigation</div>\n <div class=\"bg-slate-200 p-2 overflow-y-auto\">\n Container\n <div class=\"border-2 border-black\" style=\"height: 1000px;\">\n Content\n </div>\n </div>\n </div>\n</div>\n```\n\n```text\nmin-h-0\n```\n\n```text\nminmax(0,1fr)\n```\n\n```text\n1fr\n```\n\n========================================\n\nComments:\n- thank you it works, but i don't really understand why? could u explain?\n- it's explained here stackoverflow.com/questions/52861086/…","metadata":{"transformedAt":"2026-08-18T18:33:42.952Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":100,"estimatedTokens":583}}881{"id":"stack-71484883","source":"stackoverflow","questionId":71484883,"title":"Unknown word error from CSS Minimizer plugin on React build","tags":["reactjs","compiler-errors","babeljs","tailwind-css"],"text":"Title: Unknown word error from CSS Minimizer plugin on React build\nTags: reactjs, compiler-errors, babeljs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThe React build failed due to the CSS Minimizer plugin's \"Unknown word\" error. When I run `npm run build,` it continuously fails!\n\nFailed to compile.\n\nstatic/css/main.d3e3749c.css from Css Minimizer plugin\nstatic\\css\\main.d3e3749c.css:698:13: Unknown word [:1,0][static/css/main.d3e3749c.css:698,13]\n\nMy Node version is v16.14.0. Everything works well in `npm start,` but the build fails. Maybe this is due to PostCSS. I tried downgrading the version for the same, but it didn't work.\n\n**package.json**\n\n```\n{\n \"name\": \"frontend\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@emotion/react\": \"^11.8.1\",\n \"@emotion/styled\": \"^11.8.1\",\n \"@mui/icons-material\": \"^5.4.4\",\n \"@mui/material\": \"^5.4.4\",\n \"@testing-library/jest-dom\": \"^5.16.1\",\n \"@testing-library/react\": \"^12.1.2\",\n \"@testing-library/user-event\": \"^13.5.0\",\n \"axios\": \"^0.26.0\",\n \"emoji-mart\": \"^3.0.1\",\n \"moment\": \"^2.29.1\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-helmet-async\": \"^1.2.3\",\n \"react-infinite-scroll-component\": \"^6.1.0\",\n \"react-redux\": \"^7.2.6\",\n \"react-router-dom\": \"^6.2.1\",\n \"react-scripts\": \"5.0.0\",\n \"react-scroll-to-bottom\": \"^4.2.0\",\n \"react-slick\": \"^0.28.1\",\n \"react-toastify\": \"^8.2.0\",\n \"redux\": \"^4.1.2\",\n \"redux-devtools-extension\": \"^2.13.9\",\n \"redux-thunk\": \"^2.4.1\",\n \"slick-carousel\": \"^1.8.1\",\n \"socket.io-client\": \"^4.4.1\",\n \"web-vitals\": \"^2.1.3\",\n \"webfontloader\": \"^1.6.28\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.2\",\n \"postcss\": \"^8.4.8\",\n \"tailwindcss\": \"^3.0.23\"\n }\n}\n```\n\n========================================\n\nTop Answer:\nI was passing data from state in tailwindcss class.\n\n`top-[${positionFromTop}]`\n\nSolution: Don't use any fancy CSS.\n\n========================================\n\nCode:\n```text\n{\n \"name\": \"frontend\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@emotion/react\": \"^11.8.1\",\n \"@emotion/styled\": \"^11.8.1\",\n \"@mui/icons-material\": \"^5.4.4\",\n \"@mui/material\": \"^5.4.4\",\n \"@testing-library/jest-dom\": \"^5.16.1\",\n \"@testing-library/react\": \"^12.1.2\",\n \"@testing-library/user-event\": \"^13.5.0\",\n \"axios\": \"^0.26.0\",\n \"emoji-mart\": \"^3.0.1\",\n \"moment\": \"^2.29.1\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-helmet-async\": \"^1.2.3\",\n \"react-infinite-scroll-component\": \"^6.1.0\",\n \"react-redux\": \"^7.2.6\",\n \"react-router-dom\": \"^6.2.1\",\n \"react-scripts\": \"5.0.0\",\n \"react-scroll-to-bottom\": \"^4.2.0\",\n \"react-slick\": \"^0.28.1\",\n \"react-toastify\": \"^8.2.0\",\n \"redux\": \"^4.1.2\",\n \"redux-devtools-extension\": \"^2.13.9\",\n \"redux-thunk\": \"^2.4.1\",\n \"slick-carousel\": \"^1.8.1\",\n \"socket.io-client\": \"^4.4.1\",\n \"web-vitals\": \"^2.1.3\",\n \"webfontloader\": \"^1.6.28\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.2\",\n \"postcss\": \"^8.4.8\",\n \"tailwindcss\": \"^3.0.23\"\n }\n}\n```\n\n```text\nnpm run build,\n```\n\n```text\nnpm start,\n```\n\n```text\ntop-[${positionFromTop}]\n```\n\n```text\nnpx tailwindcss -i ./src/{YOUR_MAIN_CSS_FILE}.css -o ./dist/output.css --watch\n```\n\n```text\ntop-[${positionFromTop}]\n```\n\n========================================\n\nComments:\n- I am getting the same error as well. Any update on this?\n- @Smoke Yes, I was using style like passing it from state. Do not use any fancy CSS in any of your files.\n- Thanks for sharing. I was also using it in the same way.\n- Hi, I believe I have the same error.. but I can't identify the class which causes the syntax error. Any idea on how to find the class which creates the error?\n- @OscarEkstrand if you use a code editor like vscode it should automatically highlight the error inside the output.css file (if there are any). also, try running `npm run build` (and seeing that the minimizer error appears) before you run the above command to generate the output.css file.","metadata":{"transformedAt":"2026-08-18T18:33:42.952Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":6,"totalLines":188,"estimatedTokens":1209}}882{"id":"stack-71400106","source":"stackoverflow","questionId":71400106,"title":"Unexpected behavior with Tailwindcss and Flexbox","tags":["html","css","flexbox","tailwind-css"],"text":"Title: Unexpected behavior with Tailwindcss and Flexbox\nTags: html, css, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI've tried isolating an issue for a few hours to no avail. I think an image is worth more than a few words so let's start with that.\n\nhttps://i.sstatic.net/oFYlL.png\n\nAnd the code.\n\n```\n\n \n \n \n test\n\n \n \n \n \n test\n\n \n \n \n \n test\n\n \n \n \n\n```\n\nAs we can see, the first div inside the container has a weird position. I've tried removing a lot of classes, including padding and margin, but the first element stays in this position no matter what.\n\nI really don't see what is my issue, so I kind of need extra pairs of eyes right now. Thanks.\n\n========================================\n\nCode:\n```text\n<section id=\"about-me\" class=\"flex bg-neutral-300 text-neutral-900\">\n <div class=\"container mx-auto flex flex-col space-y-5 md:flex-row md:space-x-5 p-5 md:p-0 md:pt-5 md:pb-5\">\n <div class=\"flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900\">\n <div class=\"flex flex-col\">\n <p>test</p>\n </div>\n </div>\n <div class=\"flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900\">\n <div class=\"flex flex-col\">\n <p>test</p>\n </div>\n </div>\n <div class=\"flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900\">\n <div class=\"flex flex-col\">\n <p>test</p>\n </div>\n </div>\n </div>\n</section>\n```\n\n```text\n<section id=\"about-me\" class=\"flex bg-neutral-300 text-neutral-900\">\n\n <div class=\"container mx-auto flex flex-col md:flex-row md:space-x-5 p-5 md:p-0 md:pt-5 md:pb-5\">\n\n <div class=\"flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900\">\n <div class=\"flex flex-col\">\n <p>test</p>\n </div>\n </div>\n <div class=\"flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900\">\n <div class=\"flex flex-col\">\n <p>test</p>\n </div>\n </div>\n <div class=\"flex flex-1 justify-center h-32 rounded-lg shadow-sm shadow-neutral-900\">\n <div class=\"flex flex-col\">\n <p>test</p>\n </div>\n </div>\n </div>\n\n</section>\n```\n\n```text\nspace-y-5\n```\n\n========================================\n\nComments:\n- It works! Thanks, I feel kinda stupid right now, since it was really obvious. I'm marking as solved with your solution once the 10 minutes has passed. Have a great day.\n- @fgodin Cool :-) and you welcome! Merci and nice day, too!","metadata":{"transformedAt":"2026-08-18T18:33:42.952Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":99,"estimatedTokens":656}}883{"id":"stack-69802384","source":"stackoverflow","questionId":69802384,"title":"How do I make the color gray when the first item of the select box is selected","tags":["jquery","tailwind-css"],"text":"Title: How do I make the color gray when the first item of the select box is selected\nTags: jquery, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have 3 selectboxes, all of them have the same class. In the selectbox I am trying to do, if the first item is selected, the text color should be gray, if the others are selected, the text color should be white.\n\nI tried this with jquery and tailwindcss.\n\nMY HTML CODE :\n\n```\n\n \n Ülke...\n Türkiye\n Türkiye\n Türkiye\n Türkiye\n Türkiye\n Türkiye\n Türkiye\n \n \n Şehir...\n Bursa\n Bursa\n Bursa\n Bursa\n Bursa\n Bursa\n Bursa\n \n \n İlçe...\n İznik\n İznik\n İznik\n İznik\n İznik\n İznik\n İznik\n \n\n```\n\nMY CSS CODE :\n\n```\n[hidden] {\n display: none;\n}\n```\n\nMY JS CODE : (JQUERY)\n\n```\n$(\".first-child-gray-select\").each((select) => {\n$(select).on(\"change\", function () {\n console.log(\"sea\");\n if ($(select + \"option:selected\").hasClass(\"text-white\")) {\n $(select).removeClass(\"text-gray-500\");\n $(select).addClass(\"text-white\");\n }\n});\n});\n```\n\nWhen I edit the code in this way, when I select the option, it changes the color of all the select boxes.\n\n```\n$(\".first-child-gray-select\").change(function () {\n if ($(\".first-child-gray-select option:selected\").hasClass(\"text-white\")) {\n $(\".first-child-gray-select\").removeClass(\"text-gray-500\");\n $(\".first-child-gray-select\").addClass(\"text-white\");\n }\n});\n```\n\n========================================\n\nCode:\n```text\n<div class=\"text-white grid grid-cols-2 px-4 gap-4\">\n <select class=\"focus:outline-none focus:ring-0 border-gray-500 rounded-md bg-transparent first-child-gray-select text-gray-500\" required>\n <option value=\"\" class=\"bg-primary text-gray-500\" disabled hidden selected>Ülke...</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Türkiye</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Türkiye</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Türkiye</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Türkiye</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Türkiye</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Türkiye</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Türkiye</option>\n </select>\n <select class=\"focus:outline-none focus:ring-0 border-gray-500 rounded-md bg-transparent first-child-gray-select text-gray-500\" required>\n <option value=\"\" class=\"bg-primary text-gray-500\" disabled hidden selected>Şehir...</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Bursa</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Bursa</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Bursa</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Bursa</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Bursa</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Bursa</option>\n <option value=\"tr\" class=\"bg-primary text-white\">Bursa</option>\n </select>\n <select class=\"focus:outline-none focus:ring-0 border-gray-500 rounded-md bg-transparent first-child-gray-select text-gray-500\" required>\n <option value=\"\" class=\"bg-primary text-gray-500\" disabled hidden selected>İlçe...</option>\n <option value=\"tr\" class=\"bg-primary text-white\">İznik</option>\n <option value=\"tr\" class=\"bg-primary text-white\">İznik</option>\n <option value=\"tr\" class=\"bg-primary text-white\">İznik</option>\n <option value=\"tr\" class=\"bg-primary text-white\">İznik</option>\n <option value=\"tr\" class=\"bg-primary text-white\">İznik</option>\n <option value=\"tr\" class=\"bg-primary text-white\">İznik</option>\n <option value=\"tr\" class=\"bg-primary text-white\">İznik</option>\n </select>\n\n</div>\n```\n\n```text\n[hidden] {\n display: none;\n}\n```\n\n```text\n$(\".first-child-gray-select\").each((select) => {\n$(select).on(\"change\", function () {\n console.log(\"sea\");\n if ($(select + \"option:selected\").hasClass(\"text-white\")) {\n $(select).removeClass(\"text-gray-500\");\n $(select).addClass(\"text-white\");\n }\n});\n});\n```\n\n```text\n$(\".first-child-gray-select\").change(function () {\n if ($(\".first-child-gray-select option:selected\").hasClass(\"text-white\")) {\n $(\".first-child-gray-select\").removeClass(\"text-gray-500\");\n $(\".first-child-gray-select\").addClass(\"text-white\");\n }\n});\n```\n\n```html\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document</title>\n <link href=\"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css\" rel=\"stylesheet\">\n <script src=\"//unpkg.com/alpinejs\" defer></script>\n</head>\n<body>\n <div class=\"p-4\">\n <div x-data=\"{\n select1: 's1_A',\n select2: 's2_A',\n select3: 's3_A',\n }\">\n <select name=\"s1\" id=\"id_s1\" class=\"border-2 p-4 rounded-xl\" x-model=\"select1\" :class=\"select1 == 's1_A' ? 'text-blue-800' : 'text-gray-800'\">\n <option value=\"s1_A\" class=\"text-gray-800\">Select 1: Option 1</option>\n <option value=\"s1_B\" class=\"text-gray-800\">Select 1: Option 2</option>\n <option value=\"s1_C\" class=\"text-gray-800\">Select 1: Option 3</option>\n </select>\n <select name=\"s2\" id=\"id_s2\" class=\"mt-4 border-2 p-4 rounded-xl\" x-model=\"select2\" :class=\"select2 == 's2_A' ? 'text-blue-800' : 'text-gray-800'\">\n <option value=\"s2_A\" class=\"text-gray-800\">Select 2: Option 1</option>\n <option value=\"s2_B\" class=\"text-gray-800\">Select 2: Option 2</option>\n <option value=\"s2_C\" class=\"text-gray-800\">Select 2: Option 3</option>\n </select>\n <select name=\"s3\" id=\"id_s3\" class=\"mt-4 border-2 p-4 rounded-xl\" x-model=\"select3\" :class=\"select3 == 's3_A' ? 'text-blue-800' : 'text-gray-800'\">\n <option value=\"s3_A\" class=\"text-gray-800\">Select 3: Option 1</option>\n <option value=\"s3_B\" class=\"text-gray-800\">Select 3: Option 2</option>\n <option value=\"s3_C\" class=\"text-gray-800\">Select 3: Option 3</option>\n </select>\n </div>\n </div>\n</body>\n```\n\n```text\nx-model\n```\n\n```text\nx-bind\n```\n\n========================================\n\nComments:\n- Thank you very much for your reply. I use alpine.js in many places in my project, how could I not think of it :)","metadata":{"transformedAt":"2026-08-18T18:33:42.952Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":193,"estimatedTokens":1674}}884{"id":"stack-71035932","source":"stackoverflow","questionId":71035932,"title":"Dynamic flex item width","tags":["css","flexbox","tailwind-css"],"text":"Title: Dynamic flex item width\nTags: css, flexbox, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI made a working example what I want to achieve: Tabs fill up the given space evenly, if the text is too long, it is truncated with ellipsis.\n\nhttps://i.sstatic.net/dd0Jo.gif\n\nThe problem starts, if I wrap it into `flex` div. (It is a legacy code and part of complex template, and I want ot make as little change as possible)\n\n\r\n\r\n\n```\n.box {\n border: 2px dotted rgb(96, 139, 168);\n}\n\n.box div {\n min-width: 0px;\n display: flex;\n align-items: center;\n border: 2px solid rgb(96, 139, 168);\n border-radius: 5px;\n background-color: rgba(96, 139, 168, .2);\n}\n```\n\n\r\n\n```\n\n**Expected**\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n\n**Wrong**\n\n \n Link 1\n Link 2\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n \n\n```\n\n\r\n\r\n\r\n\nThe problem, that in the second example the tabs do not shrink, they expand the viewport with a scrollbar.\n\nhttps://i.sstatic.net/4S94v.png\n\nHere is the jsbin\n\n========================================\n\nCode:\n```css\n.box {\n border: 2px dotted rgb(96, 139, 168);\n}\n\n.box div {\n min-width: 0px;\n display: flex;\n align-items: center;\n border: 2px solid rgb(96, 139, 168);\n border-radius: 5px;\n background-color: rgba(96, 139, 168, .2);\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<b>Expected</b>\n<div class=\"box h-16 flex items-stretch\">\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n</div>\n\n<b>Wrong</b>\n<div id=\"wrapper\" class=\"w-full mb-8 flex items-stretch\">\n <div class='mr-2 flex items-center'>\n <a class=\"truncate\">Link 1</a>\n <a class=\"truncate\">Link 2</a>\n </div>\n <div class=\"box h-16 flex items-stretch\">\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n </div>\n</div>\n```\n\n```text\nflex\n```\n\n```css\n.box {\n border: 2px dotted rgb(96, 139, 168);\n \n /* ADD THESE PROPERTIES */\n width: 100%;\n overflow: hidden;\n}\n\n.box div {\n min-width: 0px;\n display: flex;\n align-items: center;\n border: 2px solid rgb(96, 139, 168);\n border-radius: 5px;\n background-color: rgba(96, 139, 168, .2);\n}\n```\n\n```html\n<script src=\"https://cdn.tailwindcss.com\"></script>\n\n<b>Expected</b>\n<div class=\"box h-16 flex items-stretch\">\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n</div>\n\n<b>Wrong</b>\n<div id=\"wrapper\" class=\"w-full mb-8 flex items-stretch\">\n <div class='mr-2 flex items-center'>\n <a class=\"truncate\">Link 1</a>\n <a class=\"truncate\">Link 2</a>\n </div>\n <div class=\"box h-16 flex items-stretch\">\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n <div><span class=\"truncate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>\n </div>\n</div>\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.952Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":163,"estimatedTokens":1222}}885{"id":"stack-69025312","source":"stackoverflow","questionId":69025312,"title":"Tailwindcss margin not working inside docker but works perfectly outside container","tags":["css","docker","next.js","tailwind-css"],"text":"Title: Tailwindcss margin not working inside docker but works perfectly outside container\nTags: css, docker, next.js, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nSample: https://play.tailwindcss.com/Xialm0nYXU (this works as expected in tailwind playground & when app is run directly on laptop but not within my containerized app. The margins mx are not working only inside containers.)\n\nI have a HTML code that is similar to the above (but within a larger application). The margins between the `` elements work fine while testing locally. But once I containerize my application it stops working. Oddly margin works at `mx-2` but nothing else work, padding is not working either. Margins for other elements work fine (even inside container), so it should be something about this shared snippet that stops working inside a container. I could not the whole application code, so I understand you might not have full context to understand what else could be happening. But want to check if anyone knows what could possibly cause issue only when run inside container. I suspect something gets messed up in the containerization process. Appreciate any pointers here.\n\nMy Dockerfile:\n\n```\nFROM node:14\n\n# Create app directory\nRUN mkdir -p /usr/src/app/\nWORKDIR /usr/src/app/\n\nCOPY package*.json .\nRUN npm install\n\n# Bundle app source\nCOPY . .\n\nEXPOSE 3000\n\nENV NODE_ENV production\n\nCMD [\"npm\", \"start\" ]\n```\n\ntailwind.config.json:\n\n```\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n purge: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}'\n ],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n colors: {\n blueGray: colors.blueGray,\n emerald: colors.emerald,\n lime: colors.lime,\n trueGray: colors.trueGray,\n teal: colors.teal,\n cyan: colors.cyan,\n sky: colors.sky,\n warmGray: colors.warmGray,\n green: {\n 25: '#f5fff8'\n }\n },\n fontSize: {\n 'xxs': '.70rem'\n },\n overflow: ['hover', 'focus'],\n textOverflow: ['hover', 'focus']\n },\n },\n variants: {\n extend: {\n display: ['hover', 'focus', 'group-hover'],\n opacity: ['disabled'],\n backgroundColor: ['active'],\n whitespace: ['hover', 'focus'],\n width: ['hover', 'focus'],\n },\n },\n plugins: [ \n require('@tailwindcss/forms'),\n ],\n}\n```\n\npostcss.config.js\n\n```\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\nUpdate: The problem turned out to be me dynamically generating tailwind class names through string concatenation. Exactly what the tailwind folks recommended not to do as PurgeCss cant recognize those classes at build time. Once i turned that into an annoyingly long conditional statement returning statically coded class names things started working fine. For information on this checkout tailwind doc - https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html\n\n========================================\n\nCode:\n```text\nFROM node:14\n\n# Create app directory\nRUN mkdir -p /usr/src/app/\nWORKDIR /usr/src/app/\n\n\nCOPY package*.json .\nRUN npm install\n\n# Bundle app source\nCOPY . .\n\nEXPOSE 3000\n\nENV NODE_ENV production\n\nCMD [\"npm\", \"start\" ]\n```\n\n```text\nconst colors = require('tailwindcss/colors')\n\nmodule.exports = {\n purge: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}'\n ],\n darkMode: false, // or 'media' or 'class'\n theme: {\n extend: {\n colors: {\n blueGray: colors.blueGray,\n emerald: colors.emerald,\n lime: colors.lime,\n trueGray: colors.trueGray,\n teal: colors.teal,\n cyan: colors.cyan,\n sky: colors.sky,\n warmGray: colors.warmGray,\n green: {\n 25: '#f5fff8'\n }\n },\n fontSize: {\n 'xxs': '.70rem'\n },\n overflow: ['hover', 'focus'],\n textOverflow: ['hover', 'focus']\n },\n },\n variants: {\n extend: {\n display: ['hover', 'focus', 'group-hover'],\n opacity: ['disabled'],\n backgroundColor: ['active'],\n whitespace: ['hover', 'focus'],\n width: ['hover', 'focus'],\n },\n },\n plugins: [ \n require('@tailwindcss/forms'),\n ],\n}\n```\n\n```text\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n```\n\n```text\n<p>\n```\n\n```text\nmx-2\n```\n\n========================================\n\nComments:\n- I assume it has something to do with your purge settings + the fact that your docker container has `NODE_ENV` set to production but i am currently unable to verify that.\n- I had similar suspicion and tried './**/*.{js,ts,jsx,tsx}' and removed Prod node build. Neither worked.\n- Update: Once I comment out all the line within element \"purge:\" then the margins work as expected. But commenting out purgecss doesnt sound like a proper solution. Anyone know whats wrong with my purge config.\n- So looks like this could be the reason. \"it is important to avoid dynamically creating class strings in your templates with string concatenation, otherwise PurgeCSS won’t know to preserve those classes.\" In my app the css classes for the list is determined dynamically at runtime. So probably when post css is run it didn't find a need to preserve the mx classes and remove it. Exaplains when why margin class was not available while inspecting element in browser.\n- @broun You can add the solution to your problem as an answer to your own question. That clearly indicates the question already has an answer.","metadata":{"transformedAt":"2026-08-18T18:33:42.952Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":187,"estimatedTokens":1339}}886{"id":"stack-66584502","source":"stackoverflow","questionId":66584502,"title":"Table not using Tailwind CSS","tags":["css","reactjs","tailwind-css"],"text":"Title: Table not using Tailwind CSS\nTags: css, reactjs, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI am successfully using Tailwind so I'm not having a problem with importing it. I'm using a grid for example. However, I am unable to create a table that is in their examples. The table is not getting any of the colors. No styling is added to the table, what am I missing?\n\ntailwind.config.js:\n\n```\nmodule.exports = {\npurge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\ndarkMode: false, // or 'media' or 'class'\ntheme: {\n extend: {},\n\n},\nvariants: {\n extend: {\n tableLayout: ['hover', 'focus'],\n },\n container: {\n center: true,\n },\n},\nplugins: [],}\n```\n\nTable that isn't rendering as expected:\n\n```\nselectedView(){\n return (\n \n \n \n Title\n Author\n Views\n \n \n \n \n Intro to CSS\n Adam\n 858\n \n \n A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design\n \n Adam\n 112\n \n \n Intro to JavaScript\n Chris\n 1,280\n \n \n \n);\n```\n\n}\n\n========================================\n\nTop Answer:\nThe emerald color scheme is not enabled in the default configuration.\n\nThe default colors are gray, blue, red, yellow, green, pink, indigo, purple.\n\nEnabling emerald requires a change to your tailwind.config.js file:\n\n```\nconst colors = require('tailwindcss/colors');\n\nmodule.exports = {\n\n ......\n\n theme: {\n fontFamily: {\n },\n extend: {\n fontFamily: {\n },\n colors: {\n emerald: colors.emerald\n }\n },\n },\n .........\n}\n```\n\n========================================\n\nCode:\n```text\nmodule.exports = {\npurge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\ndarkMode: false, // or 'media' or 'class'\ntheme: {\n extend: {},\n\n},\nvariants: {\n extend: {\n tableLayout: ['hover', 'focus'],\n },\n container: {\n center: true,\n },\n},\nplugins: [],}\n```\n\n```text\nselectedView(){\n return (\n <table className=\"table-auto\">\n <thead>\n <tr>\n <th>Title</th>\n <th>Author</th>\n <th>Views</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Intro to CSS</td>\n <td>Adam</td>\n <td>858</td>\n </tr>\n <tr className=\"bg-emerald-200\">\n <td>A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design\n </td>\n <td>Adam</td>\n <td>112</td>\n </tr>\n <tr>\n <td>Intro to JavaScript</td>\n <td>Chris</td>\n <td>1,280</td>\n </tr>\n </tbody>\n </table>\n);\n```\n\n```text\n<div class=\"rounded-t-xl overflow-hidden bg-gradient-to-r from-emerald-50 to-teal-100 p-10\">\n <table class=\"table-auto\">\n <thead>\n <tr>\n <th class=\"px-4 py-2 text-emerald-600\">Title</th>\n <th class=\"px-4 py-2 text-emerald-600\">Author</th>\n <th class=\"px-4 py-2 text-emerald-600\">Views</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td class=\"border border-emerald-500 px-4 py-2 text-emerald-600 font-medium\">Intro to CSS</td>\n <td class=\"border border-emerald-500 px-4 py-2 text-emerald-600 font-medium\">Adam</td>\n <td class=\"border border-emerald-500 px-4 py-2 text-emerald-600 font-medium\">858</td>\n </tr>\n <tr class=\"bg-emerald-200\">\n <td class=\"border border-emerald-500 px-4 py-2 text-emerald-600 font-medium\">A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>\n <td class=\"border border-emerald-500 px-4 py-2 text-emerald-600 font-medium\">Adam</td>\n <td class=\"border border-emerald-500 px-4 py-2 text-emerald-600 font-medium\">112</td>\n </tr>\n <tr>\n <td class=\"border border-emerald-500 px-4 py-2 text-emerald-600 font-medium\">Intro to JavaScript</td>\n <td class=\"border border-emerald-500 px-4 py-2 text-emerald-600 font-medium\">Chris</td>\n <td class=\"border border-emerald-500 px-4 py-2 text-emerald-600 font-medium\">1,280</td>\n </tr>\n </tbody>\n </table>\n</div>\n```\n\n```text\nconst colors = require('tailwindcss/colors');\n\nmodule.exports = {\n\n ......\n\n theme: {\n fontFamily: {\n },\n extend: {\n fontFamily: {\n },\n colors: {\n emerald: colors.emerald\n }\n },\n },\n .........\n}\n```\n\n========================================\n\nComments:\n- thanks, that's a little scammy imo. It looks a lot better but I did not get any colors, only black and white?","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":208,"estimatedTokens":1126}}887{"id":"stack-67064926","source":"stackoverflow","questionId":67064926,"title":"How to whitelist or Safelist, attribute selectors with purgeCSS (Tailwindcss)?","tags":["tailwind-css","postcss","craco"],"text":"Title: How to whitelist or Safelist, attribute selectors with purgeCSS (Tailwindcss)?\nTags: tailwind-css, postcss, craco\nSource: Stack Overflow\n\nQuestion:\nI am trying to use a Tailwindcss RTL plugin, which generates some classes starting with `[dir=rtl]` or `[dir=ltr]`. But due to Purge CSS is removing it regardless of it's use.\n\n========================================\n\nCode:\n```text\n[dir=rtl]\n```\n\n```text\n[dir=ltr]\n```\n\n```text\n<main class=\"[dir=rtl] [dir=ltr] container\">\n{some content}\n</main>\n```\n\n========================================\n\nComments:\n- Check out stackoverflow.com/a/66275291/452587","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":28,"estimatedTokens":152}}888{"id":"stack-64049879","source":"stackoverflow","questionId":64049879,"title":"Github repo url displaying readme.md instead of index.html","tags":["github","github-pages","tailwind-css"],"text":"Title: Github repo url displaying readme.md instead of index.html\nTags: github, github-pages, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nMy repo on Github is only displaying the readme.md when I open the url. I have my index.html in a public folder along w/ a stylesheet.\n\nI'm using tailwind and I followed along w/ a youtube tutorial video and thats how his setup was. I looked it up and read that the index should be living in the same location as the readme.md, because github pages is deploying the root, I tried moving my html out of the public folder and where the readme.md is and I'm still having the same issue.\n\nAny help or suggestions would be appreciated, I'm fairly new at coding so I'm sure there's a simple solution to this that I just haven't thought of or know of.\n\nHere is the repo/docs:\nhttps://github.com/RachelNapier/writers_block_landing_page\n\nAnd here is the repo URL:\nhttps://rachelnapier.github.io/writers_block_landing_page/\n\nThanks so much, in advanced!\n\n========================================\n\nCode:\n```text\ndocs\n```\n\n```text\npublic\n```\n\n```text\n../images\n```\n\n```text\nimages/\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":37,"estimatedTokens":279}}889{"id":"stack-66579085","source":"stackoverflow","questionId":66579085,"title":"How to add and use Local custom font in a Laravel+ TailwindCss+ Vuejs project?","tags":["css","laravel","vue.js","font-face","tailwind-css"],"text":"Title: How to add and use Local custom font in a Laravel+ TailwindCss+ Vuejs project?\nTags: css, laravel, vue.js, font-face, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nAs the title suggests, I'm trying to add and use my own custom fonts in my project that I'm building using Laravel 8 as backend , Vuejs 3 as frontend and tailwindCSS 2 as my CSS framework.\n\nI've tried many ways but the **only time I got my font displayed** was when I used a `` tag in my **.blade.php** with normal css (**@font-face**) & **ids** inside of it.\nI also tried *\"@layer base\"* way (as said in the official docs) but it didn't work\n\n*\\resources\\css\\app.css*\n\n```\n@layer base {\n @font-face {\n font-family: IRANSans;\n font-weight: 900;\n src:url(/fonts/IRANSansWeb_Black.woff2) format(\"woff2\"), \n url(/fonts/IRANSansWeb_Black.woff) format(\"woff\"),\n url(/fonts/IRANSansWeb_Black.ttf) format(\"truetype\");\n }\n \n @font-face {\n font-family: PlatNomor;\n font-weight: 900;\n src:url(/fonts/PlatNomor.woff2) format(\"woff2\"), \n url(/fonts/PlatNomor.woff) format(\"woff\"),\n url(/fonts/PlatNomor.ttf) format(\"truetype\");\n } \n}\n```\n\n*I've tried many urls but none of them worked\n\n\\tailwind.config.js\n\n```\ntheme: {\n fontFamily: {\n 'irsans': ['IRANSans'],\n 'pln': ['PlatNomor']\n },\n```\n\nand the class names I used inside of Vuejs components : `font-irsans` & `font-pln`\n\nSo my questions are:\n\n- Where should I put my font files?\n\n- How do I let tailwind know where my font files are in this project?\n\n========================================\n\nCode:\n```text\n@layer base {\n @font-face {\n font-family: IRANSans;\n font-weight: 900;\n src:url(/fonts/IRANSansWeb_Black.woff2) format(\"woff2\"), \n url(/fonts/IRANSansWeb_Black.woff) format(\"woff\"),\n url(/fonts/IRANSansWeb_Black.ttf) format(\"truetype\");\n }\n \n @font-face {\n font-family: PlatNomor;\n font-weight: 900;\n src:url(/fonts/PlatNomor.woff2) format(\"woff2\"), \n url(/fonts/PlatNomor.woff) format(\"woff\"),\n url(/fonts/PlatNomor.ttf) format(\"truetype\");\n } \n}\n```\n\n```text\ntheme: {\n fontFamily: {\n 'irsans': ['IRANSans'],\n 'pln': ['PlatNomor']\n },\n```\n\n```text\n<style>\n```\n\n```text\nfont-irsans\n```\n\n```text\nfont-pln\n```\n\n```text\nyourproject.com/font/\n```\n\n```text\n.font-irsans\n```\n\n========================================\n\nComments:\n- Thank you so much for answering my question. Can you tell me where I can learn more about Laravel's file systems and other topics related to these type of issues ?\n- Sorry, no. I've never used Laravel.","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":108,"estimatedTokens":641}}890{"id":"stack-68599939","source":"stackoverflow","questionId":68599939,"title":"Make gradient in dark mode `background-image` work with simple background `background-color` in light mode in Tailwind CSS?","tags":["css","tailwind-css"],"text":"Title: Make gradient in dark mode `background-image` work with simple background `background-color` in light mode in Tailwind CSS?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI have a `div` with class `bg-blue-100 text-blue-900 dark:bg-info` where `bg-info` is `linear-gradient(to right, hsla(240, 100%, 50%, 0.2), transparent 50%)`\n\nI get the light mode working fine but `dark:bg-info` doesn't work as it uses `background-image` CSS property rather than `background-color` CSS property for light mode.\n\nHow do I make the dark mode work? There is a conflict between `background-image` in Dark Mode & `background-color` in Light Mode.\n\nHow to solve it?\n\nI've made a Stackblitz demo showing the problem -> https://stackblitz.com/edit/github-6frqvs-tqnsnl?file=pages%2Findex.tsx\n\nOpen in New Window as Tailwind Dark Mode doesn't show side-by-side on Stackblitz.\n\nNotice, how it doesn't show blue gradient on Dark Mode despite the code being:\n\n```\nHello hi\n```\n\n### Edit:\n\nI've managed to make Dark Mode work on Tailwind Play so here's the demo -> https://play.tailwindcss.com/fecClyOaIZ\n\nCheck only the 1st box. 2nd box is a demonstration of how it must really look in Dark Mode.\n\nIn Dark Mode, the 1st box should look like dark blue with a black gradient (see 2nd box)\n\n### Light Mode (1st box looks correct in light mode)\n\n### Dark Mode (1st box looks incorrect in dark mode. Should actually look like 2nd box)\n\n========================================\n\nCode:\n```html\n<div className=\"p-4 m-4 h-20 w-96 bg-red-400 text-red-900 dark:bg-info\">Hello hi</div>\n```\n\n```text\ndiv\n```\n\n```text\nbg-blue-100 text-blue-900 dark:bg-info\n```\n\n```text\nbg-info\n```\n\n```text\nlinear-gradient(to right, hsla(240, 100%, 50%, 0.2), transparent 50%)\n```\n\n```text\ndark:bg-info\n```\n\n```text\nbackground-image\n```\n\n```text\nbackground-color\n```\n\n```text\nbackground-image\n```\n\n```text\nbackground-color\n```\n\n```html\n<div class=\"h-screen m-0 p-0 dark:bg-black\">\n <div class=\"flex flex-col justify-center items-center mx-20 text-center h-full\">\n <div class=\"px-4 py-4 rounded-md bg-pink-100 text-pink-900 dark:bg-info dark:bg-transparent dark:text-white\">This shouldn't look like this in Dark Mode</div>\n <button id=\"toggleDark\" class=\"inline-flex justify-center px-4 py-2 text-sm font-medium mt-8 text-green-900 bg-green-100 border border-transparent rounded-md hover:bg-green-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500\" onclick=\"document.documentElement.classList.toggle('dark');\">Toggle Dark Mode</button>\n <div class=\"px-4 py-4 rounded-md dark:bg-info mt-8 dark:text-white\">It should look like this in Dark Mode</div>\n </div>\n</div>\n```\n\n```text\ndark:bg-transparent\n```\n\n```text\nbackground-color\n```\n\n```text\nbackground-image\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":99,"estimatedTokens":696}}891{"id":"stack-69442515","source":"stackoverflow","questionId":69442515,"title":"React Typescript | How can I enable dark mode using tailwind?","tags":["javascript","typescript","tailwind-css"],"text":"Title: React Typescript | How can I enable dark mode using tailwind?\nTags: javascript, typescript, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI got stuck at enabling dark mode for my react/typescript element.\nI created a Context.Provider to switch light/dark mode for the entire app, but the toggle does not work at all. If anybody knows how to fix it, please help.\n\nThis is the ThemeContext and ContextProvider\n\n```\nimport { createContext, useState, useEffect } from 'react'\n\ntype ThemeName = 'light' | 'dark' | string\ntype ThemeContextType = {\n theme: ThemeName\n setTheme: (name: ThemeName) => void\n}\n\nconst getInitialTheme = () => {\n if (typeof window !== 'undefined' && window.localStorage) {\n const storedPrefs = window.localStorage.getItem('color-theme')\n if (typeof storedPrefs === 'string') {\n return storedPrefs\n }\n\n const userMedia = window.matchMedia('(prefers-color-scheme:dark)')\n if (userMedia.matches) {\n return 'dark'\n }\n }\n // returning default theme here\n return 'light'\n}\n\nexport const ThemeContext = createContext({} as ThemeContextType)\n\nexport const ThemeProvider = ({ initialTheme, children }) => {\n const [theme, setTheme] = useState(getInitialTheme)\n\n const rawSetTheme = theme => {\n//Updated rawSetTheme to theme above//\n const root = window.document.documentElement\n const isDark = theme === 'dark'\n\n root.classList.remove(isDark ? 'light' : 'dark')\n root.classList.add(theme)\n\n localStorage.setItem('color-theme', theme)\n }\n\n if (initialTheme) {\n rawSetTheme(initialTheme)\n }\n\n useEffect(() => {\n rawSetTheme(theme)\n }, [theme])\n\n return {children}\n}\n```\n\nAnd this is the index.tsx.\n\n```\nReactDOM.render(\n \n , document.getElementById('root')\n \n)\n```\n\nAnd this is the Toggle\n\n```\nexport const DarkModeToggle: VFC = memo(() => {\n const { theme, setTheme } = useContext(ThemeContext)\n\n function isDark() {\n return theme === 'dark'\n }\n\n function toggleTheme(e) {\n setTheme(e.target.checked ? 'dark' : 'light')\n }\n return (\n \n \n \n \n \n toggleTheme(e)}\n type='checkbox'\n checked={isDark()}\n className='absolute opacity-0 w-0 h-0'\n />\n \n \n {theme === 'dark' ? 'ON' : 'OFF'}\n \n \n )\n})\n```\n\n**Updated:** I changed the 'rawSetTheme' to 'theme' for variable, but it returns an error\" in App.tsx as below. If you have any suggestions, it would be very appreciated.\n\n```\nProperty 'initialTheme' is missing in type '{ children: Element; }' but required in type '{ initialTheme: any; children: any; }'. TS2741\n\n 7 | export default function App() {\n 8 | return (\n > 9 | \n | ^\n 10 | \n 11 | \n 12 | )\n```\n\n========================================\n\nCode:\n```text\nimport { createContext, useState, useEffect } from 'react'\n\ntype ThemeName = 'light' | 'dark' | string\ntype ThemeContextType = {\n theme: ThemeName\n setTheme: (name: ThemeName) => void\n}\n\nconst getInitialTheme = () => {\n if (typeof window !== 'undefined' && window.localStorage) {\n const storedPrefs = window.localStorage.getItem('color-theme')\n if (typeof storedPrefs === 'string') {\n return storedPrefs\n }\n\n const userMedia = window.matchMedia('(prefers-color-scheme:dark)')\n if (userMedia.matches) {\n return 'dark'\n }\n }\n // returning default theme here\n return 'light'\n}\n\nexport const ThemeContext = createContext<ThemeContextType>({} as ThemeContextType)\n\nexport const ThemeProvider = ({ initialTheme, children }) => {\n const [theme, setTheme] = useState(getInitialTheme)\n\n\n const rawSetTheme = theme => {\n//Updated rawSetTheme to theme above//\n const root = window.document.documentElement\n const isDark = theme === 'dark'\n\n root.classList.remove(isDark ? 'light' : 'dark')\n root.classList.add(theme)\n\n localStorage.setItem('color-theme', theme)\n }\n\n if (initialTheme) {\n rawSetTheme(initialTheme)\n }\n\n useEffect(() => {\n rawSetTheme(theme)\n }, [theme])\n\n return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>\n}\n```\n\n```text\nReactDOM.render(\n <ThemeProvider>\n <App />, document.getElementById('root')\n </ThemeProvider>\n)\n```\n\n```text\nexport const DarkModeToggle: VFC<Props> = memo(() => {\n const { theme, setTheme } = useContext(ThemeContext)\n\n function isDark() {\n return theme === 'dark'\n }\n\n function toggleTheme(e) {\n setTheme(e.target.checked ? 'dark' : 'light')\n }\n return (\n <div className='flex flex-col'>\n <label htmlFor='unchecked' className='mt-3 inline-flex items-center cursor-pointer'>\n <span className='relative'>\n <span className='block w-10 h-6 bg-gray-200 rounded-full shadow-inner'></span>\n <span\n className={`${\n theme === 'dark' ? 'bg-indigo-400 transform translate-x-full' : 'bg-white'\n } absolute block w-4 h-4 mt-1 ml-1 rounded-full shadow inset-y-0 left-0 focus-within:shadow-outline transition-transform duration-300 ease-in-out`}\n >\n <input\n id='darkmode'\n onClick={e => toggleTheme(e)}\n type='checkbox'\n checked={isDark()}\n className='absolute opacity-0 w-0 h-0'\n />\n </span>\n </span>\n <span className='ml-3 text-sm'>{theme === 'dark' ? 'ON' : 'OFF'}</span>\n </label>\n </div>\n )\n})\n```\n\n```text\nProperty 'initialTheme' is missing in type '{ children: Element; }' but required in type '{ initialTheme: any; children: any; }'. TS2741\n\n 7 | export default function App() {\n 8 | return (\n > 9 | <ThemeProvider>\n | ^\n 10 | <Router />\n 11 | </ThemeProvider>\n 12 | )\n```\n\n```text\nexport const DarkModeToggle: VFC<Props> = memo(() => {\n const { theme, setTheme } = useContext(ThemeContext)\n \n return (\n\n <div className='flex flex-col'>\n <label className='mt-3 inline-flex items-center cursor-pointer'>\n <span className='relative'>\n <span className='block w-10 h-6 bg-gray-200 rounded-full shadow-inner'></span>\n <span\n className={`${\n theme === 'dark' ? 'bg-indigo-400 transform translate-x-full' : 'bg-white'\n } absolute block w-4 h-4 mt-1 ml-1 rounded-full shadow inset-y-0 left-0 focus-within:shadow-outline transition-transform duration-300 ease-in-out`}\n >\n <input onClick={()=>setTheme(theme==='dark'?'light':'dark')} className='absolute opacity-0 w-0 h-0' />\n </span>\n </span>\n <span className='ml-3 text-sm'>{theme === 'dark' ? 'ON' : 'OFF'}</span>\n </label>\n </div>\n )\n})\n```\n\n========================================\n\nComments:\n- What's the CSS you have to apply this theme?\n- Assuming `rawSetTheme` is hit every time and the class values changes on the HTML tag and local storage.\n- Here is the index.css (omitted excess for characters limit) :root { @apply light; } .dark { --color-bg-primary: #1F2937; } .light { --color-bg-primary: #F3F4F6; }\n- Why do you have sass in css file?\n- This is tailwind. I added dark/light color scheme so I can switch. darkMode: 'class', theme: { extend: { backgroundColor: { primary: 'var(--color-bg-primary)', secondary: 'var(--color-bg-secondary)', }, textColor: { accent: 'var(--color-text-accent)', primary: 'var(--color-text-primary)', secondary: 'var(--color-text-secondary)', },```\n- But the css file can't handle these SASS file content. Not sure how this will work for you.\n- It works ok on my end. So I assumed the problem is related to the context or typescript area, i guess...\n- Let us continue this discussion in chat.","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":270,"estimatedTokens":1866}}892{"id":"stack-62435734","source":"stackoverflow","questionId":62435734,"title":"Tailwind CSS Doesn't Display In Production On Google Cloud Platform","tags":["google-cloud-platform","ruby-on-rails-6","tailwind-css"],"text":"Title: Tailwind CSS Doesn't Display In Production On Google Cloud Platform\nTags: google-cloud-platform, ruby-on-rails-6, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI integrated Tailwind CSS into my Rails 6 App. The CSS is displayed fine in development but that isn't the case in production.\n\nThis is how my `application.html.erb` looks like;\n\n```\n\n \n HomePetVet\n \n \n \n \n \n \n \n \n \n \n \n toastr['']('');\n \n \n \n \n \n \n\n```\n\nThis is my `webpacker.yml` file;\n\n```\nproduction:\n I seet `extract_css` to `true` in `webpacker.yml`\n\nThis is my `package.json` file;\n\n```\n{\n \"name\": \"MyProject\",\n \"private\": true,\n \"dependencies\": {\n \"tailwindcss\": \"^1.4.6\",\n \"toastr\": \"^2.1.4\",\n \"turbolinks\": \"^5.2.0\",\n \"yarn\": \"^1.22.4\"\n },\n \"version\": \"0.1.0\",\n \"devDependencies\": {\n \"webpack-dev-server\": \"^3.10.3\"\n }\n}\n```\n\nYou can observe that `tailwindcss` is not under `devDependencies`.\nBefore deploying to `gcp` by `gcloud app deploy` I do `RAILS_ENV=production rails assets:precompile` but the `tailwind css` is still not showing in production.\n\nI followed this to deploy my Rails 6 App to GCP.\n\nThis is my `app.yaml` file:\n\n```\nentrypoint: bundle exec rails server Puma -p $PORT\nruntime: ruby\nenv: flex\n\nmanual_scaling:\n instances: 1\nresources:\n cpu: 1\n memory_gb: 0.5\n disk_size_gb: 10\n```\n\nNotice `entrypoint: bundle exec rails server Puma -p $PORT` in `app.yaml`. The one from the guide is `entrypoint: bundle exec rackup --port $PORT`\n\nI don't know if this makes a difference but I wanted to mention it.\n\nWhere could I be going wrong?\n\n========================================\n\nCode:\n```text\n<!DOCTYPE html>\n<html>\n <head>\n <title>HomePetVet</title>\n <%= csrf_meta_tags %>\n <%= csp_meta_tag %>\n <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>\n <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>\n <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>\n </head>\n <body>\n <% unless flash.empty? %>\n <script type=\"text/javascript\">\n <% flash.each do |f| %>\n <% type = f[0].to_s.gsub('alert', 'error').gsub('notice', 'info') %>\n toastr['<%= type %>']('<%= f[1] %>');\n <% end %>\n </script>\n <% end %>\n <%= yield %>\n <%= javascript_pack_tag 'sb-admin-2', 'data-turbolinks-track': 'reload' %>\n </body>\n</html>\n```\n\n```text\nproduction:\n <<: *default\n\n # Production depends on precompilation of packs prior to booting for performance.\n compile: false\n\n # Extract and emit a css file\n extract_css: true\n\n # Cache manifest.json for performance\n cache_manifest: true\n```\n\n```text\n{\n \"name\": \"MyProject\",\n \"private\": true,\n \"dependencies\": {\n \"tailwindcss\": \"^1.4.6\",\n \"toastr\": \"^2.1.4\",\n \"turbolinks\": \"^5.2.0\",\n \"yarn\": \"^1.22.4\"\n },\n \"version\": \"0.1.0\",\n \"devDependencies\": {\n \"webpack-dev-server\": \"^3.10.3\"\n }\n}\n```\n\n```text\nentrypoint: bundle exec rails server Puma -p $PORT\nruntime: ruby\nenv: flex\n\nmanual_scaling:\n instances: 1\nresources:\n cpu: 1\n memory_gb: 0.5\n disk_size_gb: 10\n```\n\n```text\napplication.html.erb\n```\n\n```text\nwebpacker.yml\n```\n\n```text\nextract_css\n```\n\n```text\ntrue\n```\n\n```text\nwebpacker.yml\n```\n\n```text\npackage.json\n```\n\n```text\ntailwindcss\n```\n\n```text\ndevDependencies\n```\n\n```text\ngcp\n```\n\n```text\ngcloud app deploy\n```\n\n```text\nRAILS_ENV=production rails assets:precompile\n```\n\n```text\ntailwind css\n```\n\n```text\napp.yaml\n```\n\n```text\nentrypoint: bundle exec rails server Puma -p $PORT\n```\n\n```text\napp.yaml\n```\n\n```text\nentrypoint: bundle exec rackup --port $PORT\n```\n\n```text\nlet environment = {\n plugins: [\n require('autoprefixer'), #added this\n require('tailwindcss')('./app/javascript/stylesheets/tailwind.config.js'),\n require('postcss-import'),\n require('postcss-flexbugs-fixes'),\n require('postcss-preset-env')({\n autoprefixer: {\n flexbox: 'no-2009'\n },\n stage: 3\n })\n ]\n};\nmodule.exports = environment;\n```\n\n```text\npostcss.config.js\n```\n\n```text\nrequire('autoprefixer')\n```\n\n```text\nTailwind CSS\n```\n\n========================================\n\nComments:\n- Would you be able to describe more information regarding the deployment into your production environment? What GCP documentation was followed? I would like to invite you to post the issue onto the Public Issue Tracker to provide more details regarding your issue.\n- @JanL I have updated the question with the link to the guide I followed. Thanks!\n- I'm not sure how general this solution is, as I have a new RoR project with the tailwindcss-rails gem, yet I have no postcss.config.js file.\n- @LelandReardon, it has been a while since I've worked with the Google Cloud Platform. However, consider the Rails version you're using. There is now official tailwind CSS support for Rails v7+: tailwindcss.com/docs/guides/ruby-on-rails","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":24,"totalLines":259,"estimatedTokens":1227}}893{"id":"stack-72844286","source":"stackoverflow","questionId":72844286,"title":"Why next.js duplicates styles?","tags":["reactjs","next.js","tailwind-css","postcss"],"text":"Title: Why next.js duplicates styles?\nTags: reactjs, next.js, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI have a next.js project. For styling I am using tailwind, scss modules and postcss. I have no overridden webpack configurations.\n\nIn development mode next.js injects styles in tags as expected, but in production it injects similar styles as *.css chunks and tag at the same time.\n\nNext.js style duplication\n\n========================================\n\nTop Answer:\n**Fixed issues related to multiple instances, duplication css, and out-of-order occurrences on Next.js version 14.**\n\n```\nModified the following files:\n- `pages/_app.js`\n- `pages/index.js`\n- `styles/pages/_home.scss`\n- `style/main.scss`\n\n**pages/_app.js**\n\nimport Header from '@/app/components/Header';\nimport Footer from '@/app/components/Footer';\n\nfunction MyApp({ Component, pageProps }) {\n return (\n ``\n )\n}\nexport default MyApp;\n\n**pages/index.js**\n\nimport React from 'react'\nimport \"../styles/sass/pages/_home.scss\"\n\nfunction index() {\n return (\n <>`\n\n### home\n\n`\n )\n}\n\nexport default index\n\n**style/main.scss**\n\n// Bootstrap Default components\n@import \"~bootstrap/scss/functions\";\n@import \"~bootstrap/scss/variables\";\n@import \"~bootstrap/scss/variables-dark\";\n@import \"~bootstrap/scss/mixins\";\n\n// Project's custom variables or mixin if required\n@import \"sections/fonts\";\n@import \"variables\";\n@import \"functions\";\n@import \"mixins\";\n@import \"custom\";\n\n// Project core common styles\n@import \"layout\";\n```\n\nChanges made:\n\n```\n1. `pages/_app.js`:\n - Corrected imports for `Header` and `Footer` components to use relative paths (`@/app/components/Header` and `@/app/components/Footer` respectively).\n\n2. `pages/index.js`:\n - Imported the homepage component with the correct path (`\"../styles/sass/pages/_home.scss\"`) for styling.\n\n3. `styles/pages/_home.scss`:\n - Ensured proper imports of `main.scss` and `reactSelect` in the homepage styles.\n - Updated styles for the `.banner` section to maintain consistency and compatibility with other components.\n\n4. `style/main.scss`:\n - Checked compatibility with Next.js 14 by verifying imports and usage of Bootstrap and project-specific styles.\n - Verified that custom variables, mixins, and common styles are appropriately imported and utilized.\n\nThese changes aim to address compatibility issues with Next.js 14 and ensure consistency and correctness across the project files.\n\n[Screen Recording 4-3-2024 at 10.36 AM.webm](https://github.com/vercel/next.js/assets/77716923/a57c1376-a5d4-4012-8f27-2206dcb4bdc0)\n```\n\n========================================\n\nCode:\n```text\noptimizeCss\n```\n\n```text\nModified the following files:\n- `pages/_app.js`\n- `pages/index.js`\n- `styles/pages/_home.scss`\n- `style/main.scss`\n\n**pages/_app.js**\n\nimport Header from '@/app/components/Header';\nimport Footer from '@/app/components/Footer';\n\nfunction MyApp({ Component, pageProps }) {\n return (\n `<Component {...pageProps} />`\n )\n}\nexport default MyApp;\n\n**pages/index.js**\n\nimport React from 'react'\nimport \"../styles/sass/pages/_home.scss\"\n\nfunction index() {\n return (\n <>`<h1>home</h1>`</>\n )\n}\n\nexport default index\n\n\n**style/main.scss**\n\n// Bootstrap Default components\n@import \"~bootstrap/scss/functions\";\n@import \"~bootstrap/scss/variables\";\n@import \"~bootstrap/scss/variables-dark\";\n@import \"~bootstrap/scss/mixins\";\n\n// Project's custom variables or mixin if required\n@import \"sections/fonts\";\n@import \"variables\";\n@import \"functions\";\n@import \"mixins\";\n@import \"custom\";\n\n// Project core common styles\n@import \"layout\";\n```\n\n```text\n1. `pages/_app.js`:\n - Corrected imports for `Header` and `Footer` components to use relative paths (`@/app/components/Header` and `@/app/components/Footer` respectively).\n\n2. `pages/index.js`:\n - Imported the homepage component with the correct path (`\"../styles/sass/pages/_home.scss\"`) for styling.\n\n3. `styles/pages/_home.scss`:\n - Ensured proper imports of `main.scss` and `reactSelect` in the homepage styles.\n - Updated styles for the `.banner` section to maintain consistency and compatibility with other components.\n\n4. `style/main.scss`:\n - Checked compatibility with Next.js 14 by verifying imports and usage of Bootstrap and project-specific styles.\n - Verified that custom variables, mixins, and common styles are appropriately imported and utilized.\n\nThese changes aim to address compatibility issues with Next.js 14 and ensure consistency and correctness across the project files.\n\n[Screen Recording 4-3-2024 at 10.36 AM.webm](https://github.com/vercel/next.js/assets/77716923/a57c1376-a5d4-4012-8f27-2206dcb4bdc0)\n```\n\n========================================\n\nComments:\n- Hey, i'm just curious are you not using: `@tailwind base; @tailwind components; @tailwind utilities;` twice right?\n- @AhmadShiddiq I have `@import 'tailwindcss/utilities';` in several scss files because I need to use @layer utilities inside them\n- @AhmadShiddiq Just removed it but no effect.\n- Probably same situation: github issue 1 and github issue 2\n- @Enfield li I think not. I haven't similar components imported in _app.js and page both\n- Could you provide a minimal reproducible example?\n- Yes, that was an issue","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":3,"totalLines":182,"estimatedTokens":1302}}894{"id":"stack-71789467","source":"stackoverflow","questionId":71789467,"title":"How Can I turn in VSCode TailwindCSS Intellisense tips in dictionaries with specific names?","tags":["dictionary","visual-studio-code","styles","intellisense","tailwind-css"],"text":"Title: How Can I turn in VSCode TailwindCSS Intellisense tips in dictionaries with specific names?\nTags: dictionary, visual-studio-code, styles, intellisense, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI store my Tailwind classes in reactapp in dictionaries:\n\n```\nconst styles = {\nwrapper: \"overflow-hidden pb-8 bg-red-50\"\n...\n}\n```\n\nI want to have Intellisense tips there, which by default - doesn't work here.\nI found the solution in TailwindCSS Intellisense extension settings:\n\n```\n\"tailwindCSS.classAttributes\": [\n \"\"\n ]\n```\n\nThe setting `\"\"` make that Intellisense tips show inside strings in my `styles` dictionary BUT they also appear in every other string in every other dictionary ;_;\n\nIs it possible to set showing TailwindCss Intellisense tips only in dictionaries with specific names?\n\n========================================\n\nCode:\n```js\nconst styles = {\nwrapper: \"overflow-hidden pb-8 bg-red-50\"\n...\n}\n```\n\n```json\n\"tailwindCSS.classAttributes\": [\n \"\"\n ]\n```\n\n```text\n\"\"\n```\n\n```text\nstyles\n```\n\n```json\n\"tailwindCSS.classAttributes\": [\n \"styles\"\n ]\n```\n\n```text\nstyles\n```","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":60,"estimatedTokens":276}}895{"id":"stack-77065593","source":"stackoverflow","questionId":77065593,"title":"How to target a child input's placeholder in Tailwind CSS?","tags":["css","tailwind-css"],"text":"Title: How to target a child input's placeholder in Tailwind CSS?\nTags: css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm currently working on a project and I'm trying to convert a CSS style that targets the `::placeholder` pseudo-element into Tailwind CSS, but I'm facing some challenges. Here's the CSS code I'm trying to convert:\n\n```\n//CSS Code \n\ninput::Placeholder{}\n```\n\nIn Tailwind CSS, I'm familiar with how to select child elements using [&>(Child Element)]. However, I'm unsure about how to target pseudo-elements like ::placeholder in Tailwind CSS.\n\nAs i am thinking `[&>input]:placeholder:(target)` ?\n\nCould someone please assist me in converting the ::placeholder selector into Tailwind CSS classes? I would greatly appreciate any guidance or suggestions on how to achieve the same styling for ::placeholder using Tailwind. Thank you!\n\nI attempted to convert the CSS ::placeholder into Tailwind CSS, seeking a specific Tailwind solution for styling input placeholders effectively.\n\n========================================\n\nTop Answer:\nIn Tailwind CSS, there isn't a direct class for targeting the ::placeholder pseudo-element like you would in traditional CSS. However, you can achieve similar styling effects for input placeholders by using utility classes to style the input element itself.\n\nHere's how you can style input placeholders effectively using Tailwind CSS:\n\n```\n\n```\n\n========================================\n\nCode:\n```text\n//CSS Code \n\ninput::Placeholder{}\n```\n\n```text\n::placeholder\n```\n\n```text\n[&>input]:placeholder:(target)\n```\n\n```text\n<input\n class=\"border border-gray-300 py-2 px-3 rounded-md placeholder-gray-400 text-gray-700 focus:outline-none focus:ring focus:border-blue-500\"\n type=\"text\"\n placeholder=\"Enter your text here\"\n>\n```\n\n========================================\n\nComments:\n- this already works: `[&>input]:placeholder:text-red-500`","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":1,"totalCodeBlocksIncluded":4,"totalLines":61,"estimatedTokens":473}}896{"id":"stack-67852879","source":"stackoverflow","questionId":67852879,"title":"Tailwind breakpoints not working with Next.js SSG","tags":["reactjs","next.js","css-grid","tailwind-css","postcss"],"text":"Title: Tailwind breakpoints not working with Next.js SSG\nTags: reactjs, next.js, css-grid, tailwind-css, postcss\nSource: Stack Overflow\n\nQuestion:\nI have a `/latest` page in my `pages` directory which displays all the latest posts. But my Tailwind classes (`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4`) don't want to work. Here is a side by side comparison of the issue I'm having:\n\nLocal Version\nProduction Version\n\nhttps://i.sstatic.net/9ajfc.png\nhttps://i.sstatic.net/gelYp.png\n\nMy component looks like this (`./pages/latest.tsx`):\n\n```\nconst Latest: React.FC = ({}) => {\n const { t } = useTranslation('latest')\n const { data, loading } = useFindLatestQuery()\n\n return (\n <>\n \n \n \n \n \n\n### {t('recent')}\n\n \n {!loading && data?.posts?.length > 0 ? (\n \n {[...data.posts].map((post, index) => (\n \n ))}\n \n ) : (\n Loading...\n\n )}\n \n \n \n )\n}\n```\n\nHere's a link to the production CSS generated by Tailwind, and you'll see that there's nothing related to `grid`. Here's also a link to that build.\n\nTailwind Config:\n\n```\nmodule.exports = {\n // mode: 'jit',\n purge: [\n './components/**/*.{js,jsx,ts,tsx}',\n './pages/**/*.{js,jsx,ts,tsx}',\n './icons/**/*.{js,jsx,ts,tsx}',\n ],\n darkMode: 'class', // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n========================================\n\nCode:\n```js\nconst Latest: React.FC<LatestProps> = ({}) => {\n const { t } = useTranslation('latest')\n const { data, loading } = useFindLatestQuery()\n\n return (\n <>\n <Navigation />\n <DefaultWrapper>\n <div className=\"w-full\">\n <div className=\"w-full flex justify-center\">\n <h1>{t('recent')}</h1>\n </div>\n {!loading && data?.posts?.length > 0 ? (\n <div className=\"mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4\">\n {[...data.posts].map((post, index) => (\n <SearchedPost key={index} post={post as unknown as Post} />\n ))}\n </div>\n ) : (\n <p>Loading...</p>\n )}\n </div>\n </DefaultWrapper>\n </>\n )\n}\n```\n\n```js\nmodule.exports = {\n // mode: 'jit',\n purge: [\n './components/**/*.{js,jsx,ts,tsx}',\n './pages/**/*.{js,jsx,ts,tsx}',\n './icons/**/*.{js,jsx,ts,tsx}',\n ],\n darkMode: 'class', // or 'media' or 'class'\n theme: {\n extend: {},\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n```\n\n```text\n/latest\n```\n\n```text\npages\n```\n\n```text\ngrid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4\n```\n\n```text\n./pages/latest.tsx\n```\n\n```text\ngrid\n```\n\n```text\n./pages/latest.tsx\n```\n\n```text\n./pages/latest.tsx\n```\n\n========================================\n\nComments:\n- In your production css there is no grid class, double check your tailwind setup.\n- @herbie vine did you figure out why? I am having similar issue, some of the breakpoints are not working.\n- am looking at what I did. it's been a while so need to look at my cryptic programming again haha\n- @avepr hope this helps you out","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":157,"estimatedTokens":767}}897{"id":"stack-68071338","source":"stackoverflow","questionId":68071338,"title":"how to import tailwind inside 'createGlobalStyle'","tags":["next.js","styled-components","tailwind-css","tailwind-in-js"],"text":"Title: how to import tailwind inside 'createGlobalStyle'\nTags: next.js, styled-components, tailwind-css, tailwind-in-js\nSource: Stack Overflow\n\nQuestion:\nI'm trying to import tailwind inside my styled components globalstyle, to set base styles.\n\nCode below doesn't work, so any suggestions on how to make it work?\n\n```\nimport {createGlobalStyle} from 'styled-components';\n\nconst GlobalStyle = createGlobalStyle`\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n \n @layer base {\n h1 {\n @apply text-2xl;\n }\n h2 {\n @apply text-xl;\n }\n }\n`\n```\n\n========================================\n\nCode:\n```text\nimport {createGlobalStyle} from 'styled-components';\n\n\nconst GlobalStyle = createGlobalStyle`\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n \n @layer base {\n h1 {\n @apply text-2xl;\n }\n h2 {\n @apply text-xl;\n }\n }\n`\n```\n\n```text\n// src/styles/GlobalStyles.js\nimport React from 'react'\nimport { createGlobalStyle } from 'styled-components'\nimport tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro'\n\nconst CustomStyles = createGlobalStyle`\n body {\n -webkit-tap-highlight-color: ${theme`colors.purple.500`};\n ${tw`antialiased`}\n }\n`\n\nconst GlobalStyles = () => (\n <>\n <BaseStyles />\n <CustomStyles />\n </>\n)\n\nexport default GlobalStyles\n```\n\n```text\n// babel-plugin-macros.config.js\nmodule.exports = {\n twin: {\n preset: 'styled-components',\n },\n}\n```\n\n========================================\n\nComments:\n- Unfortunately this library only works with projects that use Babel. As of today, SWC isn't supported.","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":87,"estimatedTokens":397}}898{"id":"stack-77494345","source":"stackoverflow","questionId":77494345,"title":"Tailwind CSS doesn't work with Material UI in Next 14.0.2","tags":["typescript","next.js","material-ui","tailwind-css"],"text":"Title: Tailwind CSS doesn't work with Material UI in Next 14.0.2\nTags: typescript, next.js, material-ui, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nI'm using Next 14.0.2 with Material UI and Tailwind CSS for the Frontend development.\nCurrently I'm facing some issues with styling components.\nI set the button to navigate to the sign up form using Link(next/link) component.\n\nhttps://i.sstatic.net/IOEEj.png\n\nhttps://i.sstatic.net/xLTR2.png\n\n```\n\n Register\n\n```\n\nWhen I click the button, it is navigated to Register page. But when I navigate using Link, the Register page doesn't compile all Tailwind CSS styles specially margin styles like my-2, mx-4 and so on. Here you can take a look at the 1st screenshot attached.\nBut when I go to Register page directly by specifying page URL on the browser or refresh the page after it is navigated, it worked as the 2nd screenshot shows.\n\nIt should also work when I navigate to the register page by clicking Link component, not only directly going to the page URL. Here is some of my code for the register page.\n\n```\n\n \n\n```\n\nAnd this is my tailwind.config.ts file\n\n```\nimport type { Config } from \"tailwindcss\";\n\nconst config: Config = {\n content: [\n \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/client/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n extend: {\n backgroundImage: {\n \"gradient-radial\": \"radial-gradient(var(--tw-gradient-stops))\",\n \"gradient-conic\":\n \"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))\",\n },\n },\n },\n plugins: [],\n};\n\nexport default config;\n```\n\nI've shared the CodeSandbox link for the better understanding.\nhttps://codesandbox.io/p/sandbox/relaxed-jang-5vhkd4\n\nWould like to get help with this issue encountered.\n\n========================================\n\nCode:\n```text\n<Link\n href={\"/user/register\"}\n className=\"transition-all text-gray-200 hover:text-white\"\n>\n Register\n</Link>\n```\n\n```text\n<TextField\n label=\"First Name\"\n variant=\"outlined\"\n className=\"w-full md:w-44 my-2\"\n {...register(\"firstName\")}\n error={errors.firstName ? true : false}\n helperText={errors.firstName?.message}\n />\n\n <TextField\n label=\"Middle Name\"\n variant=\"outlined\"\n className=\"w-full md:w-40 md:mx-4 my-2\"\n {...register(\"middleName\")}\n error={errors.middleName ? true : false}\n helperText={errors.middleName?.message}\n/>\n\n<TextField\n label=\"Last Name\"\n variant=\"outlined\"\n className=\"w-full md:w-44 my-2\"\n {...register(\"lastName\")}\n error={errors.lastName ? true : false}\n helperText={errors.lastName?.message}\n/>\n```\n\n```text\nimport type { Config } from \"tailwindcss\";\n\nconst config: Config = {\n content: [\n \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/client/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n extend: {\n backgroundImage: {\n \"gradient-radial\": \"radial-gradient(var(--tw-gradient-stops))\",\n \"gradient-conic\":\n \"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))\",\n },\n },\n },\n plugins: [],\n};\n\nexport default config;\n```\n\n```text\n<StyledEngineProvider injectFirst>{children}</StyledEngineProvider>\n```\n\n========================================\n\nComments:\n- Could you a CodePen (or similar)? So you can more easily demonstrate the problem (screenshots are fine, but it's important to be able to replicate in an easily shareable format)\n- Sure, codesandbox.io/p/sandbox/relaxed-jang-5vhkd4","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":133,"estimatedTokens":839}}899{"id":"stack-70480091","source":"stackoverflow","questionId":70480091,"title":"Nx workspace - Shared lib with tailwindcss and react","tags":["reactjs","tailwind-css","monorepo","nomachine-nx"],"text":"Title: Nx workspace - Shared lib with tailwindcss and react\nTags: reactjs, tailwind-css, monorepo, nomachine-nx\nSource: Stack Overflow\n\nQuestion:\nI struggled in setting this up, so I thought I would my Knowledge.\n\nBasically, I wanted to have a UI Kit / Component library with NX that could be shared with for example a webapp with react and a website built with Next.js.\n\nI ran into this error:\n\n```\nFailed to compile\n../../libs/shared-ui/src/lib/shared-ui.module.css\nCssSyntaxError\n\n([object Object]:[object Object]) Selector \"*,\n::before,\n::after\" is not pure (pure selectors must contain at least one local class or id)\n```\n\n[...]This is because you are trying to put Tailwind’s base styles in a CSS module, and CSS modules can’t contain those types of rules. This is just how CSS modules work, you shouldn’t put Tailwind’s base styles in a module, the two concepts are just not compatible. [...]\n\nhttps://github.com/tailwindlabs/tailwindcss/issues/6717#issuecomment-1000805774\n\n========================================\n\nCode:\n```text\nFailed to compile\n../../libs/shared-ui/src/lib/shared-ui.module.css\nCssSyntaxError\n\n([object Object]:[object Object]) Selector \"*,\n::before,\n::after\" is not pure (pure selectors must contain at least one local class or id)\n```\n\n========================================\n\nComments:\n- The repository doesn't exist anymore.\n- I was able to fix it using this answer. Remove the css import from your shared library index.js and import the css from your own App.js in the consuming project. I was using storybook in the shared lib, so I had to add the css import to preview.js there.","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":43,"estimatedTokens":404}}900{"id":"stack-61621892","source":"stackoverflow","questionId":61621892,"title":"Tailwind Flex: Overflow when a long line of text is shown","tags":["html","css","tailwind-css"],"text":"Title: Tailwind Flex: Overflow when a long line of text is shown\nTags: html, css, tailwind-css\nSource: Stack Overflow\n\nQuestion:\nThis is a very strange behavior I'm getting from Flex classes in tailwind. I guess you can somehow translate it to CSS but I want to stay in a tailwind solution. Let me explain:\n\nIf you run the following code snippet, you will see that in the first case, the line overflows, even if I try with the `break-words` class. That doesn't happen with `break-all` class, but I don't wan't to use that class as it could breaks words. \n\nWhen you output some normal text, it behaves as you expect.\n\nIs this an issue? Am I being perfectionist? \n\nThanks!\n\n\r\n\r\n\n```\n\r\n\r\n\r\n\r\n \r\n Short\r\n \r\n \r\n asuperultraloooooooooonglineoftexoverhereitfeelslikeitdoesnotendddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd\r\n \r\n\r\n\r\n\r\n\r\n \r\n Short\r\n \r\n \r\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem\r\n \r\n\n```\n\n========================================\n\nCode:\n```html\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n<!-- My problem. It should break the line and avoid the overflow-->\n<div class=\"flex bg-gray-200\">\n <div class=\"flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2\">\n Short\n </div>\n <div class=\"flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 break-words\">\n asuperultraloooooooooonglineoftexoverhereitfeelslikeitdoesnotendddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd\n </div>\n</div>\n\n<!-- When words are smaller it behaves just fine! -->\n<div class=\"flex bg-gray-200\">\n <div class=\"flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2\">\n Short\n </div>\n <div class=\"flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 break-words\">\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem\n </div>\n</div>\n```\n\n```text\nbreak-words\n```\n\n```text\nbreak-all\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n<!-- My problem. It should break the line and avoid the overflow-->\n<div class=\"flex bg-gray-200\">\n <div class=\"flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2\">\n Short\n </div>\n <div class=\"flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 break-words overflow-hidden\">\n asuperultraloooooooooonglineoftexoverhereitfeelslikeitdoesnotendddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd\n </div>\n</div>\n\n<!-- When words are smaller it behaves just fine! -->\n<div class=\"flex bg-gray-200\">\n <div class=\"flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2\">\n Short\n </div>\n <div class=\"flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 break-words\">\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem\n </div>\n</div>\n```\n\n```html\n<link href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\" rel=\"stylesheet\">\n\n<!-- My problem. It should break the line and avoid the overflow-->\n<div class=\"flex bg-gray-200\">\n <div class=\"flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2\">\n Short\n </div>\n <div class=\"w-64 flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 break-words\">\n asuperultraloooooooooonglineoftexoverhereitfeelslikeitdoesnotendddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd\n </div>\n</div>\n\n<!-- When words are smaller it behaves just fine! -->\n<div class=\"flex bg-gray-200\">\n <div class=\"flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2\">\n Short\n </div>\n <div class=\"flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 break-words\">\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem\n </div>\n</div>\n```\n\n========================================\n\nComments:\n- Well I have OCD too. Things like these make me go crazy.\n- @ManojKumar haha it's not about OCD. It feels like a toy, and some users might think that they have broken the app.","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":130,"estimatedTokens":1093}}901{"id":"stack-75291338","source":"stackoverflow","questionId":75291338,"title":"Applying x-transition on x-bind alpinejs","tags":["javascript","html","tailwind-css","alpine.js"],"text":"Title: Applying x-transition on x-bind alpinejs\nTags: javascript, html, tailwind-css, alpine.js\nSource: Stack Overflow\n\nQuestion:\nI did a little snippet where the image changes when you hover over it using x-bind, the change is very prompt so I wanted to add some transitions to it but it's not working. It seems x-transition might only work with x-show.\n\n```\n\n \n \n```\n\n========================================\n\nCode:\n```text\n<div x-data=\"{image : 0}\" class=\"h-3/5 mb-2 \" >\n <img class=\"h-full m-auto\" x-bind:src=\"`/src/variants/${image}.jpg`\" alt=\"\" x-on:mousemove=\"image = 1\" x-on:mouseout=\"image = 0\" x-transition>\n </div>\n```\n\n```html\n<script src=\"//unpkg.com/alpinejs\" defer></script>\n\n<div x-data=\"{hover : false}\" class=\"h-3/5 mb-2\" @mouseleave=\"hover=false\">\n <div @mouseover=\"hover = true\">\n <img x-show=\"hover\" class=\"h-full m-auto\" src=\"https://picsum.photos/id/237/200/300\" alt=\"\" x-transition>\n <img x-show=\"!hover\" class=\"h-full m-auto\" src=\"https://picsum.photos/id/238/200/300\" alt=\"\" x-transition>\n </div>\n</div>\n```\n\n========================================\n\nComments:\n- Can you edit your question to include some example code of what you're suggesting?","metadata":{"transformedAt":"2026-08-18T18:33:42.953Z","totalAnswersIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":37,"estimatedTokens":296}}902