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

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,

Save the file as Browser-style.css

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

<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.

karolware July 22, 2023Last Updated: January 15, 2024

0 142 8 minutes read

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

LOOKING FOR THE DEFAULT BROWSER CSS?

Why should you replace tailwind Reset CSS with browser Styles ?

Usage:

Define a Custom container

Example Vue Component CODES:

Example in normal HTML DIV

Import the Custom Browser style

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

Example import in Vue

Optional Two: import it within the style Tag

Example code in HTML using Style Tag

Example Full component code in Vue

Example Full code in HTML file

Conclusion

karolware

Read Next

Leave a Reply Cancel reply

Mastering Nuxt 3: Key Best Practices

Mastering Nuxt 3, Nest Js, Vue Js, Nuxt Js: A Comprehensive Guide

ASIMO: The Advanced Humanoid Robot Revolutionizing Robotics and Beyond

Top 10 Most Amazing Humanoid Robots

Meet Jia Jia: The Realistic Humanoid Robot Making Waves in Robotics

The 20 Best Ad Networks for Small Publishers To Monetize Blog and Website

Marked Down article

ASIMO: The Advanced Humanoid Robot Revolutionizing Robotics and Beyond

Meet Jia Jia: The Realistic Humanoid Robot Making Waves in Robotics

Ameca – The future of humanoid Robots

Is Java Worth Learning in 2023

LOOKING FOR THE DEFAULT BROWSER CSS?

Why should you replace tailwind Reset CSS with browser Styles ?

Usage:

Define a Custom container

Example Vue Component CODES:

Example in normal HTML DIV

Import the Custom Browser style

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

Example import in Vue

Optional Two: import it within the style Tag

Example code in HTML using Style Tag

Example Full component code in Vue

Example Full code in HTML file

Conclusion

karolware

Read Next

Mastering Nest Js API Development: A Guide

Mastering OAuth Integration in Nest Js

Leave a Reply Cancel reply

The 20 Best Ad Networks for Small Publishers To Monetize Blog and Website

Marked Down article

ASIMO: The Advanced Humanoid Robot Revolutionizing Robotics and Beyond

Meet Jia Jia: The Realistic Humanoid Robot Making Waves in Robotics

Ameca – The future of humanoid Robots

Is Java Worth Learning in 2023

Adblock Detected