I want to ignore all classes started with w- and all breakpoint width classes like lg:w- in Tailwind Utility classes.
This is what I did in my tailwind.config.js file:
purge: {
options: {
whitelistPatterns: [/^w-/]
}
},
But it seems not ignoring w- classes. How can I do this?
I don't think your regex is working as expected in your whitelistPatterns if you take a look at https://regexr.com/5kifo. It will match all w- classes thanks to the addition of + at the end.
The regex for those who don't want to click on the link:
/w-+/g
Related
When I added Tailwind to my React project, it breaks existing styles.
I was hoping to just use Tailwind classes (like mb-3) for shortcuts.
I didn't expect it to overwrite existing styles, like changing button background to transparent.
Am I doing it wrong? Or does Tailwind overwrite styles on purpose?
EDIT:
This is what I'm talking about: (which comes from node_modules\tailwindcss\src\css\preflight.css)
The issue goes away when I exclude base, i.e:
//#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
EDIT 2:
Found the solution!
module.exports = {
corePlugins: {
preflight: false,
}
}
When you use both bootstrap and tailwind-css at the same time, you will face naming conflicts which will lead to undefined behavior ,
To avoid this, use the prefix option in your tailwind.config.js file
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
So now you can use the prefix tw- before the class name of tailwind-css which wont break any of your existing styles.
Note if you want tailwind classes to get more precedence than any other css styles , you can set the important option to true on tailwind.config.js
module.exports = {
important: true,
}
To understand the css precedence follow this What is the order of precedence for CSS?
Extended answer:
Thanks to Aximili ,
Tailwind-Css implements Preflight by default in their projects which is an opinionated set of base styles.
And this is build on top of modern-normalize
And Tailwind automatically injects these styles in #tailwind base.
So to overcome this .Remove #tailwind base from the css file or Add preflight: false,
module.exports = {
corePlugins: {
preflight: false,
}
}
Hope it helps!
Add the following line to your tailwind.config.js
module.exports = {
prefix: 'tw-',
}
An now you can use both bootstrap and tailwind but you will have to use tw- before tailwind classes such as tw-mb-2, tw-text-right etc.
while you still can use bootstrap normally. The classes won't conflict anymore.
I will not recommend using important in tailwind.config.css because you still might want to use the bootstrap at some location so the prefix is the best bet here.
I am using this:
https://ng-bootstrap.github.io/#/components/timepicker/examples
Copy pasted the following code:
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
The result should be like this:
But it is different in a sense that annoying texts appear:
How to remove them? The api documentation doesn't mention anything about this.
those elements have class sr-only. It is a bootstrap class. According to docs:
Use screenreader utilities to hide elements on all devices except screen readers
Looks like the styles you use in the project. You might miss some css from bootstrap or some nasty things overrides the .sr-only styles.
In my case, the bootstrap css wasn't properly applied in my Angular project.
I had to add following line in the global styles.css.
#import url("https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css");
Just add ng-version = "1.5" to the ngb-timepicker to remove the annoying texts. Like this:
<ngb-timepicker ng-version = "1.5" [(ngModel)]="time"></ngb-timepicker>
That worked for me, but I have no idea why.
The solution is the next:
<ngb-timepicker [(ngModel)]="time" [spinners]="false"></ngb-timepicker>
Those are called "spinners" and are set as "true" by default.
Hope it works for you!
fast resolve
styles: [`
.visually-hidden{
display: none !important;
}
.visually-hidden{
display: none;
}
Add this to your style.scss or a seperatly design for the component and it will work
I just had to add
::ng-deep .visually-hidden{
display: none;
}
In Tailwind Officail docs, there are lots of width utilities we can use.
However, the maximum fixed width I can specify is w-96, which is width: 24rem; (384px)
I've noticed a weird class called w-px, at first glance, I thought I can do w-600px, but it's not working, it is exactly 1px.
I am currently migrating my old project to Tailwind CSS, so there are going to have lots of weird widths I need to specify, but Tailwind CSS doesn't provide them by default.
If I can just do w-600px would be nice, or am I missing any other better approach?
If you configure your Tailwind install to run in just-in-time mode, and you are running tailwind 2.1+, you can use their arbitrary value support. https://tailwindcss.com/docs/just-in-time-mode
For example, I needed a width of 600px, here is how I specified it:
h-[600px]
Can you please check the below code? Hope it will work for you.
#1 You need to add the below code in tailwind.config.js
module.exports = {
theme: {
extend: {
width: {
'600': '600px',
}
}
}
}
#2 After that you can use w-600 in your HTML file like below.
<div class="w-600">...</div>
You were just missing the brackets [ ]. Try this:
w-[600px]
Take a look on the section "Arbitrary values" that most part of Tailwind classes have. There you can see how you can set any value you want.
Arbitrary values for with https://tailwindcss.com/docs/width#arbitrary-values
If you need to use a one-off width value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<div class="w-[600px]">
<!-- ... -->
</div>
I cannot find a good way to scope tailwind CSS when including it in a system where I don't want it to apply globally that works with custom build options.
Essentially I want to do this:
.tailwind{
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
}
But PostCSS importer doesn't like this due to the fact it imports before the tailwind placeholders are replaced. So the only way to make it work is to break the build into 2 stages then import the compiled css like:
.tailwind{
#import "tailwindcss.css";
}
It works but it breaks some of the css rules which show up in dev tools.
Is there a better way to scope tailwind to stop it interfering with other systems?
I've found that you can use postcss-nested for this. Install the plugin, add it as the first plugin to your PostCSS config file and this should work:
.tailwind {
#tailwind base;
#tailwind components;
#tailwind utilities;
#tailwind screens;
}
From the docs...
The prefix option allows you to add a custom prefix to all of Tailwind's generated utility classes. This can be really useful when layering Tailwind on top of existing CSS where there might be naming conflicts.
For example, you could add a tw- prefix by setting the prefix option like so:
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
You will achieve this by setting important in the tailwind config to your parent class or id. See docs.
// tailwind.config.js
module.exports = {
important: '.tailwind',
}
Unfortunately, this seems to only be affecting the components and utilities styles... the base styles will remain unaffected.
As requested leaving my answer here:
I used the prefix as suggested by Lanny
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
And then made my tailwind css file like this:
#import "tailwindcss/components";
#import "tailwindcss/utilities";
Then I just manually copied any base styles that I wanted manually into my main css file and manually changed anything that conflicted.
I think the tricky part here is actually about the preflight/reset.css. You want to fend off external styling from coming to your scope but also don't want to pollute the external system with your tailwind style.
My current set up include following steps:
In tailwind.config.js we disable the prefight, defining a prefix tw-, and adding an extra selector #app via option important. The last change will add an extra css selector to output, e.g. #app .tw-mb-4.
module.exports = {
important: '#app',
prefix: "tw-",
corePlugins: {
preflight: false,
},
Find and copy the content of base.css from node_modules folder before pasting it into a scss file with a parent selector #app. You can compile this using any online SCSS compiler. This will help you only reset styling within your scope.
#app {
/*content from base.css*/
}
Copy compiled the styling from #2 and paste to the beginning of your tailwind css file.
Structure the html so you contents are wrapped within a div with the id of #app.
Tailwind's important option doesn't seem to add selector to #layer component so you will have to include that in your component styling.
#layer components {
#app .page-h1 {
#apply tw-mt-0 tw-mb-2 tw-text-center tw-leading-8 tw-text-4xl md:tw-text-5xl;
}
}
According to the docs:
If you’d like to completely disable Preflight — perhaps because you’re integrating Tailwind into an existing project or because you’d like to provide your own base styles — all you need to do is set preflight to false in the corePlugins section of your tailwind.config.js file.
This seems to work with Wordpress in the admin but it does remove the normalization, like cursor: pointer on button hover, for example.
What I have done is this
module.exports = {
prefix: 'tw-',
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
purge: {
enabled: true,
content: ['./src/**/*.{html,ts}']
},
plugins: [],
corePlugins: {
preflight: false,
}
}
It will reduce build size as ,I have purged CSS, disable global CSS,as I have used preflight, and now If u want to apply tailwind class use as
<div class="tw-m-4"></div>
As we have used tw in prefix
I prefer create project style and components style with tailwind css framework. I want to use a few ant design component. Tailwindcss and ant.design have problems together. Ant design alignment loses when we import #import 'tailwindcss/base' to the project and when we delete it ant design alignment will work fine. ant design modify global styles and according of document I try to prevent this but not work this method for me!
My babel.config.js:
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
I add this plugin to my webpack config:
new webpack.NormalModuleReplacementPlugin(
/node_modules\/antd\/lib\/style\/index\.less/,
path.resolve(__dirname, './src/antd.less'),
),
and antd.less file:
#antd {
#import '~antd/es/style/core/index.less';
#import '~antd/es/style/themes/default.less';
}
I would recommend overriding some of Tailwind's base styles that are causing problems with Ant Design. For me, Ant Design icons did not have the correct vertical alignment when including Tailwind, so I replaced their default svg style in my global css file.
#tailwind base;
/* Override base SVG style to work with Ant Design */
svg {
vertical-align: initial;
}
TailwindCSS applies certain base styles to smoothen the cross-browser experience.
Since you are also using Ant Design, which applies some base styles of its own, setting preflight to false in your tailwind config should work:
module.exports = {
corePlugins: {
preflight: false,
}
}