Tailwindcss: fixed/sticky footer on the bottom

I use tailwindCSS and confront a problem with make footer. base.html <body> {% include "partials/nav.html" %} {% block content %} {% endblock %} {% include...

How do I get tailwinds active breakpoint in JavaScript?

I am building tailwind with config file and including it in a react project. I would like to get the active breakpoint value in javascript/React. How can I achieve the same.? <div class="block ...

Transform for child element by parent element tailwind

I want transform child element rotate if parent element have class open. Example in css ul li.open > a > .sidebar-collapse-icon { -webkit-transform: rotate(-180deg); -ms-transform:...

Can you change the base font-family in Tailwind config?

I’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'...

Disable Tailwind on a div or component

Is 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.

Some classes have no effect after adding Tailwind.css to a Vue.js project

I am trying to add Tailwind.css to a Vue.js project. There are a lot of resources on how to do this, most of them following the same path as this video. To make sure I was in the same conditions...

Tailwindcss not working with next.js; what is wrong with the configuration?

For some reason tailwind is not rendering properly in next.js. I'm wondering if something is wrong with my settings? Styles folder - tailwind.css @tailwind base; /* Write your own custom base...

Tailwindcss error when trying to build css

trying to learn tailwind but when I try to build the CSS I keep getting errors. I've followed multiple videos and every time I run into this error. this is the error that I keep getting. $ npm...

Tailwindcss does not work in Vue.js when all process of intergration has been done?

i installed tailwindcss into a vuejs SPA did all the setup create a assets/css/tailwind.css and added the necessary base styles imported it in the main.js file create a postcss.config.js file and...

Next Image not taking class properties

I am using Next.js and next/image to display images, but the CSS is not working inside it. The image is in SVG format and I have placed it in the public folder. I am using Tailwind CSS along with...

Cant' build Tailwind CSS

So I'm trying out Taiwlwind CSS for the first time and I'm following a tutorial. I'm sure I've followed the tutorial to the tee and we haven't even gotten anywhere and I can't seem to build, I...

Some of the tailwind classes doesn't apply

I am using Tailwind in my Next.js application and it sometimes behaves strangely. I could get 99% of the classes work but in some occasions classes doesn't apply at all. Just to give an example,...

Tailwindcss @apply directive doesn't work inside vue component

I create a laravel application with jetstream and inertia-vue stack for my new project problem is Tailwindcs version 2 using postCss and it doesn't support @apply directive inside vue components...

Using Tailwind flex items not able to center

I've 3 flex items which I want to place similar to instagram login page ( 1st row - image, login form ) and ( 2nd row - footer ) I've below code <div className='container mx-auto px-4 lg:px-0 flex...

Dynamically created classes not available when using 'nuxt build' - tailwindcss nuxtjs

I have a nuxtjs project that I use with tailwindcss. In that project I generate classes on the fly for negative margins like so: <div class="mins-1" :class="['-mt-'+ m1*8]"></div> The entire...

Can you display a popup modal inside a react-three-fiber canvas?

I am trying to extend this react-three-fiber Game Demo. I want to show a popup modal when the player interacts with a computer. I want to render different React components inside the modal that...

Next.js with Tailwind Refreshes Slow

I experienced an extremely sluggish refresh time after adding Tailwind to my small Next project. I initially thought it was my device.

How to move styles folder to src folder in nextjs typescript with tailwindcss?

i'm using nextjs with typescript and tailwindcss. I want to move styles folder to src folder, i already added baseUrl with value src options in my tsconfig.json file, but I got an error like this...

Cannot purge tailwind

I am trying to purge tailwind with ejs. But when I tried to purge, I got this Error: Could not resolve entry module (index.html) .. Here is my tailwind config.js: module.exports = { purge:...

Customize Input Range in Tailwind CSS

How do I put the labels below the input range on tailwind just like in the picture below. Here's the playground which you can see CLICK HERE <div class="flex justify-center min-h-screen bg-black...

vscode tailwind css intellisense not working

I have a problem. I'm learning laravel 8 and tailwind CSS. and as title vscode tailwind CSS Intellisense not working. My tailwind CSS version is 2.2.15. tailwind.config.js like the photo. enter...

focus:outline-none not working Tailwind CSS with Laravel

I 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...

Vite Vanilla build with Tailwind doesn't work

I created a vanilla js project with Vite and installed Tailwind as the docs says. When I run in dev mode the classes works, but when I build the dist folder and serve that build it doesn't. My...

How to disable built-in JIT in Tailwindcss-v3

As some of my html comes from database, some of used CSS classes are not presented in HTML file in time of build npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css. So how can I disable...

Rails 7 asset pipeline SassC::SyntaxError with Tailwind

I'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: $ tailwindcss -i...

Rails 7.0 + esbuild terminates app with error Command "build" not found

Newly generated Rails 7.0 application errors out on startup. rails new [project name] --javascript=esbuild --css=tailwind On creating a new rails 7 project, I try to start the application using...

How to upgrade from tailwindcss 2 to 3 and create-react-app 4.0.3 to 5.0.0 (due to Post CSS 8 )

I created a project via create-react-app 4.0.3 which uses tailwindcss 2. I just tried to upgrade the project to tailwindcss 3, but quickly ran into troubles, since tailwindcss 3 relies on Post CSS...

NPM warning: 'unsupported engine'

I entered the command npm install -D tailwind css postcss autoprefixer vite in VS-Code. My environment is: NPM version: 8.1.2 Node.js version: 16.13.1 Which resulted in following warning: npm...

Flexbox not working in safari with Next.js Images

I want to lay out Next.js Images with flex-wrap with a fixed height but variable width depending on the image. I'm using tailwind. I've got it working perfectly on Google Chrome like so. However...

Why tailwind key is missing?

I don't understand why I have this issue warn - The content key is missing or empty. Please populate the content key as Tailwind generates utilities on-demand based on the files that use them. For...