Download the PHP package jramke/tailwind-styled-content without Composer

On this page you can find all versions of the php package jramke/tailwind-styled-content. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package tailwind-styled-content

Tailwind Styled Content

Total downloads Stability TYPO3 versions Latest version

Easily use TYPO3 with Tailwind CSS. Tailwind Styled Content is an alternative for fluid_styled_content using Tailwind CSS, providing a clean, robust and modern starting point for building websites with TYPO3.

TYPO3 + Tailwind CSS

What's Included

Content Elements

Tailwind Styled Content ships basic templates for (not all) default content elements. Its important to say, that we made some opinionated adjustments and settings. Thats why it is not a drop in replacement for fluid_styled_content and is more suitable for new projects.

Refer to the individual files for more details.

We’ve also introduced a Prose partial, which can be used as follows:

Form Elements

We override the default form element classes via YAML, as they were originally designed for Bootstrap. We use the form templates of version2.

Tailwind Plugins and Preset

Tailwind Styled Content comes with a Tailwind preset, a safelist and a plugin, which you can directly import from the composer package. No need for an additional npm package.

The preset extends Tailwind's default theme to better suit TYPO3 websites. It also includes the needed plugins like daisyUI, which makes Tailwind usable for non-component-based JS frameworks and tailwindcss/typography for RTE and default heading styling.

The Tailwind Styled Content plugin uses the .frame class to add robust and flexible spacing to all content elements. The combo classes added by the space_before_class and space_after_class fields, to adjusts the spacing of individual content elements, look like this: frame-space-(before|after)-(none|small|large). For further customization, check out the customization section.

Getting Started

1. Install Tailwind Styled Content (TSC)

Install it via Composer:

Note: For legacy installations, use the Extension Manager in the backend. Make sure to adjust the paths in your Tailwind config.

2. Initialize Tailwind

To initialize Tailwind, use PostCSS as recommended. Follow these instructions: Tailwind CSS Installation using PostCSS.

For an easy setup, use vite-asset-collector by Simon Praetorius and simply import the your CSS file in your JS entry file. More info here: Vite Asset Collector.

3. Install Additional Dependencies

As Tailwind Styled Content relies on daisyUI and @tailwindcss/typography, you need to install them as development dependencies:

4. Set Up Your Tailwind Config

Add Tailwind Styled Content to your tailwind.config.js. You'll need to define the content paths and safelist yourself, as they’re not merged with the preset.

Customization

Tailwind

For basic Tailwind customization, refer to the Tailwind docs.

daisyUI

To customize daisyUI, I would recommend this approach, where you extend an existing theme with your brand colors. More details are available in the daisyUI docs.

Tailwind Styled Content (TSC)

To customize Tailwind Styled Content, use the tsc object in your Tailwind config.

You can tweak the .frame component’s CSS by adjusting the default vertical padding, breakpoint-specific padding, and spacing for the combo classes. Set frame: false to opt-out of these styles entirely.

The default config looks like this:

Tailwind Typography

To customize the typography styles, extend your Tailwind config or override the Prose.html partial in your distribution extension. Learn more here.

Development

The development setup uses DDEV and is based on this example.

Start DDEV Project

Install JavaScript Dependencies

TYPO3

1. Setup the TYPO3 development environment for the needed version

The installations are then available at:

You can log into the backend with username admin and password Password1#.

2. Restore base database

or manually include the Tailwind Styled Content static TypoScript file and add this to the template:

4. Start the Tailwind CLI build process

Replace [VERSION] with the desired installation version (e.g. v12):

All versions of tailwind-styled-content with dependencies

PHP Build Version
Package Version
Requires php Version >=8.1
typo3/cms-core Version ^11.5 || ^12.4 || ^13.0 || dev-main
typo3/cms-fluid Version ^11.5 || ^12.4 || ^13.0 || dev-main
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package jramke/tailwind-styled-content contains the following files

Loading the files please wait ....