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 &.
Related
Image
Hi everyone, I have error in css file, with custorm tailwind class. How to fix it?
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,ts}'],
theme: {
extend: {},
},
plugins: [],
}
Image
If I delete focus:shadow-outline code, it's begin working
shadow-outline is a custom class.
You must first define it before using it like this:
#layer components {
.shadow-outline {
#apply w-auto /*some classes*/;
}
.button {
#apply block uppercase mx-auto shadow bg-indigo-800 hover:bg-indigo-700 focus:shadow-outline focus:outline-none text-white text-xs py-3 px-10 rounded;
}
}
I tried to change label's margin (see the attached image to the question) from px to em/rem, but i don't know where i should write styles to structure. I can't find in MUI documentation "adjacent sibling combinator".
createTheme({
MuiTextField: {
defaultProps: {
// props
},
styleOverrides: {
root: {
// styles
}
}
}
})
generated css style in inspector tab
If you are using material-ui 5:
import { createTheme } from '#mui/material';
const theme = createTheme({
components: {
MuiTextField: {
styleOverrides: {
root: {
'& label': {
margin: '2rem',
},
},
},
},
},
});
export default theme;
https://mui.com/pt/material-ui/customization/theme-components/
I finally resolve it ;) I added to InputLabel this line "& + .MuiInputBase-root" to change TextField's (and another inputs) label
MuiInputLabel: {
defaultProps: {
// props
},
styleOverrides: {
root: {
// styles
"& +.MuiInputBase-root": {
marginTop: '2em'
}
}
}
}
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;.
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'm using TailwindCSS and PostCSS and I have this css code:
.btn {
#apply py-1;
#apply px-4;
#apply border;
#apply rounded;
}
.btn:hover {
#apply bg-white text-black;
}
.btn:focus {
#apply bg-black text-white;
}
Is there a native way in PostCSS (or with a plugin) to write this code like the below?
.btn {
#apply py-1;
#apply px-4;
#apply border;
#apply rounded;
&:hover {
#apply bg-white text-black;
}
&:focus {
#apply bg-black text-white;
}
}
Use postcss-preset-env.
First install, npm install postcss-preset-env --save-dev.
Then enable nesting-rules in your postcss.config.js file,
module.exports = {
plugins: [
"tailwindcss",
[
"postcss-preset-env",
{
stage: 3,
features: {
"nesting-rules": true,
},
},
],
],
};
Here you can find the list of features ID that can be enabled
You could also use postcss-nested plugin.
In your package.json:
{
"dependencies": {
"postcss": "^8.2.9",
"tailwindcss": "^2.0.4",
"postcss-nested": "^5.0.5"
}
}
In your postcss.config.js:
module.exports = {
plugins: [
require('postcss-nested'),
require('tailwindcss'),
]
}
Works too, following the object notation Reference
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
'postcss-preset-env': { stage: 2 },
},
}