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.
Related
I'm using TailwindCSS for my project, I want to set a default border color, for the normal theme I did this via:
module.exports = {
mode: "jit",
purge: ["{pages,app}/**/*.{jsx,tsx}", "node_modules/react-toastify/**"],
darkMode: "media",
theme: {
extend: {
borderColor: (theme) => ({
DEFAULT: theme("colors.gray.100"), // Light theme default border color
dark: {
DEFAULT: theme("colors.gray.800"), // Dark theme default border color NOT WORKING
},
}),
// ...
}
For the light theme, it is working fine, however, for the dark theme, I cannot seem to find a way to apply a default value, any ideas of how to make this work?
Thanks a lot!
I figure out a way, hope it helps.
The tailwind suggests that we make use of index.css instead of configuring in tailwind.config.js
As mentioned in https://tailwindcss.com/docs/functions-and-directives
So the code goes like:
tailwind.config.js
const colors = require("tailwindcss/colors");
module.exports = {
mode: "jit",
darkMode: "media",
content: ["./src/**/*.{js,jsx}", "./public/index.html"],
theme: {
extend: {
colors: {
gray: colors.gray,
light: {
primary: colors.orange,
},
dark: {
primary: colors.green,
},
},
/* Add any default values here */
/* borderWidth: {
DEFAULT: "4px",
},*/
},
},
plugins: [],
};
index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
/* Can directly apply colors : hard coded values for light and dark */
.bg-color {
#apply bg-white dark:bg-black;
}
/* Can use custom color defined in the tailwind.config.css file */
.bg-text {
#apply text-light-primary-800 dark:text-dark-primary-500;
}
/* This is how you apply the border-color for both light and dark mode */
.border-color {
#apply border-black dark:border-white;
}
}
DarkMode.js
import React from "react";
const DarkMode = () => {
return (
<div className=" min-h-screen min-w-full bg-color">
<div className="border-color border-4 bg-text font-bold">
Hello
</div>
</div>
);
};
export default DarkMode;
In light theme:
In dark theme:
For your desired border-color change the border-color property as shown below.
.border-color {
#apply border-gray-100 dark:border-gray-800;
}
I've used this approach and it works pretty well.
#layer components {
.border,
.border-r,
.border-l,
.border-t,
.border-b,
.border-x,
.border-y {
#apply dark:border-dark-600;
}
}
Simply use
#layer base {
*,
::before,
::after {
#apply dark:border-gray-600;
}
}
Because Tailwind implements border-color by default. It works!
I'm using Tailwind (react/next) and struggle to change the way my scrollbar looks.
It's a single page application and I have been trying to create custom CSS to apply to the first div in my index file, like this:
<div className="no-scroll"> <<<<<<<--------- Adding custom css here
<Head>
<title>Oscar Ekstrand</title>
<link rel="icon" href="/images/favicon.ico" />
</Head>
<main className="flex flex-col no-scroll">
<section ref={heroref}>
<Hero scrollToContacts={scrollToContacts} />
</section>
<section ref={offeringref}>
<Offering />
</section>
<section ref={processref}>
<WhatIDo />
</section>
<section ref={biographyref}>
<CvBar />
</section>
<section ref={skillsetref}>
<Skillset />
</section>
</main>
<section ref={contactsref}>
<Footer />
</section>
</div>
I can get custom CSS classes to work for things like buttons, both with a "plugin-approach" and having a global style sheet. (https://play.tailwindcss.com/zQftpiBCmf)
But I can't understand how to change the look of my scrollbar.
Anyone got an idea?
Tailwind CSS doesn't provide a built-in way to customise the scrollbar styling. However, you can use the various ::-webkit-scrollbar pseudo-elements to style it.
Tailwind playground link: https://play.tailwindcss.com/5samiwyr4v.
#layer utilities {
.scrollbar::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.scrollbar::-webkit-scrollbar-track {
border-radius: 100vh;
background: #f7f4ed;
}
.scrollbar::-webkit-scrollbar-thumb {
background: #e0cbcb;
border-radius: 100vh;
border: 3px solid #f6f7ed;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background: #c0a0b9;
}
}
yarn add -D tailwind-scrollbar
or
npm install --save-dev tailwind-scrollbar
then
plugins: [
// ...
require('tailwind-scrollbar'),
],
sample
<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
<div class="h-64"></div>
</div>
variants
variants: {
// ...
scrollbar: ['dark']
}
FOR SOME INSTANCE IF YOU WANT TO CHANGE THE WIDTH OF THE SCROLLBAR YOU CAN CUSTOME IN YOUR tailwind.css
#layer utilities {
.scrollbar-medium::-webkit-scrollbar {
width: 12px;
}
}
then
<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100 scrollbar-medium">
<div class="h-64"></div>
</div>
THERE IS ONLY ONE STYLE FOR SCROLLBAR WHICH IS scrollbar-thin... so customize this way
I've managed to style the scrollbar with Tailwin plugin like this:
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
// ...
plugins: [
plugin(({ addBase, theme }) => {
addBase({
'.scrollbar': {
overflowY: 'auto',
scrollbarColor: `${theme('colors.blue.600')} ${theme('colors.blue.200')}`,
scrollbarWidth: 'thin',
},
'.scrollbar::-webkit-scrollbar': {
height: '2px',
width: '2px',
},
'.scrollbar::-webkit-scrollbar-thumb': {
backgroundColor: theme('colors.blue.600'),
},
'.scrollbar::-webkit-scrollbar-track-piece': {
backgroundColor: theme('colors.blue.200'),
},
});
}),
],
// ...
};
And use like this:
<div class="scrollbar">
<!-- content -->
</div>
/* For Firefox Browser */
.scrollbar {
scrollbar-width: thin;
scrollbar-color: #000 #fff;
}
/* For Chrome, EDGE, Opera, Others */
.scrollbar::-webkit-scrollbar {
width: 20px;
}
.scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.scrollbar::-webkit-scrollbar-thumb {
background:#000;
}
TailwindCSS's doc changed scrollbar styles by scrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar:bg-transparent scrollbar-track:!bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300 scrollbar-track:!rounded, the plugin they use
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ['./src/**/*.{html,ts,tsx,js}'],
darkMode: 'media',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
// https://github.com/tailwindlabs/tailwindcss.com/blob/ceb07ba4d7694ef48e108e66598a20ae31cced19/tailwind.config.js#L280-L284
function ({ addVariant }) {
addVariant(
'supports-backdrop-blur',
'#supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))',
);
addVariant('supports-scrollbars', '#supports selector(::-webkit-scrollbar)');
addVariant('children', '& > *');
addVariant('scrollbar', '&::-webkit-scrollbar');
addVariant('scrollbar-track', '&::-webkit-scrollbar-track');
addVariant('scrollbar-thumb', '&::-webkit-scrollbar-thumb');
},
],
};
Addition to that comment : https://stackoverflow.com/a/69410151/18041352
You can add darktheme option just adding
dark:scrollbarkdark or what you want to name that.
<div className="... overflow-auto scrollbar dark:scrollbarkdark> ...
Then add this in your main css file like in that comment above.
.scrollbar::-webkit-scrollbar-track {
background: white;
}
.scrollbardark::-webkit-scrollbar-track {
background: black;
}
...
Extend Tailwind by adding your own base styles on top of Preflight, simply add them to your CSS within a #layer base directive:
//Inside styles.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
::-webkit-scrollbar-thumb{
#apply bg-transparent shadow-sm
}
::-webkit-scrollbar{
#apply w-3 bg-transparent
}
::-webkit-scrollbar-thumb{
#apply rounded-none bg-blue-400 /*color trackbar*/
}
}
Check out the documentation [here][1]
[1]: https://tailwindcss.com/docs/preflight
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 have a TailwindCSS 2.0 project and I've installed all the plugins, including the Typography plugin. When I create a div class="prose", I can put any headings, paragraphs, lists, etc into it and it gets styled by the Typography plugin.
In my project, I want all the within the prose class to be a certain blue, by default. And I also want the links to be a certain link colour that I've defined in my config. These are just a couple of modifications that I want to make so that the default prose class styles everything with my styles. How do I go about that and what is the best practice for it?
Typography plugin can be extended
tailwind.config.js
module.exports = {
theme: {
typography: {
DEFAULT: { // this is for prose class
css: {
color: theme('colors.yourSpecificColor'), // change global color scheme
p: {
fontSize: '14px', // key can be in camelCase...
'text-align': 'center', // or as it is in css (but in quotes).
},
a: {
// change anchor color and on hover
color: '#03989E',
'&:hover': { // could be any. It's like extending css selector
color: '#F7941E',
},
},
ul: {
'> li': {
'&::before': { // more complex example - add before to an li element.
content: '',
....,
},
},
},
},
},
sm: { // and this is for prose-sm.
css: {
....
},
},
},
},
}
Also worse to mention, if you change something in "other" breakpoints than just prose, for ex, 'prose-sm', 'prose-md', etc, changes does not inherits, so if you will change color to blue in prose, it will not change in prose-sm
Customization can be found here
P.S. In example bellow I could messed up with amount of curly brackets, sorry, to hard to track :)
vue 3
For people wanting to customize their own Typography including font size and name for all breakpoints
tailwind config
inside tailwind.config.js in extend
extend: {
fontSize: {
'exampleFont': '36px',
},
In your main.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
html {
#screen md {
.text-exampleFont {
font-size: 48px;
}
}
#screen lg {
.text-exampleFont {
font-size: 60px;
}
}
}
}
yourComponent.vue
<div class="text-exampleFont">hello</div>
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