CSS

Remove tailwind CSS reset in a componet : The Default Browser CSS

Photo of karolware karolware Send an email July 22, 2023Last Updated: January 15, 2024
0 387 8 minutes read
vue nuxt 7LU

LOOKING FOR THE DEFAULT BROWSER CSS?

well, if that is your concern then you are at the right place in this article am going to show how you can replace the default Tailwind CSS present with your browser CSS style
image

Why should you replace tailwind Reset CSS with browser Styles ?

Are you creating a blog in which you receive raw html data and you display them on your browser, You are not able to define each tag used manual because you don’t which tags are used, Then this might be a good Option for you.

Usage:

Given below are the default browser CSS styles they might not be all but The common one which are used daily. The following CSS are meant to be used in a specific component. in which you are intended to remove the default Taiwind reset.

Define a Custom container

you will need to define a custom container where you wish to replace the Default Browser CSS, add a class called custom-content .

Example Vue Component CODES:

<template>
 <div class="w-full md:w-2/3 items-start pb-7" :class="customClass">  
 <PostData :passData="filteredPost" />                       

</div>
</template>

<script setup>
const customClass = 'custom-content';

</script>

Example in normal HTML DIV

<div class="custom-content'">
<!-- Raw HTML -->
</div>

Import the Custom Browser style

since they are just used in a componet you can either import it as a file or use the style tag and paste the code below.

Option 1: Create a new file and name it Browser-style.css

create a new file and call it Browser-style.css, the paste the following code inside it
Please view full source code from http://news.tronlitetechnology.com/default-pre-defined-browser-css-file
“then,

  1. Save the file as Browser-style.css
  2. Import the file to your html or to your component (anywhere where it can be Rendered)
    Example import in Vue
    
<template>
<div class="w-full md:w-2/3 items-start pb-7" :class="customClass">  
<PostData :passData="filteredPost" />
</div>
</template>
<script setup>
import 'path/to/file/Browser-style.css'
const customClass = 'custom-content';
</script>

You can also import it in normal html as 
```html
<link rel="stylesheet" href="Browser-style.css"/>

Optional Two: import it within the style Tag

here you can just add the style html tag and paste the following codes

<style></style>
Example code in HTML using Style Tag
<style>
.custom-content p {
  display: block !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  margin: 1em 0 !important;
  /* Add any other custom styles you want */
}

.custom-content blockquote {
  border-left: 4px solid #666 !important;
  padding-left: 10px !important;
  font-style: italic !important;
  /* Add any other custom styles you want */
}

.custom-content ul {
  /* description */
  display: block !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  padding-inline-start: 40px !important;
  list-style-type: disc !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  counter-reset: list-item !important;
  list-style-image: none !important;
  list-style-position: outside !important;
  margin: 1em 0 !important;
  padding: 0 0 0 30pt !important;
}

.custom-content ol {
  /* description */
  display: block !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  padding-inline-start: 40px !important;
  list-style-type: decimal !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  counter-reset: list-item !important;
  list-style-image: none !important;
  list-style-position: outside !important;
  margin: 1em 0 !important;
  padding: 0 0 0 30pt !important;
}

.custom-content b {
  font-weight: bolder !important;
}

.custom-content i {
  font-style: italic !important;
}

.custom-content h1 {
  display: block !important;
  font-weight: bold !important;
  font-size: 2em !important;
  margin-block-start: 0.67em !important;
  margin-block-end: 0.67em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content h2 {
  display: block !important;
  font-weight: bold !important;
  font-size: 1.5em !important;
  margin-block-start: 0.83em !important;
  margin-block-end: 0.83em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content h3 {
  display: block !important;
  font-weight: bold !important;
  font-size: 1.17em !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content h6 {
  display: block !important;
  font-weight: bold !important;
  font-size: 0.67em !important;
  margin-block-start: 2.33em !important;
  margin-block-end: 2.33em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content table {
  display: table !important;
  box-sizing: border-box !important;
  border-spacing: 2px !important;
  border-collapse: separate !important;
  text-indent: initial !important;
  border-color: gray !important;
}
.custom-content tr {
  display: table-row !important;
  border-color: inherit !important;
  vertical-align: inherit !important;
}
.custom-content td {
  display: table-cell !important;
  padding: 1px !important;
  vertical-align: inherit !important;
}
.custom-content u {
  text-decoration: underline !important;
}
.custom-content a {
  color: #0000EE !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
.custom-content a:active {
  color: #FF0000 !important;
}
.custom-content a:visited {
  color: #551A8B !important;
}
.custom-content pre {
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  font-family: monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  /* Add any other custom styles you want */
}

.custom-content code {
  margin: 0;
  white-space: pre-wrap;

}
.content-custom table td, table th,table tr {
    background-color: transparent !important;
    border-left: 4px solid #e6e9ec !important;
    border-bottom: 4px solid #e6e9ec !important;
    border-right: 4px solid #e6e9ec !important;
    border-top: 4px solid #e6e9ec !important;
    font-size: inherit !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 5px !important;
    font-weight: 600 !important;
}

.content-custom tr{
    background-color: transparent !important;
    border-left: 4px solid #e6e9ec !important;
    border-bottom: 4px solid #e6e9ec !important;
    font-size: inherit !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 5px !important;
    font-weight: 600 !important;

}
.content-custom .alignleft {
    float: left;
    margin: 0 1em 0 0;
}
.content-custom .ytp-cued-thumbnail-overlay-image {
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
}
.content-custom .html5-video-player {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    outline: 0;
    font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
    color: #eee;
    text-align: left;
    direction: ltr;
    font-size: 11px;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
    -ms-high-contrast-adjust: none;
}

</style>
Example Full component code in Vue
<template>
 <div class="w-full md:w-2/3 items-start pb-7" :class="customClass">  
 <PostData :passData="filteredPost" />
</div>
</template>
<script setup>
import 'path/to/file/Browser-style.css'
const customClass = 'custom-content';
</script>
<style>
.custom-content p {
  display: block !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  margin: 1em 0 !important;
  /* Add any other custom styles you want */
}

.custom-content blockquote {
  border-left: 4px solid #666 !important;
  padding-left: 10px !important;
  font-style: italic !important;
  /* Add any other custom styles you want */
}

.custom-content ul {
  /* description */
  display: block !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  padding-inline-start: 40px !important;
  list-style-type: disc !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  counter-reset: list-item !important;
  list-style-image: none !important;
  list-style-position: outside !important;
  margin: 1em 0 !important;
  padding: 0 0 0 30pt !important;
}

.custom-content ol {
  /* description */
  display: block !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  padding-inline-start: 40px !important;
  list-style-type: decimal !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  counter-reset: list-item !important;
  list-style-image: none !important;
  list-style-position: outside !important;
  margin: 1em 0 !important;
  padding: 0 0 0 30pt !important;
}

.custom-content b {
  font-weight: bolder !important;
}

.custom-content i {
  font-style: italic !important;
}

.custom-content h1 {
  display: block !important;
  font-weight: bold !important;
  font-size: 2em !important;
  margin-block-start: 0.67em !important;
  margin-block-end: 0.67em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content h2 {
  display: block !important;
  font-weight: bold !important;
  font-size: 1.5em !important;
  margin-block-start: 0.83em !important;
  margin-block-end: 0.83em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content h3 {
  display: block !important;
  font-weight: bold !important;
  font-size: 1.17em !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content h6 {
  display: block !important;
  font-weight: bold !important;
  font-size: 0.67em !important;
  margin-block-start: 2.33em !important;
  margin-block-end: 2.33em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content table {
  display: table !important;
  box-sizing: border-box !important;
  border-spacing: 2px !important;
  border-collapse: separate !important;
  text-indent: initial !important;
  border-color: gray !important;
}
.custom-content tr {
  display: table-row !important;
  border-color: inherit !important;
  vertical-align: inherit !important;
}
.custom-content td {
  display: table-cell !important;
  padding: 1px !important;
  vertical-align: inherit !important;
}
.custom-content u {
  text-decoration: underline !important;
}
.custom-content a {
  color: #0000EE !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
.custom-content a:active {
  color: #FF0000 !important;
}
.custom-content a:visited {
  color: #551A8B !important;
}
.custom-content pre {
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  font-family: monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  /* Add any other custom styles you want */
}

.custom-content code {
  margin: 0;
  white-space: pre-wrap;

}
.content-custom table td, table th,table tr {
    background-color: transparent !important;
    border-left: 4px solid #e6e9ec !important;
    border-bottom: 4px solid #e6e9ec !important;
    border-right: 4px solid #e6e9ec !important;
    border-top: 4px solid #e6e9ec !important;
    font-size: inherit !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 5px !important;
    font-weight: 600 !important;
}

.content-custom tr{
    background-color: transparent !important;
    border-left: 4px solid #e6e9ec !important;
    border-bottom: 4px solid #e6e9ec !important;
    font-size: inherit !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 5px !important;
    font-weight: 600 !important;

}
.content-custom .alignleft {
    float: left;
    margin: 0 1em 0 0;
}
.content-custom .ytp-cued-thumbnail-overlay-image {
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
}
.content-custom .html5-video-player {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    outline: 0;
    font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
    color: #eee;
    text-align: left;
    direction: ltr;
    font-size: 11px;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
    -ms-high-contrast-adjust: none;
}

</style>
Example Full code in HTML file

here is the complete code in HTML

Related Articles
<html>
<head>
<style>
.custom-content p {
  display: block !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  margin: 1em 0 !important;
  /* Add any other custom styles you want */
}

.custom-content blockquote {
  border-left: 4px solid #666 !important;
  padding-left: 10px !important;
  font-style: italic !important;
  /* Add any other custom styles you want */
}

.custom-content ul {
  /* description */
  display: block !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  padding-inline-start: 40px !important;
  list-style-type: disc !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  counter-reset: list-item !important;
  list-style-image: none !important;
  list-style-position: outside !important;
  margin: 1em 0 !important;
  padding: 0 0 0 30pt !important;
}

.custom-content ol {
  /* description */
  display: block !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  padding-inline-start: 40px !important;
  list-style-type: decimal !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  counter-reset: list-item !important;
  list-style-image: none !important;
  list-style-position: outside !important;
  margin: 1em 0 !important;
  padding: 0 0 0 30pt !important;
}

.custom-content b {
  font-weight: bolder !important;
}

.custom-content i {
  font-style: italic !important;
}

.custom-content h1 {
  display: block !important;
  font-weight: bold !important;
  font-size: 2em !important;
  margin-block-start: 0.67em !important;
  margin-block-end: 0.67em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content h2 {
  display: block !important;
  font-weight: bold !important;
  font-size: 1.5em !important;
  margin-block-start: 0.83em !important;
  margin-block-end: 0.83em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content h3 {
  display: block !important;
  font-weight: bold !important;
  font-size: 1.17em !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content h6 {
  display: block !important;
  font-weight: bold !important;
  font-size: 0.67em !important;
  margin-block-start: 2.33em !important;
  margin-block-end: 2.33em !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}
.custom-content table {
  display: table !important;
  box-sizing: border-box !important;
  border-spacing: 2px !important;
  border-collapse: separate !important;
  text-indent: initial !important;
  border-color: gray !important;
}
.custom-content tr {
  display: table-row !important;
  border-color: inherit !important;
  vertical-align: inherit !important;
}
.custom-content td {
  display: table-cell !important;
  padding: 1px !important;
  vertical-align: inherit !important;
}
.custom-content u {
  text-decoration: underline !important;
}
.custom-content a {
  color: #0000EE !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
.custom-content a:active {
  color: #FF0000 !important;
}
.custom-content a:visited {
  color: #551A8B !important;
}
.custom-content pre {
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  font-family: monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  overflow-x: auto !important;
  /* Add any other custom styles you want */
}

.custom-content code {
  margin: 0;
  white-space: pre-wrap;

}
.content-custom table td, table th,table tr {
    background-color: transparent !important;
    border-left: 4px solid #e6e9ec !important;
    border-bottom: 4px solid #e6e9ec !important;
    border-right: 4px solid #e6e9ec !important;
    border-top: 4px solid #e6e9ec !important;
    font-size: inherit !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 5px !important;
    font-weight: 600 !important;
}

.content-custom tr{
    background-color: transparent !important;
    border-left: 4px solid #e6e9ec !important;
    border-bottom: 4px solid #e6e9ec !important;
    font-size: inherit !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 5px !important;
    font-weight: 600 !important;

}
.content-custom .alignleft {
    float: left;
    margin: 0 1em 0 0;
}
.content-custom .ytp-cued-thumbnail-overlay-image {
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
}
.content-custom .html5-video-player {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    outline: 0;
    font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
    color: #eee;
    text-align: left;
    direction: ltr;
    font-size: 11px;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
    -ms-high-contrast-adjust: none;
}

</style>

</head>
<body>
<div class="custom-content'">
<!-- Raw HTML -->
</div>

</body>
</html>

make sure to define the custom-content class

Conclusion

This short Documentation is still in progress you may encounter any problem. please be sure to leave a comment below, if it helped you all if it lacks something and we will provide an update.

Photo of karolware karolware Send an email July 22, 2023Last Updated: January 15, 2024
0 387 8 minutes read
Photo of karolware

karolware

copyright © at TronLite Magazine all Right Reserved by TronLite Technology ™ from 2019 to 2024
Tronlite Technology we are proud of our innovative Tech magazines powered by AI and Powerful conts from worlds content creators
Back to top button
Close

Adblock Detected

Please disable your adBlocker. we depend on Ads to fund this website. Please support us by whitelisting us. We promise CLEAN ADS ONLY