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
Related
Tailwind typography, In order to add opening and closing quotes, add an after and before pseudo elements to blockquotes:
<blockquote>
:after
<p>Lorem ipsum.</p>
:before
</blockquote>
I want to customize the style removing just the closing quotes to match this pattern:
Is it possible customize it from tailwind.config.js or should I override styles with CSS and !important?
As described in this issue: https://github.com/tailwindlabs/tailwindcss-typography/issues/66#issuecomment-756834635
You can add following configuration to your tailwind.config.js:
module.exports = {
theme: {
// ...
extend: {
typography: {
quoteless: {
css: {
'blockquote p:first-of-type::before': { content: 'none' },
'blockquote p:first-of-type::after': { content: 'none' },
},
},
},
},
},
//...
}
and add the class prose-quoteless to your prose element afterwards to remove all quotes.
For example, let's say I want to use the following markdown
# AAAAAAAAAa
BBBBBBB
which would be parsed accordingly such that AAAAAAAAAa is h1 and BBBBBB is <p>, and all of this is enclosed with a prose div in using Tailwind Typography. Under normal circumstances, the two would share the same font defined in tailwind.config.js, and I am wondering how I can change this setting such that the two would have different fonts.
There are examples on the link you provided. Take a look at Customization and Modifiers.
You can directly add property to certain element (h1,h2,h3,p, etc). See example below:
// tailwind.config.js
module.exports = {
theme: {
extend: {
typography: {
DEFAULT: {
css: {
color: '#333',
h1: {
fontFamily: ['Roboto', 'sans-serif'],
},
p: {
fontFamily: ['Montserrat', 'sans-serif'],
},
},
},
}
},
},
plugins: [
require('#tailwindcss/typography'),
// ...
],
}
or you can create your own modifier like this:
// tailwind.config.js
module.exports = {
theme: {
extend: {
typography: {
'3xl': {
css: {
fontSize: '1.875rem',
h1: {
fontSize: '4rem',
fontFamily: ['Montserrat', 'sans-serif'],
},
p: {
fontSize: '1.5rem',
fontFamily: ['Roboto', 'sans-serif'],
},
// ...
},
},
},
}
},
plugins: [
require('#tailwindcss/typography'),
// ...
],
}
A simple demo.
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 am using typography plugin that tailwind provides inside my NextJS project.
It displays Content inside the code tag with backtick around it. I am trying to remove these backticks. So I tried .prose code::before {content: "";} inside my globals.css file but it has no effect. It works when I change it from Firefox style editor.
Any ideas why it is not working?
/* globals.css inside NextJS Project */
.prose code::before {
content: "";
}
.prose code::after {
content: "";
}
Use !important, this works for me.
/* app.css */
.prose code::before {
content: "" !important;
}
.prose code::after {
content: "" !important;
}
You can do this in with no CSS file involved.
Just add some customization code in tailwind.config.js:
// tailwind.config.js
module.exports = {
theme: {
extend: {
typography: {
DEFAULT: {
css: {
code: {
'&::before': {
content: 'none !important',
},
'&::after': {
content: 'none !important',
},
},
},
},
}
},
},
plugins: [
require('#tailwindcss/typography'),
// ...
],
}
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: [],
}