Recently, I've been incorporating Material UI with Angular. With the deprecation of flexlayout and the rise of Tailwind as a recommended alternative, I'm wondering if it's feasible to utilize both Material UI and Tailwind in tandem. How can I seamlessly integrate Tailwind classes into my project? Should they be added to new elements or incorporated directly into the existing <mat- ... > tags?
Your inquiry appears to be muddled, so I will provide some clarification:
Material UI is a design-centric framework, and Angular Material UI is a component library that aligns with this design philosophy. Overriding styles can be challenging as the configuration is done through a scss stylesheet.
Contrary to popular belief, Tailwind is a versatile css utility library that allows for customization. It is an alternative way of writing css similar to sass or less. While it does come with default styles, they can be easily overridden, turning class names into design tokens.
I have been using Material UI with Angular, however as flexlayout is deprecated now, and Tailwind is recommended
Who exactly is recommending Tailwind over FlexLayout? While I am a fan of Tailwind, it is unlikely that official sources from Angular are suggesting such a switch.
, so is it sustainable to use both Material UI and Tailwind together?
It is feasible to use both frameworks simultaneously, especially if you utilize Tailwind for positioning components, essentially treating it as you would traditional css.
I recommend configuring your Tailwind setup to match the angular colors and typography you are utilizing for consistency.
angular-styles.scss
$indigo-palette: (
900: #19216c,
800: #2d3a8c,
etc.
);
$my-theme: mat.define-light-theme(
(
color: (
primary: mat.define-palette($indigo-palette, 600),
accent: mat.define-palette($orange-palette, 600),
warn: mat.define-palette($red-palette, 500),
),
typography: mat.define-typography-config(),
density: 0
)
);
@include mat.all-component-themes($my-theme);
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
colors: {
white: colors.white,
indigo: {
900: '#19216c',
800: '#2d3a8c',
etc.
In order to use Tailwind classes , how do I apply it?
To apply Tailwind classes, simply add them to your elements like so:
<mat-card class="max-w-xl flex-1">
...
Add to a new or to the <mat- ... > tags ?
If you intend to use Tailwind classes to modify the style of material components, I advise against this approach.
To use Tailwind classes in HTML elements, some classes may require a prefix of "!" to work properly.
<mat-expansion-panel class="!shadow-none">
Add !important to the class
</mat-expansion-panel>
For more information on using "!important" with Tailwind classes, visit https://tailwindcss.com/docs/configuration#important in the official documentation.
If you're looking to incorporate Tailwind CSS into your Angular project, make sure to refer to the comprehensive guide provided in the official documentation. You can access it through this link: https://tailwindcss.com/docs/guides/angular
I'm trying to incorporate the MUI Button Component into my storybook and then dynamically change MUI attributes like variant, color, and disabled status directly from the storybook. While I was successful in doing this with a simple plain HTML button, ...
I'm currently working on creating a form using the Material-UI library. I'm having difficulty figuring out how to distinguish my TextField when they are in readOnly mode versus edit mode. At the moment, they appear identical and I would like the ...
Greetings! Currently, I am in the process of generating a dynamic form within a new tab using JavaScript. For some reason, the margin effects on the div element are not being applied correctly. Despite my attempts to set the margins using both classes and ...
The date and time on my website is currently being shown using "new date()". Currently, it appears as: Thu May 17 2018 18:52:26 GMT+0530 (India Standard Time) I would like it to be displayed as: Thu May 17 2018 18:43:42 GMTIST ...
I am facing a challenge with positioning my main title, logo, and subtitle. I want the subtitle to be centered regardless of the logo's width. Currently, the position of the sub title changes based on the logo's width, resulting in it not aligni ...
I am currently working on generating a chart using data obtained from an API call. To achieve this, I am utilizing the google-charts-angular package within my HTML: <google-chart [title]="title" [type]="type" [data]="data" ...
I am facing an issue with a container having the className "container". When I set the height to 100vh like this: .container{ height:100vh } Whenever I resize my screen, such as with dev-tools, the div also shrinks. How can I prevent this? Is it possi ...
I am working on a webpage that features a fixed menu at the top-left corner, followed by the main content. My goal is to ensure that the content appears below the menu, but since I do not know the exact height of the menu in advance (as it can vary based o ...
A situation has arisen with a link that opens an image using nyroModal. While everything is functioning correctly, the Modal window appears in the center of the page instead of aligning with the middle of the browser window. As a result, only the upper por ...
Hello! I am looking for a solution that will cause the navigation contents to slide out from the left when the div class "bt-menu" is clicked. It should also slide back in to the left either when the div is clicked again or when anywhere outside of the nav ...
Currently, I am facing an issue while attempting to deploy a .NET Core 3.1 API + Angular application on Linux Centos. The application runs fine on the server; however, the browser fails to load it properly. Surprisingly, when I publish the same project for ...
I have attempted to modify this code to change the background color of li tag on click. It successfully changes the background color when hovering or clicking, but unfortunately reverts back to the default color upon page refresh. I am looking for a soluti ...
In my Next.js application (version 13), I have various components styled with Tailwind CSS. These components are pulled from a React CMS system using Node.js and sanitized with the cheerio library. After scraping, the resulting HTML content is sent to the ...
My component is generating a Material-UI Table wrapped inside a TableContainer const DataReleaseChart = (): React.FC<?> => { return ( <TableContainer sx={{ display: 'grid', rowGap: 7, }} > ...
I'm having trouble populating a select component from Material UI with data retrieved from my database. Although I can display the data in the component, upon selecting an option it breaks and displays the error "categorias.map is not a function". Any ...
Within a div, I have placed three radio buttons with images inline. My goal is to show a validation message using bootstrap when the submit button is clicked and there is no user input. I attempted to add another div after the radio buttons with the class ...
Apologies if this question has been asked before, as I couldn't find it. I have an HTML table with images used as buttons: <td> <button class="trigger"> <img src="D:\Elly Research\ CO2858\Presentation\Calypso ...
My website logo is displaying incorrectly in Opera, despite working fine in Firefox and Chromium. I've been trying to troubleshoot this issue for the past few hours with no success. The ID of the logo element is 'Logo'. You can view the sit ...
I have TextField elements in my application that appear to be too large. Upon inspection, I noticed that the input element within them has default padding that is too big.https://i.stack.imgur.com/C13hj.png My query is regarding how to adjust the styling ...
I need assistance aligning my social media icons with the navbar on the right side of the display. Can someone provide guidance? The first image shows the current layout, while the second image illustrates how I would like it to appear: http://imgur.com/a ...