I'm trying to override the borderColor inside tailwind.config.js after upgrading from 2.2 to 3.0.0. Here's the implementation:
// tailwind.config.js
...
theme: {
extend: {
borderColor: ({ theme }) => ({
...theme('colors'),
DEFAULT: theme('colors.gray.300', 'currentColor')
}),
}
Any idea why? It used to work in 2.2 & lower. Or has the DEFAULT variable been removed in Tailwind 3.0?
Related
I am writing plugin to add custom styles in TailwindCSS, but I am a bit confused with values of theme(). I don't know how to see all the theme values to apply my base styles. How do I know where it is?
module.exports = {
// ...
plugins: [
plugin(function ({ addBase, addComponents, addUtilities, theme }) {
addBase({
'h1': {
fontSize: theme('fontSize.2xl'), // need to see more fontSize and properties, where I can see it?
},
'h2': {
fontSize: theme('fontSize.xl'),
},
})
}
]
}
I´ve been researching a lot about Vuetify + Storybook integration.
I installed Vuetify using Vite and then installed the storybook/vue3 plugin using:
npx sb init --builder storybook-builder-vite
The problem is that every component that I created is not using the Vuetify styles. I read here that I need to extend the Storybook app so my preview.js looks like:
// .storybook/preview.js
import { app } from '#storybook/vue3';
import vuetify from '../src/plugins/vuetify'
app.use(vuetify);
export const decorators = [
(story) => ({
components: { story },
template: '<v-app><story /></v-app>',
}),
];
But this doesn't seem to work. It doesn't throw any errors in the terminal and not in the browser but the vuetify styles and components do not work. My components are being render normally with Vuetify if I try to run the app itself.
Any ideas? I´m totally lost. Maybe there´s no support since Vuetify 3 is on alpha? Or this is a storybook issue?
Here´s my repo if you want to check it out https://github.com/heyimnowi/vue-ui-library
OMG I cannot believe I solve it by just doing this:
const path = require('path')
const vuetify = require('#vuetify/vite-plugin'); // THIS
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials"
],
"framework": "#storybook/vue3",
"core": {
"builder": "storybook-builder-vite"
},
async viteFinal(config, { configType }) {
config.resolve.alias['~storybook'] = path.resolve(__dirname)
config.resolve.alias['#'] = path.resolve(__dirname, '..', 'src')
config.css = {
preprocessorOptions: {
scss: { additionalData: `#import "src/styles/application.scss";` },
},
};
config.plugins = [
...config.plugins,
vuetify() // THIS
];
return config;
}
}
I'm using Mui5 with SC and I have issues with overriding theme base values.
I have base theme like this for base mui components, for example:
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: "1.75rem",
color: "red",
}
}
}
}
});
And now I like to extend the base button with custom colors like this with SC:
const StyledButton = styled(Button)(({ theme }: { theme: Theme }) => {
return {
fontFamily: theme.xxx,
color: "green"
};
});
This is not working, only the theme defaults are applied.
What's wrong with the implementation or what I'm missing?
BR,
Are you using any other package such as material-ui.
Are all your packages also up to date and have these installed:
"#emotion/css": "^11.9.0",
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#mui/material": "^5.9.1",
"#mui/styled-engine": "^5.8.7",
"#mui/styles": "^5.9.1",
I am working on a project which is set up with lerna mono repo, we have multiple stencilJS projects for an individual component inside packages of monorepo.
My project sructure is:
I am new to the storybook, now I have to set up the storybook at the root level which all the packages storybook.
I followed an article on the internet and I have set up something which works only for a single package component, due to the current style of setup.
Due to defineCUstomElements in preview.js it is loading the first project package loader I am able to see only the first project stories. Css is not loading for second project stories.
Can someone help me to set up a storybook at the root level which works for all packages?
My example
storybook/main.js
module.exports = {
"stories": [
"../stories/**/*.stories.mdx",
"../packages/plugin-*/src/components/plugin-*/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/addon-viewport',
'#storybook/addon-notes',
'#storybook/addon-docs'
]
}
storybook/preview.js
import { defineCustomElements } from '../packages/stencilProj1/loader';;
defineCustomElements();
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
};
package/stencilProj1/component1.stories.ts
import readme from './readme.md'
import React from 'react';
import ComponentButton from '../../../dist/collection/components/ComponentButton /ComponentButton';
export default {
title: 'Button',
component: ComponentButton,
argTypes: {
label: { control: 'text' },
type: { type: 'select', options: ['primary'] },
disabled: { control: 'boolean' }
},
parameters: {
markdown: readme
},
};
const Template = ({ label, type, disabled = false }) => {
return <component-button type={type} disabled={disabled}>{label}</component-button>;
};
export const Primary = Template.bind({});
Primary.args = {
type: 'primary',
label: 'Primary Button',
};
After a couple of months of attempts, I finally solved this puzzle :) And want to share my solution with community
I have a lerna v4 monorepo for react v17 + mui v5 components written in typescript and flavored with storybook v6 and webpack v5
mui has its wrappers in preview.js, that's why I added the path to .storybook in babel-loader
module.exports = {
core: {
builder: "webpack5",
},
framework: "#storybook/react",
stories: ["../components/**/*.stories.#(ts|tsx)"],
addons: [
"#storybook/addon-links",
"#storybook/addon-essentials",
{
name: "#storybook/preset-create-react-app",
options: {
craOverrides: {
fileLoaderExcludes: ["less"],
},
},
},
],
webpackFinal: config => {
const {
module: {
rules: [, , , , , { oneOf }],
},
} = config;
const babelLoader = oneOf.find(({ test }) => new RegExp(test).test(".ts"));
babelLoader.include = [/components\/(.*)\/src/, /.storybook/];
babelLoader.options.sourceType = "unambiguous";
return config;
},
};
it is also worth to mention my tsconfig has these lines
"rootDirs": [
"./src",
],
Have you tried to import project 2's defineCustomElement with "as" to rename it and use it?
(something along the line of following inside preview.js)
import { defineCustomElements } from '../packages/stencilProj1/loader';
import { defineCustomElements as defineSecondProject } from '../packages/stencilProj2/loader';
defineCustomElements();
defineSecondProject();
This is very manual and even if this works, if you have many repo might not be good solution but I've done something similar to load multiple component loaders and that seem to work OK for my use case in the past.
I wanna customize global style in chakra ui so that my all elements box-sizing is changed to border-box!
This is my trial. But nothing happens.
import { extendTheme } from '#chakra-ui/react';
const overrides: object = {
styles: {
global: {
'*': {
boxSizing: 'border-box',
},
},
},
};
export default extendTheme(overrides);
I import extendTheme in my _app.tsx file. I think this code is the problem.
Chakra's resetCSS enables boxSizing: 'border-box' so you don't have to do this when you extend your theme.
You can set this from the Chakra Provider <ChakraProvider resetCSS theme={theme}>