Increase input field width

Issue I am new to Tailwind CSS and am trying to make a responsive search bar. When I increase the width it becomes unresponsive. How can I fix this? <form className="flex items-center mx-4" onSubmit={submitHandler}> <label htmlFor="simple-search" className="sr-only">Quick search</label> <div className="relative

Continue reading

Tab border to align with full width border

Issue I am trying to achieve something like this in HTML/CSS (TailwindCSS): Notice how the border on the active tab aligns perfectly with the full-width border. CODE: Here is my HTML which includes the tailwind css classes. <link href=”https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css” rel=”stylesheet”/>

Continue reading

Tailwind css Grid is not working in Reactjs?

Issue Here is an example of taiwind css grid working properly in HTML : https://play.tailwindcss.com/mU6PzU0sqX Despites, here is the same example in react, and it seems it does not pass: https://codesandbox.io/s/react-typescript-tailwind-playground-forked-m77pw?file=/src/App.tsx See the not working component in the browser :

Continue reading

Add weekend day backgrounds

Issue I’m using flatpicker calendar and want to make every weekend day’s background #7a73aa. Unfortunately flatpicker does not add a class to weekend day’s. I’ve tried this with css but that’s not working: .dayContainer span:nth-child(6n) { background: #7a73aa; font-size: 20px;

Continue reading

CSS regarding height and scrolling

Issue Trying to learn CSS and Tailwind in general and struggling with height. https://jsfiddle.net/7f6cd1bx/ I made a code pen above based off this https://tailwindcomponents.com/component/new-telegram-web-clone If I were to scroll to the bottom on the list of chats, the last card

Continue reading

Tailwind text align bottom

Issue I have the following code that creates two <p> tags to store some text: <p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p> <p v-else class="text-red-500 text-lg font-bold">{{my_value}}%</p> <div class="inline-block align-bottom bg-yellow-500 align-text-bottom"> <p class="text-gray-500 text-sm ml-1 inline-block align-text-bottom align-bottom">tsa</p> </div>

Continue reading

how to render the list to a grid in react?

Issue I want to render few data into my grid layout. I tried to render them like this. `<div className="grid grid-cols-4 mt-4 mx-6 mb-2"> <div className="col-span-2 uppercase font-bold">name</div> <div className="uppercase font-bold mx-auto">deadline</div> <div className="uppercase font-bold mx-auto">time</div> </div> <div className="grid grid-cols-4

Continue reading

How to size column height properly in Tailwind?

Issue I’m learning Tailwind (migrating from bootstrap) and I’m struggling to figure out how to appropriately size column heights. Here I have a 2-column layout: <div id="app" class="bg-slate-200 h-screen p-4" data-v-app=""> <div class="w-full h-full"> <div class="columns-2"> <div class="rounded p-4 bg-white">

Continue reading

Modifying hover in Tailwindcss

Issue I’ve noticed that :hover 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? Solution By far the simplest way is

Continue reading

Unexpected unknown at-rule "@tailwind" scss/at-rule-no-unknown

Issue This is my stylelint.config.js, module.exports = { extends: [‘stylelint-config-standard-scss’], rules: { ‘at-rule-no-unknown’: [ true, { ignoreAtRules: [‘tailwind’] } ], ‘declaration-block-trailing-semicolon’: null, ‘scss/at-extend-no-missing-placeholder’: null, ‘color-function-notation’: ‘legacy’, ‘selector-pseudo-class-no-unknown’: [ true, { ignorePseudoClasses: [‘deep’] } ] } } And when I run

Continue reading

adding dynamic class name in svelte

Issue I am currently writing an app with svelte, sapper and tailwind. So to get tailwind working I have added this to my rollup config svelte({ compilerOptions: { dev, hydratable: true, }, preprocess: sveltePreprocess({ sourceMap: dev, postcss: { plugins: [

Continue reading

Unexpected unknown at-rule "@tailwind" scss/at-rule-no-unknown

Issue This is my stylelint.config.js, module.exports = { extends: [‘stylelint-config-standard-scss’], rules: { ‘at-rule-no-unknown’: [ true, { ignoreAtRules: [‘tailwind’] } ], ‘declaration-block-trailing-semicolon’: null, ‘scss/at-extend-no-missing-placeholder’: null, ‘color-function-notation’: ‘legacy’, ‘selector-pseudo-class-no-unknown’: [ true, { ignorePseudoClasses: [‘deep’] } ] } } And when I run

Continue reading

include tailwind css in bundle js

Issue How could I include tailwind css in bundle js ? this is the an example with vue 3 and tailwind 3 https://github.com/musashiM82/vue-webpack. running npm run build , it creates 3 files: app.js ABOUTPAGE.js app.6cba1802.css I want to include app.6cba1802.css

Continue reading

How can I make a radio button RTL in Tailwind CSS?

Issue This is my code in html + tailwind css: <div className=”flex justify-center”> <div className=”flex flex-col justify-center items-start gap-5″> <div className=”form-check”> <input className=”form-check-input appearance-none rounded-full h-7 w-7 border-4 border-[#5F6368] bg-[#C4C4C4] hover:shadow-lg hover:shadow-[#5F6368] hover:border-[#3B52B5] checked:bg-[#7EABFF] checked:border-[#3B52B5] focus:outline-none transition duration-200 mt-1 align-top

Continue reading

custom colors not showing in tailwindcss v3 installed via npm

Issue I am using a tailwind cssv3 installed via NPM and I changed my tailwind.config.js to module.exports = { content: [“./*html”], theme: { colors: { transparent: ‘transparent’, current: ‘currentColor’, ‘myblack’: ‘#ffffff’, ‘myblack’: ‘#000000’, ‘myorange’: ‘#FF7E00’, ‘mygray’: ‘#A8A8A8’, ‘mywhiteuse1’: ‘#F1EBEB’, ‘mywhiteuse2’:

Continue reading

custom colors not showing in tailwindcss v3 installed via npm

Issue I am using a tailwind cssv3 installed via NPM and I changed my tailwind.config.js to module.exports = { content: [“./*html”], theme: { colors: { transparent: ‘transparent’, current: ‘currentColor’, ‘myblack’: ‘#ffffff’, ‘myblack’: ‘#000000’, ‘myorange’: ‘#FF7E00’, ‘mygray’: ‘#A8A8A8’, ‘mywhiteuse1’: ‘#F1EBEB’, ‘mywhiteuse2’:

Continue reading

Tailwind CSS No Utility Classes Were Found

Issue Trying to get Tailwind to work via CLI instructions here. I’ve got a (simplified) file structure of -public -stylesheets -styles.css -tailwind.css -views -index -index.pug -page2.pug -page3.pug -user -index.pug -page2.pug -includes -templates -header.pug -footer.pug I’ve followed the installation docs and

Continue reading

Tailwind CSS No Utility Classes Were Found

Issue Trying to get Tailwind to work via CLI instructions here. I’ve got a (simplified) file structure of -public -stylesheets -styles.css -tailwind.css -views -index -index.pug -page2.pug -page3.pug -user -index.pug -page2.pug -includes -templates -header.pug -footer.pug I’ve followed the installation docs and

Continue reading

Fit remaining height

Issue I’m trying to create a layout with TailwindCss similar to this: +———————-+ | | +—–+—————-+ | | | | | | | | | | | | +—–+—————-+ This should fit the screen (both width and height). When the

Continue reading

Fit remaining height

Issue I’m trying to create a layout with TailwindCss similar to this: +———————-+ | | +—–+—————-+ | | | | | | | | | | | | +—–+—————-+ This should fit the screen (both width and height). When the

Continue reading