Issue Before focusing: After focusing: Problem: Using angular mat v. 15 and latest tailwindcss there is a bug when focusing input field. To reproduce the problem: ng new angular-test cd angular-test ng add @angular/material npm install -D tailwindcss postcss autoprefixer
Continue readingTag: tailwind-css
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 readingHow should I extract @angular/material css file in Angular v13?
Issue In my Angular[v13] project, I used @angular/material. I also want to use tailwindcss. but @angular/materialcss is a style tag in head. so tailwindcss is not working. Now i want to extract @angular/material css file. Or is there any way
Continue readingHow to dynamically add classes to NextJS component using class names from CMS?
Issue I am looking for a solution that will allow some styling options in a CMS that can dynamically change the classes of specific components in my NextJS app. My code looks like this: pages/index.js: … import client from "../lib/client";
Continue readingIncrease 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 readingUse mui icons between components in react
Issue So I am trying to use mui icons between components. I am using the <Icon /> component but there are two problems with that: Only half of the icon is rendered. I cannot style the icon in the component
Continue readingWhen using nuxt and tailwind external css file does not work
Issue I want to use an external .css file but It does not work. I have tried link rel="stylesheet" and @importing css in style tags but it does not work Solution for importing css file to your nuxt app open
Continue readingHow to set width over 100% using Tailwind CSS
Issue I need to set div width to 110%, but it doesn’t seem possible with Tailwind CSS. Their documentation only specifies a 100% value. w-full width: 100%; Solution You can use JIT as width-[110%]. JIT mode is default in Tailwind
Continue readingTailwind CSS how to style a href links in React?
Issue For some reason, tailwind seems to have removed the "blue" and "underlined" part of http links. How do I get this functionality back? For example, in my React code, i have: return ( <a href={v.url}>{v.alias}</a> ); but this link
Continue readingtailwind dark mode isn't extending fully when scrolling all the way on page
Issue using 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
Continue readingTailwindCSS Active Link Text Color Not Changing
Issue I 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: const Header = () => { return( <header> <nav className=”sd:max-w-6xl mx-auto”> <ul
Continue readingIm using css Grid and Tailwind to create a simple Footer but there's line appearing in a place where it shoiuldn't and I would like to know ¿why?
Issue I’m using CSS grid to do something very simple, and Tailwind to style ( in which I’m really new so I’m probably making a silly mistake). This is the result I’m getting: Pretty good because It’s almost identical to
Continue readingHow to create scrollable element in Tailwind without a scrollbar
Issue I’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) https://getbootstrap.com/docs/5.0/examples/blog/ I tried the following using Tailwind but I
Continue readingTailwind config not exporting all css
Issue I am trying to publish the full tailwind 3.0 css library in a fresh laravel 8.* project with the view to use the corePlugins section to remove what I do not need. The thing is although the setup was
Continue readingTab 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 readingTailwind 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 readingtailwindcss Forms PlugIn: Styling Checkboxes
Issue Like 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
Continue readingHow to set min-content for a column in tailwind CSS Grid?
Issue My Layout looks like this Layout Code: const Layout = ({ children }: { children: ReactNode }) => { return ( <div className="grid grid-cols-2 grid-rows-2"> <Head> <title>Ystream</title> </Head> <nav className="row-span-2">Sidebar</nav> <header> <Navbar /> </header> <main>{children}</main> </div> ); }; In
Continue readingCan you modify NextJS mount element or add classes to __next div?
Issue Long 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: <body class="flex flex-col h-screen text-gray-600 work-sans
Continue readingAdd 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 readingTailwind overscroll y not working properly
Issue I’m building a laravel/tailwind dashboard but I’m now facing an issue with the overflow of an element. The design I want to achieve is the follwing : And what i achieved until now is the following: With this code
Continue readingCSS 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 readingCreated a slide out menu component trying to set it to open from the left, keeps opening from the right and sliding over to the left
Issue I have a react slide out menu component I’m working on that I’ll be using as part of a larger sidebar nav. I have the animation triggering correctly but instead of opening from the left side of the screen,
Continue readingHow to use tailwind with ExpressJS & EJS template?
Issue I’m trying to use tailwind for my project, But I’m using ExpressJS, and EJS as a view engine, but It is not working, any guide? My app.js file require("dotenv").config(); const express = require("express"); const ejs = require("express"); const bodyParser
Continue readingHow to convert background-position: % in Tailwind
Issue Didn’t find a way to convert background-position: 0% 20%; in tailwind I only find these classes bg-{side} any help is appreciated Solution If you’re using the new just-in-time (JIT) mode, you can generate this class on the fly. Then
Continue readingBinding element 'posts' implicitly has an 'any' type
Issue I have this code I’m writing that involves graphql, react and typescript. Halfway in and I’m getting the error message Binding element ‘posts’ implicitly has an ‘any’ type. I have no idea what this means and need help. Below
Continue readingTailwind Container Not Working at SM Devices
Issue this is my first time to using tailwind But i got some problem to build a responsive website The container is not working at Small devices It works at Medium devices like this: Medium Device And this one is
Continue readingcontenteditable div with tailwind adds breaks after child image
Issue I have a contenteditable div that contains inline images in between text. With normal css, its works perfectly, however when I apply tailwind, it adds a break after every image. Here is an example: https://play.tailwindcss.com/YUOFRAZUEn Any ideas? Solution Add
Continue readingIs there a way to change tailwind default style option?
Issue I’m building a blog in NextJS. Apparently in Tailwind’s list style type the default style is list-none. So every <ul> <li> elements in my app is not styled at all. I use remark to process .md files and my
Continue readingtailwind css not working between components
Issue So I have created a button component where i have passed props for how the btn will look. But when i try to use the props the props dont work. I dont think this is a problem with my
Continue readingfocus:outline-none not working Tailwind CSS with Laravel
Issue 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 not working for me and the border still
Continue readingTailwind 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 readingPurgeCSS whitelist patterns with TailwindCSS
Issue I 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
Continue readingTailwind two column layout with resizeable columns
Issue I’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
Continue readinghow 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 readingHow 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 readingModifying 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 readingIs there a shorter way to write a border on only one side?
Issue I got borders on all the edges by doing something like: It 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,
Continue readingTailwind css table with fixed header and scrolling tbody vertically
Issue I have the code below for a table based on tailwind css. If I remove the block class, the table is not scrollable anymore. Adding the block class to tbody breaks the thead. See Images attached. CodePen if you
Continue readingTailwind css table with fixed header and scrolling tbody vertically
Issue I have the code below for a table based on tailwind css. If I remove the block class, the table is not scrollable anymore. Adding the block class to tbody breaks the thead. See Images attached. CodePen if you
Continue readingBackground image in tailwindcss using dynamic url (React.js)
Issue I 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? Solution I think I
Continue readingSidebar from left to right
Issue I need help in my React App (tailwind) I want my slide bar to start from left to right, I’ve coded the thing but it shows the bar at center as showing in the picture below and when I
Continue readingTailwindcss v3 not working with next.js v12
Issue tailwindcss styles are not getting applied. What might be the issue? Tried multiple solutions in the tailwind.config.js file, but none of it worked. package.json : { "name": "twitter-clone", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next
Continue readingDesign system: styles override using TailwindCSS
Issue I am trying to create a Design System using ReactJS and TailwindCSS. I created a default Button component with basic styling as follow: import React from "react"; import classNames from "classnames"; const Button = React.forwardRef( ({ children, className =
Continue readingCss Relative positioned div after a Fixed div
Issue I need the relative element to behave like the static elements. I want the navbar to be shown over yellow and green parts just like it is shown over blue and red parts. I was trying wrapping the relative
Continue readingnextjs global css header element doesn't apply to a parsed markdown, replaced by tailwindcss instead
Issue I tried to parse markdown into html. the markdown does parsed as expected, the problem is it doesn’t render to what I expected. I expected the header to be automatically bolded and have bigger font size, but it doesn’t.
Continue readingTailwindCSS 3.0 Upgrade overriding button styles
Issue Problem: Button class being overridden by default tailwind base classes. Not sure why my classes on the element aren’t being applied. Question: How can I get my styles to apply properly? Screenshot: As you can see background color on
Continue readingWhen colors are set in tailwind.config.js the default tailwind colors won't work anymore
Issue I am using Tailwind for a little WordPress project I am creating. So I have set things up with webpack. This works absolutely fine. Tailwind does its tree shaking and only adds the classes into to the end File
Continue readingUsing tailwindcss in custom angular library
Issue I 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
Continue readingHow can I add 2 html paths in my "tailwind.config.js"? Tailwindcss
Issue This is, how my config file is right now. (see picture) Is there any chance, to add a second html file on a different path? The actual path is content: ["public/index.html"],. Is it possible to add a html path
Continue readingHow to properly overflow a dropdown in tailwind?
Issue I 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
Continue readingHow can I use javascript to hide by default the navigation links in my navbar on small screens?
Issue I set up my navber using tailwind css and was able to make it responsive. When viewed on a smaller screen the navigation links are displayed underneath each other in a flex block kind of way. However when viewed
Continue readingTailwind CSS – how to make a grid with two columns where the 1st column has 20% of the width and 2nd one 80% width?
Issue From the official documentation, I am only able to come up with something like this: <div class="grid grid-cols-2 gap-3"> <div>1st col</div> <div>2nd col</div> </div> But this gives me 2 columns with an equal width – how do I specify
Continue readingCenter a div inside an svg circle with Tailwindcss
Issue I’m trying to center the div element with 29% value inside an svg circle. I’ve tried to center it using relative and absolute properties but it didn’t seem to work <!– Tailwind –> <link href=”https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=”stylesheet”> <!– Body –>
Continue readingTailwind css backgroundImage doesn't work for me
Issue all, I’m trying to make tailwinds backgroundImage solution 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. So as in the
Continue readingTailwind CSS class "w-full xl:w-3/6" doesn't work at xl breakpoint
Issue I can’t get this code to work on vuejs, class xl:w-3/6 doesn’t override w-full. I tried replacing w-full with sm:w-full but when the window is smaller than sm the class doesn’t apply. How can I get this to work
Continue readingFade/transition tailwind class to something else over certain amount of time?
Issue Is 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
Continue readingHow to remove scroll bar after making the website responsive?
Issue After I made responsive using vanilla CSS, I am getting scroll bar in the bottom, how to get rid of this? Does Tailwind CSS provides a better solution to it? Solution You can hide scrollbars on HTML elements using
Continue readingHow to use layout responsive with Nextjs and tailwind?
Issue I am trying to create a card with image on the left and the card content on the right using flex in NEXTJS and Tailwind CSS. So, I am trying to have that image to be responsive. <div className="block">
Continue readingUnexpected 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 readingadding 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 readingUnexpected 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 readingHow to use layout responsive with Nextjs and tailwind?
Issue I am trying to create a card with image on the left and the card content on the right using flex in NEXTJS and Tailwind CSS. So, I am trying to have that image to be responsive. <div className="block">
Continue readingMake div align to bottom of column in card tailwind css
Issue As 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
Continue readingTailwind custom color is not active on hover
Issue I modified my tailwind.config.js to add a new custom color: module.exports ={ theme: { extend: { colors: { pepegray: { DEFAULT: "#323232" }, } } } } Now I want my button to change color on hover. <button className="h-2
Continue readingHow to add overflow-hidden in the image of this tailblock component?
Issue I am using the follwing tailblock component which is based on tailwind.css What I want is when I hover, the image scales up within the image dimensions only. This means the image zooms but the dimension (height & width
Continue readingHow can I add 2 html paths in my "tailwind.config.js"? Tailwindcss
Issue This is, how my config file is right now. (see picture) Is there any chance, to add a second html file on a different path? The actual path is content: ["public/index.html"],. Is it possible to add a html path
Continue readingCSS translate3d or (translateX) starts slow on safari and gnome web
Issue The ticker animation on safari and web gnome starts slowly and goes back to normal speed when I move the mouse or click on the ticker HTML element. I’m using tailwind. I have also used pure CSS, and it
Continue readingHow to remove scroll bar after making the website responsive?
Issue After I made responsive using vanilla CSS, I am getting scroll bar in the bottom, how to get rid of this? Does Tailwind CSS provides a better solution to it? Solution You can hide scrollbars on HTML elements using
Continue readingHow to properly overflow a dropdown in tailwind?
Issue I 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
Continue readingTailwind CSS – how to make a grid with two columns where the 1st column has 20% of the width and 2nd one 80% width?
Issue From the official documentation, I am only able to come up with something like this: <div class="grid grid-cols-2 gap-3"> <div>1st col</div> <div>2nd col</div> </div> But this gives me 2 columns with an equal width – how do I specify
Continue readingHow can I use javascript to hide by default the navigation links in my navbar on small screens?
Issue I set up my navber using tailwind css and was able to make it responsive. When viewed on a smaller screen the navigation links are displayed underneath each other in a flex block kind of way. However when viewed
Continue readingtailwind doesn't want to show font
Issue here’s my question. for learning purposes i am currently working on a website with tailwind installed with the CLI method. i downloaded a font and applied it in my configuration file like this: fontFamily: { sans: [‘"Dela Gothic One"’,
Continue readingTailwind is not working on a new laravel project
Issue I just installed a clean Laravel project with the Jetstream starter kit, so it also installed Tailwind CSS. I then tried to use the sample code from Tailwind but it won’t show up. This is my simple test code
Continue readingTailwindcss version 3 classes not working on class attributes, but works on @apply for Angular 13
Issue I’m unable to get Tailwindcss classes to appear on the inline "class" attribute. But if I @apply I through the ".scss" file and use that class on the inline "class" attribute it works fine. Does not work: .HTML <!–
Continue readingTailwindcss 3 does not init on Windows 10
Issue Here is my history: At home a installed tailwindcss and it simply works (My PC has Ubuntu Linux). At work, I use Windows 10 and it just does not work at all. I am crazy to start a new
Continue readingTailwind default color classes not working
Issue I’m building a React application using Tailwind CSS Framework. I have used NPM to install tailwind in my react app in the following manner: npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p Then I have also edited
Continue readingTailwind, Vue problem with non-English characters when using tags right after eachother
Issue I am facing an issue when using tags right after eachother(ex: span, ‘a’ and ‘p’). characters merge with each other, although they are in seperate html tags! How can I prevent that from happing? <a href="" class="underline mx-1">حریم شخصی</a>
Continue readinginclude 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 readingmake responsive flexible images that are rotated on a single line in tailwind css?
Issue i want to recreate this effect that is visible on https://www.tella.tv/ in tailwind css: i tried to inspect their source code but i couldn’t make it work in my code. my markup looks like: <div class="lg:space-x-15 -mr-6 flex items-end
Continue readingHow 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 readingJavascript Menu Accordion Don't word
Issue I am a beginner in programming, and I am trying to create a FAQ for my portfolio site. I’m using the tailwind css framework and I’m not getting accordion with javascript, could you help me? I have the class
Continue readingCommand removing tailwindcss in the input.css
Issue When I run: npx tailwindcss -i ./src/input.css -o ./dist/output.css –watch My output.css gets mostly deleted, and only contains a handful of tailwind css, see image: I have to run: npx tailwindcss-cli@latest build ./src/input.css -o ./dist/output.css to rebuild the file
Continue readingHiding search bar on mobile device cause background image not to fully stretch and creating white stripe at the bottom
Issue I know this problem is common and plenty of users have asked there for a solution and of course, I did read answers to these questions but nothing has helped for me. This is how does the website look
Continue readingcustom 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 readingcustom 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 readingHiding search bar on mobile device cause background image not to fully stretch and creating white stripe at the bottom
Issue I know this problem is common and plenty of users have asked there for a solution and of course, I did read answers to these questions but nothing has helped for me. This is how does the website look
Continue readingHiding search bar on mobile device cause background image not to fully stretch and creating white stripe at the bottom
Issue I know this problem is common and plenty of users have asked there for a solution and of course, I did read answers to these questions but nothing has helped for me. This is how does the website look
Continue readingsticky sidebar in a post not working (tailwind)
Issue I’m looking to make something similar to this As you can see, when you scroll the sidebar follows you. This is my code, i can’t make it work: <template> <div class="blog-post"> <div class="wrapper"> <aside class="sidebar"> <div class="sidebar-wrapper"> <!— Content
Continue readingsticky sidebar in a post not working (tailwind)
Issue I’m looking to make something similar to this As you can see, when you scroll the sidebar follows you. This is my code, i can’t make it work: <template> <div class="blog-post"> <div class="wrapper"> <aside class="sidebar"> <div class="sidebar-wrapper"> <!— Content
Continue readingHow to recreate Tailwind background transition-color?
Issue I saw the special color on https://tailwindcss.com/docs/transition-property in dark mode Here’s the pic I want to know how can I recreate this ? With gradient color or other css property? I tried to see how they did it by
Continue readingFit form items to its display width
Issue Tailwind Play I’d like to fit form items to their display width. Each form is nested within li element. And, I could manage to fit li elements to display width. but their child elements (which are form elements )
Continue readingFit form items to its display width
Issue Tailwind Play I’d like to fit form items to their display width. Each form is nested within li element. And, I could manage to fit li elements to display width. but their child elements (which are form elements )
Continue readingHow to recreate Tailwind background transition-color?
Issue I saw the special color on https://tailwindcss.com/docs/transition-property in dark mode Here’s the pic I want to know how can I recreate this ? With gradient color or other css property? I tried to see how they did it by
Continue readingTailwind 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 readingTailwind 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 readingWhy is my create react app giving no output?
Issue I’m doing a tutorial for a basic CRUD app with React and Tailwind, this is my first time setting it up and I’m trying to display a navbar but when i run ‘npm run start’, the output is blank.
Continue readingWhy is my create react app giving no output?
Issue I’m doing a tutorial for a basic CRUD app with React and Tailwind, this is my first time setting it up and I’m trying to display a navbar but when i run ‘npm run start’, the output is blank.
Continue readingFit 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 readingFit 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