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",
…

Abdul Kàbéèr
- 237
- 1
- 11
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 = {
…

Allard
- 137
- 6
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…

76 69 6E 61 79
- 43
- 1
- 5
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 =…

Jonatanbs
- 223
- 2
- 9
3
votes
2 answers
Not able to make image responsive using tailwind css
Here is the code :)

Shivam Yadav
- 47
- 1
- 1
- 6
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.
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 (