Questions tagged [tailwind-in-js]

120 questions
3
votes
2 answers

How to modify .container css class breakpoint for Tailwind CSS library using tailwind.config.js

According to the below screenshot picture, Tailwind css library offer 6 breakpoints for default, sm, md, lg, xl, 2xl screen sizes. I want two breakpoints. by default the .container css class will have 100% width and then when the screen size is…
Shah Alom
  • 1,031
  • 1
  • 14
  • 26
3
votes
0 answers

Rails 7 & TailwindCSS JS

I've successfully managed to get Tailwind CSS working in Rails 7 using the tailwindcss-rails gem (through rails new testapp -css tailwind). Some of the interactive items (like menu drop down) don't work because it requires JS. So I ran bin/importmap…
migu
  • 4,236
  • 5
  • 39
  • 60
3
votes
1 answer

Tailwindcss not working with NextJS 12. Experimental features

When NextJS 12 released , i taught to build a project with tailwind. my package.json { "name": "test", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", …
3
votes
1 answer

Tailwind CSS: Referencing to custom color in tailwind.config.js

In order to streamline my theming I'd like to reference to a custom color I defined and then pass it through a function to get a lighter or darker variant. I extend the default color theme using the following (partial) code: module.exports = { …
3
votes
2 answers

how to apply transition effects when switching from light mode to dark in tailwind 2.0?

So I'm building a small-ish project with tailwindCSS and thought of implementing the dark mode. I made a button and mapped it to put the dark class in the html tag. After testing for a bit, I realized that switching looked kind of odd because it is…
3
votes
1 answer

how to import tailwind inside 'createGlobalStyle'

I'm trying to import tailwind inside my styled components globalstyle, to set base styles. Code below doesn't work, so any suggestions on how to make it work? import {createGlobalStyle} from 'styled-components'; const GlobalStyle =…
3
votes
2 answers

Not able to make image responsive using tailwind css

Here is the code :)
3
votes
0 answers

Tailwindcss @layer directive does not work in ReactJS/ViteJS Project

I have created a react app use vitejs with the following setup: - index.html - index.css - main.js - App.css - App.js This setup works as follows: index.html uses main.js (i.e., ) main.js imports…
Moshe
  • 6,011
  • 16
  • 60
  • 112
3
votes
3 answers

Tailwind custom color is not active on hover

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.
Arnold Gee
  • 856
  • 2
  • 8
  • 18
2
votes
1 answer

why are only some css classes being generated in tailwind?

I have a project where I'm using Django as backend and tailwind for the css. tailwind is not giving me any errors and is finding classes in my files but not generating the css. the only class that its working for is bg-blue-500 and nothing else. if…
Dunham
  • 101
  • 3
2
votes
1 answer

Padding not working for table component in Tailwind

I am trying to add padding for table head and table rows in Tailwind based React App. Here's my code: import React from "react"; import "./styles.css"; import "./styles/tailwind-pre-build.css"; export default function App() { return (
Shivam Sahil
  • 4,055
  • 3
  • 31
  • 62
2
votes
2 answers

Tailwind stopped working when downgrade react-scripts to @4.0.3

i Had some issues with some packages not working with react-scripts@5.0.1 so i had to downgrade to @4.0.3 to fix it. But then Tailwind stoped working. does anyone have any fixes for this ? this is my package.json { "name": "fight-club-game", …
2
votes
1 answer