Content Configuration - TailwindCSS中文文档 | TailwindCSS中文网Tailwind CSS home pagev3.4.17Introducing CatalystA modern application UI kit for ReactThemeTailwind CSS on GitHubSearchNavigationNavigation定制Content Configurationv4.0 Beta Documentation →Preview the next Tailwind CSS.The content section of your tailwind.config.js file is where you configure the paths to all of your HTML templates, JavaScript components, and any other source files that contain Tailwind class names. tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: [ './pages/**/*.{html,js}', './components/**/*.{html,js}', ], // ... } This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project. ​Configuring source paths Tailwind CSS works by scanning all of your HTML, JavaScript components, and any other template files for class names, then generating all of the corresponding CSS for those styles. In order for Tailwind to generate all of the CSS you need, it needs to know about every single file in your project that contains any Tailwind class names. Configure the paths to all of your content files in the content section of your configuration file: tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: [ './pages/**/*.{html,js}', './components/**/*.{html,js}' ], // ... } Paths are configured as glob patterns, making it easy to match all of the content files in your project without a ton of configuration: Use * to match anything except slashes and hidden files Use ** to match zero or more directories Use comma separate values between {} to match against a list of options Tailwind uses the fast-glob library under-the-hood — check out their documentation for other supported pattern features. Paths are relative to your project root, not your tailwind.config.js file, so if your tailwind.config.js file is in a custom location, you should still write your paths relative to the root of your project. ​Pattern recommendations For the best performance and to avoid false positives, be as specific as possible with your content configuration. If you use a really broad pattern like this one, Tailwind will even scan node_modules for content which is probably not what you want: Don’t use extremely broad patterns tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: [ './**/*.{html,js}', ], // ... } If you have any files you need to scan that are at the root of your project (often an index.html file), list that file independently so your other patterns can be more specific: Be specific with your content patterns tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: [ './components/**/*.{html,js}', './pages/**/*.{html,js}', './index.html', ], // ... } Some frameworks hide their main HTML entry point in a different place than the rest of your templates (often public/index.html), so if you are adding Tailwind classes to that file make sure it’s included in your configuration as well: Remember to include your HTML entry point if applicable tailwind.config.jsmodule.exports = { content: [ './public/index.html', './src/**/*.{html,js}', ], // ... } If you have any JavaScript files that manipulate your HTML to add classes, make sure you include those as well: tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: [ // ... './src/**/*.js', ], // ... } src/spaghetti.js// ... menuButton.addEventListener('click', function () { let classList = document.getElementById('nav').classList classList.toggle('hidden') classList.toggle('block') }) // ... It’s also important that you don’t scan any CSS files — configure Tailwind to scan your templates where your class names are being used, never the CSS file that Tailwind is generating. Never include CSS files in your content configuration tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: [ './src/**/*.css', ], // ... } ​Class detection in-depth The way Tailwind scans your source code for classes is intentionally very simple — we don’t actually parse or execute any of your code in the language it’s written in, we just use regular expressions to extract every string that could possibly be a class name. For example, here’s some HTML with every potential class name string individually highlighted: &lt;div class="md:flex"> &lt;div class="md:flex-shrink-0"> &lt;img class="rounded-lg md:w-56" src="/img/shopping.jpg" alt="Woman paying for a purchase"> &lt;/div> &lt;div class="mt-4 md:mt-0 md:ml-6"> &lt;div class="uppercase tracking-wide text-sm text-indigo-600 font-bold"> Marketing &lt;/div> &lt;a href="/get-started" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline"> Finding customers for your new business &lt;/a> &lt;p class="mt-2 text-gray-600"> Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers. &lt;/p> &lt;/div> &lt;/div> We don’t just limit our search to class=&quot;...&quot; attributes because you could be using classes anywhere, like in some JavaScript for toggling a menu: spaghetti.js&lt;script> menuButton.addEventListener('click', function () { let classList = document.getElementById('nav').classList classList.toggle('hidden') classList.toggle('block') }) &lt;/script> By using this very simple approach, Tailwind works extremely reliably with any programming language, like JSX for example: Button.jsxconst sizes = { md: 'px-4 py-2 rounded-md text-base', lg: 'px-5 py-3 rounded-lg text-lg', } const colors = { indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white', cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white', } export default function Button({ color, size, children }) { let colorClasses = colors[color] let sizeClasses = sizes[size] return ( &lt;button type="button" className={`font-bold ${sizeClasses} ${colorClasses}`}> {children} &lt;/button> ) } ​Dynamic class names The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files. If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS: Don’t construct class names dynamically &lt;div class="text-{{ error ? 'red' : 'green' }}-600">&lt;/div> In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full: Always use complete class names &lt;div class="{{ error ? 'text-red-600' : 'text-green-600' }}">&lt;/div> If you’re using a component library like React or Vue, this means you shouldn’t use props to dynamically construct classes: Don’t use props to build class names dynamically function Button({ color, children }) { return ( &lt;button className={`bg-${color}-600 hover:bg-${color}-500 ...`}> {children} &lt;/button> ) } Instead, map props to complete class names that are statically detectable at build-time: Always map props to static class names function Button({ color, children }) { const colorVariants = { blue: 'bg-blue-600 hover:bg-blue-500', red: 'bg-red-600 hover:bg-red-500', } return ( &lt;button className={`${colorVariants[color]} ...`}> {children} &lt;/button> ) } This has the added benefit of letting you map different prop values to different color shades for example: function Button({ color, children }) { const colorVariants = { blue: 'bg-blue-600 hover:bg-blue-500 text-white', red: 'bg-red-500 hover:bg-red-400 text-white', yellow: 'bg-yellow-300 hover:bg-yellow-400 text-black', } return ( &lt;button className={`${colorVariants[color]} ...`}> {children} &lt;/button> ) } As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time. ​Working with third-party libraries If y
