How to use TailwindCSS3 with ngClass?

Issue I’m trying to use TailwindCSS in function inside ngClass. TailwindCSS classes were generated in function to maintain my template but it doesn’t work. Please check my code below *.component.html … <div class="grid grid-cols-12"> <div ngClass="generateCol(fieldUI)"> … *.component.ts … generateCol(fieldUI:

Continue reading

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