How to scope Tailwind Css

user_657477 0
Viewed 7973

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?

tailwind-css
7 Answers

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;
}
user_32063150

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-',
}
user_42192090

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.

user_63897640

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.

user_6574770

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:

  1. 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,
  },
  1. 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*/
}

  1. Copy compiled the styling from #2 and paste to the beginning of your tailwind css file.

  2. Structure the html so you contents are wrapped within a div with the id of #app.

  3. 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;
    }
}
user_24526300

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.

user_32557560

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

user_137283410
Related