I want to customize gridTemplateColumns section of my Tailwind theme config.But then it does work.
I want to set
grid-template-columns: 100px auto 100px;
and it was set in tailwindcss as follow,but it didn't work;
<div className='grid grid-cols-revolution ...'>
<div></div>
...
...
</div>
tailwind.config.js
module.exports = {
purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
gridTemplateColumns: {
'revolution': '100px auto 100px',
}
},
},
variants: {
extend: {},
},
plugins: [],
}
Related
Tailwind has started acting up on my latest project and after hours of debugging I can't figure out what's happening.
When I have this:
<div class='fixed bottom-0 right-6 sm:relative sm:block'>
The div is always fixed, regardless of the screen size. In this:
<div class='hidden sm:flex'>
OR
<div class='hidden sm:block'>
The div is always hidden, regardless of the screen size.
However, for borders and text-colors responsiveness works. Is that expected behavior?
This is my tailwind.config.js
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
fontFamily: {
'mont': 'Montserrat',
'open': 'Open Sans',
'roboto': 'Roboto',
'lato': 'Lato',
},
extend: {
colors: {
'xmas-red': '#b71a3b',
'xmas-dark-red': '#7e0f12',
'xmas-brown': '#bc6d4c',
'xmas-olive': '#6a7045',
// 'xmas-gray': '#313c33',
'xmas-gray': '#364739',
'xmas-blue': '#072b54'
},
width: {
'124': '60rem',
},
height: {
'100': '36rem'
}
},
},
variants: {
extend: {
opacity: ['disabled'],
backgroundColor: ['disabled'],
borderColor: ['disabled'],
textColor: ['disabled'],
},
},
plugins: [
require('#tailwindcss/forms')
],
}
I have a Vue3 application with Tailwinds configured in tailwind.config.js
Is it possible to dynamically change the value of a preconfigured class from tailwind.config.js ?
For example:
tailwind.config.js:
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
base: {
DEFAULT: "#6e0147",
},
},
fontFamily: {
sans: ["Interstate", "Inter var", ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
ringWidth: ["hover", "active"],
ringColor: ["hover", "active"],
ringOpacity: ["hover", "active"],
ringOffsetWidth: ["hover", "active"],
ringOffsetColor: ["hover", "active"],
},
},
plugins: [],
};
VueComponent.vue :
<template>
<div class="text-base">text here</div>
</template>
<script>
export default {
.....
mounted(){
tailwind.config.colors.base = "#00000" // change tailwind color of class somehow
}
}
</script>
In your tailwind.css add a CSS variable called --text-color-base (you could add multiple) in the base theme and also in theme-1:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base{
:root{
--text-color-base:#6e0147;
}
.theme-1{
--text-color-base:#000000;
}
}
in tailwind.config.js extend the textColor field in the theme option with skin key which will contain the different variable for your text color :
theme: {
extend: {
textColor:{
skin:{
base:"var(--text-color-base)"
}
},
colors: {
base: {
DEFAULT: "#6e0147",
},
},
fontFamily: {
sans: ["Interstate", "Inter var", ...defaultTheme.fontFamily.sans],
},
},
then you could use it like class="text-skin-base", to apply the theme-1 add the class theme-1 to the root element like :
<div class="theme-1">
<h1 class="text-skin-base">text here</h1>
...
</div>
then in your script you could bind the root class to a property and you update in the script :
<div :class="myTheme">
<h1 class="text-skin-base">text here</h1>
...
</div>
<script>
export default {
.....
data(){
return{
myTheme:''
}
},
mounted(){
this.myTheme="theme-1"
}
}
</script>
I have the following Test component:
Test.css
.SomeClass {
background-color: blue;
width: 100px;
height: 100px;
}
Test.tsx
import React from 'react';
import './Test.css';
export const Test = () => {
return (
<div className={'SomeClass'}>
hello
</div>
);
};
Relevant section of webpack config:
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: !isProduction,
modules: {
localIdentName: '[local]',
},
},
}],
},
The problem is that the styles are not applied. On inspection, the div looks like this:
<div class="SomeClass">hello</div>
but there is no "SomeClass" css.
I suspect it is to do with some webpack config. I tried this too: use: ['style-loader', 'css-loader'] instead of the above use array, but no luck.
Edit
This project uses react-jss.
Does tailwind compatible with javascript codes because every time when I use it doesn't work.
Example code:
<div class="slides"
data-0="transform translate-x-0 translate-y-0"
data-100p="transform translate-x-0 translate-y-1/2"
data-200p="transform translate-x-1/2 translate-y-1/2"
data-300ps="transform translate-x-1/2
>
...
</div>
skrollr.js
<script src="/home/isswarya/skrollr.min.js"></script>
<script type="text/javascript">var s = skrollr.init();
</script>
Yes Tailwind CSS is compatible with javascript code. By default, Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations.
// Example `tailwind.config.js` file
module.exports = {
important: true,
theme: {
fontFamily: {
display: ['Gilroy', 'sans-serif'],
body: ['Graphik', 'sans-serif'],
},
extend: {
colors: {
cyan: '#9cdbff',
},
margin: {
'96': '24rem',
'128': '32rem',
},
}
},
variants: {
opacity: ['responsive', 'hover']
}
}
You can see Tailwind CSS Configuration
I'm trying TailwindCSS for the first time, and it seems I can't use breakpoints for box-shadows. All the others breakpoints are working fine except for the box-shadow.
Btw, I'm using a custom box-shadow.
HTML:
<div
class="w-auto h-screen pl-10 mt-20 pt-12 absolute left-0 top-0 bg-gray-900 shadow-menu md:shadow-none"
>
tailwind.config.js:
module.exports = {
theme: {
fontFamily: {
base: ["Quicksand", "sans-serif"],
title: ["Belgrano", "serif"]
},
extend: {},
boxShadow: {
menu: "0 3px 5px rgba(0,0,0,0.2)"
}
},
variants: {},
plugins: []
};
You have to enable Pseudo-Class Variants for boxShadow in your tailwind.config.js like this:
boxShadow: ['responsive', 'hover', 'focus']
This will allow you to tweak boxShadow based on responsive classes, hover or focus.
Your tailwind.config.js will look like this:
module.exports = {
theme: {
fontFamily: {
base: ["Quicksand", "sans-serif"],
title: ["Belgrano", "serif"]
},
extend: {},
boxShadow: {
menu: "0 3px 5px rgba(0,0,0,0.2)"
}
},
variants: {
boxShadow: ['responsive', 'hover', 'focus']
},
plugins: []
};
I hope this helps.
Resources https://tailwindcss.com/docs/pseudo-class-variants/#app