tailwind-css

问题 I am using tailwind in my Vuejs app. I have this simple template <template> <div class="bg-gray-500 h-screen"> <Header /><!-- //height 32 --> <div class="w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg"> <router-view /> </div> </div> </template> The div with h-screen is the root or my app. The component <header> has a tailwind height of h-32 The problem is that the second div causes the page to scroll at the bottom, the height of the <header> (h-32). What I want to do If there is no

问题 You can see an example of what I am trying to do here: https://codesandbox.io/s/vibrant-leaf-qj8vz Note: this particular example is using Twin.macro with Styled Components. On my local computer I tried the same thing with the same results using Twin.macro with emotion/next.js. Here is a sample component illustrating what I am trying to do: import React from 'react' import tw from 'twin.macro' const Acme = ({ children, type }) => <div css={[tw`${type}`]}>{children}</div> export default Acme

问题 My project use craco to start/build, I wish to integrate tailwind postcss. I have follow this tutorial https://dev.to/ryandunn/how-to-use-tailwind-with-create-react-app-and-postcss-with-no-hassle-2i09 But as a result, I am suffering with this error: My config files looks like below: craco.config.js (this one looks like where problem lies, as I feel like the style may overriding craco style underneath, so it caused above error, but not 100% sure how to resolve this puzzl.) module.exports = {

问题 I want to create a new Angular project using Tailwind CSS. My current CLI version is 10.1.1. Things I have done so far: Create a new app using ng new my-app Use Angular routing => yes Use SCSS as the stylesheet In the root directory of the project run npm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D In the src folder there is a styles.scss file, modify it to . @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss

问题 I want to create a new Angular project using Tailwind CSS. My current CLI version is 10.1.1. Things I have done so far: Create a new app using ng new my-app Use Angular routing => yes Use SCSS as the stylesheet In the root directory of the project run npm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D In the src folder there is a styles.scss file, modify it to . @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss

问题 I am trying to extend the color palette of tailwind css using their tailwind.config.js file. My goal is to create a set of primary and secondary colors that I can use when styling my site. I want to do so by referencing already existing colors from the default tailwind theme. Based on the documentation, I though the following would work (but it does not): const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { theme: { extend: { colors: { primary: { light: defaultTheme

问题 I'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: Cannot find module 'autoprefixer' Require stack: - C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\commands\build.js - C:\Users\[user]\AppData

问题 I'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: Cannot find module 'autoprefixer' Require stack: - C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\commands\build.js - C:\Users\[user]\AppData

问题 I want to make a carousel using Tailwind CSS. But I am not able to convert some pure CSS into tailwind CSS. If it is not possible to convert that pure CSS into tailwind CSS then please tell me how to add that CSS in my react project. I am using REACT . Please help me with this issue. Pure css: .carousel-open:checked + .carousel-item { position: static; opacity: 100; } .carousel-item { -webkit-transition: opacity 0.6s ease-out; transition: opacity 0.6s ease-out; } #carousel-1:checked ~

问题 I want to make a carousel using Tailwind CSS. But I am not able to convert some pure CSS into tailwind CSS. If it is not possible to convert that pure CSS into tailwind CSS then please tell me how to add that CSS in my react project. I am using REACT . Please help me with this issue. Pure css: .carousel-open:checked + .carousel-item { position: static; opacity: 100; } .carousel-item { -webkit-transition: opacity 0.6s ease-out; transition: opacity 0.6s ease-out; } #carousel-1:checked ~