tw-preflight-scope

tw-preflight-scope is a Tailwind CSS plugin that allows you to scope Tailwind's preflight styles to a specific selector. This is useful when you want to use Tailwind CSS in a specific part of your application without affecting the global styles.

Installation

You can install tw-preflight-scope

1npm install tw-preflight-scope

Usage

1// tailwind.config.js
2const { twPreflightScope } = require('tw-preflight-scope');
3
4module.exports = {
5  // ... other configurations
6  plugins: [
7    twPreflightScope({ scope: '.tw-scope' }),
8    // ... other plugins
9  ],
10};

In this example, .tw-scope is the selector where you want to apply Tailwind's preflight styles. You can change this to any valid CSS selector.

How it works

This plugin scopes Tailwind's preflight styles to a specific selector. Here's how you can use it in a Next.js or React application:

1. It disables Tailwind's global preflight styles.
2. It applies the preflight styles only within the specified scope.

Example with React

In your root component (e.g., App.js or App.tsx):

1import './styles/tailwind.css'; // Your Tailwind imports
2
3function App() {
4  return {
5    /* components */
6  };
7}
8export default App;

1function TwScopedComponent() {
2  return (
3    <div className="tw-scope">
4      <h1 className="text-2xl font-bold">Hello, scoped Tailwind!</h1>
5    </div>
6  );
7}
8export default TwScopedComponent;

Tailwind's preflight styles will only be applied within the div with the tw-scope class.

Components inside this div will receive Tailwind's reset styles. Elements outside this div will not be affected by Tailwind's preflight styles.

This approach is particularly useful when integrating Tailwind into existing projects or when you need to isolate Tailwind's styles to a specific part of your application.