i am running into some problems compiling my CSS. I create 3 custom classes in my index.css file and also use #apply for some longer classes.
#tailwind base;
#tailwind components;
#tailwind utilities;
#font-face {
font-family: "Spartan";
src: url('/fonts/static/Spartan-Bold.ttf') format("truetype");
}
#layer base {
:root {
--main: "#3a4764";
--keypad: "#232c43";
--screen: "#182034";
--key-blue: "#637097";
--key-shadow-blue: "#404e72";
--key-red: "#d03f2f";
--key-shadow-red: "#93261a";
--key: "#eae3dc";
--key-shadow: "#b4a597";
--text-dark: "#444b5a";
--text-white: "#ffffff";
}
.themeLight {
--main: "#e6e6e6";
--keypad: "#d1cccc";
--screen: "#ededed";
--key-blue: "#377f86";
--key-shadow-blue: "#1b5f65";
--key-red: "#ca5502";
--key-shadow-red: "#893901";
--key: "#e5e4e1";
--key-shadow: "#a69d91";
--text-dark: "#35352c";
--text-white: "#ffffff";
}
.themeRetro {
--main: "#160628";
--keypad: "#1d0934";
--screen: "#1d0934";
--key-blue: "#58077d";
--key-shadow-blue: "#bc15f4";
--key-red: "#00e0d1";
--key-shadow-red: "#6cf9f2";
--key: "#341c4f";
--key-shadow: "#871c9c";
--text-light: "#ffe53d";
--text-dark: "#1b2428";
--text-white: "#ffffff";
}
}
where in my css file do i write the classes which use #apply? My classes with #apply all use the color variables from my custom themes like so:
.key {
#apply w-1/5 h-1/6 flex justify-center items-center rounded-md border-b-4 pt-2 font-bold text-3xl;
}
.keyColor1 {
#apply border-skin-key-shadow bg-skin-key text-text_dark;
}
.keyColor2 {
#apply border-skin-key-shadow-blue bg-skin-key-blue text-white text-xl;
}
.keyColor3 {
#apply border-skin-key-shadow-red bg-skin-key-red text-white;
}
.toggle {
#apply bg-skin-key-red;
}
My tailwind config file:
theme: {
extend: {
backgroundColor: {
skin: {
main: "var(--main)",
keypad: "var(--keypad)",
screen: "var(--screen)",
'key-blue': "var(--key-blue)",
'key-shadow-blue': "var(--key-shadow-blue)",
'key-red': "var(--key-red)",
'key-shadow-red': "var(--key-shadow-red)",
key: "var(--key)",
'key-shadow': "var(--key-shadow)",
'text-dark': "var(--text-dark)",
'text-white': "var(--text-white)",
}
}
},
},
thanks in advance!
Figured out the problem i had some extra parantheses around the hex color codes in
:root {
--main: "#3a4764";
--keypad: "#232c43";
--screen: "#182034";
--key-blue: "#637097";
--key-shadow-blue: "#404e72";
--key-red: "#d03f2f";
--key-shadow-red: "#93261a";
--key: "#eae3dc";
--key-shadow: "#b4a597";
--text-dark: "#444b5a";
--text-white: "#ffffff";
}
--key-shadow: "#b4a597"; should be --key-shadow: #b4a597;.
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!
postcss.config.js
module.exports = {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
},
};
global.css
.form-control {
#apply w-full px-3;
& p {
#apply mb-1;
}
& input:not([type="checkbox"]),
& select,
& option,
& textarea {
#apply placeholder-gray-500 dark:placeholder-gray-text focus:outline-none focus:border-2 focus:border-brand-100 bg-bg-light-100 dark:bg-bg-dark-100 p-1 px-3 h-9 shadow-md;
}
& textarea {
#apply h-24;
}
&.error {
& input {
&:not([type="checkbox"]) {
#apply border-red-600 outline-none border-2;
}
}
}
}
The import plugin is working postcss-import but the nesting plugins aren't working (my styles are rendering) I'm using Nextjs by the way.
What do you want the css to output as? For instance if you want:
.form-control p{
//styles
}
then you should write it as
.form-control {
p {
#apply mb-1;
}
}
without the &.
I am trying to add body font but it is not working. I tried #apply font-serif, tried #font-face and both. not working.
Config
module.exports = {
purge: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
fontFamily: {
serif: ['ff-more-web-pro', 'serif'],
body: ['ff-more-web-pro', 'serif'],
},
},
};
Global css
/* ./styles/globals.css */
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
body,
html {
#apply text-black;
#apply font-serif;
}
#font-face {
font-family: ff-more-web-pro, serif;
font-style: normal;
font-weight: 300;
}
}
Using font-body class directly on any element in html works. Also #apply text-black in #layer base also works and is applied to all.
I'm styling a Next.js website using Tailwind CSS and trying to build a theme switching mechanism using CSS (Sass) variables.
Mainly I have two modes:
Default mode: Includes light and dark themes.
Minimalist mode: also includes light and dark themes but with much fewer colours (black and white mostly).
So generally the user has four options, and the same tailwind colour changes based on the dynamically provided classes.
Based on the main div class bg-primary should be as follows:
no class provided => default light theme, bg-primary = #79A542; // works perfectly
"dark" => default dark theme, bg-primary = #03004C; // works perfectly
"minimalist" => minimalist light theme, bg-primary = #FEFDF8; // works perfectly
"minimalist dark" => minimalist dark theme, bg-primary = #0f0f0f; // doesn't work
All of the theme combinations work except for "minimalist dark", the bg-primary is #03004C not #0f0f0f why is that? Why is the minimalist dark theme overridden by the default one?
This is my globals.scss file configuration:
#tailwind base;
#import url('https://fonts.googleapis.com/css2?family=Amiri&family=Montserrat&family=Rakkas&family=Roboto&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa&family=Lateef&display=swap');
:root {
/*default mode*/
--primary: #79A542;
--secondary: #CFF0A5;
--third: #CFF0A5;
--inverse: #0f0f0f;
--font-mono: 'Roboto Mono',monospace;
--font-sans: 'Montserrat', sans-serif;
& .arabic {
--font-mono: 'Amiri', serif;
--font-sans: 'Rakkas', cursive;
}
& .dark {
--primary: #03004C;
--secondary: #6A1497;
--third: #E61D6D;
--inverse: #7C54E1;
}
}
.minimalist {
/*Minimalist mode*/
--third: #98999B;
--inverse: transparent;
--primary: #FEFDF8;
--secondary: #0f0f0f;
& .dark {
--primary: #0f0f0f;
--secondary: #FEFDF8;
}
& .arabic {
--font-mono: 'Aref Ruqaa', serif;
--font-sans: 'Lateef', cursive;
}
}
#tailwind components;
#tailwind utilities;
This is my _app.js file:
import '../styles/globals.css'
import Nav from '../components/Nav'
import { useState} from 'react'
function MyApp({ Component, pageProps }) {
const [attributes, setAttributes] = useState("minimalist dark") // Themes are changed here
return (
<div className={attributes}>
<main className="bg-primary">
<Nav/>
</main>
</div>
)
}
export default MyApp
And this is my tailwind.config.js file:
module.exports = {
purge: ['./pages/**/*.js', './components/**/*.js'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extends: {
},
colors: {},
textColor: {
primary: 'var(--primary)',
secondary: 'var(--secondary)',
third: 'var(--third)',
inverse: 'var(--inverse)',
white: 'var(--white)',
black: 'var(--black)',
},
backgroundColor: {
primary: 'var(--primary)',
secondary: 'var(--secondary)',
third: 'var(--third)',
inverse: 'var(--inverse)',
white: 'var(--white)',
black: 'var(--black)',
},
fontFamily: {
'sans': 'var(--font-sans)',
'mono': 'var(--font-mono)',
},
},
variants: {
extend: {},
},
plugins: [],
}
Has the issue something to do with reusing the same dark class? How do I resolve this?
Your current CSS selector will be .minimalist .dark which means the dark class inside the minimalist class. You want to have the minimalist class that's also have a class of dark. In CSS that's .mimimalist.dark, without a space.
In SCSS, you need to remove the space between the parent selector (&) and the class name, like this:
.minimalist {
--third: #98999B;
--inverse: transparent;
--primary: #FEFDF8;
--secondary: #0f0f0f;
&.dark {
--primary: #0f0f0f;
--secondary: #FEFDF8;
}
}
The default .dark class works fine, because it's inside the :root class.
The default underline color in tailwind css is black. How can I change this color for example to a light green.
They have listed a way for one to change the default link underline color in the base style as below
#tailwind base;
a {
color: theme('colors.blue');
text-decoration: underline;
}
#tailwind components;
#tailwind utilities;
How would one go about changing the default normal underline color for say a span tag
There is no way to do that using the default tailwindcss build.
There are 2 ways to override the underline color:
Using simple CSS on your global CSS file
.underline {
text-decoration-color: red;
text-decoration: underline;
}
Extend the underline using the tailwind.config.js config file:
module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: [
function ({addUtilities}) {
const extendUnderline = {
'.underline': {
'textDecoration': 'underline',
'text-decoration-color': 'red',
},
}
addUtilities(extendUnderline)
}
]
}
If you are using v3 of tailwind you can use decoration-{color}.
For example:
<a href="#" class="underline decoration-green">
my link text
</a>
Here are the docs:
https://tailwindcss.com/docs/text-decoration-color