I want get Tailwindcss into my Salesforce org, so that I can use those classes for UI requirements in LWC/Aura components, Searched online a lot but couldn't find anything, Help me with the steps?
You must to get the tailwind css file(https://unpkg.com/tailwindcss#2.2.19/dist/tailwind.min.css), then you should upload as an static resource to the org.
You can add those styles from LWC using this code:
import resourceName from '#salesforce/resourceUrl/tailwind';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
loadStyle(this, resourceName + '/tailwind.min.css')
Just to mention, using in that way:
You can't customize Tailwind's default theme
You can't use any
directives like #apply, #variants, etc.
You can't enable additional
variants like group-focus
You can't install third-party plugins
You
can't tree-shake unused styles
Related
In my React application I'm rendering a MapView. However, the zoom in/out button along with any popup templates are appended below the map in standard html.
When I previously used esri-loader for importing arcgis modules, I could fix this issue by setting a CSS option to true, like so. The styling would match the API examples.
loadModules(["esri/views/MapView"], {css: true})
But I can't find any instance of a CSS or styling property in the MapView class. So how do I apply this styling when using #arcgis/core for imports?
The documentation recommends importing directly from the cdn:
#import "https://js.arcgis.com/4.20/#arcgis/core/assets/esri/themes/dark/main.css";
Or if you want to import it from your local, you can follow their instructions for referencing local assets, and import from your node_modules:
#import "#arcgis/core/assets/esri/themes/dark/main.css";
Storybook applies default styles to the the story canvas iframe. This prevents my stories from looking the way they should. How can I get rid of Storybook's default styles?
For example, here is the default style for an h2 element (via Storybook's page.css):
The source of that page.css is webpack://src/stories/page.css.
If I add styles in preview-head.html, Storybook will apply my custom styles AND the default Storybook styles, with the default Storybook styles taking precedence (unless my custom style has a strong specificity).
By default when installing Storybook via npx sb init for React, Storybook adds a Page.tsx (.js) file under src/stories. In that file they import './page.css'; simply remove that import and you'll be set.
Hope this is your fix... It may be different depending on what framework you're using.
Don't use MDX Syntax.
I had same issue and it was because I was using MDX Syntax.
When I started using the export syntax it didn't apply any built-in CSS classes.
I am trying to customize the theme when using Semantic-UI-React, there are detailed instructions on how to customize themes in Semantic-UI, like we can override variables to change their styles.
But I didn't find any way to customize themes with Semantic-UI-React, since there is no semantic/src/themes and semantic/src/site folders for us to make changes, what comes with Semantic-UI-React is just the default CSS file (the file we import in our index.js file "semantic-ui-css/semantic.min.css").
Is there any way we can customize the theme in Semantic-UI-React? Thanks in advance!
This link may also help in addition to the theming page on the docs site.
https://jsramblings.com/how-to-use-semantic-ui-with-a-custom-theme-in-your-cra-app/
It has a setup script after you run
npm install --save-dev semantic-ui
Yes there is a way to customize themes and create your own
https://react.semantic-ui.com/theming/
Basically just follow instructions from the docs link, install semantic-ui-less, which are not compiled Less files for the Semantic-ui CSS, craco-less which is just a path plugin for CRA configured Webpack so your Less compiler can find files properly without ejecting your CRA, move the files to created folder, modify theme.config, start app and you are ready to customize your own theme, although I didn't find some kind of API for variables on Semantic-ui docs, so I had to browse semantic-ui-less package files for them.
One problem I encountered was that I tried changing the theme for all components in theme.config and it was throwing errors about missing fonts and variables. Don't do this, it's not gonna work, check the Semantic-ui docs about theming, there is a note about it
Themes are per component, so although, for example, material themes are available for menu, button, and site, changing all values to "material" will produce an error for components which are not included in that theme.
https://semantic-ui.com/usage/theming.html#browsing-for-themes
I'm using an unejected create-react-app project with MaterialUI and trying to replace JSS with Styled Components. It's working fine, but the class names generated are not human readable.
I read that you can use a babel plugin to do that, but I can't change the Babel config without ejecting the project. I know that you can supply a custom class name generator function to StylesProvider to generate JSS class names. Is there a similar mechanism for Styled Components that would allow me to change the class names without ejecting my project?
Basically import like this, with macro:
import styled from "styled-components/macro";
It has the same functionality of the plugin, take a look in the documentation:
https://www.styled-components.com/docs/tooling#babel-macro
example here:
https://codesandbox.io/s/nostalgic-sea-8m3q1?fontsize=14
I have an ejected React app that is based on Create-React-App, and I am trying to install the #salesforce/design-system-react package to use the Salesforce lightning components in it. But to use this package is not as easy (seems that I need some extra configuration for Barbel and Webpeck). I don't have much experience on config Barbel and Webpeck and need some help to get me started.
Can someone please let me know how can I get that .BABELRC and the Webpack v1 files described from this site: https://react.lightningdesignsystem.com/getting-started/ ?
Many thanks,
No need to configure anything. Just import the CSS.
In your index.js, add the following line.
import "#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css";
Now you should remove the styling in App.css since the default styling in Create React App will affect your Lightning Components (font-size for example)