Configuration - TailwindCSS中文文档 | TailwindCSS中文网Tailwind CSS home pagev3.4.17Introducing CatalystA modern application UI kit for ReactThemeTailwind CSS on GitHubSearchNavigationNavigation定制Configurationv4.0 Beta Documentation →Preview the next Tailwind CSS.Because Tailwind is a framework for building bespoke user interfaces, it has been designed from the ground up with customization in mind. By default, Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations. tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,js}'], theme: { colors: { 'blue': '#1fb6ff', 'purple': '#7e5bef', 'pink': '#ff49db', 'orange': '#ff7849', 'green': '#13ce66', 'yellow': '#ffc82c', 'gray-dark': '#273444', 'gray': '#8492a6', 'gray-light': '#d3dce6', }, fontFamily: { sans: ['Graphik', 'sans-serif'], serif: ['Merriweather', 'serif'], }, extend: { spacing: { '8xl': '96rem', '9xl': '128rem', }, borderRadius: { '4xl': '2rem', } } }, } Every section of the config file is optional, so you only have to specify what you’d like to change. Any missing sections will fall back to Tailwind’s default configuration. ​Creating your configuration file Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package: npx tailwindcss init This will create a minimal tailwind.config.js file at the root of your project: tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: [], theme: { extend: {}, }, plugins: [], } ​Using a different file name To use a name other than tailwind.config.js, pass it as an argument on the command-line: npx tailwindcss init tailwindcss-config.js When you use a custom file name, you will need to specify it as a command-line argument when compiling your CSS with the Tailwind CLI tool: npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css If you’re using Tailwind as a PostCSS plugin, you will need to specify your custom configuration path in your PostCSS configuration: postcss.config.jsmodule.exports = { plugins: { tailwindcss: { config: './tailwindcss-config.js' }, }, } Alternatively, you can specify your custom configuration path using the @config directive: @config "./tailwindcss-config.js"; @tailwind base; @tailwind components; @tailwind utilities; Learn more about the @config directive in the Functions &amp; Directives documentation. ​Using ESM or TypeScript You can also configure Tailwind CSS in ESM or even TypeScript: tailwind.config.jstailwind.config.ts/** @type {import('tailwindcss').Config} */ export default { content: [], theme: { extend: {}, }, plugins: [], } When you run npx tailwindcss init, we’ll detect if your project is an ES Module and automatically generate your config file with the right syntax. You can also generate an ESM config file explicitly by using the --esm flag: npx tailwindcss init --esm To generate a TypeScript config file, use the --ts flag: npx tailwindcss init --ts ​Generating a PostCSS configuration file Use the -p flag if you’d like to also generate a basic postcss.config.js file alongside your tailwind.config.js file: npx tailwindcss init -p This will generate a postcss.config.js file in your project that looks like this: postcss.config.jsmodule.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ​Scaffolding the entire default configuration For most users we encourage you to keep your config file as minimal as possible, and only specify the things you want to customize. If you’d rather scaffold a complete configuration file that includes all of Tailwind’s default configuration, use the --full option: npx tailwindcss init --full You’ll get a file that matches the default configuration file Tailwind uses internally. ​Configuration options ​Content The content section is where you configure the paths to all of your HTML templates, JS components, and any other files that contain Tailwind class names. tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: [ './pages/**/*.{html,js}', './components/**/*.{html,js}', ], // ... } Learn more about configuring your content sources in the Content Configuration documentation. ​Theme The theme section is where you define your color palette, fonts, type scale, border sizes, breakpoints — anything related to the visual design of your site. tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { // ... theme: { colors: { 'blue': '#1fb6ff', 'purple': '#7e5bef', 'pink': '#ff49db', 'orange': '#ff7849', 'green': '#13ce66', 'yellow': '#ffc82c', 'gray-dark': '#273444', 'gray': '#8492a6', 'gray-light': '#d3dce6', }, fontFamily: { sans: ['Graphik', 'sans-serif'], serif: ['Merriweather', 'serif'], }, extend: { spacing: { '8xl': '96rem', '9xl': '128rem', }, borderRadius: { '4xl': '2rem', } } } } Learn more about the default theme and how to customize it in the theme configuration guide. ​Plugins The plugins section allows you to register plugins with Tailwind that can be used to generate extra utilities, components, base styles, or custom variants. tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { // ... plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio'), require('@tailwindcss/typography'), require('tailwindcss-children'), ], } Learn more about writing your own plugins in the plugin authoring guide. ​Presets The presets section allows you to specify your own custom base configuration instead of using Tailwind’s default base configuration. tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { // ... presets: [ require('@acmecorp/base-tailwind-config') ], // Project-specific customizations theme: { //... }, } Learn more about presets in the presets documentation. ​Prefix 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/** @type {import('tailwindcss').Config} */ module.exports = { prefix: 'tw-', } Now every class will be generated with the configured prefix: .tw-text-left { text-align: left; } .tw-text-center { text-align: center; } .tw-text-right { text-align: right; } /* etc. */ It’s important to understand that this prefix is added after any variant modifiers. That means that classes with responsive or state modifiers like sm: or hover: will still have the responsive or state modifier first, with your custom prefix appearing after the colon: &lt;div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500"> &lt;!-- --> &lt;/div> The dash modifier for negative values should be added before your prefix, so -mt-8 would become -tw-mt-8 if you’ve configured tw- as your prefix: &lt;div class="-tw-mt-8"> &lt;!-- --> &lt;/div> Prefixes are only added to classes generated by Tailwind; no prefix will be added to your own custom classes. That means if you add your own custom utility like this: @layer utilities { .bg-brand-gradient { /* ... */ } } …the generated variants will not have your configured prefix: .bg-brand-gradient { /* ... */ } .hover\:bg-brand-gradient:hover { /* ... */ } If you’d like to prefix your own utilities as well, just add the prefix to the class definition: @layer utilities { .tw-bg-brand-gradient { /* ... */ } } ​Important The important option lets you control whether or not Tailwind’s utilities should be marked with !important. This can be really useful when using Tailwind with existing CSS that has high specificity selectors. To generate utilities as !important, set the important key in your configuration options to true: tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { important: true, } Now all of Tailwin
